:root{--felt:#10292c;--felt-2:#163a3e;--felt-3:#1f4a4f;--ink:#15201f;--cream:#fbf4e6;--cream-2:#efe4cf;--coral:#ff6b57;--coral-2:#d94f3d;--butter:#ffd166;--mint:#7ad7b0;--sky:#7cc7ff;--red:#d8322d;--muted:#fbf4e69e;--line:#fbf4e624;--shadow:0 10px 30px #00000059;--display:"Fredoka", "Nunito", sans-serif;--body:"Nunito", system-ui, sans-serif;--radius:18px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:var(--body);color:var(--cream);background:var(--felt);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;background-image:radial-gradient(at 50% -10%,#ffd16629,#0000 55%),radial-gradient(at 50% 110%,#ff6b5724,#0000 55%),repeating-radial-gradient(circle,#0000 0 7px,#ffffff03 7px 8px);background-attachment:fixed}input,button{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}.app{min-height:100%;padding:calc(var(--safe-top) + 10px) 14px calc(var(--safe-bottom) + 14px);flex-direction:column;width:100%;max-width:560px;margin:0 auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:8px;min-height:36px;display:flex}.brand{font-family:var(--display);letter-spacing:.3px;align-items:center;gap:8px;font-size:20px;font-weight:700;display:flex}.brand .mark{background:var(--coral);width:28px;height:28px;color:var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:8px;place-items:center;font-size:15px;display:inline-grid;transform:rotate(-8deg)}.pill{border:1px solid var(--line);white-space:nowrap;background:#fbf4e614;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:13px;font-weight:700;display:inline-flex}.pill.end{background:var(--coral);color:var(--ink);border-color:var(--ink)}.pill.ghost{background:0 0}.pill button{opacity:.6;border-radius:999px;padding:2px 6px;font-weight:800}.pill button.on{opacity:1;background:var(--cream);color:var(--ink)}.btn{font-family:var(--display);letter-spacing:.2px;background:var(--cream);color:var(--ink);box-shadow:0 5px 0 var(--ink), 0 12px 24px #00000047;border-radius:16px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 22px;font-size:18px;font-weight:600;transition:transform 80ms,box-shadow 80ms,opacity .2s;display:inline-flex;position:relative}.btn:active{box-shadow:0 1px 0 var(--ink), 0 4px 10px #00000040;transform:translateY(4px)}.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 5px #15201f99}.btn.coral{background:var(--coral)}.btn.butter{background:var(--butter)}.btn.mint{background:var(--mint)}.btn.ghost{color:var(--cream);border:1px solid var(--line);box-shadow:none;background:#fbf4e614;padding:12px 18px;font-size:16px}.btn.ghost:active{transform:scale(.98)}.btn.sm{width:auto;box-shadow:0 3px 0 var(--ink);border-radius:12px;padding:9px 14px;font-size:15px}.btn.sm:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.btn.inline{width:auto}.row{align-items:center;gap:10px;display:flex}.row.wrap{flex-wrap:wrap}.stack{flex-direction:column;gap:12px;display:flex}.spacer{flex:1}.hero{text-align:center;padding:24px 0 8px}.hero h1{font-family:var(--display);letter-spacing:-.5px;text-shadow:4px 4px #00000059;margin:8px 0 4px;font-size:56px;line-height:1}.hero p{color:var(--muted);margin:0;font-size:16px}.fan{width:200px;height:150px;margin:10px auto 6px;position:relative}.fan .card{transform-origin:50% 110%;position:absolute;bottom:0;left:50%}.panel{border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fbf4e60f;padding:16px}.label{text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:8px;font-size:13px;font-weight:800;display:block}.input{background:var(--cream);width:100%;color:var(--ink);border:0;border-radius:14px;outline:none;padding:14px 16px;font-size:18px;font-weight:700;box-shadow:inset 0 3px #00000014}.input::placeholder{color:#15201f66;font-weight:600}.avatars{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.avatar-pick{aspect-ratio:1;background:#fbf4e614;border:2px solid #0000;border-radius:12px;place-items:center;font-size:24px;transition:transform .12s,background .12s;display:grid}.avatar-pick.on{background:var(--butter);border-color:var(--ink);transform:scale(1.1)rotate(-6deg)}.code-input{justify-content:center;gap:10px;display:flex}.code-input .cell{background:var(--cream);width:56px;height:68px;color:var(--ink);font-family:var(--display);border-radius:14px;place-items:center;font-size:34px;font-weight:700;display:grid;position:relative;box-shadow:inset 0 3px #00000014}.code-input .cell.active:after{content:"";background:var(--coral);border-radius:2px;width:22px;height:3px;animation:1s steps(2,end) infinite blink;position:absolute;bottom:12px}@keyframes blink{to{opacity:0}}.code-input input{opacity:0;pointer-events:none;position:absolute}.keypad{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.keypad button{border:1px solid var(--line);height:54px;font-family:var(--display);background:#fbf4e614;border-radius:14px;font-size:24px;font-weight:600}.keypad button:active{background:#fbf4e633}.bigcode{text-align:center;padding:10px 0 4px}.bigcode .digits{gap:8px;display:inline-flex}.bigcode .d{background:var(--cream);width:58px;height:74px;color:var(--ink);font-family:var(--display);box-shadow:0 5px 0 var(--ink);border-radius:14px;place-items:center;font-size:40px;font-weight:700;display:grid}.bigcode .hint{color:var(--muted);margin-top:10px;font-size:14px}.players{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;display:grid}.player-chip{border:1px solid var(--line);text-align:center;background:#fbf4e614;border-radius:16px;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;display:flex;position:relative}.player-chip .face{font-size:34px;line-height:1}.player-chip .name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:14px;font-weight:800;overflow:hidden}.player-chip .tag{color:var(--muted);font-size:11px;font-weight:700}.player-chip.off{opacity:.5}.player-chip .crown{filter:drop-shadow(0 2px #0006);font-size:20px;position:absolute;top:-10px;right:-6px;transform:rotate(14deg)}.player-chip .dot{background:var(--mint);border-radius:50%;width:8px;height:8px;position:absolute;top:8px;left:8px;box-shadow:0 0 0 3px #7ad7b040}.player-chip.off .dot{background:var(--coral);box-shadow:none}.player-chip .kick{color:var(--muted);padding:4px;font-size:16px;position:absolute;top:4px;right:6px}.add-bot{cursor:pointer;border-style:dashed;border-color:#ffd16680;justify-content:center;min-height:94px}.add-bot:active{background:#ffd16626}.empty-seat{opacity:.5;border-style:dashed;justify-content:center;min-height:94px;font-size:26px}.games{gap:10px;display:grid}.game-card{text-align:left;border:2px solid var(--line);background:#fbf4e614;border-radius:16px;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;padding:12px 14px;transition:transform .12s,border-color .12s,background .12s;display:grid}.game-card.on{background:var(--cream);color:var(--ink);border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}.game-card .icon{background:#0000002e;border-radius:14px;place-items:center;width:56px;height:56px;font-size:30px;display:grid}.game-card.on .icon{background:var(--butter)}.game-card h3{font-family:var(--display);margin:0;font-size:20px}.game-card p{opacity:.75;margin:2px 0 0;font-size:13px}.game-card .range{white-space:nowrap;opacity:.75;font-size:12px;font-weight:800}.segmented{background:#0003;border-radius:14px;gap:6px;padding:4px;display:flex}.segmented button{color:var(--muted);border-radius:10px;flex:1;padding:10px 6px;font-size:14px;font-weight:800}.segmented button.on{background:var(--cream);color:var(--ink)}.waiting{text-align:center;color:var(--muted);padding:18px;font-weight:700}.waiting .dots span{background:var(--butter);border-radius:50%;width:8px;height:8px;margin:0 3px;animation:1.2s ease-in-out infinite bounce;display:inline-block}.waiting .dots span:nth-child(2){animation-delay:.15s}.waiting .dots span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}}.card{--w:64px;width:var(--w);height:calc(var(--w) * 1.4);border-radius:calc(var(--w) * .12);perspective:600px;position:relative}.card .inner{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0}.card.up .inner{transform:rotateY(180deg)}.card .face,.card .back{border-radius:inherit;backface-visibility:hidden;position:absolute;inset:0;box-shadow:0 2px #00000059,0 8px 16px #0000004d}.card .back{background:repeating-linear-gradient(135deg, #ffffff12 0 4px, transparent 4px 10px), linear-gradient(160deg, var(--coral), var(--coral-2));border:calc(var(--w) * .06) solid var(--cream)}.card .back:after{content:"";background:#15201f1f;border:2px solid #fbf4e68c;border-radius:30%;position:absolute;inset:18%}.card .face{background:var(--cream);color:var(--ink);font-family:var(--display);place-items:center;font-weight:700;display:grid;overflow:hidden;transform:rotateY(180deg)}.card .face.red{color:var(--red)}.card .face .corner{font-size:calc(var(--w) * .26);text-align:center;line-height:1;position:absolute;top:6%;left:9%}.card .face .corner.br{inset:auto 9% 6% auto;transform:rotate(180deg)}.card .face .corner small{font-size:calc(var(--w) * .2);display:block}.card .face .big{font-size:calc(var(--w) * .52);line-height:1}.card .face.joker .big{font-size:calc(var(--w) * .5)}.card .face .val{font-size:calc(var(--w) * .17);font-family:var(--body);opacity:.55;font-weight:800;position:absolute;bottom:6%;left:9%}.card.tappable{cursor:pointer}.card.tappable .inner{animation:1.4s ease-in-out infinite wiggle}@keyframes wiggle{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-5px)rotate(-1.5deg)}}.card.up.tappable .inner{animation:none}.card.tappable:before{content:"";border-radius:calc(var(--w) * .12 + 5px);border:3px solid var(--butter);pointer-events:none;animation:1.2s ease-in-out infinite pulse;position:absolute;inset:-5px;box-shadow:0 0 18px #ffd16680}.card.picked:before{content:"";border-radius:calc(var(--w) * .12 + 5px);border:3px solid var(--mint);pointer-events:none;position:absolute;inset:-5px}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.card .known{background:var(--sky);border:2px solid var(--felt);z-index:2;border-radius:50%;width:14px;height:14px;position:absolute;top:-4px;right:-4px}.card .ring{pointer-events:none;z-index:3;border-radius:50%;position:absolute;inset:-8px}.card .eye{z-index:3;filter:drop-shadow(0 2px #0006);font-size:18px;position:absolute;top:-10px;left:50%;transform:translate(-50%)}.card.empty{border:2px dashed var(--line)}.card.empty.slot{opacity:.45}.hand .card.empty.slot{--w:78px}.table{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex}.status{text-align:center;font-family:var(--display);min-height:28px;padding:4px 8px;font-size:18px;font-weight:600}.status.mine{color:var(--butter)}.status small{font-family:var(--body);color:var(--muted);font-size:13px;font-weight:600;display:block}.feed{height:78px;color:var(--muted);flex-direction:column;gap:3px;padding:0 6px;font-size:13px;font-weight:700;display:flex;overflow:hidden}.feed .line{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;height:17px;line-height:1.25;display:flex;overflow:hidden}.feed .line span:last-child{text-overflow:ellipsis;overflow:hidden}.feed .line.new{color:var(--cream)}.feed .av{flex:none;font-size:14px}.opponents{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.opp{background:#0000002e;border:2px solid #0000;border-radius:14px;flex-direction:column;align-items:center;gap:6px;min-width:92px;padding:8px 8px 10px;transition:border-color .2s,background .2s;display:flex;position:relative}.opp.turn{border-color:var(--butter);background:#ffd1661f}.opp.off{opacity:.55}.opp .who{align-items:center;gap:5px;max-width:120px;font-size:12px;font-weight:800;display:flex}.opp .who .face{font-size:18px}.opp .who .nm{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.opp .grid{grid-template-columns:repeat(2,auto);gap:4px;display:grid}.opp .grid.wide{grid-template-columns:repeat(3,auto)}.opp .total{color:var(--muted);font-size:11px;font-weight:800}.opp .badge{background:var(--coral);color:var(--ink);font-family:var(--display);box-shadow:2px 2px 0 var(--ink);border-radius:999px;padding:2px 7px;font-size:11px;font-weight:700;position:absolute;top:-9px;right:-6px;transform:rotate(8deg)}.center{justify-content:center;align-items:flex-end;gap:22px;min-height:130px;padding:10px 0 6px;display:flex;position:relative}.pile{flex-direction:column;align-items:center;gap:6px;display:flex;position:relative}.pile .lbl{text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-size:11px;font-weight:800}.pile .stack-shadow{border-radius:8px;position:absolute;inset:0;box-shadow:2px 2px #0000004d,4px 4px #0003}.held .card{--w:64px}.hand{justify-content:center;padding:10px 0 4px;display:flex}.hand .grid{grid-template-columns:repeat(2,auto);gap:10px;display:grid}.hand .grid.wide{grid-template-columns:repeat(3,auto)}.hand .card{--w:78px}.me-strip{color:var(--muted);justify-content:center;align-items:center;gap:8px;font-size:13px;font-weight:800;display:flex}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:52px;display:flex}.match-btn{background:var(--butter);color:var(--ink);font-family:var(--display);box-shadow:0 5px 0 var(--ink), 0 10px 24px #00000059;border-radius:999px;padding:13px 20px;font-size:17px;font-weight:700}.match-btn.on{background:var(--mint)}.match-btn:active{box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:50;background:#0a1618b8;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.sheet{background:var(--felt-2);border:1px solid var(--line);width:100%;max-width:480px;max-height:calc(100vh - 40px);box-shadow:var(--shadow);border-radius:22px;padding:20px;overflow:auto}.sheet h2{font-family:var(--display);text-align:center;margin:0 0 6px;font-size:28px}.sheet .sub{text-align:center;color:var(--muted);margin:0 0 14px;font-weight:700}.score-row{background:#0000002e;border-radius:14px;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:10px 12px;display:grid}.score-row.win{background:var(--butter);color:var(--ink)}.score-row .face{font-size:26px}.score-row .nm{font-weight:800}.score-row .nm small{opacity:.7;font-size:11px;font-weight:700;display:block}.score-row .nums{text-align:right;font-family:var(--display);font-size:22px;font-weight:700;line-height:1}.score-row .nums small{font-family:var(--body);opacity:.7;margin-top:2px;font-size:11px;font-weight:700;display:block}.reveal-hands{flex-direction:column;gap:10px;display:flex}.reveal-hands .rh{align-items:center;gap:10px;display:flex}.reveal-hands .rh .who{text-overflow:ellipsis;white-space:nowrap;width:72px;font-size:12px;font-weight:800;overflow:hidden}.reveal-hands .rh .cards{flex-wrap:wrap;gap:4px;display:flex}.reveal-hands .card{--w:38px}.rules p{margin:0 0 10px;font-size:15px;line-height:1.45}.toasts{top:calc(var(--safe-top) + 12px);z-index:100;pointer-events:none;flex-direction:column;gap:8px;width:min(92vw,420px);display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{background:var(--cream);color:var(--ink);text-align:center;box-shadow:0 4px 0 var(--ink), 0 12px 24px #0000004d;border-radius:14px;padding:12px 16px;font-size:15px;font-weight:800}.toast.error{background:var(--coral)}.confetti{pointer-events:none;z-index:60;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:2px;width:10px;height:14px;animation:linear forwards fall;position:absolute;top:-12px}@keyframes fall{to{transform:translateY(110vh)rotate(720deg)}}.war-table{flex:1;grid-template-rows:auto 1fr auto;gap:10px;display:grid}.war-side{background:#0000002e;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.war-side .who{align-items:center;gap:8px;font-weight:800;display:flex}.war-side .who .face{font-size:26px}.war-side .count{font-family:var(--display);font-size:22px;font-weight:700}.war-side .count small{font-family:var(--body);color:var(--muted);margin-left:4px;font-size:11px;font-weight:700}.war-field{grid-template-columns:1fr 1fr;place-items:center;gap:10px;min-height:200px;display:grid;position:relative}.war-field .card{--w:104px}.war-field .slot{flex-direction:column;align-items:center;gap:8px;display:flex}.war-field .fd{gap:3px;display:flex}.war-field .fd .card{--w:26px}.war-vs{font-family:var(--display);color:var(--muted);font-size:22px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.war-banner{background:var(--coral);color:var(--ink);font-family:var(--display);box-shadow:3px 3px 0 var(--ink);z-index:3;border-radius:12px;padding:6px 18px;font-size:26px;font-weight:700;position:absolute;top:18px;left:50%}.link{color:var(--butter);text-underline-offset:3px;font-weight:800;text-decoration:underline}.center-note{text-align:center;color:var(--muted);font-size:14px;font-weight:700}@media (width>=480px){.hand .card{--w:92px}.card{--w:70px}}@media (height<=700px){.hand .card{--w:68px}.hero h1{font-size:44px}.fan{height:120px}}