@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

/* ════════════════════════════════════════
   VARIABILI
   ════════════════════════════════════════ */
:root {
    --bg: #070707;
    --text: #FCF7F8;
    --accent: #961114;
    --accent-dim: rgba(150,17,20,0.15);
    --accent-glow: rgba(150,17,20,0.4);
    --card: rgba(14,14,14,0.82);
    --border: rgba(252,247,248,0.07);
    --border-hover: rgba(252,247,248,0.18);
    --nav-h: 70px;
    --font-d: 'Playfair Display', Georgia, serif;
    --font-b: 'Inter', sans-serif;
    --grid-bg: #0e0e0e;
    --grid-line: rgba(255,255,255,0.035);
    --wall: #961114;
}
body.light-theme {
    --bg: #FCF7F8; --text: #070707;
    --card: rgba(235,235,235,0.88);
    --border: rgba(7,7,7,0.08); --border-hover: rgba(7,7,7,0.2);
    --accent-dim: rgba(150,17,20,0.1);
    --grid-bg: #eee;
    --grid-line: rgba(0,0,0,0.04);
    --wall: #961114;
}

/* ════════════════════════════════════════ */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
    font-family: var(--font-b);
    background: var(--bg); color: var(--text);
    transition: background .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════ */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:100;
    background: rgba(7,7,7,.78);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: background .5s cubic-bezier(.4,0,.2,1);
}
body.light-theme .navbar { background: rgba(252,247,248,.78); }
.navbar-container { height:var(--nav-h); padding:0 2rem; display:flex; justify-content:space-between; align-items:center; }
.navbar-logo { display:flex; align-items:center; gap:.75rem; }
.logo-icon { width:auto; height:40px; flex-shrink:0; }
.logo-text { font-family:var(--font-d); font-size:1.4rem; font-weight:700; letter-spacing:-.02em; }
.navbar-links { display:flex; align-items:center; gap:1.5rem; }
.nav-link { color:var(--text); text-decoration:none; font-size:.9rem; font-weight:500; transition:color .2s; }
.nav-link:hover { color:var(--accent); }
.theme-toggle {
    background:none; border:1px solid var(--border); border-radius:50%;
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text); transition:all .2s; position:relative;
}
.theme-toggle:hover { border-color:var(--accent); transform:rotate(180deg); }
.sun-icon,.moon-icon { position:absolute; transition:opacity .2s,transform .2s; }
.sun-icon { opacity:0; transform:rotate(-90deg); }
.moon-icon { opacity:1; }
body.light-theme .sun-icon { opacity:1; transform:rotate(0); }
body.light-theme .moon-icon { opacity:0; transform:rotate(90deg); }

/* ════════════════════════════════════════
   HUD
   ════════════════════════════════════════ */
.hud {
    position:fixed; top: calc(var(--nav-h) + .8rem); left:50%; transform:translateX(-50%);
    z-index:50; display:flex; gap:1.8rem; align-items:center;
    pointer-events:none;
}
.hud-item { display:flex; flex-direction:column; align-items:center; gap:.1rem; }
.hud-label { font-size:.55rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; opacity:.35; }
.hud-val { font-family:var(--font-d); font-size:1.1rem; font-weight:700; font-variant-numeric:tabular-nums; }
.hud-mode { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; opacity:.5; }
.hud-mode.miku { color:#00B4D8; opacity:.7; }
.hud-mode.teto  { color:#C41E3A; opacity:.7; }

/* ════════════════════════════════════════
   CANVAS
   ════════════════════════════════════════ */
#gameCanvas {
    position:fixed;
    top:50%; left:50%; transform:translate(-50%,-50%);
    border-radius:12px;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
}

/* ════════════════════════════════════════
   MENU OVERLAY (pre-partita)
   ════════════════════════════════════════ */
.menu-overlay {
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    background: rgba(7,7,7,.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: opacity .3s;
}
.menu-overlay.hidden { opacity:0; pointer-events:none; }

.menu-panel {
    width:340px; max-width:90vw;
    background: var(--card);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--border);
    border-radius:18px;
    padding:1.6rem 1.5rem 1.4rem;
    box-shadow: 0 12px 50px rgba(0,0,0,.45);
    display:flex; flex-direction:column; gap:1.1rem;
}
body.light-theme .menu-panel { box-shadow: 0 12px 50px rgba(0,0,0,.12); }

.menu-header { text-align:center; }
.menu-title { font-family:var(--font-d); font-size:1.9rem; font-weight:900; letter-spacing:-.03em; }
.menu-sub { font-size:.62rem; font-weight:500; opacity:.35; text-transform:uppercase; letter-spacing:.14em; margin-top:.2rem; }

/* Sezione generica */
.menu-section { display:flex; flex-direction:column; gap:.4rem; }
.menu-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; opacity:.4; }

/* ── Modalità ── */
.mode-group { display:flex; gap:.4rem; }
.mode-btn {
    flex:1; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:10px;
    color:var(--text); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
    padding:.55rem .2rem .45rem; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    transition:all .2s;
}
.mode-btn:hover { border-color:var(--border-hover); background:rgba(255,255,255,.1); }
.mode-btn.active { border-color:var(--accent); background:var(--accent-dim); }
.mode-btn.active.miku-active { border-color:#00B4D8; background:rgba(0,180,216,.12); }
.mode-btn.active.teto-active { border-color:#C41E3A; background:rgba(196,30,58,.12); }
.mode-img { width:26px; height:26px; object-fit:contain; border-radius:5px; }
.mode-icon { font-size:1.3rem; line-height:1; }

/* ── Frutta ── */
.frutta-group { display:flex; gap:.4rem; }
.frutta-btn {
    flex:1; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:9px;
    color:var(--text); font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
    padding:.4rem .2rem; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:.25rem;
    transition:all .2s;
}
.frutta-btn:hover { border-color:var(--border-hover); }
.frutta-btn.active { border-color:var(--accent); background:var(--accent-dim); }
.frutta-btn.active.miku-fr { border-color:#00B4D8; background:rgba(0,180,216,.12); }
.frutta-btn.active.teto-fr { border-color:#C41E3A; background:rgba(196,30,58,.12); }
.frutta-emoji { font-size:1.3rem; line-height:1; }
.frutta-img { width:22px; height:22px; object-fit:contain; }

/* ── Swatch colore ── */
.swatch-group { display:flex; gap:.45rem; align-items:center; }
.swatch {
    width:28px; height:28px; border-radius:50%;
    border:2.5px solid transparent;
    background: var(--sw);
    box-shadow: inset 0 0 0 2px var(--card), 0 0 0 2.5px var(--sw);
    cursor:pointer; transition:all .18s;
}
.swatch:hover { transform:scale(1.15); }
.swatch.active { box-shadow: inset 0 0 0 2px var(--card), 0 0 0 3px var(--sw), 0 0 10px var(--sw); }
.swatch:disabled { opacity:.25; cursor:not-allowed; transform:none; }
.swatch-forced {
    font-size:.58rem; font-weight:600; opacity:.45; letter-spacing:.02em; margin-left:.3rem;
    display:none;
}
.swatch-forced.visible { display:block; }

/* ── Mappa ── */
.map-group { display:flex; gap:.4rem; }
.map-btn {
    flex:1; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:9px;
    color:var(--text); font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
    padding:.4rem .15rem; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:.25rem;
    transition:all .2s;
}
.map-btn:hover { border-color:var(--border-hover); }
.map-btn.active { border-color:var(--accent); background:var(--accent-dim); }
.map-preview { width:36px; height:36px; }

/* ── Controlli hint ── */
.menu-controls-hint {
    display:flex; align-items:center; justify-content:center; gap:.28rem; flex-wrap:wrap;
    padding:.5rem 0;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.key {
    background:rgba(255,255,255,.08); border:1px solid var(--border); border-radius:5px;
    font-size:.58rem; font-weight:600; color:var(--text);
    width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    letter-spacing:0;
}
.sep { font-size:.58rem; opacity:.3; }
.key-label { font-size:.52rem; opacity:.35; text-transform:uppercase; letter-spacing:.06em; }

/* ── Bottone inizia ── */
.menu-start {
    width:100%; background:var(--accent); border:none; border-radius:11px;
    color:#fff; font-family:var(--font-b); font-size:.78rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
    padding:.7rem; cursor:pointer;
    box-shadow: 0 4px 20px var(--accent-glow);
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
    position:relative; overflow:hidden;
}
.menu-start::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
    opacity:0; transition:opacity .25s;
}
.menu-start:hover { transform:translateY(-2px); box-shadow:0 6px 28px var(--accent-glow); }
.menu-start:hover::before { opacity:1; }
.menu-start:active { transform:translateY(0); }

/* ════════════════════════════════════════
   OVERLAY PAUSA
   ════════════════════════════════════════ */
.pause-overlay {
    position:fixed; inset:0; z-index:150;
    display:flex; align-items:center; justify-content:center;
    background:rgba(7,7,7,.4);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    transition:opacity .25s;
}
.pause-overlay.hidden { opacity:0; pointer-events:none; }
.pause-panel {
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:1.4rem 2.2rem; text-align:center;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
.pause-title { font-family:var(--font-d); font-size:1.6rem; font-weight:700; display:block; }
.pause-sub { font-size:.6rem; opacity:.4; text-transform:uppercase; letter-spacing:.1em; display:block; margin-top:.3rem; }

/* ════════════════════════════════════════
   OVERLAY GAME OVER
   ════════════════════════════════════════ */
.gameover-overlay {
    position:fixed; inset:0; z-index:150;
    display:flex; align-items:center; justify-content:center;
    background:rgba(7,7,7,.6);
    backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
    transition:opacity .3s;
}
.gameover-overlay.hidden { opacity:0; pointer-events:none; }
.gameover-panel {
    background:var(--card); border:1px solid var(--border); border-radius:18px;
    padding:2rem 2.2rem 1.8rem; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:1rem;
    box-shadow: 0 12px 50px rgba(0,0,0,.5);
    animation: goIn .35s cubic-bezier(.34,1.56,.64,1) backwards;
}
@keyframes goIn { from { transform:scale(.82); opacity:0; } to { transform:scale(1); opacity:1; } }
.gameover-title { font-family:var(--font-d); font-size:2rem; font-weight:900; color:var(--accent); }
.gameover-score { display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.go-label { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; opacity:.4; }
.go-val { font-family:var(--font-d); font-size:2.8rem; font-weight:900; font-variant-numeric:tabular-nums; }
.gameover-restart, .gameover-menu {
    width:140px; border-radius:9px; border:1px solid var(--border);
    color:var(--text); font-family:var(--font-b); font-size:.65rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    padding:.5rem; cursor:pointer; transition:all .2s; background:rgba(255,255,255,.06);
}
.gameover-restart { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 3px 14px var(--accent-glow); }
.gameover-restart:hover { transform:translateY(-1px); box-shadow:0 5px 20px var(--accent-glow); }
.gameover-menu:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width:480px) {
    .menu-panel { padding:1.2rem 1rem 1.1rem; gap:.85rem; }
    .menu-title { font-size:1.5rem; }
    .mode-group, .frutta-group, .map-group { gap:.25rem; }
}

/* ════════════════════════════════════════
   ACCESSIBILITÀ
   ════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
    .menu-overlay, .pause-overlay, .gameover-overlay { transition:none !important; }
    .gameover-panel { animation:none !important; }
}
.menu-start:focus-visible,
.mode-btn:focus-visible,
.frutta-btn:focus-visible,
.map-btn:focus-visible,
.gameover-restart:focus-visible,
.gameover-menu:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
::selection { background:var(--accent); color:#fff; }