/* ==========================================================================
   NEXDAM ARCADE — game shell
   The frame around every canvas: HUD, overlays, controls and unlock toasts.
   Shared by all games so a new title inherits the whole chrome for free.
   ========================================================================== */

.arcade-stage{
    display:grid;
    gap:var(--ds-space-4);
    max-width:1040px;
    margin:0 auto;
}

/* ── HUD ───────────────────────────────────────────────────────────────── */

.arcade-hud{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
    gap:var(--ds-space-2);
    padding:var(--ds-space-3) var(--ds-space-4);
    background:var(--ds-glass);
    border:1px solid var(--ds-glass-border);
    border-radius:var(--ds-radius-md);
}
.arcade-hud-cell{ display:grid; gap:1px; text-align:center; }
.arcade-hud-cell strong{
    font-size:19px;
    font-weight:var(--ds-fw-bold);
    letter-spacing:var(--ds-ls-heading);
    /* Tabular figures stop the HUD from twitching as numbers change. */
    font-variant-numeric:tabular-nums;
}
.arcade-hud-cell span{
    font-size:10.5px; text-transform:uppercase;
    letter-spacing:var(--ds-ls-eyebrow);
    color:var(--ds-text-faint);
}

/* ── Canvas ────────────────────────────────────────────────────────────── */

.arcade-canvas-wrap{
    position:relative;
    /* Matches the 960x540 logical resolution both games render at. */
    aspect-ratio:16 / 9;
    width:100%;
    background:var(--ds-background-deep);
    border:1px solid var(--ds-glass-border);
    border-radius:var(--ds-radius-lg);
    overflow:hidden;
    box-shadow:var(--ds-shadow-lg);
}

.arcade-canvas{
    display:block;
    width:100%; height:100%;
    /* Stops mobile browsers from scrolling/zooming on in-game drags. */
    touch-action:none;
}
.arcade-canvas:focus-visible{
    outline:2px solid var(--ds-secondary);
    outline-offset:-2px;
}

/* ── Overlay (briefing / pause / result) ───────────────────────────────── */

.arcade-overlay{
    position:absolute; inset:0;
    display:none;
    place-items:center;
    padding:var(--ds-space-6);
    background:rgba(4,7,15,.86);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
.arcade-overlay.is-visible{ display:grid; }

.arcade-overlay-card{
    width:min(560px, 100%);
    max-height:100%;
    overflow-y:auto;
    padding:var(--ds-space-8);
    text-align:center;
    background:linear-gradient(160deg, rgba(28,44,74,.72), rgba(11,20,38,.86));
    border:1px solid var(--ds-glass-border);
    border-radius:var(--ds-radius-lg);
    box-shadow:var(--ds-shadow-lg);
    animation:ds-scale-in .3s var(--ds-ease-out) both;
}
.arcade-overlay.is-win  .arcade-overlay-card{ border-color:rgba(34,197,94,.35); }
.arcade-overlay.is-lose .arcade-overlay-card{ border-color:rgba(255,92,114,.35); }

.arcade-overlay-card h2{
    font-size:clamp(22px, 3.4vw, 30px);
    font-weight:var(--ds-fw-bold);
    letter-spacing:var(--ds-ls-heading);
    margin-bottom:var(--ds-space-3);
}
.arcade-overlay-card p{
    font-size:14.5px; line-height:1.75;
    color:var(--ds-text-muted);
}

.arcade-overlay-points{
    display:grid; gap:var(--ds-space-2);
    margin:var(--ds-space-6) 0;
    text-align:left;
}
.arcade-overlay-points li{
    position:relative;
    padding-left:var(--ds-space-6);
    font-size:13.5px; line-height:1.65;
    color:var(--ds-text-muted);
    list-style:none;
}
.arcade-overlay-points li::before{
    content:"";
    position:absolute; left:6px; top:8px;
    width:6px; height:6px; border-radius:50%;
    background:var(--ds-secondary);
}

.arcade-overlay-actions{
    display:flex; flex-wrap:wrap; gap:var(--ds-space-3);
    justify-content:center;
    margin-top:var(--ds-space-6);
}

/* ── Controls under the canvas ─────────────────────────────────────────── */

.arcade-controls{
    display:flex; flex-wrap:wrap; gap:var(--ds-space-3);
    justify-content:center;
}

/* ── Achievement toasts ────────────────────────────────────────────────── */

.arcade-toasts{
    position:fixed;
    left:50%; bottom:24px;
    transform:translateX(-50%);
    z-index:99500;               /* above the chatbot bubble (99000) */
    display:grid; gap:var(--ds-space-2);
    pointer-events:none;
    width:min(340px, calc(100vw - 32px));
}
.arcade-toast{
    display:flex; align-items:center; gap:var(--ds-space-3);
    padding:var(--ds-space-3) var(--ds-space-4);
    background:linear-gradient(140deg, rgba(0,162,255,.20), rgba(11,20,38,.94));
    border:1px solid rgba(0,162,255,.4);
    border-radius:var(--ds-radius-md);
    box-shadow:var(--ds-shadow-md);
    animation:ds-fade-in .35s var(--ds-ease-out) both;
}
.arcade-toast.is-leaving{ animation:arcade-toast-out .5s var(--ds-ease-out) both; }
.arcade-toast-icon{ font-size:22px; line-height:1; }
.arcade-toast-body{ display:grid; gap:1px; }
.arcade-toast-body strong{
    font-size:11px; text-transform:uppercase;
    letter-spacing:var(--ds-ls-eyebrow);
    color:var(--ds-secondary);
}
.arcade-toast-sub{ font-size:13.5px; font-weight:var(--ds-fw-semibold); }

@keyframes arcade-toast-out{
    to{ opacity:0; transform:translateY(10px); }
}

/* ── Immersive play ────────────────────────────────────────────────────── */

/* While a game is running the floating widgets would sit on top of the play
   field on small screens. The language picker stays: switching language must
   never require leaving the game. */
body.arcade-playing #nd-chat-bubble,
body.arcade-playing #nd-chat-window,
body.arcade-playing #robotPet{
    display:none !important;
}
@media (max-width:900px){
    body.arcade-playing .social-dock{ display:none !important; }
}

/* ── Rotate hint ───────────────────────────────────────────────────────── */

/* Both games render a 16:9 play field. In portrait on a phone that leaves a
   ~200px-tall canvas, which is playable but cramped — so we say so, instead of
   pretending it is fine. Hidden everywhere else. */
.arcade-rotate{
    display:none;
    margin-top:var(--ds-space-4);
    padding:var(--ds-space-3) var(--ds-space-4);
    text-align:center;
    font-size:13px; line-height:1.6;
    color:var(--ds-text-muted);
    background:var(--ds-primary-soft);
    border:1px solid rgba(0,162,255,.22);
    border-radius:var(--ds-radius-md);
}
@media (max-width:720px) and (orientation:portrait){
    .arcade-rotate{ display:block; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width:720px){
    .arcade-hud{ grid-template-columns:repeat(3, 1fr); }
    .arcade-hud-cell strong{ font-size:16px; }
    .arcade-overlay-card{ padding:var(--ds-space-6); }

    /* Break out of the page container: on a phone every pixel of width is
       play field. The container keeps its padding for everything else. */
    .arcade-canvas-wrap{
        width:100vw;
        margin-inline:calc(50% - 50vw);
        border-radius:0;
        border-left:0; border-right:0;
    }
}

@media (prefers-reduced-motion: reduce){
    .arcade-overlay-card,
    .arcade-toast,
    .arcade-toast.is-leaving{ animation:none; }
}