/* SkiGuessr — FoodGuessr-style dark slate look */
:root{
  --bg:#0f172a; --bg-deep:#020617; --card:#1e293b; --card-soft:#334155;
  --line:#334155; --text:#f1f5f9; --muted:#94a3b8;
  --violet-a:#7c3aed; --violet-b:#a855f7;
  --cta:#fbbf24; --cta-text:#1e293b; --good:#22c55e;
  --hot:#ef4444; --warm:#fbbf24; --chilly:#38bdf8; --cold:#3b82f6; --glacial:#94a3b8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg)}
body{
  background:var(--bg-deep) linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 900px) no-repeat;
  color:var(--text); min-height:100vh;
  font-family:Inter,"Inter Fallback",-apple-system,"Segoe UI",system-ui,sans-serif;
}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}

/* top bar */
.nav{display:flex; align-items:center; gap:14px; padding:14px 20px; max-width:640px; margin:0 auto}
.logo{font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0}
.logo .ski{background:linear-gradient(90deg,var(--violet-b),var(--violet-a));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.logo .peak{color:var(--cta); font-size:18px}
.scorebox{margin-left:auto; display:flex; gap:18px; text-align:right}
.scorebox .lbl{font-size:10px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; font-weight:600}
.scorebox .val{font-size:18px; font-weight:800}

/* single centered column */
main{max-width:560px; margin:0 auto; padding:0 16px 40px; display:flex; flex-direction:column; gap:14px}

.round-row{display:flex; align-items:center; justify-content:space-between}
.round-pill{
  background:linear-gradient(90deg,var(--violet-a),var(--violet-b));
  color:#fff; font-weight:700; font-size:13px; letter-spacing:.04em;
  padding:7px 16px; border-radius:999px;
}
.round-right{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.stake{font-size:11px; color:var(--muted)}
.stake b{color:var(--cta); font-size:12px}
.guess-dots{display:flex; gap:6px; align-items:center}
.gdot{width:10px; height:10px; border-radius:50%; background:var(--card-soft)}
.gdot.used{background:var(--hot)}
.gdot.win{background:var(--good)}

/* photo card */
.photo-card{position:relative; border-radius:20px; overflow:hidden; background:var(--card);
  box-shadow:0 10px 30px rgba(2,6,23,.5)}
.photo-card img{display:block; width:100%; height:auto; min-height:220px; object-fit:cover}

.prompt{font-size:17px; font-weight:700; text-align:center; margin:2px 0 0}

/* hint chips */
.chip{background:var(--card); border-radius:16px; padding:12px 16px; font-size:14px;
  color:var(--muted); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.chip.locked{background:color-mix(in srgb, var(--card) 55%, transparent)}
.chip .display{font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--muted); white-space:nowrap}
.chip.open{color:var(--text)}
.chip .big{font-size:17px; font-weight:800}
#skiMap{display:none; border-radius:12px; max-width:100%; background:#fff}
.chip.open #skiMap{display:block}
.maplegend{display:none; font-size:11px; color:var(--muted); width:100%}
.chip.open .maplegend{display:block}
.maplegend .sw{display:inline-block; width:9px; height:9px; border-radius:3px; margin:0 3px 0 8px; vertical-align:-1px}

/* feedback */
.feedback{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:2px 0 4px}
.temp{font-size:22px; font-weight:800}
.temp-sub{font-size:13px; color:var(--muted); line-height:1.5; max-width:44ch}

/* mini directional compass (per guess row) */
.mc{position:relative; width:34px; height:34px; flex:none}
.mc i{position:absolute; font-style:normal; font-size:8px; font-weight:800; color:var(--muted); line-height:1}
.mc .n{top:0; left:50%; transform:translateX(-50%)}
.mc .s{bottom:0; left:50%; transform:translateX(-50%)}
.mc .e{right:0; top:50%; transform:translateY(-50%)}
.mc .w{left:0; top:50%; transform:translateY(-50%)}
.mc svg{position:absolute; inset:7px; width:20px; height:20px;
  transform-origin:50% 50%; animation:mcwobble 1.8s ease-in-out infinite alternate}
@keyframes mcwobble{
  from{transform:rotate(calc(var(--brg, 0deg) - 45deg))}
  to{transform:rotate(calc(var(--brg, 0deg) + 45deg))}
}

/* input */
.guess-form{display:flex; gap:8px}
.guess-form input{flex:1; min-width:0; font:inherit; font-size:15px; padding:13px 15px;
  border:1.5px solid var(--line); border-radius:14px; background:var(--card); color:var(--text)}
.guess-form input::placeholder{color:var(--muted)}
.guess-form input:focus-visible{outline:2px solid var(--violet-b); outline-offset:1px}
.btn{font:inherit; border:none; border-radius:14px; padding:13px 22px; cursor:pointer;
  background:var(--cta); color:var(--cta-text); font-weight:800; font-size:14px}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.4; cursor:default}
.btn:focus-visible{outline:2px solid var(--violet-b); outline-offset:2px}
.btn.violet{background:linear-gradient(90deg,var(--violet-a),var(--violet-b)); color:#fff}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* guess history */
.history{display:flex; flex-direction:column; gap:8px}
.hrow{display:flex; align-items:center; gap:10px; background:var(--card);
  border-radius:14px; padding:11px 14px; font-size:14px}
.hrow .emoji{font-size:18px; flex:none}
.hrow .cname{font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pill{font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
  padding:4px 10px; border-radius:99px; color:#0f172a; white-space:nowrap}
.hrow.correct{outline:1.5px solid var(--good)}

footer{max-width:560px; margin:0 auto; padding:0 16px 26px; font-size:11px; color:var(--muted)}
footer a{color:var(--muted)}

/* overlays */
.overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.7); backdrop-filter:blur(3px); padding:16px; z-index:10}
.result-card{background:var(--card); border-radius:20px; padding:26px 26px 22px;
  max-width:400px; width:100%; text-align:center; box-shadow:0 18px 50px rgba(2,6,23,.6)}
.result-card .country{color:var(--muted); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.result-card .where{font-size:26px; font-weight:800; margin:4px 0 0}
.result-pts{font-size:32px; font-weight:800; color:var(--cta); margin:10px 0 4px}
.fact{font-size:13.5px; color:var(--muted); line-height:1.55; margin:6px 0 18px}
.rating{font-size:24px; font-weight:800; margin:8px 0 2px;
  background:linear-gradient(90deg,var(--cta),var(--violet-b));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hidden{display:none !important}
@media (prefers-reduced-motion:no-preference){
  .result-card{animation:drop .35s cubic-bezier(.2,1.4,.4,1)}
  @keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
}