@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:opsz,wght@9..144,700;9..144,900&display=swap");

:root { --paper:#f7edcf; --light:#fffaf0; --ink:#20352f; --green:#26745d; --deep:#164c3e; --red:#e45b45; --yellow:#f4bd3b; --blue:#74b6d8; --muted:#68736e; --line:3px solid var(--ink); --serif:"Fraunces",Georgia,serif; --sans:"DM Sans",sans-serif; }
* { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0; min-height:100vh; color:var(--ink); background-color:var(--paper); background-image:radial-gradient(rgba(32,53,47,.12) .7px,transparent .7px); background-size:8px 8px; font-family:var(--sans); line-height:1.5; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.site-nav { width:min(1120px,calc(100% - 32px)); min-height:78px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:23px; font-weight:900; }
.brand-mark { position:relative; width:34px; height:34px; transform:rotate(-8deg); border:var(--line); border-radius:8px; background:var(--yellow); box-shadow:3px 3px 0 var(--ink); }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--ink); }
.brand-mark::before { top:7px; left:7px; box-shadow:12px 12px 0 var(--ink); }
.brand-mark::after { top:7px; right:7px; box-shadow:-12px 12px 0 var(--ink); }
.nav-links { display:flex; align-items:center; gap:20px; font-size:13px; font-weight:700; }
.nav-links a:hover { text-decoration:underline 3px var(--red); text-underline-offset:5px; }
.shell { width:min(1120px,calc(100% - 32px)); margin:12px auto 70px; }
.crumb { display:inline-flex; align-items:center; gap:8px; margin:12px 0 24px; color:var(--green); font-size:12px; font-weight:800; text-transform:uppercase; }
.crumb::before { content:"←"; }
.btn { display:inline-flex; min-height:48px; align-items:center; justify-content:center; border:var(--line); border-radius:12px; background:var(--light); box-shadow:4px 4px 0 var(--ink); padding:10px 18px; font-weight:800; cursor:pointer; transition:transform 120ms ease,box-shadow 120ms ease; }
.btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn-primary { background:var(--green); color:white; }
.btn-red { background:var(--red); color:white; }
.tag { display:inline-flex; border:2px solid var(--ink); border-radius:999px; background:var(--light); padding:4px 9px; font-size:10px; font-weight:800; text-transform:uppercase; }
.footer { border-top:var(--line); background:var(--light); padding:24px 16px; color:var(--muted); text-align:center; font-size:12px; }
.footer a { color:var(--green); font-weight:800; }

/* detail */
.detail-grid { display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); align-items:start; gap:clamp(28px,6vw,75px); }
.box-wrap { position:relative; padding:14px 24px 30px 4px; }
.game-box { position:relative; aspect-ratio:4/4.7; overflow:hidden; transform:rotate(-2deg); border:5px solid var(--ink); border-radius:24px; background:var(--green); box-shadow:14px 16px 0 rgba(32,53,47,.25); }
.game-box::before { content:""; position:absolute; inset:18px; border:3px dashed rgba(255,255,255,.45); border-radius:15px; }
.box-band { position:absolute; top:36px; right:-25px; left:-25px; transform:rotate(-5deg); border-block:4px solid var(--ink); background:var(--yellow); padding:18px; text-align:center; font-family:var(--serif); font-size:clamp(28px,4vw,52px); font-weight:900; line-height:.9; }
.box-question { position:absolute; top:44%; left:50%; width:145px; height:145px; display:grid; place-items:center; transform:translate(-50%,-50%) rotate(8deg); border:4px solid var(--ink); border-radius:25px; background:var(--light); box-shadow:8px 8px 0 var(--red); font-family:var(--serif); font-size:85px; font-weight:900; }
.box-copy { position:absolute; right:45px; bottom:42px; left:45px; color:white; text-align:center; font-size:13px; font-weight:700; }
.age { position:absolute; right:22px; bottom:18px; border:3px solid var(--ink); border-radius:8px; background:var(--light); padding:5px 8px; font-weight:900; }
.detail-copy { padding-top:16px; }
.eyebrow { margin:0 0 14px; color:var(--green); font-size:12px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:0; font-family:var(--serif); font-size:clamp(45px,6vw,72px); line-height:.92; letter-spacing:-.05em; }
.lede { max-width:650px; margin:22px 0; color:#4f5e58; font-size:18px; }
.meta { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 25px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:13px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:35px; border:var(--line); border-radius:16px; background:var(--light); box-shadow:5px 5px 0 var(--ink); }
.stat { padding:15px; border-right:2px solid var(--ink); }
.stat:last-child { border:0; }
.stat strong { display:block; font-family:var(--serif); font-size:25px; }
.stat span { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.rules { display:grid; grid-template-columns:1.25fr .75fr; gap:24px; margin-top:55px; }
.card { border:var(--line); border-radius:18px; background:var(--light); box-shadow:6px 6px 0 var(--ink); padding:25px; }
.card h2 { margin:0 0 15px; font-family:var(--serif); font-size:30px; }
.rule-list { display:grid; gap:13px; margin:0; padding:0; list-style:none; counter-reset:rules; }
.rule-list li { display:grid; grid-template-columns:35px 1fr; gap:10px; align-items:start; }
.rule-list li::before { counter-increment:rules; content:counter(rules); display:grid; width:29px; height:29px; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); font-family:var(--serif); font-weight:900; }
.good-for { background:var(--blue); }
.good-for p { margin:0; font-weight:700; }
.good-for .big { display:block; margin:17px 0 4px; font-family:var(--serif); font-size:48px; line-height:1; }

/* play */
.play-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.round { color:var(--green); font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.tokens { display:flex; gap:7px; }
.token { width:25px; height:25px; border:2px solid var(--ink); border-radius:50%; background:var(--red); box-shadow:2px 2px 0 var(--ink); }
.token.used { background:transparent; box-shadow:none; }
.play-table { border:5px solid var(--ink); border-radius:28px; background:var(--green); box-shadow:12px 14px 0 rgba(32,53,47,.23); padding:22px; }
.felt { min-height:560px; border:3px dashed rgba(255,255,255,.48); border-radius:18px; padding:clamp(16px,4vw,36px); }
.game-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; color:white; }
.game-heading h1 { font-size:clamp(34px,5vw,58px); }
.game-heading p { max-width:350px; margin:0; color:#dcece5; }
.guess-panel { max-width:760px; margin:30px auto 24px; transform:rotate(-.5deg); border:var(--line); border-radius:18px; background:var(--light); box-shadow:7px 7px 0 var(--ink); padding:20px; }
.guess-panel label { display:block; margin-bottom:8px; font-weight:900; }
.guess-control { display:flex; gap:10px; }
.guess-control input { min-width:0; flex:1; border:var(--line); border-radius:10px; background:white; padding:11px 13px; outline:0; }
.guess-control input:focus { box-shadow:0 0 0 4px var(--yellow); }
.message { min-height:21px; margin:9px 0 0; color:var(--red); font-size:12px; font-weight:700; }
.feedback { display:grid; gap:10px; margin-top:20px; }
.feedback-head,.guess-row { display:grid; grid-template-columns:1.2fr repeat(5,1fr); gap:7px; }
.feedback-head span { color:#dcece5; text-align:center; font-size:9px; font-weight:900; text-transform:uppercase; }
.feedback-head span:first-child { text-align:left; }
.guess-row > span { min-width:0; display:grid; min-height:58px; place-items:center; overflow:hidden; border:3px solid var(--ink); border-radius:9px; background:var(--light); padding:5px; text-align:center; font-size:11px; font-weight:800; box-shadow:2px 2px 0 var(--ink); }
.guess-row .name { justify-items:start; padding-left:10px; font-family:var(--serif); font-size:14px; }
.guess-row .bad { background:#d8d3c4; }
.guess-row .near { background:var(--yellow); }
.guess-row .good { background:#79cc8b; }
.full-game { display:flex; justify-content:center; margin-top:25px; }

@media (max-width:780px) { .detail-grid,.rules { grid-template-columns:1fr; } .box-wrap { width:min(460px,100%); margin:auto; } .game-heading { align-items:flex-start; flex-direction:column; } }
@media (max-width:560px) { .site-nav { min-height:64px; } .nav-links a:first-child { display:none; } .brand { font-size:19px; } .detail-copy { padding-top:0; } h1 { font-size:43px; } .stats { grid-template-columns:1fr; } .stat { border-right:0; border-bottom:2px solid var(--ink); } .game-box { border-width:4px; } .play-top { align-items:flex-start; flex-direction:column; } .tokens { max-width:100%; flex-wrap:wrap; } .play-table { padding:9px; border-radius:20px; } .felt { padding:15px 7px; } .guess-control { flex-direction:column; } .feedback-head,.guess-row { grid-template-columns:minmax(65px,1.15fr) repeat(5,minmax(0,1fr)); gap:3px; } .feedback-head span { font-size:6px; } .guess-row > span { min-height:50px; border-width:2px; padding:2px; font-size:8px; } .guess-row .name { padding-left:4px; font-size:9px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }