@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Franklin:wght@600;700;800&display=swap');
:root{--bg:#0d192a;--panel:#16263a;--ink:#f9f3e7;--muted:#b1c0d0;--line:#35495e;--felt:#1b3e50;--accent:#ead19a;--red:#ba3142;--card:#fff8e9;--card-ink:#182c41;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:clamp(1.5rem,3vw,2.25rem);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px}
[data-theme=light]{--bg:#f4f0e7;--panel:#fffaf2;--ink:#17283d;--muted:#485d71;--line:#b9c2ca;--felt:#dbe7e7;--accent:#705016}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:var(--text-base)/1.5 'DM Sans',sans-serif}button,select,textarea{font:inherit}button,select{min-height:44px;padding:var(--s2) var(--s4);border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}button{cursor:pointer;font-size:var(--text-sm);font-weight:700}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){border-color:var(--accent)}button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}[hidden]{display:none!important}header{max-width:1100px;margin:auto;padding:var(--s4) var(--s6);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:var(--s3)}header>div{display:flex;align-items:center;gap:var(--s4)}.brand{display:flex;align-items:center;gap:var(--s2);font-family:'Libre Franklin',sans-serif;font-weight:800;text-decoration:none;font-size:var(--text-sm);color:var(--ink)}.brand svg{color:var(--red)}.preview,.eyebrow{font-size:var(--text-xs);letter-spacing:.12em;color:var(--accent)}main{max-width:960px;padding:var(--s8) var(--s6);margin:auto}h1,h2,h3{font-family:'Libre Franklin',sans-serif;margin:0}h1{font-size:var(--text-xl);letter-spacing:-.04em}h2{font-size:var(--text-lg)}h3{font-size:var(--text-base)}p{margin:var(--s2) 0 var(--s4)}.intro{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}.intro>div>p:last-child{color:var(--muted)}.notice{font-size:var(--text-sm);color:var(--muted);border-left:3px solid var(--accent);padding:var(--s2) var(--s4);margin:var(--s4) 0 var(--s6)}.panel,#rules{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:var(--s5);margin:var(--s5) 0}#rules li{margin:var(--s2) 0}#rules a,a{color:var(--accent)}.setup-fields{display:flex;gap:var(--s5);margin:var(--s5) 0;flex-wrap:wrap}label{display:grid;gap:var(--s2);font-size:var(--text-sm)}select{max-width:100%;width:100%}.roundbar{display:flex;justify-content:space-between;gap:var(--s4);font-size:var(--text-sm);color:var(--muted);margin:var(--s5) 0 var(--s3)}#scoreboard{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:var(--s2);margin-bottom:var(--s5)}.seat{background:var(--panel);padding:var(--s3);border:1px solid var(--line);border-radius:6px;min-width:0}.seat.active{border-color:var(--accent)}.seat.out{opacity:.55}.seat strong,.seat small{display:block}.seat strong{font-size:var(--text-sm)}.seat b{font-size:var(--text-lg);font-variant-numeric:tabular-nums}.seat small{font-size:var(--text-xs);color:var(--muted)}.felt{background:var(--felt);border:5px solid var(--line);border-radius:60px;text-align:center;padding:var(--s6);min-height:220px;display:flex;flex-direction:column;justify-content:center}#table-detail{color:var(--muted);font-size:var(--text-sm);margin:var(--s2) 0}.cards{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap}.card{background:var(--card);color:var(--card-ink);border:2px solid transparent;width:58px;height:80px;min-height:0;border-radius:6px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:var(--s1) var(--s2);font-size:var(--text-lg);box-shadow:0 3px 0 #0003;line-height:1.1}.card span:last-child{align-self:flex-end}.card.red{color:#ad2739}.card[aria-pressed=true]{border-color:#b98b25;transform:translateY(-8px);box-shadow:0 0 0 2px #b98b25}.card:disabled{opacity:.42}.played-label{font-size:var(--text-xs);color:var(--muted);margin-top:var(--s1)}.your-row{display:flex;justify-content:space-between;align-items:center;margin:var(--s6) 0 var(--s4);font-size:var(--text-sm)}.hand .card{width:66px;height:90px}#hint{text-align:center;font-size:var(--text-sm);color:var(--muted);min-height:24px;margin-top:var(--s4)}#actions{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;min-height:48px}.tools{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0}.tools button{font-weight:500}.recovery{font-size:var(--text-sm)}summary{cursor:pointer;min-height:32px;font-weight:700}textarea{width:100%;resize:vertical;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:var(--s3);font-size:var(--text-xs);margin-top:var(--s2)}#events{padding-left:var(--s5);font-size:var(--text-sm);color:var(--muted)}#events li{margin:var(--s2) 0}#error{border:1px solid var(--red);padding:var(--s4);border-radius:6px}footer{font-size:var(--text-xs);color:var(--muted);text-align:center;margin-top:var(--s6)}#debug{white-space:nowrap}
@media(max-width:600px){header{padding:var(--s3) var(--s4)}.preview{display:none}main{padding:var(--s5) var(--s4)}.brand{font-size:var(--text-xs)}#scoreboard{grid-template-columns:repeat(3,1fr)}.seat{padding:var(--s2)}.felt{border-radius:28px;padding:var(--s4);min-height:210px}.hand{gap:var(--s1)}.hand .card{width:calc((100vw - 56px)/5);max-width:64px;height:82px}.roundbar{font-size:var(--text-xs)}.setup-fields{display:grid;gap:var(--s3)}.intro{align-items:flex-start}.intro button{padding:var(--s2);max-width:110px}.card{width:46px;height:66px}#actions button{flex:1;min-width:120px}}
.hand .card:disabled{opacity:1}.hand .card.illegal:disabled{opacity:.42}
.playing main{padding-top:var(--s4)}.playing .intro .eyebrow,.playing .intro>div>p:last-child,.playing .notice{display:none}.playing .roundbar{margin:var(--s3) 0}.playing .felt{min-height:150px;padding:var(--s4)}.playing .your-row{margin:var(--s4) 0 var(--s3)}.playing #scoreboard{margin-bottom:var(--s3)}.playing #hint{margin:var(--s3) 0;min-height:20px}
@media(max-width:600px){#scoreboard{grid-template-columns:repeat(var(--mobile-n,2),1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}