:root{--paper: #8ecbfb;--card: #ffffff;--ink: #2a2a3c;--ink-soft: #6b6b80;--coral: #ff7a6b;--coral-deep: #e3584a;--mint: #7fcfae;--mint-deep: #4fae8a;--butter: #ffd66b;--light-sq: #fff1c9;--dark-sq: #8fd4b7;--line: 3px;--radius: 22px;--sq: min(10.5vw, 64px);--board: calc(var(--sq) * 8)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--paper);color:var(--ink);font-family:Fredoka,Segoe UI,system-ui,sans-serif;font-size:16px;line-height:1.4}a{color:var(--coral-deep)}.card{background:var(--card);border:var(--line) solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--ink);padding:16px}button{font:inherit;font-weight:600;color:var(--ink);background:var(--card);border:var(--line) solid var(--ink);border-radius:999px;padding:8px 18px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform 80ms,box-shadow 80ms}button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}button:focus-visible{outline:3px solid var(--butter);outline-offset:2px}button.primary{background:var(--coral);color:#fff}button.quiet{background:var(--paper)}button.big{font-size:22px;padding:14px 32px;box-shadow:5px 5px 0 var(--ink)}.segmented{display:inline-flex;border:var(--line) solid var(--ink);border-radius:999px;overflow:hidden;box-shadow:3px 3px 0 var(--ink)}.segmented button{border:0;border-radius:0;box-shadow:none;padding:8px 16px}.segmented button:hover,.segmented button:active{transform:none;box-shadow:none}.segmented button.active{background:var(--mint)}input{flex:1;min-width:0;font:inherit;color:var(--ink);background:var(--paper);border:var(--line) solid var(--ink);border-radius:999px;padding:8px 14px}input:focus-visible{outline:3px solid var(--butter);outline-offset:2px}.row{display:flex;gap:10px;align-items:center}.spacer{flex:1}.hint{color:var(--ink-soft);font-size:14px;margin:0;text-align:center}.error{color:var(--coral-deep);font-weight:600}.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:14px}.home h1{font-size:clamp(36px,7vw,56px);font-weight:700;margin:0;letter-spacing:-.02em}.home p{max-width:36ch;margin:0;font-size:18px}.mascots{display:flex;align-items:flex-end;gap:14px;margin-bottom:6px}.mascot{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:var(--line) solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:38px;line-height:1}.mascot.m1{background:var(--butter);transform:rotate(-8deg)}.mascot.m2{background:var(--coral);width:48px;height:48px;margin-bottom:6px}.mascot.m3{background:var(--mint);transform:rotate(8deg)}.room{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center}.center{position:relative}header{width:100%;max-width:1060px;display:flex;align-items:center;gap:16px;padding:18px 20px 6px}.brand{font-weight:700;font-size:24px;text-decoration:none;color:var(--ink)}.status{flex:1;color:var(--ink-soft);font-weight:500;background:var(--card);border:var(--line) solid var(--ink);border-radius:999px;padding:6px 16px;text-align:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}main{width:100%;max-width:1060px;display:flex;justify-content:center;align-items:flex-start;gap:28px;padding:18px 20px 32px}.play{display:flex;flex-direction:column;align-items:center;gap:14px}.toolbar{width:var(--board);display:flex;justify-content:center}.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.chip{padding:6px 14px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}.chip.active{background:var(--mint)}.side{display:flex;flex-direction:column;gap:22px;width:340px;flex:0 0 340px}.video-panel{display:flex;flex-direction:column;gap:14px}.video-tile{position:relative;aspect-ratio:4 / 3;border:var(--line) solid var(--ink);border-radius:16px;overflow:hidden}.video-tile.remote{background:var(--mint)}.video-tile.local{background:var(--butter)}.video-tile video{width:100%;height:100%;object-fit:cover;display:block}.mirrored{transform:scaleX(-1)}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-weight:600;color:var(--ink)}.video-label{position:absolute;top:8px;left:8px;background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600}.video-controls{position:absolute;right:8px;bottom:8px;display:flex;gap:6px}.video-controls button{padding:4px 12px;font-size:13px;box-shadow:2px 2px 0 var(--ink)}.chat{display:flex;flex-direction:column;gap:10px}.chat-log{height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px}.chat-empty{margin:auto;color:var(--ink-soft)}.chat-log .me,.chat-log .them{max-width:85%;padding:6px 12px;border-radius:16px;border:2px solid var(--ink);overflow-wrap:anywhere}.chat-log .me{align-self:flex-end;background:var(--coral);color:#fff;border-bottom-right-radius:4px}.chat-log .them{align-self:flex-start;background:var(--butter);border-bottom-left-radius:4px}.board{display:grid;grid-template-columns:repeat(8,var(--sq));grid-template-rows:repeat(8,var(--sq));border:var(--line) solid var(--ink);border-radius:14px;overflow:hidden;-webkit-user-select:none;user-select:none}.sq{display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.sq.light{background:var(--light-sq)}.sq.dark{background:var(--dark-sq)}.sq.last{box-shadow:inset 0 0 0 100px #ffd66b8c}.sq.selected{box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 100px #ff7a6b59}.sq.check{box-shadow:inset 0 0 0 100px #ff7a6bb3}.sq.target:after{content:"";width:28%;height:28%;border-radius:50%;background:var(--ink);opacity:.35}.sq.capture:after{content:"";position:absolute;top:8%;right:8%;bottom:8%;left:8%;border-radius:50%;border:4px solid var(--ink);opacity:.45}.sq.movable{box-shadow:inset 0 0 0 3px var(--coral)}.piece{font-size:calc(var(--sq) * .8);line-height:1;transition:transform 80ms}.sq:hover .piece{transform:translateY(-2px)}.piece.white{color:#fff;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--ink)}.piece.black{color:var(--ink);text-shadow:2px 2px 0 rgba(0,0,0,.25)}.checker{position:relative;width:74%;height:74%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(var(--sq) * .42);line-height:1;border:var(--line) solid var(--ink);box-shadow:0 3px 0 var(--ink);transition:transform 80ms}.sq:hover .checker{transform:translateY(-2px)}.checker:before{content:"";position:absolute;width:22%;height:12%;border-radius:50%;background:#ffffffb3;transform:translate(-45%,-110%)}.checker.p0{background:var(--coral);color:#fff}.checker.p1{background:var(--ink);color:var(--butter);border-color:#111}@media(prefers-reduced-motion:reduce){button,.piece,.checker{transition:none}}@media(max-width:1000px){main{flex-direction:column;align-items:center}.side{width:100%;max-width:var(--board);flex:initial}:root{--sq: min(11.5vw, 56px)}header{flex-wrap:wrap;justify-content:center}.status{flex:1 1 100%;order:3}.home h1{font-size:42px}}.ttt{width:var(--board);height:var(--board);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;padding:10px;background:var(--ink);border:var(--line) solid var(--ink);border-radius:14px}.ttt-cell{border-radius:14px;box-shadow:none;padding:0;border:0;background:var(--light-sq);font-size:calc(var(--board) * .18);font-weight:700;line-height:1}.ttt-cell:hover,.ttt-cell:active{transform:none;box-shadow:none}.ttt.my-turn .ttt-cell:not(:disabled):hover{background:var(--butter)}.ttt-cell:disabled{cursor:default}.ttt-cell.x{color:var(--coral-deep)}.ttt-cell.o{color:var(--ink)}.ttt-cell.win{background:var(--mint)}.c4{width:var(--board);display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:10px;background:#5b9cf0;border:var(--line) solid var(--ink);border-radius:16px}.c4-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer}.c4-cell .disc{width:86%;height:86%;border-radius:50%;background:var(--paper);border:2px solid var(--ink);transition:transform .12s}.c4-cell.hover .disc{background:#cfe0fb}.c4-cell.p0 .disc{background:var(--coral);border-width:var(--line);box-shadow:inset 0 -4px #0000002e}.c4-cell.p1 .disc{background:var(--ink);border-width:var(--line);box-shadow:inset 0 -4px #ffffff26}.c4-cell.last .disc{transform:scale(1.06)}.c4-cell.win .disc{outline:4px solid var(--butter);outline-offset:-2px}.dots-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}.dots{width:var(--board);height:var(--board);background:var(--light-sq);border:var(--line) solid var(--ink);border-radius:14px}.dots .dot{fill:var(--ink)}.dots .edge{stroke:transparent;stroke-width:22;stroke-linecap:round;cursor:default}.dots .edge.open{cursor:pointer}.dots .edge.open:hover{stroke:#2a2a3c40}.dots .edge.taken{stroke:var(--ink);stroke-width:10}.dots .edge.last{stroke:var(--coral-deep)}.dots .box rect{stroke:var(--ink);stroke-width:3}.dots .box text{font-size:44px;font-weight:700;text-anchor:middle;fill:var(--ink)}.dots .box.p0 rect{fill:var(--coral)}.dots .box.p1 rect{fill:var(--mint)}.dots-score{display:flex;gap:12px}.score{padding:4px 14px;border-radius:999px;border:2px solid var(--ink);font-weight:700;background:var(--card)}.score.turn{box-shadow:3px 3px 0 var(--ink)}.score.p0{color:var(--coral-deep)}.scenery{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background-color:#8ecbfb;background-image:url(/background.jpg);background-image:image-set(url(/background.webp) type("image/webp"),url(/background.jpg) type("image/jpeg"));background-size:cover;background-position:center bottom}.room,.center{z-index:1}.game-actions{width:var(--board);display:flex;align-items:center;justify-content:space-between;gap:12px}.game-actions .hint{text-align:left}.home h1,.home p,.home .hint{text-shadow:0 2px 0 #fff,0 0 18px rgba(255,255,255,.9)}