:root{--paper: #FBF6EC;--card: #FFFDF8;--ink: #33302C;--ink-soft: #5C554D;--ink-faint: #A79E90;--wavy: #C9BFAE;--p1: #F4A79D;--p2: #9BC4E2;--board: #DCD5F0;--mint: #BFE3C6;--mint-hover: #ADDDB6;--butter: #F6DFC2;--radius-a: 255px 14px 225px 15px / 15px 225px 15px 255px;--radius-b: 225px 15px 255px 15px / 15px 255px 15px 225px;--radius-c: 15px 225px 15px 255px / 255px 15px 225px 15px;--radius-board: 22px 8px 20px 10px / 10px 20px 8px 22px;--radius-dialog: 255px 18px 225px 18px / 18px 225px 18px 255px;--radius-cell: 50% 47% 53% 50% / 48% 52% 50% 51%;--radius-disc: 50% 47% 52% 51% / 49% 52% 48% 51%}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;background:var(--paper)}body{font-family:Patrick Hand,Comic Sans MS,cursive;color:var(--ink)}button,input{font-family:inherit}a{color:#6b5ba6}a:hover{color:#46396f}.app{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 14px 26px;background:var(--paper);overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.07;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.start{position:relative;z-index:1;width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:6px}.title{font-family:Chewy,cursive;font-weight:400;font-size:clamp(44px,13vw,66px);line-height:.98;text-align:center;margin:0;color:var(--ink);text-shadow:3px 3px 0 var(--butter);text-wrap:balance}.subline{margin:-10px 0 0;font-size:21px;text-align:center;color:var(--ink-soft)}.card{width:100%;display:flex;flex-direction:column;gap:16px;padding:18px 16px 20px;background:var(--card);border:3px solid var(--ink);border-radius:var(--radius-a);box-shadow:5px 6px #33302c29}.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:20px;display:flex;align-items:center;gap:10px}.name-swatch{width:26px;height:26px;border:3px solid var(--ink);border-radius:var(--radius-disc);display:inline-block}.name-swatch.p1{background:var(--p1)}.name-swatch.p2{background:var(--p2)}.field input{font-size:22px;padding:12px 14px;min-height:52px;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius-b);outline-offset:3px}.field:nth-of-type(2) input{border-radius:var(--radius-c)}.group{display:flex;flex-direction:column;gap:10px;margin-top:2px}.group-label{font-size:20px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.toggle-btn{min-height:56px;padding:10px 8px;font-size:20px;cursor:pointer;font-family:Patrick Hand,cursive;color:var(--ink);background:var(--card2, #FBF6EC);border:3px dashed var(--ink-faint);border-radius:var(--radius-b);box-shadow:none}.toggle-btn[aria-pressed=true]{font-family:Chewy,cursive;border:3px solid var(--ink);box-shadow:3px 4px #33302c38}.toggle-btn.mode-human[aria-pressed=true]{background:var(--mint)}.toggle-btn.mode-cpu[aria-pressed=true]{background:var(--board)}.toggle-btn.level[aria-pressed=true]{background:var(--butter)}.toggle-btn[aria-pressed=false]{background:var(--paper)}.cta-primary{width:100%;min-height:68px;font-family:Chewy,cursive;font-size:30px;color:var(--ink);background:var(--mint);border:3px solid var(--ink);border-radius:var(--radius-a);box-shadow:5px 6px #33302c40;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.cta-primary:hover{background:var(--mint-hover)}.cta-primary:active{transform:translate(3px,4px);box-shadow:1px 2px #33302c40}.text-btn{background:none;border:none;font-size:19px;color:var(--ink-soft);text-decoration:underline wavy var(--wavy) 2px;text-underline-offset:4px;cursor:pointer;padding:10px 12px;min-height:44px}.board-screen{position:relative;z-index:1;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:12px}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}.top-bar .right{display:flex;gap:8px}.pill-btn{min-height:46px;padding:8px 14px;font-size:19px;color:var(--ink);background:var(--card);border:3px solid var(--ink);border-radius:var(--radius-b);cursor:pointer}.pill-btn.sound{min-width:46px;padding:8px 12px;border-radius:var(--radius-c)}.pill-btn.start-again{background:var(--butter)}.banner{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:66px;background:var(--card);border:3px solid var(--ink);border-radius:var(--radius-a);animation:popIn .22s ease-out}.reduce-motion .banner{animation:none}.banner-text{font-family:Chewy,cursive;font-size:clamp(24px,6.6vw,32px);line-height:1.1}.swatch{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#33302c73;border:3px solid var(--ink);border-radius:var(--radius-disc)}.swatch.p1{background:var(--p1)}.swatch.p2{background:var(--p2)}.swatch.hidden{display:none}.board-panel{position:relative;width:100%;padding:10px;background:var(--board);border:4px solid var(--ink);border-radius:var(--radius-board);box-shadow:6px 7px #33302c33,inset 0 0 0 2px #ffffff80}.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.cell{position:relative;aspect-ratio:1;background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius-cell);box-shadow:inset 2px 3px #33302c1a;overflow:hidden}.disc{position:absolute;inset:6%;display:flex;align-items:center;justify-content:center;font-size:clamp(15px,4.2vw,26px);line-height:1;color:#33302c73;border:3px solid var(--ink);border-radius:var(--radius-disc);box-shadow:inset -4px -5px #33302c1a,inset 5px 6px #ffffff8c;opacity:0;pointer-events:none}.disc.filled{opacity:1}.disc.p1{background:radial-gradient(circle at 32% 28%,#fff9,#fff0 58%),var(--p1)}.disc.p2{background:radial-gradient(circle at 32% 28%,#fff9,#fff0 58%),var(--p2)}.disc.fall{animation:fallIn .62s cubic-bezier(.3,.7,.4,1) both}.disc.win{animation:winPulse 1s ease-in-out 3 both}.columns{position:absolute;inset:10px;display:flex;z-index:3}.column-btn{flex:1;min-width:44px;background:transparent;border:none;border-radius:14px;cursor:pointer;outline-offset:2px}.column-btn:hover:not(:disabled){background:#33302c17}.column-btn:focus-visible{background:#33302c1f;outline:3px dashed var(--ink)}.column-btn:disabled{cursor:default}.winline-wrap{position:absolute;inset:10px;pointer-events:none;z-index:4}.winline{position:absolute;height:7px;margin-top:-3.5px;background:var(--ink);border-radius:6px;transform-origin:0 50%;animation:drawLine .5s ease-out .25s both}.reduce-motion .winline,.reduce-motion .disc.fall,.reduce-motion .disc.win{animation:none}.score-row{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:20px}.score-chip{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--card);border:3px solid var(--ink);border-radius:var(--radius-b)}.score-chip.p2{border-radius:var(--radius-c)}.dialog-scrim{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:22px;background:#fbf6ecd1}.dialog{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 20px;text-align:center;background:var(--card);border:4px solid var(--ink);border-radius:var(--radius-dialog);box-shadow:7px 8px #33302c33;animation:bobIn .32s ease-out both}.reduce-motion .dialog{animation:none}.dialog h2{margin:0;font-family:Chewy,cursive;font-weight:400;font-size:clamp(32px,9vw,42px);line-height:1.05;color:var(--ink)}.dialog p{margin:0;font-size:21px;color:var(--ink-soft)}.cta-dialog{width:100%;min-height:62px;font-family:Chewy,cursive;font-size:27px;color:var(--ink);background:var(--mint);border:3px solid var(--ink);border-radius:var(--radius-a);box-shadow:4px 5px #33302c40;cursor:pointer}.cta-dialog:active{transform:translate(3px,4px);box-shadow:1px 2px #33302c40}.confetti{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}.confetti span{position:absolute;top:0;border:2px solid rgba(51,48,44,.55);animation:conf linear forwards}@keyframes fallIn{0%{transform:translateY(var(--from, -300px)) scaleY(.94)}58%{transform:translateY(0) scale(1.04,.92)}70%{transform:translateY(-11%) scale(.98,1.03)}82%{transform:translateY(0) scale(1.03,.95)}90%{transform:translateY(-3%) scaleY(1.01)}to{transform:translateY(0) scale(1)}}@keyframes popIn{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes winPulse{0%,to{transform:scale(1) rotate(0)}35%{transform:scale(1.11) rotate(-4deg)}70%{transform:scale(1.04) rotate(3deg)}}@keyframes drawLine{0%{transform:rotate(var(--ang)) scaleX(0)}to{transform:rotate(var(--ang)) scaleX(1)}}@keyframes conf{0%{transform:translate3d(0,-12vh,0) rotate(0);opacity:1}to{transform:translate3d(var(--dx, 0px),108vh,0) rotate(var(--rot, 540deg));opacity:.85}}@keyframes bobIn{0%{transform:translateY(14px) rotate(-1deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}@media (max-width: 360px){.grid-3{gap:6px}}