:root{--bg: #f6ecdf;--bg-2: #efe0cf;--ink: #3b2f2a;--muted: #8a7a70;--quilt-a: #ecd6c0;--quilt-b: #f3e3d3;--stitch: #d9bfa6;--orange: #ea8a3c;--orange-dark: #c76b22;--orange-inner: #f7b98a;--gray: #8e939b;--gray-dark: #6a6f77;--gray-inner: #c4c8ce;--accent: #5b8a72;--danger: #c0392b;--card: #fffaf4;--shadow: 0 10px 30px rgba(59, 47, 42, .12);--radius: 14px;--board: min( calc(100vw - 2rem) , calc(100dvh - 420px) , 560px)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:radial-gradient(circle at 50% 0%,#fbf3e9 0%,var(--bg) 55%,var(--bg-2) 100%);color:var(--ink);font-family:Nunito,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}.app{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:.5rem 1rem .75rem;gap:.5rem}.topbar{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.brand{display:flex;align-items:baseline;gap:.6rem}.logo{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;color:var(--orange-dark)}.tagline{color:var(--muted);font-size:.9rem}.actions{display:flex;gap:.4rem;align-items:center}.btn{border:1px solid rgba(59,47,42,.14);background:var(--card);border-radius:999px;padding:.45rem .9rem;cursor:pointer;font-weight:700;box-shadow:0 1px 2px #3b2f2a14;transition:transform .1s,background .15s}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn.primary{background:var(--orange);border-color:var(--orange-dark);color:#fff}.btn.primary:hover{background:var(--orange-dark)}.btn.icon{width:2.4rem;padding:.45rem 0;text-align:center}.btn.ghost-btn{background:transparent;box-shadow:none}.table{position:relative;width:100%;max-width:1100px;display:grid;grid-template-columns:1fr;grid-template-areas:"panel" "board";gap:.6rem;justify-items:center}.board-wrap{grid-area:board}.panel{grid-area:panel;width:var(--board);display:flex;flex-direction:column;gap:.5rem}.panel .side[data-player="0"]{order:3}.panel .status-row{order:2}.panel .side[data-player="1"]{order:1}@media (min-width: 900px) and (orientation: landscape){:root{--board: min( calc(100dvh - 150px) , calc(100vw - 420px) , 720px)}.table{grid-template-columns:var(--board) minmax(280px,360px);grid-template-areas:"board panel";align-items:stretch;gap:1.25rem}.panel{width:100%;justify-content:center;gap:.75rem}.panel .side[data-player="1"]{order:1}.panel .status-row{order:2}.panel .side[data-player="0"]{order:3}}.side{width:100%;display:flex;flex-direction:column;gap:.45rem;padding:.55rem .7rem;border-radius:var(--radius);background:#fffaf48c;border:2px solid transparent;transition:background .2s,border-color .2s,box-shadow .2s}.side[data-player="0"]{--p-color: var(--orange);--p-dark: var(--orange-dark)}.side[data-player="1"]{--p-color: var(--gray);--p-dark: var(--gray-dark)}.side.active{background:var(--card);border-color:var(--p-color);box-shadow:var(--shadow)}.side.winner{border-color:var(--p-color)}.side-head{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1rem}.side-head .dot{width:.85rem;height:.85rem;border-radius:50%;background:var(--p-color);box-shadow:inset 0 -2px #00000026;flex:none}.side-head .name{color:var(--p-dark)}.clock{margin-left:auto;border:1px solid rgba(59,47,42,.14);background:#fff;border-radius:10px;padding:.2rem .6rem;font-variant-numeric:tabular-nums;font-weight:900;font-size:1.25rem;letter-spacing:.03em;color:var(--muted);cursor:pointer;min-width:5.2rem;text-align:center}.clock.running{color:var(--ink);background:#fff8ee;border-color:var(--p-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-color) 30%,transparent)}.clock.low{color:var(--danger)}.clock.low.running{animation:blink 1s steps(2) infinite}@keyframes blink{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 45%,transparent)}}.pool{display:grid;grid-template-columns:repeat(8,1fr);gap:.25rem}.slot{aspect-ratio:1;border-radius:50%;background:#3b2f2a0d;border:1px dashed rgba(59,47,42,.14)}.kinds{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.kind-btn{display:flex;align-items:center;gap:.5rem;border:2px solid rgba(59,47,42,.1);background:#fff9;border-radius:12px;padding:.3rem .6rem;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,transform .1s;--fur: var(--p-color);--fur-inner: #fff}.kind-btn:disabled{cursor:default;opacity:.45}.kind-btn:not(:disabled):hover{transform:translateY(-1px);border-color:var(--p-color)}.kind-btn.on{background:#fff;border-color:var(--p-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-color) 30%,transparent)}.kind-icon{width:2.1rem;height:2.1rem;flex:none}.kind-icon svg{width:100%;height:100%;overflow:visible}.kind-btn[data-kind=kitten] .kind-icon{width:1.7rem;height:1.7rem;margin:.2rem}.kind-label{font-weight:800}.kind-count{margin-left:auto;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}.kind-btn .fur{fill:var(--fur)}.kind-btn .inner{fill:var(--fur-inner);opacity:.6}.kind-btn .eye,.kind-btn .eye-cat,.kind-btn .nose{fill:var(--ink)}.kind-btn .line{stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}.status-row{width:100%;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-height:2rem}.status{font-weight:800;font-size:1.05rem;padding:.2rem .9rem;border-radius:999px;background:#fffaf4cc;text-align:center}.status.p0{color:var(--orange-dark)}.status.p1{color:var(--gray-dark)}.hint{text-align:center;color:var(--muted);font-size:.85rem;line-height:1.3}.hint:empty{display:none}.choices{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}.choices:empty{display:none}.chip{border:1px solid var(--accent);background:#eaf3ee;color:#2f5a46;border-radius:999px;padding:.3rem .75rem;cursor:pointer;font-weight:700;font-size:.85rem}.chip:hover{background:var(--accent);color:#fff}.board{position:relative;width:var(--board);height:var(--board);display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:3px;padding:6px;border-radius:var(--radius);background:var(--stitch);box-shadow:var(--shadow),inset 0 0 0 4px #e3c7ad}.cell{position:relative;border:0;border-radius:8px;background-color:var(--quilt-a);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 2px,transparent 2px 9px);cursor:default;padding:0;outline:none;transition:background-color .15s,box-shadow .15s}.cell:nth-child(12n+2),.cell:nth-child(12n+4),.cell:nth-child(12n+6),.cell:nth-child(12n+7),.cell:nth-child(12n+9),.cell:nth-child(12n+11){background-color:var(--quilt-b)}.cell.playable{cursor:pointer}.cell.playable:hover{box-shadow:inset 0 0 0 3px #ffffffd9}.cell.last{box-shadow:inset 0 0 0 3px #5b8a728c}.cell.option{cursor:pointer;box-shadow:inset 0 0 0 3px var(--accent);animation:pulse 1.2s ease-in-out infinite}.cell.option-hover{background-color:#cfe3d7!important;animation:none}.cell:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}@keyframes pulse{50%{box-shadow:inset 0 0 0 5px var(--accent)}}.pieces{position:absolute;inset:0;pointer-events:none}.piece{position:absolute;left:0;top:0;transition:left .38s cubic-bezier(.2,.8,.2,1),top .38s cubic-bezier(.2,.8,.2,1),width .38s,height .38s,transform .2s,filter .2s,opacity .2s;filter:drop-shadow(0 3px 3px rgba(59,47,42,.25));will-change:left,top}.piece svg{width:100%;height:100%;display:block;overflow:visible}.piece.p0{--fur: var(--orange);--fur-inner: var(--orange-inner)}.piece.p1{--fur: var(--gray);--fur-inner: var(--gray-inner)}.piece .fur{fill:var(--fur)}.piece .inner{fill:var(--fur-inner)}.piece .eye,.piece .eye-cat,.piece .nose{fill:var(--ink)}.piece .line{stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}.piece.in-pool{filter:drop-shadow(0 2px 2px rgba(59,47,42,.18))}.piece.in-pool.selectable{pointer-events:auto;cursor:pointer}.piece.in-pool.selectable:hover{transform:translateY(-3px) scale(1.06)}.piece.in-pool.selected{transform:translateY(-3px) scale(1.1);filter:drop-shadow(0 4px 6px rgba(59,47,42,.35))}.piece.in-pool:not(.selectable){opacity:.7}.piece.will-move{transform:scale(1.1);filter:drop-shadow(0 4px 5px rgba(59,47,42,.3)) brightness(1.1)}.piece.will-leave{transform:scale(.88);opacity:.55}.piece.ghost{pointer-events:none;opacity:0;transition:none;filter:none}.piece.ghost.visible{opacity:.45}.credit{max-width:640px;text-align:center;color:var(--muted);font-size:.75rem;margin-top:auto;padding-top:.5rem}.dlg{border:0;border-radius:18px;padding:0;background:var(--card);color:var(--ink);box-shadow:var(--shadow);max-width:min(92vw,520px);width:100%}.dlg::backdrop{background:#3b2f2a59;backdrop-filter:blur(2px)}.dlg-body{padding:1.4rem 1.5rem 1.2rem;display:flex;flex-direction:column;gap:.9rem;margin:0}.dlg h2{margin:0;font-size:1.4rem}.field{display:flex;flex-direction:column;gap:.35rem}.field>span{font-weight:800;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.muted{color:var(--muted)}.seg{display:inline-flex;background:var(--bg-2);border-radius:999px;padding:3px;gap:3px;flex-wrap:wrap;align-self:flex-start}.seg-btn{border:0;background:transparent;border-radius:999px;padding:.4rem .9rem;cursor:pointer;font-weight:700;color:var(--muted)}.seg-btn.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #3b2f2a26}.dlg-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.3rem}.rules p{margin:0;line-height:1.5}.rules{max-height:80dvh;overflow:auto}.dlg-over .dlg-body{align-items:center;text-align:center}.dlg-over p{margin:0;color:var(--muted)}.over-piece{width:96px;height:96px}.over-piece.p0{--fur: var(--orange);--fur-inner: var(--orange-inner)}.over-piece.p1{--fur: var(--gray);--fur-inner: var(--gray-inner)}.over-piece .fur{fill:var(--fur)}.over-piece .inner{fill:var(--fur-inner)}.over-piece .eye,.over-piece .eye-cat,.over-piece .nose{fill:var(--ink)}.over-piece .line{stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}.over-piece svg{width:100%;height:100%;overflow:visible}@media (max-width: 480px){.tagline{display:none}.logo{font-size:1.6rem}.btn{padding:.4rem .7rem;font-size:.9rem}.kind-label{display:none}:root{--board: min( calc(100vw - 2rem) , calc(100dvh - 400px) )}}.status:has(.resume-btn){background:transparent;padding:0}.resume-btn{font-size:1rem;padding:.45rem 1.2rem}[hidden]{display:none!important}.side-head .role{color:var(--muted);font-weight:700;font-size:.9rem}.side.offline .side-head .dot{background:transparent;box-shadow:inset 0 0 0 2px var(--p-color)}.side.offline .side-head .role:after{content:" ⚡"}.btn.small{padding:.25rem .7rem;font-size:.85rem}.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}.btn.danger:hover{background:#fdeceb}.btn:disabled{opacity:.5;cursor:default;transform:none}.online-bar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center;font-size:.9rem}.online-bar .code-label{color:var(--muted)}.online-bar .code{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:.12em;font-size:1rem}.link-box{display:flex;gap:.4rem}.link-box input{flex:1;min-width:0;border:1px solid rgba(59,47,42,.2);border-radius:10px;padding:.5rem .6rem;font:inherit;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:.9rem;background:#fff;color:var(--ink)}.wait p{margin:0}.small{font-size:.85rem}.back-online{align-self:flex-start}.rematch-note{color:var(--accent)!important;font-weight:700}.info-msg{margin:0;line-height:1.5;font-size:1.05rem}