/* === Splash Animations === */
@keyframes wordmark-drop {
    0%   { opacity: 0; transform: translateY(-12px); letter-spacing: 0.6em; }
    100% { opacity: 1; transform: translateY(0);     letter-spacing: 0.16em; }
}

@keyframes underline-draw {
    0%   { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

@keyframes tagline-fade {
    0%   { opacity: 0;    transform: translateY(6px); }
    100% { opacity: 0.85; transform: translateY(0);   }
}

@keyframes loading-dots {
    0%, 20% { opacity: 0.2; }
    50%     { opacity: 1;   }
    100%    { opacity: 0.2; }
}

@keyframes particle-drift {
    0%   { transform: translate(0, 0);                              opacity: 0;   }
    20%  {                                                           opacity: 0.7; }
    100% { transform: translate(var(--dx, 30px), var(--dy, -80px)); opacity: 0;   }
}

/* === Shared Screen Layout ===
   Centered and clipped on wide viewports the same way `.game-table` /
   `.menu-lobby` are: `position: fixed` + `inset: 0` + `margin: auto` with
   max-width/max-height caps the content area on big desktop windows so the
   surrounding green doesn't sprawl out to 1920×1080. The body's #0d3d1a
   background letterboxes the four sides. The splash screen opts out below —
   it's meant to fill the viewport edge-to-edge. */
.screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: 1100px;
    max-height: 820px;
    background: radial-gradient(ellipse at center, #1e7a3a 0%, #145a28 60%, #0d3d1a 100%);
    color: #e0e0e0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* === Splash Screen ===
   Splash fills the viewport edge-to-edge — the particle field and centered
   wordmark assume a full-screen canvas, not a letterboxed card. */
.splash-screen {
    background: radial-gradient(ellipse at 50% 45%, #1d3a26 0%, #0a1810 70%, #050a07 100%);
    position: relative;
    inset: auto;
    margin: 0;
    height: 100vh;
    max-width: none;
    max-height: none;
    overflow: hidden;
    cursor: wait;
    gap: 0;
}

.splash-screen.splash-screen-ready { cursor: pointer; }

.splash-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--te-accent-gold);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.95), 0 0 2px rgba(255, 215, 0, 1);
    opacity: 0;
    pointer-events: none;
}

.splash-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* WASM only: static index.html already played the intro animations;
   suppress replay when Blazor swaps in the component. */
.splash-no-animate .splash-wordmark,
.splash-no-animate .splash-underline,
.splash-no-animate .splash-tagline { animation: none; }

.splash-wordmark {
    font: var(--te-font-weight-heavy) clamp(2rem, 6vw, 3.2rem) / 1 var(--te-font-display);
    color: var(--te-accent-gold);
    letter-spacing: 0.16em;
    text-shadow: 0 4px 24px rgba(255, 215, 0, 0.4), 0 2px 0 rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    animation: wordmark-drop 0.8s 0.1s cubic-bezier(.2,.8,.2,1) backwards;
    white-space: nowrap;
}

.splash-underline {
    width: clamp(160px, 40vw, 280px);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--te-accent-gold), transparent);
    margin-top: 12px;
    transform-origin: center;
    animation: underline-draw 0.6s 0.7s cubic-bezier(.2,.8,.2,1) backwards;
}

.splash-tagline {
    margin-top: 14px;
    font-size: clamp(0.7rem, 2vw, 0.86rem);
    color: #cfd8d2;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 500;
    animation: tagline-fade 0.6s 1.1s ease-out backwards;
}

.splash-loading {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.splash-loading .splash-dots { transition: opacity 0.35s ease; }
.splash-loading.splash-loaded .splash-dots { opacity: 0; pointer-events: none; }
.splash-loading.splash-loaded .splash-tap { opacity: 0.85; }

.splash-dots {
    display: flex;
    gap: 8px;
}

.splash-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--te-accent-gold);
    animation: loading-dots 1.4s ease-in-out infinite;
}

.splash-dot:nth-child(2) { animation-delay: 0.2s; }
.splash-dot:nth-child(3) { animation-delay: 0.4s; }

.splash-tap {
    font-size: clamp(0.5rem, 1.5vw, 0.6rem);
    color: #7a8c80;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.splash-strap {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.44rem, 1.3vw, 0.55rem);
    color: #5a7264;
    letter-spacing: 0.3em;
    font-weight: 500;
    white-space: nowrap;
}

.btn-start {
    background: #e74c3c;
    color: white;
    font-size: 1.1rem;
    padding: 14px 48px;
    min-height: 48px;
}

/* === Main Menu Screen === */
.menu-screen {
    gap: 32px;
}

.menu-title {
    font: var(--type-h1);
    color: var(--color-fg-accent);
    text-shadow: var(--te-shadow-text);
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: clamp(200px, 40vw, 320px);
}

/* === Main Menu — "Lobby Felt" variant ===
   Felt-table metaphor: header chips above, three card-fan "seats" arranged
   on an oval of green felt, bottom navigation rail. Adapted from
   docs/old/design/MainMenu_C_Lobby.jsx. */
.menu-lobby {
    /* override the column-flex centering applied by .screen so we can
       lay out header / felt / strip / rail as a vertical stack. Cap the
       visible extent on wide desktop windows the same way .game-table does —
       body background letterboxes the surrounding area. */
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    align-items: stretch;
    justify-items: stretch;
    justify-content: stretch;
    align-content: stretch;
    gap: 0;
    padding: 0;
    position: fixed;
    inset: 0;
    margin: auto;
    height: auto;
    max-width: 1100px;
    max-height: 820px;
    color: var(--te-fg-body);
    font-family: var(--te-font-body);
}

.lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    z-index: 3;
}

.lobby-wordmark-title {
    font: var(--te-font-weight-heavy) 1.1rem / 1 var(--te-font-display);
    color: var(--te-accent-gold);
    text-shadow: var(--te-shadow-text);
    white-space: nowrap;
}

.lobby-wordmark-sub {
    color: #9fb7a8;
    letter-spacing: 0.22em;
    font-size: 0.56rem;
    font-weight: 500;
    margin-top: 1px;
    white-space: nowrap;
}

.lobby-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lobby-felt-wrap {
    position: relative;
    min-height: 0; /* allow grid row to shrink */
    height: 100%;  /* fill the 1fr row so the absolute felt has a non-zero containing block */
}

.lobby-felt {
    position: absolute;
    inset: 0 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        var(--te-table-green-1) 0%,
        var(--te-table-green-2) 75%,
        var(--te-table-green-3) 100%);
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.6),
        0 2px 20px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 215, 0, 0.18);
}

.lobby-felt-ring {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 215, 0, 0.15);
    pointer-events: none;
}

.lobby-seats {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 20px;
    gap: 12px;
}

.lobby-seat-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 170px;
}

.lobby-seat {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 170px;
    transition: transform 0.15s ease;
}

.lobby-seat-stack > .lobby-seat { width: 100%; }

.lobby-seat-secondary {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--seat-accent, var(--te-accent-gold)) 40%, transparent);
    color: var(--seat-accent, var(--te-accent-gold));
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.lobby-seat-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lobby-seat:hover {
    transform: translateY(-2px);
}

.lobby-seat:focus-visible {
    outline: 2px solid var(--te-accent-gold);
    outline-offset: 4px;
    border-radius: 12px;
}

.lobby-seat-fan {
    position: relative;
    width: 90px;
    height: 78px;
    display: grid;
    place-items: center;
    transform: rotate(var(--seat-angle, 0deg));
}

.lobby-seat-card {
    position: absolute;
    width: 48px;
    height: 66px;
    background: var(--te-card-face-gradient);
    border-radius: 5px;
    box-shadow: var(--te-shadow-card);
}

.lobby-seat-card-bg {
    border: 1px solid rgba(42, 42, 42, 0.5);
}

.lobby-seat-card-bg-l { transform: rotate(-18deg) translateY(5.4px); }
.lobby-seat-card-bg-r { transform: rotate(18deg)  translateY(5.4px); }

.lobby-seat-card-front {
    border: 1px solid var(--seat-accent, var(--te-accent-gold));
    box-shadow:
        var(--te-shadow-card),
        0 0 10px color-mix(in srgb, var(--seat-accent, var(--te-accent-gold)) 31%, transparent);
    display: flex;
    flex-direction: column;
    padding: 3px 4px;
    color: var(--seat-accent, var(--te-accent-gold));
    font-weight: 800;
}

.lobby-seat-card-rank {
    font-family: var(--te-font-body);
    font-size: 14px;
    line-height: 1;
}

.lobby-seat-card-rank-bot {
    align-self: flex-end;
    margin-top: auto;
    font-family: var(--te-font-display);
    font-size: 18px;
    transform: rotate(180deg);
}

.lobby-seat-card-suit {
    font-size: 9px;
    margin-top: 1px;
}

.lobby-seat-pill {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid color-mix(in srgb, var(--seat-accent, var(--te-accent-gold)) 40%, transparent);
    border-radius: 12px;
    padding: 5px 12px;
    text-align: center;
    min-width: 120px;
}

.lobby-seat-pill-primary {
    background: linear-gradient(180deg,
        var(--te-accent-gold),
        color-mix(in srgb, var(--te-accent-gold) 80%, black));
    border-color: var(--te-accent-gold);
}

.lobby-seat-title {
    font: var(--te-font-weight-heavy) 0.95rem / 1 var(--te-font-display);
    color: #fff;
    letter-spacing: 0.02em;
}

.lobby-seat-pill-primary .lobby-seat-title { color: #2a1a00; }

.lobby-seat-tagline {
    font-size: 0.62rem;
    color: #cfd8d2;
    margin-top: 2px;
}

.lobby-seat-pill-primary .lobby-seat-tagline { color: #3d2a08; }

.lobby-seat-meta {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--seat-accent, var(--te-accent-gold));
    text-align: center;
}

.lobby-rail {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 4px 12px 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    background: linear-gradient(180deg,
        rgba(7, 21, 12, 0),
        rgba(0, 0, 0, 0.55) 30%,
        rgba(0, 0, 0, 0.85));
    border-top: 1px solid rgba(255, 215, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.08);
    z-index: 3;
}

.lobby-rail-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #e0e6e2;
    border-radius: 10px;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 44px;
    font-family: var(--te-font-body);
    transition: background 0.15s ease, color 0.15s ease;
}

.lobby-rail-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lobby-rail-icon {
    font-size: 18px;
    line-height: 1;
}

.lobby-rail-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Disabled rail buttons (Shop / Daily until backing features ship) — dim
   the icon + label and stamp a small "Soon" tag in the corner. The native
   `disabled` attribute already blocks clicks; pointer-events: none keeps the
   hover background suppressed. Dimming is applied per-child (not via a
   button-level `opacity`) so the "Soon" pill keeps its full contrast — CSS
   opacity composites at the layer boundary, so a child cannot exceed the
   parent's opacity. */
.lobby-rail-btn-disabled {
    cursor: default;
    pointer-events: none;
    position: relative;
}
.lobby-rail-btn-disabled .lobby-rail-icon,
.lobby-rail-btn-disabled .lobby-rail-label {
    opacity: 0.55;
    filter: saturate(0.4);
}
.lobby-rail-soon {
    position: absolute;
    top: 1px;
    right: 4px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: var(--te-fg-quiet, #9fb7a8);
    border-radius: 999px;
    padding: 0 5px;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Compact viewports — shrink seats so three fit on narrow screens. */
@media (max-width: 640px) {
    .lobby-seats { padding: 0 8px; gap: 6px; }
    .lobby-seat { width: auto; min-width: 0; flex: 1 1 0; }
    .lobby-seat-fan { width: 72px; height: 64px; }
    .lobby-seat-card { width: 40px; height: 56px; }
    .lobby-seat-pill { min-width: 0; padding: 4px 8px; }
    .lobby-seat-title { font-size: 0.78rem; }
    .lobby-seat-tagline { font-size: 0.56rem; }
}

/* Very short viewports (landscape phone) — flatten the oval into a
   cushion so the seats fit between header and rail. */
@media (max-height: 500px) {
    .lobby-felt { inset: 4px 16px; border-radius: 50% / 40%; }
    .lobby-felt-ring { inset: 6px; }
}

/* Portrait — stack the three lobby seats vertically. Three seats packed
   side-by-side at portrait widths squeezes the pills to nothing; a column
   reads cleanly and uses the spare vertical room. Placed after the
   (max-width: 640px) block so its `flex: 1 1 0` is reset. */
@media (orientation: portrait) {
    .lobby-seats {
        flex-direction: column;
        justify-content: center;
        padding: 16px;
        gap: 10px;
    }
    .lobby-seat {
        flex: 0 0 auto;
        width: min(80%, 280px);
    }
    /* The felt's oval is sized for a row of seats — when stacked, a
       circle clips the top/bottom seats. Reshape it into an upright
       cushion that follows the column. */
    .lobby-felt { inset: 8px 24px; border-radius: 40% / 50%; }
    .lobby-felt-ring { inset: 10px; }
}

.btn-menu-item {
    background: #2e7d32;
    color: white;
    font-size: 1.1rem;
    padding: 14px 32px;
    min-height: 48px;
    width: 100%;
}

.btn-menu-item:not(:disabled):hover {
    background: #388e3c;
}

.btn-menu-item.active {
    background: #1b5e20;
    outline: 2px solid #ffd700;
}

.menu-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: clamp(240px, 60vw, 480px);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.menu-banner-warning {
    background: rgba(230, 162, 30, 0.15);
    border: 1px solid rgba(230, 162, 30, 0.6);
    color: #ffd36b;
}

.menu-banner-close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.menu-banner-close:hover {
    opacity: 0.75;
}

/* === Game Setup Screen === */
.setup-screen {
    gap: 24px;
}

.setup-title {
    font-size: 1.6rem;
    color: #ffd700;
}

.setup-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: clamp(200px, 40vw, 320px);
}

.setup-label {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 4px;
}

.btn-start-game {
    background: #e74c3c;
    color: white;
    font-size: 1.1rem;
    padding: 14px 48px;
    min-height: 48px;
    margin-top: 8px;
}

/* === Rules Screen ===========================================================
   Felt-table layout matching ProfileScreen / QuickPlay setup. Two-column body
   with a sticky topic nav on the left and a scrolling content panel on the
   right. Reuses .qp-head / .qp-back / .qp-titles for the page header. */
.rules-screen {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    justify-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    padding: 14px 26px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    gap: 12px;
    color: var(--te-fg-strong);
    background: var(--te-table-felt, radial-gradient(ellipse at center, #1e7a3a 0%, #145a28 60%, #0d3d1a 100%));
}

.rules-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 14px;
    min-height: 0;
    /* Without overflow:hidden the inner nav (which has many items) can push
       the body row taller than its grid cell on short landscape screens,
       which then drags the right-column scroll target out of view. */
    overflow: hidden;
}

/* Narrow viewports: stack the topic nav above the content and let the whole
   body scroll. Mirrors the .profile-body portrait pattern. */
@media (orientation: portrait), (max-width: 640px) {
    .rules-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        align-content: start;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* Short landscape (e.g. 844×390 prototype frame, small phone in landscape):
   slim the sidebar so the 8 topics don't squeeze the content column off the
   bottom of the screen. */
@media (max-height: 400px) and (orientation: landscape) {
    .rules-body { grid-template-columns: 130px 1fr; gap: 10px; }
}

/* ---------- Topic nav (left column) ---------- */
.rules-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    /* Allow the nav to shrink inside its grid cell instead of pushing the
       body taller. If the topic list ever outgrows the available height,
       it scrolls instead of overflowing the layout. */
    min-height: 0;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.rules-nav::-webkit-scrollbar { width: 4px; }
.rules-nav::-webkit-scrollbar-track { background: transparent; }
.rules-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
}

.rules-nav-item {
    background: transparent;
    border: 1px solid transparent;
    color: var(--te-fg-muted);
    text-align: left;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (max-height: 400px) and (orientation: landscape) {
    .rules-nav { gap: 2px; }
    .rules-nav-item { padding: 5px 10px; font-size: 0.74rem; border-radius: 6px; }
}

.rules-nav-item:hover {
    background: rgba(0, 0, 0, 0.25);
    color: var(--te-fg-strong);
}

.rules-nav-item-on,
.rules-nav-item-on:hover {
    background: rgba(126, 200, 227, 0.12);
    border-color: rgba(126, 200, 227, 0.3);
    color: var(--te-fg-strong);
    font-weight: 700;
}

@media (orientation: portrait), (max-width: 640px) {
    /* Horizontal pill rail beats a tall stacked column when the body scrolls. */
    .rules-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }
    .rules-nav-item { padding: 6px 11px; font-size: 0.78rem; }
}

/* ---------- Content panel (right column) ---------- */
.rules-content {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 14px 18px 16px;
    overflow-y: auto;
    min-height: 0;
    color: var(--te-fg-body);

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.rules-content::-webkit-scrollbar { width: 6px; }
.rules-content::-webkit-scrollbar-track { background: transparent; }
.rules-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}

.rules-h {
    color: var(--te-accent-gold);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
}
.rules-h:not(:first-child) { margin-top: 16px; }

.rules-p {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--te-fg-body);
    margin: 0 0 8px;
}

.rules-p b { color: var(--te-fg-strong); }

.rules-p-quiet {
    color: var(--te-fg-muted);
    font-size: 0.78rem;
}

.rules-list {
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--te-fg-body);
}

.rules-list b { color: var(--te-fg-strong); }

/* ---------- "A hand at a glance" flow steps ---------- */
.rules-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.rules-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 9px 11px;
}

.rules-flow-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.18);
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: var(--te-accent-gold);
    display: grid;
    place-items: center;
    font-size: 0.74rem;
    font-weight: 800;
    flex-shrink: 0;
}

.rules-flow-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--te-fg-strong);
}

.rules-flow-desc {
    font-size: 0.7rem;
    color: var(--te-fg-muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* ---------- Rank rows (Card ranking & Levels) ----------
   .rules-ranks / .rules-ladder host real <CardView> components rendered
   small. The CardView .card.small style owns size, gradient, border and
   shadow — these wrappers only handle layout. */
.rules-ranks,
.rules-ladder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 4px 0 10px;
}

.rules-rank-arrow {
    color: var(--te-fg-muted);
    font-size: 0.95rem;
    align-self: center;
    padding: 0 2px;
}

/* ---------- Callout box ---------- */
.rules-callout {
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.08), rgba(0, 0, 0, 0.35));
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 4px 0 12px;
}

.rules-callout-title {
    font-size: 0.66rem;
    color: var(--te-accent-gold);
    letter-spacing: 0.14em;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.rules-callout-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-bottom: 8px;
}

.rules-callout-foot {
    font-size: 0.74rem;
    color: var(--te-fg-muted);
    line-height: 1.5;
}

.rules-callout-foot b { color: var(--te-fg-strong); }

/* Right-hand label in substitution-style examples ("→ Triple of Kings"). */
.rules-callout-result {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--te-accent-gold);
    align-self: center;
}

/* ---------- Combo / Levels tables (CSS grid; no <table>) ---------- */
.rules-table {
    display: grid;
    grid-template-columns: 1.3fr 1.6fr 1.3fr;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.rules-table-2col {
    grid-template-columns: 1fr 0.6fr;
}

.rules-thead {
    display: contents;
}

.rules-thead > span {
    background: rgba(0, 0, 0, 0.4);
    padding: 7px 12px;
    font-size: 0.62rem;
    color: var(--te-accent-gold);
    letter-spacing: 0.14em;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rules-trow {
    display: contents;
}

.rules-trow > span {
    padding: 7px 12px;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.rules-trow:last-child > span { border-bottom: none; }

.rules-tname {
    color: var(--te-fg-strong);
    font-weight: 700;
}

.rules-tdesc {
    color: var(--te-fg-muted);
}

.rules-texample {
    color: var(--te-accent-gold);
    font-family: var(--te-font-mono);
    letter-spacing: 0.04em;
}

.rules-tlevels {
    color: var(--te-accent-gold);
    font-weight: 800;
    font-family: var(--te-font-mono);
}

/* ---------- Bombs list ---------- */
.rules-bombs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 10px;
}

.rules-bomb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.rules-bomb-row:last-child {
    border-color: rgba(255, 215, 0, 0.45);
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.16), rgba(0, 0, 0, 0.3));
}

.rules-bomb-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--te-fg-muted);
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}

.rules-bomb-row:last-child .rules-bomb-num {
    background: var(--te-accent-gold);
    color: #2a1a00;
}

.rules-bomb-body {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.rules-bomb-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--te-fg-strong);
}

.rules-bomb-row:last-child .rules-bomb-name {
    color: var(--te-accent-gold);
}

.rules-bomb-note {
    font-size: 0.7rem;
    color: var(--te-fg-muted);
}

/* ---------- Glossary ---------- */
.rules-glossary {
    display: flex;
    flex-direction: column;
}

.rules-gloss-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.82rem;
}

.rules-gloss-row:last-child { border-bottom: none; }

.rules-gloss-term {
    color: var(--te-accent-gold);
    font-weight: 700;
}

.rules-gloss-def {
    color: var(--te-fg-body);
    line-height: 1.5;
}

@media (orientation: portrait), (max-width: 640px) {
    .rules-flow { grid-template-columns: 1fr; }
    .rules-gloss-row { grid-template-columns: 1fr; gap: 2px; }
}

/* === Settings Screen ========================================================
   Felt-table layout matching ProfileScreen / RulesScreen / QuickPlay setup.
   Two-column body: a sticky tab nav on the left and a scrolling content panel
   on the right. Reuses .qp-head / .qp-back / .qp-titles for the page header
   and .qp-toggle / .qp-toggle-row / .qp-section-label for toggle rows. */
.settings-screen {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    justify-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    padding: 14px 26px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    gap: 12px;
    color: var(--te-fg-strong);
    background: var(--te-table-felt, radial-gradient(ellipse at center, #1e7a3a 0%, #145a28 60%, #0d3d1a 100%));
}

/* 160px (vs Rules' 180px) — Settings has fewer, shorter tab labels and a
   narrower nav reads as more balanced against the wider content panel. */
.settings-body {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
}

@media (orientation: portrait), (max-width: 640px) {
    .settings-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        align-content: start;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media (max-height: 400px) and (orientation: landscape) {
    .settings-body { grid-template-columns: 130px 1fr; gap: 10px; }
}

/* ---------- Tab nav (left column) ---------- */
.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.settings-nav::-webkit-scrollbar { width: 4px; }
.settings-nav::-webkit-scrollbar-track { background: transparent; }
.settings-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
}

.settings-nav-item {
    background: transparent;
    border: 1px solid transparent;
    color: var(--te-fg-muted);
    text-align: left;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.settings-nav-item:hover {
    background: rgba(0, 0, 0, 0.25);
    color: var(--te-fg-strong);
}

.settings-nav-item-on,
.settings-nav-item-on:hover {
    background: rgba(126, 200, 227, 0.12);
    border-color: rgba(126, 200, 227, 0.3);
    color: var(--te-fg-strong);
    font-weight: 700;
}

@media (max-height: 400px) and (orientation: landscape) {
    .settings-nav { gap: 2px; }
    .settings-nav-item { padding: 5px 10px; font-size: 0.74rem; border-radius: 6px; }
}

@media (orientation: portrait), (max-width: 640px) {
    .settings-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }
    .settings-nav-item { padding: 6px 11px; font-size: 0.78rem; }
}

/* ---------- Content panel (right column) ---------- */
.settings-content {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 14px 18px 16px;
    overflow-y: auto;
    min-height: 0;
    color: var(--te-fg-body);
    display: flex;
    flex-direction: column;
    gap: 8px;

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.settings-content::-webkit-scrollbar { width: 6px; }
.settings-content::-webkit-scrollbar-track { background: transparent; }
.settings-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}

/* ---------- Generic non-toggle setting row ---------- */
.settings-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.settings-row-label {
    flex: 1;
    min-width: 0;
}

.settings-row-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--te-fg-strong);
}

.settings-row-hint {
    font-size: 0.7rem;
    color: var(--te-fg-muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* ---------- Preset pill group (e.g. AI delay Fast/Normal/Slow) ---------- */
.settings-presets {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Stacked variant: pills wrap onto multiple rows when the container is too
   narrow for one line. Used by the in-game options overlay where labels
   like "Intermediate" can't fit four-abreast in 280px. */
.settings-presets-stacked {
    flex-wrap: wrap;
}

.settings-preset {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--te-fg-muted);
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    /* inline-flex so chips that embed an inline pill (e.g. the "Soon" badge on
       a Coming Soon difficulty) keep the badge vertically centred with the
       label. No-op for chips with a single text node. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.settings-preset:hover {
    background: rgba(0, 0, 0, 0.25);
    color: var(--te-fg-strong);
}

.settings-preset-on,
.settings-preset-on:hover {
    background: rgba(126, 200, 227, 0.18);
    border-color: rgba(126, 200, 227, 0.5);
    color: var(--te-fg-strong);
}

/* Difficulty preset gated as "Coming Soon" — keeps the row in the radio group
   for visibility but blocks selection. The native disabled attribute already
   prevents clicks; this stops the hover affordance and dims the label so the
   inline pill stays the focal point. */
.settings-preset-disabled,
.settings-preset-disabled:hover {
    background: transparent;
    color: var(--te-fg-muted);
    opacity: 0.55;
    cursor: not-allowed;
}

/* Compact variant of the shared .qp-coming-pill for the in-game overlay,
   where horizontal space is tight inside the radio chips. */
.ingame-soon-pill {
    font-size: 0.5rem;
    padding: 1px 6px;
    letter-spacing: 0.1em;
}

/* ---------- One-shot action button (Reset hints) ---------- */
.settings-action {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: var(--te-accent-gold);
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.settings-action:hover {
    background: rgba(255, 215, 0, 0.14);
}

.settings-action-done,
.settings-action-done:hover {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--te-fg-muted);
    opacity: 0.7;
    cursor: default;
}


/* === About section (inlined in Settings > About tab) === */
.about-content {
    max-width: 640px;
    padding: 4px 0 16px;
}

.about-title {
    color: #ffd700;
    font-size: 1.8rem;
    margin: 8px 0 4px;
}

.about-tagline {
    color: #ccc;
    font-size: 0.95rem;
    margin: 0 0 20px;
}

.about-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin: 0 0 20px;
    font-size: 0.9rem;
}

.about-meta dt {
    color: #888;
}

.about-meta dd {
    color: #e0e0e0;
    margin: 0;
}

.about-content section h3 {
    color: #ffd700;
    font-size: 1.1rem;
    margin: 16px 0 6px;
}

.about-content section p,
.about-content section li {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.5;
}

.about-links {
    padding-left: 20px;
    margin: 4px 0;
}

.about-links a {
    color: #6bc96b;
    text-decoration: none;
}

.about-links a:hover {
    text-decoration: underline;
}

/* === Profile Screen ============================================== */
/* Layout follows docs/mockups/profile-redesign.html (variant P1):
   identity stage on the left, edit-and-link sections on the right.
   The screen reuses the .qp-head / .qp-back / .qp-titles primitives
   and the .lobby-chip-coins header chip from the rest of the lobby
   surface so it sits in the same visual family as Ranked / QuickPlay. */

.profile-screen {
    /* Override .screen's flex-center: drive our own grid layout
       and stretch grid children to fill the viewport. Mirrors the
       container shape used by .rk-screen / .qp-setup-screen so all
       three redesigned screens behave identically across sizes. */
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    justify-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    padding: 14px 26px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    gap: 12px;
    color: var(--te-fg-strong);
    background: var(--te-table-felt, radial-gradient(ellipse at center, #1e7a3a 0%, #145a28 60%, #0d3d1a 100%));
}

.profile-head {
    justify-content: space-between;
    flex-wrap: wrap;
}

.profile-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.profile-loading {
    color: var(--te-fg-muted);
    text-align: center;
    margin-top: 32px;
}

.profile-body {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 14px;
    min-height: 0;
}

/* Narrow viewports / portrait phones: a fixed 260px stage column
   squeezes the right-column sections to nothing. Stack the stage
   above the sections and let the whole body scroll so nothing is
   trapped below the fold. Mirrors the .rk-tiers portrait pattern. */
@media (orientation: portrait), (max-width: 640px) {
    .profile-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        align-content: start;
        overflow-y: auto;
    }
    .profile-stage {
        /* Premium nudge no longer needs to be flush to the bottom of
           the column when the stage is auto-height. */
        align-self: start;
    }
    .profile-premium {
        margin-top: 4px;
    }
}

/* ---------- Identity stage (left column) ---------- */
.profile-stage {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.55));
    border: 1px solid rgba(255, 215, 0, 0.30);
    border-radius: 14px;
    padding: 16px 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.profile-stage::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: radial-gradient(ellipse at 50% 110%, rgba(255, 215, 0, 0.18), transparent 55%);
    pointer-events: none;
}

/* Hero medallion — colored disc with the player's initial. The profile
   hero keeps its own .profile-hero-avatar-N classes (rather than reusing
   <AvatarView>) so it can carry the larger size, gold ring, and outer
   glow that are specific to the profile stage. The four color variants
   match AvatarView's .avatar-color-1..4 palette one-for-one so the
   selected avatar reads the same here and everywhere else. */
.profile-hero-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 3px solid var(--te-accent-gold);
    box-shadow:
        0 0 18px rgba(255, 215, 0, 0.45),
        inset 0 -3px 8px rgba(0, 0, 0, 0.4);
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--te-font-display);
    font-size: 2rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.profile-hero-avatar-1 { background: radial-gradient(circle at 30% 25%, #7EC8E3, #2a4a55); }
.profile-hero-avatar-2 { background: radial-gradient(circle at 30% 25%, #E8A87C, #6a3a25); }
.profile-hero-avatar-3 { background: radial-gradient(circle at 30% 25%, #c4e386, #3a5a25); }
.profile-hero-avatar-4 { background: radial-gradient(circle at 30% 25%, #d99cd9, #4a2555); }

.profile-hero-initial {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.profile-hero-name {
    font: var(--te-font-weight-heavy) 1.15rem / 1 var(--te-font-display);
    color: var(--te-fg-strong);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    word-break: break-word;
    position: relative;
    z-index: 1;
}

.profile-tier {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Casino-chip motif from the Ranked tier cards, scaled down. The
   neutral silver gradient is intentional: until we ship a tier
   system on top of RankingPoints, this chip represents "your
   ranking" generically rather than claiming a specific tier. */
.profile-tier-chip {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #e8e8e8, #888 60%, #555);
    border: 2px dashed rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(192, 192, 192, 0.4);
    flex-shrink: 0;
}

.profile-tier-body {
    flex: 1;
    min-width: 0;
}

.profile-tier-name {
    font: var(--te-font-weight-bold) 0.86rem / 1 var(--te-font-display);
    color: #c0c0c0;
}

.profile-tier-sub {
    font-size: 0.6rem;
    color: var(--te-fg-muted);
    margin-top: 3px;
    letter-spacing: 0.04em;
}

/* Dim the tier card while ranking points aren't being awarded yet —
   the chip reads as a faded preview rather than a live readout. */
.profile-tier-soon .profile-tier-chip {
    opacity: 0.55;
    filter: saturate(0.4);
}

.profile-tier-soon .profile-tier-name,
.profile-tier-soon .profile-tier-sub {
    color: var(--te-fg-muted);
}

/* Premium nudge — pinned to bottom of the stage so the stage fills
   the full column height regardless of how tall the right column
   grows. Same dashed-border treatment as the Coming-Soon pill. */
.profile-premium {
    margin-top: auto;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.18), rgba(255, 215, 0, 0.04));
    border: 1px dashed rgba(255, 215, 0, 0.45);
    color: var(--te-accent-gold);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: not-allowed;
    font-family: inherit;
    position: relative;
    z-index: 1;
}

.profile-premium:disabled {
    opacity: 0.85;
}

.profile-premium-active {
    cursor: default;
    opacity: 1;
}

.profile-premium-meta {
    font-size: 0.58rem;
    color: var(--te-fg-muted);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------- Right column — sectioned edits ---------- */
.profile-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    /* Landscape on small screens (e.g. 844×390) doesn't have room for
       all three sections at once — let the column scroll within the
       body cell so the bottom rows aren't hidden below the fold. The
       scrollbar styling below makes that fallback subtle when the
       compaction media query (max-height: 480px) doesn't quite fit. */
    overflow-y: auto;

    /* Firefox + the modern scrollbar-* properties. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* WebKit (Safari, Chrome, Edge): override the chunky default with a
   slim translucent thumb so the column doesn't get an ugly OS-native
   scrollbar gutter when content barely overflows. */
.profile-right::-webkit-scrollbar { width: 6px; }
.profile-right::-webkit-scrollbar-track { background: transparent; }
.profile-right::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
.profile-right::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

@media (orientation: portrait), (max-width: 640px) {
    /* When the body itself scrolls, internal scrolling on the right
       column becomes a scroll-trap — kill it. */
    .profile-right { overflow-y: visible; }
}

.profile-section {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.profile-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.profile-section-title {
    font-size: 0.66rem;
    color: var(--te-accent-gold);
    letter-spacing: 0.14em;
    font-weight: 700;
    text-transform: uppercase;
}

/* Nickname row */
.profile-nick-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.profile-nick-input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.30);
    color: var(--te-fg-strong);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 0.86rem;
    font-weight: 700;
    font-family: inherit;
}

.profile-nick-input:focus {
    outline: none;
    border-color: var(--te-accent-gold);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18);
}

.profile-nick-save {
    background: linear-gradient(180deg, #4CAF50, #2E7D32);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    font-family: inherit;
    min-width: 70px;
}

.profile-nick-save:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: #666;
    cursor: not-allowed;
}

.profile-error {
    color: var(--te-accent-red);
    font-size: 0.72rem;
    margin: 0;
}

/* Avatar picker — colored tiles map 1:1 to the four canonical avatar
   ids (see ProfileScreen.AvatarColorIndex). Tiles use the same disc
   gradient as the hero medallion so the picked color is visibly the
   same color shown in the stage. */
.profile-avatar-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-avatar-tile {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 1px;
    cursor: pointer;
    flex-shrink: 0;
}

.profile-avatar-tile:hover:not(:disabled):not(.profile-avatar-tile-selected) {
    border-color: rgba(255, 255, 255, 0.25);
}

.profile-avatar-tile:disabled {
    opacity: 0.6;
    cursor: progress;
}

.profile-avatar-tile-selected {
    border-color: var(--te-accent-gold);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

.profile-avatar-tile-1 { background: radial-gradient(circle at 30% 25%, #7EC8E3, #2a4a55); }
.profile-avatar-tile-2 { background: radial-gradient(circle at 30% 25%, #E8A87C, #6a3a25); }
.profile-avatar-tile-3 { background: radial-gradient(circle at 30% 25%, #c4e386, #3a5a25); }
.profile-avatar-tile-4 { background: radial-gradient(circle at 30% 25%, #d99cd9, #4a2555); }

/* Account & sync rows — Coming Soon, but rendered legibly so players
   see what's coming rather than getting an empty card. */
.profile-link-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.profile-link-row + .profile-link-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-link-glyph {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.06);
    color: var(--te-fg-muted);
    font-weight: 800;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.profile-link-text {
    flex: 1;
    font-size: 0.78rem;
    color: var(--te-fg-body);
}

.profile-link-sub {
    display: block;
    font-size: 0.6rem;
    color: var(--te-fg-muted);
    margin-top: 2px;
}

/* Coming Soon pill — same dim, dashed treatment as the Friendly seat
   on the main menu so the future-feature visual language is shared. */
.profile-coming-pill {
    background: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: var(--te-fg-quiet);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Landscape phones (e.g. 844×390): compact the layout so all three
   right-column sections fit without scrolling. Each tweak claws back
   ~5–15px of vertical space; together they fit a 290px-content column
   into a 296px-available body without invoking the scrollbar.
   Width-narrow viewports already flip to the portrait stack rule
   above, so this only kicks in on short-but-wide phones. */
@media (max-height: 400px) and (orientation: landscape) {
    .profile-screen {
        gap: 8px;
        padding: 10px 22px 12px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-left: max(22px, env(safe-area-inset-left));
        padding-right: max(22px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .profile-body { gap: 12px; }

    /* Stage column shrinks: smaller hero, tighter gaps. Premium nudge
       still pins to the bottom of whatever space is left. */
    .profile-stage {
        padding: 12px 12px 10px;
        gap: 8px;
    }
    .profile-hero-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
        border-width: 2px;
    }
    .profile-hero-name {
        font-size: 1rem;
    }
    .profile-tier { padding: 7px 10px; }
    .profile-tier-chip { width: 24px; height: 24px; }
    .profile-tier-name { font-size: 0.78rem; }
    .profile-tier-sub { font-size: 0.56rem; }
    .profile-premium {
        padding: 5px 10px;
        font-size: 0.68rem;
    }

    /* Right column sections lose ~3px of vertical padding each plus
       smaller gaps between them. The avatar tiles drop from 42 to 32
       — still well above the 24px tap target. */
    .profile-right { gap: 7px; }
    .profile-section { padding: 7px 11px 8px; gap: 6px; }
    .profile-section-title { font-size: 0.62rem; }
    .profile-nick-input { padding: 5px 9px; font-size: 0.8rem; }
    .profile-nick-save { padding: 5px 12px; font-size: 0.7rem; }
    .profile-avatar-picker { gap: 6px; }
    .profile-avatar-tile { width: 32px; height: 32px; }
    .profile-link-row { padding: 3px 0; }
    .profile-link-glyph { width: 22px; height: 22px; font-size: 0.72rem; }
    .profile-link-text { font-size: 0.72rem; }
    .profile-link-sub { font-size: 0.56rem; }
}

/* === Back Button === */
.btn-back {
    background: #607d8b;
    color: white;
    font-size: 0.9rem;
    padding: 10px 28px;
    min-height: 48px;
    margin-top: 16px;
}

.screen-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 90%;
    max-width: 640px;
}

.screen-header-title {
    color: #ffd700;
    margin: 0;
    font-size: 1.3rem;
}

/* === Avatar ===
   Colored medallion mirroring the Profile screen's hero / picker tiles.
   The four .avatar-color-N variants match .profile-hero-avatar-N so the
   avatar a user selects in Profile reads consistently elsewhere. */
.avatar {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    user-select: none;
    color: #fff;
    font-family: var(--te-font-display);
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
    /* Background comes from .avatar-color-N — AvatarView always adds one. */
}
.avatar-sm { width: 24px; height: 24px; font-size: 0.7rem; }
.avatar-md { width: 40px; height: 40px; font-size: 1.05rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.6rem; }

.avatar-color-1 { background: radial-gradient(circle at 30% 25%, #7EC8E3, #2a4a55); }
.avatar-color-2 { background: radial-gradient(circle at 30% 25%, #E8A87C, #6a3a25); }
.avatar-color-3 { background: radial-gradient(circle at 30% 25%, #c4e386, #3a5a25); }
.avatar-color-4 { background: radial-gradient(circle at 30% 25%, #d99cd9, #4a2555); }
/* AI seats — neutral steel tone so AI opponents are visually distinct from
   the four human avatar colors without colliding with any of them. */
.avatar-color-5 { background: radial-gradient(circle at 30% 25%, #b8c2cc, #2c3640); }

.avatar-initial {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* === Profile Chip === */
.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1;
    max-width: 320px;
}

.profile-chip-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.profile-chip-nickname {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-chip-coins {
    font-size: 0.75rem;
    color: #ffd700;
    white-space: nowrap;
}

/* === Ranked Stakes picker — chip-cards on felt =========================
   Layout mirrors qp-setup-screen: header (back + title + controls), main
   row of three tier cards, footer with explainer + green join button.
   The mode tabs and coin chip live in the header so the main canvas is
   reserved for the tier choice. */
.rk-screen {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-items: stretch;
    justify-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    padding: 14px 26px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    gap: 10px;
    color: var(--te-fg-strong);
    background: var(--te-table-felt, radial-gradient(ellipse at center, #1e7a3a 0%, #145a28 60%, #0d3d1a 100%));
}

.rk-head {
    /* Extends qp-head (back + titles) with right-side controls. */
    justify-content: space-between;
}

.rk-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rk-mode-tabs {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 3px;
    display: flex;
    gap: 2px;
}

.rk-mode-tab {
    background: transparent;
    border: none;
    color: var(--te-fg-muted);
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rk-mode-tab-on {
    background: var(--te-accent-gold);
    color: #2a1a00;
}
.rk-mode-glyph { font-size: 0.85rem; line-height: 1; }

/* Mode tab gated as "Coming Soon" — dimmed, non-interactive, and carrying a
   tiny dashed "Soon" pill so the option is still discoverable. */
.rk-mode-tab-soon,
.rk-mode-tab-soon:hover {
    opacity: 0.55;
    filter: saturate(0.5);
    cursor: not-allowed;
    background: transparent;
    color: var(--te-fg-muted);
}
.rk-mode-tab-pill {
    background: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    color: var(--te-fg-quiet, #9fb7a8);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    margin-left: 2px;
}

.rk-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: stretch;
    min-height: 0;
}

/* Portrait: a row of three side-by-side cards is unreadable on phone widths,
   so stack them and let the row scroll if the column overflows the
   viewport. The header and footer are allowed to wrap so tabs/coin chip and
   blurb/Join button don't squash into each other. */
@media (orientation: portrait) {
    .rk-tiers {
        grid-template-columns: 1fr;
        gap: 8px;
        align-content: start;
        overflow-y: auto;
    }
    .rk-head { flex-wrap: wrap; }
    .rk-head-right { flex-wrap: wrap; }
    .rk-foot { flex-wrap: wrap; }
    .rk-foot-blurb { max-width: none; }
}

.rk-tier {
    position: relative;
    background: linear-gradient(165deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px 10px;
    cursor: pointer;
    color: var(--te-fg-strong);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: inherit;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.rk-tier:hover {
    border-color: rgba(255, 255, 255, 0.18);
}
.rk-tier-on {
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--rk-tier-color, var(--te-accent-gold)) 22%, transparent) 0%,
        rgba(0, 0, 0, 0.55) 70%);
    border-color: var(--rk-tier-color, var(--te-accent-gold));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--rk-tier-color, var(--te-accent-gold)) 18%, transparent),
        0 8px 20px rgba(0, 0, 0, 0.4);
}

.rk-tier-flag {
    position: absolute;
    top: -8px;
    left: 12px;
    background: var(--te-accent-gold);
    color: #2a1a00;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 3px;
}

/* Tier card gated as "Coming Soon" — same dimmed/desaturated treatment as
   the lobby's Friendly Match seat so the locked surfaces share one
   vocabulary. The dashed pill is anchored over the centre of the card. */
.rk-tier-soon {
    cursor: not-allowed;
}
.rk-tier-soon > *:not(.rk-tier-soon-pill) {
    opacity: 0.5;
    filter: saturate(0.4);
}
.rk-tier-soon:hover {
    border-color: rgba(255, 255, 255, 0.08);
}
.rk-tier-soon-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    color: var(--te-fg-strong);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

.rk-tier-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rk-tier-chip {
    /* Casino-chip badge: dashed white inner ring + tier-coloured radial
       gradient gives the "stack of chips" affordance. */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%,
        color-mix(in srgb, var(--rk-tier-color, #888) 100%, white 10%),
        var(--rk-tier-color, #888) 50%,
        color-mix(in srgb, var(--rk-tier-color, #888) 60%, black));
    border: 2px dashed rgba(255, 255, 255, 0.35);
    box-shadow:
        0 0 10px color-mix(in srgb, var(--rk-tier-color, #888) 45%, transparent),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    position: relative;
}
.rk-tier-chip::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.rk-tier-name {
    font: var(--te-font-weight-heavy) 1.05rem / 1 var(--te-font-display);
    color: var(--rk-tier-color, var(--te-accent-gold));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
}

.rk-tier-waiting {
    margin-left: auto;
    text-align: right;
    font-size: 0.6rem;
    color: var(--te-fg-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rk-tier-waiting b {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 1px;
}
.rk-tier-playing-num {
    color: var(--te-accent-green, #4CAF50);
}
.rk-tier-playing-num::before {
    content: '●';
    color: #4CAF50;
    margin-right: 4px;
    font-size: 0.6rem;
    vertical-align: middle;
}

.rk-tier-buy {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 4px;
}
.rk-tier-buy-lbl {
    font-size: 0.58rem;
    color: var(--te-fg-quiet, #9fb7a8);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.rk-tier-buy-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--te-accent-gold);
    line-height: 1;
    font-family: var(--te-font-display);
    font-variant-numeric: tabular-nums;
}
.rk-tier-buy-unit {
    font-size: 0.62rem;
    color: var(--te-fg-muted);
}

.rk-tier-foot {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--te-fg-muted);
    letter-spacing: 0.04em;
}
.rk-tier-foot b {
    color: var(--te-fg-strong);
    font-weight: 700;
}

.rk-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.rk-foot-blurb {
    font-size: 0.72rem;
    color: var(--te-fg-muted);
    line-height: 1.4;
    max-width: 380px;
}
.rk-foot-blurb b { color: var(--te-accent-gold); }

.rk-join-btn {
    background: linear-gradient(180deg, #4CAF50, #2E7D32);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 10px 22px;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.rk-join-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.45);
}
.rk-join-btn:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: #666;
    box-shadow: none;
    cursor: not-allowed;
}
.rk-join-waiting {
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    letter-spacing: 0;
}
.rk-join-btn:disabled .rk-join-waiting { background: transparent; }

/* Watch-ad lifeline shown below the disabled Join button when the player
   is short on coins for the selected tier. Hidden entirely on platforms
   with no ad SDK (Wasm/desktop) and for Premium subscribers. */
.rk-insufficient-prompt {
    margin-top: 10px;
    background: rgba(40, 60, 30, 0.45);
    border: 1px solid rgba(180, 220, 120, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--te-fg, #f0f5ec);
    font-size: 0.85rem;
}
.rk-insufficient-prompt-text b { color: #e0ffb0; }
.rk-insufficient-prompt-buttons { display: flex; gap: 8px; }
.rk-insufficient-prompt-watch,
.rk-insufficient-prompt-shop {
    flex: 1;
    background: rgba(180, 220, 120, 0.18);
    color: var(--te-fg, #f0f5ec);
    border: 1px solid rgba(180, 220, 120, 0.45);
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: 600;
    cursor: pointer;
}
.rk-insufficient-prompt-watch:disabled { cursor: not-allowed; opacity: 0.6; }
.rk-insufficient-prompt-shop {
    background: rgba(255, 215, 0, 0.18);
    border-color: rgba(255, 215, 0, 0.45);
}


/* === Searching for players ("Finding a Table") =========================
   Felt oval centred on the screen with four seats around it. As QueueUpdate
   fires, "Searching" placeholders flip to filled avatars. The centre holds
   the elapsed timer + tier-coloured stake pill. The footer surfaces the
   progress bar and the AI-fill / Cancel actions. */
.q-screen {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-items: stretch;
    justify-items: stretch;
    align-content: stretch;
    /* Defeat `.screen`'s inherited `justify-content: center`. With no explicit
       grid-template-columns, the implicit single column otherwise sizes to
       the header's intrinsic width (~250px) and gets centred — pulling the
       back button to the middle of the viewport. The sister .rk-screen and
       .qp-setup-screen both set this for the same reason. */
    justify-content: stretch;
    padding: 14px 26px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    gap: 10px;
    color: var(--te-fg-strong);
    background: var(--te-table-felt, radial-gradient(ellipse at center, #1e7a3a 0%, #145a28 60%, #0d3d1a 100%));
}

.q-stage {
    /* Belt-and-suspenders height: align-items: stretch on .q-screen already
       gives this row a definite height (mirrors how .lobby-felt-wrap works
       in the main menu), but setting it explicitly means .q-felt's
       inset: 0 keeps a non-zero containing block even if a future
       align-items change happens upstream. */
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    height: 100%;
    /* On wide windows the felt would otherwise stretch into a 1100px ellipse
       and the seats would drift far from the timer. Cap the stage width and
       centre it within the .q-screen grid row so the felt stays roughly
       round; the header and footer remain at the screen edges, matching
       every other screen so the back button never moves. */
    width: 100%;
    max-width: 720px;
    justify-self: center;
}

.q-felt {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #1b6e33 0%, #0f4a1f 75%, #072811 100%);
    box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.6), 0 2px 18px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 215, 0, 0.18);
    pointer-events: none;
}
.q-felt::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 215, 0, 0.28);
    animation: q-felt-pulse 2.4s ease-in-out infinite;
}
@keyframes q-felt-pulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(0.985); }
}

.q-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.q-timer {
    font: var(--te-font-weight-heavy) 2.4rem / 1 var(--te-font-display);
    color: var(--te-accent-gold);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 215, 0, 0.3);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}
.q-status {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.q-status::after {
    content: '...';
    display: inline-block;
    width: 1.2em;
    text-align: left;
    overflow: hidden;
    vertical-align: bottom;
    animation: q-ellipsis 1.4s steps(4, end) infinite;
}
@keyframes q-ellipsis {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0     0 0); }
}
.q-stake {
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.7rem;
    color: var(--te-accent-gold);
    font-weight: 700;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.q-stake-gem {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%,
        var(--rk-tier-color, var(--te-accent-gold)),
        color-mix(in srgb, var(--rk-tier-color, var(--te-accent-gold)) 60%, black));
    box-shadow: 0 0 6px color-mix(in srgb, var(--rk-tier-color, var(--te-accent-gold)) 60%, transparent);
}

/* Seats positioned around the oval. Bottom = you (always filled). */
.q-seat {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 92px;
    text-align: center;
    pointer-events: none;
}
.q-seat-top    { top: 6px;     left: 50%;  transform: translateX(-50%); }
.q-seat-right  { right: 60px;  top: 50%;   transform: translateY(-50%); }
.q-seat-bottom { bottom: 6px;  left: 50%;  transform: translateX(-50%); }
.q-seat-left   { left: 60px;   top: 50%;   transform: translateY(-50%); }

/* Filled seats render an <AvatarView> (colored medallion + initial); the
   empty/searching state keeps .q-seat-av as a dashed placeholder div. The
   48px sizing matches the prior visual — slightly larger than the default
   .avatar-md (40px) — so the queue felt reads at a glance. */
.q-seat .avatar {
    width: 48px;
    height: 48px;
    font-size: 1.05rem;
    border: 2px solid rgba(255, 255, 255, 0.12);
    position: relative;
}
.q-seat-you .avatar {
    border-color: var(--te-accent-gold);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
}
.q-seat-av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.3);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.05rem;
    font-weight: 800;
    position: relative;
}
.q-seat-searching .q-seat-av::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 215, 0, 0.5);
    animation: q-ring-spin 4s linear infinite;
}
@keyframes q-ring-spin {
    100% { transform: rotate(360deg); }
}

.q-seat-name {
    font-size: 0.66rem;
    color: var(--te-fg-strong);
    font-weight: 700;
    line-height: 1.2;
}
.q-seat-empty .q-seat-name { color: var(--te-fg-quiet, #9fb7a8); font-weight: 500; }
.q-seat-sub {
    display: block;
    font-size: 0.56rem;
    color: var(--te-fg-muted);
    font-weight: 500;
    letter-spacing: 0.06em;
    margin-top: 1px;
}

.q-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.q-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.q-progress-row {
    font-size: 0.7rem;
    color: var(--te-fg-muted);
}
.q-progress-row b { color: var(--te-fg-strong); font-weight: 800; }
.q-progress-bar {
    width: 240px;
    max-width: 40vw;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.q-progress-bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--te-accent-gold), #ffea7c);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    transition: width 0.4s ease;
}

.q-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.q-cancel-btn {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--te-fg-body);
    border-radius: 18px;
    padding: 8px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
}
.q-cancel-btn:hover { background: rgba(0, 0, 0, 0.55); }

.q-ai-btn {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.95), rgba(212, 175, 55, 0.95));
    border: none;
    color: #2a1a00;
    border-radius: 18px;
    padding: 8px 16px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.q-ai-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.5);
}
.q-ai-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.q-ai-bot { font-size: 0.95rem; line-height: 1; }

/* === Post-match (ranked) ===================================================
   Wrapper grid for `Screens/Ranked/PostMatchScreen.razor`. The panel itself
   (`.te-result-ranked`, Variant B "Reward Shelf") lives in overlay-result.css
   alongside the round-end Variant A panel; this screen rule only sets up the
   grid so the panel can stretch across the table-felt area like .game-table. */
.post-match-screen {
    display: grid;
    grid-template-rows: 1fr;
    align-items: stretch;
    justify-items: stretch;
    padding: 0;
    height: 100vh;
    color: var(--te-fg-body);
    font-family: var(--te-font-body);
}

/* DEV-PREVIEW: temporary scaffold for iterating on PostMatchScreen.
   See src/FlyingEggs.Blazor.Shared/Screens/Dev/DevPostMatchPreviewScreen.razor
   for the removal checklist. Delete this block (.dev-preview-*) when the
   scaffold is removed. */
.dev-preview-host {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dev-preview-toolbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(20, 20, 24, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #f5f5f5;
    font-size: 0.85rem;
}

/* Inside the dev preview, let the post-match screen size to the remaining
   space rather than insisting on 100vh — otherwise it'd overlap the toolbar
   and steal pointer events from the controls above. */
.dev-preview-host > .screen {
    height: auto;
    flex: 1;
    min-height: 0;
}

.dev-preview-label {
    font-weight: 600;
    opacity: 0.7;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dev-preview-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dev-preview-controls .btn {
    padding: 4px 10px;
    font-size: 0.85rem;
    min-height: 0;
    min-width: 0;
    width: auto;
}

.dev-preview-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
}

.dev-preview-input input {
    width: 80px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    color: inherit;
    font: inherit;
}

.dev-preview-input input[type="range"] { width: 120px; }
.dev-preview-input input[type="checkbox"] { width: auto; }

/* Stage hosts the live overlay panel — the overlay uses position: fixed so
   it covers the whole viewport regardless. The "short" variant clamps the
   panel's max-height so we can verify scrolling without resizing the
   browser. */
.dev-preview-stage {
    flex: 1;
    position: relative;
    min-height: 0;
}

.dev-preview-stage-short .te-result-matchend-panel {
    max-height: 380px;
}

/* === Lobby header chips ============================================ */
.lobby-chip {
    background: rgba(0, 0, 0, 0.42);
    border-radius: 10px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--te-fg-strong);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lobby-chip-online::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--te-accent-green, #4CAF50);
    box-shadow: 0 0 5px var(--te-accent-green, #4CAF50);
}

.lobby-chip-coins {
    color: var(--te-accent-gold);
}
.lobby-chip-coins::before {
    content: '◉';
    color: var(--te-accent-gold);
    font-size: 0.7rem;
}

.lobby-chip-rank {
    color: var(--te-fg-muted);
}
.lobby-chip-rank::before {
    content: '▲';
    color: var(--te-accent-gold);
    font-size: 0.6rem;
}

.lobby-chip-bell {
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--te-fg-muted);
    border-radius: 999px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    position: relative;
    cursor: pointer;
    padding: 0;
}

.lobby-chip-bell:disabled {
    cursor: default;
    opacity: 0.55;
    filter: saturate(0.4);
}

.lobby-chip-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--te-accent-red, #e74c3c);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 4px;
    line-height: 1;
}

/* === Coming Soon pill (shared between Friendly seat + My Games) ===== */
.lobby-coming-pill {
    background: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: var(--te-fg-quiet, #9fb7a8);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.lobby-seat-fan .lobby-coming-pill {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

/* Disabled seat: dim the cards but keep the pill at its full opacity so
   "Coming Soon" stays legible. The native `disabled` attribute on the host
   button already blocks clicks/focus; pointer-events: none belt-and-braces
   it so hover transforms can't fire either. */
.lobby-seat-disabled {
    cursor: default;
    pointer-events: none;
}
.lobby-seat-disabled .lobby-seat-card { opacity: 0.55; filter: saturate(0.4); }
.lobby-seat-disabled .lobby-seat-pill { opacity: 0.7; }
.lobby-seat-disabled:hover { transform: none; }

/* === Player strip + My Games (between felt and rail) ================ */
.lobby-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 18px 4px;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
}

.lobby-strip-player {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.lobby-strip-player-text {
    display: flex;
    flex-direction: column;
}

.lobby-strip-name {
    color: var(--te-fg-strong);
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.1;
}

.lobby-strip-sub {
    font-size: 0.6rem;
    color: #a8beb2;
    margin-top: 2px;
}

.lobby-my-games {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.lobby-my-games-label {
    font-size: 0.56rem;
    color: #9fb7a8;
    letter-spacing: 0.16em;
    font-weight: 700;
}

.lobby-mini-card {
    transform: rotate(var(--lobby-mc-rot, 0deg));
}

.lobby-mini-card-face {
    width: 38px;
    height: 50px;
    background: var(--te-card-face-gradient);
    border: 1px solid rgba(42, 42, 42, 0.5);
    border-radius: 5px;
    box-shadow: var(--te-shadow-card);
    display: flex;
    flex-direction: column;
    padding: 3px 4px;
    font-weight: 800;
}

.lobby-mini-card-face-red { color: var(--te-suit-red); }
.lobby-mini-card-face-black { color: var(--te-suit-black); }

.lobby-mini-card-rank { font-size: 12px; line-height: 1; }
.lobby-mini-card-suit { font-size: 9px; margin-left: 1px; }

.lobby-my-games-dim .lobby-mini-card { opacity: 0.5; filter: saturate(0.4); }
.lobby-my-games .lobby-coming-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

/* === Quick Play setup + Resume choice screens ====================== */
.qp-setup-screen,
.qp-choice-screen {
    /* override .screen flex-center: these screens drive their own layout. */
    display: grid;
    align-items: stretch;
    justify-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    padding: 14px 26px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    gap: 10px;
    color: var(--te-fg-strong);
    background: var(--te-table-felt, radial-gradient(ellipse at center, #1e7a3a 0%, #145a28 60%, #0d3d1a 100%));
}

.qp-setup-screen { grid-template-rows: auto 1fr auto; }
.qp-choice-screen { grid-template-rows: auto 1fr; }

.qp-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qp-back {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--te-fg-strong);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}
.qp-back:hover { background: rgba(0, 0, 0, 0.5); }
/* Inline SVG arrow — text glyphs (←) don't have a reliable optical center
   across system fonts and read as too-high inside the button. */
.qp-back-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.qp-titles .qp-title {
    font: var(--te-font-weight-heavy) 1.4rem / 1 var(--te-font-display);
    color: var(--te-accent-gold);
    text-shadow: var(--te-shadow-text);
}

.qp-titles .qp-sub {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: var(--te-fg-muted);
    margin-top: 2px;
}

.qp-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
    min-height: 0;
}

.qp-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.qp-section-label {
    font-size: 0.62rem;
    color: var(--te-accent-gold);
    letter-spacing: 0.14em;
    font-weight: 700;
    text-transform: uppercase;
}

.qp-diff-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.qp-diff-card {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    color: var(--te-fg-strong);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.qp-diff-card:hover { background: rgba(0, 0, 0, 0.4); }

.qp-diff-card-on {
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.18), rgba(0, 0, 0, 0.5));
    border-color: var(--te-accent-gold);
}

/* Difficulty card gated as "Coming Soon" — same dim, dashed treatment as the
   Yield Lead toggle row. The native `disabled` attribute already blocks clicks;
   we only adjust the visual affordances. */
.qp-diff-card-disabled,
.qp-diff-card-disabled:hover {
    background: rgba(0, 0, 0, 0.32);
    opacity: 0.55;
    cursor: not-allowed;
}

.qp-diff-name {
    font-weight: 700;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qp-diff-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%,
        var(--qp-diff-color, #5F9EA0),
        color-mix(in srgb, var(--qp-diff-color, #5F9EA0) 30%, transparent));
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.qp-diff-text { display: flex; flex-direction: column; }
.qp-diff-desc {
    font-size: 0.68rem;
    color: var(--te-fg-muted);
    margin-top: 1px;
}

.qp-rules-panel {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px 14px;
}

.qp-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.qp-toggle-row:last-child { border-bottom: none; }

.qp-toggle-row-disabled {
    /* Belt-and-braces: the native disabled attribute already blocks the
       button; this stops mobile tap highlights / focus rings on the label
       area too. Mirrors the .lobby-seat-disabled pattern above. */
    pointer-events: none;
}
.qp-toggle-row-disabled .qp-toggle-name-text,
.qp-toggle-row-disabled .qp-toggle-hint {
    opacity: 0.6;
}
.qp-toggle-row-disabled .qp-toggle {
    opacity: 0.45;
    cursor: not-allowed;
}

.qp-toggle-label {
    flex: 1;
    min-width: 0;
}
.qp-toggle-name {
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.qp-coming-pill {
    background: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: var(--te-fg-quiet, #9fb7a8);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}
.qp-toggle-hint {
    font-size: 0.66rem;
    color: var(--te-fg-muted);
    margin-top: 1px;
    line-height: 1.35;
}

.qp-toggle {
    width: 38px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    justify-content: flex-start;
    transition: background 0.14s ease, justify-content 0.14s ease;
    flex-shrink: 0;
}
.qp-toggle-on {
    background: var(--te-accent-green, #4CAF50);
    justify-content: flex-end;
}
.qp-toggle-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.qp-tip {
    margin-top: auto;
    background: rgba(0, 0, 0, 0.28);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.7rem;
    color: var(--te-fg-muted);
    line-height: 1.4;
}
.qp-tip b { color: var(--te-accent-gold); }

.qp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.qp-est { font-size: 0.74rem; color: var(--te-fg-muted); }
.qp-est b { color: var(--te-accent-gold); }

.qp-deal-btn {
    background: linear-gradient(180deg, #4CAF50, #2E7D32);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 10px 26px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
    font-family: inherit;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.qp-deal-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(76, 175, 80, 0.45); }
.qp-deal-arrow { margin-left: 6px; }

/* Resume / New choice screen ----------------------------------------- */
.qp-choice-body {
    display: grid;
    place-items: center;
    gap: 18px;
}

.qp-choice-prompt {
    text-align: center;
    font-size: 0.74rem;
    color: var(--te-fg-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qp-choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 620px;
    width: 100%;
}

.qp-choice-card {
    background: rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 18px 16px;
    cursor: pointer;
    text-align: center;
    color: var(--te-fg-strong);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    font-family: inherit;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.qp-choice-card:hover { transform: translateY(-2px); }

.qp-choice-card-primary {
    border-color: var(--te-accent-gold);
    background: linear-gradient(165deg, rgba(255, 215, 0, 0.16), rgba(0, 0, 0, 0.55));
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.18),
        0 12px 26px rgba(0, 0, 0, 0.45);
}

/* Slot for the real <CardView> render. The card sets its own size
   (clamp 42–60px wide, 50:70 aspect); the slot just gives it a soft
   accent glow that matches the surrounding choice card. */
.qp-choice-card-face-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.35));
}

.qp-choice-card-fresh .qp-choice-card-face-slot {
    filter: drop-shadow(0 0 10px rgba(126, 200, 227, 0.3));
}

.qp-choice-eyebrow {
    font-size: 0.62rem;
    color: var(--te-accent-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.qp-choice-card-fresh .qp-choice-eyebrow { color: var(--te-team-a, #7EC8E3); }

.qp-choice-title {
    font: var(--te-font-weight-heavy) 1.2rem / 1.05 var(--te-font-display);
    color: var(--te-fg-strong);
}

.qp-choice-summary {
    font-size: 0.78rem;
    color: var(--te-fg-muted);
    line-height: 1.4;
}
.qp-choice-summary b { color: var(--te-accent-gold); }

@media (max-width: 540px) {
    .qp-body { grid-template-columns: 1fr; }
    .qp-choice-row { grid-template-columns: 1fr; gap: 14px; }
}

/* === Shop screen ============================================================
   Coin-pack grid styled after docs/old/design/screens/Shop.jsx — gradient
   tiles with a stacked-coin glyph, big amount, optional gold-accented badge,
   and a prominent price button. The pack list scrolls inside .shop-scroll
   with a slim custom scrollbar.
*/
.shop-screen {
    /* Override .screen's flex-center: drive our own grid layout and stretch
       grid children to fill the viewport. Without this, `.screen`'s
       `align-items: center` shrinks every child (including the header) to
       its intrinsic width, so the back button drifts toward the centre and
       `space-between` on the header has nothing to span — the exact bug
       that hit `.q-screen` ("Finding a Table"). Mirrors the container
       shape used by .profile-screen / .rk-screen / .qp-setup-screen. */
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    justify-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    padding: 14px 28px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    gap: 10px;
}

/* Pin the coin chip to the top-right and keep [back][titles] on the left,
   matching the Profile/MainMenu header layout. Without this the default
   .qp-head (justify-content: flex-start) puts the chip flush against the
   title group. */
.shop-head {
    justify-content: space-between;
    flex-wrap: wrap;
}

.shop-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.shop-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Top padding makes room for the badge ribbon that overhangs the first
       row of tiles (top: -7px); overflow-y: auto would otherwise clip it. */
    padding: 14px 6px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.35) transparent;
}
.shop-scroll::-webkit-scrollbar { width: 8px; }
.shop-scroll::-webkit-scrollbar-track { background: transparent; }
.shop-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.45), rgba(212, 168, 0, 0.55));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.shop-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.7), rgba(212, 168, 0, 0.8));
    border: 2px solid transparent;
    background-clip: padding-box;
}

.shop-ad-tile {
    width: 100%;
    background: linear-gradient(135deg, rgba(40, 60, 30, 0.55), rgba(15, 30, 10, 0.55));
    border: 1px solid rgba(180, 220, 120, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--te-fg, #f0f5ec);
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease;
    text-align: left;
}
.shop-ad-tile:hover:not([disabled]) {
    transform: translateY(-1px);
    border-color: rgba(180, 220, 120, 0.65);
}
.shop-ad-tile[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}
.shop-ad-tile-busy { opacity: 0.75; }
.shop-ad-tile-main {
    display: flex;
    align-items: center;
    gap: 14px;
}
.shop-ad-tile-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(180, 220, 120, 0.25);
    color: #b8e370;
    font-size: 1.1rem;
}
.shop-ad-tile-text { display: flex; flex-direction: column; gap: 2px; }
.shop-ad-tile-title { font-weight: 600; font-size: 0.95rem; }
.shop-ad-tile-sub { font-size: 0.78rem; color: var(--te-fg-muted, #cdd6cf); }

.shop-platform-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--te-fg-muted, #cdd6cf);
    font-size: 0.85rem;
}
.shop-platform-notice p { margin: 0; }
.shop-platform-pill {
    background: var(--te-accent-gold, #FFD700);
    color: #2a1a00;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shop-loading,
.shop-empty {
    text-align: center;
    color: var(--te-fg-muted);
    padding: 24px 8px;
}

.shop-error {
    background: rgba(180, 60, 60, 0.18);
    border: 1px solid rgba(220, 90, 90, 0.45);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.shop-pack-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 720px) {
    .shop-pack-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
    .shop-pack-list { grid-template-columns: 1fr; }
}

.shop-pack {
    position: relative;
    background: linear-gradient(165deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    overflow: visible;
    color: #fff;
}
/* The whole tile is the click target — the inner .shop-pack-buy is just a
   visual price label. Give the buyable tiles a pointer cursor, a subtle
   lift on hover, and a focus ring so keyboard users can see where they
   are. .shop-pack-buyable is only set when an IAP can actually be started
   (correct platform, no other purchase in flight); other tiles stay flat
   so users on WASM/desktop don't get a misleading affordance. */
.shop-pack-buyable {
    cursor: pointer;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 120ms ease-out;
}
.shop-pack-buyable:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 215, 0, 0.45);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.shop-pack-buyable:focus-visible {
    outline: 2px solid var(--te-accent-gold, #FFD700);
    outline-offset: 2px;
}
.shop-pack-busy {
    cursor: progress;
    opacity: 0.85;
}
.shop-pack-featured {
    background: linear-gradient(165deg, rgba(255, 215, 0, 0.2), rgba(0, 0, 0, 0.55));
    border-color: rgba(255, 215, 0, 0.5);
}

.shop-pack-badge {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--te-accent-green, #4CAF50);
    color: #fff;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}
.shop-pack-featured .shop-pack-badge {
    background: var(--te-accent-gold, #FFD700);
    color: #2a1a00;
}

.shop-pack-stack {
    height: 36px;
    width: 100%;
    position: relative;
    display: grid;
    place-items: center;
}
.shop-pack-stack-coin {
    position: absolute;
    height: 10px;
    border-radius: 5px;
    background: radial-gradient(ellipse at 30% 20%, #ffe88a, #d4a800 60%, #8a6d00);
    border: 0.5px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.shop-pack-featured .shop-pack-stack-coin {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.shop-pack-coin-amount {
    font: var(--te-font-weight-heavy, 800) 1.05rem / 1.05 var(--te-font-display, system-ui, sans-serif);
    letter-spacing: -0.01em;
    color: #fff;
}
.shop-pack-featured .shop-pack-coin-amount { color: var(--te-accent-gold, #FFD700); }

.shop-pack-coin-label {
    font-size: 0.64rem;
    color: #aab4ae;
    letter-spacing: 0.05em;
}

.shop-pack-buy {
    margin-top: 6px;
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
}
.shop-pack-featured .shop-pack-buy {
    background: var(--te-accent-gold, #FFD700);
    color: #2a1a00;
}
.shop-pack-buy:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: saturate(0.6);
}

.shop-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    z-index: 50;
}
.shop-toast-ok {
    background: #2f6b46;
    color: #f6f4ec;
}
.shop-toast-err {
    background: #6b2f2f;
    color: #f6f4ec;
}

/* QP setup overflows on short viewports: `.qp-tip` sits at the bottom of
   its body column with `margin-top: auto`, so when the body's `1fr` row
   can't fit its natural content height the tip spills into the footer and
   collides with START GAME. The footer estimate adds the same noise on one
   row. Both duplicate data shown elsewhere (toggle subtitles, difficulty
   cards), so dropping them is the cheapest fix. */
@media (max-height: 380px) {
    .qp-tip { display: none; }
    .qp-est { display: none; }
    /* `.qp-foot` uses space-between; with the est hidden the lone button
       pins itself left. Push it back to the right edge. */
    .qp-foot { justify-content: flex-end; }
}

/* Queueing felt: top/bottom seats grow toward the centre, where timer +
   status + stake pill stack. When the stage is short the top seat collides
   with the timer and the bottom seat with the stake. Tier + buy-in are
   already in the header subtitle, so dropping the centre pill plus a
   smaller timer and tighter seats reclaims enough headroom. */
@media (max-height: 440px) {
    .q-stake { display: none; }
    .q-timer { font-size: 1.8rem; }
    .q-seat { width: 78px; }
    .q-seat-av,
    .q-seat .avatar { width: 40px; height: 40px; font-size: 0.9rem; }
    .q-seat-left  { left: 40px; }
    .q-seat-right { right: 40px; }
}

/* === First-launch onboarding (WelcomeScreen, SignInStep, TutorialScreen stub) ===
   Two-step welcome flow shown on a fresh install before the user reaches
   MainMenu. See docs/mockups/onboarding-welcome.html for the visual target
   and docs/plans/onboarding-plan.md slice 1 for scope.

   Chrome shared with QuickPlaySetupScreen / SettingsScreen — same .qp-back
   button at the same top-left position, same .qp-deal-btn green CTA on the
   right of the footer. The .ob-* classes are the onboarding-specific
   header / question / answer-card layer above that shared chrome.

   Compact header packs the wordmark (left) and step indicator (right) into
   a single row so short-viewport phones don't lose the body content. */
.welcome-screen,
.signin-screen,
.tutorial-screen {
    gap: 14px;
    padding: max(14px, env(safe-area-inset-top))
             max(16px, env(safe-area-inset-right))
             max(14px, env(safe-area-inset-bottom))
             max(16px, env(safe-area-inset-left));
    align-items: stretch;
    justify-content: flex-start;
}

.ob-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
/* Reserve the back-button slot on headers without a back action so the
   wordmark sits at the same x-coordinate on every onboarding screen.
   Without this, moving Welcome → SignIn shifts the logo right by
   .qp-back's 34px width + .ob-head's 12px gap (~46px), reading as a
   visible "flip" on the transition. Dimensions track .qp-back exactly. */
.ob-back-slot {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.ob-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.ob-wordmark-title {
    font: var(--te-font-weight-heavy) 1.2rem / 1 var(--te-font-display);
    color: var(--te-accent-gold);
    text-shadow: var(--te-shadow-text);
    letter-spacing: 0.02em;
}
.ob-wordmark-sub {
    color: #9fb7a8;
    letter-spacing: 0.22em;
    font-size: 0.56rem;
    font-weight: 600;
    margin-top: 2px;
}

/* Step indicator pushed to the far right via margin-left: auto. Pill style
   matches the chip-row vocabulary on MainMenuScreen so it reads as the
   same product family. */
.ob-progress {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 999px;
    padding: 5px 12px;
}
.ob-pip {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
}
.ob-pip-on {
    background: var(--te-accent-gold);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}
.ob-pip-done {
    background: rgba(255, 215, 0, 0.55);
}
.ob-progress-label {
    font-size: 0.6rem;
    color: var(--te-fg-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-left: 4px;
}
.ob-progress-label b {
    color: var(--te-accent-gold);
    font-weight: 700;
}

.ob-question {
    font: var(--te-font-weight-heavy) 1.5rem / 1.15 var(--te-font-display);
    color: var(--te-fg-strong);
    text-shadow: var(--te-shadow-text);
    text-align: center;
    margin: 10px 0 0;
    max-width: 580px;
    padding: 0 8px;
    align-self: center;
}
.ob-question b {
    color: var(--te-accent-gold);
}
.ob-lede {
    margin: 0;
    font-size: 0.84rem;
    color: var(--te-fg-muted);
    text-align: center;
    max-width: 460px;
    padding: 0 12px;
    line-height: 1.5;
    align-self: center;
}

/* Answer cards — two-up on Welcome. Primary card gets a gold border +
   tinted background; secondary is a quieter dark panel. Hover lift
   mirrors the seat tiles on MainMenuScreen so the affordance reads
   identically. */
.ob-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 560px;
    padding: 0 8px;
    margin: 6px auto 0;
}
.ob-answer {
    background: rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 14px 12px;
    color: var(--te-fg-strong);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    transition: transform 0.15s ease;
    font-family: var(--te-font-body);
}
.ob-answer:hover:not([disabled]) {
    transform: translateY(-2px);
}
.ob-answer-primary {
    border-color: var(--te-accent-gold);
    background: linear-gradient(165deg, rgba(255, 215, 0, 0.16), rgba(0, 0, 0, 0.55));
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18), 0 10px 22px rgba(0, 0, 0, 0.4);
}
.ob-answer-glyph {
    font-size: 1.55rem;
    line-height: 1;
    color: var(--te-accent-gold);
}
.ob-answer-title {
    font: var(--te-font-weight-heavy) 1rem / 1.05 var(--te-font-display);
    color: var(--te-fg-strong);
}
.ob-answer-tag {
    font-size: 0.7rem;
    color: var(--te-fg-muted);
    line-height: 1.35;
}

/* Foot row — modeled on .qp-foot: optional left content (hint/status) +
   right-aligned primary CTA. .ob-foot-end drops the left slot and aligns
   the CTA to the right edge by itself. */
.ob-foot {
    margin-top: auto;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ob-foot-end {
    justify-content: flex-end;
}

/* === Sign-in providers ====================================================== */
.signin-providers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    padding: 0 8px;
    margin: 0 auto;
}
.signin-provider {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: var(--te-fg-strong);
    padding: 10px 14px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: not-allowed;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    font-family: var(--te-font-body);
    opacity: 0.75;
}
.signin-provider:disabled {
    cursor: not-allowed;
}
.signin-provider-ico {
    font-weight: 800;
    font-size: 1rem;
    color: var(--te-accent-gold);
}
.signin-coming {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--te-fg-quiet);
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
.signin-hint {
    font-size: 0.72rem;
    color: var(--te-fg-quiet);
}
.signin-hint b {
    color: var(--te-accent-gold);
}

/* === Narrow / mobile ======================================================== */
@media (max-width: 520px) {
    .ob-answers {
        grid-template-columns: 1fr;
    }
    .ob-question {
        font-size: 1.3rem;
    }
    /* Step indicator label is the first thing to drop on very narrow
       widths — the pip row alone still communicates progress. */
    .ob-progress-label {
        display: none;
    }
}

/* === Short viewports ======================================================== */
/* Phones held in landscape, foldables in inner-screen mode, etc. — vertical
   room is the constraint, not width. Tighten the gaps and shrink the lede
   so the answer cards stay above the fold. */
@media (max-height: 520px) {
    .welcome-screen,
    .signin-screen,
    .tutorial-screen { gap: 10px; }
    .ob-question { font-size: 1.2rem; margin-top: 4px; }
    .ob-lede { font-size: 0.78rem; }
    .ob-answer { padding: 10px 12px 10px; }
    .ob-answer-glyph { font-size: 1.2rem; }
}

/* === Tutorial (slice 3) =================================================== */
/* The tutorial screen hosts the real GameTable plus three overlay layers:
   the top chrome (progress pips + skip pill), the coach speech bubble, and
   the final Done card. All three sit above .game-table; pointer events are
   suppressed where they would shadow a hand tap. */

.tutorial-screen {
    /* Match the .game-table letterbox so the chrome + coach + done card
       align with the same bounding box the real game UI paints into. The
       base .screen class would centre us in a flex column at the same
       max-width / max-height, but we override display to a plain block
       since every child is positioned absolutely (and flex centring of
       absolute children is a no-op that bites the eye via accidental
       intrinsic-size collapses on Chromium). The result: this element is
       a viewport-pinned 1100×820 max box with no intrinsic content
       height of its own — exactly the containing block the
       absolute-positioned overlays need so `bottom: 132px` resolves
       against a visible 820px-ish height rather than the previous
       zero-height collapse, which left the bubble drifting above the
       viewport. */
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: 1100px;
    max-height: 820px;
    display: block;
    padding: 0;
    background: transparent;
    overflow: hidden;
}

/* Hide the GameTable HeaderBar entirely during the tutorial. The bar
   shows Trick / Level meta, Team A / Team B level chips, and an
   Undo/History/Pause/Options icon cluster — none of which is useful
   to a first-time player and all of which bleeds visually under the
   translucent tutorial chrome at the top of the felt. The HeaderBar
   element is still a DOM descendant of .tutorial-screen even though
   .game-table is position:fixed, so this descendant selector works. */
.tutorial-screen .header-bar { display: none; }

/* Top chrome — progress + skip pill */
.tutorial-chrome {
    position: absolute;
    top: 8px; left: 0; right: 0;
    z-index: 30;
    padding: 0 14px;
    display: flex; align-items: center; justify-content: space-between;
    pointer-events: none;
}
.tutorial-progress,
.tutorial-skip { pointer-events: auto; }

.tutorial-progress {
    display: flex; align-items: center; gap: 6px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 5px 12px;
    font-family: var(--te-font-body);
}
.tutorial-progress .pip {
    width: 14px; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.tutorial-progress .pip.on {
    background: var(--te-accent-gold);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}
.tutorial-progress .pip.done { background: rgba(255, 215, 0, 0.55); }
.tutorial-progress .step-label {
    font-size: 0.6rem; color: var(--te-fg-muted);
    letter-spacing: 0.16em; text-transform: uppercase;
    margin-left: 6px;
}
.tutorial-progress .step-label b { color: var(--te-accent-gold); }

.tutorial-skip {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--te-fg-muted);
    font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    font-family: var(--te-font-body);
}
.tutorial-skip:hover {
    color: var(--te-accent-gold);
    border-color: rgba(255, 215, 0, 0.25);
}

/* Coach speech bubble. Position-class drives where on the table the bubble
   sits; tail-class drives which edge the gold triangle points from. Pointer
   events on the bubble body are disabled when the bubble has no CTA so it
   never blocks a tap on the hand below; the CTA button re-enables them just
   for itself. */
.tutorial-coach {
    position: absolute;
    /* Above .action-dock (z:11 / 21 skip-only), .card-animation-layer (z:20),
       and below the OverlayPanel modals (z:100+) so a round-end/match-end
       modal would still cover the bubble if the runner ever surfaces one. */
    z-index: 50;
    background: linear-gradient(165deg, rgba(20, 30, 24, 0.96), rgba(8, 16, 12, 0.96));
    border: 1.5px solid var(--te-accent-gold);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--te-fg-strong);
    max-width: 320px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55),
                0 0 0 4px rgba(255, 215, 0, 0.08);
    pointer-events: none;
    font-family: var(--te-font-body);
    /* Flex column so the CTA can align-self to the right edge below the
       body copy, matching the right-aligned primary CTA pattern from the
       welcome / sign-in screens. */
    display: flex;
    flex-direction: column;
}
.tutorial-coach-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.tutorial-coach-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #FFE885, #b48a00);
    border: 1.5px solid var(--te-accent-gold);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
    flex-shrink: 0;
}
.tutorial-coach-name {
    font-weight: 700; font-size: 0.78rem;
    color: var(--te-accent-gold);
    letter-spacing: 0.06em;
    font-family: var(--te-font-display);
}
.tutorial-coach-body {
    font-size: 0.82rem;
    color: var(--te-fg-body);
    line-height: 1.45;
}
.tutorial-coach-body b { color: var(--te-accent-gold); font-weight: 700; }
.tutorial-coach-body em {
    color: var(--te-fg-strong); font-style: normal; font-weight: 700;
}
.tutorial-coach-cta {
    pointer-events: auto;
    /* align-self: flex-end + width: max-content right-aligns the CTA
       within the flex-column coach bubble, mirroring .ob-foot-end's
       right-aligned primary CTA used on the welcome / sign-in screens. */
    align-self: flex-end;
    width: max-content;
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px;
    background: linear-gradient(180deg, #4CAF50, #2E7D32);
    color: #fff; border: none; border-radius: 18px;
    padding: 6px 16px;
    font-size: 0.76rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer;
    font-family: var(--te-font-body);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.28);
}
.tutorial-coach-arrow { font-size: 0.9rem; }

/* Position variants — anchored to the .tutorial-screen container so they
   inherit the same coordinate space as the GameTable child. The
   above-hand variants sit at ~bottom: 220px so the bubble clears the top
   of the player's hand on real-device card sizes — in particular the
   tall 4-card 7s stack in step 4, which reaches ~190px above the
   safe-area inset on max-width frames; a bubble bottom edge any lower
   would visually clip the top of the rank glyph on the topmost 7. */
.tutorial-coach.coach-above-hand {
    left: 50%; bottom: 220px;
    transform: translateX(-50%);
}
.tutorial-coach.coach-above-hand-left {
    left: 30px; bottom: 220px;
}
.tutorial-coach.coach-above-hand-right {
    right: 30px; bottom: 220px;
}
/* Low variant — used by the observational intro step (1) where the
   bubble talks about Leo's partner badge at the top of the table and
   the tail flips upward to gesture at it. Sitting at bottom: 130px puts
   the bubble in the lower-middle band of the felt on short viewports,
   so it does not reach up into the partner-badge row even on landscape
   phones. No conflict with the action-dock here because step 1 parks
   the engine on WaitForManualAdvance before IsHumanTurn flips true, so
   the dock is not yet rendered. */
.tutorial-coach.coach-above-hand-low {
    left: 50%; bottom: 130px;
    transform: translateX(-50%);
}
.tutorial-coach.coach-top-left {
    left: 70px; top: 60px;
}
.tutorial-coach.coach-center {
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

/* Tail triangles — diamond rotated 45deg, with half its borders removed so
   it reads as a triangle pointing in the named direction. */
.tutorial-coach::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background: linear-gradient(165deg, rgba(20, 30, 24, 0.96), rgba(8, 16, 12, 0.96));
    border: 1.5px solid var(--te-accent-gold);
    transform: rotate(45deg);
}
.tutorial-coach.tail-none::after { display: none; }
.tutorial-coach.tail-down::after  { bottom: -8px; left: 28px; border-top: none; border-left: none; }
.tutorial-coach.tail-up::after    { top: -8px; left: 28px; border-bottom: none; border-right: none; }
.tutorial-coach.tail-left::after  { left: -8px; top: 22px; border-top: none; border-right: none; }
.tutorial-coach.tail-right::after { right: -8px; top: 22px; border-bottom: none; border-left: none; }

/* Card hint / dim — applied to .card elements by CardView when the
   tutorial controller pins a specific subset. The hint adds the
   pulsing gold ring used in the mockup; dim desaturates and lowers
   opacity for non-highlighted peers so the eye is drawn to the
   highlighted column. Only active during the onboarding tutorial. */
.card.tutorial-hint {
    box-shadow: 0 0 0 2px var(--te-accent-gold),
                0 0 18px rgba(255, 215, 0, 0.55),
                var(--te-shadow-card),
                inset 3px 3px 3px rgba(0, 0, 0, 0.18);
    animation: tutorial-hint-pulse 1.6s ease-in-out infinite;
}
.card.tutorial-dim {
    opacity: 0.55;
    filter: saturate(0.6);
}
@keyframes tutorial-hint-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--te-accent-gold),
                    0 0 18px rgba(255, 215, 0, 0.55),
                    var(--te-shadow-card),
                    inset 3px 3px 3px rgba(0, 0, 0, 0.18);
    }
    50% {
        box-shadow: 0 0 0 2px var(--te-accent-gold),
                    0 0 26px rgba(255, 215, 0, 0.85),
                    var(--te-shadow-card),
                    inset 3px 3px 3px rgba(0, 0, 0, 0.18);
    }
}

/* Done card — final "You're out — first!" hand-off. Sits centered over
   the table; CTAs route to QuickPlay setup or back to the main menu.
   Opaque card body (gradient over a solid dark base) so the underlying
   game table doesn't read through — the round may still be playing out
   behind it and the see-through look was visually confusing. */
.tutorial-done-card {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 32;
    width: 460px; max-width: 80%;
    background:
        linear-gradient(165deg, rgba(255, 215, 0, 0.22), rgba(0, 0, 0, 0.0)),
        #0d1814;
    border: 1.5px solid var(--te-accent-gold);
    border-radius: 16px;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18),
                0 12px 32px rgba(0, 0, 0, 0.7),
                0 0 80px rgba(0, 0, 0, 0.6);
    padding: 20px 24px 18px;
    text-align: center;
    color: var(--te-fg-strong);
    font-family: var(--te-font-body);
}
.tutorial-done-trophy {
    font-size: 2rem; line-height: 1;
    color: var(--te-accent-gold);
    text-shadow: 0 2px 12px rgba(255, 215, 0, 0.5);
}
.tutorial-done-title {
    font-family: var(--te-font-display);
    font-weight: 900;
    font-size: 1.45rem; line-height: 1.1;
    color: var(--te-accent-gold);
    text-shadow: var(--te-shadow-text);
    margin-top: 6px;
}
.tutorial-done-sub {
    font-size: 0.84rem; line-height: 1.5;
    color: var(--te-fg-body);
    margin: 8px auto 0;
    max-width: 360px;
}
.tutorial-done-sub b { color: var(--te-accent-gold); }
.tutorial-done-row {
    margin-top: 16px;
    display: flex; justify-content: center; gap: 10px;
    flex-wrap: wrap;
}
.tutorial-done-primary {
    background: linear-gradient(180deg, #4CAF50, #2E7D32);
    color: #fff; border: none; border-radius: 22px;
    padding: 9px 22px;
    font-size: 0.86rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer;
    font-family: var(--te-font-body);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
.tutorial-done-ghost {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--te-fg-strong);
    border-radius: 22px;
    padding: 9px 18px;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer;
    font-family: var(--te-font-body);
}