@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/BricolageGrotesque.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/DMSans.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--bg:#F5F1EA;--card:#FFFDF9;--ink:#1F1B24;--ink2:#3B3540;--mut:#665E6C;--line:#E3DCD0;--line2:#D3C9B9;--sh:rgba(31,27,36,.06);
--acc:#A63A22;--acc-d:#7C2A17;--link:#2C4A9A;--ok:#1E6B4E;--ok-d:#154C37;--okbg:#E8F1EC;--bad:#A63A22;--badbg:#F7E9E4;--mid:#F6EBD3;
--head:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--r:12px;--r-sm:8px;
--edge:0 1px 0 rgba(31,27,36,.06),0 1px 2px rgba(31,27,36,.05)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:var(--link);text-underline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:10}.skip:focus{left:8px}
header.top{position:sticky;top:0;z-index:5;background:rgba(245,241,234,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mast{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
a.brand{display:inline-flex;align-items:center;flex:none}a.brand .logo{height:32px;width:auto;display:block}
header.top nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
header.top nav a{font:500 .9rem/1 var(--sans);color:var(--ink2);padding:9px 11px;border-radius:8px;text-decoration:none;white-space:nowrap}
header.top nav a:hover{background:rgba(31,27,36,.06);color:var(--ink)}
main{max-width:1100px;margin:0 auto;padding:14px 16px 8px}
body:not([data-page=hub]):not([data-page=archive]) main{max-width:720px}
.hi{font:500 .82rem var(--sans);color:var(--mut);margin:8px 0 4px;letter-spacing:.06em;text-transform:uppercase}
h1{font:700 1.6rem/1.12 var(--head);letter-spacing:-.025em;margin:0}h1.hero{font-size:2.05rem;margin:0 0 8px}
h2{font:650 1.2rem/1.3 var(--head);letter-spacing:-.015em;margin:1.4em 0 .6em}
h2.section{font:700 1.15rem/1.2 var(--head);margin:32px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}h2.section span{font:400 .86rem var(--sans);color:var(--mut);letter-spacing:0}
.lede{font-size:1.05rem;color:var(--ink2);margin:0 0 18px;max-width:36em}
.sub{color:var(--mut);font-size:.95rem;margin:0 0 14px}
.panel,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--edge)}
.card{margin:0 0 18px}
/* hub */
.statbar{margin:0 0 20px}
.stats{display:flex;gap:8px;text-align:center}.stats div{flex:1;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 4px 8px;font:500 .76rem/1.2 var(--sans);color:var(--mut)}
.stats b{display:block;font:700 1.5rem/1.15 var(--head);color:var(--ink);letter-spacing:-.02em}
.statbar .sub{margin:12px 2px 0;font-size:.88rem}
.card .stats{margin:6px 0 14px}
.feat{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--ink);color:#F5F1EA;border-radius:14px;padding:20px;text-decoration:none;box-shadow:0 1px 2px rgba(31,27,36,.12)}
.feat:hover{background:#2A2530}
.feat .ic{width:72px;height:72px;border-radius:14px;box-shadow:none}.feat .ic .ico{width:36px;height:36px}
.feat small{font:500 .74rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#C9C0B3}
.feat b{display:block;font:700 1.45rem/1.15 var(--head);letter-spacing:-.02em;margin:2px 0 4px}.feat .ft>span{font-size:.98rem;color:#E4DDD1}
.feat .go{grid-column:1/-1;justify-self:start;background:#F5F1EA;color:var(--ink);border-radius:8px;padding:10px 22px;font:600 1rem var(--sans)}
.feat.alldone{grid-template-columns:1fr;background:var(--ok)}.feat.alldone a{color:#fff}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px;list-style:none;margin:0;padding:0}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--ink);position:relative}
.ic{display:grid;place-items:center;flex:none;width:80px;height:80px;border-radius:16px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 1px 2px rgba(31,27,36,.12);transition:filter .12s}
.ic .ico{width:36px;height:36px}
.tile:hover .ic{filter:brightness(1.07)}
.tile b{font:600 .95rem/1.2 var(--head);letter-spacing:-.01em;margin-top:10px}
.tile small{display:none}
.tile .status{margin-top:4px;font:500 .74rem/1.2 var(--sans);color:var(--mut)}
.tile.is-done .status{color:var(--ok)}
.tile .done{position:absolute;top:-6px;left:calc(50% + 26px);width:22px;height:22px;border-radius:6px;background:var(--ok);color:#fff;border:2px solid var(--bg);display:grid;place-items:center}.tile .done .ico{width:12px;height:12px}
.week{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;color:var(--ink);box-shadow:var(--edge)}
.week .ic{width:60px;height:60px;border-radius:12px}.week .ic .ico{width:28px;height:28px}
.week b{font:650 1.08rem var(--head);display:block}.week small{display:block;color:var(--mut);font-size:.95rem}.week .status{font:500 .85rem var(--sans);color:var(--acc)}.week.is-done .status{color:var(--ok)}
.soonlist{list-style:none;margin:0;padding:0}.soonlist li{padding:10px 0;color:var(--mut)}
/* game header */
.gbar{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.gbar .ic{width:48px;height:48px;border-radius:11px}.gbar .ic .ico{width:24px;height:24px}
.gbar h1{font-size:1.35rem}.gbar .sub{margin:2px 0 0;font-size:.88rem}
.back{width:40px;height:40px;border-radius:8px;background:var(--card);border:1px solid var(--line2);display:grid;place-items:center;flex:none;color:var(--ink)}.back svg{width:18px;height:18px}
/* controls */
button,.btn{font:600 1rem/1.2 var(--sans);border:0;border-radius:10px;padding:13px 20px;background:var(--ink);color:#fff;cursor:pointer;min-height:50px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);transition:background-color .12s,filter .12s;margin-bottom:5px}
button:hover,.btn:hover{filter:brightness(1.08)}button:active,.btn:active{box-shadow:none}
button.cta,#nx,#go,#chk,#shareBtn{background:var(--acc)}
button.alt,.btn.alt{background:var(--card);color:var(--ink);border:1px solid var(--line2);box-shadow:var(--edge)}
button:disabled{opacity:.5;cursor:default;filter:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}.row>*{flex:1}
p>button{width:100%}
.claim{font:500 1.3rem/1.38 var(--head);letter-spacing:-.01em;margin:8px 0 18px}
.prog{font:500 .78rem var(--sans);color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.choice{width:100%;justify-content:flex-start;text-align:left;margin:0 0 10px;background:var(--card);color:var(--ink);border:1px solid var(--line2);font:500 1rem/1.35 var(--sans);box-shadow:var(--edge);padding:14px 16px}
.choice:hover{border-color:var(--ink2);filter:none}
.choice.right{border-color:var(--ok);background:var(--okbg);box-shadow:inset 3px 0 0 var(--ok)}.choice.wrong{border-color:var(--bad);background:var(--badbg);box-shadow:inset 3px 0 0 var(--bad)}
.choice.mis{font-style:italic}.choice:disabled{opacity:1}.choice.x{opacity:.6}
.reveal{border-radius:var(--r);padding:14px 16px;background:var(--card);border:1px solid var(--line);margin:14px 0;font-size:.98rem;animation:fade .2s ease}
.reveal.ok{background:var(--okbg);border-color:#C5DCCF}.reveal.no{background:var(--badbg);border-color:#E9CBC1}
.reveal.ok>b:first-child{color:var(--ok-d)}.reveal.no>b:first-child{color:var(--acc-d)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.src{font-size:.82rem;color:var(--mut);margin-top:8px}.src a{color:var(--link)}
label{display:block;font:500 .9rem var(--sans);color:var(--ink2)}
input[type=number],input[type=text],select{font:500 1.05rem var(--sans);padding:11px 14px;border:1px solid var(--line2);border-radius:10px;width:100%;min-height:50px;background:var(--card);color:var(--ink);margin-top:6px}
input[type=number]:focus,input[type=text]:focus,select:focus{border-color:var(--ink2)}
.big{font:700 2.3rem var(--head);letter-spacing:-.03em}
pre.share{white-space:pre-wrap;background:var(--bg);border:1px dashed var(--line2);padding:12px 14px;border-radius:10px;font:.9rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}
#result .card{animation:fade .25s ease}#result h2{margin-top:0;font-size:1.45rem}
#map{height:min(58vh,420px);border-radius:var(--r);border:1px solid var(--line2);box-shadow:var(--edge);margin:10px 0 16px;overflow:hidden}
.clue{padding:10px 0;border-bottom:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}td,th{border-bottom:1px solid var(--line);padding:10px 10px;text-align:left}tr:last-child td{border-bottom:0}
.quote{font:500 1.4rem/1.4 var(--head);letter-spacing:-.015em;margin:10px 0}
.crypt{display:flex;flex-wrap:wrap;gap:14px 14px;margin:16px 0 20px}.cw{display:inline-flex;gap:4px}
.cell{min-height:0;width:30px;padding:5px 0 3px;margin:0;display:inline-flex;flex-direction:column;align-items:center;background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:6px;box-shadow:none}
.cell .g{font:700 1.1rem/1.25 var(--head);min-height:1.35rem}.cell .k{font-size:.62rem;color:var(--mut);border-top:1px solid var(--line);width:100%;text-align:center;padding-top:2px}
.cell.sel{border-color:var(--ink);background:var(--mid)}.cell.given .g{color:var(--ok)}.cell:disabled{opacity:1}
.pn{font:700 1.1rem var(--head);align-self:flex-start;padding-top:5px}
.kb{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;margin:0 0 14px}.key{min-height:44px;padding:0;margin:0;background:var(--card);color:var(--ink);border:1px solid var(--line2);font:600 1rem var(--sans);box-shadow:none;border-radius:6px}.key.used{color:#9C94A1;background:#EFEAE1}.key.wide{font-size:.7rem}
.clues{margin:6px 0 12px;padding-left:1.3em;font-size:1.02rem}.clues li{padding:4px 0}.lab{display:block;font:500 .8rem var(--sans);color:var(--mut);margin:12px 0 0}
.art{margin:8px 0 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:center;box-shadow:var(--edge)}.art img{max-width:100%;max-height:52vh;object-fit:contain;display:block;margin:0 auto;border-radius:6px}.art figcaption{font-size:.84rem;color:var(--mut);margin-top:10px}
.mm-t{margin-top:0}.mm-clues ol{margin:6px 0 0;padding-left:1.2em}.mm-clues li{padding:3px 0}
.mm-row{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:12px 0;box-shadow:var(--edge)}.mm-row b{display:block;font:650 1.02rem var(--head)}
.mm-row select.ok{border-color:var(--ok);background:var(--okbg)}.mm-row select.bad{border-color:var(--bad);background:var(--badbg)}
/* archive / how-to */
.arch{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--edge);margin:0 0 22px}
.arch h2{display:flex;align-items:center;gap:12px;margin:0 0 12px}.ic.sm{width:40px;height:40px;border-radius:9px}.ic.sm .ico{width:22px;height:22px}
.arch table{border:0;border-radius:0}.arch td{padding:9px 6px}
.howlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.howrow{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;color:var(--ink);box-shadow:var(--edge)}
.howrow .ic{width:52px;height:52px;border-radius:11px}.howrow .ic .ico{width:26px;height:26px}.howrow b{display:block;font:650 1.1rem var(--head)}.howrow span span{color:var(--ink2);font-size:.95rem}
footer{max-width:1100px;margin:36px auto 0;padding:18px 16px 40px;color:var(--mut);font-size:.84rem;border-top:1px solid var(--line)}footer a{color:var(--ink)}
@media(max-width:360px){header.top nav a{padding:8px 8px;font-size:.84rem}a.brand .logo{height:28px}.shelf{gap:20px 6px}.ic{width:70px;height:70px;border-radius:14px}.tile .done{left:calc(50% + 22px)}h1.hero{font-size:1.75rem}.stats b{font-size:1.3rem}.kb{gap:4px}}
@media(min-width:760px){main{padding-top:24px}h1.hero{font-size:2.7rem}h1{font-size:1.9rem}.gbar h1{font-size:1.7rem}.gbar .ic{width:58px;height:58px;border-radius:13px}.gbar .ic .ico{width:30px;height:30px}
.shelf{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 18px}.ic{width:96px;height:96px;border-radius:18px}.ic .ico{width:42px;height:42px}.tile .done{left:calc(50% + 32px)}
.tile small{display:block;margin:4px 0 0;color:var(--mut);font-size:.86rem;line-height:1.4;max-width:190px}
.feat{grid-template-columns:auto 1fr auto;padding:24px 28px}.feat .go{grid-column:auto;align-self:center}.feat .ic{width:84px;height:84px;border-radius:16px}.feat b{font-size:1.75rem}
.stats{max-width:560px}a.brand .logo{height:38px}.howlist{grid-template-columns:1fr 1fr}.arch-wrap{columns:2}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[data-game=real-or-fake] button[data-v]{font-size:1.1rem;min-height:56px;color:#fff;border:0}
[data-game=real-or-fake] button[data-v="1"]{background:var(--ok)}[data-game=real-or-fake] button[data-v="0"]{background:var(--bad)}
header.top nav .s{display:none}
@media(max-width:480px){header.top nav{flex-wrap:nowrap;gap:2px}header.top nav a{padding:8px 9px;font-size:.88rem}header.top nav .l{display:none}header.top nav .s{display:inline}}
@media(max-width:340px){a.brand .logo{height:27px}header.top nav a{padding:7px 7px}.mast{padding:10px 12px}main{padding-left:12px;padding-right:12px}}
.about h2{margin:22px 0 8px}.about h2:first-child{margin-top:0}.about ul.cols{columns:2;column-gap:24px;padding-left:1.1em;margin:8px 0 14px}.about ul.cols li{padding:2px 0;break-inside:avoid}@media(max-width:360px){.about ul.cols{columns:1}}
