:root{--bg: #150f22;--bg-2: #241734;--ink: #f6f1ff;--ink-dim: #b3a6c9;--line: #3a2b52;--card: #1e1630;--accent: #ffd166;--danger: #ff4d6d;--safe: #4ade80;--grip: #f2b48a;--grip-dark: #d6906a;--radius: 16px;--shadow: 0 18px 40px -18px rgb(0 0 0 / .75);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%}html,body{overflow-x:clip}body{background:radial-gradient(1100px 700px at 50% -10%,#33204d 0%,transparent 60%),linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);background-attachment:fixed;color:var(--ink);font-family:Fredoka,ui-rounded,Trebuchet MS,system-ui,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{position:relative;min-height:100vh;min-height:100dvh;max-width:720px;margin:0 auto;padding:20px 16px 48px}h1,h2{margin:0;font-weight:700}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:#2b1f42;color:var(--ink);font:inherit;font-weight:600;padding:12px 20px;border-radius:999px;cursor:pointer;transition:transform .12s ease,filter .12s ease}.btn:hover:not(:disabled){filter:brightness(1.15)}.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg,#ffe08a,var(--accent));border-color:#ffdf8a;color:#2a1c05}.btn.big{width:100%;padding:16px 20px;font-size:1.1rem}.btn.ghost{background:transparent;color:var(--ink-dim)}.icon{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:transparent;border-radius:12px;font-size:1.05rem;line-height:1;padding:8px 10px;cursor:pointer}.text{width:100%;font:inherit;color:var(--ink);background:#17102a;border:1px solid var(--line);border-radius:12px;padding:13px 15px}.text::placeholder{color:#7c6d96}.text:focus-visible,.btn:focus-visible,.icon:focus-visible,.straw:focus-visible,.chip:focus-visible,.react:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.hero{text-align:center;padding:28px 0 22px}.wordmark{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:clamp(2.9rem,15vw,4.6rem);line-height:.88;letter-spacing:-.02em}.wordmark span:first-child{color:var(--ink);font-size:.72em;letter-spacing:.14em}.wordmark span:last-child{color:var(--accent)}.tagline{margin:14px 0 0;color:var(--ink-dim)}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:grid;gap:12px}.identity{display:flex;gap:10px;align-items:center}.avatar{flex:0 0 auto;width:52px;height:52px;font-size:1.7rem;line-height:1;border-radius:14px;border:1px solid var(--line);background:#17102a;cursor:pointer;transition:transform .12s ease}.avatar:active{transform:scale(.94) rotate(-6deg)}.picker{max-height:46vh;overflow-y:auto;overscroll-behavior:contain;background:#17102a;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:10px}.pick-group h3{margin:0 0 5px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim)}.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:3px}.pick{aspect-ratio:1;font-size:1.45rem;line-height:1;border:1px solid transparent;border-radius:10px;background:transparent;cursor:pointer;transition:transform .1s ease,background .1s ease}.pick:hover{background:#2b1f42;transform:scale(1.18)}.pick.on{border-color:var(--accent);background:#2b1f42}.field-label{color:var(--ink-dim);font-size:.95rem;margin-bottom:-6px}.stakes-input{font-size:1.05rem}.or{text-align:center;color:var(--ink-dim);font-size:.9rem;margin:2px 0}.code-row{display:flex;gap:8px}.code-input{text-transform:uppercase;letter-spacing:.35em;text-align:center;font-weight:700}.joining{text-align:center;color:var(--ink-dim);margin:4px 0}.joining strong{color:var(--accent);letter-spacing:.2em}.fine{text-align:center;color:#7c6d96;font-size:.85rem;margin-top:18px}.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.bar-right{display:flex;gap:8px}.code{display:inline-flex;align-items:baseline;gap:8px;border:1px dashed var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:7px 14px;cursor:pointer;font:inherit}.code:hover{border-color:var(--accent)}.code-label{color:var(--ink-dim);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}.code-value{font-weight:700;font-size:1.2rem;letter-spacing:.22em;color:var(--accent)}.notice{background:#2b1f42;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:10px 14px;margin-bottom:12px}.stakes{text-align:center;display:grid;gap:4px;margin-bottom:6px}.stakes-lead{color:var(--ink-dim);font-size:.85rem;text-transform:uppercase;letter-spacing:.16em}.stakes-text{font-size:1.5rem;font-weight:600;color:var(--accent)}.stakes-field{font:inherit;font-size:1.5rem;font-weight:600;color:var(--accent);text-align:center;background:transparent;border:none;border-bottom:2px dashed var(--line);padding:2px 6px;width:100%}.stakes-field:hover,.stakes-field:focus{border-bottom-color:var(--accent);outline:none}.chip-row{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink-dim);font-size:.9rem;margin-bottom:4px}.chip{font:inherit;min-width:34px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);cursor:pointer}.chip.on{background:var(--accent);border-color:var(--accent);color:#2a1c05;font-weight:700}.chip.done:not(.on){opacity:.5;text-decoration:line-through}.mode-picker,.picking-for{flex-wrap:wrap;margin-top:6px}@media(max-width:460px){.chip-row{flex-wrap:wrap}.chip-row>span{flex:1 0 100%;text-align:center}}.status{text-align:center;min-height:1.6em;margin:10px 0 0;font-size:1.15rem}.beat{text-align:center;min-height:1.2em;margin:2px 0 0;color:var(--ink-dim);font-size:.9rem}.who{margin:14px auto 0;max-width:380px;padding:12px}.phase-result .status,.phase-result .beat{display:none}.controls{margin-top:18px;display:grid;justify-items:center;gap:4px}.controls .btn.big{justify-self:stretch}.await{text-align:center;color:var(--ink-dim)}.phase-lobby .field{display:none}.field{position:relative;margin:10px 0 0;--grip-cover: 40px;--grip-h: 62px;--below-fist: 78px;--straw-gap: clamp(7px, 2.4vw, 18px);--straw-max: 34px;--cell-max: 52px;--grip-overhang: 24px;padding-bottom:var(--below-fist)}.bundle{position:relative;width:min(calc(100% - 2 * var(--grip-overhang)),calc(var(--straws) * (var(--cell-max) + var(--straw-gap))));margin:0 auto}.rail{display:flex;align-items:flex-end;justify-content:center;gap:var(--straw-gap);min-height:236px}.cell{position:relative;display:flex;flex-direction:column;align-items:center;container-type:inline-size;flex:1 1 0;min-width:0;max-width:var(--cell-max)}.straw{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;position:relative;width:min(var(--straw-max),100%);border-radius:7px 7px 0 0;background:repeating-linear-gradient(-32deg,hsl(var(--hue) 85% 62%) 0,hsl(var(--hue) 85% 62%) 9px,hsl(var(--hue) 90% 82%) 9px,hsl(var(--hue) 90% 82%) 18px);box-shadow:inset -3px 0 #00000029;cursor:default;transition:height .62s cubic-bezier(.22,1.2,.36,1),filter .2s ease,transform .2s ease}.straw-cap{position:absolute;inset:0 0 auto 0;height:6px;border-radius:7px 7px 0 0;background:hsl(var(--hue) 95% 88%)}.straw.selectable{cursor:pointer}.straw.selectable:hover{transform:translateY(-7px);filter:brightness(1.15)}.cell.mine .straw{filter:brightness(1.2) saturate(1.2);box-shadow:inset -3px 0 #00000029,0 0 0 2px var(--accent)}.cell.taken:not(.mine) .straw{filter:saturate(.75)}.grip{position:absolute;left:calc(-1 * var(--grip-overhang));right:calc(-1 * var(--grip-overhang));bottom:calc(var(--grip-cover) - var(--grip-h));height:var(--grip-h);border-radius:34px/26px;background:linear-gradient(180deg,var(--grip) 0%,var(--grip-dark) 100%);box-shadow:0 -3px #ffffff38 inset,0 16px 30px -14px #000c;pointer-events:none}.grip-knuckles{position:absolute;inset:8px 14px auto 14px;height:16px;border-radius:999px;background:repeating-linear-gradient(90deg,rgb(255 255 255 / .16) 0 26px,transparent 26px 34px)}.seat{position:absolute;top:calc(100% + var(--grip-h) - var(--grip-cover) + 8px);left:50%;transform:translate(-50%);width:calc(100% + var(--straw-gap));display:flex;flex-direction:column;align-items:center;gap:1px;transition:transform .2s ease}.seat-emoji{font-size:clamp(.95rem,3.4vw,1.35rem);line-height:1.1;height:1.1em}.seat-name{display:none;max-width:100%;font-size:clamp(.56rem,2vw,.75rem);line-height:1.15;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container (min-width: 30px){.seat-name{display:block}}.cell.mine .seat{transform:translate(-50%) scale(1.1)}.cell.mine .seat-name{color:var(--accent);font-weight:600}.cell.doomed .seat-name{color:var(--danger);font-weight:700}.cell.crowned .seat-name{color:var(--accent);font-weight:700}.cell.leading .straw{box-shadow:inset -3px 0 #00000029,0 0 0 2px #ffffff80}.cursor-layer{position:absolute;top:0;height:100%;left:50%;width:100vw;margin-left:-50vw;pointer-events:none;overflow:hidden;z-index:20}.cur{position:absolute;top:0;left:50%;display:flex;align-items:flex-start;gap:2px;will-change:transform}.cur-hand{width:15px;height:15px;flex:0 0 auto;border-radius:50% 50% 50% 3px;background:hsl(var(--hue) 90% 68%);border:2px solid rgb(12 7 22 / .65);box-shadow:0 3px 10px #0000008c;transform:rotate(-14deg)}.cur-face{font-size:1.5rem;line-height:1;margin:-6px 0 0 -4px;filter:drop-shadow(0 3px 5px rgb(0 0 0 / .55));animation:bob 2.4s ease-in-out infinite;animation-delay:calc(var(--hue) * -8ms)}.cur.flip{flex-direction:row-reverse;margin-left:-160px;justify-content:flex-start}.cur.flip .cur-face{margin:-6px -4px 0 0}.cur-name{margin-top:12px;font-size:.78rem;font-weight:600;line-height:1;white-space:nowrap;padding:4px 9px;border-radius:999px;background:hsl(var(--hue) 70% 24%);border:1px solid hsl(var(--hue) 80% 55%);color:hsl(var(--hue) 95% 92%);box-shadow:0 3px 10px #00000073}@keyframes bob{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(6deg)}}.cur.is-me{margin:6px 0 0 10px;opacity:.95}.cur.is-me .cur-name:after{content:" (you)";opacity:.6;font-weight:400}.cur.is-me.flip{margin:6px 0 0 -160px}.cur-trail{position:absolute;top:0;left:50%;width:9px;height:9px;border-radius:50%;background:hsl(var(--hue) 90% 65%);animation:trail .62s ease-out forwards}@keyframes trail{0%{opacity:.55;scale:1}to{opacity:0;scale:.2}}.cur-ring{position:absolute;top:0;left:50%;width:18px;height:18px;border-radius:50%;border:2.5px solid hsl(var(--hue) 95% 70%);animation:ring .62s cubic-bezier(.15,.7,.3,1) forwards}@keyframes ring{0%{opacity:.95;scale:.3}to{opacity:0;scale:3.4}}.cur-spark{position:absolute;top:0;left:50%;width:6px;height:6px;border-radius:50%;background:hsl(var(--hue) 95% 72%);animation:spark .55s cubic-bezier(.2,.8,.3,1) forwards}@keyframes spark{0%{opacity:1;translate:0 0;scale:1}to{opacity:0;translate:var(--dx) var(--dy);scale:.3}}.cur.popping .cur-face{animation:cur-pop .45s cubic-bezier(.3,1.6,.5,1)}@keyframes cur-pop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.75) rotate(-16deg)}to{transform:scale(1) rotate(0)}}.cur-beam{position:absolute;top:0;left:50%;height:4px;margin-top:6px;transform-origin:0 50%;line-height:0}.cur-bolt{display:block;height:4px;transform-origin:0 50%;border-radius:2px;background:linear-gradient(90deg,hsl(var(--hue) 100% 85%),hsl(var(--hue) 100% 70%) 55%,hsl(var(--hue) 100% 92%));box-shadow:0 0 12px 2px hsl(var(--hue) 100% 65% / .75);animation:beam .34s ease-out forwards}@keyframes beam{0%{opacity:0;transform:scaleX(.1)}18%{opacity:1;transform:scale(1)}to{opacity:0;transform:scaleY(.2)}}.cur-boom{position:absolute;top:0;left:50%;font-size:1.9rem;line-height:1;margin:-8px 0 0 -12px;animation:boom .55s cubic-bezier(.2,1.4,.4,1) forwards}@keyframes boom{0%{opacity:0;scale:.2}35%{opacity:1;scale:1.3}to{opacity:0;scale:1.6}}.cur.stunned{filter:grayscale(.7) brightness(.8)}.cur.stunned .cur-face{animation:cur-dizzy .5s linear infinite}.cur.stunned .cur-name:before{content:"💫"}@keyframes cur-dizzy{0%{transform:rotate(-22deg) scale(.92)}50%{transform:rotate(22deg) scale(.92)}to{transform:rotate(-22deg) scale(.92)}}.cur.hit .cur-face{animation:cur-hit .65s cubic-bezier(.25,1.3,.4,1)}@keyframes cur-hit{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-38deg) scale(1.3) translateY(6px)}55%{transform:rotate(26deg) scale(.85) translateY(-4px)}to{transform:rotate(0) scale(1)}}.cur-burst{position:absolute;top:0;left:50%;font-size:2rem;line-height:1;pointer-events:none;animation:cur-burst 1.5s cubic-bezier(.2,.7,.4,1) forwards}@keyframes cur-burst{0%{translate:0 0;scale:.4;opacity:0}22%{translate:0 -60px;scale:1.35;rotate:var(--spin);opacity:1}to{translate:var(--drift) -190px;scale:1;rotate:var(--spin);opacity:0}}.verdict{text-align:center;margin:6px 0 0;padding:18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line)}.verdict.is-you{border-color:var(--danger);box-shadow:0 0 40px -14px var(--danger)}.verdict.is-you.is-win{border-color:var(--accent);box-shadow:0 0 40px -14px var(--accent)}.verdict-emoji{font-size:2.6rem;line-height:1}.verdict-line{font-size:clamp(1.4rem,6vw,2rem);font-weight:700;margin:8px 0 4px}.verdict.is-you .verdict-line{color:var(--danger)}.verdict.is-you.is-win .verdict-line{color:var(--accent)}.verdict-aside{margin:0;color:var(--ink-dim);font-size:.95rem}.shaking{animation:shake .6s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-8px)}40%,60%{transform:translate(8px)}}.reactions{display:flex;justify-content:center;gap:6px;margin:16px 0 4px}.react{font-size:1.25rem;line-height:1;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:transparent;cursor:pointer;transition:transform .12s ease}.react:hover{transform:translateY(-3px) scale(1.1)}.roster{margin-top:18px}.roster h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-dim);margin-bottom:8px}.roster ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}.player{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:12px;background:#ffffff08}.player.offline{opacity:.45}.player.doomed{background:#ff4d6d29;box-shadow:inset 0 0 0 1px var(--danger)}.player.crowned{background:#ffc45429;box-shadow:inset 0 0 0 1px var(--accent)}.drop{font:inherit;font-size:1.1rem;line-height:1;padding:0 4px;border:none;background:transparent;color:var(--ink-dim);cursor:pointer;opacity:.55}.drop:hover{opacity:1;color:var(--danger)}.stand-in{display:flex;gap:6px;margin-top:8px}.stand-in .text{flex:1 1 auto;min-width:0;margin:0}.stand-in .btn{flex:0 0 auto}.pemoji{font-size:1.15rem;line-height:1}.pname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pname em{color:var(--ink-dim);font-style:normal}.tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:1px 8px}.plosses{color:var(--danger);font-weight:700;min-width:1.2em;text-align:right}#fx{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:50}.fx-bit,.fx-glyph,.fx-react{position:absolute;will-change:transform,opacity}.fx-bit{width:9px;height:14px;border-radius:2px;background:hsl(var(--hue) 90% 62%);animation:toss var(--dur) var(--delay) cubic-bezier(.15,.6,.5,1) forwards}.fx-glyph{font-size:1.5rem;animation:toss var(--dur) var(--delay) cubic-bezier(.15,.6,.5,1) forwards}@keyframes toss{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}45%{opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 90vh)) rotate(var(--spin));opacity:0}}.fx-react{bottom:6vh;font-size:2rem;animation:rise 2.1s ease-out forwards}@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-10vh) scale(1.15)}to{transform:translate(var(--drift),-62vh) scale(1);opacity:0}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}.straw{transition-duration:.12s}}
