:root{--cream: linear-gradient(170deg, #fcefd6 0%, #f4e1c0 100%);--page-bg: linear-gradient(180deg, #efe7d6 0%, #e5dcc9 100%);--panel-soft: #fbf2de;--panel-border: #eddfc2;--ink: #3a2e22;--ink-soft: #6e5c46;--ink-muted: #a2937c;--ink-faint: #8c7e68;--grad-red: radial-gradient(circle at 35% 30%, #ff8e7f 0%, #ed4034 55%, #c5231b 100%);--grad-yellow: radial-gradient(circle at 35% 30%, #ffe7a0 0%, #ffc233 52%, #efa000 100%);--grad-hole: radial-gradient(circle at 40% 34%, #ead9b7 0%, #d3bc94 100%);--board-blue: linear-gradient(158deg, #3c68ec 0%, #274fc9 60%, #1f40ae 100%);--red: #ed4034;--yellow-ink: #efa000;--font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100vh}body{background:var(--page-bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}#app{width:100%}.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vh,32px) clamp(14px,4vw,48px)}.card{position:relative;background:var(--cream);border-radius:clamp(20px,3vw,28px);box-shadow:0 18px 50px -18px #3a2e2266}.brand{display:flex;align-items:center;gap:14px}.brand__name{font:700 clamp(26px,4vw,34px) var(--font-display);color:var(--ink);letter-spacing:-.5px}.brand--sm .brand__name{font-size:19px}.brand--sm{gap:11px}.logo-mark{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:7px;border-radius:13px;background:var(--board-blue);box-shadow:0 4px 10px -3px #274fc999;flex:none}.logo-mark--lg{width:48px;height:48px}.logo-mark--md{width:40px;height:40px}.logo-mark--sm{width:34px;height:34px;gap:3px;padding:5px;border-radius:10px}.logo-dot{border-radius:50%}.logo-dot--red{background:radial-gradient(circle at 36% 30%,#ff8e7f,#ed4034 60%,#c5231b)}.logo-dot--yellow{background:radial-gradient(circle at 36% 30%,#ffe7a0,#ffc233 55%,#efa000)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;font-family:var(--font-display);line-height:1}.btn--primary{padding:15px 26px;border-radius:16px;background:linear-gradient(180deg,#ff6052,#ed4034);color:#fff;font-weight:700;font-size:16px;box-shadow:0 6px #b71e16,0 12px 24px -8px #ed403499;transition:transform .08s ease,box-shadow .08s ease}.btn--primary:hover{transform:translateY(2px);box-shadow:0 4px #b71e16,0 8px 16px -8px #ed403499}.btn--primary:active{transform:translateY(4px);box-shadow:0 2px #b71e16}.btn--ghost{padding:13px;border:2px solid #eadbbe;border-radius:16px;background:transparent;color:var(--ink-soft);font-weight:600;font-size:15px;transition:background .15s ease}.btn--ghost:hover{background:#f7ead2}.btn--tile{padding:11px 18px;border-radius:14px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;box-shadow:0 4px #e3d4b6;transition:transform .08s ease,box-shadow .08s ease,opacity .15s ease}.btn--tile:hover:not(:disabled){transform:translateY(2px);box-shadow:0 2px #e3d4b6}.btn--tile:disabled{opacity:.45;cursor:default}.btn--icon{width:44px;height:44px;padding:0}.btn--icon.is-off{color:var(--ink-muted)}.link{align-self:flex-start;padding:0;border:none;background:none;color:#9b8c77;font:600 14px var(--font-body);cursor:pointer}.link:hover{color:var(--ink);text-decoration:underline}.home-card{width:min(900px,100%);padding:clamp(28px,5vw,56px);overflow:hidden}.home-grid{display:flex;gap:40px;align-items:center}.home-intro{flex:1;display:flex;flex-direction:column;gap:22px;max-width:440px}.home-tagline{margin:0;font:400 17px/1.5 var(--font-body);color:var(--ink-soft);max-width:360px}.field{display:flex;flex-direction:column;gap:10px}.field__label{font:700 12px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}.toggle{display:inline-flex;width:max-content;gap:2px;padding:4px;border-radius:14px;background:#f0e2c5}.toggle__btn{border:none;background:transparent;color:var(--ink-soft);font:600 14px var(--font-display);padding:9px 18px;border-radius:11px;cursor:pointer;transition:background .15s ease,color .15s ease}.toggle__btn.is-active{background:var(--ink);color:#fff}.swatches{display:flex;gap:16px}.swatch{width:50px;height:50px;padding:0;border:none;border-radius:50%;cursor:pointer;box-shadow:inset 0 4px 6px #ffffff73,inset 0 -5px 8px #00000042,0 2px 4px #00000029}.swatch--red{background:var(--grad-red)}.swatch--yellow{background:var(--grad-yellow)}.swatch--red.is-active{box-shadow:0 0 0 3px #fcefd6,0 0 0 6px #ed4034,inset 0 4px 6px #ffffff6b,inset 0 -5px 8px #0000004d}.swatch--yellow.is-active{box-shadow:0 0 0 3px #fcefd6,0 0 0 6px #efa000,inset 0 4px 6px #ffffff80,inset 0 -5px 8px #00000042}.home-play{width:max-content}.home-art{flex:none;width:300px;height:340px;position:relative;display:flex;align-items:center;justify-content:center}.home-art__halo{position:absolute;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle at 50% 44%,#fff7e6,#f0dbb4)}.home-art__chip{position:absolute}.home-art__chip--blue{top:18px;left:36px;width:16px;height:16px;border-radius:4px;background:#3c68ec;transform:rotate(20deg)}.home-art__chip--yellow{top:48px;right:30px;width:13px;height:13px;border-radius:3px;background:#ffc233;transform:rotate(-15deg)}.home-art__chip--red{bottom:34px;left:24px;width:12px;height:12px;border-radius:50%;background:#ed4034}.home-art__discs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;transform:rotate(-6deg)}.art-disc{position:relative;width:108px;height:108px;border-radius:50%}.art-disc:after{content:"";position:absolute;inset:22%;border-radius:50%;border:2px solid rgba(0,0,0,.1)}.art-disc--red{background:var(--grad-red);box-shadow:inset 0 8px 12px #ffffff6b,inset 0 -11px 16px #00000052,0 8px 16px -6px #0000004d}.art-disc--yellow{background:var(--grad-yellow);box-shadow:inset 0 8px 12px #ffffff80,inset 0 -11px 16px #00000047,0 8px 16px -6px #0000004d}.game-card{width:min(600px,100%);padding:clamp(18px,3.4vw,28px);display:flex;flex-direction:column;gap:clamp(12px,2vw,16px)}.game-header{display:flex;align-items:center;justify-content:space-between}.diff-badge{display:inline-flex;align-items:center;padding:7px 13px;border-radius:11px;background:var(--panel-soft);border:1.5px solid var(--panel-border);font:600 13px var(--font-display);color:var(--ink-soft)}.scoreboard{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,16px)}.player{flex:1;max-width:230px;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:18px;background:var(--panel-soft);border:2px solid var(--panel-border);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.player--bot{justify-content:flex-end;text-align:right}.player.is-active.is-red{background:#fff;border-color:#ed4034;box-shadow:0 6px 16px -8px #ed403480}.player.is-active.is-yellow{background:#fff;border-color:#efa000;box-shadow:0 6px 16px -8px #efa00073}.token-wrap{display:inline-flex;border-radius:50%;flex:none}.player.is-active .token-wrap{animation:turnpulse 1.6s ease-out infinite}.pulse--red{--pulse-strong: rgba(237, 64, 52, .5);--pulse-fade: rgba(237, 64, 52, 0)}.pulse--yellow{--pulse-strong: rgba(239, 160, 0, .5);--pulse-fade: rgba(239, 160, 0, 0)}.token{width:40px;height:40px;border-radius:50%;flex:none}.token--red{background:var(--grad-red);box-shadow:inset 0 3px 5px #ffffff73,inset 0 -4px 6px #0000004d}.token--yellow{background:var(--grad-yellow);box-shadow:inset 0 3px 5px #ffffff80,inset 0 -4px 6px #00000042}.token--neutral{background:var(--grad-hole);box-shadow:inset 0 4px 6px #0000004d}.player__meta{display:flex;flex-direction:column;line-height:1.15}.player__meta--right{text-align:right}.player__name{font:700 16px var(--font-display);color:var(--ink)}.player--bot .player__name{color:var(--ink-soft)}.player__state{font:700 12px var(--font-body);color:var(--ink-muted)}.player.is-active.is-red .player__state{color:#ed4034}.player.is-active.is-yellow .player__state{color:#efa000}.player__score{font:700 22px var(--font-display);color:var(--ink)}.player--you .player__score{margin-left:auto}.player--bot .player__score{margin-right:auto;color:var(--ink-faint)}.vs{font:700 13px var(--font-display);color:var(--ink-muted);letter-spacing:1px}.board-area{display:flex;flex-direction:column;align-items:center}.chevron-row,.board{width:min(460px,100%,56vh)}.chevron-row{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(5px,1.4vw,8px);padding:0 clamp(6px,1.6vw,8px);margin-bottom:8px}.chevron{display:flex;justify-content:center;color:#cbb78f;transition:color .15s ease}.chevron.is-active{animation:ghostbob 1.7s ease-in-out infinite}.chevron.is-active.is-red{color:#ed4034}.chevron.is-active.is-yellow{color:#efa000}.board{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(5px,1.4vw,8px);padding:clamp(6px,1.6vw,8px);border-radius:clamp(16px,2.4vw,22px);background:var(--board-blue);box-shadow:inset 0 3px 6px #ffffff59,inset 0 -10px 18px #0000004d,0 18px 30px -12px #1f40ae8c}.column{display:grid;grid-template-rows:repeat(6,1fr);gap:clamp(5px,1.4vw,8px);cursor:pointer;border-radius:12px;transition:background .15s ease}.column:hover,.column:focus-visible{background:#ffffff1a;outline:none}.cell{position:relative;aspect-ratio:1;display:grid;place-items:center}.disc{position:relative;width:82%;height:82%;border-radius:50%;background:var(--grad-hole);box-shadow:inset 0 5px 8px #00000052,inset 0 -3px 5px #ffffff73}.disc.is-red,.disc.is-yellow,.disc.is-ghost-red,.disc.is-ghost-yellow{width:86%;height:86%}.disc.is-red{background:var(--grad-red);box-shadow:inset 0 6px 9px #ffffff6b,inset 0 -9px 13px #00000052,0 2px 3px #0000002e}.disc.is-yellow{background:var(--grad-yellow);box-shadow:inset 0 6px 9px #ffffff80,inset 0 -9px 13px #00000047,0 2px 3px #0000002e}.disc.is-red:before,.disc.is-yellow:before{content:"";position:absolute;inset:22%;border-radius:50%;border:2px solid rgba(0,0,0,.1)}.disc.is-ghost-red{background:var(--grad-red);opacity:.34;animation:ghostbob 1.7s ease-in-out infinite}.disc.is-ghost-yellow{background:var(--grad-yellow);opacity:.34;animation:ghostbob 1.7s ease-in-out infinite}.disc.is-drop{animation:drop .36s cubic-bezier(.34,1.3,.64,1)}.disc.is-win:after{content:"";position:absolute;inset:-14%;border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 22px 7px #ffffffeb;animation:winpulse 1s ease-in-out infinite}.board-shadow{width:min(390px,84%);height:22px;margin-top:14px;border-radius:50%;background:radial-gradient(ellipse at center,#3a2e2238,#3a2e2200 70%)}.controls{display:flex;align-items:center;justify-content:center;gap:12px}.modal-overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:20px;background:#281e1257}.modal{position:relative;width:min(360px,100%);padding:32px 28px 26px;border-radius:26px;background:#fff;box-shadow:0 24px 60px -16px #281e1273;text-align:center;overflow:hidden}.modal__title{margin:0 0 6px;font:700 clamp(28px,6vw,34px) var(--font-display);color:var(--ink)}.help-list{margin:8px 0 20px;padding-left:18px;text-align:left;display:flex;flex-direction:column;gap:8px;font:400 14px/1.5 var(--font-body);color:var(--ink-soft)}.result-disc{display:block;width:60px;height:60px;margin:6px auto 14px}.result-text{margin:0 0 18px;font:400 14px/1.45 var(--font-body);color:#7a6e5e}.result-score{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px;font:700 15px var(--font-display);color:var(--ink)}.result-score__you{color:#ed4034}.result-score__sep{color:#c7b89e}.result-score__bot{color:var(--ink-faint)}.result-actions{display:flex;flex-direction:column;gap:10px}.result-actions .btn{width:100%}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.result-overlay:not(.is-celebrating) .confetti{display:none}.confetti__bit{position:absolute;top:8px;width:9px;height:9px;border-radius:2px;animation:pop 1.9s ease-in infinite}.confetti__bit--0{background:#ed4034}.confetti__bit--1{background:#ffc233;border-radius:50%}.confetti__bit--2{background:#3c68ec}.confetti__bit--3{background:#ed4034;border-radius:50%}.confetti__bit:nth-child(1){left:11%;animation-delay:0s}.confetti__bit:nth-child(2){left:26%;animation-delay:.4s}.confetti__bit:nth-child(3){left:40%;animation-delay:.8s}.confetti__bit:nth-child(4){left:54%;animation-delay:.2s}.confetti__bit:nth-child(5){left:66%;animation-delay:1s}.confetti__bit:nth-child(6){left:78%;animation-delay:.6s}.confetti__bit:nth-child(7){left:88%;animation-delay:1.3s}.confetti__bit:nth-child(8){left:18%;animation-delay:1.1s}@keyframes turnpulse{0%{box-shadow:0 0 0 0 var(--pulse-strong)}to{box-shadow:0 0 0 12px var(--pulse-fade)}}@keyframes ghostbob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes drop{0%{transform:translateY(-560%);opacity:.35}60%{opacity:1}to{transform:translateY(0)}}@keyframes winpulse{0%,to{opacity:.8}50%{opacity:1}}@keyframes pop{0%{transform:translateY(-6px) rotate(0);opacity:1}to{transform:translateY(74px) rotate(260deg);opacity:0}}@media (max-width: 760px){.home-grid{flex-direction:column;align-items:stretch}.home-art{display:none}.home-intro{max-width:none;align-items:center;text-align:center}.home-intro .field{align-items:center}.home-tagline{max-width:none}.home-play{width:100%}.link{align-self:center}}@media (max-width: 440px){.player{gap:8px;padding:8px 10px}.token{width:30px;height:30px}.player__name{font-size:14px}.player__score{font-size:18px}.player__state{font-size:11px}.vs,.board-shadow{display:none}}@media (prefers-reduced-motion: reduce){.disc.is-drop,.disc.is-win:after,.disc.is-ghost-red,.disc.is-ghost-yellow,.chevron.is-active,.player.is-active .token-wrap,.confetti__bit{animation:none!important}}