:root{--bg: #08080a;--surface: #131318;--surface-2: #1d1d24;--surface-3: #26262f;--line: #2e2e39;--fg: #f7f7fa;--fg-dim: #9696a4;--red: #ff2e4d;--red-deep: #c4132c;--white: #ffffff;--p1: var(--red);--p2: var(--white);--radius: 16px;--gap: 9px;--tap: 44px;color-scheme:dark}*{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation;overscroll-behavior:none}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 45% at 50% 0%,rgb(255 46 77 / 13%),transparent 70%),radial-gradient(45% 35% at 90% 100%,rgb(255 46 77 / 7%),transparent 70%)}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#root{min-height:100%}.menu,.setup,.match{display:flex;flex-direction:column;gap:var(--gap);width:100%;max-width:470px;margin-inline:auto;min-height:100vh;min-height:100dvh;padding:max(14px,env(safe-area-inset-top)) 15px max(14px,env(safe-area-inset-bottom))}.menu-bar,.match-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);min-height:var(--tap)}.icon-btn{display:grid;place-items:center;min-width:var(--tap);min-height:var(--tap);border-radius:12px;color:var(--fg-dim);font-size:19px;transition:transform .14s ease,color .14s ease,background-color .14s ease}.icon-btn:active{transform:scale(.9)}.icon-btn.is-on{color:var(--fg);background:var(--surface-2)}.icon-btn.is-ghost{pointer-events:none;opacity:0}.logo{margin:0;font-size:25px;font-weight:800;letter-spacing:-.035em}.logo span{color:var(--red)}.tagline{margin:0 0 4px;color:var(--fg-dim);font-size:14px}.btn{display:grid;place-items:center;min-height:var(--tap);padding:0 18px;border-radius:13px;background:var(--surface-2);color:var(--fg);font-weight:650;transition:transform .14s ease,opacity .14s ease,background-color .14s ease}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.32;cursor:default}.btn-primary{background:linear-gradient(180deg,var(--red),var(--red-deep));color:var(--white);box-shadow:0 6px 20px -8px var(--red)}.btn-wide{width:100%;margin-top:auto}.game-list{display:flex;flex-direction:column;gap:var(--gap);margin:0;padding:0;list-style:none}.game-card,.resume{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:16px 16px 16px 18px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:left;transition:transform .14s ease,border-color .14s ease}.game-card:before,.resume:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--red);transform:scaleX(1);transform-origin:left;transition:transform .16s ease}.game-card:active,.resume:active{transform:scale(.985);border-color:var(--red)}.game-card:active:before,.resume:active:before{transform:scaleX(2.5)}@media (hover: hover){.game-card:hover,.resume:hover{border-color:var(--red)}.game-card:hover:before,.resume:hover:before{transform:scaleX(2.5)}}.game-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:13px;background:var(--surface-2);font-size:23px;font-weight:700;color:var(--red)}.game-text{display:flex;flex-direction:column;gap:4px;min-width:0}.game-name{font-weight:700;font-size:17px}.game-tagline{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:2.6em;color:var(--fg-dim);font-size:13px;line-height:1.3}.resume{flex-direction:column;align-items:flex-start;gap:3px;border-color:var(--red);background:linear-gradient(180deg,rgb(255 46 77 / 12%),transparent)}.resume-label{color:var(--red);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.resume-game{font-weight:700}.setup-title{margin:0;font-size:17px;font-weight:700}.field{margin:0;padding:0;border:none}.field legend{padding:0 0 8px;color:var(--fg-dim);font-size:13px;font-weight:600}.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}.seg button{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:40px;border-radius:10px;color:var(--fg-dim);font-weight:650;font-size:14px;transition:background-color .14s ease,color .14s ease}.seg button.is-on{background:var(--red);color:var(--white)}.names{display:flex;gap:var(--gap)}.names input{flex:1;min-width:0;min-height:var(--tap);padding:0 13px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--fg);font:inherit}.names input:focus-visible{outline:2px solid var(--red);outline-offset:1px}.match{justify-content:space-between}.match-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-dim);font-size:13px;font-weight:600}.match-board{display:grid;place-items:center}.badge{display:flex;align-items:center;gap:11px;padding:11px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.badge.is-active{border-color:var(--accent);box-shadow:0 0 22px -6px var(--accent);transform:scale(1.02)}.badge.is-flipped{transform:rotate(180deg)}.badge.is-flipped.is-active{transform:rotate(180deg) scale(1.02)}.badge-mark{display:grid;place-items:center;width:31px;height:31px;flex:none;border-radius:10px;background:var(--surface-2);color:var(--accent);font-weight:800}.badge-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}.badge-score{font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;color:var(--accent)}.badge-thinking{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse .9s ease-in-out infinite}.match-actions{display:flex;gap:var(--gap)}.match-actions .btn{flex:1}.review-note{margin:0;color:var(--fg-dim);font-size:12px;text-align:center}.loading{width:100%;aspect-ratio:1;border-radius:var(--radius);background:var(--surface)}.game-surface{display:flex;flex-direction:column;gap:10px;width:100%}.board3{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--gap);width:100%;aspect-ratio:1}.cell{position:relative;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,var(--surface-2),var(--surface));font-size:clamp(34px,13vw,60px);font-weight:800;line-height:1;transition:transform .14s ease,border-color .18s ease,box-shadow .18s ease}.cell.p0{color:var(--mark0)}.cell.p1{color:var(--mark1)}.cell.is-playable:active{transform:scale(.95);border-color:var(--red)}.cell.is-win{border-color:currentColor;box-shadow:0 0 26px -6px currentColor}.cell:disabled{cursor:default}.cell .mark{animation:pop .2s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 0 14px currentColor)}.cell.is-doomed .mark{opacity:.28;transition:opacity .25s ease}.cell.is-doomed:after{content:"";position:absolute;inset:0;border:2px dashed var(--red);border-radius:var(--radius);animation:doom 1.7s ease-in-out infinite;pointer-events:none}.hint{margin:0;min-height:18px;color:var(--fg-dim);font-size:13px;text-align:center}.c4{display:flex;gap:6px;width:100%;padding:9px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);--slot-gap: 6px}.c4-col{display:flex;flex:1;flex-direction:column;gap:var(--slot-gap);min-width:0;padding:0;border-radius:11px;transition:background-color .14s ease}.c4-col.is-playable:active{background:var(--surface-3)}@media (hover: hover){.c4-col.is-playable:hover{background:var(--surface-3)}}.c4-slot{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;background:var(--bg);box-shadow:inset 0 2px 5px #0000008c}.c4-disc{position:absolute;inset:0;border-radius:50%}.c4-disc.p0{background:radial-gradient(circle at 32% 28%,#ff6b80,var(--p1) 60%)}.c4-disc.p1{background:radial-gradient(circle at 32% 28%,#fff,#c9c9d4 65%);box-shadow:inset 0 0 0 5px #08080a73}.c4-disc.is-win{box-shadow:inset 0 0 0 3px var(--fg),0 0 20px -2px currentColor}.c4-disc.is-dropping{animation:drop .34s cubic-bezier(.36,0,.66,1.12)}.c4-ghost{position:absolute;inset:15%;border-radius:50%;border:2px dashed var(--fg-dim);opacity:0;transition:opacity .14s ease}@media (hover: hover){.c4-col.is-playable:hover .c4-ghost{opacity:.55}}.banner{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#08080ac7;backdrop-filter:blur(7px);animation:fade .2s ease-out}.banner-card{display:flex;flex-direction:column;gap:18px;width:100%;max-width:330px;padding:26px;border:1px solid var(--accent);border-radius:22px;background:var(--surface);box-shadow:0 0 60px -18px var(--accent);text-align:center;animation:pop .26s cubic-bezier(.34,1.56,.64,1)}.banner-title{margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--accent)}.banner-actions{display:flex;gap:var(--gap)}.banner-actions .btn{flex:1}@keyframes pop{0%{transform:scale(.55);opacity:0}}@keyframes drop{0%{transform:translateY(calc(var(--fall) * -1 * (100% + var(--slot-gap))))}}@keyframes fade{0%{opacity:0}}@keyframes pulse{50%{opacity:.25}}@keyframes doom{50%{opacity:.3}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.cell.is-doomed .mark{opacity:.28}}:focus-visible{outline:2px solid var(--red);outline-offset:2px}