:root{--bg: #0f1720;--panel: #16212e;--panel-2: #1d2b3a;--text: #e8eef5;--muted: #93a4b7;--accent: #3fa66b;--accent-2: #2c7f51;--danger: #d9534f;--warn: #e0a800;--border: #2a3b4d;--radius: 12px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:linear-gradient(180deg,#0d141c,#101c26 60%,#0d141c);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}.view{max-width:1000px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}h1{font-size:2rem;margin:0 0 4px;letter-spacing:.5px}h2{font-size:1.4rem;margin:0 0 12px}h3{font-size:1.05rem;margin:20px 0 6px;color:var(--accent)}.hero{text-align:center;padding:24px 0 12px}.hero p{color:var(--muted);margin:0}.stack{display:flex;flex-direction:column;gap:10px;margin-top:16px}button{font:inherit;border-radius:var(--radius);border:1px solid var(--border);padding:10px 14px;cursor:pointer;background:var(--panel-2);color:var(--text);transition:filter .15s ease,transform .05s ease;min-height:44px}button:hover:not(:disabled){filter:brightness(1.15)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent-2);color:#06120b;font-weight:600}button.secondary{background:var(--panel-2)}button.big{padding:14px 18px;font-size:1.05rem}button.link{background:none;border:none;color:var(--muted);text-decoration:underline;min-height:36px}button.link.danger{color:var(--danger)}button.pulse{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.4)}}@media (prefers-reduced-motion: reduce){button.pulse{animation:none}}label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.9rem}input[type=text],input:not([type]){font:inherit;padding:12px;border-radius:var(--radius);border:1px solid var(--border);background:#0c141c;color:var(--text);min-height:44px}input.code-input{letter-spacing:4px;text-transform:uppercase;font-size:1.3rem;text-align:center}.card-panel,.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}fieldset.panel{margin:16px 0}legend{color:var(--accent);padding:0 6px}.radio{flex-direction:row;align-items:flex-start;gap:10px;color:var(--text);margin:8px 0}.radio input{margin-top:4px;width:20px;height:20px}.error{color:#ffb3b0;background:#d9534f26;border:1px solid var(--danger);border-radius:var(--radius);padding:10px;margin:8px 0}.warn{color:#ffe08a;background:#e0a8001f;border:1px solid var(--warn);border-radius:var(--radius);padding:10px}.hint{color:var(--muted);font-size:.9rem}.hint-box{background:var(--panel-2);border-left:3px solid var(--warn);padding:10px;border-radius:8px}.special{color:var(--accent);font-size:.92rem}.muted{color:var(--muted);font-size:.9rem}.code-box{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;flex-wrap:wrap}.code-box .label{color:var(--muted);font-size:.85rem}.code-box .code{font-size:1.8rem;letter-spacing:6px;font-family:ui-monospace,monospace}ul.players{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:8px}ul.players li{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;flex-wrap:wrap}ul.players li.me{border-color:var(--accent-2)}ul.players li.free{color:var(--muted);font-style:italic;justify-content:center}ul.players .name{flex:1;min-width:120px}ul.players .mode{color:var(--muted);font-size:.85rem}.ready.yes{color:var(--accent)}.ready.no{color:var(--muted)}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}.dot.on{background:var(--accent)}.dot.off{background:var(--danger)}.card{width:62px;height:88px;border-radius:8px;background:#f6f7f9;color:#101820;border:1px solid #c9d1da;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;min-height:0;font-weight:700}.card.small{width:46px;height:66px}.card .rank{font-size:1.25rem;line-height:1}.card.small .rank{font-size:1rem}.card .suit{font-size:1.2rem;line-height:1}.card.small .suit{font-size:.95rem}.card.red{color:#c02a2a}.card.black{color:#101820}.card.selected{outline:3px solid var(--accent);transform:translateY(-8px)}.card.disabled{opacity:.42}.card.back{background:repeating-linear-gradient(45deg,#24507a,#24507a 6px,#1b3d5e 6px,#1b3d5e 12px);color:#cfe0f2;border-color:#16344f}.card.empty{background:transparent;border:1px dashed var(--border);color:var(--muted);font-weight:400;font-size:.8rem}.row{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;min-height:70px}.hand-row{min-height:92px;padding-top:8px}.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:12px}.topbar .room{font-family:ui-monospace,monospace;letter-spacing:2px}.conn{font-size:.85rem;flex:1}.conn.on{color:var(--accent)}.conn.off{color:var(--warn)}.opponents{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.opponent{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px}.opponent.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-2) inset}.opponent.done{opacity:.6}.opponent .head{display:flex;align-items:center;gap:8px}.opponent .counts{display:flex;gap:12px;color:var(--muted);font-size:.85rem;margin:4px 0}.badge{background:var(--accent-2);color:#06120b;border-radius:999px;padding:1px 8px;font-size:.75rem}.small-row{min-height:0}.center{display:flex;flex-direction:column;gap:10px;margin:14px 0}.pile-area{display:flex;gap:18px;justify-content:center;align-items:flex-start;flex-wrap:wrap}.stack-col{display:flex;flex-direction:column;align-items:center;gap:4px}.stack-col .label,.stack-col .count{color:var(--muted);font-size:.8rem}.pile{position:relative;display:flex}.pile-card{margin-left:-46px}.pile-card:first-child{margin-left:0}.status{text-align:center}.status .turn{font-weight:600;margin:4px 0}.status .effective{color:var(--muted);margin:2px 0;font-size:.9rem}.status .event{color:var(--accent);font-size:.9rem;margin:2px 0}.me{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px}.my-table{display:flex;gap:20px;flex-wrap:wrap}.group .label,.hand .label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:4px}.hand{margin-top:10px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.actions button{flex:1 1 160px}ol.ranking{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}ol.ranking li{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px}ol.ranking li.me{border-color:var(--accent)}ol.ranking .place{font-size:1.5rem;font-weight:700;width:34px;text-align:center;color:var(--accent)}ol.ranking .name{flex:1}ol.ranking .tag{color:var(--muted);font-size:.9rem}.rules ul{padding-left:20px}.specials dt{color:var(--accent);font-weight:700;margin-top:10px}.specials dd{margin:2px 0 0;color:var(--text)}@media (max-width: 480px){.card{width:52px;height:74px}.card.small{width:40px;height:58px}.pile-card{margin-left:-38px}.actions button{flex:1 1 100%}h1{font-size:1.6rem}}