:root{--felt:#15513a;--felt-deep:#0d3626;--felt-light:#1d6b4c;--cream:#f8f3e6;--paper:#fffdf7;--ink:#1c2420;--muted:#5d6b63;--line:#e2dccb;--red:#b3261e;--gold:#e3b341;--gold-deep:#a87b10;--accent:#e8743b;--cw:58px;--ch:82px;--cw-sm:36px;--ch-sm:51px;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--ink);background:var(--felt-deep);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:DM Sans,system-ui,sans-serif}body:before{content:"";z-index:-1;background:radial-gradient(ellipse at 50% 0%, var(--felt-light), var(--felt) 45%, var(--felt-deep));position:fixed;inset:0}h1,h2,h3{letter-spacing:-.01em;margin:0;font-family:Fraunces,Georgia,serif}button{font:inherit;cursor:pointer}button:disabled{cursor:default}input,select{font:inherit;color:var(--ink)}code,.code{letter-spacing:.08em;font-family:ui-monospace,SF Mono,Menlo,monospace}.primary,.secondary,a.button{border:2px solid #0000;border-radius:999px;justify-content:center;align-items:center;padding:10px 18px;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s,opacity .12s;display:inline-flex}.primary{background:var(--accent);color:#fff;box-shadow:0 3px #b85520}.primary:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px #b85520}.secondary,a.button{background:var(--paper);color:var(--felt-deep);border-color:var(--felt)}.primary:disabled,.secondary:disabled{opacity:.4;box-shadow:none}.big{width:100%;padding:14px 26px;font-size:1.1rem}.small{padding:6px 12px;font-size:.9rem}.link{color:inherit;text-underline-offset:3px;opacity:.85;background:0 0;border:0;padding:6px 4px;text-decoration:underline}.error{color:var(--red);margin:10px 0 0;font-weight:600}.hint{color:var(--muted);font-size:.9rem;line-height:1.45}.center{text-align:center}.home,.lobby{max-width:640px;margin:0 auto;padding:28px 16px 60px}.brand{text-align:center;color:var(--cream);margin:12px 0 26px}.brand h1{font-size:clamp(3rem,12vw,4.6rem);font-weight:800;line-height:1}.brand p{opacity:.85;max-width:420px;margin:12px auto 0;line-height:1.45}.brand-cards{justify-content:center;margin-bottom:14px;display:flex}.brand-cards .mini{background:var(--paper);width:44px;height:62px;color:var(--ink);border-radius:7px;place-items:center;margin:0 -6px;font-size:1.05rem;font-weight:700;display:grid;box-shadow:0 4px 12px #0000004d}.brand-cards .mini:nth-child(2){z-index:1;position:relative}.brand-cards .mini:first-child{transform:rotate(-12deg)translateY(4px)}.brand-cards .mini:nth-child(3){transform:rotate(12deg)translateY(4px)}.brand-cards .red{color:var(--red)}.brand-cards .joker{color:#6b3fa0;font-size:1.4rem}.panel{background:var(--cream);border-radius:18px;margin-bottom:16px;padding:20px;box-shadow:0 10px 30px #00000040}.panel h2{margin-bottom:12px;font-size:1.3rem}.panel p{line-height:1.5}.panel.slim{padding:16px 20px}.field{flex-direction:column;gap:8px;margin-bottom:18px;display:flex}.field>span{font-size:.95rem;font-weight:700}.field input{border:2px solid var(--line);background:var(--paper);border-radius:12px;width:100%;padding:12px 14px;font-size:1.05rem}.field input:focus{border-color:var(--felt);outline:none}.mode-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.mode{border:2px solid var(--line);background:var(--paper);text-align:left;color:var(--ink);border-radius:14px;flex-direction:column;gap:4px;padding:14px 10px;display:flex}.mode strong{font-size:1.05rem}.mode small{color:var(--muted);line-height:1.3}.mode.active{border-color:var(--felt);box-shadow:inset 0 0 0 1px var(--felt);background:#e6f0e9}.segmented{background:#ebe4d1;border-radius:999px;flex-wrap:wrap;gap:4px;padding:4px;display:inline-flex}.segmented button{color:var(--muted);background:0 0;border:0;border-radius:999px;padding:8px 14px;font-weight:600}.segmented button.active{background:var(--paper);color:var(--felt-deep);box-shadow:0 1px 3px #00000026}.join{align-items:flex-end;gap:10px;display:flex}.join .field{flex:1;margin-bottom:0}.join .secondary{padding:12px 18px}.recent{flex-direction:column;align-items:flex-start;gap:2px;margin-top:14px;display:flex}.recent>span{margin-bottom:4px;font-size:.9rem;font-weight:700}.recent code{opacity:.7;font-size:.85em}.lobby-head{color:var(--cream);align-items:center;gap:12px;margin-bottom:18px;display:flex}.lobby-head h1{flex:1;font-size:1.5rem}.lobby-head .code{background:#00000040;border-radius:8px;padding:6px 10px}.share{flex-wrap:wrap;gap:8px;display:flex}.share input{border:2px solid var(--line);background:var(--paper);border-radius:12px;flex:100%;padding:10px 12px;font-size:.95rem}.seats,.team{flex-direction:column;gap:8px;display:flex}.teams{grid-template-columns:1fr 1fr;gap:14px;display:grid}.team h3{font-size:1rem}.seat{border:2px dashed var(--line);border-radius:12px;justify-content:space-between;align-items:center;gap:10px;min-height:52px;padding:10px 12px;display:flex}.seat.taken{background:var(--paper);border-style:solid}.seat.mine{border-color:var(--felt)}.seat-no{color:var(--muted);white-space:nowrap;font-size:.85rem}.away{color:var(--muted);font-weight:400}.rules-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.rules-head h2{margin:0}.rule-list{margin:8px 0;padding-left:18px;line-height:1.6}.rule-details{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 16px;margin-top:10px;display:grid}.rule-details label{flex-direction:column;gap:4px;font-size:.88rem;font-weight:600;display:flex}.rule-details label.check{flex-direction:row;align-items:center;gap:8px}.rule-details input[type=number],.rule-details select{border:1.5px solid var(--line);background:var(--paper);border-radius:8px;padding:6px 8px}.start-row{margin-top:8px}.start-row .hint{color:var(--cream);font-size:1rem}.start-row .error{color:#ffd2cc;text-align:center}.loading,.offline{color:var(--cream);text-align:center;padding:40px 16px}.offline{background:var(--red);z-index:50;padding:8px;font-weight:600;position:fixed;top:0;left:0;right:0}.card{width:var(--cw);height:var(--ch);background:var(--paper);color:var(--ink);-webkit-user-select:none;user-select:none;border:1px solid #d4ccb6;border-radius:8px;flex:none;padding:0;font-family:DM Sans,system-ui,sans-serif;font-weight:700;transition:transform .12s,box-shadow .12s;position:relative;box-shadow:0 2px 4px #00000040}.card.red{color:var(--red)}.card.joker{color:#6b3fa0;background:linear-gradient(160deg,#fffdf7 60%,#efe6fb)}.card .corner{text-align:center;font-size:.95rem;line-height:1;position:absolute;top:4px;left:5px}.card .pip{font-size:1.7rem;line-height:1;position:absolute;bottom:4px;right:6px}.card .joker-word{letter-spacing:.12em;text-align:center;font-size:.55rem;display:none;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)rotate(-90deg)}.card.sm{width:var(--cw-sm);height:var(--ch-sm);border-radius:6px}.card.sm .corner{font-size:.78rem;top:3px;left:4px}.card.sm .pip{font-size:1.05rem;bottom:2px;right:3px}.card .note{color:#fff;white-space:nowrap;z-index:10;background:#6b3fa0;border-radius:6px;padding:1px 4px;font-size:.62rem;position:absolute;bottom:-9px;left:50%;transform:translate(-50%)}.card.clickable{cursor:pointer}.card.selected{box-shadow:0 0 0 3px var(--gold), 0 8px 14px #00000059;transform:translateY(-14px)}.card.fresh:after{content:"neu";background:var(--accent);color:#fff;border-radius:6px;padding:1px 5px;font-size:.6rem;position:absolute;top:-8px;right:-4px}.card.back{border:3px solid var(--paper);background:repeating-linear-gradient(45deg,#8c2b23 0 6px,#a3372d 6px 12px);place-items:center;display:grid}.card.back .count{background:var(--paper);color:var(--ink);text-align:center;border-radius:999px;min-width:28px;padding:2px 6px;font-size:.85rem}.card.empty{color:#fff9;box-shadow:none;background:0 0;border:2px dashed #ffffff59;place-items:center;font-size:.8rem;font-weight:500;display:grid}.table{max-width:1100px;color:var(--cream);margin:0 auto;padding:0 12px 300px}.topbar{border-bottom:1px solid #ffffff1f;align-items:center;gap:10px;padding:10px 0;display:flex}.topbar .title{flex-direction:column;line-height:1.2;display:flex}.topbar .title strong{font-family:Fraunces,serif;font-size:1.25rem}.topbar .title span{opacity:.75;font-size:.8rem}.scores{flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-left:auto;display:flex}.scores span{background:#00000038;border-radius:999px;padding:4px 10px;font-size:.85rem}.scores span.mine{box-shadow:inset 0 0 0 1px var(--gold);background:#e3b34140}.spectator-note{text-align:center;background:#00000040;border-radius:999px;margin:10px 0 0;padding:6px 14px;font-size:.9rem}.opponents{flex-wrap:wrap;justify-content:center;gap:12px;padding:12px 0 4px;display:flex}.opponent{background:#0000002e;border:2px solid #0000;border-radius:14px;align-items:center;gap:10px;padding:8px 12px;display:flex}.opponent.active{border-color:var(--gold);box-shadow:0 0 18px #e3b34159}.who{flex-direction:column;gap:3px;display:flex}.tag{vertical-align:middle;background:#ffffff29;border-radius:999px;margin-left:6px;padding:1px 8px;font-family:DM Sans,sans-serif;font-size:.7rem;font-weight:700;display:inline-block}.who .tag{align-self:flex-start;margin-left:0}.tag.off{background:#b3261e99}.middle{justify-content:center;align-items:flex-end;gap:22px;padding:14px 0;display:flex}.pile{color:var(--cream);white-space:nowrap;background:0 0;border:0;border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:6px;font-size:.85rem;display:flex}.pile.ready{box-shadow:0 0 0 2px var(--gold);background:#e3b34129;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 4px #e3b34180}}.discard-fan{min-height:var(--ch);align-items:flex-end;display:flex}.fan-slot+.fan-slot{margin-left:-22px}.pots{gap:10px;display:flex}.pot{opacity:.9;text-align:center;flex-direction:column;align-items:center;gap:4px;max-width:76px;font-size:.72rem;display:flex}.pot.taken{opacity:.55}.board{flex-direction:column;gap:12px;display:flex}.side{border-radius:var(--radius);background:#00000024;padding:10px 12px 14px}.side.mine{background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff24}.side h3{margin-bottom:8px;font-size:1rem}.melds{flex-wrap:wrap;gap:14px 16px;display:flex}.meld{color:inherit;background:0 0;border:2px solid #0000;border-radius:10px;padding:4px 4px 10px;position:relative}.meld.target{border-color:var(--gold);cursor:pointer;background:#e3b3411f}.meld-cards{display:flex}.meld-cards .card+.card{margin-left:-18px}.meld .ribbon{z-index:5;color:var(--ink);white-space:nowrap;background:#c9ced3;border-radius:999px;padding:1px 8px;font-size:.66rem;font-weight:700;position:absolute;top:-10px;left:6px}.meld.canasta.clean .ribbon{background:var(--gold)}.meld.canasta .meld-cards .card{border-color:var(--gold-deep)}.empty-note{opacity:.6;margin:2px 0;font-size:.9rem}.log{opacity:.85;margin:14px 0 0;font-size:.85rem}.log p{margin:2px 0}.dock{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:10px 12px calc(12px + env(safe-area-inset-bottom));z-index:20;color:var(--cream);background:linear-gradient(#082419d9,#082419fa 30%);border-top:1px solid #ffffff1f;position:fixed;bottom:0;left:0;right:0}.dock.my-turn{border-top:2px solid var(--gold)}.dock>*{max-width:1100px;margin-left:auto;margin-right:auto}.instruction{min-height:1.3em;margin-bottom:8px;font-weight:600}.dock.my-turn .instruction{color:var(--gold)}.actions{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.actions .spacer{flex:1}.hand{flex-wrap:wrap;gap:6px 4px;max-height:46vh;padding-top:14px;display:flex;overflow-y:auto}.toast{background:var(--paper);color:var(--ink);border-left:5px solid var(--red);z-index:60;border-radius:12px;max-width:min(92vw,440px);padding:12px 16px;font-weight:600;position:fixed;bottom:50%;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #00000059}.floating{z-index:30;position:fixed;top:70px;right:16px}.overlay{z-index:40;background:#05140eb3;place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow-y:auto}.modal{background:var(--cream);color:var(--ink);border-radius:20px;width:min(100%,560px);padding:22px;box-shadow:0 20px 50px #0006}.modal h2{font-size:1.6rem}.modal h3{margin:18px 0 8px;font-size:1.05rem}.modal .sub{color:var(--muted);margin:6px 0 14px}.score-table-wrap{overflow-x:auto}.score-table{border-collapse:collapse;width:100%;font-size:.92rem}.score-table th,.score-table td{text-align:right;border-bottom:1px solid var(--line);padding:7px 8px}.score-table th:first-child,.score-table td:first-child{text-align:left}.score-table .neg{color:var(--red)}.score-table .sum td{border-bottom:0;font-size:1rem;font-weight:800}.half{color:var(--muted);font-size:.75rem;font-weight:500;display:block}.totals{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}.totals div{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;flex-direction:column;padding:10px 12px;display:flex}.totals div.lead{border-color:var(--gold);background:#fbf2d5}.totals span{color:var(--muted);font-size:.85rem}.totals b{font-size:1.4rem}.history{margin-top:14px}.history summary{cursor:pointer;margin-bottom:8px;font-weight:700}.revealed{align-items:center;gap:10px;margin:8px 0;display:flex}.revealed>span{min-width:70px;font-weight:600}.modal-actions{align-items:center;gap:12px;margin-top:20px;display:flex}.modal-actions .big{flex:1}@media (width<=600px){:root{--cw:44px;--ch:64px;--cw-sm:30px;--ch-sm:43px}.mode-grid,.teams{grid-template-columns:1fr}.card .corner{font-size:.8rem}.card .pip{font-size:1.25rem}.card.sm .corner{font-size:.68rem}.card.sm .pip{font-size:.85rem}.meld-cards .card+.card{margin-left:-15px}.fan-slot+.fan-slot{margin-left:-20px}.middle{gap:10px}.scores span{padding:3px 8px;font-size:.75rem}.topbar .title span{font-size:.72rem}.table{padding-bottom:340px}.actions .primary,.actions .secondary{padding:8px 14px}.instruction{font-size:.92rem}}