/*
 * Arcade shell — chrome condiviso dei giochi standalone (no chrome del sito).
 * Stessa impostazione di fade-master.css (che resta autonomo per il primo
 * gioco): cabinato che riempie il viewport, rotella impostazioni, overlay di
 * fine partita con classifica. Font Anton + Space Mono, palette via :root,
 * letta dal canvas con getComputedStyle. Nessuna dipendenza da Bootstrap qui.
 */
:root {
    --bg: #0E0E13;
    --surface: #16161F;
    --line: #23232F;
    --red: #E63946;
    --blue: #2E6BE6;
    --cream: #F4F0E6;
    --chrome: #C7CCD6;
    --gold: #E5A93C;
    --green: #36D399;
    --muted: #7A7E8C;
    --brown: #C98A4B;
    --violet: #9B7BD6;
    --cyan: #56C7D6;
    --skin: #E7B48B;
    --skin-d: #C99167;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }

/* Niente double-tap zoom: i tap ripetuti sono il gameplay, lo zoom del
   browser rovina la partita (il canvas resta touch-action:none). */
.ag-body,
.ag-body *:not(canvas) {
    touch-action: manipulation;
}
.ag-body {
    background: var(--bg);
    color: var(--cream);
    font-family: "Space Mono", ui-monospace, monospace;
    overflow: hidden;
    overscroll-behavior: none;
}

.ag-wrap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
}

.ag-cabinet {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 440 / 660;
    max-height: 100%;
    background: linear-gradient(180deg, #181822, #101017);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
    overflow: hidden;
}
.ag-pole {
    height: 8px;
    width: 100%;
    background: repeating-linear-gradient(115deg,
        var(--red) 0 14px, var(--cream) 14px 28px,
        var(--blue) 28px 42px, var(--cream) 42px 56px);
    background-size: 200% 100%;
    animation: ag-slide 6s linear infinite;
}
@keyframes ag-slide { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .ag-pole { animation: none; } }

.ag-canvas {
    display: block;
    width: 100%;
    height: calc(100% - 8px);
    touch-action: none;
}

/* --- Bottoni (autonomi) --- */
.ag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: "Space Mono", monospace;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.ag-btn--primary { background: var(--gold); color: #181822; }
.ag-btn--primary:hover { filter: brightness(1.06); }
.ag-btn--ghost { background: transparent; border-color: var(--line); color: var(--cream); }
.ag-btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.ag-btn:disabled { opacity: 0.5; cursor: default; }

/* --- Rotella impostazioni (bottom-right, fuori dalle zone di gioco) --- */
.ag-gear {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(22, 22, 31, 0.72);
    color: var(--cream);
    backdrop-filter: blur(3px);
    cursor: pointer;
}
.ag-gear:hover, .ag-gear[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.ag-gear svg { width: 20px; height: 20px; }
.ag-gear-backdrop { position: absolute; inset: 0; z-index: 4; }
.ag-gear-backdrop[hidden] { display: none; }
.ag-panel {
    position: absolute;
    right: 10px;
    bottom: 58px;
    z-index: 5;
    width: 210px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
.ag-panel[hidden] { display: none; }
.ag-panel-title {
    margin: 0 0 0.2rem;
    font-family: "Anton", sans-serif;
    letter-spacing: 0.05em;
    color: var(--gold);
    font-size: 0.95rem;
    text-align: center;
}
.ag-panel .ag-btn { width: 100%; }

/* --- Overlay fine partita / classifica --- */
.ag-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 8, 12, 0.92);
    backdrop-filter: blur(2px);
    overflow-y: auto;
}
.ag-overlay[hidden] { display: none; }
.ag-over-box {
    width: 100%;
    max-width: 360px;
    text-align: center;
}
.ag-over-emoji { font-size: 3rem; line-height: 1; }
.ag-over-title {
    font-family: "Anton", sans-serif;
    color: var(--red);
    font-size: 1.6rem;
    letter-spacing: 0.03em;
    margin: 0.25rem 0 0;
}
.ag-over-score { color: var(--cream); margin: 0.15rem 0 1rem; font-size: 0.95rem; }
.ag-over-score b { font-family: "Anton", sans-serif; font-size: 1.4rem; margin-left: 0.3rem; }

.ag-save { margin: 0 0 1rem; }
.ag-save-label {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.ag-save-row { display: flex; gap: 0.5rem; }
.ag-save-input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--cream);
    font-family: "Space Mono", monospace;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.55rem 0.7rem;
}
.ag-save-input:focus { outline: none; border-color: var(--gold); }
.ag-save-btn { white-space: nowrap; }
.ag-save-hint { margin: 0.5rem 0 0; font-size: 0.78rem; }
.ag-save-hint[hidden] { display: none; }
.ag-save-hint.is-ok { color: var(--green); }
.ag-save-hint.is-err { color: var(--red); }

.ag-board { text-align: left; margin-bottom: 1rem; }
.ag-board-title {
    font-family: "Anton", sans-serif;
    color: var(--gold);
    letter-spacing: 0.04em;
    font-size: 1rem;
    text-align: center;
    margin: 0 0 0.5rem;
}
.ag-board-list {
    list-style: none;
    counter-reset: rank;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.ag-board-list li {
    counter-increment: rank;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.ag-board-list li:first-child { border-top: none; }
.ag-board-list li::before {
    content: counter(rank);
    font-family: "Anton", sans-serif;
    color: var(--muted);
    min-width: 1.4rem;
    text-align: right;
}
.ag-board-list li .ag-row-nome {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.05em;
}
.ag-board-list li .ag-row-punti { font-family: "Anton", sans-serif; color: var(--gold); }
.ag-board-list li.is-me { background: rgba(229, 169, 60, 0.14); }
.ag-board-list li.is-me::before { color: var(--gold); }
.ag-board-empty { padding: 0.7rem; text-align: center; color: var(--muted); font-size: 0.85rem; }

.ag-over-actions { display: flex; gap: 0.6rem; }
.ag-over-actions .ag-btn { flex: 1 1 0; }