/* Shared Auragon shell; the felt and reels keep their own game artwork. */
body {
    background: var(--aura-void);
    color: var(--aura-cream);
    font-family: Satoshi, system-ui, sans-serif;
    overflow: auto;
    height: auto;
    min-height: 100dvh;
    width: 100%;
    user-select: auto;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
        env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app {
    height: auto;
    min-height: 100dvh;
}
.screen {
    position: relative;
    height: auto;
    min-height: 100dvh;
}
.screen:not(.active) {
    display: none !important;
}
#loader {
    gap: 16px;
    padding: 32px 20px;
    text-align: center;
    background: var(--aura-void);
}
#loader h2 {
    font-family: var(--aura-display);
    font-size: 28px;
    color: var(--aura-cream);
    text-shadow: none;
}
#loader p {
    color: var(--aura-muted);
}
#table,
#cabinet {
    width: min(1280px, 100%);
    margin: auto;
    min-height: 100dvh;
    height: auto;
    border: 0;
    outline: 0;
    padding: 20px;
    gap: 16px;
}
#table {
    background: radial-gradient(
        ellipse at 50% 38%,
        #123124,
        #0b1511 65%,
        #090c0c
    );
    min-height: max(760px, 100dvh);
}
header {
    position: relative;
    z-index: 5;
    background: #0e0a12e8;
    border-color: var(--aura-border);
    border-radius: 14px;
    backdrop-filter: none;
    padding: 14px 18px;
    gap: 16px;
    flex-shrink: 0;
}
.brand-text {
    font-family: var(--aura-display);
    color: var(--aura-cream);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: none;
}
.back-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 99px;
    border: 1px solid var(--aura-border);
    background: #ffffff05;
    color: var(--aura-cream);
    font-weight: 400;
    white-space: nowrap;
}
.back-btn:hover {
    border-color: var(--aura-pink);
    background: #ff1f9312;
    transform: none;
}
.user-profile {
    min-width: 0;
}
.user-profile span {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-profile img {
    border: 1px solid var(--aura-border);
}
#balance-amount {
    color: var(--aura-gold);
    text-shadow: none;
    font-family: var(--aura-display);
    font-size: 22px;
}
.balance-container .label {
    color: var(--aura-muted);
    font-family: var(--aura-mono);
}
.hud-panel,
.control-hud {
    background: #0e0a12ed;
    border-color: var(--aura-border);
    backdrop-filter: none;
    box-shadow: 0 8px 28px #0004;
}
.hud-panel {
    flex-shrink: 0;
}
.buttons-row {
    flex-wrap: wrap;
}
.action-btn {
    min-height: 48px;
    min-width: 76px;
    flex: 1;
    font-family: Satoshi, system-ui, sans-serif;
    letter-spacing: 0.04em;
}
#deal-btn {
    background: linear-gradient(100deg, var(--aura-pink), var(--aura-magenta));
    color: white;
    border-color: transparent;
    min-height: 48px;
}
.sound-toggle-wrap {
    min-width: 44px;
}
.bj-switch,
.auto-switch,
.turbo-switch {
    outline-offset: 4px;
}
.bj-switch:focus-within,
.auto-switch:focus-within,
.turbo-switch:focus-within {
    outline: 2px solid var(--aura-teal);
}
.sound-label {
    color: var(--aura-muted);
}
.hand-score,
.player-status-badge {
    font-family: var(--aura-mono);
}
.sit-here-btn {
    min-height: 44px;
}
.dealer-section {
    flex-shrink: 0;
}
.cards-container {
    flex-wrap: wrap;
}
.seat-container {
    min-width: 0;
}
.seat-hand {
    max-width: 100%;
}
.seats-arc {
    flex-shrink: 0;
    margin-bottom: 14px;
}
.felt-inscriptions {
    opacity: 0.6;
}
.felt-line.font-rowdies {
    font-family: var(--aura-display);
}
#game-message {
    font-family: Satoshi, system-ui, sans-serif;
}
.connection-status {
    font: 10px var(--aura-mono);
    color: var(--aura-muted);
    text-align: center;
    min-height: 14px;
}
.connection-status[data-state='live'] {
    color: var(--aura-teal);
}
.connection-status[data-state='reconnecting'] {
    color: var(--aura-gold);
}
#bubble-bg {
    position: fixed;
}
#cabinet {
    background: #07050955;
}
.control-hud {
    flex-shrink: 0;
}
.grid-section {
    flex: none;
    width: 100%;
    max-width: 980px;
    align-self: center;
    margin-inline: auto;
}
.reels-viewport {
    height: clamp(225px, 36vw, 420px);
}
.info-btn,
#info-close-btn {
    min-width: 44px;
    min-height: 44px;
}
.info-modal {
    max-height: min(80dvh, 650px);
    overflow-y: auto;
}
.info-modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #0e0a12;
}
.status-message-box {
    flex-shrink: 0;
}
#status-text {
    font-family: Satoshi, system-ui, sans-serif;
    letter-spacing: 0.03em;
}
.bet-chip {
    min-height: 44px;
    min-width: 44px;
}
.big-win-overlay,
.fs-trigger-overlay,
.fs-summary-overlay {
    overflow: auto;
    padding: 20px;
}
.reconnect-result {
    margin: 12px auto;
    display: block;
}
@media (max-width: 900px) {
    #table,
    #cabinet {
        padding: 12px;
        gap: 12px;
    }
    header {
        padding: 10px 12px;
    }
    .user-profile span {
        display: none;
    }
    #table {
        min-height: max(740px, 100dvh);
    }
}
@media (max-width: 600px) {
    #table,
    #cabinet {
        padding: 8px;
        gap: 10px;
        min-height: 100dvh;
    }
    header {
        padding: 8px 10px;
        gap: 8px;
    }
    .header-left {
        gap: 8px;
    }
    .back-btn {
        padding: 10px 12px;
    }
    .brand-text {
        font-size: 15px;
    }
    #balance-amount {
        font-size: 19px;
    }
    .user-profile img {
        width: 28px;
        height: 28px;
    }
    .seats-arc:not(:has(.my-seat)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: none;
        row-gap: 18px;
    }
    .seats-arc:not(:has(.my-seat)) .seat-felt {
        width: 78px;
        height: 78px;
    }
    .seats-arc {
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px 3px;
    }
    .seat-container:not(.my-seat) .seat-cards {
        flex-wrap: wrap;
        max-width: 100%;
        gap: 4px 0;
    }
    .seat-container.my-seat .seat-hand {
        width: 100%;
    }
    .seat-container.my-seat .seat-cards {
        flex-wrap: wrap;
    }
    .dealer-section .card-item {
        width: 50px;
        height: 72px;
    }
    .dealer-section .card-suit {
        font-size: 26px;
    }
    .dealer-section .card-top,
    .dealer-section .card-bottom {
        font-size: 12px;
    }
    .dealer-section .cards-container {
        min-height: 80px;
    }
    .hud-panel {
        position: sticky;
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 10;
        max-width: 100%;
        padding: 14px 12px;
        border-color: #ffffff28;
    }
    .spectator-hud {
        position: static;
    }
    .chips-row {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px;
    }
    .chip {
        width: 100%;
        max-width: 48px;
        min-width: 0;
        min-height: 44px;
        height: 44px;
    }
    .current-bet-display {
        font-size: 12px;
    }
    .buttons-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .action-btn {
        font-size: 12px;
        min-width: 0;
    }
    .hud-header {
        gap: 8px;
    }
    .reels-viewport {
        height: clamp(210px, 64vw, 340px);
    }
    .control-hud {
        padding: 14px 10px;
        gap: 16px;
    }
    .info-modal {
        position: fixed;
        inset: 8% 12px auto;
        max-height: 84dvh;
        z-index: 1000;
        width: auto;
    }
    .info-modal-body {
        overflow: auto;
    }
    .info-symbol-row {
        flex-wrap: wrap;
    }
    .info-symbol-card {
        min-width: 0;
    }
    .info-payout-table {
        font-size: 11px;
    }
    .fs-info-row {
        line-height: 1.6;
    }
    .bet-chips-container {
        flex-wrap: wrap;
    }
    .bet-controls button {
        min-width: 44px;
        min-height: 44px;
    }
    .fs-summary-content,
    .fs-trigger-content,
    .big-win-content {
        max-width: 100%;
        max-height: 85dvh;
        overflow: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    #bubble-bg .bubble {
        display: none;
    }
}

.grid-cell {
    height: var(--cell-height, 110px);
}
dialog.info-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(620px, calc(100% - 24px));
    height: fit-content;
    max-height: 85dvh;
    padding: 20px;
    background: var(--aura-ink);
    border: 1px solid var(--aura-border);
    color: var(--aura-cream);
    border-radius: 16px;
    animation: none;
    overflow: auto;
    box-shadow: 0 24px 80px #000a;
}
dialog.info-modal:not([open]) {
    display: none;
}
dialog.info-modal::backdrop {
    background: #000a;
    backdrop-filter: blur(4px);
}
dialog .info-modal-body {
    overflow: visible;
    max-height: none;
    padding: 0;
}
dialog .info-modal-header {
    background: var(--aura-ink);
}

#table .seat-container.active-turn .seat-felt {
    border-color: var(--aura-pink);
    box-shadow:
        0 0 22px #ff1f9330,
        inset 0 4px 12px #0008;
    animation: none;
}
#table .bet-chip {
    background: var(--aura-gold);
    color: var(--aura-void);
    border-color: #ffe6a1;
    text-shadow: none;
}
#table .action-btn.hit {
    background: linear-gradient(100deg, var(--aura-pink), var(--aura-magenta));
    border-color: transparent;
    color: white;
}
#table .action-btn.stand,
#table .action-btn.double,
#table .action-btn.split {
    background: #ffffff08;
    border: 1px solid var(--aura-border);
    color: var(--aura-cream);
    box-shadow: none;
}
#table .action-btn:hover {
    border-color: var(--aura-pink);
}
@media (max-width: 600px) {
    .dealer-section .card-item {
        padding: 4px;
    }
    .dealer-section .card-top,
    .dealer-section .card-bottom {
        font-size: 9px;
        line-height: 1;
    }
    .dealer-section .card-suit {
        font-size: 18px;
        line-height: 1;
    }
    .seat-container.my-seat .seat-felt {
        width: 80px;
        height: 80px;
    }
    .seat-container.my-seat .player-avatar {
        width: 26px;
        height: 26px;
    }
    .felt-inscriptions .felt-line.font-rowdies {
        font-size: 14px;
    }
    .felt-inscriptions .felt-line.sub {
        font-size: 9px;
    }
    .seats-arc {
        scroll-margin-bottom: 220px;
    }
}

/* Keep the slot switches and spin button within narrow tablet widths. */
@media (min-width: 601px) and (max-width: 900px) {
    #cabinet .control-hud {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
    }
    #cabinet .control-left {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    #cabinet .control-right {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        align-items: flex-end;
    }
    #cabinet .control-center {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        justify-content: center;
        flex-wrap: wrap;
    }
}