:root {
  color-scheme:dark;
  --bg:#101725;
  --panel:#192337;
  --card:#22304a;
  --gold:#f5c75a;
  --text:#edf2fc;
  --dim:#a3b0c6;
  --line:#33435e;
  --atk:#ffa0a0;
  --def:#8bccff;
  --thorns:#cfb5ff;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:radial-gradient(ellipse at top left,#1c2d46 0,transparent 55%),var(--bg);
  color:var(--text);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  min-height:100vh;
}
button,input,select {
  font:inherit;
}
button {
  cursor:pointer;
}
button:disabled {
  opacity:.45;
  cursor:not-allowed;
}
button,input,select,summary {
  outline-offset:4px;
}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--gold);
}
button {
  transition:background .15s,border-color .15s;
}
h1,h2,p {
  margin-top:0;
}
h2 {
  font-size:1.05rem;
  margin-bottom:14px;
}
p {
  line-height:1.6;
}
small {
  color:var(--dim);
}
.hidden {
  display:none!important;
}
.dim {
  color:var(--dim);
}
.gold {
  color:var(--gold);
}
.screen {
  max-width:1240px;
  margin:auto;
  padding:24px;
}
.panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
}
.connection-bar {
  display:flex;
  gap:12px;
  align-items:center;
  max-width:1240px;
  margin:auto;
  padding:16px 24px;
  color:var(--dim);
  font-size:.8rem;
}
.brand {
  letter-spacing:2px;
  font-weight:700;
  margin-right:auto;
}
.connection-bar .offline {
  color:var(--atk);
}
.text-button {
  background:none;
  border:0;
  color:var(--gold);
  padding:8px;
}
.notice {
  position:fixed;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  background:#3d2933;
  border:1px solid #dc8996;
  border-radius:10px;
  padding:12px 18px;
  width:max-content;
  max-width:calc(100vw - 24px);
  box-shadow:0 8px 30px #0008;
}
.eyebrow {
  font-size:.85rem;
  color:var(--gold);
  letter-spacing:2px;
}
.title-wrap {
  padding:24px 0;
}
.title-wrap h1 {
  font-size:clamp(1.8rem,4vw,3rem);
  margin:12px 0;
}
.subtitle {
  color:var(--dim);
  margin-bottom:12px;
}
.lobby-layout {
  display:grid;
  grid-template-columns:340px 1fr;
  gap:20px;
}
.play-panel {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.play-panel input {
  width:100%;
  padding:12px;
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:8px;
  color:var(--text);
}
.play-panel p {
  font-size:.85rem;
  margin:0;
}
.btn-primary {
  background:var(--gold);
  color:#201a0f;
  font-weight:700;
  border:1px solid transparent;
  padding:13px 22px;
  border-radius:10px;
  min-height:46px;
}
.btn-primary:hover:not(:disabled) {
  background:#ffda80;
}
.play-panel .btn-primary {
  display:flex;
  justify-content:space-between;
  margin-top:8px;
}
.play-panel .btn-primary span {
  font-size:.8rem;
  align-self:center;
}
.btn-small {
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 14px;
  min-height:42px;
}
.btn-small:hover:not(:disabled) {
  border-color:var(--gold);
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}
.section-head h2,.section-head p {
  margin:0;
}
.section-head p {
  font-size:.85rem;
  margin-top:6px;
}
.pill {
  padding:6px 10px;
  border-radius:8px;
  background:#253750;
  color:var(--dim);
  font-size:.8rem;
  white-space:nowrap;
}
.table-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.table-card {
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  text-align:left;
  color:var(--text);
  min-height:96px;
}
.table-card:hover:not(:disabled) {
  border-color:var(--gold);
}
.t-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.t-badge {
  font-size:.75rem;
  border-radius:5px;
  padding:3px 6px;
  background:#293d58;
  color:#bdd9ff;
}
.t-badge.playing {
  background:#503440;
  color:#ffd1d7;
}
.t-meta {
  font-size:.8rem;
  line-height:1.6;
  overflow-wrap:anywhere;
}
.rules-card {
  margin-top:20px;
}
.rules-card ol {
  padding-left:22px;
  line-height:2;
}
.rules-card p {
  font-size:.85rem;
  margin-bottom:0;
}
summary {
  cursor:pointer;
  font-weight:600;
  min-height:28px;
}
details[open]>summary {
  margin-bottom:14px;
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
  background:var(--panel);
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:14px;
}
.topbar h1 {
  font-size:1.3rem;
  margin-bottom:6px;
}
.topbar p {
  margin:6px 0 0;
  font-size:.9rem;
}
.room-layout {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:24px;
}
.seat-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.seat {
  padding:22px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:108px;
}
.seat.you {
  border-color:var(--gold);
}
.seat.empty {
  border-style:dashed;
  color:var(--dim);
  justify-content:center;
}
.seat .dim {
  font-size:.85rem;
}
.room-controls .btn-primary {
  width:100%;
}
.ai-control {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.ai-control>span {
  margin-right:auto;
}
.game-topbar {
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 8px 20px #10172599;
}
.topbar-actions {
  display:flex;
  align-items:center;
  gap:12px;
}
#countdown.urgent {
  color:var(--atk);
  background:#503440;
}
.game-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:20px;
}
.play-area,.game-sidebar {
  min-width:0;
}
.game-sidebar {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.foe-zones {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.foe-zone {
  padding:14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  min-width:0;
}
.foe-zone.elim {
  opacity:.5;
}
.foe-zone .name {
  font-weight:700;
  overflow-wrap:anywhere;
}
.foe-zone .dim {
  font-size:.8rem;
  margin-top:6px;
}
.foe-card {
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:12px;
}
.foe-card img {
  height:58px;
  width:48px;
  object-fit:cover;
  border-radius:6px;
}
.arena {
  margin-bottom:16px;
}
.arena .section-head>.dim {
  font-size:.75rem;
}
.battle-summary {
  padding:18px;
  background:var(--bg);
  border-radius:10px;
  line-height:1.7;
  font-size:.9rem;
}
.battle-summary strong {
  color:var(--gold);
}
.my-field-row {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:16px;
  font-size:.85rem;
}
.my-field {
  display:flex;
  gap:12px;
  align-items:center;
  min-height:60px;
}
.my-field img {
  width:48px;
  height:60px;
  object-fit:cover;
  border-radius:6px;
}
.my-field b {
  display:block;
  margin-bottom:6px;
}
.target-panel {
  margin-bottom:16px;
  border-color:var(--gold);
}
.target-panel p {
  font-size:.85rem;
}
.target-list {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn-target {
  padding:12px 16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  min-height:44px;
}
.btn-target.selected {
  border-color:var(--gold);
  background:#443e2b;
}
.my-zone {
  margin-bottom:20px;
}
.sort-label {
  font-size:.8rem;
  white-space:nowrap;
  color:var(--dim);
}
select {
  background:var(--bg);
  border:1px solid var(--line);
  padding:8px;
  color:var(--text);
  border-radius:6px;
}
#my-hand-count {
  font-size:.8rem;
  font-weight:400;
}
.hand {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:12px;
}
.card {
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px;
  color:var(--text);
  text-align:left;
  min-width:0;
}
.card:hover {
  border-color:#7890b5;
}
.card.selected {
  border:2px solid var(--gold);
  padding:8px;
  box-shadow:0 0 0 2px #f5c75a25;
}
.card-art {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:8px;
  background:var(--bg);
}
.card-name {
  display:block;
  font-weight:700;
  margin:8px 0;
  font-size:.9rem;
}
.kind-badge {
  display:inline-block;
  font-size:.65rem;
  border-radius:4px;
  padding:2px 4px;
  margin-right:4px;
  background:#284b76;
  color:#c9e1ff;
}
.kind-monster {
  background:#593749;
  color:#ffd1d7;
}
.card-stats {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:.8rem;
}
.stat-atk {
  color:var(--atk);
}
.stat-def {
  color:var(--def);
}
.stat-thorns {
  color:var(--thorns);
}
.card-sub {
  display:block;
  color:var(--dim);
  font-size:.7rem;
  margin-top:8px;
}
.selection-panel {
  position:sticky;
  top:100px;
}
.detail-header {
  display:flex;
  gap:12px;
  align-items:center;
}
.detail-header img {
  width:60px;
  height:72px;
  object-fit:cover;
  border-radius:8px;
}
.detail-header p {
  font-size:.8rem;
  margin:6px 0 0;
}
.stat-table {
  width:100%;
  border-collapse:collapse;
  font-size:.8rem;
  margin-top:16px;
}
.stat-table th,.stat-table td {
  padding:8px 3px;
  text-align:right;
  border-bottom:1px solid var(--line);
}
.stat-table th:first-child {
  text-align:left;
}
.weapon-preview {
  padding:12px;
  border:1px solid var(--gold);
  background:#342e21;
  border-radius:8px;
  margin-top:16px;
  font-size:.85rem;
}
.weapon-preview p {
  margin:6px 0 0;
}
.battle-log {
  max-height:360px;
  overflow:auto;
  font-size:.85rem;
  line-height:1.8;
}
.log-entry {
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.log-entry:first-child {
  padding-top:0;
}
.log-entry p {
  margin:4px 0;
}
.log-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0;}
.log-card {display:flex;flex-direction:column;align-items:center;min-width:0;padding:8px 5px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);text-align:center;line-height:1.4;gap:4px;}
.log-card b,.log-card-player {max-width:100%;overflow-wrap:anywhere;}
.log-card-role,.log-card-stats,.log-card-player {font-size:.72rem;color:var(--dim);}
.log-card .card-art,.log-card-placeholder {width:64px;height:72px;object-fit:contain;border-radius:5px;}
.log-card-placeholder {display:grid;place-items:center;font-size:2rem;}
.log-card-defeated .card-art {filter:grayscale(.7);opacity:.7;}
.kill {
  color:var(--atk);
}
.good {
  color:#a2e4b0;
}
.dice {
  color:var(--gold);
}
.game-sidebar details p {
  font-size:.85rem;
}
.elim-banner {
  padding:12px;
  background:#503440;
  border-radius:10px;
  margin-bottom:16px;
}
.action-dock {
  position:sticky;
  bottom:12px;
  z-index:12;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:#25334af5;
  border:1px solid #64718c;
  box-shadow:0 8px 32px #0007;
  backdrop-filter:blur(12px);
  padding:14px 20px;
  border-radius:14px;
  margin-top:16px;
}
.action-dock p {
  font-size:.8rem;
  margin:4px 0 0;
}
.action-dock .btn-primary {
  flex-shrink:0;
}
.gameover-card {
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
  max-width:440px;
  width:calc(100% - 32px);
}
dialog::backdrop {
  background:#000b;
}
.dialog-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}
.dialog-actions button {
  flex:1;
}
#screen-game {
  padding-bottom:28px;
}
@media(max-width:960px) {
  .game-layout {
    grid-template-columns:1fr;
  }
  .game-sidebar {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .selection-panel {
    position:static;
    grid-column:1 / -1;
  }
  .detail-header img {
    width:48px;
    height:54px;
  }
  .stat-table {
    margin-top:8px;
  }
  .lobby-layout {
    grid-template-columns:280px 1fr;
  }
  .room-layout {
    grid-template-columns:1fr 280px;
  }
}
@media(max-width:640px) {
  .screen {
    padding:14px;
  }
  .connection-bar {
    padding:12px 14px;
  }
  .brand {
    font-size:.65rem;
    letter-spacing:1px;
  }
  .lobby-layout,.room-layout {
    grid-template-columns:1fr;
  }
  .title-wrap {
    padding:14px 0;
  }
  .panel {
    padding:16px;
  }
  .table-list {
    gap:8px;
  }
  .table-card {
    padding:12px;
  }
  .topbar {
    padding:12px;
    gap:8px;
  }
  .game-topbar {
    align-items:flex-start;
  }
  .topbar-actions {
    gap:6px;
    flex-direction:column;
    align-items:flex-end;
  }
  .topbar .btn-small {
    font-size:.75rem;
    padding:8px 10px;
  }
  .foe-zones {
    gap:6px;
  }
  .foe-zone {
    padding:10px;
  }
  .foe-zone .name {
    font-size:.8rem;
  }
  .foe-card {
    flex-direction:column;
    align-items:flex-start;
    font-size:.75rem;
  }
  .foe-card img {
    height:44px;
    width:36px;
  }
  .arena .section-head {
    align-items:flex-start;
  }
  .arena .section-head>.dim {
    max-width:100px;
  }
  .hand {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding:4px 2px 12px;
    gap:10px;
  }
  .hand .card {
    flex:0 0 138px;
    scroll-snap-align:start;
  }
  .game-sidebar {
    grid-template-columns:1fr;
  }
  .selection-panel {
    grid-column:auto;
  }
  .action-dock {
    padding:12px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    gap:10px;
  }
  .action-dock .btn-primary {
    padding:12px;
    font-size:.85rem;
  }
  .action-dock b {
    font-size:.85rem;
  }
  .my-zone .section-head {
    gap:8px;
    flex-wrap:wrap;
  }
  .seat {
    padding:16px;
  }
  .battle-summary {
    padding:12px;
  }
  .sort-label select {
    max-width:120px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* v0.3: AI matches and mixed room composition */
.panel-divider {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}
.room-controls label {
  display: block;
  margin-bottom: 10px;
}
.room-controls select {
  width: 100%;
}
#room-composition {
  margin: 14px 0 0;
}
#mixed-controls {
  margin-bottom: 18px;
}
.spectator-banner {
  border: 1px solid var(--gold);
  padding: 14px;
  background: #342e21;
  border-radius: 12px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.spectator .foe-zones {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.spectator .battle-area {
  flex: 1;
}

.audio-settings {
  max-width: 1192px;
  margin: 0 auto;
  padding: 12px 16px;
}
.audio-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}
.audio-controls label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .85rem;
  color: var(--dim);
}
.audio-controls input {
  width: 110px;
  accent-color: var(--gold);
}
#audio-status {
  font-size: .8rem;
  margin: 12px 0 0;
}
@media (max-width: 1240px) {
  .audio-settings { margin: 0 24px; }
}
@media (max-width: 640px) {
  .audio-settings { margin: 0 14px; }
  .audio-controls { display: grid; grid-template-columns: 1fr; }
  .audio-controls label { justify-content: space-between; }
  .audio-controls input { width: 55%; }
}

/* v0.5.1: keep the match, full hand and confirmation within the viewport. */
body:has(#app.game-active) {
  height:100dvh;
  min-height:0;
  overflow:hidden;
}
#app.game-active {
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.game-active .connection-bar {
  flex:0 0 38px;
  width:100%;
  max-width:none;
  padding:4px 140px 4px 16px;
}
.game-active .audio-settings {
  position:fixed;
  z-index:40;
  top:3px;
  right:16px;
  margin:0;
  padding:6px 12px;
  border-radius:8px;
  max-height:calc(100dvh - 12px);
  overflow:auto;
  box-shadow:0 6px 24px #0005;
}
.game-active .audio-settings summary {min-height:20px;font-size:.8rem;}
.game-active .audio-settings[open] {width:min(380px,calc(100vw - 24px));}
.game-active .audio-controls {display:grid;grid-template-columns:1fr;}
.game-active .audio-controls label {justify-content:space-between;}
.game-active #screen-game {
  flex:1;
  min-height:0;
  max-width:none;
  width:100%;
  margin:0;
  padding:0 16px max(8px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:8px;
}
.game-active .game-topbar {
  position:static;
  flex-shrink:0;
  padding:8px 12px;
  margin:0;
  min-height:58px;
}
.game-active .topbar-actions {flex-direction:row;align-items:center;gap:8px;}
.game-active .topbar p {font-size:.8rem;margin-top:4px;line-height:1.3;}
.game-active .game-topbar .btn-small {padding:7px 12px;min-height:38px;}
.game-active .spectator-banner,.game-active .elim-banner {
  flex-shrink:0;
  padding:6px 10px;
  font-size:.8rem;
  margin:0;
}
.game-active .game-layout {
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:12px;
}
.game-active .play-area {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}
.game-active .foe-zones {flex-shrink:0;margin:0;gap:8px;}
.game-active .foe-zone {padding:8px 10px;}
.game-active .foe-zone .name {font-size:.85rem;line-height:1.3;}
.game-active .foe-zone .dim {margin-top:3px;font-size:.75rem;line-height:1.25;}
.game-active .foe-card {margin-top:4px;gap:6px;flex-direction:row;font-size:.75rem;}
.game-active .foe-card img {width:24px;height:30px;}
.game-active .panel {padding:12px;border-radius:12px;}
.game-active h2 {margin-bottom:8px;font-size:.9rem;}
.game-active .arena {flex-shrink:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;}
.game-active .arena .section-head {grid-column:1 / -1;margin:0;}
.game-active .battle-summary {padding:0;background:none;font-size:.8rem;line-height:1.4;}
.game-active .my-field-row {margin:0;gap:8px;font-size:.75rem;}
.game-active .my-field {gap:6px;min-height:32px;}
.game-active .my-field img {width:28px;height:34px;}
.game-active .my-field b {margin-bottom:3px;}
.game-active .my-field .card-stats {font-size:.7rem;gap:5px;}
.game-active .target-panel {flex-shrink:0;margin:0;padding:8px 12px;}
.game-active .target-panel h2 {margin:0 0 6px;}
.game-active .target-panel p {display:none;}
.game-active .target-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.game-active .btn-target {padding:8px 10px;font-size:.8rem;min-height:40px;overflow-wrap:anywhere;}
.game-active .my-zone {
  flex:1;
  min-height:0;
  margin:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:6px;
}
.game-active .my-zone .section-head {margin:0;flex-wrap:nowrap;gap:8px;}
.game-active .sort-label select {padding:5px;font-size:.75rem;}
.game-active #hand-hint {margin:0;font-size:.75rem;line-height:1.3;}
.game-active .hand {
  display:grid;
  grid-template-columns:repeat(var(--hand-columns,4),minmax(0,1fr));
  grid-auto-rows:minmax(48px,1fr);
  gap:5px;
  min-height:0;
  overflow:auto;
  padding:2px;
  scroll-snap-type:none;
  align-content:stretch;
}
.game-active .hand .card {
  position:relative;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:5px;
  row-gap:3px;
  padding:5px;
  align-content:center;
  border-width:2px;
}
.game-active .card.selected {padding:5px;}
.game-active .hand .card-art {grid-row:1 / 3;width:24px;height:32px;aspect-ratio:auto;}
.game-active .card-name {font-size:.72rem;line-height:1.2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-active .card-stats {font-size:.65rem;line-height:1.2;gap:2px 4px;}
.game-active .hand .card-sub {display:none;}
.game-active .hand .card-kind {min-width:0;}
.game-active .hand[data-layout="compact"] .card-kind {display:none;}
.game-active .hand[data-layout="portrait"] .card {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto auto;
  min-height:0;gap:3px;padding:5px;align-content:stretch;
  font-size:.8rem;
}
.game-active .hand[data-layout="portrait"] .card-art {
  grid-row:1;width:100%;height:100%;min-height:0;object-fit:contain;
}
.game-active .hand[data-layout="portrait"] .card-name {
  font-size:.8rem;line-height:1.2;white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.game-active .hand[data-layout="portrait"] .card-stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));font-size:.72rem;line-height:1.2;gap:4px;text-align:center;}
.game-active .hand[data-layout="portrait"] .stat-atk,.game-active .hand[data-layout="portrait"] .stat-def {display:flex;flex-direction:column;}
.game-active .hand[data-layout="portrait"] .stat-icon {font-size:.6rem;line-height:1.1;}
.game-active .hand[data-layout="portrait"] .stat-value {white-space:nowrap;font-variant-numeric:tabular-nums;}
.game-active .hand[data-layout="portrait"] .stat-thorns {position:absolute;top:5px;right:5px;font-size:.65rem;padding:1px 3px;border-radius:4px;background:rgba(16,23,37,.9);}
.game-active .hand[data-layout="portrait"] .stat-thorns .stat-icon {margin-right:2px;}
.game-active .hand[data-layout="portrait"] .card-kind {position:absolute;top:5px;left:5px;max-width:calc(100% - 42px);}
.game-active .hand[data-layout="portrait"] .kind-badge {font-size:.55rem;line-height:1.2;padding:2px 3px;max-width:100%;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:rgba(16,23,37,.9);}
.game-active .game-sidebar {display:flex;flex-direction:column;gap:8px;min-height:0;}
.game-tabs {display:flex;gap:4px;flex-shrink:0;}
.game-tabs button {flex:1;min-height:40px;padding:8px 6px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--dim);font-size:.8rem;}
.game-tabs button[aria-selected="true"] {color:var(--gold);background:#342e21;border-color:var(--gold);}
.game-active .game-pane {position:static;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;}
.game-active .game-pane p {font-size:.8rem;line-height:1.5;}
.game-active .detail-header {gap:8px;}
.game-active .detail-header img {width:44px;height:54px;}
.game-active .detail-header p {font-size:.75rem;}
.game-active .stat-table {margin-top:10px;font-size:.75rem;}
.game-active .stat-table th,.game-active .stat-table td {padding:7px 2px;}
.game-active .weapon-preview {padding:10px;margin-top:10px;font-size:.8rem;}
.game-active .battle-log {max-height:none;overflow:visible;}
.game-active .action-dock {position:static;flex-shrink:0;margin:0;padding:10px 14px;min-height:62px;gap:12px;}
.game-active .action-dock p {line-height:1.35;overflow-wrap:anywhere;}
.game-active .action-dock b {font-size:.9rem;}
.game-active .spectator .play-area {overflow:auto;}
.game-active .spectator .foe-zones {grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:1099px) {
  .game-active .game-layout {grid-template-columns:minmax(0,1fr) 260px;gap:8px;}
  .game-active #screen-game {padding-left:10px;padding-right:10px;}
  .game-active .hand .card {grid-template-columns:22px minmax(0,1fr);column-gap:4px;padding:4px;}
  .game-active .hand .card-art {width:22px;height:30px;}
  .game-active .card.selected {padding:4px;}
  .game-active .arena {grid-template-columns:minmax(0,1fr) auto;}
  .game-active .my-field-row {justify-content:flex-start;}
}
@media (max-width:699px) {
  .game-active .connection-bar {padding-left:10px;gap:6px;}
  .game-active .brand {letter-spacing:0;font-size:.6rem;}
  .game-active #screen-game {gap:6px;padding-left:8px;padding-right:8px;}
  .game-active .game-layout {grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(100px,24dvh);gap:6px;}
  .game-active .game-sidebar {gap:4px;}
  .game-active .game-tabs button {min-height:32px;padding:4px;}
  .game-active .panel {padding:8px;}
  .game-active .play-area {gap:6px;}
  .game-active .foe-zone {padding:6px;}
  .game-active .foe-zone .name {font-size:.75rem;}
  .game-active .foe-card img,.game-active .arena .section-head {display:none;}
  .game-active .arena {gap:4px;}
  .game-active .battle-summary .dim,.game-active .battle-summary br:last-of-type {display:none;}
  .game-active .my-field img {width:22px;height:26px;}
  .game-active .my-field-row>span {display:none;}
  .game-active .card-sub {display:none;}
  .game-active .hand .card-art {height:26px;width:18px;grid-row:1 / 3;}
  .game-active .hand {gap:4px;grid-auto-rows:minmax(48px,1fr);}
  .game-active .action-dock {padding:8px;min-height:58px;}
  .game-active .action-dock .btn-primary {min-height:42px;padding:8px 12px;}
}
@media (max-height:649px) and (min-width:700px) {
  .game-active .connection-bar {flex-basis:32px;}
  .game-active .game-topbar {min-height:48px;padding:5px 10px;}
  .game-active #screen-game,.game-active .play-area {gap:6px;}
  .game-active .foe-card {display:none;}
  .game-active .arena .section-head {display:none;}
  .game-active .action-dock {min-height:54px;padding:6px 12px;}
  .game-active .hand {grid-auto-rows:minmax(48px,1fr);}
}

/* The language control remains accessible while a match fills the viewport. */
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.language-control {display:flex;align-items:center;flex-shrink:0;}
.language-control select {padding:4px 6px;min-height:30px;font-size:.8rem;}
.game-active #connection {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[lang="en"] .game-active .stat-table {font-size:.7rem;}
html[lang="en"] .game-active .card-name {font-size:.68rem;}
html[lang="en"] .game-active .game-topbar .btn-small {white-space:nowrap;}
@media(max-width:699px) {
  .game-active .brand {display:none;}
  .game-active .connection-bar {padding-right:100px;}
}

@media (max-height:649px) and (min-width:700px) {
  html[lang="en"] .game-active .hand {gap:4px;grid-auto-rows:minmax(44px,1fr);}
  html[lang="en"] .game-active #hand-hint {font-size:.68rem;}
  html[lang="en"] .game-active .detail-header p {line-height:1.25;font-size:.7rem;}
  html[lang="en"] .game-active .stat-table th,html[lang="en"] .game-active .stat-table td {padding:5px 2px;}
  html[lang="en"] .game-active .weapon-preview {padding:8px;}
}
@media (max-height:649px) and (min-width:700px) {
  .game-active .connection-bar {padding-top:0;padding-bottom:0;}
}

/* Theme palettes keep the established compact game grid. */
#app[data-theme="genshin"] { --gold:#b5e6c5; --panel:#172d32; --card:#203d42; --line:#365650; --dim:#a6c3bc; }
.theme-settings { display:grid; grid-template-columns:auto minmax(160px,240px) 1fr; align-items:center; gap:12px; margin-bottom:16px; }
.theme-settings label,.theme-settings p { margin:0; }
.t-theme { color:var(--gold); font-size:.85rem; }
.element-pyro { color:#f68b67; }.element-hydro { color:#63b7ff; }.element-anemo { color:#6be3c2; }
.element-electro { color:#c094ff; }.element-dendro { color:#a5d96c; }.element-cryo { color:#a1e4ed; }.element-geo { color:#ecc46b; }
@media (max-width:700px) { .theme-settings {grid-template-columns:auto 1fr;} .theme-settings p {grid-column:1 / -1;} }

#app[data-theme="genshin"] .card-art {object-fit:contain;}
@media (min-width:700px) {
  #app[data-theme="genshin"].game-active .detail-header img {width:80px;height:80px;flex-shrink:0;}
}
@media (min-width:700px) and (max-height:650px) {
  #app[data-theme="genshin"].game-active .detail-header img {width:56px;height:56px;}
}

/* Battle replays use the top layer, without changing the underlying game grid. */
.battle-animation-dialog {
  width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:24px;
  overflow:auto; border:1px solid #6684aa; border-radius:20px;
  color:var(--text); background:radial-gradient(ellipse at center,#233a60,#101b2d 75%);
  box-shadow:0 28px 100px #0009; --battle-light:#8edcff; --battle-counter:#d4a0ff;
}
.battle-animation-dialog[data-theme="genshin"] {
  background:radial-gradient(ellipse at center,#244b43,#101f25 75%); --battle-light:#b4f4cd;
}
.battle-animation-dialog::backdrop {background:#030914b8;backdrop-filter:blur(5px);}
.battle-animation-header {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.battle-animation-header h2 {margin:0;font-size:1.1rem;}
.battle-animation-status {text-align:center;color:var(--battle-light);min-height:1.5em;margin:20px 0 8px;font-weight:700;}
.battle-animation-scene {position:relative;display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);align-items:center;gap:12px;}
.battle-fighter {text-align:center;min-width:0;position:relative;}
.battle-role {margin:0 0 8px;color:#a7bad4;font-size:.8rem;}
.battle-portrait {width:min(180px,100%);aspect-ratio:1;margin:auto;position:relative;border-radius:18px;border:1px solid #647e9d;background:#0e1728;overflow:hidden;}
.battle-portrait img {width:100%;height:100%;object-fit:contain;display:block;}
.battle-portrait-fallback {display:grid;place-items:center;height:100%;font-size:5rem;color:var(--battle-light);}
.battle-fighter h3 {font-size:1.1rem;margin:12px 0 4px;overflow-wrap:anywhere;}
.battle-player {color:#a7bad4;font-size:.8rem;margin:0 0 8px;overflow-wrap:anywhere;}
.battle-fate {display:inline-block;font-size:.8rem;border:1px solid #426557;padding:4px 12px;border-radius:20px;color:#a8edc5;}
.battle-center {position:relative;text-align:center;align-self:stretch;display:flex;flex-direction:column;justify-content:center;}
.battle-vs {font-size:2rem;font-weight:900;font-style:italic;color:var(--battle-light);text-shadow:0 0 24px var(--battle-light);}
.battle-values {font-size:.8rem;color:#afc2d9;line-height:1.9;margin-bottom:0;}
.battle-values b {color:#edf2fc;}
.battle-beam,.battle-counter-beam {pointer-events:none;position:absolute;top:32%;left:-70%;width:240%;height:8px;border-radius:50%;opacity:0;transform:scaleX(0);}
.battle-beam {background:var(--battle-light);box-shadow:0 0 20px var(--battle-light);transform-origin:left;}
.battle-counter-beam {background:var(--battle-counter);box-shadow:0 0 20px var(--battle-counter);transform-origin:right;}
.battle-hit {position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(ellipse,#fff9,transparent 65%);}
.battle-animation-scene[data-stage="entrance"] .battle-attacker {animation:battle-enter-left .675s ease-out both;}
.battle-animation-scene[data-stage="entrance"] .battle-defender {animation:battle-enter-right .675s ease-out both;}
.battle-animation-scene[data-stage="attack"] .battle-attacker {animation:battle-strike-left .825s ease-in-out;}
.battle-animation-scene[data-stage="attack"] .battle-beam {animation:battle-beam .825s ease-out;}
.battle-animation-scene[data-stage="attack"] .battle-defender .battle-hit {animation:battle-impact .825s ease-out;}
.battle-animation-scene[data-stage="counter"] .battle-counter-beam {animation:battle-beam .6s ease-out;}
.battle-animation-scene[data-stage="counter"] .battle-attacker .battle-hit {animation:battle-impact .6s ease-out;}
.battle-animation-scene[data-stage="result"] .battle-fate {animation:battle-result .45s ease-out;}
.battle-defeated .battle-portrait {filter:grayscale(1);opacity:.5;}
.battle-defeated .battle-fate {color:#ffb0b0;border-color:#a05757;}
.battle-animation-hint {font-size:.75rem;text-align:center;color:#a7bad4;margin:20px 0 0;}
@keyframes battle-enter-left {from {opacity:0;transform:translateX(-24px);} to {opacity:1;transform:translateX(0);}}
@keyframes battle-enter-right {from {opacity:0;transform:translateX(24px);} to {opacity:1;transform:translateX(0);}}
@keyframes battle-strike-left {0%,100% {transform:translateX(0);} 45% {transform:translateX(16px);}}
@keyframes battle-beam {0% {opacity:0;transform:scaleX(0);} 45% {opacity:.9;transform:scaleX(1);} 100% {opacity:0;transform:scaleX(1);}}
@keyframes battle-impact {0%,100% {opacity:0;} 50% {opacity:.65;}}
@keyframes battle-result {from {opacity:0;transform:translateY(5px);} to {opacity:1;transform:translateY(0);}}
@media (max-width:600px) {
  .battle-animation-dialog {padding:16px;}
  .battle-animation-scene {grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:8px;}
  .battle-fighter h3 {font-size:.9rem;}
  .battle-portrait {border-radius:12px;}
  .battle-vs {font-size:1.4rem;}
  .battle-values {font-size:.7rem;}
}
@media (max-height:550px) {
  .battle-portrait {width:100px;}
  .battle-animation-status {margin-top:12px;}
  .battle-animation-dialog {padding:16px;}
}
@media (prefers-reduced-motion:reduce) {
  .battle-animation-scene *, .battle-animation-scene *::before, .battle-animation-scene *::after {animation:none!important;transition:none!important;}
}

#app[data-theme="naruto"] {--gold:#ffbf83;--panel:#302536;--card:#433145;--line:#654952;--dim:#c8b1be;}
#app[data-theme="minecraft"] {--gold:#b6e882;--panel:#243329;--card:#304639;--line:#4b6650;--dim:#b0c5aa;}
#app[data-theme="naruto"] .card-art,#app[data-theme="minecraft"] .card-art {object-fit:contain;}
#app[data-theme="minecraft"] .card-art {image-rendering:pixelated;}
#app[data-theme="minecraft"] .card {border-radius:4px;}
.kind-leaf,.kind-friendly {color:#a2e1a7;}.kind-sand,.kind-legend {color:#f3cd8b;}
.kind-mist {color:#a0dbe8;}.kind-cloud {color:#d9dbea;}.kind-stone {color:#dec0a0;}
.kind-akatsuki,.kind-hostile {color:#f3a2a8;}.kind-player {color:#90cdff;}.kind-neutral {color:#f0d08b;}.kind-boss {color:#dcb1ff;}
.battle-animation-dialog[data-theme="naruto"] {background:radial-gradient(ellipse at center,#563442,#231724 75%);--battle-light:#ffb276;--battle-counter:#ef90bf;}
.battle-animation-dialog[data-theme="minecraft"] {background:radial-gradient(ellipse at center,#3c5837,#14221b 75%);--battle-light:#b4ee83;--battle-counter:#ce98ff;border-radius:6px;}
.battle-animation-dialog[data-theme="minecraft"] img {image-rendering:pixelated;}
@media (min-width:700px) {
 #app[data-theme="naruto"].game-active .detail-header img,#app[data-theme="minecraft"].game-active .detail-header img {width:80px;height:80px;flex-shrink:0;}
}
@media (min-width:700px) and (max-height:650px) {
 #app[data-theme="naruto"].game-active .detail-header img,#app[data-theme="minecraft"].game-active .detail-header img {width:56px;height:56px;}
}

/* Match results stay inside the dialog; the one-page hand remains unchanged. */
/* Compact lobby; room and game layouts retain their own spacing. */
body:has(#screen-lobby:not(.hidden)) .connection-bar {padding-top:8px;padding-bottom:8px;}
body:has(#screen-lobby:not(.hidden)) .audio-settings {padding-top:8px;padding-bottom:8px;}
#screen-lobby {padding-top:12px;padding-bottom:16px;}
.lobby-header {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
#screen-lobby .title-wrap {padding:0;}
#screen-lobby .title-wrap h1 {font-size:clamp(1.6rem,3vw,2rem);line-height:1.15;margin:4px 0;}
#screen-lobby .subtitle {font-size:.85rem;line-height:1.4;margin-bottom:0;}
#screen-lobby .lobby-layout {grid-template-columns:minmax(320px,360px) minmax(0,1fr);gap:14px;align-items:start;}
#screen-lobby .panel {padding:16px;}
#screen-lobby .play-panel {gap:6px;}
#screen-lobby h2 {margin-bottom:0;}
#screen-lobby .play-panel label,.room-entry-settings label {font-size:.85rem;color:var(--dim);}
.lobby-fields {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lobby-field {display:flex;flex-direction:column;gap:6px;min-width:0;}
#screen-lobby input,#screen-lobby select {width:100%;min-width:0;min-height:40px;padding:8px;}
.lobby-mode-actions {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;}
#screen-lobby .lobby-mode-actions button {margin-top:0;min-height:42px;padding:8px 12px;}
#screen-lobby .panel-divider {margin:4px 0;}
.room-entry-settings {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px;}
#screen-lobby .room-entry-settings select {width:110px;}
.room-entry-settings .dim {font-size:.8rem;}
#screen-lobby .table-list {gap:10px;}
#screen-lobby .table-card {padding:12px;min-height:96px;}
#screen-lobby .t-head {margin-bottom:6px;}
#screen-lobby .multiplayer-panel .section-head p {margin-bottom:0;margin-top:4px;}
#screen-lobby .t-theme {margin-right:8px;}
#screen-lobby .t-players {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:.8rem;line-height:1.4;margin-top:4px;}
#screen-lobby .rules-card {margin-top:14px;padding:10px 16px;}
.lobby-header #btn-records {flex-shrink:0;}
@media(max-width:850px) {
  #screen-lobby .lobby-layout {grid-template-columns:minmax(280px,.85fr) minmax(0,1fr);}
  #screen-lobby .multiplayer-panel .section-head {align-items:flex-start;}
  #screen-lobby .multiplayer-panel .pill {display:none;}
}
@media(max-width:640px) {
  .lobby-header {gap:10px;align-items:flex-start;}
  #screen-lobby .title-wrap h1 {font-size:1.5rem;}
  #screen-lobby .eyebrow {font-size:.75rem;letter-spacing:1px;}
  #screen-lobby .lobby-layout {grid-template-columns:1fr;}
  .lobby-fields {grid-template-columns:1fr 1fr;}
}
@media(min-width:700px) and (max-height:700px) {
  #screen-lobby .eyebrow {display:none;}
  #screen-lobby .lobby-header {margin-bottom:6px;}
  #screen-lobby .panel {padding:12px;}
  #screen-lobby .rules-card {margin-top:6px;padding:6px 12px;}
  #screen-lobby .watch-help {display:none;}
  #screen-lobby {padding-bottom:10px;}
  #screen-lobby .multiplayer-panel .section-head {margin-bottom:8px;}
  #screen-lobby .room-entry-settings {margin-bottom:8px;}
  #screen-lobby .table-card {padding:8px;}
  #screen-lobby .t-head {margin-bottom:4px;}
  #screen-lobby .t-players {-webkit-line-clamp:1;}
}
#gameover-dialog {width:min(780px,calc(100vw - 28px));max-height:88dvh;overflow:auto;}
.result-table-wrap {overflow:auto;margin:12px 0;}
.result-table {width:100%;border-collapse:collapse;font-size:.82rem;white-space:nowrap;}
.result-table td,.result-table th {padding:8px 7px;border-bottom:1px solid var(--line);text-align:center;}
.result-table th[scope="row"] {text-align:left;white-space:normal;overflow-wrap:anywhere;min-width:80px;}
.result-winner {color:var(--gold);background:#f5c75a0b;}
.records-dialog {width:min(1000px,calc(100vw - 24px));height:min(86dvh,850px);max-height:90dvh;padding:18px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;}
.records-dialog[open] {display:flex;flex-direction:column;gap:10px;}
.records-dialog::backdrop {background:#050b17bc;}
.records-dialog .section-head {margin:0;flex-shrink:0;}
.records-dialog h2 {font-size:1.15rem;margin:0;}
.records-controls,.records-pagination {display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-shrink:0;}
.records-controls label {display:flex;align-items:center;gap:8px;font-size:.85rem;}
.records-pagination {justify-content:space-between;}
#records-status {margin:0;font-size:.85rem;}
.records-content {min-height:0;overflow:auto;flex:1;overscroll-behavior:contain;}
.record-entry {padding:12px 0;border-bottom:1px solid var(--line);}
.record-entry .section-head {flex-wrap:wrap;gap:6px;}
.record-entry p {margin:6px 0;font-size:.85rem;}
.result-player,.result-battles {padding:10px 0;border-bottom:1px solid var(--line);}
.result-player summary,.result-battles summary {cursor:pointer;color:var(--gold);}
.result-player p,.result-player li,.result-battles p {font-size:.82rem;line-height:1.6;overflow-wrap:anywhere;}
.result-cards {display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:8px;margin:10px 0;}
.result-cards article {display:flex;flex-direction:column;gap:5px;background:var(--card);padding:8px;border-radius:8px;font-size:.78rem;}
.result-cards img {width:100%;height:100px;object-fit:contain;}
.result-cards span {font-size:.72rem;}
.record-fighters {display:flex;gap:12px;}
.record-fighters figure {margin:0;width:110px;text-align:center;font-size:.8rem;}
.record-fighters img {width:80px;height:80px;object-fit:contain;}
@media(max-width:699px) {.records-dialog {padding:12px;}.result-table {font-size:.72rem;}.result-table th,.result-table td {padding:6px 4px;}}