:root{
  --bg:#0b0f14;
  --panel:#131a22;
  --panel-2:#0f141b;
  --text:#e8eef6;
  --muted:#a7b4c6;
  --primary:#5ec2ff;
  --success:#3ecf8e;
  --danger:#ff6b6b;
  --yellow:#ffd166;
  --border:#1f2a36;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
h1,h2,h3{margin:0 0 .5rem}
small.ver{font-size:.65em;color:var(--muted);margin-left:6px}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel)}
.header-right .btn{margin-left:8px}
.tabs{display:flex;gap:8px;margin-left:12px}
.tab{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;border:1px solid transparent}
.tab.active{color:var(--text);border-color:var(--border);background:var(--panel-2)}
.screen{display:none;padding:16px}
.screen.active{display:block}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin:12px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row{margin:12px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input[type=number],input[type=text]{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:8px;border-radius:8px}
.btn{background:#223042;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.primary{background:linear-gradient(180deg,#2a86c5,#1c5a86)}
.btn.success{background:linear-gradient(180deg,#2eab78,#1c6f51)}
.btn.danger{background:linear-gradient(180deg,#b84545,#7a2d2d)}
.btn.large{padding:12px 18px;font-size:18px}
.btn.tall{height:64px;min-width:120px}
.note{color:var(--muted);font-size:14px}
.small{font-size:12px}
.hidden{display:none}
.badge{display:inline-block;padding:2px 6px;border-radius:8px;border:1px solid #fff3;font-size:12px}
.badge.danger{background:#5d2222;color:#ffd2d2;border-color:#ff9b9b}

.top-bar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:12px 0}
.turn-indicator{font-weight:700}
.public-theme,.deck-info{color:var(--muted)}

.table-area{display:grid;grid-template-columns:1fr auto;gap:16px}
.field .card-row{display:flex;gap:8px;flex-wrap:wrap}
.piles{display:flex;gap:16px}
.pile{background:var(--panel);border:1px solid var(--border);padding:12px;border-radius:12px;text-align:center}
.discard{display:flex;flex-direction:column;gap:8px}
.discard-top{min-width:160px}

.players-area{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.player-badge{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.player-badge.active{outline:2px solid var(--primary)}
.player-badge .cards{opacity:.8}

.hand-area{margin-top:12px}
.card-hand{display:flex;gap:8px;flex-wrap:wrap}
.card{width:120px;height:170px;border-radius:14px;border:2px solid #0003;background:#223042;padding:8px;position:relative;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between}
.card .title{font-weight:700;line-height:1.2}
.card .meta{font-size:12px;color:#d6e3f3cc}
.card.selected{outline:3px solid var(--yellow)}
.card.color-Red{background:linear-gradient(135deg,#5a101a,#b0303a)}
.card.color-Blue{background:linear-gradient(135deg,#0f1b4a,#3561c9)}
.card.color-Green{background:linear-gradient(135deg,#0e3a1d,#2f8a3a)}
.card.color-Yellow{background:linear-gradient(135deg,#664f07,#cfa21c)}
.card.color-Purple{background:linear-gradient(135deg,#2b124d,#7a3bb6)}
.card.color-Brown{background:linear-gradient(135deg,#3a2819,#7a5330)}
.card.type-Action{background:linear-gradient(135deg,#2c2c2c,#4b4b4b);border-color:#ffffff22}
.card.fukakachi{box-shadow:0 0 0 3px #fff3 inset}
.card .chip{position:absolute;top:8px;right:8px;background:#0008;color:#fff;padding:3px 6px;border-radius:999px;font-size:11px}
.card .need{position:absolute;left:8px;bottom:8px;background:#0008;color:#fff;padding:3px 6px;border-radius:6px;font-size:12px}
.card .icon{position:absolute;bottom:8px;right:8px;font-size:18px;opacity:.8}
.slot{display:inline-block;margin-right:6px;padding:4px 8px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);font-size:12px}
.slot.ok{background:#1c3b2b;border-color:#2a6b4a;color:#bdf5d7}

.actions-bar{display:flex;gap:8px;align-items:center;margin:12px 0;flex-wrap:wrap}
.hint{color:var(--muted)}

.log{max-height:220px;overflow:auto;background:var(--panel);border:1px solid var(--border);padding:8px;border-radius:10px;font-size:13px}
.log .item{opacity:.9;border-bottom:1px dashed #ffffff1a;padding:4px 0}
.log .item:last-child{border-bottom:none}

.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-content{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;max-width:640px;width:92%}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

.invite{margin-top:8px}
.qr-wrap img{width:240px;height:240px;border-radius:12px;border:1px solid var(--border)}