:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#fff8fb;background:#110910}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% 0%,#3c152d 0,#160b13 45%,#0d080c);-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{min-height:54px;border:0;border-radius:16px;padding:0 20px;font-weight:800;color:#fff;background:linear-gradient(135deg,#db346b,#9d2258);box-shadow:0 10px 30px #0005;cursor:pointer;transition:transform .12s ease,opacity .15s ease}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.45;cursor:default}button.secondary{background:#ffffff12;border:1px solid #ffffff24}input{width:100%;min-height:54px;border-radius:16px;border:1px solid #ffffff1f;background:#ffffff0d;color:#fff;padding:0 16px;outline:none}input::placeholder{color:#fff6}.shell{width:min(100%,540px);margin:auto;min-height:100dvh;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}.hero{justify-content:center;text-align:center}.brand{font-size:52px;filter:drop-shadow(0 0 24px #e83e79aa)}h1,h2,p{margin:0}.hero h1{font-size:38px;letter-spacing:-1.4px}.hero>p{color:#d6b8c7;margin-bottom:12px}.or,.muted{color:#ad8f9e;font-size:14px}.fine{color:#8f7583;font-size:12px;margin-top:6px;line-height:1.4}.inviteHint{padding:12px;border-radius:14px;background:#ffffff0a;color:#d6b8c7}.error{padding:12px;border-radius:14px;background:#ff42541c;color:#ff9aa5;border:1px solid #ff596b44;font-size:14px}header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}header span{font-size:12px;letter-spacing:1.6px;color:#b99baa}header strong{font-size:15px}.card{background:#ffffff0b;border:1px solid #ffffff14;border-radius:24px;padding:20px;box-shadow:0 15px 40px #0005}.center{text-align:center;display:flex;align-items:center;flex-direction:column;gap:15px}.code{font-size:34px;font-weight:900;letter-spacing:8px}.players{display:grid;gap:10px}.player{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:18px;background:#ffffff0a}.player.ghost{color:#8f7583;font-style:italic;justify-content:center}.player span.up{color:#78d6a6;font-size:13px}.player span.down{color:#d6a778;font-size:13px}.config{display:grid;gap:14px;text-align:left}.field label{font-size:12px;letter-spacing:1px;color:#b99baa;text-transform:uppercase}.seg{display:flex;gap:8px;margin-top:6px}.seg button{flex:1;min-height:50px;padding:4px 6px;font-size:13px;font-weight:700;background:#ffffff0d;border:1px solid #ffffff1f;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.1}.seg button small{font-size:10px;opacity:.6;font-weight:600}.seg button.on{background:linear-gradient(135deg,#db346b,#9d2258);border-color:transparent}.seg button.on small{opacity:.85}.legend{display:flex;flex-wrap:wrap;gap:7px}.legend-item{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#cbb3c0;padding:5px 9px;border-radius:999px;background:#ffffff08;border:1px solid #ffffff12}.legend-item i{color:var(--cat);font-style:normal;font-size:12px}.board-wrap{max-height:42dvh;overflow-y:auto;border-radius:20px;padding:10px;background:linear-gradient(180deg,#ffffff10,#ffffff06);border:1px solid #ffffff14;-webkit-overflow-scrolling:touch}.board{display:grid;grid-template-columns:repeat(var(--cols, 6),1fr);gap:6px}.cell{aspect-ratio:1;min-width:0;border-radius:12px;background:var(--cat-soft, #ffffff0b);border:1px solid #ffffff14;border-bottom:3px solid var(--cat, #ffffff14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;transition:transform .2s ease,box-shadow .2s ease}.cell-mark{font-size:13px;line-height:1;color:var(--cat, #b98)}.cell-num{font-size:9px;color:#b493a3;letter-spacing:.5px}.cell.start{background:#43d9a318;border-bottom-color:#43d9a3}.cell.start .cell-mark{font-size:8px;font-weight:800;letter-spacing:.5px;color:#7ce9c1}.cell.finish{background:#f2c14e22;border-bottom-color:#f2c14e}.cell.finish .cell-mark{font-size:17px}.cell.bonus{background:#ffffff14;border-bottom-color:#f2c14e}.cell.bonus .cell-mark{color:#f7d774;font-size:15px}.cell.active{transform:translateY(-2px) scale(1.04);box-shadow:0 0 0 2px #fff8fb,0 8px 20px #0007;z-index:2}.tokens{position:absolute;inset:auto 0 -6px 0;display:flex;justify-content:center;gap:3px}.tok{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#ff5c93,#c31f5c);color:#fff;font-size:10px;font-weight:800;border:2px solid #1a0b13;box-shadow:0 3px 8px #0009;animation:hop .4s ease}.tok.me{background:linear-gradient(160deg,#6fd3ff,#2f7fd6)}.tok.turn{outline:2px solid #fff8fb;outline-offset:1px}@keyframes hop{0%{transform:translateY(-14px) scale(.6);opacity:0}60%{transform:translateY(3px) scale(1.05)}to{transform:translateY(0) scale(1);opacity:1}}.actionCard{text-align:center;display:grid;gap:14px;justify-items:center}.pill{justify-self:center;font-size:11px;text-transform:uppercase;letter-spacing:1px;border:1px solid var(--cat, #ffffff24);color:var(--cat, #d9b6c6);border-radius:999px;padding:6px 12px;background:color-mix(in srgb,var(--cat, #fff) 12%,transparent)}.bonus-hint{color:#f7d774;font-weight:700;font-size:14px}.die-stage{width:84px;height:84px;perspective:520px;margin:6px 0 2px}.die-stage.shake{animation:diceShake .35s linear infinite}@keyframes diceShake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-3px,2px) rotate(-6deg)}75%{transform:translate(3px,-2px) rotate(6deg)}}.die{position:relative;width:64px;height:64px;margin:10px auto;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.25,1,.35,1)}.die-face{position:absolute;width:64px;height:64px;border-radius:14px;background:linear-gradient(150deg,#fff,#dcdce6);border:1px solid #ffffffcc;box-shadow:inset 0 0 12px #0002;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:9px;gap:2px}.die-face .pip{width:100%;height:100%}.die-face .pip.on{background:radial-gradient(circle at 35% 35%,#d23b6b,#7c1338);border-radius:50%;place-self:center;width:12px;height:12px;box-shadow:inset 0 -1px 2px #0006}.f1{transform:rotateY(0) translateZ(32px)}.f6{transform:rotateY(180deg) translateZ(32px)}.f2{transform:rotateY(90deg) translateZ(32px)}.f5{transform:rotateY(-90deg) translateZ(32px)}.f3{transform:rotateX(90deg) translateZ(32px)}.f4{transform:rotateX(-90deg) translateZ(32px)}.flip{width:100%;max-width:340px;aspect-ratio:3 / 2;perspective:1100px}.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .7s cubic-bezier(.3,.9,.3,1)}.flip.revealed .flip-inner{transform:rotateY(0)}.flip-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;border:1px solid color-mix(in srgb,var(--cat, #fff) 40%,#ffffff22);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;text-align:center}.flip-face.front{background:linear-gradient(160deg,color-mix(in srgb,var(--cat) 18%,#1c0f17),#160b13);box-shadow:0 16px 40px #0007,inset 0 0 30px color-mix(in srgb,var(--cat) 12%,transparent)}.flip-face.back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#1c0f17 0,#1c0f17 10px,#241220 10px,#241220 20px);color:var(--cat, #fff);font-size:40px;box-shadow:0 16px 40px #0007}.challenge-text{font-size:17px;font-weight:700;line-height:1.34}.win{gap:10px}.win-badge{font-size:46px;animation:hop .5s ease}.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.game{gap:12px}.conn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#b99baa}.conn i{width:8px;height:8px;border-radius:50%;background:#b99baa}.conn.ok i{background:#56d69b;box-shadow:0 0 8px #56d69b}.conn.wait i{background:#e0b451;animation:blink 1s ease-in-out infinite}.conn.bad i{background:#ff5a6b}@keyframes blink{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){.die{transition-duration:.25s}.die-stage.shake{animation:none}.flip-inner{transition-duration:.25s}.tok{animation:none}}
