:root
{
    /* --- EMBER NIGHT (default theme) --- */
    --bg: #14101c;
    --bg-2: #1f1730;
    --panel: #271d3d;
    --panel-2: #322550;
    --ink: #f4eefb;
    --muted: #b3a6cc;
    --fire: #ff5a3c;
    --fire-2: #ff9a3c;
    --ember: #ffd23c;       /* primary accent (themed) */
    --cool: #4cc9f0;
    --good: #4ade80;
    --bad: #f87171;
    /* themed app background + board tokens */
    --app-bg:
        radial-gradient(1200px 600px at 80% -10%, rgba(255,90,60,.18), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(76,201,240,.14), transparent 55%),
        var(--bg);
    --deck-bg: linear-gradient(160deg, #3a2a5e, #221636);
    --disc-bg: linear-gradient(160deg, #5e2a3a, #361622);
    --deck-bd: var(--ember);
    --disc-bd: var(--fire);
    --tile-bg: var(--panel-2);
    --log-bg: linear-gradient(180deg, var(--panel), var(--bg-2));
    --ev-bg: var(--panel-2);
    --glow: rgba(255,210,60,.45);
    --radius: 16px;
    --shadow: 0 10px 30px rgba(0,0,0,.45);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --- CASINO FELT --- */
body[data-theme="felt"]
{
    --bg: #0e2a1f;
    --bg-2: #0c281c;
    --panel: #103324;
    --panel-2: #123b2a;
    --ink: #f3efe2;
    --muted: #a9c2b3;
    --fire: #d98a3c;
    --fire-2: #e8c66a;
    --ember: #e8c66a;
    --cool: #7ad7a0;
    --app-bg:
        radial-gradient(900px 520px at 50% 0%, #1c5a3f, transparent 70%),
        radial-gradient(1200px 600px at 50% 120%, rgba(0,0,0,.5), transparent 60%),
        var(--bg);
    --deck-bg: linear-gradient(160deg, #143d2b, #0c2a1d);
    --disc-bg: linear-gradient(160deg, #3d2a14, #2a1d0c);
    --deck-bd: var(--ember);
    --disc-bd: var(--fire);
    --tile-bg: #123b2a;
    --log-bg: linear-gradient(180deg, #103324, #0c281c);
    --ev-bg: rgba(20,61,43,.8);
    --glow: rgba(232,198,106,.5);
}

/* --- NEON ARCADE --- */
body[data-theme="neon"]
{
    --bg: #080610;
    --bg-2: #080a18;
    --panel: #0d1226;
    --panel-2: #13182e;
    --ink: #eaf6ff;
    --muted: #9fb3d6;
    --fire: #ff4cd0;
    --fire-2: #4cc9f0;
    --ember: #4cc9f0;
    --cool: #4cc9f0;
    --app-bg:
        radial-gradient(900px 460px at 80% -10%, rgba(255,76,208,.22), transparent 60%),
        radial-gradient(800px 460px at 10% 120%, rgba(76,201,240,.22), transparent 60%),
        var(--bg);
    --deck-bg: linear-gradient(160deg, #0e2740, #07131f);
    --disc-bg: linear-gradient(160deg, #3a0e34, #1f0720);
    --deck-bd: var(--cool);
    --disc-bd: var(--fire);
    --tile-bg: #13182e;
    --log-bg: linear-gradient(180deg, #0d1226, #080a18);
    --ev-bg: rgba(19,24,46,.85);
    --glow: rgba(76,201,240,.55);
}

/* --- MIDNIGHT (deep blue) --- */
body[data-theme="midnight"]
{
    --bg: #0a0f1e; --bg-2: #0c1226; --panel: #121a33; --panel-2: #18224a;
    --ink: #eaf0ff; --muted: #9fb0d6;
    --fire: #5b8cff; --fire-2: #7aa2ff; --ember: #8ab4ff; --cool: #5bd6ff;
    --good: #4ade80; --bad: #f87171;
    --app-bg:
        radial-gradient(1100px 560px at 80% -10%, rgba(91,140,255,.20), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(91,214,255,.12), transparent 55%),
        var(--bg);
    --deck-bg: linear-gradient(160deg, #1a2b55, #0e1730);
    --disc-bg: linear-gradient(160deg, #243a6e, #14224a);
    --deck-bd: var(--ember); --disc-bd: var(--cool);
    --tile-bg: var(--panel-2); --log-bg: linear-gradient(180deg, var(--panel), var(--bg-2));
    --ev-bg: var(--panel-2); --glow: rgba(138,180,255,.5);
}

/* --- ROSE (pink / magenta) --- */
body[data-theme="rose"]
{
    --bg: #1c0f18; --bg-2: #271320; --panel: #34182a; --panel-2: #461f39;
    --ink: #fdeef6; --muted: #d6a6c2;
    --fire: #ff5aa0; --fire-2: #ff8ac0; --ember: #ff7ab0; --cool: #c98aff;
    --good: #4ade80; --bad: #f87171;
    --app-bg:
        radial-gradient(1100px 560px at 80% -10%, rgba(255,90,160,.20), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(201,138,255,.14), transparent 55%),
        var(--bg);
    --deck-bg: linear-gradient(160deg, #4a1f3a, #2c1322);
    --disc-bg: linear-gradient(160deg, #5e2a44, #361626);
    --deck-bd: var(--ember); --disc-bd: var(--cool);
    --tile-bg: var(--panel-2); --log-bg: linear-gradient(180deg, var(--panel), var(--bg-2));
    --ev-bg: var(--panel-2); --glow: rgba(255,122,176,.5);
}

/* --- FOREST (emerald / teal) --- */
body[data-theme="forest"]
{
    --bg: #0a1a16; --bg-2: #0c211b; --panel: #103029; --panel-2: #133b32;
    --ink: #ecfbf3; --muted: #a6ccbd;
    --fire: #36c98f; --fire-2: #7ae0b0; --ember: #5fe0a8; --cool: #4cd0d0;
    --good: #4ade80; --bad: #f87171;
    --app-bg:
        radial-gradient(1000px 540px at 50% -5%, rgba(54,201,143,.20), transparent 65%),
        radial-gradient(1100px 600px at 50% 120%, rgba(0,0,0,.5), transparent 60%),
        var(--bg);
    --deck-bg: linear-gradient(160deg, #134034, #0c2a22);
    --disc-bg: linear-gradient(160deg, #1f4d3a, #14322a);
    --deck-bd: var(--ember); --disc-bd: var(--cool);
    --tile-bg: var(--panel-2); --log-bg: linear-gradient(180deg, var(--panel), var(--bg-2));
    --ev-bg: var(--panel-2); --glow: rgba(95,224,168,.5);
}

* { box-sizing: border-box; }

body
{
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--app-bg);
    transition: background .4s ease, color .4s ease;
}

.brand
{
    font-weight: 800;
    letter-spacing: .5px;
    background: linear-gradient(90deg, var(--fire), var(--fire-2), var(--ember));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 18px; text-align: center; }

.card-panel
{
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
}

h1 { font-size: clamp(28px, 5vw, 52px); margin: 0; }
h2 { margin: 0 0 12px; font-size: 22px; }
.muted { color: var(--muted); }
.big { font-size: clamp(40px, 10vw, 96px); font-weight: 800; letter-spacing: .12em; }

input, select, button
{
    font: inherit;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    padding: 12px 14px;
    background: var(--panel-2);
    color: var(--ink);
    outline: none;
}
input:focus, select:focus { border-color: var(--fire-2); }

button
{
    cursor: pointer;
    font-weight: 700;
    border: none;
    background: linear-gradient(90deg, var(--fire), var(--fire-2));
    color: #1b1020;
    transition: transform .05s ease, filter .15s ease;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
button.ghost { background: var(--panel-2); color: var(--ink); border: 1px solid rgba(255,255,255,.12); }
button.cool { background: linear-gradient(90deg, var(--cool), #7ad7f5); }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }
.hidden { display: none !important; }

/* QR + join */
#qrbox { background: #fff; padding: 16px; border-radius: 16px; display: inline-block; }
/* Smaller + tighter than a generic .big so a 4-letter code never spills onto the QR cards. */
.joincode { font-variant-numeric: tabular-nums; font-size: clamp(28px, 4.2vw, 56px); letter-spacing: .06em; }

/* Roster */
.roster { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.player-chip
{
    display: flex; align-items: center; gap: 10px;
    background: var(--panel-2); border-radius: 999px; padding: 8px 16px;
    border: 1px solid rgba(255,255,255,.1); font-weight: 600;
}
.player-chip .av { font-size: 24px; }
.player-chip.owner { outline: 2px solid var(--ember); }
.player-chip.off { opacity: .45; }
.player-chip.turn { background: linear-gradient(90deg, rgba(255,90,60,.5), rgba(255,154,60,.4)); }
.player-chip.dead { text-decoration: line-through; opacity: .4; }

/* Board */
.board { display: grid; grid-template-columns: 1fr; gap: 18px; }
.pile { display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pile .stack
{
    width: 120px; height: 168px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: var(--shadow); font-weight: 800; text-align: center; padding: 8px;
}
.stack.deck { background: linear-gradient(160deg, #3a2a5e, #221636); border: 2px solid var(--ember); }
.stack.discard { background: linear-gradient(160deg, #5e2a3a, #361622); border: 2px solid var(--fire); }
.stack .n { font-size: 42px; }

/* Hand (phone) — three columns of bare card images, no box, no label */
.hand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gcard
{
    padding: 0; background: none; border: none; box-shadow: none;
    border-radius: 10px; text-align: center;
    cursor: pointer; user-select: none; -webkit-touch-callout: none;
}
.gcard.sel { outline: 3px solid var(--ember); outline-offset: 2px; }
/* N1: press-and-hold preview of a hand card */
.card-zoom { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(8,6,14,.85); backdrop-filter: blur(3px); }
.card-zoom.hidden { display: none; }
.card-zoom img { height: min(86vh, 720px); width: auto; aspect-ratio: 720/1008; object-fit: contain; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.9); animation: zoomPop .18s ease; }
@keyframes zoomPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Interactive steal — thief's face-down cards */
.gcard.cardback { cursor: pointer; }
.gcard.cardback .cardback-face
{
    width: 100%; aspect-ratio: 720 / 1008; border-radius: 10px;
    background: var(--deck-bg); border: 2px solid var(--deck-bd);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; color: var(--ember); box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.gcard.cardback.sel .cardback-face { box-shadow: 0 0 0 3px var(--glow); transform: translateY(-3px); }

/* Victim — the targeted card, with a comic hand pointer */
.gcard.targeted { position: relative; }
.gcard.targeted .gcard-img { outline: 3px solid var(--bad); outline-offset: 2px; }
/* N7: a card the victim is SUGGESTING to the thief (advisory) — gold GLOW + the 👇 hand (top).
   Uses box-shadow only (NOT outline) so it never overrides the "being taken" outline (.targeted /
   .sel): when the thief picks the very card that was suggested, both read at once — red/amber ring
   = about to be taken, gold halo + 👇 = suggested. */
.gcard.suggested { position: relative; }
.gcard.suggested .gcard-img { box-shadow: 0 0 0 3px var(--glow), 0 0 16px 5px var(--glow); }
.steal-hand
{
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    font-size: 30px; animation: handbob .8s ease-in-out infinite; pointer-events: none;
}
/* the "about to be taken" hand — open hand reaching UP from the BOTTOM edge, opposite the 👇 above */
.steal-pick
{
    position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
    font-size: 30px; animation: handbob .8s ease-in-out infinite; pointer-events: none; z-index: 2;
}
@keyframes handbob
{
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}
/* The hand "pulls" the stolen card out */
.gcard.fx-pull { animation: cardpull .5s ease forwards; }
@keyframes cardpull
{
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(-120px) rotate(-12deg); opacity: 0; }
}

/* Real card art (Exploding Kittens) — the card face fills its grid cell */
.gcard-img
{
    display: block; width: 100%; height: auto;
    aspect-ratio: 720 / 1008; object-fit: cover; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
/* See-the-future peek keeps the small fixed thumbnails */
.gcard.sf { width: 52px; }
.gcard.sf .gcard-img { width: 52px; height: 72px; aspect-ratio: auto; }
.stack .pile-img
{
    width: 92px; height: 128px;
    object-fit: cover; border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,.5);
}

/* Avatar picker — 25 avatars in a 5×5 grid, with clear selected feedback */
.avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.avatar-grid button
{
    padding: 0; aspect-ratio: 1 / 1; font-size: 26px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-2); color: var(--ink);
    border: 2px solid rgba(255,255,255,.12); border-radius: 12px;
    transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.avatar-grid button:hover { border-color: var(--fire-2); }
.avatar-grid button.taken
{
    opacity: .3; filter: grayscale(1); cursor: not-allowed;
    border-style: dashed; transform: none;
}
.avatar-grid button.taken:hover { border-color: rgba(255,255,255,.12); }
.avatar-grid button.sel
{
    border-color: var(--ember);
    background: linear-gradient(160deg, rgba(255,210,60,.28), rgba(255,154,60,.18));
    box-shadow: 0 0 0 3px rgba(255,210,60,.35), var(--shadow);
    transform: translateY(-2px) scale(1.06);
}

.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.banner { padding: 12px 16px; border-radius: 12px; font-weight: 700; text-align: center; }
.banner.you { background: linear-gradient(90deg, var(--good), #86efac); color: #06210f; }
.banner.wait { background: var(--panel-2); color: var(--muted); }

/* ============================================================
   Modal — target picker, defuse placement, cat combos (phone)
   ============================================================ */
.modal-backdrop
{
    position: fixed; inset: 0; z-index: 50;
    background: rgba(8,6,14,.72); backdrop-filter: blur(3px);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px;
}
.modal-box
{
    width: 100%; max-width: 460px; max-height: 82vh; overflow-y: auto;
    background: var(--panel); border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px; box-shadow: 0 -8px 40px rgba(0,0,0,.6);
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
    animation: modalUp .18s ease;
}
@keyframes modalUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-title { font-weight: 800; font-size: 19px; text-align: center; margin-bottom: 14px; }
.modal-body { display: flex; flex-direction: column; gap: 10px; }
.modal-body button { width: 100%; }
.modal-sep { border-top: 1px dashed rgba(255,255,255,.16); margin: 4px 0 2px; }
.modal-hint { color: var(--muted); font-size: 13px; text-align: center; }
/* Five-different combo: toggle list of the cards you choose to spend. */
.combo-pick { display: flex; flex-direction: column; gap: 8px; }
.combo-opt.sel { outline: 3px solid var(--ember); outline-offset: 2px; }
.modal-body button:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
   End screen — big HAI VINTO / HAI PERSO with trophy / skull
   ============================================================ */
.end-trophy { font-size: 92px; line-height: 1; margin: 6px 0 2px; animation: trophyPop .5s ease; }
@keyframes trophyPop { 0% { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
#endView.win  h2 { color: var(--good); }
#endView.lose h2 { color: var(--bad); }
#endView h2 { font-size: 30px; letter-spacing: .04em; margin: 4px 0; }
/* keep the end screen within one viewport (no scroll on mobile).
   .center forces min-height:100vh; cap it to one *dynamic* viewport (dvh accounts for the
   mobile browser chrome) minus the .wrap's 24px top+bottom padding, and drop the vertical margin. */
#endView { min-height: calc(100dvh - 48px); margin: 0 auto; padding: 18px; }
#endView #endEmoji { margin: 0; }
#endView .end-trophy { font-size: 72px; margin: 2px 0; }

/* ============================================================
   App header — game title big, FriendlyFire small underneath
   ============================================================ */
.apptitle { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 10px 0 14px; text-align: center; }
.apptitle .game
{
    font-size: 30px; font-weight: 900; letter-spacing: .06em; line-height: 1;
    color: var(--ember); text-shadow: 0 2px 12px var(--glow);
}
.apptitle .brand-sub { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .18em; margin-top: 2px; }

/* ============================================================
   Phone turn box — status left, draw button right
   ============================================================ */
.banner.turnbox { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.banner.turnbox #turnText { flex: 1; min-width: 0; }
.banner.turnbox #turnDraw button { white-space: nowrap; }

/* horizontal card rows for the future / reorder / steal modals */
.future-row, .reorder-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.future-row .gcard, .reorder-row .gcard { width: 92px; position: relative; }
.future-row .gcard-img, .reorder-row .gcard-img { width: 92px; aspect-ratio: 720/1008; }
.future .future-tag, .reorder-card .future-tag
{
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: var(--ember); color: #14101c; font-size: 11px; font-weight: 800;
    padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.future.next .gcard-img, .reorder-card.next .gcard-img { outline: 3px solid var(--ember); outline-offset: 2px; }
.reorder-card { cursor: grab; touch-action: none; transition: transform .08s; }
.reorder-card.dragging { cursor: grabbing; transform: scale(1.08) rotate(-3deg); z-index: 5; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }

/* host match control bar (abort) */
.hostbar { display: flex; justify-content: center; margin-top: 18px; }
button.danger { color: #ff6b6b; border-color: rgba(255,107,107,.4); }
button.danger:hover { border-color: #ff6b6b; }

/* ============================================================
   Host settings form — clean rows, real toggle switches (#3)
   ============================================================ */
#settingsForm .col { background: var(--panel-2); border-radius: 12px; padding: 12px 14px; }
.setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.setting-toggle .setting-name { font-weight: 700; color: var(--ink); }
.switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track
{
    position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.18);
    transition: background .15s;
}
.switch .track::before
{
    content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
    border-radius: 50%; background: #fff; transition: transform .15s;
}
.switch input:checked + .track { background: var(--ember); }
.switch input:checked + .track::before { transform: translateX(20px); }

#log { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#log .ev { background: var(--panel-2); border-radius: 10px; padding: 8px 12px; font-size: 14px; }

#toast
{
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    background: var(--bad); color: #2a0b0b; padding: 12px 18px; border-radius: 12px;
    font-weight: 700; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s; pointer-events: none;
}
#toast.show { opacity: 1; }

/* Nope window — a separate indicator from the turn, with a bar that drains over the window */
.nope-indicator
{
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    background: rgba(248,113,113,.12); border: 1px solid var(--bad);
    border-radius: 12px; padding: 10px 16px;
}
.nope-label { font-weight: 800; color: var(--bad); letter-spacing: .06em; }
.nope-bar-track
{
    width: 100%; max-width: 480px; height: 12px;
    background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden;
}
.nope-bar-fill
{
    height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--bad), var(--fire-2));
    border-radius: 999px;
}

.seefuture { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }

/* Lobby QR boxes — two uniform, equal, well-spaced cards */
.qr-row { display: flex; gap: 32px; justify-content: center; align-items: stretch; flex-wrap: wrap; margin: 12px 0 4px; }
.qr-card
{
    width: 300px;
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    transition: filter .5s ease, opacity .5s ease;
    position: relative;
}
.qr-card h2 { letter-spacing: .14em; }
#hostCard h2 { color: var(--ember); }
#guestCard h2 { color: var(--cool); }

/* Full-bleed lobby stage: QR cards centered at 1/4 and 3/4 of the viewport, info overlay in the gap */
#lobbyView { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: calc(100vh - 110px); }
.lobby-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: calc(100vh - 200px); padding: 0 24px; }
#guestCard, #hostCard { justify-self: center; }   /* centered in each half -> 1/4 and 3/4 */
.lobby-center
{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(320px, 26vw);
    display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.lobby-center .roster { align-content: flex-start; }
/* Table code: the label sits ABOVE the code (totally different fonts — never on the same line) */
.table-code { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.table-code-label { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* Esci bottom-left; theme switch centered at the bottom */
.lobby-exit { position: absolute; left: 24px; bottom: 20px; }
.lobby-themebar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Lobby theme picker as 2 rows × 3 columns (the narrow in-game board keeps its 2-column layout) */
.lobby-themebar .theme-switch { grid-template-columns: repeat(3, 1fr); max-width: 480px; }
.qr-frame
{
    background: #fff; border-radius: 14px; padding: 12px;
    width: 264px; height: 264px;
    display: flex; align-items: center; justify-content: center;
}
.qr-frame canvas, .qr-frame img, .qr-frame table { display: block; }
.qr-status { font-weight: 700; color: var(--muted); }

/* Powered-down state when the host has taken their seat */
.qr-card.claimed { filter: grayscale(1) brightness(.55); opacity: .7; }
.qr-card.claimed .qr-status { color: var(--good); }
.qr-card.claimed::after
{
    content: "✓ Host connesso";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 22px; color: var(--good);
    background: rgba(20,16,28,.55); border-radius: var(--radius);
}

/* ============================================================
   Theme switcher (chips) — used on the tabellone and host phone
   ============================================================ */
/* The 6 themes always laid out as a tidy 2×3 grid (phone host GUI and tabellone), never a
   haphazard wrapping row. */
.theme-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.theme-switch button { width: 100%; text-align: center; }
.theme-switch button
{
    padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
    background: var(--panel-2); color: var(--ink); border: 2px solid rgba(255,255,255,.12);
    transition: border-color .12s, box-shadow .12s, transform .08s;
}
.theme-switch button:hover { border-color: var(--fire-2); }
.theme-switch button.active
{
    border-color: var(--ember);
    box-shadow: 0 0 0 3px var(--glow);
    transform: translateY(-1px);
}

/* ============================================================
   TABELLONE — board layout C (16:9 stage, hero deck/discard,
   bottom player strip, side history column). Themed via tokens.
   ============================================================ */
.tv-themebar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 12px; }

/* ============================================================
   Tabellone FX — animations + full-screen effect overlay
   ============================================================ */
.fx-overlay { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 50; }
.fx-overlay.fx-red { background: radial-gradient(circle, rgba(248,113,113,0), rgba(248,113,113,.35)); animation: fxflash .45s ease; }
.fx-overlay.fx-shield { background: radial-gradient(circle, rgba(74,222,128,0), rgba(74,222,128,.30)); animation: fxflash .6s ease; }
.fx-overlay.fx-tense { background: radial-gradient(circle, rgba(255,154,60,0), rgba(255,154,60,.25)); animation: fxflash .5s ease; }
.fx-overlay.fx-explode { background: radial-gradient(circle, rgba(255,255,255,.6), rgba(255,90,60,.5) 40%, transparent 70%); animation: fxboom .75s ease; }
.fx-overlay.fx-win { background: radial-gradient(circle, rgba(255,210,60,.35), transparent 70%); animation: fxflash 1.2s ease; }
@keyframes fxflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fxboom { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.2); } }

.fx-pulse { animation: fxpulse .4s ease; }
@keyframes fxpulse { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.fx-shake { animation: fxshake .55s ease; }
@keyframes fxshake
{
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-10px); }
    30% { transform: translateX(9px); }
    45% { transform: translateX(-7px); }
    60% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

.tv-board
{
    display: flex; height: calc(100vh - 120px); min-height: 520px;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow);
}
.tv-stage { flex: 1; display: flex; flex-direction: column; padding: 22px 26px; gap: 14px; min-width: 0; }

/* spotlight: the current player */
.tv-spot { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 64px; }
.tv-spot .ava { font-size: 56px; line-height: 1; filter: drop-shadow(0 0 16px var(--glow)); }
.tv-spot .txt { display: flex; flex-direction: column; }
.tv-spot .nm { font-weight: 800; font-size: 28px; }
.tv-spot .st { color: var(--ember); font-weight: 800; font-size: 14px; letter-spacing: .14em; }
.tv-spot.alert .st { color: var(--bad); }

/* board flags: turn-direction arrow + imploding-armed badge */
.board-flags { display: flex; gap: 14px; justify-content: center; align-items: center; min-height: 26px; }
.board-flags .flag
{
    font-weight: 800; font-size: 15px; letter-spacing: .06em;
    padding: 4px 12px; border-radius: 999px; background: var(--panel-2); color: var(--muted);
}
.board-flags .flag.armed { background: rgba(255,70,70,.18); color: #ff6b6b; animation: fxpulse 1.2s ease-in-out infinite; }

/* hero table: big deck + discard */
.tv-table { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px); }
.tv-hero
{
    aspect-ratio: 720 / 1008; height: 66%; max-height: 60vh; border-radius: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-weight: 800; text-align: center; box-shadow: 0 18px 44px rgba(0,0,0,.6);
    position: relative; overflow: hidden;
}
.tv-hero.deck { background: var(--deck-bg); border: 3px solid var(--deck-bd); }
.tv-hero.discard { background: var(--disc-bg); border: 3px solid var(--disc-bd); }
.tv-hero .n { font-size: clamp(40px, 6vw, 68px); }
.tv-hero .lbl { font-size: 13px; opacity: .8; letter-spacing: .18em; margin-top: 6px; }
.tv-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-hero .hero-empty { font-size: 40px; opacity: .5; }

/* bottom strip: the other players (reuse .player-chip, bigger) */
.tv-strip { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.tv-strip .player-chip { font-size: 20px; padding: 11px 22px; }
.tv-strip .player-chip .av { font-size: 34px; }

/* side history column */
.tv-log
{
    width: 45%; min-width: 390px; background: var(--log-bg);
    border-left: 1px solid rgba(255,255,255,.08); padding: 18px;
    display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.tv-log-h { font-weight: 800; color: var(--ember); letter-spacing: .1em; font-size: 20px; }
.tv-log #log { max-height: none; flex: 1; overflow-y: auto; }
.tv-log #log .ev { background: var(--ev-bg); font-size: 17px; }

/* themed deck/discard tokens also drive the lobby's small stacks if reused */
.stack.deck { background: var(--deck-bg); border: 2px solid var(--deck-bd); }
.stack.discard { background: var(--disc-bg); border: 2px solid var(--disc-bd); }

/* ============================================================
   TABELLONE — 3-column board (players | decks | history)
   ============================================================ */
.tv-header .apptitle.apptitle-row { flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; text-align: left; }
.tv-header .apptitle-row .game { font-size: 26px; }
.tv-header .apptitle-row .brand-sub { margin-top: 0; }   /* "FriendlyFire" stacks UNDER the game title */

/* The board breaks out of the centered .wrap to span the full viewport width, so the player column
   sits flush to the LEFT screen edge and the history column flush to the RIGHT edge. */
#boardView
{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.tv-board3
{
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr minmax(340px, 30%);
    gap: 0;
    height: calc(100vh - 112px); min-height: 460px;
    border-radius: 0; overflow: hidden;
    border: 0; box-shadow: none;
    background: var(--log-bg);
}
.tv-col-h { font-weight: 800; color: var(--ember); letter-spacing: .1em; font-size: 18px; margin-bottom: 6px; }

/* left column: players (top) + options/themes (bottom) */
.tv-left { display: flex; flex-direction: column; padding: 16px; min-height: 0; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border-right: 1px solid rgba(255,255,255,.08); }
.tv-players { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 0; }
.tv-player
{
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
    background: var(--panel-2); border: 2px solid transparent;
}
.tv-player .av { font-size: 30px; line-height: 1; }
.tv-player .who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tv-player .who .nm { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-player .who .st { font-size: 11px; color: var(--ember); font-weight: 700; letter-spacing: .04em; }
.tv-player .who .st.next { color: var(--muted); }
.tv-player .hc { font-size: 14px; color: var(--muted); }
/* mini-hand (N2): the exact number of cards rendered as tiny fanned card-backs */
.tv-player .tv-hand { position: relative; display: inline-block; height: 26px; flex: 0 0 auto; align-self: center; }
.tv-player .tv-hand.empty { color: var(--muted); font-size: 11px; font-style: italic; height: auto; }
.tv-player .minicard { position: absolute; top: 1px; width: 17px; height: 24px; }
.tv-player .minicard img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; border: 1px solid rgba(0,0,0,.45); box-shadow: 0 1px 3px rgba(0,0,0,.55); }
.tv-player.turn { border-color: var(--ember); box-shadow: 0 0 0 3px var(--glow); background: linear-gradient(160deg, rgba(255,210,60,.16), var(--panel-2)); }
.tv-player.dead { opacity: .45; filter: grayscale(.7); }
.tv-player.dead .who .st { color: var(--bad); }
.tv-left-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }

/* centre column: flags + the two hero piles */
.tv-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; min-width: 0; }
.tv-center .tv-table { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px); width: 100%; min-height: 0; }
.tv-center .tv-hero { aspect-ratio: 720 / 1008; height: min(60vh, 460px); }
.tv-hero.deck .deck-count
{
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding: 0 0 14px; color: #fff;
    /* sit low, on a bottom fade, so the count never covers the card-back artwork */
    background: linear-gradient(to top, rgba(8,6,14,.78) 0%, rgba(8,6,14,.5) 45%, rgba(8,6,14,0) 100%);
    border-radius: 0 0 var(--radius) var(--radius);
}
.tv-hero.deck .deck-count .n { font-size: clamp(38px, 5vw, 60px); font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.tv-hero.deck .deck-count .lbl { font-size: 12px; letter-spacing: .18em; opacity: .85; margin-top: 4px; }
.tv-hero.deck.imploding-next { box-shadow: 0 0 0 4px var(--bad), 0 18px 44px rgba(0,0,0,.6); }
.tv-hero.deck.imploding-next .deck-count { background: rgba(180,20,20,.30); }

/* ---- expansion public zones (Tower-of-Power stash, barking, curse, marks, claims) ---- */

/* extra flag colours on the centre strip */
.board-flags .flag.reversed { background: rgba(90,160,255,.16); color: #7db4ff; }
.board-flags .flag.crown    { background: rgba(255,210,60,.18); color: var(--ember); }
.board-flags .flag.bark     { background: rgba(150,180,255,.16); color: #aab8ff; }
.board-flags .flag.bark.threat { background: rgba(255,70,70,.20); color: #ff6b6b; animation: fxpulse 1.2s ease-in-out infinite; }
.board-flags .flag.cursed   { background: rgba(180,110,255,.18); color: #c79bff; }

/* the shared face-up Tower-of-Power Stash, sitting next to the deck/discard heroes */
.tv-stash
{
    aspect-ratio: 720 / 1008; height: min(60vh, 460px);
    border-radius: 18px; position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(160deg, rgba(255,210,60,.12), var(--panel-2));
    border: 3px solid var(--ember); box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
.tv-stash.hidden { display: none; }
.tv-stash .stash-crown
{
    position: absolute; top: 8px; left: 0; right: 0; text-align: center;
    font-weight: 800; font-size: 13px; letter-spacing: .04em; color: var(--ember);
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.tv-stash .stash-fan { position: relative; height: 56%; width: 86%; }
.tv-stash .stash-fan .scard { position: absolute; top: 0; width: 60px; aspect-ratio: 720 / 1008; }
.tv-stash .stash-fan .scard img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid rgba(0,0,0,.5); box-shadow: 0 2px 6px rgba(0,0,0,.55); display: block; }
.tv-stash .stash-fan .stash-empty { font-size: 34px; opacity: .5; text-align: center; }
.tv-stash .stash-count
{
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 12px;
    display: flex; flex-direction: column; align-items: center; color: #fff;
    background: linear-gradient(to top, rgba(8,6,14,.78) 0%, rgba(8,6,14,0) 100%);
}
.tv-stash .stash-count .n { font-size: clamp(28px, 4vw, 46px); font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.tv-stash .stash-count .lbl { font-size: 11px; letter-spacing: .18em; opacity: .85; margin-top: 2px; }

/* per-player public badges next to the name */
.tv-player .who .nm .pbadge { font-size: 13px; margin-left: 5px; }
.tv-player.crowned { border-color: var(--ember); box-shadow: 0 0 0 2px var(--glow); }
.tv-player.barked  { border-color: var(--bad); animation: fxpulse 1.2s ease-in-out infinite; }
.tv-player .claims { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tv-player .claims .claim { font-size: 10px; font-weight: 700; color: #ffcf6b; background: rgba(255,160,40,.16); padding: 1px 6px; border-radius: 999px; }

/* MARKed (face-out) cards fanned under a player's name (public reveal of those types) */
.tv-player .marked-line { margin-top: 4px; }
.tv-player .marked-fan { position: relative; display: inline-block; height: 30px; }
.tv-player .marked-fan .mcard { position: absolute; top: 0; width: 21px; aspect-ratio: 720 / 1008; }
.tv-player .marked-fan .mcard img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; border: 1px solid var(--ember); box-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* history column inside the grid (override the old width) */
.tv-board3 .tv-log { width: auto; min-width: 0; border-left: 1px solid rgba(255,255,255,.08); }

/* publicly-revealed defuse placement: kitten flies onto the deck with a depth label */
.defuse-fly
{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -160%); z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    animation: defuseDrop 1.1s ease forwards; pointer-events: none;
}
.defuse-fly img { width: 96px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.defuse-fly .defuse-depth { background: var(--ember); color: #14101c; font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
@keyframes defuseDrop { 0% { transform: translate(-50%, -200%) rotate(-8deg); opacity: 0; } 30% { opacity: 1; } 70% { transform: translate(-50%, -120%) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -120%); opacity: 0; } }

/* ============================================================
   Played-card overlay (centre) + Nope countdown + Nope stack
   ============================================================ */
.play-overlay
{
    position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
    background: rgba(8,6,14,.55); backdrop-filter: blur(2px);
}
.play-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.play-cards { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.play-card { position: relative; margin: 0 -34px; animation: playLand .25s ease; }
/* Clearly bigger than the pile cards (~460px) and "raised" (deep shadow) so it floats above them —
   the size gap also makes the shrink-onto-the-discard landing visible. */
.play-card img { height: min(74vh, 580px); width: auto; aspect-ratio: 720/1008; object-fit: cover; border-radius: 16px; box-shadow: 0 32px 72px rgba(0,0,0,.9), 0 0 0 2px rgba(255,255,255,.06); }
.play-card.nope-card { position: absolute; left: 50%; top: 50%; margin: 0; translate: -50% -50%; animation: nopeLand .3s cubic-bezier(.2,1.4,.5,1); }
.play-card.nope-card img { height: min(56vh, 420px); width: auto; box-shadow: 0 22px 52px rgba(0,0,0,.85); }
@keyframes playLand { from { transform: scale(.6); opacity: 0; } to { opacity: 1; } }
/* The played card shrinking + gliding onto the discard pile when the window closes. */
.play-fly { z-index: 60; border-radius: 16px; overflow: hidden; animation: none;
    box-shadow: 0 18px 44px rgba(0,0,0,.7);
    transition: left 1.05s cubic-bezier(.34,.01,.2,1), top 1.05s cubic-bezier(.34,.01,.2,1),
                width 1.05s cubic-bezier(.34,.01,.2,1), height 1.05s cubic-bezier(.34,.01,.2,1); }
.play-fly img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
@keyframes nopeLand { from { transform: scale(1.6) rotate(0); opacity: 0; } to { opacity: 1; } }
.play-nopebar-track { width: clamp(220px, 26vw, 360px); height: 12px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.play-nopebar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--fire), var(--ember)); }
.play-hint { font-weight: 800; font-size: 22px; letter-spacing: .04em; min-height: 26px; color: var(--ink); text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* ============================================================
   Card fly animations (N3 play-from-tile, N4 draw-to-tile)
   ============================================================ */
.tv-fly { z-index: 70; pointer-events: none; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,.7); }
.tv-fly img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }

/* ============================================================
   N5 — dramatic Exploding/Imploding Kitten reveal
   ============================================================ */
.kitten-reveal
{
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, rgba(60,6,6,.62), rgba(6,4,10,.93));
}
.kitten-reveal.hidden { display: none; }
.kitten-reveal.dead { animation: fxshake .55s ease; }
.kitten-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.kitten-card
{
    width: auto; height: min(64vh, 520px); aspect-ratio: 720/1008; object-fit: cover; border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,.9), 0 0 0 3px rgba(255,90,60,.5);
}
.kitten-reveal.show .kitten-card { animation: kittenThrow .6s cubic-bezier(.2,1.3,.4,1), kittenTense 1.1s ease-in-out .6s infinite; }
.kitten-reveal.saved .kitten-card, .kitten-reveal.dead .kitten-card { animation: none; }
@keyframes kittenThrow { 0% { transform: scale(1.7) rotate(-12deg); opacity: 0; } 60% { transform: scale(.92) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes kittenTense
{
    0%, 100% { box-shadow: 0 30px 80px rgba(0,0,0,.9), 0 0 0 3px rgba(255,90,60,.5); }
    50% { box-shadow: 0 30px 92px rgba(0,0,0,.95), 0 0 0 8px rgba(255,60,40,.85); }
}
.kitten-defuse
{
    position: absolute; top: 50%; left: 50%; width: auto; height: min(52vh, 420px);
    aspect-ratio: 720/1008; object-fit: cover; border-radius: 16px;
    transform: translate(-50%, -50%) rotate(-9deg); box-shadow: 0 26px 64px rgba(0,0,0,.85);
    animation: defuseSlam .35s cubic-bezier(.2,1.4,.5,1);
}
.kitten-defuse.hidden { display: none; }
@keyframes defuseSlam { from { transform: translate(-50%, -165%) rotate(-26deg) scale(1.3); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-9deg) scale(1); opacity: 1; } }
.kitten-skull { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); font-size: min(34vh, 280px); filter: drop-shadow(0 8px 24px rgba(0,0,0,.85)); animation: skullIn .4s ease; }
.kitten-skull.hidden { display: none; }
@keyframes skullIn { from { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } }
.kitten-caption { font-weight: 900; font-size: clamp(24px, 4vw, 48px); letter-spacing: .08em; text-shadow: 0 4px 18px rgba(0,0,0,.85); color: #ffd23c; }
.kitten-reveal.saved .kitten-caption { color: var(--good); }
.kitten-reveal.dead .kitten-caption { color: var(--bad); }

/* ============================================================
   Platform dashboard (login → dashboard → game)
   ============================================================ */
.dash-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 18px; margin-top: 10px; max-width: 936px; }
.dash-tile
{
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 28px 18px; border-radius: 18px; cursor: pointer; text-align: center;
    background: var(--panel-2); color: var(--ink); border: 2px solid rgba(255,255,255,.12);
    transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.dash-tile:hover { border-color: var(--ember); transform: translateY(-3px); box-shadow: 0 0 0 3px var(--glow), var(--shadow); }
.dash-tile .ic { font-size: 44px; line-height: 1; }
.dash-tile .t { font-weight: 800; font-size: 20px; }
.dash-tile small { color: var(--muted); font-weight: 400; }
/* A game tile showing its real logo: the artwork fills the tile edge-to-edge, clipped to the tile's
   rounded corners. The logo already carries the title, so no icon/label is rendered. */
.dash-tile.has-logo { padding: 0; overflow: hidden; gap: 0; min-height: 132px; }
.dash-tile.has-logo .tile-logo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Dashboard layout: games-only grid centered in the viewport, Esci pinned bottom-left --- */
#dashboardView { position: relative; min-height: calc(100vh - 130px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 4vh; }
.dash-center { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.dash-greet { font-size: 26px; margin: 0; text-align: center; }
.dash-tile { width: 300px; height: 250px; justify-content: center; }
.dash-logout { position: absolute; left: 0; bottom: 18px; }

/* Coming-soon placeholder tiles: visible but inert */
.dash-tile.soon-tile { cursor: not-allowed; opacity: .5; filter: grayscale(.5); gap: 10px; }
.dash-tile.soon-tile:hover { transform: none; border-color: rgba(255,255,255,.12); box-shadow: none; }
.dash-tile.soon-tile .t { font-size: 22px; letter-spacing: .04em; }
.dash-tile.soon-tile .soon-badge { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }

/* Header platform wordmark at 2× (dashboard/landing only; inside a game it keeps the compact size) */
.tv-header .apptitle-row .game.platform { font-size: 52px; line-height: 1; }

/* Header user menu: the name opens a dropdown with Profilo / Admin */
.user-menu { position: relative; }
.user-menu-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--ink); cursor: pointer; font: inherit; font-size: 15px; padding: 6px 10px; border-radius: 10px; }
.user-menu-btn:hover { background: rgba(255,255,255,.07); }
.user-menu-btn .caret { font-size: 11px; opacity: .7; }
.user-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px; z-index: 50; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--panel-2); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: var(--shadow); }
.user-menu-pop button { display: flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--ink); text-align: left; font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.user-menu-pop button:hover { background: rgba(255,255,255,.08); }

/* Landing hero */
.landing-hero { font-size: 96px; line-height: 1; }

/* Profile form */
.field { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .03em; margin-bottom: -6px; }
hr.sep { width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 8px 0; }

/* Admin panels */
.admin-sec { display: flex; flex-direction: column; gap: 8px; }
.admin-sec h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: .03em; }
.admin-row
{
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid rgba(255,255,255,.10);
}
.admin-row.off { opacity: .55; }
.admin-row .who { display: flex; align-items: center; gap: 10px; }
.admin-row .av { font-size: 22px; }
.admin-acts { display: flex; gap: 6px; flex-wrap: wrap; }
button.mini { padding: 6px 10px; font-size: 13px; }
button.mini:disabled { opacity: .4; cursor: not-allowed; }
.tag { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.tag.admin { background: var(--ember); color: #1a1020; }
.tag.off { background: rgba(255,255,255,.18); color: var(--ink); }