:root{--bg:#fbf5e8;--card:#fffdf8;--ink:#1d2340;--muted:#4b5170;--line:#d9cfba;--navy:#1d2a4d;--red:#b3361f;--red-bg:#fbe4de;--green:#1e6b3c;--green-bg:#dcf0e2;--mustard:#e3a72f;--focus:#0b57d0;--fs:19px}
html.big{--fs:23px}
body.contrast{--bg:#fff;--card:#fff;--ink:#000;--muted:#222;--line:#000;--red:#8a1500;--green:#004d1f}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.45;min-height:100vh;display:flex;flex-direction:column}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem;z-index:9}.skip:focus{left:.5rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:.5rem max(.75rem,env(safe-area-inset-left)) .5rem;gap:.5rem;position:sticky;top:0;z-index:5;border-bottom:4px solid var(--mustard)}
.logo{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;display:flex;align-items:center;gap:.45rem;letter-spacing:.01em}
.logo em{color:var(--mustard);font-style:italic}
.tools{display:flex;gap:.3rem}
.icon-btn{background:transparent;border:2px solid rgba(255,255,255,.35);color:#fff;border-radius:12px;min-width:46px;height:46px;font-size:1.05rem;font-weight:700;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.12)}
button:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.bar .icon-btn:focus-visible{outline-color:var(--mustard)}
.wrap{width:100%;max-width:680px;margin:0 auto;padding:1rem .9rem 1.5rem;flex:1}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem .75rem;margin-bottom:.6rem}
.meta h2{margin:0;font-family:Georgia,serif;font-size:1.3rem}
.meta .date{color:var(--muted);font-size:.9rem}
.cat{display:inline-block;background:var(--navy);color:#fff;border-radius:999px;padding:.15rem .7rem;font-size:.85rem;font-weight:600}
.banner{background:#fff3cf;border:2px solid var(--mustard);border-radius:12px;padding:.5rem .8rem;margin:.4rem 0 .8rem;font-size:.92rem}
.clues{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.clue{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:.65rem .8rem;display:flex;gap:.7rem;align-items:flex-start}
.clue .n{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.9rem}
.clue.locked{border-style:dashed;color:var(--muted);background:transparent}
.clue.locked .n{background:#9a9fb3}
.clue.new{animation:pop .4s ease-out}
@keyframes pop{from{transform:scale(.97);background:#fff3cf}to{transform:none}}
@media (prefers-reduced-motion:reduce){.clue.new{animation:none}}
body.calm .clue.new{animation:none}
.guess-box{background:var(--card);border:2px solid var(--navy);border-radius:16px;padding:.8rem}
.guess-box label{font-weight:700;display:block;margin-bottom:.35rem}
.combo{position:relative}
#guessInput{width:100%;font-size:1.05rem;padding:.7rem .8rem;border:2px solid var(--muted);border-radius:12px;background:#fff;color:var(--ink)}
.sugg{list-style:none;margin:.25rem 0 0;padding:.25rem;background:#fff;border:2px solid var(--navy);border-radius:12px;max-height:15rem;overflow:auto}
.sugg[hidden]{display:none}
.sugg li{padding:.6rem .7rem;border-radius:8px;cursor:pointer}
.sugg li[aria-selected=true],.sugg li:hover{background:var(--navy);color:#fff}
.row{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.btn{font:inherit;font-weight:700;border-radius:12px;padding:.65rem 1rem;min-height:48px;border:2px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer}
.btn.primary{background:var(--navy);color:#fff}
.btn.accent{background:var(--mustard);border-color:#a06f0e;color:#1d2340}
.btn.wide{flex:1}
.btn:disabled{opacity:.5;cursor:not-allowed}
.hint{font-size:.85rem;color:var(--muted);margin:.5rem 0 0}
.tries{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.tries li{border-radius:999px;padding:.2rem .7rem;font-size:.9rem;border:2px solid}
.tries .wrong{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.tries .skip{background:#eee;border-color:#888;color:#333}
.tries .right{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.result{background:var(--card);border:3px solid var(--green);border-radius:16px;padding:1rem;text-align:center}
.result.lost{border-color:var(--red)}
.result h3{margin:.1rem 0 .3rem;font-family:Georgia,serif;font-size:1.4rem}
.result .answer{font-size:1.5rem;font-weight:800;margin:.2rem 0 .6rem}
.grid{font-size:1.5rem;letter-spacing:.15rem;margin:.3rem 0}
.countdown{margin-top:.8rem;font-size:.95rem}
.countdown strong{font-variant-numeric:tabular-nums;font-size:1.35rem;display:block}
.pack-cta{margin-top:1rem;background:#fff3cf;border:2px dashed #a06f0e;border-radius:14px;padding:.8rem;text-align:left}
.pack-cta h4{margin:0 0 .3rem}
.foot{text-align:center;font-size:.8rem;color:var(--muted);padding:1rem;border-top:1px solid var(--line)}
.foot p{margin:.2rem 0}
.toast{pointer-events:none;position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(150%);background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:12px;transition:transform .25s;z-index:20;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
dialog{border:none;border-radius:18px;padding:0;max-width:min(560px,94vw);width:100%;color:var(--ink);background:var(--card);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(20,24,40,.55)}
.dlg-in{padding:1.1rem 1.1rem 1rem;max-height:88vh;overflow:auto}
.dlg-in h2{margin:0 2.5rem .6rem 0;font-family:Georgia,serif}
.dlg-close{position:absolute;right:.6rem;top:.6rem;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:1.2rem;cursor:pointer}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;text-align:center;margin-bottom:1rem}
.stats div{background:var(--bg);border-radius:12px;padding:.5rem .2rem}
.stats b{display:block;font-size:1.5rem}
.stats span{font-size:.78rem;color:var(--muted)}
.dist{display:grid;gap:.3rem}
.dist .r{display:flex;align-items:center;gap:.5rem}
.dist .r span:first-child{width:1.4rem;text-align:right;font-weight:700}
.dist .b{background:#7c829b;color:#fff;text-align:right;padding:.1rem .45rem;border-radius:6px;min-width:1.8rem;font-weight:700}
.dist .b.hi{background:var(--green)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.list button{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.list .lock{color:var(--muted)}
.section-h{margin:1rem 0 .4rem;font-size:1.05rem}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.toggle input{width:28px;height:28px}
.practice-tag{background:var(--mustard);color:#1d2340;border-radius:999px;padding:.1rem .6rem;font-size:.8rem;font-weight:700}
@media (min-width:760px){.wrap{padding-top:1.6rem}}
/* header stays one line at any text size */
.logo{font-size:24px;white-space:nowrap}
.icon-btn{font-size:18px}
@media (max-width:440px){.logo{font-size:20px}.logo img{width:30px;height:30px}.icon-btn{min-width:44px;height:44px}.tools{gap:4px}.bar{padding-left:10px;padding-right:10px}}
@media (max-width:370px){.logo img{display:none}}
.logo{gap:6px}
.bar{min-width:0}
.logo span{overflow:hidden;text-overflow:ellipsis}
#result:focus{outline:none}