:root{--bg:#000;--fg:#fff;--muted:#8a8a8a;--line:#2a2a2a;--surface:#111;--surface-2:#1a1a1a;--yellow:#fadf0e;--red:#fe2f2f;--purple:#7333f1;--blue:#1b5bff;--sky:#a0e9ff;--lemon:#fffd6d;--pink:#ffa0f0;--lime:#b4ff91;--orange:#ff9559;--lilac:#ede5ff;--font:"Helvetica Neue", "HelveticaNeue", "Helvetica Neue LT", Helvetica, Arial, "Nimbus Sans", sans-serif;--ease:cubic-bezier(0, 0, 0, 1);--ease-soft:cubic-bezier(0, 0, .25, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{background:var(--bg);min-height:100%;color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0}body{overscroll-behavior:none}button,select,input{font:inherit;color:inherit}button{cursor:pointer}.muted{color:var(--muted)}.small{font-size:13px}.btn{background:var(--fg);color:#000;letter-spacing:-.01em;min-height:42px;box-shadow:inset 0 0 0 2px var(--fg);transition:transform .2s var(--ease), background-color .2s, color .2s, box-shadow .2s, opacity .2s;white-space:nowrap;border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 22px;font-size:15px;font-weight:800;display:inline-flex}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(0)scale(.97)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.primary{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--yellow)}.btn.ghost{color:var(--fg);background:0 0;min-width:42px;padding:10px 14px;box-shadow:inset 0 0 0 2px #444}.btn.big{min-height:56px;padding:14px 34px;font-size:19px}.btn.tiny{min-width:30px;min-height:30px;padding:4px 12px;font-size:14px}.btn.danger{background:var(--red);color:#fff;box-shadow:inset 0 0 0 2px var(--red)}:focus-visible{outline:3px solid var(--sky);outline-offset:3px}.card{--cw:160px;width:var(--cw);aspect-ratio:5/7;padding:calc(var(--cw) * .09);padding-bottom:calc(var(--cw) * .075);border-radius:calc(var(--cw) * .075);text-align:left;font-weight:700;font-size:calc(var(--cw) * .104);letter-spacing:-.012em;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;border:0;flex-direction:column;flex:none;line-height:1.17;display:flex;position:relative;overflow:hidden}.card.len-m{font-size:calc(var(--cw) * .094)}.card.len-l{font-size:calc(var(--cw) * .083)}.card.len-xl{font-size:calc(var(--cw) * .074)}.card-text{white-space:pre-line;flex:1}.card.white{color:#000;background:#fff;box-shadow:inset 0 0 0 2px #fff,0 1px #ffffff1a,0 10px 24px #00000080}.card.black{color:#fff;background:#000;box-shadow:inset 0 0 0 2px #fff,0 18px 40px #0009}.card-footer{font-size:max(8px, calc(var(--cw) * .052));letter-spacing:0;justify-content:space-between;align-items:center;gap:4px;margin-top:6px;font-weight:700;line-height:1;display:flex}.card-brand{white-space:nowrap;align-items:center;gap:4px;min-width:0;display:inline-flex}.brand-text{text-overflow:ellipsis;overflow:hidden}.card-footer .pick{flex:none}.card.black:has(.pick) .card-footer{font-size:max(7px, calc(var(--cw) * .045))}.card-brand .logo-mark{width:1.4em;height:1.4em}.pick{align-items:center;gap:3px;font-weight:800;display:inline-flex}.pick b{color:#000;background:#fff;border-radius:50%;place-items:center;width:1.6em;height:1.6em;display:inline-grid}.blank{vertical-align:baseline;border-bottom:.09em solid;width:4.2em;height:.95em;margin:0 .05em;display:inline-block}.answer{color:var(--lemon);animation:answer-in .35s var(--ease) both}.answer.a1{color:var(--sky)}.answer.a2{color:var(--pink)}@keyframes answer-in{0%{opacity:0;filter:blur(4px)}}.order-badge{top:calc(var(--cw) * .05);right:calc(var(--cw) * .05);width:1.9em;height:1.9em;color:var(--yellow);background:#000;border-radius:50%;place-items:center;font-size:13px;font-weight:800;display:grid;position:absolute}.card.back{color:#fff;background:#000;justify-content:space-between;box-shadow:inset 0 0 0 2px #fff,0 10px 24px #00000080}.back-title{font-weight:800;font-size:calc(var(--cw) * .15);letter-spacing:-.03em;line-height:.98}.back-hint{font-size:calc(var(--cw) * .075);color:var(--yellow)}.card.back.flippable{transition:transform .25s var(--ease)}.card.back.flippable:hover{transform:translateY(-6px)rotate(-2deg)}.card.back.flippable:active{transform:scale(.97)}button.card.white{cursor:pointer;transition:transform .22s var(--ease), box-shadow .22s var(--ease), opacity .2s}button.card.white:hover:not(:disabled){transform:translateY(-6px)}button.card.white.selected{box-shadow:inset 0 0 0 4px var(--yellow), 0 0 0 3px var(--yellow), 0 18px 30px #0009;transform:translateY(-14px)rotate(-1.5deg)}.mode-discard button.card.white.selected,.mode-reboot button.card.white.selected{box-shadow:inset 0 0 0 4px var(--orange), 0 0 0 3px var(--orange)}.flip-in{animation:flip-in .45s var(--ease) both}@keyframes flip-in{0%{opacity:0;transform:perspective(600px)rotateY(80deg)}}.tilt-l{transform:rotate(-7deg)}.tilt-r{transform:rotate(8deg)translate(-18%,14%)}.app{flex-direction:column;height:100dvh;display:flex}.app.phase-lobby{height:auto;min-height:100dvh}.topbar{align-items:center;gap:16px;padding:10px 16px 4px;font-weight:800;display:flex}.brand{letter-spacing:-.02em;white-space:nowrap;align-items:center;gap:8px;font-size:16px;display:inline-flex}.round{color:var(--muted);white-space:nowrap;font-size:13px;font-weight:700}.countdown{background:var(--surface-2);border-radius:999px;flex:none;width:132px;height:26px;margin-left:auto;position:relative;overflow:hidden}.countdown-bar{transform-origin:0;background:#fff;transition:transform .25s linear;position:absolute;inset:0}.countdown-num{mix-blend-mode:difference;color:#fff;place-items:center;height:100%;font-size:13px;font-weight:800;display:grid;position:relative}.countdown.urgent .countdown-bar{background:var(--red)}.countdown.urgent{animation:1s ease-in-out infinite urgent}@keyframes urgent{50%{transform:scale(1.06)}}.main{flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.scoreboard{scrollbar-width:none;gap:8px;margin:0;padding:8px 16px;list-style:none;display:flex;overflow-x:auto}.scoreboard::-webkit-scrollbar{display:none}.chip{flex:none;position:relative}.chip-main{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);border:0;border-radius:999px;align-items:center;gap:8px;padding:4px 12px 4px 4px;font-size:14px;font-weight:700;transition:background .3s,box-shadow .3s,opacity .3s;display:flex}.chip-main[aria-disabled=true]{cursor:default}.chip.me .chip-main{box-shadow:inset 0 0 0 2px #fff}.chip.czar .chip-main{background:var(--yellow);color:#000;box-shadow:inset 0 0 0 2px var(--yellow)}.chip.winner .chip-main{background:var(--purple);color:#fff;box-shadow:inset 0 0 0 2px var(--purple);animation:pop .6s var(--ease)}.chip.offline .chip-main{opacity:.4}.chip-avatar{display:inline-flex;position:relative}.crown{color:#000;filter:drop-shadow(0 0 1px var(--yellow));position:absolute;top:-10px;left:50%;transform:translate(-50%)rotate(-8deg)}.chip-name{text-overflow:ellipsis;white-space:nowrap;max-width:120px;overflow:hidden}.you{opacity:.6;font-weight:400}.chip-score{color:#000;text-align:center;background:#fff;border-radius:999px;min-width:22px;padding:2px 7px;font-weight:800}.chip.czar .chip-score{color:var(--yellow);background:#000}.chip-status{min-width:10px;color:var(--lime);font-size:12px}.chip.czar .chip-status{color:#000;text-transform:uppercase;letter-spacing:.06em;font-size:10px}.chip.offline .chip-status{color:var(--orange)}.chip-menu{z-index:20;position:absolute;top:calc(100% + 6px);left:0}.avatar{object-fit:cover;color:#000;border-radius:50%;flex:none;place-items:center;font-weight:800;display:inline-grid}@keyframes pop{40%{transform:scale(1.12)}}.table{flex-direction:column;flex:1;min-height:0;display:flex}.stage{flex-wrap:wrap;flex:1;place-content:safe center center;align-items:center;gap:20px 28px;min-height:0;padding:16px;display:flex;overflow-y:auto}.stage-black{align-items:center;gap:22px;display:flex}.stage-black .card.black{--cw:clamp(150px, min(26vw, 31vh), 250px);animation:deal .5s var(--ease) both}.stage-black .card.black.winning{box-shadow:inset 0 0 0 3px var(--yellow), 0 0 0 4px #fadf0e40, 0 18px 40px #0009}@keyframes deal{0%{opacity:0;transform:translateY(24px)rotate(-5deg)scale(.96)}}.pile{aspect-ratio:5/7;width:clamp(90px,12vw,130px);position:relative}.pile .card.back{--cw:clamp(90px, 12vw, 130px);animation:land .4s var(--ease) both;position:absolute;inset:0}.pile-card.p0{transform:rotate(-6deg)}.pile-card.p1{transform:rotate(3deg)translate(4px,-2px)}.pile-card.p2{transform:rotate(-2deg)translate(-3px,3px)}.pile-card.p3{transform:rotate(7deg)translate(5px,2px)}.pile-card.p4{transform:rotate(-9deg)translate(-4px,-4px)}.pile-card.p5{transform:rotate(1deg)translate(2px,5px)}@keyframes land{0%{opacity:0;translate:0 -40px}}.pile-label{text-align:center;color:var(--muted);white-space:nowrap;font-size:13px;font-weight:700;position:absolute;bottom:-28px;left:0;right:0}.plays{flex-wrap:wrap;justify-content:center;gap:16px;max-width:980px;display:flex}.play{animation:deal .45s var(--ease) both;flex-direction:column;align-items:center;gap:8px;display:flex}.play .card{--cw:clamp(112px, min(15vw, 21vh), 168px)}.pick-2 .play .card,.pick-3 .play .card{--cw:clamp(100px, min(12vw, 18vh), 140px)}.back-stack{padding-right:calc((var(--n) - 1) * 12px);padding-top:calc((var(--n) - 1) * 6px);display:grid}.back-stack .stack-card{transform:translate(calc(var(--i) * 12px), calc(var(--i) * -6px)) rotate(calc(var(--i) * 2.5deg - 1deg));grid-area:1/1}.back-stack:hover .stack-card.flippable{transform:translate(calc(var(--i) * 18px), calc(var(--i) * -8px - 6px)) rotate(calc(var(--i) * 4deg - 2deg))}.play-cards{transition:transform .22s var(--ease);background:0 0;border:0;border-radius:16px;gap:6px;padding:0;display:flex}.play-cards:hover{transform:translateY(-4px)}.play.focused .play-cards .card{box-shadow:inset 0 0 0 4px var(--yellow), 0 0 0 3px var(--yellow)}.play.winner .play-cards .card{box-shadow:inset 0 0 0 4px var(--purple), 0 0 0 4px var(--purple), 0 0 40px #7333f199}.play.winner{animation:pop .7s var(--ease)}.play.loser{opacity:.5;transition:opacity .4s, transform .4s var(--ease);transform:scale(.95)}.play-owner{align-items:center;gap:6px;font-size:13px;font-weight:700;display:inline-flex}.result-row{flex:0 0 100%;order:-1;justify-content:center;display:flex}.result-banner{background:var(--purple);width:min(560px,100%);animation:deal .5s var(--ease) both;border-radius:22px;align-items:center;gap:14px;padding:12px 14px;display:flex}.result-banner .btn{margin-left:auto}.result-name{letter-spacing:-.02em;font-size:19px;font-weight:800}.result-banner .muted{color:var(--lilac);font-size:13px}.dock{padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#000;border-top:1px solid #1c1c1c;flex:none}.dock-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-bottom:4px;display:flex}.status{letter-spacing:-.01em;margin:0;font-size:16px;font-weight:700}.actions{align-items:center;gap:8px;display:flex}.hand{scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#333 transparent;gap:10px;padding:18px 4px 6px;display:flex;overflow-x:auto}.hand .card{--cw:clamp(108px, min(13.5vw, 19vh), 152px);scroll-snap-align:start;animation:deal .45s var(--ease) both}.hand.locked .card{opacity:.55}@media (width>=1500px){.hand{justify-content:center}}.menu-wrap{position:relative}.menu{z-index:30;background:var(--surface-2);border-radius:18px;flex-direction:column;width:250px;padding:6px;display:flex;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:inset 0 0 0 1.5px #333,0 20px 40px #000000b3}.menu button{text-align:left;background:0 0;border:0;border-radius:12px;flex-direction:column;gap:2px;padding:10px 12px;display:flex}.menu button:hover:not(:disabled){background:#2a2a2a}.menu button:disabled{opacity:.4}.menu button span{color:var(--muted);font-size:13px}.lobby{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"hero players""hero settings""how settings";align-items:start;gap:18px 28px;width:min(1180px,100%);margin:0 auto;padding:28px 24px 40px;display:grid}.lobby-hero{grid-area:hero;position:relative}.players-panel{grid-area:players}.settings-panel{grid-area:settings}.how{grid-area:how}.wordmark{letter-spacing:-.045em;margin:0;font-size:clamp(48px,7.4vw,104px);font-weight:800;line-height:.92}.wordmark.small{font-size:clamp(40px,9vw,72px)}.tagline{color:#cfcfcf;max-width:26ch;margin:18px 0 0;font-size:19px;font-weight:700;line-height:1.3}.hero-cards{margin:34px 0 0 8px;display:flex}.hero-cards .card{--cw:clamp(130px, 14vw, 180px)}.hero-cards .card.black{animation:6s ease-in-out infinite sway-l}.hero-cards .card.white{animation:6s ease-in-out infinite sway-r}@keyframes sway-l{50%{transform:rotate(-10deg)}}@keyframes sway-r{50%{transform:rotate(5deg)translate(-18%,14%)}}.panel{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:24px;padding:20px}.panel h2{letter-spacing:-.03em;align-items:baseline;gap:10px;margin:0 0 14px;font-size:24px;font-weight:800;display:flex}.settings-note{margin:-8px 0 14px}.panel h3{margin:20px 0 8px;font-size:16px;font-weight:800}.count{color:#000;background:#fff;border-radius:999px;place-items:center;min-width:28px;height:28px;padding:0 8px;font-size:15px;display:inline-grid}.lobby-players{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.lobby-players li{background:var(--surface-2);animation:deal .4s var(--ease) both;border-radius:999px;align-items:center;gap:8px;padding:4px 14px 4px 4px;font-weight:700;display:flex}.lobby-players li.offline{opacity:.4}.lobby-players .tag{background:var(--yellow);color:#000;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800}.lobby-players .rando .tag{background:var(--pink)}.invite-hint{color:var(--muted);margin:14px 0 0;font-size:14px}.invite-hint b{color:#fff}.start-row{flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px;display:flex}.need,.waiting-host{color:var(--muted);margin:0;font-weight:700}.waiting-host{color:#fff}.setting-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.setting{background:var(--surface-2);color:var(--muted);border-radius:16px;flex-direction:column;gap:8px;padding:12px;font-size:13px;font-weight:700;display:flex}.setting select{color:#000;background:#fff;border:0;border-radius:999px;padding:8px 10px;font-size:15px;font-weight:800}.setting select:disabled{color:#fff;opacity:1;background:#2a2a2a}.stepper{color:#fff;justify-content:space-between;align-items:center;display:flex}.stepper b{font-size:22px}.rules{gap:6px;margin:0;padding:0;list-style:none;display:grid}.toggle{cursor:pointer;border-radius:14px;align-items:flex-start;gap:12px;padding:10px 12px;display:flex}.toggle:hover:not(.readonly){background:var(--surface-2)}.toggle.readonly{cursor:default}.toggle input{opacity:0;pointer-events:none;position:absolute}.switch{background:#333;border-radius:999px;flex:none;width:40px;height:24px;margin-top:1px;transition:background .2s;position:relative}.switch:after{content:"";width:18px;height:18px;transition:transform .25s var(--ease);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px}.toggle input:checked+.switch{background:var(--lime)}.toggle input:checked+.switch:after{background:#000;transform:translate(16px)}.toggle input:focus-visible+.switch{outline:3px solid var(--sky);outline-offset:2px}.toggle b{font-size:15px;display:block}.rule-text{color:var(--muted);margin-top:2px;font-size:13px;line-height:1.35;display:block}.how summary{cursor:pointer;font-size:18px;font-weight:800}.how ol{color:#ddd;padding-left:20px;line-height:1.5}.center-msg,.gameover,.splash{text-align:center;flex-direction:column;flex:1;justify-content:safe center;align-items:center;gap:18px;padding:24px;display:flex}.center-msg .card,.final-card{--cw:clamp(170px, 24vw, 240px)}.splash{min-height:100dvh}.splash-title{margin:0;font-size:22px;font-weight:800}.guest-form{text-align:left;flex-direction:column;align-items:stretch;gap:14px;width:min(360px,100%);display:flex}.guest-form label{color:var(--muted);flex-direction:column;gap:6px;font-weight:700;display:flex}.guest-form input{color:#000;background:#fff;border:0;border-radius:999px;padding:14px 18px;font-size:18px;font-weight:700}.gameover{position:relative;overflow:hidden}.champ h1{letter-spacing:-.04em;margin:10px 0 0;font-size:clamp(36px,6vw,72px);font-weight:800}.champ .avatar{box-shadow:0 0 0 4px var(--yellow), 0 0 50px #fadf0e80}.standings{gap:6px;width:min(420px,100%);margin:0;padding:0;list-style:none;display:grid}.standings li{background:var(--surface);border-radius:999px;align-items:center;gap:10px;padding:6px 14px 6px 6px;font-weight:700;display:flex}.standings li:first-child{background:var(--yellow);color:#000}.standings li.me{box-shadow:inset 0 0 0 2px #fff}.standings .rank{text-align:center;width:26px;font-weight:800}.standings .name{text-align:left;flex:1}.standings .score{font-size:18px;font-weight:800}.confetti{pointer-events:none;position:absolute;inset:0}.confetti i{border-radius:2px;width:10px;height:14px;animation:linear infinite fall;position:absolute;top:-20px}@keyframes fall{to{transform:translateY(110vh)rotate(720deg)}}.toasts{z-index:50;pointer-events:none;flex-direction:column;align-items:flex-end;gap:6px;width:min(380px,100% - 32px);display:flex;position:fixed;top:96px;right:16px}.phase-lobby .toasts{top:16px}.toast{background:var(--sky);color:#000;animation:toast-in .35s var(--ease) both;border-radius:18px;padding:9px 16px;font-size:14px;font-weight:700;box-shadow:0 10px 30px #00000080}.toast.join{background:var(--lime)}.toast.leave{background:var(--orange)}.toast.win{background:var(--yellow)}.toast.rule{background:var(--pink)}.toast.error{background:var(--red);color:#fff}@keyframes toast-in{0%{opacity:0;transform:translateY(-12px)scale(.96)}}.conn-banner{z-index:60;background:var(--red);color:#fff;border-radius:999px;padding:10px 18px;font-weight:800;animation:1.4s ease-in-out infinite urgent;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}@media (width<=860px){.lobby{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero""players""settings""how";padding:20px 16px 32px}.hero-cards{display:none}.tagline{margin-top:10px;font-size:16px}.setting-grid{grid-template-columns:minmax(0,1fr)}}@media (width<=560px){.topbar{gap:10px;padding:8px 16px 2px}.brand span,.round{font-size:12px}.brand{font-size:0}.stage{gap:14px;padding:10px 16px}.pile{display:none}.stage-black .card.black{--cw:clamp(150px, min(62vw, 31vh), 250px)}.hand .brand-text,.play .brand-text{display:none}.status{font-size:14px}.dock{padding-top:6px}.menu{left:0;right:auto}.result-banner{padding:8px 10px}.result-banner .btn{padding:8px 14px}.toasts{align-items:center;width:auto;top:8px;left:16px;right:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
