/* style.css — Whenzy. Thème sombre "archive", accent ambre. Geist. */
@font-face { font-family:'Geist'; font-weight:400; font-display:swap; src:url('fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:500; font-display:swap; src:url('fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:600; font-display:swap; src:url('fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:700; font-display:swap; src:url('fonts/geist-700.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-weight:500; font-display:swap; src:url('fonts/geistmono-500.woff2') format('woff2'); }

:root {
  --bg:#0f1417; --surface:#171d22; --surface-2:#1e262c; --line:#28323a; --line-2:#3a4750; --warn:#ff9f43;
  --ink:#f0ece4; --muted:#9aa3ab; --faint:#6b757d;
  --accent:#e0a458; --accent-2:#eebb74; --accent-tint:rgba(224,164,88,.12); --accent-line:rgba(224,164,88,.4);
  --good:#5bd6a0; --bad:#f0726f;
  --sans:'Geist',system-ui,-apple-system,sans-serif; --mono:'Geist Mono',ui-monospace,monospace; --r:14px; --r-sm:10px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
}
* { box-sizing:border-box; }
html,body { margin:0; color:var(--ink); font-family:var(--sans); background:var(--bg); min-height:100dvh; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; } svg { flex:none; }
.muted { color:var(--muted); } .small { font-size:.84rem; } .block { display:block; width:100%; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.topbar { max-width:46rem; margin:0 auto; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:9px; }
.brand-ic { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--accent); color:#1a1206; }
.brand-ic svg { width:18px; height:18px; }
.brand-name { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; }
.lang-switch { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:500; font-size:.82rem; border:1px solid var(--line); border-radius:999px; padding:6px 12px; }
.lang-switch svg { width:15px; height:15px; } .lang-switch:hover { color:var(--accent); border-color:var(--accent-line); }

.wrap { max-width:46rem; margin:0 auto; padding:0 18px 40px; }
.modes { display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.mode { display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:8px 16px; font-family:inherit; font-weight:600; font-size:.88rem; cursor:pointer; }
.mode svg { width:16px; height:16px; } .mode:hover { color:var(--ink); } .mode.on { background:var(--accent); color:#1a1206; border-color:transparent; }

.progress { text-align:center; color:var(--muted); font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
.photo-wrap { width:100%; aspect-ratio:3/2; background:#0a0d0f; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; }
.photo-wrap img { width:100%; height:100%; object-fit:contain; }
.credit { text-align:center; color:var(--faint); font-size:.72rem; margin:6px 0 0; }
.credit a { color:var(--faint); text-decoration:underline; } .credit a:hover { color:var(--muted); }

.map-label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.85rem; font-weight:500; margin:16px 2px 8px; }
.map-label svg { width:15px; height:15px; color:var(--accent); } .map-label b { color:var(--accent); font-family:var(--mono); margin-left:auto; }
.map { width:100%; aspect-ratio:2/1; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; cursor:crosshair; background:#0c2030; }
.map-svg { display:block; width:100%; height:100%; }
.map-ocean { fill:#0c2030; }
.map-land { fill:#34424c; stroke:#475762; stroke-width:.3; }
.mk { stroke:#fff; stroke-width:.8; } .mk.guess { fill:var(--accent); } .mk.truth { fill:var(--good); }
.mk-line { stroke:#fff; stroke-width:.7; stroke-dasharray:2 2; opacity:.8; }

.year-block { margin-top:6px; }
input[type=range]#wz-year { width:100%; margin-top:6px; accent-color:var(--accent); height:6px; }

.reveal { background:var(--surface); border:1px solid var(--accent-line); border-radius:var(--r); padding:13px 16px; margin-top:14px; text-align:center; }
.reveal[hidden] { display:none; }
.r-place { font-weight:600; font-size:1.05rem; }
.r-row { display:flex; justify-content:center; gap:16px; color:var(--muted); font-size:.88rem; margin-top:4px; flex-wrap:wrap; }
.r-total { font-family:var(--mono); font-size:1.4rem; font-weight:600; color:var(--accent); margin-top:6px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 16px; cursor:pointer; font-weight:600; font-family:inherit; font-size:.95rem; margin-top:12px; }
.btn svg { width:17px; height:17px; } .btn:hover:not(:disabled) { border-color:var(--accent-line); color:var(--accent); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn[hidden] { display:none; }
.btn-accent { background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#1a1206; border:none; }
.btn-accent:hover:not(:disabled) { filter:brightness(1.06); color:#1a1206; }

#wz-summary { text-align:center; padding-top:20px; }
#wz-summary[hidden], #wz-game[hidden] { display:none; }
.grade { font-family:var(--mono); font-weight:700; font-size:4rem; line-height:1; margin:0 auto 8px; width:6rem; height:6rem; display:flex; align-items:center; justify-content:center; border-radius:50%; border:3px solid; }
.grade.g-s { color:#ffd45e; border-color:#ffd45e; } .grade.g-a { color:var(--good); border-color:var(--good); }
.grade.g-b { color:#7ec8ff; border-color:#7ec8ff; } .grade.g-c { color:var(--accent); border-color:var(--accent); }
.grade.g-d { color:var(--warn,#ff9f43); border-color:#ff9f43; } .grade.g-e { color:var(--muted); border-color:var(--muted); }
.sum-score { font-family:var(--mono); font-size:1.2rem; margin-bottom:6px; }
.sum-streak { color:var(--muted); font-size:.9rem; margin-bottom:14px; }
.sum-streak[hidden], #wz-already[hidden] { display:none; }

.footer { max-width:46rem; margin:30px auto 0; padding:18px; text-align:center; color:var(--faint); font-size:.74rem; border-top:1px solid var(--line); }
.footer a { color:var(--muted); border-bottom:1px solid var(--line-2); } .footer .joke { font-style:italic; } .footer .sep { opacity:.5; margin:0 5px; }