:root{
  --bg:#EDF0F4; --panel:#FFFFFF; --ink:#18202C; --muted:#5B6678; --line:#D5DBE4;
  --accent:#0E6F68; --accent-ink:#FFFFFF;
  --hot:#1F9D6B; --warm:#D99A1E; --cold:#D2534A;
  --hot-bg:#D7F0E4; --warm-bg:#F7EACB; --cold-bg:#F6DCD9;
  --focus:#0E6F68;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#11161E; --panel:#19202B; --ink:#E6EAF0; --muted:#95A0B2; --line:#2B3442;
    --accent:#3FB8AD; --accent-ink:#0B1216;
    --hot:#39C08A; --warm:#E4AE3F; --cold:#E7736A;
    --hot-bg:#16362A; --warm-bg:#3A2F14; --cold-bg:#3D1F1D; --focus:#3FB8AD;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#11161E; --panel:#19202B; --ink:#E6EAF0; --muted:#95A0B2; --line:#2B3442;
  --accent:#3FB8AD; --accent-ink:#0B1216;
  --hot:#39C08A; --warm:#E4AE3F; --cold:#E7736A;
  --hot-bg:#16362A; --warm-bg:#3A2F14; --cold-bg:#3D1F1D; --focus:#3FB8AD;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
.wrap{max-width:520px;margin:0 auto;padding-inline:16px;padding-block:20px 48px;display:flex;flex-direction:column;gap:16px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em;margin:0;line-height:1}
h1 span{color:var(--accent)}
.menu{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
button{font:inherit;cursor:pointer;border-radius:8px}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);padding:6px 11px;font-size:14px}
.ghost:hover{border-color:var(--muted)}
button:disabled{opacity:.4;cursor:default}
.ghost[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.meta{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted);gap:12px;flex-wrap:wrap}
.meta b{color:var(--ink);font-family:var(--mono);font-weight:500}
.label{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
form{display:flex;gap:8px}
#guess{flex:1;min-width:0;font:inherit;font-size:18px;padding:12px 14px;border-radius:10px;border:2px solid var(--line);background:var(--panel);color:var(--ink)}
#guess:focus{border-color:var(--accent);outline:none}
.go{background:var(--accent);color:var(--accent-ink);border:0;padding:0 18px;font-weight:700}
.msg{min-height:1.5em;font-size:15px;color:var(--muted);margin:-6px 2px 0}
.msg.err{color:var(--cold)}
ol.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.row{position:relative;display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-radius:9px;background:var(--panel);overflow:hidden;border:2px solid transparent}
.row .bar{position:absolute;inset:0 auto 0 0;border-radius:0}
.row span{position:relative;font-weight:700}
.row .rk{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.row.hot .bar{background:var(--hot-bg)} .row.warm .bar{background:var(--warm-bg)} .row.cold .bar{background:var(--cold-bg)}
.row.hot{box-shadow:inset 4px 0 0 var(--hot)} .row.warm{box-shadow:inset 4px 0 0 var(--warm)} .row.cold{box-shadow:inset 4px 0 0 var(--cold)}
.row.last{border-color:var(--ink)}
.row.tip .w::after{content:" · Tipp";font-weight:400;color:var(--muted);font-size:13px}
.panel{background:var(--panel);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line)}
.panel h2{font-family:var(--display);font-weight:800;font-size:22px;margin:0;text-wrap:balance}
.panel p{margin:0;color:var(--muted)}
.stats{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.stats div{display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.solid{background:var(--ink);color:var(--bg);border:0;padding:8px 14px;font-weight:700}
.danger{background:var(--cold);color:#fff;border:0;padding:8px 14px;font-weight:700}
.arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.arch button{background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px}
.arch button b{font-family:var(--mono);font-weight:500;font-size:14px}
.arch button.done{border-color:var(--hot)} .arch button.lost{border-color:var(--cold)} .arch button.cur{outline:2px solid var(--accent)}
.arch small{color:var(--muted);font-size:11px}
.help ul{margin:0;padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.loading{color:var(--muted);text-align:center;padding:40px 0}
@media (prefers-reduced-motion:no-preference){.row.new{animation:pop .35s ease-out}@keyframes pop{from{transform:translateY(-4px);opacity:.3}to{transform:none;opacity:1}}}

html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%}
h1.brand{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:.06em;margin:0;line-height:1;display:flex;align-items:center;gap:10px}
h1.brand img{width:32px;height:32px;border-radius:8px}
.install{background:var(--accent);color:var(--accent-ink);border:0;padding:6px 11px;font-size:14px;font-weight:700}
.wrap{padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(48px,env(safe-area-inset-bottom))}
[hidden]{display:none!important}
img{max-width:100%}