:root{--ink:#26231e;--paper:#f8f5ed;--yellow:#f6cc43;--purple:#6854ac}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}body:before{content:'';display:block;height:6px;background:linear-gradient(90deg,#26231e 33.33%,var(--yellow) 33.33% 66.66%,#dc4b3b 66.66%)}header,footer{max-width:1030px;margin:auto;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{color:var(--ink);text-decoration:none;font-size:23px;letter-spacing:-1px;font-weight:900}.brand span{font-size:20px;margin-left:12px}header>span{font-size:9px;letter-spacing:1.7px;font-weight:700}main{max-width:690px;padding:0 24px;margin:25px auto 50px}.intro{text-align:center}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--purple)}h1{font-size:clamp(43px,8vw,70px);line-height:1.05;letter-spacing:-3px;margin:20px 0}h1 em{font-style:normal;background:linear-gradient(transparent 65%,var(--yellow) 65%)}.intro p{font-size:14px;line-height:1.7;color:#7a7367;margin:20px 0 30px}.card{border:2px solid var(--ink);border-radius:12px;background:#fffdf8;padding:22px;box-shadow:6px 6px 0 var(--ink)}.card-top{font-family:monospace;display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.3px;font-weight:700;padding-bottom:18px}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}button{font:inherit;cursor:pointer;color:var(--ink)}.square{position:relative;aspect-ratio:1;border:1px solid #d8d1c2;background:#f7f3e9;border-radius:7px;padding:8px 6px;font-size:12px;line-height:1.4;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;transition:background .12s,transform .12s}.square .emoji{font-size:25px;line-height:1}.square:hover{transform:translateY(-2px);border-color:var(--purple)}.square[aria-pressed=true]{background:#e2dbf5;border-color:var(--purple);color:#3d2d72}.square[aria-pressed=true]:after{content:'✓';position:absolute;top:5px;right:7px;font-size:12px;color:var(--purple)}.square.winner{background:var(--yellow);border:2px solid var(--ink);color:var(--ink)}.status{text-align:center;font-size:11px;line-height:1.6;color:#82796a;padding:20px 0 0}.status.bingo{color:var(--purple);font-size:16px;font-weight:700}.controls{display:flex;gap:12px;justify-content:center;margin-top:27px}.controls button{border:1px solid var(--ink);border-radius:6px;font-size:12px;font-weight:600;padding:13px 16px;background:transparent}.controls .primary{background:var(--ink);color:#fffdf8}.controls button:hover{background:var(--yellow);color:var(--ink)}.note,#message{text-align:center;color:#82796a;font-size:10px}#message{min-height:14px;margin:12px 0 0}.note{margin-top:6px}footer{border-top:1px solid #ded7c9;font-size:10px;color:#82796a;line-height:1.6}footer a{color:var(--purple)}button:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:4px}@media(max-width:500px){header,footer{padding:23px 20px}header>span{display:none}main{padding:0 16px;margin-top:15px}.card{padding:15px;box-shadow:4px 4px 0 var(--ink)}.board{gap:5px}.square{font-size:10px;gap:6px;padding:7px 3px}.square .emoji{font-size:21px}.card-top{font-size:8px}.controls{gap:7px}.controls button{font-size:10px;padding:12px}footer{font-size:9px}.intro p{font-size:13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
