:root{font-family:Arial,Helvetica,sans-serif;color:#292720;background:#f6efd9;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px}
.page-shell{max-width:1500px;margin:auto;padding:0 5.2%}
.site-header{height:116px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #292720}
.brand{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none}
.brand-name{font-family:Impact,'Arial Black',sans-serif;font-size:23px;letter-spacing:.045em;line-height:.83;position:relative}
.brand-mark{width:52px;height:53px;display:flex;flex-direction:column;justify-content:center;transform:rotate(-11deg);filter:drop-shadow(3px 4px 0 #292720)}
.brand-mark span{display:block;margin:0 auto}
.bread-top{width:42px;height:16px;background:#e9aa4c;border:3px solid #292720;border-radius:14px 14px 4px 4px}
.filling{height:6px;border:2px solid #292720}
.filling-red{width:43px;background:#e95e40}
.filling-green{width:46px;background:#91a764}
.bread-bottom{width:40px;height:11px;background:#e9aa4c;border:3px solid #292720;border-radius:3px 3px 8px 8px}
.site-header nav{display:flex;gap:34px}
.site-header nav a{font-size:14px;font-weight:700;text-decoration:none;color:#292720}
.site-header nav a:hover,.site-header nav a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.hero{min-height:660px;display:grid;grid-template-columns:minmax(0,1fr) minmax(410px,.96fr);gap:7%;align-items:center;padding:76px 0 90px}
.hero-copy{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-bottom:28px}
.eyebrow{font-family:'Courier New',monospace;font-size:12px;font-weight:700;letter-spacing:.15em}
.eyebrow-dot{width:10px;height:10px;display:inline-block;background:#e46643;border-radius:50%;margin-right:9px}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(58px,6.5vw,108px);font-weight:900;line-height:.97;letter-spacing:-.065em;margin:26px 0 27px}
.hero h1 em{font-style:normal;color:#dd5c3b;white-space:nowrap}
.lead{max-width:520px;font-size:20px;line-height:1.6;margin:0;color:#47443a}
.hero-link{align-self:flex-start;margin-top:34px;padding:14px 0;border-bottom:2px solid #292720;color:#292720;text-decoration:none;font-size:15px;font-weight:800}
.hero-link span{font-size:19px;margin-left:12px}
.hero-link:hover{color:#d65837;border-color:#d65837}
.hero-doodle{position:absolute;right:5px;bottom:2px;width:100px;height:100px;border:2px solid #d5c5a4;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Courier New',monospace;font-size:10px;font-weight:800;line-height:1.35;letter-spacing:.13em;transform:rotate(13deg);color:#9b8b6a}
.game-card{background:#fffaf0;border:3px solid #292720;box-shadow:10px 10px 0 #292720;padding:24px 24px 18px;scroll-margin-top:20px}
.game-topline{margin-bottom:16px}
.game-label,.game-score,.game-footer{font-family:'Courier New',monospace;font-weight:700}
.game-label{font-size:17px;line-height:1.25;letter-spacing:-.025em;margin:0}
.game-score{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;padding:8px 13px;border:2px solid #292720;background:#f6efd9;font-size:11px;letter-spacing:.1em}
.game-score strong{font-size:24px;line-height:1;color:#dd5c3b;letter-spacing:0}
.game-description{font-size:14px;line-height:1.45;margin:15px 0 16px;color:#5b5548}
.game-stage{position:relative;background:#dce9d3;border:2px solid #292720;overflow:hidden}
.game-stage canvas{display:block;width:100%;height:auto;image-rendering:pixelated;touch-action:none;outline:none}
.game-stage canvas:focus-visible{outline:4px solid #dd5c3b;outline-offset:-4px}
.game-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding-top:12px;font-size:11px;color:#585348}
.game-footer button{appearance:none;border:1.5px solid #292720;background:transparent;padding:7px 12px;font:inherit;color:#292720;cursor:pointer}
.game-footer button:hover,.game-footer button:focus-visible{background:#292720;color:#fffaf0}
.site-footer{display:flex;justify-content:space-between;border-top:2px solid #292720;padding:24px 0 35px;font:700 12px 'Courier New',monospace;letter-spacing:.04em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:950px){.hero{grid-template-columns:1fr;gap:46px;padding:60px 0 85px}
.hero-copy{min-height:370px;padding-bottom:0}
.hero h1{font-size:clamp(62px,10vw,96px)}
.hero-doodle{right:8%;bottom:4%}
.game-card{max-width:650px;margin:auto;width:100%}
}
@media(max-width:620px){.page-shell{padding:0 20px}
.site-header{height:90px}
.brand-name{font-size:18px}
.brand-mark{transform:scale(.82) rotate(-11deg);transform-origin:left center;width:43px}
.site-header nav{gap:13px}
.site-header nav a{font-size:12px}
.hero{padding-top:40px;gap:55px}
.hero-copy{min-height:0}
.hero h1{font-size:clamp(49px,12vw,72px);margin:23px 0}
.lead{font-size:17px}
.hero-doodle{display:none}
.game-card{padding:15px 15px 13px;box-shadow:6px 6px 0 #292720}
.game-label{font-size:16px}
.game-description{font-size:13px}
.game-footer{font-size:10px}
.site-footer{gap:15px;flex-wrap:wrap;font-size:10px}
}
@media(min-width:951px){.game-card{max-width:480px;justify-self:end}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}


.brand-bits{position:absolute;right:-22px;top:-8px;display:grid;grid-template-columns:repeat(2,6px);grid-template-rows:repeat(2,6px);gap:2px;transform:rotate(12deg)}
.brand-bits b{display:block;background:#dd5c3b;border:1px solid #292720}
.brand-bits b:nth-child(2),.brand-bits b:nth-child(3){background:#e9aa4c}