/* ELEMENTS v9: calibrated card typography, title screen, and match table. */
:root {
  color-scheme:dark;
  --ink:#0d1520;
  --panel:#192c3b;
  --paper:#f5eddb;
  --muted:#b5c5cd;
  --quiet:#8ca4b0;
  --gold:#d4b474;
  --line:#b7a36a45;
  --blue:#a9deef;
  --red:#f1a59c;
  --hud-height:58px;
  --hand-height:clamp(144px,21dvh,194px);
  --console-width:190px;
  --field-width:clamp(77px,calc((100dvh - 330px)*.235),132px);
  --back-width:calc(var(--field-width)*.79)
}
* {
  box-sizing:border-box
}
html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden
}
body {
  background:#0b141f;
  color:var(--paper);
  font:14px/1.5 'Leelawadee UI','Noto Sans Thai',Tahoma,sans-serif
}
button,input {
  font:inherit
}
button {
  color:inherit;
  cursor:pointer;
  touch-action:manipulation;
  border:1px solid #899b9f60;
  border-radius:5px;
  background:#253a49;
  transition:border-color .16s,background .16s,box-shadow .16s,transform .16s
}
button:disabled {
  opacity:.48;
  cursor:default
}
button:not(:disabled):hover {
  border-color:#e8d6a3
}
button:focus-visible,input:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:3px
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
h1,h2,h3,p {
  margin:0
}
h2 {
  font-size:23px;
  font-weight:600
}
h3 {
  font-size:17px;
  font-weight:600
}
small {
  font-size:12px
}
a {
  color:#b3def5;
  text-underline-offset:3px
}
[hidden] {
  display:none!important
}
.primary-button,.secondary-button,.quiet-button,.icon-button,.menu-button,.dock-detail {
  min-height:44px;
  padding:9px 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px
}
.primary-button {
  background:linear-gradient(160deg,#f4dfac,#d8b675 55%,#b38b4d);
  border-color:#f0d599;
  color:#292517;
  font-weight:700;
  text-shadow:0 1px #fff0c880;
  box-shadow:inset 0 0 0 2px #8c682f55,inset 0 3px 8px #fff3c333,0 3px 0 #493b28,0 5px 13px #0004
}
.primary-button:not(:disabled):hover {
  background:linear-gradient(160deg,#fff0c9,#e8cb8b 55%,#c59c5b);
  box-shadow:inset 0 0 0 2px #8c682f55,0 3px 0 #493b28,0 0 20px #e3d18f22
}
.primary-button:disabled {
  opacity:1;
  background:linear-gradient(#3b4b53,#263744);
  border-color:#687c80;
  color:#9dafb5;
  box-shadow:inset 0 0 0 2px #15253377;
  text-shadow:none
}
.secondary-button,.dock-detail {
  background:linear-gradient(#304a5c,#1b3141);
  border-color:#8cb4be60;
  color:#dae7e8
}
.quiet-button {
  background:transparent;
  border-color:transparent;
  color:#b8ccd4
}
.quiet-button:hover {
  background:#bfd9e00b
}
.icon-button {
  width:44px;
  padding:9px
}
.full-width {
  width:100%
}
.game-shell {
  height:100dvh;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  position:relative;
  background:linear-gradient(90deg,#09131ddb,transparent 22%,transparent 78%,#09131de0),linear-gradient(0deg,#07131ee8,transparent 42%,#06131c22 70%,#0b162255),url('assets/arena.webp') center 48%/cover
}
.game-hud {
  position:relative;
  flex:none;
  height:var(--hud-height);
  display:flex;
  align-items:center;
  gap:16px;
  padding:6px 24px;
  z-index:20;
  background:linear-gradient(#0d1823ef,#101c28c4);
  border-bottom:1px solid #c5a56a42;
  box-shadow:0 4px 16px #0002
}
.menu-button {
  padding:8px 12px;
  background:#172532bd;
  border-color:#a28d5f4f;
  font-size:13px
}
.game-wordmark {
  font:600 18px/1 Georgia,serif;
  letter-spacing:3px;
  color:#ead7ad;
  text-shadow:0 2px 8px #0007
}
.hud-tools {
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto
}
.hud-tools button {
  border-color:transparent;
  background:transparent;
  color:#c8d0cd;
  border-radius:50%;
  font-size:23px
}
.hud-tools button:hover {
  background:#c5d0d00c;
  border-color:#c0ac7638
}
.opponent-hand {
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  height:54px;
  pointer-events:none
}
.opponent-card-backs {
  display:flex;
  align-items:flex-start
}
.opponent-card-backs>i {
  display:block;
  position:relative;
  width:32px;
  height:47px;
  margin-left:-11px;
  border:1px solid #aa9567;
  border-radius:3px;
  background:linear-gradient(145deg,#1d3449,#101c2c);
  box-shadow:inset 0 0 0 3px #0e1b2c,inset 0 0 0 4px #9a865b85,0 3px 6px #0008;
  transform:rotate(var(--back-angle,0deg));
  transform-origin:center -70%
}
.opponent-card-backs>i:first-child {
  margin-left:0
}
.opponent-card-backs>i:after {
  content:'✦';
  color:#b4a37b;
  font:22px/1 Georgia,serif;
  position:absolute;
  inset:12px 0 0;
  text-align:center
}
.opponent-hand-count {
  align-self:flex-end;
  color:#aebfc4;
  font-size:12px;
  margin:0 0 4px 10px
}
.coach-panel {
  flex:none;
  display:flex;
  align-items:center;
  gap:14px;
  padding:7px 24px;
  background:linear-gradient(90deg,#172c3ee3,#162a3bd6,#101f2ee0);
  border-bottom:1px solid #87bed035;
  z-index:17
}
.coach-panel>div {
  flex:1;
  min-width:0
}
.coach-panel strong {
  font-size:14px;
  color:#e5e4cf
}
.coach-panel p {
  font-size:12px;
  line-height:1.6;
  color:#b8cbd1
}
.coach-panel>span {
  font-size:12px;
  color:#c6b887;
  white-space:nowrap
}
.coach-panel button {
  font-size:12px;
  padding:8px 12px
}
.coach-panel .quiet-button {
  max-width:132px;
  color:#97b1bb
}
.match-stage {
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--console-width);
  gap:16px;
  padding:10px 24px 3px;
  width:min(1480px,100%);
  align-self:center
}
.battle-table {
  position:relative;
  min-height:0;
  min-width:0;
  width:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) 13px minmax(0,1fr);
  padding:0 3px;
  outline:none
}
.battle-table:before {
  content:'';
  position:absolute;
  inset:9% 9% 8%;
  pointer-events:none;
  border:1px solid #d1d4b00b;
  border-radius:50%;
  background:radial-gradient(ellipse,#8db6a00b,transparent 68%);
  transform:perspective(700px) rotateX(15deg)
}
.table-half {
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 78px;
  grid-template-rows:minmax(0,1fr) 37px;
  grid-template-areas:'damage rows piles' 'resources resources resources';
  gap:6px 12px;
  position:relative;
  min-height:0;
  padding:3px 3px 5px;
  border-radius:12px
}
.enemy-half {
  grid-template-rows:37px minmax(0,1fr);
  grid-template-areas:'resources resources resources' 'piles rows damage';
  padding:3px 3px 1px
}
.table-half:after {
  content:'';
  position:absolute;
  inset:1px 7% 3px;
  z-index:-1;
  pointer-events:none;
  border-radius:45%;
  opacity:0;
  background:radial-gradient(ellipse,#9cd5e912,transparent 72%);
  transition:opacity .3s
}
.table-half.active-side:after {
  opacity:1
}
.zone-rows {
  grid-area:rows;
  display:grid;
  grid-template-rows:minmax(0,1.35fr) minmax(0,.65fr);
  gap:7px;
  min-height:0
}
.enemy-half .zone-rows {
  grid-template-rows:minmax(0,.65fr) minmax(0,1.35fr)
}
.board-row {
  display:grid;
  grid-template-columns:43px minmax(0,1fr);
  align-items:stretch;
  min-height:0;
  gap:7px
}
.row-label {
  align-self:center;
  color:#d4d2bc;
  font-size:12px;
  line-height:1.4;
  text-shadow:0 1px 5px #07101c;
  opacity:.8
}
.enemy-half .row-label {
  color:#c3c4d2
}
.field-row {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  justify-items:center;
  align-items:center;
  gap:12px;
  min-height:0;
  position:relative
}
.card-cell {
  width:min(100%,var(--field-width));
  height:auto;
  aspect-ratio:5 / 7;
  min-height:0;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}
.back-row .card-cell {
  width:min(100%,var(--back-width));
  aspect-ratio:1.1;
  max-height:100%
}
.board-slot {
  width:min(100%,var(--field-width));
  height:auto;
  aspect-ratio:5 / 7;
  max-height:100%;
  min-height:0;
  position:relative;
  border:1px solid #d7caa438;
  border-radius:7px;
  background:linear-gradient(135deg,#0a1b2330,#20332e0c);
  box-shadow:inset 0 0 24px #0c181914
}
.board-slot:before {
  content:'';
  position:absolute;
  inset:4px;
  border:1px solid #c4c8a517;
  border-radius:3px;
  pointer-events:none
}
.board-slot:after {
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:42%;
  height:34%;
  border:1px solid #b9c6ae0d;
  transform:translate(-50%,-50%) rotate(45deg);
  pointer-events:none
}
.back-row .board-slot {
  width:min(100%,var(--back-width));
  aspect-ratio:1.1;
  max-height:100%;
  border-color:#bdb7d32c
}
.enemy-half .board-slot {
  border-color:#bab5d12c;
  background:#18243816
}
.board-slot:disabled {
  opacity:1
}
.empty-slot {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  height:100%;
  width:100%;
  gap:5px;
  color:#d6d3a835
}
.empty-slot svg {
  width:24px;
  height:24px;
  stroke-width:1.15
}
.empty-slot>span {
  font-size:12px
}
.slot-available {
  background:#40779527;
  border-color:#b7e6f1;
  box-shadow:inset 0 0 0 3px #8fd5ef12,0 0 0 1px #7cc3dc50,0 0 22px #9edff221
}
.slot-available .empty-slot {
  color:#c2eef6
}
.slot-available:before {
  border-color:#b7e2f354
}
.battle-divider {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding-left:126px;
  padding-right:87px;
  color:#d1bf8f73;
  font-size:11px
}
.battle-divider i {
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,#c3b47a57,transparent)
}
.pile-column {
  grid-area:piles;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:7px;
  min-height:0
}
.player-panel {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:left;
  font-size:12px;
  line-height:1.3;
  color:#e7dfcb;
  text-shadow:0 2px 5px #0009
}
.player-panel strong {
  display:block;
  font-weight:500
}
.player-panel .element-tag {
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--element);
  font-size:12px;
  margin-top:3px
}
.player-panel svg {
  width:12px;
  height:12px
}
.player-crest {
  display:grid;
  place-items:center;
  width:23px;
  height:29px;
  color:#c8c29a;
  border:1px solid #ac9a6650;
  border-radius:50% 50% 40% 40%;
  background:#203a3a77
}
.side-piles {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  min-height:0;
  width:100%
}
.pile {
  min-width:58px;
  min-height:44px;
  padding:4px;
  border:0;
  background:transparent;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  position:relative;
  color:#dfd6ba;
  text-shadow:0 1px 4px #0008
}
.pile-deck {
  width:59px;
  min-height:74px;
  height:74px;
  border:1px solid #bfa56d;
  border-radius:5px;
  background:linear-gradient(145deg,#1d3545,#132331 70%,#0d1b29);
  box-shadow:inset 0 0 0 3px #0b1a27,inset 0 0 0 4px #93815eaa,3px 2px 0 #152532,4px 3px 0 #968564,6px 5px 0 #142432,7px 6px 0 #86775b,0 7px 12px #0006;
  flex-direction:column;
  gap:0;
  transform:rotate(4deg)
}
.pile-deck:before {
  content:'';
  position:absolute;
  inset:13px 10px;
  border:1px solid #ac9c723d;
  transform:rotate(45deg);
  border-radius:3px;
  pointer-events:none
}
.pile-deck:after {
  content:'✦';
  position:absolute;
  top:10px;
  left:0;
  right:0;
  font:26px/1 Georgia,serif;
  color:#baa77c;
  pointer-events:none
}
.pile-deck>svg {
  display:none
}
.pile-deck .pile-count {
  font:700 19px/1.2 Georgia,serif;
  margin-top:23px;
  z-index:1;
  color:#f1e3c0
}
.pile-deck .pile-label {
  font-size:12px;
  z-index:1;
  color:#baa985
}
.enemy-half .pile-deck {
  transform:rotate(-5deg);
  background:linear-gradient(145deg,#2c3048,#192034 70%,#111c29)
}
.pile-deck:hover {
  transform:rotate(1deg) translateY(-2px)
}
.pile-grave {
  min-height:35px;
  background:#0d182467;
  border:1px solid #b2b7a02a;
  border-radius:3px;
  min-width:64px;
  padding:4px 6px;
  color:#adbdc0
}
.pile-grave svg {
  height:14px;
  width:14px;
  color:#879ba4
}
.pile-count {
  font-size:17px;
  font-weight:700
}
.pile-label {
  font-size:12px
}
.damage-rail {
  grid-area:damage;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:0
}
.damage-zone-button {
  width:70px;
  height:min(100%,177px);
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  background:radial-gradient(ellipse,#7c4a4f17,transparent 75%);
  border:0;
  border-block:1px solid #be90754d;
  border-radius:0;
  padding:9px 4px;
  text-shadow:0 2px 5px #0007;
  position:relative
}
.damage-zone-button:before,.damage-zone-button:after {
  content:'◆';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:7px;
  color:#bca786
}
.damage-zone-button:before {
  top:-6px
}
.damage-zone-button:after {
  bottom:-6px
}
.damage-zone-button>span:first-child {
  font-size:12px;
  color:#c6b5ac
}
.damage-zone-button>strong {
  font:500 36px/1.1 Georgia,serif;
  color:#f0d4c3;
  white-space:nowrap
}
.damage-zone-button>strong small {
  color:#a99f9e;
  font:14px Tahoma,sans-serif
}
.damage-pips {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  width:56px
}
.damage-pips i {
  display:block;
  height:15px;
  background:#121d29a3;
  border:1px solid #b9937b56;
  border-radius:2px;
  transform:rotate(-3deg);
  box-shadow:1px 1px #0004
}
.damage-pips i:nth-child(2n) {
  transform:rotate(3deg)
}
.damage-pips .filled {
  background:linear-gradient(135deg,#dfa596,#9a5b5d);
  border-color:#f0ba9b;
  box-shadow:0 0 8px #ce888a38
}
.damage-zone-button.danger {
  border-color:#f0a09299;
  background:radial-gradient(ellipse,#c85c6e24,transparent 78%)
}
.damage-zone-button.danger>strong {
  color:#ffb9a7;
  text-shadow:0 0 15px #c75e5e80
}
.resource-row {
  grid-area:resources;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:10px;
  min-height:0;
  padding-inline:1px
}
.enemy-half .resource-row {
  flex-direction:row-reverse
}
.out-zone-button {
  width:78px;
  flex:none;
  padding:3px 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:12px;
  color:#b3bfc5;
  background:#101b26a8;
  border-color:#a8b7a42e;
  border-radius:3px
}
.out-zone-button svg {
  height:14px;
  width:14px;
  color:#7e939e
}
.mana-zone-button {
  flex:1;
  min-width:0;
  max-width:760px;
  padding:3px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  border:0;
  border-top:1px solid #b5d5db36;
  border-bottom:1px solid #708d9b29;
  border-radius:18px 3px;
  background:linear-gradient(90deg,#132c3a30,#163b4d9c 30%,#18384b80 72%,#142b3a30);
  box-shadow:inset 0 1px #b8e2e71a
}
.mana-zone-heading {
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap
}
.mana-zone-heading>span {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:#c2e0e9
}
.mana-zone-heading svg {
  width:16px;
  height:18px;
  color:#b2ddec
}
.mana-zone-heading strong {
  font:500 23px/1 Georgia,serif;
  color:#e2f2f0
}
.mana-zone-heading small {
  font:13px Tahoma,sans-serif;
  color:#9bb8c4
}
.mana-card-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px
}
.mana-card {
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:24px;
  border:1px solid #c0e7ec;
  border-radius:3px;
  background:linear-gradient(150deg,#bdeaf0,#6cabc1 60%,#416a88);
  box-shadow:inset 0 0 0 2px #d9fbff38,0 1px 4px #0004;
  color:#315970;
  transform:rotate(-4deg)
}
.mana-card:nth-child(2n) {
  transform:rotate(3deg)
}
.mana-card svg {
  width:12px;
  height:12px;
  stroke-width:1.3
}
.mana-card.spent {
  background:#254053;
  border-color:#638ba099;
  color:#8daec0;
  box-shadow:inset 0 0 0 2px #10293866;
  transform:rotate(9deg)
}
.mana-card.locked {
  background:#12253222;
  border:1px solid #93b7bc25;
  box-shadow:none;
  opacity:.5;
  transform:none
}
.mana-card.locked svg {
  display:none
}
.duel-card {
  --element:#abc695;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:0;
  border:1px solid color-mix(in srgb,var(--element),#b69c66 48%);
  border-radius:7px;
  background:#17232e;
  box-shadow:inset 0 0 0 2px #16202a,0 4px 8px #0009
}
.duel-card:after {
  content:'';
  position:absolute;
  inset:4px;
  border:1px solid #fff2d32a;
  border-radius:3px;
  pointer-events:none;
  z-index:2
}
.card-art {
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('assets/roles-v5.png');
  background-size:400% 400%;
  background-repeat:no-repeat
}
.card-shade {
  position:absolute;
  inset:40% 0 0;
  z-index:-1;
  background:linear-gradient(transparent,#0c1820ed 75%,#0b161efc)
}
.field-card {
  height:100%;
  width:100%;
  min-height:0
}
.field-card .card-bp {
  position:absolute;
  bottom:4px;
  right:6px;
  color:#fff0ce;
  font:700 25px/1.1 Georgia,serif;
  letter-spacing:-.5px;
  text-shadow:0 2px 2px #000,0 0 6px #000;
  z-index:3
}
.card-bp small {
  font:500 12px Tahoma,sans-serif;
  color:#b8c4ba
}
.field-card .stance-mark {
  position:absolute;
  right:5px;
  top:6px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:18px;
  padding:1px 4px;
  color:#d1e7d4;
  background:#143c32db;
  border:1px solid #8dbca360;
  border-radius:3px;
  line-height:1
}
.stance-mark svg {
  width:12px;
  height:12px;
  stroke-width:2
}
.stance-label {
  font-size:12px;
  white-space:nowrap
}
.field-card.resting {
  transform:rotate(5deg);
  border-color:#8b8981;
  box-shadow:0 3px 9px #0008
}
.field-card.resting .card-art {
  filter:saturate(.52) brightness(.78)
}
.field-card.resting .stance-mark {
  color:#d4c8b6;
  background:#433a2ee6;
  border-color:#b29f796b
}
.role-mark {
  position:absolute;
  top:5px;
  left:6px;
  z-index:3;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  color:#f4e4b9;
  filter:drop-shadow(0 1px 3px #000)
}
.role-mark svg {
  width:100%;
  height:100%;
  stroke-width:1.6
}
.card-element {
  position:absolute;
  top:6px;
  right:6px;
  color:var(--element);
  filter:drop-shadow(0 1px 2px #000);
  z-index:3
}
.card-element svg {
  width:17px;
  height:17px
}
.cost-badge {
  position:absolute;
  top:6px;
  left:6px;
  width:30px;
  height:33px;
  display:grid;
  place-items:center;
  z-index:3;
  border:1px solid #e5cc8c;
  border-radius:50% 50% 43% 43%;
  background:radial-gradient(circle at 40% 25%,#445e77,#1d3144 70%);
  box-shadow:inset 0 0 0 2px #10233799,0 2px 5px #0006;
  font:700 22px/1 Georgia,serif;
  color:#fff1c6
}
.duel-card.selected {
  outline:2px solid #e8d298;
  outline-offset:3px;
  border-color:#f7e5b6;
  box-shadow:0 0 0 2px #233d4d,0 0 23px #d2c18b35,0 7px 10px #0007;
  z-index:8
}
.duel-card.playable,.field-card.can-attack {
  border-color:#b9e3f2;
  box-shadow:inset 0 0 0 1px #b0dcf54d,0 0 0 1px #729ebc7a,0 0 17px #91c8e42b,0 4px 9px #0008
}
.duel-card.can-block {
  border-color:#c8e7ed;
  outline:2px solid #9ed6ed;
  outline-offset:2px;
  box-shadow:0 0 20px #a6dff23b
}
.duel-card.attacking {
  outline:2px solid #e4b07c;
  outline-offset:3px;
  box-shadow:0 0 23px #d6a47150
}
.attack-ready {
  position:absolute;
  top:29px;
  right:5px;
  z-index:3;
  color:#c5e9fa;
  filter:drop-shadow(0 1px 3px #000)
}
.attack-ready svg {
  height:17px;
  width:17px
}
.combat-comparison {
  position:absolute;
  left:4px;
  right:4px;
  top:29px;
  z-index:5;
  padding:3px 2px;
  color:#e4f1da;
  background:#1f4b36ee;
  border:1px solid #9bc6a780;
  border-radius:3px;
  text-align:center;
  font-size:12px;
  line-height:1.35
}
.combat-comparison.destroyed {
  color:#ffd0bf;
  background:#643b38ee;
  border-color:#d59a8990
}
.combat-comparison.survives {
  color:#e2efd1;
  background:#2b4e39ee
}
.field-card-name {
  position:absolute;
  left:5px;
  right:5px;
  bottom:30px;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.turn-console {
  position:relative;
  min-height:0;
  display:flex;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  align-self:stretch;
  padding:18px 14px;
  background:linear-gradient(90deg,#0c1a2799,#162737de 15%,#152635e8 85%,#0b192677);
  border-inline:1px solid #bd9f683b;
  box-shadow:inset 1px 0 #e4d2a014,inset -1px 0 #e4d2a00a
}
.turn-console:before,.turn-console:after {
  content:'';
  position:absolute;
  left:11px;
  right:11px;
  height:1px;
  background:linear-gradient(90deg,transparent,#bca77688,transparent)
}
.turn-console:before {
  top:6px
}
.turn-console:after {
  bottom:6px
}
.turn-indicator {
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:5px
}
.turn-indicator>span {
  font-size:12px;
  color:#a7b4b9
}
.turn-indicator>span b {
  color:#ead8ad;
  font:500 27px/1 Georgia,serif;
  padding-left:5px
}
.turn-indicator strong {
  font-size:14px;
  font-weight:500;
  color:#cfe5e9
}
.turn-indicator strong.defending {
  color:#f2c0a8
}
.phase-track {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column
}
.phase-track li {
  position:relative;
  min-height:37px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 7px;
  font-size:12px;
  color:#829ba9
}
.phase-track li>span {
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border:1px solid #a1ada13c;
  border-radius:50%;
  font:12px Georgia,serif;
  z-index:1;
  background:#172a37;
  flex:none
}
.phase-track li:after {
  content:'';
  position:absolute;
  left:17px;
  top:calc(50% + 12px);
  width:1px;
  height:calc(100% - 23px);
  background:#a6b39c35
}
.phase-track li:last-child:after {
  display:none
}
.phase-track li.active {
  color:#f0deb6;
  background:linear-gradient(90deg,#788e8330,#7a8c7020 80%,transparent);
  border-radius:3px
}
.phase-track li.active>span {
  background:#d6bc7c;
  border-color:#f2dfaf;
  color:#25302a;
  box-shadow:0 0 12px #ddc38325
}
.phase-track li.completed {
  color:#afc5bd
}
.phase-track li.completed>span {
  border-color:#a5c6b877;
  color:#c4d8bf
}
.phase-information {
  text-align:center;
  min-width:0
}
.phase-information h1 {
  font-size:16px;
  line-height:1.5;
  font-weight:500;
  color:#e7e5d2
}
.phase-information p {
  font-size:12px;
  line-height:1.65;
  color:#a8bdc6;
  margin-top:5px
}
.phase-button {
  width:100%;
  min-height:66px;
  display:flex;
  gap:7px;
  padding:10px 9px;
  text-align:center;
  font-size:14px;
  line-height:1.45
}
.phase-button-icon {
  display:grid;
  place-items:center
}
.phase-button-icon svg {
  width:19px;
  height:19px
}
.draw-button {
  font-size:12px;
  min-height:44px;
  padding:8px;
  width:100%
}
.turn-console.is-defending {
  border-color:#d3ac7c66
}
.turn-console.is-waiting .phase-track {
  opacity:.55
}
.hand-zone {
  flex:none;
  height:var(--hand-height);
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0 30px 8px;
  position:relative;
  z-index:16;
  background:linear-gradient(#0c172100,#0b1723c9 24%,#0b1421ef 85%)
}
.hand-zone:before {
  content:'';
  position:absolute;
  top:8px;
  left:7%;
  right:7%;
  height:1px;
  background:linear-gradient(90deg,transparent,#b7a57036,transparent)
}
.hand-header {
  flex:none;
  height:28px;
  width:min(1100px,100%);
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1px 3px 0;
  position:relative;
  z-index:1
}
.hand-header h2 {
  font-size:12px;
  font-weight:400;
  color:#b5c2c5
}
.hand-header h2 span {
  font-size:14px;
  font-weight:600;
  color:#eee5c7;
  padding-left:7px
}
.hand-header>span {
  font-size:12px;
  color:#8ea6b0
}
.hand-cards {
  height:calc(100% - 28px);
  min-height:0;
  display:flex;
  align-items:flex-end;
  justify-content:safe center;
  gap:10px;
  padding:12px 8px 3px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:#96815870 transparent
}
.hand-card {
  width:116px;
  height:calc(100% - 3px);
  flex:0 0 116px;
  min-height:0;
  max-height:174px;
  text-align:left;
  transform:translateY(var(--fan-lift,0px)) rotate(var(--fan-angle,0deg));
  transform-origin:50% 135%;
  z-index:calc(2 + var(--hand-index,0))
}
.hand-card .card-shade {
  inset:30% 0 0;
  background:linear-gradient(transparent,#0c1723ed 77%,#0d1823fc)
}
.hand-card .card-name {
  position:absolute;
  left:7px;
  right:7px;
  bottom:37px;
  font-size:13px;
  line-height:1.4;
  font-weight:600;
  color:#f4e9ce;
  text-shadow:0 1px 5px #000
}
.hand-card .card-type {
  position:absolute;
  left:7px;
  right:7px;
  bottom:23px;
  font-size:12px;
  color:#b5c7c2;
  line-height:1.2
}
.hand-card .card-bp {
  position:absolute;
  bottom:5px;
  right:7px;
  font:700 19px/1 Georgia,serif;
  color:#f5e5b7;
  z-index:3;
  text-shadow:0 1px 4px #000
}
.hand-card .card-trigger {
  position:absolute;
  left:7px;
  bottom:5px;
  color:#f1d190;
  display:flex;
  z-index:3
}
.hand-card .card-trigger svg {
  width:17px;
  height:17px;
  stroke-width:1.5
}
.hand-card .cost-badge {
  width:28px;
  height:30px;
  font-size:21px
}
.hand-card.unaffordable .card-art {
  filter:saturate(.7) brightness(.79)
}
.hand-card.unaffordable {
  border-color:#7e897a
}
.hand-card:not(:disabled):hover {
  transform:translateY(calc(var(--fan-lift,0px) - 7px)) rotate(0deg);
  z-index:30;
  box-shadow:0 0 0 1px #d6c59566,0 8px 18px #0008
}
.hand-card.selected {
  transform:translateY(-7px) rotate(0);
  z-index:29
}
.crowded-hand .hand-card {
  transform:none
}
.empty-hand {
  align-self:center;
  font-size:13px;
  color:#c4cec6
}
.context-actions {
  position:absolute;
  z-index:35;
  width:300px;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  padding:12px;
  border:1px solid #c4b68a;
  border-radius:7px;
  background:linear-gradient(135deg,#263b4a,#172a38 70%);
  box-shadow:0 9px 30px #000a,inset 0 0 0 3px #0e1c2b66
}
.context-actions.inline-context {
  top:calc(100% + 8px);
  bottom:auto;
  width:280px
}
.player-half .context-actions.inline-context {
  top:auto;
  bottom:calc(100% + 8px)
}
.context-actions.align-left {
  left:0;
  transform:none
}
.context-actions.align-right {
  left:auto;
  right:0;
  transform:none
}
.context-art {
  height:88px;
  width:62px;
  flex:none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid #a2a484;
  border-radius:4px
}
.context-art .card-art {
  z-index:-1
}
.context-art .cost-badge {
  width:24px;
  height:27px;
  top:4px;
  left:4px;
  font-size:18px
}
.context-content {
  flex:1;
  min-width:0
}
.inline-context .context-art,.inline-context .context-effect {
  display:none
}
.dock-copy {
  padding-right:23px;
  min-width:0
}
.dock-copy strong {
  font-size:15px;
  line-height:1.5;
  display:block;
  color:#f1e4be;
  font-weight:600
}
.dock-copy>span {
  display:block;
  font-size:13px;
  margin:2px 0 3px;
  color:#bdcdd0
}
.context-effect {
  font-size:12px;
  line-height:1.65;
  color:#cbdbd5;
  margin:5px 0
}
.action-reason {
  font-size:12px;
  line-height:1.65;
  color:#adcad2
}
.dock-buttons {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:9px
}
.dock-buttons .primary-button {
  flex:1
}
.dock-buttons button {
  min-height:44px;
  font-size:13px;
  padding:8px 10px
}
.context-close {
  position:absolute;
  top:1px;
  right:1px;
  width:36px;
  height:36px;
  background:transparent;
  border:0;
  color:#bac9c9;
  font-size:25px;
  line-height:1;
  padding:0;
  z-index:2
}
.cell-selected {
  z-index:35
}
.defense-panel {
  position:absolute;
  z-index:32;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(660px,93%);
  max-height:95%;
  overflow:auto;
  overscroll-behavior:contain;
  padding:18px;
  border:1px solid #d4b58c;
  border-radius:8px;
  background:linear-gradient(135deg,#223445f7,#152635fa);
  box-shadow:0 15px 50px #000c,inset 0 0 0 4px #0e1b2a77;
  scrollbar-width:thin
}
.defense-heading {
  display:flex;
  align-items:center;
  gap:11px;
  padding-bottom:13px;
  border-bottom:1px solid #b7c9bc26
}
.defense-heading>svg {
  color:#e2c798;
  width:28px;
  height:28px
}
.defense-heading strong {
  display:block;
  color:#f2d7ae;
  font-size:17px;
  font-weight:500
}
.defense-heading span {
  color:#c5d8d9;
  font-size:13px
}
.waiting-label {
  margin-left:auto;
  text-align:right;
  font-size:12px!important;
  color:#93b2bc!important;
  max-width:110px
}
.defense-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:13px
}
.defense-option {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  min-height:87px;
  text-align:left;
  border-color:#7caab069;
  background:linear-gradient(120deg,#294c5b80,#233d4c)
}
.defense-option:hover {
  background:#355362;
  border-color:#c1e4e8!important
}
.defense-portrait {
  position:relative;
  isolation:isolate;
  height:66px;
  width:47px;
  flex:none;
  overflow:hidden;
  border:1px solid #9bb79a9c;
  border-radius:4px
}
.defense-portrait .card-art {
  z-index:-1
}
.defense-option-copy {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px
}
.defense-option-copy>span {
  display:flex;
  align-items:center;
  gap:4px;
  color:#e2e7d5;
  font-size:13px;
  line-height:1.5
}
.defense-option-copy>span svg {
  width:13px;
  height:13px
}
.defense-option b {
  font:700 22px/1.15 Georgia,serif;
  color:#f0dfb4
}
.defense-option small {
  font-size:12px;
  line-height:1.6;
  color:#b2cad0
}
.take-damage {
  background:linear-gradient(120deg,#62423b99,#3c333e);
  border-color:#cc9d8477
}
.defense-note {
  font-size:12px;
  line-height:1.7;
  padding-top:10px;
  color:#ddc4a8
}
/* Dialogs and card library. */
.modal-root:empty  {
  display:none
}
.modal-root  {
  position:fixed;
  inset:0;
  z-index:40;
  background:#080b16bd;
  backdrop-filter:blur(5px);
  display:grid;
  place-items:center;
  padding:24px
}
.modal  {
  position:relative;
  width:min(760px,100%);
  max-height:calc(100dvh - 48px);
  overflow:auto;
  overscroll-behavior:contain;
  background:#1b2030;
  border:1px solid #c2a97685;
  border-radius:10px;
  box-shadow:0 24px 90px #0009;
  padding:30px
}
.modal-close  {
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  background:#151a27
}
.modal-header  {
  padding-right:28px;
  margin-bottom:20px
}
.modal-header p,.modal>p  {
  color:#cbd0dc;
  margin-top:8px
}
.modal h2  {
  padding-right:24px
}
.modal-actions  {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px
}
.modal-footnote,.rule-note  {
  font-size:13px;
  color:#b8c0d0;
  line-height:1.7;
  margin-top:18px
}
.deck-grid  {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.element-option  {
  display:flex;
  gap:4px;
  flex-direction:column;
  align-items:center;
  padding:15px;
  color:var(--element);
  background:#141a28
}
.element-option svg  {
  width:30px;
  height:30px
}
.element-option strong  {
  font-size:18px
}
.element-option span  {
  font-size:12px;
  color:#c3cad7
}
.element-option.active  {
  border:2px solid var(--element);
  background:color-mix(in srgb,var(--element) 12%,#111522)
}
.deck-composition,.result-stats  {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  padding:15px;
  margin:14px 0;
  border-block:1px solid #69718055
}
.deck-composition>div,.result-stats>div  {
  display:flex;
  flex-direction:column;
  align-items:center
}
.deck-composition strong,.result-stats strong  {
  font-size:24px;
  color:#ead4a1
}
.deck-valid  {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#b6d6ac!important
}
.game-menu  {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:18px 0
}
.game-menu button  {
  min-height:48px;
  padding:10px
}
.menu-status  {
  color:#b5bdce;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:10px
}
.menu-modal  {
  max-width:480px
}
.element-tag  {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--element);
  white-space:nowrap
}
.catalog-detail,.card-detail-layout  {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:24px
}
.inspect-card  {
  position:relative;
  isolation:isolate;
  min-height:250px;
  overflow:hidden;
  border:2px solid var(--element);
  border-radius:8px
}
.inspect-art-title  {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:24px 12px 12px;
  background:linear-gradient(transparent,#0d1224);
  display:flex;
  flex-direction:column
}
.inspect-art-title strong  {
  font-size:19px
}
.inspect-art-title span  {
  font-size:12px;
  color:#d5c9ae
}
.catalog-stats,.inspect-meta  {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin:10px 0
}
.stat-grid  {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin:12px 0
}
.stat-grid>div  {
  display:flex;
  flex-direction:column
}
.stat-grid span  {
  color:#b9c4d5;
  font-size:13px
}
.stat-grid strong  {
  font-size:22px
}
.card-detail-text  {
  font-size:16px;
  line-height:1.8
}
.trigger-explain  {
  display:flex;
  gap:9px;
  background:#d4bb7810;
  border-left:2px solid #dbc387;
  padding:12px;
  margin-top:16px
}
.trigger-explain svg  {
  color:#e4c77e
}
.trigger-explain p  {
  margin-top:4px;
  color:#c7cdd9;
  font-size:13px
}
.no-trigger  {
  font-size:13px;
  color:#b2bdcc;
  margin-top:12px
}
.back-link  {
  margin-bottom:10px
}
.search-input  {
  width:100%;
  background:#101625;
  border:1px solid #8790a060;
  color:white;
  border-radius:5px;
  padding:10px;
  margin:10px 0
}
.element-tabs,.filter-tabs  {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.element-tabs button,.filter-tabs button  {
  min-height:44px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:6px
}
.element-tabs button.active,.filter-tabs button.active  {
  background:#554b34;
  border-color:#e5bf77
}
.collection-grid  {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;
  margin-top:20px
}
.collection-grid .hand-card  {
  height:185px;
  width:100%;
  max-height:none
}
.collection-count  {
  font-size:13px;
  margin-top:12px
}
.settings-row  {
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid #58617255
}
.settings-row p  {
  font-size:13px;
  color:#c0c6d0;
  margin-top:4px
}
.toggle  {
  width:52px;
  height:30px;
  min-width:52px;
  border-radius:20px;
  background:#414859;
  padding:3px
}
.toggle span  {
  display:block;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#ced2dc
}
.toggle.on  {
  background:#a3844e
}
.toggle.on span  {
  transform:translateX(20px);
  background:#fff0d5
}
.rule-block  {
  margin:18px 0
}
.rule-block p  {
  margin-top:8px;
  line-height:1.8;
  color:#d3d7df
}
.rule-grid,.trigger-type-grid  {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px
}
.rule-grid>div,.trigger-type-grid>div  {
  padding:14px;
  background:#111827;
  border:1px solid #666c7955;
  border-radius:5px
}
.trigger-type-grid>div  {
  display:flex;
  flex-direction:column;
  gap:6px
}
.trigger-type-grid span  {
  font-size:12px;
  color:#bec8d8
}
.trigger-lab  {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:20px;
  padding:14px 0
}
.trigger-demo-card  {
  position:relative;
  isolation:isolate;
  min-height:180px;
  overflow:hidden;
  border:1px solid #d9c390;
  border-radius:6px
}
.trigger-demo-card>span:last-child  {
  position:absolute;
  bottom:0;
  background:#131a2be8;
  left:0;
  right:0;
  padding:8px;
  font-size:12px
}
.trigger-lab p  {
  margin:12px 0
}
.trigger-lab small  {
  display:block;
  margin-top:8px
}
.bp-matchup  {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:12px;
  margin:20px 0;
  padding:18px 8px;
  background:#141927
}
.bp-matchup>div  {
  display:flex;
  flex-direction:column
}
.bp-matchup strong  {
  font-size:26px
}
.bp-matchup em  {
  font-size:13px;
  color:#d6bda0;
  font-style:normal
}
.lab-result  {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  background:#3f3826
}
.bp-choices  {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.bp-choices button  {
  padding:10px;
  min-height:44px
}
.bp-choices .active  {
  border-color:#e7cd91
}
.rule-sections ul  {
  padding-left:22px
}
.rule-sections li  {
  margin:8px 0
}
.rule-sections table  {
  border-collapse:collapse;
  width:100%;
  margin-top:14px
}
.rule-sections td,.rule-sections th  {
  padding:10px;
  border-bottom:1px solid #646d7c77;
  text-align:left
}
.log-entry  {
  display:flex;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #525e7455;
  font-size:14px
}
.log-turn  {
  color:#c7ae7a;
  min-width:32px
}
.log-entry.damage  {
  color:#f4b3a9
}
.result-emblem  {
  color:#e5c181;
  margin-bottom:12px
}
.result-emblem svg  {
  width:50px;
  height:50px
}
.toast  {
  position:fixed;
  z-index:60;
  top:78px;
  left:50%;
  transform:translate(-50%,-12px);
  max-width:min(620px,90vw);
  padding:12px 18px;
  border:1px solid #bda579;
  background:#171d2ef5;
  color:#f5e5c4;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  font-size:14px;
  box-shadow:0 8px 30px #0008
}
.toast.visible  {
  opacity:1;
  transform:translate(-50%,0)
}
.large-text .modal  {
  font-size:17px
}
.large-text .modal p  {
  font-size:16px
}
.learn-steps>div  {
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid #66708055
}
.learn-steps>div>span  {
  width:28px;
  flex-shrink:0;
  color:#ebcc92;
  font-size:20px
}
.learn-steps p  {
  color:#c8d0dc;
  margin-top:4px
}
.bp-chooser  {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0
}
.bp-chooser button  {
  min-height:44px;
  padding:8px 12px
}
.bp-chooser button.active  {
  border-color:var(--gold);
  background:#51452f
}
/* Pre-game choices and target selection keep each card's decision together. */
.mulligan-grid  {
   display:grid;
   grid-template-columns:repeat(5,minmax(0,1fr));
   gap:10px;
   margin-top:20px;
}
.mulligan-card  {
   padding:5px;
   display:flex;
   flex-direction:column;
   gap:6px;
   text-align:left;
   min-width:0;
}
.mulligan-card strong  {
   font-size:13px;
}
.mulligan-card>span:last-child  {
   font-size:12px;
   color:#d7dce6;
}
.mulligan-card.selected  {
   outline:2px solid #e9c887;
   background:#51432d;
}
.mulligan-art  {
   position:relative;
   isolation:isolate;
   display:block;
   height:105px;
   width:100%;
   overflow:hidden;
   border-radius:4px;
}
.target-grid  {
   display:grid;
   gap:10px;
   margin-top:20px;
   grid-template-columns:repeat(2,minmax(0,1fr));
}
.target-grid button  {
   padding:14px;
   display:flex;
   flex-direction:column;
   gap:5px;
   text-align:left;
}
.target-grid span  {
   color:#c7d2df;
   font-size:14px;
}
.target-grid b  {
   color:#f1d299;
   font-size:14px;
}
.lab-controls  {
   display:flex;
   gap:8px;
   flex-wrap:wrap;
   margin-top:10px;
}
.lab-controls button  {
   padding:8px 12px;
   min-height:44px;
}
.lab-controls button.active  {
   border-color:var(--gold);
   background:#51452f;
}
/* Card atlas coordinates. */
.art-0 {
  background-position:0.000000% 0.000000%
}
.art-1 {
  background-position:33.333333% 0.000000%
}
.art-2 {
  background-position:66.666667% 0.000000%
}
.art-3 {
  background-position:100.000000% 0.000000%
}
.art-4 {
  background-position:0.000000% 33.333333%
}
.art-5 {
  background-position:33.333333% 33.333333%
}
.art-6 {
  background-position:66.666667% 33.333333%
}
.art-7 {
  background-position:100.000000% 33.333333%
}
.art-8 {
  background-position:0.000000% 66.666667%
}
.art-9 {
  background-position:33.333333% 66.666667%
}
.art-10 {
  background-position:66.666667% 66.666667%
}
.art-11 {
  background-position:100.000000% 66.666667%
}
.art-12 {
  background-position:0.000000% 100.000000%
}
.art-13 {
  background-position:33.333333% 100.000000%
}
.art-14 {
  background-position:66.666667% 100.000000%
}
.art-15 {
  background-position:100.000000% 100.000000%
}
/* Selected hand cards use reserved space, so all placement targets stay visible. */
.hand-zone.has-selection {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,420px);
  grid-template-rows:28px minmax(0,1fr);
  column-gap:22px
}
.has-selection .hand-header {
  grid-column:1/-1;
  grid-row:1
}
.has-selection .hand-cards {
  grid-column:1;
  grid-row:2;
  height:100%;
  justify-content:safe center
}
.context-actions.hand-context {
  position:relative;
  grid-column:2;
  grid-row:2;
  width:100%;
  height:100%;
  left:auto;
  right:auto;
  bottom:auto;
  top:auto;
  transform:none;
  overflow:auto;
  padding:8px 12px;
  align-items:center;
  box-shadow:0 4px 20px #0005
}
.hand-context .context-content {
  align-self:stretch;
  min-height:0
}
.hand-context .context-effect,.hand-context .action-reason {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  overflow:hidden;
  line-height:1.5;
  margin:2px 0
}
.hand-context .dock-buttons {
  margin-top:5px;
  flex-wrap:nowrap
}
.hand-context .dock-buttons button {
  padding:6px 9px;
  font-size:12px
}
.hand-context .dock-copy strong {
  font-size:14px
}
.hand-context .dock-copy>span {
  font-size:12px;
  margin:1px 0
}
.hand-context .context-art {
  width:58px;
  height:82px
}
.field-card .card-element {
  display:none
}
.field-card .stance-mark {
  top:6px;
  bottom:auto;
  left:auto;
  right:5px
}
.field-card .card-bp {
  bottom:5px;
  right:7px
}
.field-card .role-mark {
  width:18px;
  height:18px
}
.field-card .combat-comparison {
  top:34px
}
.modal {
  background:linear-gradient(130deg,#203644,#142333);
  border-color:#c8ad7480;
  border-radius:8px;
  box-shadow:0 24px 90px #000a,inset 0 0 0 4px #0b182445
}
.modal-close {
  background:#172a38
}
.deck-grid {
  grid-template-columns:repeat(5,minmax(0,1fr))
}
.element-option {
  background:radial-gradient(ellipse at top,color-mix(in srgb,var(--element),transparent 85%),#112331);
  border-color:color-mix(in srgb,var(--element),transparent 60%);
  min-height:112px
}
.element-option.active {
  box-shadow:inset 0 0 0 2px var(--element),0 0 20px color-mix(in srgb,var(--element),transparent 85%)
}
.newgame-modal {
  width:min(800px,100%)
}
.newgame-modal .modal-actions {
  justify-content:center
}
.newgame-modal .modal-header {
  text-align:center
}
.newgame-modal .deck-valid {
  text-align:center;
  justify-content:center
}
.newgame-modal .primary-button {
  min-width:210px
}
.toast {
  top:calc(var(--hud-height) + 12px);
  font-size:13px
}
@media(max-height:800px) {
 :root {
  --hud-height:50px;
  --hand-height:152px;
  --console-width:176px;
  --field-width:clamp(82px,calc((100dvh - 310px)*.24),118px)
}
 .match-stage {
  padding-top:6px;
  gap:12px
}
 .turn-console {
  padding:10px;
  gap:9px
}
 .phase-track li {
  min-height:29px;
  padding-block:3px
}
 .phase-information p {
  line-height:1.5
}
 .turn-indicator>span b {
  font-size:23px
}
 .phase-button {
  min-height:57px
}
 .table-half {
  grid-template-rows:minmax(0,1fr) 30px;
  gap:5px 10px
}
 .enemy-half {
  grid-template-rows:30px minmax(0,1fr)
}
 .player-panel {
  display:none
}
 .pile-deck {
  min-height:62px;
  height:62px;
  width:50px
}
 .pile-deck:after {
  font-size:21px;
  top:8px
}
 .pile-deck .pile-count {
  margin-top:17px;
  font-size:18px
}
 .damage-zone-button {
  max-height:137px;
  gap:5px
}
 .damage-zone-button>strong {
  font-size:29px
}
 .damage-pips i {
  height:11px
}
 .mana-card {
  height:20px;
  width:14px
}
 .field-card .card-bp {
  font-size:22px
}
 .hand-zone.has-selection {
  --hand-height:176px
}
 .hand-card {
  width:110px;
  flex-basis:110px
}
 .coach-panel {
  padding-block:4px;
  gap:8px
}
 .coach-panel p {
  display:none
}
 .coach-panel button {
  min-height:36px;
  padding:5px 10px
}
}
@media(max-width:1100px) {
 :root {
  --console-width:162px
}
 .game-hud {
  padding-inline:16px
}
 .match-stage {
  padding-inline:14px;
  gap:10px
}
 .table-half {
  grid-template-columns:62px minmax(0,1fr) 62px;
  column-gap:8px
}
 .board-row {
  grid-template-columns:26px minmax(0,1fr);
  gap:6px
}
 .row-label {
  writing-mode:vertical-rl;
  letter-spacing:1px;
  justify-self:center
}
 .field-row {
  gap:9px
}
 .out-zone-button {
  width:62px
}
 .mana-zone-button {
  gap:10px;
  padding-inline:8px
}
 .mana-card-row {
  gap:4px
}
 .damage-zone-button {
  width:59px
}
 .battle-divider {
  padding-inline:75px
}
 .turn-console {
  padding-inline:10px
}
 .hand-zone {
  padding-inline:18px
}
 .hand-zone.has-selection {
  grid-template-columns:minmax(0,1fr) 340px;
  gap:0 14px
}
 .hand-context .context-art {
  display:none
}
 .context-actions.inline-context {
  width:260px
}
}
@media(max-width:760px) and (min-height:501px) {
 :root {
  --hud-height:48px;
  --hand-height:152px;
  --field-width:100px;
  --back-width:84px
}
 .game-hud {
  gap:8px;
  padding-inline:10px
}
 .game-wordmark {
  font-size:14px;
  letter-spacing:2px
}
 .menu-button {
  width:44px;
  padding:6px;
  font-size:21px
}
 .menu-button span {
  display:none
}
 .hud-tools {
  gap:0
}
 .hud-tools button {
  width:40px;
  min-height:40px;
  padding:8px
}
 .opponent-hand {
  top:-12px;
  left:50%;
  height:40px
}
 .opponent-card-backs>i {
  width:22px;
  height:31px;
  margin-left:-10px
}
 .opponent-card-backs svg {
  width:12px;
  height:12px
}
 .opponent-hand-count {
  font-size:12px;
  top:25px;
  white-space:nowrap
}
 .match-stage {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  padding:5px 8px 0;
  gap:4px
}
 .turn-console {
  display:grid;
  grid-template-columns:98px minmax(0,1fr) 145px;
  grid-template-rows:1fr;
  align-items:center;
  gap:8px;
  padding:8px 6px;
  min-height:80px;
  border-inline:0;
  border-block:1px solid #bda66c44;
  background:linear-gradient(90deg,#122431ee,#1d3545ee,#122331ee)
}
 .turn-console:before,.turn-console:after,.phase-track,.phase-information p {
  display:none
}
 .turn-indicator {
  text-align:left;
  gap:2px
}
 .turn-indicator>span {
  font-size:12px
}
 .turn-indicator>span b {
  font-size:20px
}
 .turn-indicator strong {
  font-size:13px
}
 .phase-information h1 {
  font-size:13px;
  text-align:left
}
 .phase-button {
  min-height:52px;
  font-size:13px;
  padding:7px;
  gap:5px;
  grid-column:3;
  grid-row:1
}
 .phase-button-icon svg {
  width:17px;
  height:17px
}
 .draw-button {
  grid-row:2;
  grid-column:2/4;
  min-height:38px;
  padding:5px
}
 .turn-console.is-draw {
  grid-template-rows:1fr auto;
  row-gap:4px;
  min-height:112px
}
 .turn-console.is-draw .turn-indicator {
  grid-row:1/3
}
 .turn-console.is-draw .phase-information {
  grid-column:2;
  grid-row:1
}
 .table-half {
  grid-template-columns:50px minmax(0,1fr) 50px;
  gap:5px 6px;
  padding-inline:0;
  grid-template-rows:minmax(0,1fr) 30px
}
 .enemy-half {
  grid-template-rows:30px minmax(0,1fr)
}
 .board-row {
  display:block;
  position:relative
}
 .row-label {
  display:none
}
 .field-row {
  height:100%;
  gap:8px
}
 .zone-rows {
  gap:6px
}
 .damage-zone-button {
  width:46px;
  min-height:64px;
  padding:5px 2px;
  gap:5px
}
 .damage-zone-button>strong {
  font-size:27px
}
 .damage-zone-button>strong small {
  display:block;
  font-size:12px
}
 .damage-pips {
  width:35px;
  grid-template-columns:repeat(2,1fr);
  gap:3px
}
 .damage-pips i {
  height:9px
}
 .player-panel {
  display:none
}
 .pile-deck {
  width:40px;
  min-height:57px;
  height:57px
}
 .pile-deck:before {
  inset:14px 10px
}
 .pile-deck .pile-count {
  font-size:18px;
  margin-top:14px
}
 .pile-deck:after {
  font-size:18px;
  top:7px
}
 .pile-grave {
  min-width:44px;
  padding:3px;
  gap:3px
}
 .pile-grave svg {
  display:none
}
 .out-zone-button {
  width:50px;
  padding:2px;
  gap:3px
}
 .out-zone-button svg {
  display:none
}
 .resource-row {
  gap:6px
}
 .mana-zone-button {
  padding:3px 6px;
  gap:8px;
  justify-content:center
}
 .mana-zone-heading {
  gap:4px
}
 .mana-zone-heading>span {
  font-size:12px
}
 .mana-zone-heading svg {
  display:none
}
 .mana-zone-heading strong {
  font-size:20px
}
 .mana-zone-heading small {
  font-size:12px
}
 .mana-card-row {
  gap:3px
}
 .mana-card {
  height:18px;
  width:10px;
  border-radius:2px
}
 .mana-card svg {
  width:8px;
  height:8px
}
 .field-card .card-bp {
  font-size:20px;
  right:3px;
  bottom:6px;
  letter-spacing:-.7px
}
 .field-card .card-bp small,.field-card .role-mark {
  display:none
}
 .field-card .stance-mark {
  right:3px;
  top:4px;
  padding:2px 3px;
  gap:2px;
  min-height:17px
}
 .stance-mark svg {
  width:11px;
  height:11px
}
 .stance-label {
  font-size:12px
}
 .attack-ready {
  right:4px;
  top:30px
}
 .attack-ready svg {
  height:14px;
  width:14px
}
 .combat-comparison {
  display:none
}
 .battle-divider {
  padding-inline:57px;
  gap:8px
}
 .hand-zone {
  padding:0 8px 7px
}
 .hand-header {
  height:25px;
  padding-inline:3px
}
 #hand-hint {
  font-size:12px
}
 .hand-cards {
  height:calc(100% - 25px);
  gap:7px;
  padding-top:8px;
  justify-content:safe center
}
 .hand-card {
  transform:none!important;
  width:100px;
  flex-basis:100px
}
 .hand-card .card-name {
  font-size:12px
}
 .hand-card .cost-badge {
  width:25px;
  height:28px;
  font-size:19px
}
 .hand-zone.has-selection {
  --hand-height:282px;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:23px 137px minmax(0,1fr);
  gap:4px 0
}
 .has-selection .hand-header {
  grid-column:1;
  grid-row:1
}
 .has-selection .hand-cards {
  grid-column:1;
  grid-row:3;
  height:100%;
  padding-top:4px
}
 .context-actions.hand-context {
  grid-column:1;
  grid-row:2;
  padding:7px 9px;
  border-radius:5px
}
 .hand-context .context-art {
  display:block;
  width:54px;
  height:76px
}
 .hand-context .context-effect {
  display:none
}
 .hand-context .action-reason {
  -webkit-line-clamp:2
}
 .hand-context .dock-buttons {
  margin-top:5px
}
 .context-actions.inline-context {
  width:246px
}
 .context-actions.align-left {
  left:-10px
}
 .context-actions.align-right {
  right:-10px
}
 .context-actions.inline-context:not(.align-left):not(.align-right) {
  left:50%;
  transform:translateX(-50%)
}
 .defense-panel {
  width:calc(100% - 8px);
  padding:12px;
  max-height:96%
}
 .defense-options {
  gap:6px
}
 .defense-option {
  padding:8px;
  gap:5px;
  min-height:90px
}
 .defense-portrait {
  display:none
}
 .defense-option b {
  font-size:19px
}
 .defense-option-copy>span {
  font-size:12px
}
 .defense-heading {
  padding-bottom:8px
}
 .defense-heading strong {
  font-size:15px
}
 .defense-heading span {
  font-size:12px
}
 .defense-note {
  padding-top:7px
}
 .coach-panel {
  padding:5px 8px;
  gap:7px
}
 .coach-panel>span,.coach-panel p {
  display:none
}
 .coach-panel strong {
  font-size:12px
}
 .coach-panel button {
  font-size:12px;
  min-height:36px;
  padding:4px 7px
}
 .coach-panel .quiet-button {
  max-width:86px
}
 .modal-root {
  padding:12px
}
 .modal {
  padding:23px 18px;
  max-height:calc(100dvh - 24px)
}
 .deck-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px
}
 .element-option {
  min-height:94px;
  padding:12px
}
 .mulligan-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px
}
 .mulligan-art {
  height:82px
}
 .target-grid {
  grid-template-columns:1fr
}
 .card-detail-layout {
  grid-template-columns:100px minmax(0,1fr);
  gap:14px
}
 .inspect-card {
  height:145px
}
 .stat-grid {
  gap:8px
}
 .stat-grid strong {
  font-size:20px
}
 .collection-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px
}
 .collection-grid .hand-card {
  width:100%
}
 .trigger-lab {
  grid-template-columns:1fr
}
 .trigger-demo-card {
  display:none
}
 .trigger-type-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
 .rules-summary>div {
  grid-template-columns:1fr;
  gap:3px
}
}
@media(max-width:430px) and (min-height:501px) {
 .game-wordmark {
  display:none
}
 .opponent-hand {
  left:44%
}
 .match-stage {
  padding-inline:5px
}
 .turn-console {
  grid-template-columns:83px minmax(0,1fr) 134px;
  gap:5px
}
 .table-half {
  grid-template-columns:44px minmax(0,1fr) 44px;
  column-gap:5px
}
 .out-zone-button {
  width:44px
}
 .field-row {
  gap:6px
}
 .mana-zone-button {
  gap:6px;
  padding-inline:4px
}
 .mana-card-row {
  gap:2px
}
 .mana-card {
  width:9px;
  height:17px
}
 .mana-zone-heading strong {
  font-size:18px
}
 .mana-zone-heading>span {
  display:none
}
 .field-card .card-bp {
  font-size:18px;
  letter-spacing:-.5px
}
 .field-card .stance-mark svg {
  display:none
}
 .hand-context .context-art {
  display:none
}
 .context-actions.inline-context {
  width:230px
}
 .context-actions.inline-context:not(.align-left):not(.align-right) {
  left:calc(50% + 24px)
}
 .card-cell:nth-child(3) .context-actions.inline-context {
  left:calc(50% - 24px)
}
 .card-detail-layout {
  grid-template-columns:1fr
}
 .inspect-card {
  height:170px;
  width:120px;
  margin:auto
}
}
/* Wide but short devices retain the side console and a compact hand. */
@media(max-height:500px) {
 :root {
  --hud-height:40px;
  --hand-height:94px;
  --console-width:145px;
  --field-width:86px;
  --back-width:70px
}
 .game-hud {
  padding:2px 14px;
  gap:10px
}
 .game-wordmark {
  font-size:15px
}
 .menu-button,.hud-tools button {
  min-height:34px;
  height:34px;
  padding:4px 10px
}
 .opponent-hand {
  top:-16px;
  height:37px
}
 .opponent-card-backs>i {
  height:35px;
  width:25px
}
 .opponent-hand-count {
  top:23px
}
 .match-stage {
  grid-template-columns:minmax(0,1fr) var(--console-width);
  grid-template-rows:minmax(0,1fr);
  padding:3px 12px;
  gap:9px
}
 .battle-table {
  grid-template-rows:minmax(0,1fr) 7px minmax(0,1fr)
}
 .table-half {
  grid-template-columns:48px minmax(0,1fr) 48px;
  grid-template-rows:minmax(0,1fr) 23px;
  gap:3px 6px;
  padding-block:1px
}
 .enemy-half {
  grid-template-rows:23px minmax(0,1fr)
}
 .zone-rows {
  gap:4px;
  grid-template-rows:minmax(0,1.15fr) minmax(0,.85fr)
}
 .enemy-half .zone-rows {
  grid-template-rows:minmax(0,.85fr) minmax(0,1.15fr)
}
 .board-row {
  grid-template-columns:23px minmax(0,1fr);
  gap:4px
}
 .field-row {
  gap:9px
}
 .row-label {
  writing-mode:horizontal-tb;
  letter-spacing:0;
  font-size:12px
}
 .row-label {
  visibility:hidden
}
 .field-card .card-bp {
  font-size:18px;
  bottom:3px
}
 .field-card .card-bp small,.field-card .role-mark {
  display:none
}
 .field-card .stance-mark {
  top:3px;
  left:3px;
  right:auto;
  padding:1px 3px;
  min-height:15px;
  gap:2px
}
 .field-card .stance-mark svg {
  display:none
}
 .back-row .field-card .stance-label {
  font-size:12px
}
 .back-row .field-card .card-bp {
  right:3px;
  bottom:2px
}
 .attack-ready {
  top:3px;
  right:4px
}
 .combat-comparison {
  display:none
}
 .side-piles {
  gap:4px
}
 .pile-deck {
  height:39px;
  min-height:39px;
  width:34px
}
 .pile-deck:after,.pile-deck:before,.pile-deck .pile-label {
  display:none
}
 .pile-deck .pile-count {
  font-size:18px;
  margin:0
}
 .pile-grave {
  min-height:25px;
  min-width:44px;
  padding:1px 3px;
  font-size:12px
}
 .pile-grave svg {
  display:none
}
 .damage-zone-button {
  min-height:50px;
  width:43px;
  padding:3px;
  gap:2px
}
 .damage-zone-button>span:first-child {
  font-size:12px
}
 .damage-zone-button>strong {
  font-size:25px
}
 .damage-zone-button>strong small {
  font-size:12px
}
 .damage-pips {
  display:none
}
 .out-zone-button {
  width:48px;
  padding:1px 3px;
  font-size:12px
}
 .out-zone-button svg {
  display:none
}
 .mana-zone-button {
  padding:1px 7px;
  gap:10px
}
 .mana-zone-heading {
  gap:6px
}
 .mana-zone-heading svg {
  display:none
}
 .mana-zone-heading strong {
  font-size:19px
}
 .mana-card {
  width:12px;
  height:16px
}
 .mana-card svg {
  width:9px;
  height:9px
}
 .battle-divider {
  padding-inline:60px
}
 .turn-console {
  padding:7px 9px;
  gap:7px
}
 .turn-indicator {
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:9px
}
 .turn-indicator>span b {
  font-size:20px
}
 .turn-indicator strong {
  font-size:12px
}
 .phase-track {
  display:none
}
 .phase-information h1 {
  font-size:14px
}
 .phase-information p {
  font-size:12px;
  line-height:1.4
}
 .phase-button {
  min-height:47px;
  font-size:13px;
  padding:6px
}
 .draw-button {
  min-height:38px;
  font-size:12px;
  padding:4px
}
 .hand-zone {
  padding:0 15px 4px
}
 .hand-header {
  height:21px
}
 .hand-cards {
  height:calc(100% - 21px);
  padding:3px 8px;
  gap:8px
}
 .hand-card {
  width:112px;
  flex-basis:112px;
  transform:none!important
}
 .hand-card .cost-badge {
  width:23px;
  height:25px;
  top:3px;
  left:4px;
  font-size:18px
}
 .hand-card .card-name {
  font-size:12px;
  left:33px;
  bottom:22px;
  right:4px;
  line-height:1.3
}
 .hand-card .card-bp {
  bottom:3px;
  font-size:16px
}
 .hand-card .card-type {
  display:none
}
 .hand-card .card-element {
  display:none
}
 .hand-zone.has-selection {
  --hand-height:116px;
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-rows:21px minmax(0,1fr);
  column-gap:10px
}
 .context-actions.hand-context {
  padding:5px 9px;
  grid-row:2;
  grid-column:2
}
 .hand-context .context-art,.hand-context .context-effect,.hand-context .action-reason,.hand-context .dock-copy>span {
  display:none
}
 .hand-context .dock-copy strong {
  font-size:13px
}
 .hand-context .dock-buttons {
  margin-top:3px
}
 .hand-context .dock-buttons button {
  min-height:40px;
  padding:5px 8px
}
 .context-actions.inline-context {
  position:fixed;
  width:270px;
  top:44px;
  bottom:auto;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  max-height:calc(100dvh - 52px);
  overflow:auto
}
 .player-half .context-actions.inline-context {
  top:44px;
  bottom:auto
}
 .defense-panel {
  max-height:97%;
  padding:10px;
  width:min(680px,98%)
}
 .defense-options {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:7px
}
 .defense-heading {
  padding-bottom:6px
}
 .defense-heading strong {
  font-size:14px
}
 .defense-heading span {
  font-size:12px
}
 .defense-option {
  min-height:69px;
  padding:6px
}
 .defense-portrait {
  display:none
}
 .defense-option b {
  font-size:18px
}
 .defense-option-copy>span,.defense-option small {
  font-size:12px;
  line-height:1.4
}
 .defense-note {
  padding-top:5px
}
 .coach-panel {
  padding:3px 12px;
  gap:8px
}
 .coach-panel p,.coach-panel>span {
  display:none
}
 .coach-panel strong {
  font-size:12px
}
 .coach-panel button {
  min-height:30px;
  padding:3px 8px
}
 .modal-root {
  padding:8px
}
 .modal {
  max-height:calc(100dvh - 16px);
  padding:22px
}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  transition:none!important;
  animation:none!important;
  scroll-behavior:auto!important
}
}

/* A title screen is the entry point. A saved match advances only after Continue. */
.start-screen{height:100dvh;overflow:auto;display:flex;flex-direction:column;padding:22px clamp(20px,5vw,80px) 28px;background:linear-gradient(90deg,#07121bdc,#07121b77 42%,#07121be8),url('assets/arena.webp') center/cover}
.start-header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;flex:none}
.start-wordmark{font:600 27px/1 Georgia,serif;letter-spacing:5px;color:#ead6a8;text-shadow:0 3px 12px #0009}
.start-tools{display:flex;align-items:center;gap:8px}
.start-tools button{color:#e0d6bd;border-color:#c6ad733d;background:#14253277}
.start-layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(370px,470px);align-items:center;gap:clamp(24px,6vw,100px);max-width:1100px;width:100%;margin:20px auto 0}
.start-showcase{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0}
.start-card{width:min(34vw,340px);max-width:100%;position:relative}
.start-deck-name{font-size:16px;letter-spacing:1px;color:#eadfc5;text-shadow:0 2px 5px #000}
.start-controls{padding:24px 0;display:flex;flex-direction:column;gap:18px;min-width:0}
.start-mode{color:#d3bb8a;font-size:14px;letter-spacing:1px}
.start-controls h1{font-size:34px;line-height:1.5;font-weight:500;color:#f6edda;text-shadow:0 2px 10px #0008}
.start-decks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.start-decks .start-element{min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid color-mix(in srgb,var(--element),transparent 50%);border-radius:6px;padding:10px 4px;background:linear-gradient(145deg,color-mix(in srgb,var(--element),#162735 84%),#122331e8);color:var(--element);box-shadow:0 4px 12px #0004}
.start-decks .start-element svg{width:29px;height:29px;stroke-width:2.2}
.start-decks .start-element strong{font-size:14px;font-weight:500}
.start-decks .start-element.active{outline:2px solid var(--element);outline-offset:3px;background:linear-gradient(135deg,color-mix(in srgb,var(--element),#162735 65%),#152737);box-shadow:0 0 22px color-mix(in srgb,var(--element),transparent 76%)}
.start-deck-summary{display:flex;justify-content:space-between;gap:12px;color:#f3dfb1;font-size:17px;border-block:1px solid #bca36b3d;padding:11px 0}
.start-deck-summary span{font-size:14px;color:#c0cbd1;align-self:center}
.start-actions{display:flex;gap:10px;margin-top:3px}
.start-actions button{min-height:55px;font-size:15px}
.start-play{flex:1;justify-content:space-between;padding-inline:20px}
.start-resume{padding-top:15px;border-top:1px solid #a4b0b238}
.start-resume p{font-size:13px;color:#b7c5d1;margin-bottom:4px}
.start-resume button{padding-inline:0;color:#e6d0a2;font-size:14px}
.start-note{font-size:13px;color:#a0b5c1}
@media(max-width:800px){
 .start-screen{padding:14px 22px 22px}
 .start-layout{gap:24px;grid-template-columns:minmax(0,1fr) minmax(300px,1.2fr)}
 .start-controls{gap:14px}
 .start-controls h1{font-size:28px}
 .start-decks{gap:7px}
 .start-decks .start-element{min-height:72px}
 .start-decks .start-element svg{width:24px;height:24px}
 .start-card{width:100%}
 .start-actions button{padding-inline:12px;font-size:14px}
}
@media(max-width:600px) and (min-height:501px){
 .start-screen{padding:10px 18px 18px}
 .start-header{min-height:42px}
 .start-wordmark{font-size:20px;letter-spacing:3px}
 .start-tools{gap:5px}
 .start-tools button{min-height:38px;padding:5px 9px;font-size:13px}
 .start-layout{display:flex;flex-direction:column;gap:8px;margin-top:6px;justify-content:center}
 .start-showcase{gap:5px}
 .start-card{width:min(41vw,180px)}
 .start-deck-name{font-size:13px}
 .start-controls{width:100%;padding:8px 0;gap:12px}
 .start-mode{display:none}
 .start-controls h1{font-size:25px;text-align:center}
 .start-decks{gap:8px}
 .start-decks .start-element{min-height:64px;padding:8px 4px}
 .start-deck-summary{padding:8px 0;font-size:15px}
 .start-actions button{min-height:48px;font-size:14px}
 .start-resume{padding-top:8px}
 .start-resume p{font-size:12px}
 .start-resume button{min-height:38px;font-size:13px;padding-block:4px}
 .start-note{text-align:center;font-size:12px}
 .mulligan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .mulligan-card>strong{font-size:12px}
}
@media(max-height:500px){
 .start-screen{padding:6px 24px 12px}
 .start-header{min-height:37px}
 .start-wordmark{font-size:20px;letter-spacing:3px}
 .start-tools button{min-height:34px;padding:4px 9px;font-size:13px}
 .start-layout{grid-template-columns:minmax(0,.85fr) minmax(340px,1.4fr);gap:40px;margin:4px auto 0;max-width:840px}
 .start-card{width:min(26vw,calc((100dvh - 90px)*.667))}
 .start-deck-name{font-size:12px}
 .start-showcase{gap:3px}
 .start-controls{padding:4px 0;gap:9px}
 .start-controls h1{font-size:23px}
 .start-mode,.start-note{display:none}
 .start-decks .start-element{min-height:51px;gap:2px;padding:5px}
 .start-decks .start-element svg{width:21px;height:21px}
 .start-decks .start-element strong{font-size:12px}
 .start-deck-summary{padding:5px 0;font-size:14px}
 .start-deck-summary span{font-size:12px}
 .start-actions button{min-height:42px;font-size:13px;padding:6px 12px}
 .start-resume{padding-top:5px;display:flex;align-items:center;gap:10px}
 .start-resume p,.start-resume button{font-size:12px;margin:0}
 .start-resume button{padding:4px;min-height:34px}
}

/* Bundled open fonts approximate the reference's heavy Thai and condensed numerals. */
@font-face{font-family:'Card Thai';src:url('assets/fonts/Kanit-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Card Thai';src:url('assets/fonts/Kanit-ExtraBoldItalic.ttf') format('truetype');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:'Card Numbers';src:url('assets/fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Plaque rectangles and margins live in card-layout.js, in source-image pixels. */
.frame-fire{--card-frame:url('assets/frames-v8/frame-red.png');--gem:#ef3d45;--gem-dark:#530512}
.frame-light{--card-frame:url('assets/frames-v8/frame-yellow.png');--gem:#ffe435;--gem-dark:#a96600}
.frame-dark{--card-frame:url('assets/frames-v8/frame-purple.png');--gem:#b75bff;--gem-dark:#32075c}
.frame-water{--card-frame:url('assets/frames-v8/frame-blue.png');--gem:#48bdff;--gem-dark:#043a80}
.frame-earth{--card-frame:url('assets/frames-v8/frame-green.png');--gem:#8bf047;--gem-dark:#15522b}
.card-frame{position:absolute;inset:0;z-index:2;background:var(--card-frame) center/100% 100% no-repeat;pointer-events:none}
.card-window{position:absolute;inset:13% 10% 11%;overflow:hidden;isolation:isolate;z-index:0;background:#17212b;border-radius:5%}
.illustrated-card{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:2/3;container-type:inline-size;filter:drop-shadow(0 12px 18px #0008);text-align:center}
.frame-slot,.illustrated-card .frame-slot{position:absolute;z-index:4;display:block;min-width:0;margin:0;padding:0;transform:none;pointer-events:none}
.frame-slot>.slot-lettering{display:block;width:100%;height:100%;max-width:none;overflow:visible;fill:none;stroke:none}
.frame-text{font-family:'Card Thai','Leelawadee UI',Tahoma,sans-serif;font-weight:800;font-style:normal;fill:#f8f3e8;stroke:#11131d;stroke-width:3.5;paint-order:stroke fill;stroke-linejoin:round;stroke-linecap:round;letter-spacing:0}
.frame-text-cost{font-family:'Card Numbers',Impact,sans-serif;font-weight:400;fill:#fffdf5;stroke:#10111b;stroke-width:6}
.frame-text-name{font-style:italic;fill:#171820;stroke:#fff9ee;stroke-width:1.5}
.frame-text-bp{font-family:'Card Numbers',Impact,sans-serif;font-weight:400;font-style:italic;fill:#f5dd66;stroke:#10171c;stroke-width:4}
.frame-text-race{fill:#24212c;stroke:#fff8ea;stroke-width:1.4}
.frame-text-kind{fill:#fff7e8;stroke:#17121c;stroke-width:3.4}
.frame-safe,.frame-guide{display:none}
.damage-gems{position:absolute;left:9.99%;top:16.25%;width:14.6%;height:3.4%;z-index:5;display:flex;align-items:center;justify-content:flex-start;gap:0;isolation:isolate;pointer-events:none}
.damage-socket{position:relative;display:block;flex:0 0 34.666667%;aspect-ratio:1;border-radius:50%;border:1px solid #090b15;background:conic-gradient(from -35deg,#fff4d8,#8a7882 16%,#151522 28%,#ece5e4 45%,#b0a4a6 56%,#2a2532 72%,#e6d8be 91%,#fff4d8);box-shadow:0 1px 2px #0009,inset 0 0 0 1px #fff7}
.damage-socket+.damage-socket{margin-left:-2%}
.damage-socket:nth-child(2){transform:translateY(25%)}
.damage-socket::before{content:'';position:absolute;inset:11%;border-radius:50%;background:radial-gradient(circle at 45% 48%,#111522 0 50%,#03050d 84%);box-shadow:inset 0 1px 3px #000,inset 0 0 0 1px #090b15;pointer-events:none}
.damage-socket.empty::after{content:'';position:absolute;inset:21%;border-radius:50%;border-bottom:1px solid #8293a638;box-shadow:0 2px 2px #0003;pointer-events:none}
.damage-socket .damage-gem{position:absolute;inset:17%;display:block;border:0;border-radius:50%;background:radial-gradient(circle at 31% 25%,#fffffff5 0 7%,#fff9 8%,transparent 27%),radial-gradient(circle at 45% 40%,var(--gem) 5% 34%,var(--gem-dark) 78%,#080a16 100%);box-shadow:inset 0 0 0 1px #ffffff65,0 0 2px var(--gem-dark);z-index:1}
.illustrated-card .damage-socket{border-width:clamp(1px,.25cqw,2px)}
.framed-card .card-caption .card-name{font-family:'Card Thai','Leelawadee UI',Tahoma,sans-serif;font-weight:800;font-style:italic;letter-spacing:0}
.framed-card .card-caption .card-bp{font-family:'Card Numbers',Impact,sans-serif;font-weight:400;font-style:italic;color:#f5dd66}
.framed-card.field-card .card-surface .card-bp{font-family:'Card Numbers',Impact,sans-serif;font-weight:400;font-style:italic;color:#f5dd66;text-shadow:0 1px 1px #000}
.catalog-detail,.card-detail-layout{grid-template-columns:minmax(210px,280px) minmax(0,1fr)}
.detail-modal,.catalog-modal{width:min(900px,100%)}
.inspect-card.has-portrait{max-width:300px}
@media(max-width:600px){.catalog-detail,.card-detail-layout{grid-template-columns:1fr;gap:18px}.inspect-card.has-portrait{max-width:270px}}

.inspect-card.has-portrait{border:0;background:none;overflow:visible;min-height:0;height:auto;width:100%;max-width:220px;margin:0 auto;border-radius:0}
.inspect-card.has-portrait .illustrated-card{height:auto;width:100%}
.mulligan-portrait{display:block;width:100%;padding:3px}
.mulligan-card{background:#162737;border-color:#66778277}
.mulligan-card.selected{background:#4a3a23;border-color:#f5d394}
.framed-card{border:0;background:transparent;overflow:hidden;border-radius:5px;box-shadow:0 4px 8px #0008}
.framed-card:after{display:none}
.card-surface{position:relative;isolation:isolate;display:block;min-height:0;flex:none}
.framed-card .card-surface .cost-badge{left:9.6%;top:7.8%;width:15.1%;height:9.6%;min-width:0;display:grid;place-items:center;transform:none;margin:0;padding:0;border:0;box-shadow:none;background:none;border-radius:0;font:700 14px/1 Georgia,serif;color:#fff3d5;text-shadow:0 1px 3px #000;z-index:4}
.framed-card.frame-light .card-surface .cost-badge{color:#171c22;text-shadow:none}
.framed-card.field-card .card-surface{width:100%;height:100%}
.framed-card.field-card .card-surface .cost-badge{font-size:12px}
.framed-card.field-card .card-surface .stance-mark{top:27%;right:8%;left:auto;bottom:auto;max-width:84%;margin:0;padding:2px 4px;font-size:12px;z-index:4}
.framed-card.field-card .card-surface .card-bp{left:8%;right:8%;bottom:7%;top:auto;width:auto;display:flex;align-items:center;justify-content:center;gap:3px;margin:0;padding:3px 2px;background:#111927ed;border-radius:3px;font:700 20px/1.1 Georgia,serif;letter-spacing:0;font-variant-numeric:tabular-nums;color:#fff0d1;z-index:4}
.framed-card.field-card .card-bp strong{font:inherit}
.framed-card.field-card .card-bp small{display:none}
.framed-card.field-card .attack-ready{top:50%;right:10%;z-index:4}
.framed-card.resting .card-frame{filter:saturate(.65)}

/* Miniatures retain the portrait ratio; readable labels occupy their own row. */
.hand-zone{--hand-height:248px}
.hand-zone.has-selection{--hand-height:248px}
.framed-card.hand-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:116px;flex-basis:116px;height:100%;max-height:none;padding:0;min-height:0;overflow:hidden}
.framed-card.hand-card .card-surface{height:calc(100% - 44px);width:auto;aspect-ratio:2/3;max-width:100%;margin:auto auto 0}
.framed-card .card-caption{width:100%;height:44px;flex:none;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:3px 7px 4px;background:linear-gradient(#142434f2,#101b29);border-top:1px solid #8598a130;z-index:3;text-align:left}
.framed-card .card-caption .card-name{position:static;inset:auto;transform:none;display:block;width:100%;min-width:0;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:none;font:600 12px/1.65 "Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f2e8d1;text-shadow:none}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;height:17px}
.framed-card .card-caption .card-type{position:static;inset:auto;min-width:0;margin:0;padding:0;display:block;white-space:nowrap;font:400 12px/1.3 "Leelawadee UI",Tahoma,sans-serif;color:#b7c9d1;text-align:left;text-shadow:none}
.framed-card .card-caption .card-bp{position:static;inset:auto;display:inline-flex;align-items:baseline;justify-content:flex-end;gap:3px;flex:none;margin:0;padding:0;border:0;background:none;color:#f2d59e;font:700 14px/1.1 Georgia,serif;letter-spacing:0;text-shadow:none;font-variant-numeric:tabular-nums}
.framed-card .card-caption .card-bp strong{font:inherit}
.framed-card .card-caption .card-bp small{display:inline;font:400 10px/1 Tahoma,sans-serif;color:#a6b9c5}
.framed-card .card-caption .card-trigger{position:static;inset:auto;display:flex;align-items:center;justify-content:center;flex:none;margin:0;padding:0;border-radius:0;background:none;color:#eacc86}
.card-caption .card-trigger svg{height:14px;width:14px}
.caption-cost{display:none}
.collection-grid .framed-card.hand-card{height:230px;width:100%;max-height:none;transform:none}
.collection-grid .framed-card.hand-card .card-surface{height:calc(100% - 44px)}
@media(max-width:760px) and (min-height:501px){
 .hand-zone{--hand-height:232px}
 .hand-zone.has-selection{--hand-height:336px}
 .framed-card.hand-card{width:108px;flex-basis:108px}
 .framed-card.field-card .card-surface .card-bp{font-size:17px;bottom:6%;padding:2px}
 .framed-card.field-card .card-surface .stance-mark{padding:2px 3px;top:26%}
 .framed-card.field-card .stance-mark svg{display:none}
 .collection-grid .framed-card.hand-card{height:206px}
}
@media(max-width:430px) and (min-height:501px){
 .framed-card.field-card .card-surface .card-bp{font-size:16px}
 .framed-card .card-caption{padding-inline:6px}
 .framed-card .card-caption .card-bp small{display:none}
 .collection-grid .framed-card.hand-card{height:188px}
}
@media(max-height:500px){
 .hand-zone,.hand-zone.has-selection{--hand-height:116px}
 .framed-card.hand-card{width:164px;flex-basis:164px;display:grid;grid-template-columns:46px minmax(0,1fr);gap:6px;align-items:center;justify-content:stretch;padding:4px;background:#102130e8}
 .framed-card.hand-card .card-surface{width:46px;height:69px;max-height:100%;margin:0}
 .framed-card.hand-card .card-surface .cost-badge{display:none}
 .framed-card .card-caption{height:auto;min-height:62px;padding:3px 4px 3px 0;border:0;background:none;gap:4px}
 .framed-card .card-caption .card-name{white-space:normal;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .framed-card .card-meta{display:flex;flex-wrap:wrap;height:auto;justify-content:flex-start;gap:3px 8px}
 .framed-card .caption-cost{display:inline}
 .framed-card .card-caption .card-type{font-size:12px}
 .framed-card .card-caption .card-bp{font-size:14px}
 .framed-card.field-card .card-surface .cost-badge{display:none}
 .framed-card.field-card .card-surface .stance-mark{top:6%;right:8%;padding:1px 3px}
 .framed-card.field-card .card-surface .card-bp{bottom:5%;font-size:16px;padding:1px 2px}
 .framed-card.field-card .attack-ready{top:7%;right:53%}
 .collection-grid .framed-card.hand-card{height:97px;width:100%;padding:5px}
 .collection-grid .framed-card.hand-card .card-surface{height:69px}
}

.framed-card .card-caption .card-name{font-family:Card Thai,Leelawadee UI,Tahoma,sans-serif;font-weight:800;font-style:italic}
 .framed-card .card-caption .card-bp,.framed-card.field-card .card-surface .card-bp{font-family:Card Numbers,Impact,sans-serif;font-weight:400;font-style:italic;color:#f5dd66}
 .inspect-card.has-portrait{max-width:300px}
@media(max-width:600px){.inspect-card.has-portrait{max-width:270px}}

.card-footer-lettering{position:absolute;inset:0;z-index:4;pointer-events:none}
.framed-card.field-card .card-footer-lettering{display:none}

/* v12: starter art and readable game text. Frame plaque geometry is unchanged. */
.card-art.uploaded-art{background-repeat:no-repeat;background-size:auto 210%;background-position:50% 0;filter:none}
.start-decks{grid-template-columns:repeat(3,minmax(0,1fr))}
.start-decks .start-element strong{font-size:19px;line-height:1.6}
.start-decks .start-element{min-height:80px}
.start-controls{max-width:560px}
.start-deck-description{font-size:17px;line-height:1.8;color:#cbd7dc;min-height:32px}
.start-view-deck{font-size:16px;text-align:left;padding:8px 0;color:#eed59b}
.start-note{font-size:15px}
.start-deck-name{font-size:19px;text-align:center;line-height:1.6}
.start-deck-summary{font-size:20px}.start-deck-summary span{font-size:16px}
.start-actions button{font-size:18px;min-height:56px}
.modal{font-size:17px}.modal p{font-size:17px;line-height:1.8}
.modal h2{font-size:27px;line-height:1.6;padding-right:28px}
.modal button{min-height:44px}
.detail-modal,.catalog-modal{width:min(1080px,100%)}
.catalog-detail,.card-detail-layout{grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:32px;align-items:start}
.inspect-card.has-portrait{width:100%;max-width:340px}
.catalog-stats,.inspect-meta{font-size:17px;line-height:1.7;gap:10px;flex-wrap:wrap}
.stat-grid{gap:16px}.stat-grid>div>span{font-size:16px}.stat-grid strong{font-size:28px}
.ability-copy{margin-block:22px;padding-top:15px;border-top:1px solid #8094a54d}
.ability-label{display:block;font-size:15px;color:#c9ad77;letter-spacing:.5px;margin-bottom:7px}
.ability-copy .card-detail-text{font-size:20px;line-height:1.9;white-space:pre-line;overflow-wrap:anywhere}
.ability-copy .paused-ability,.ability-copy .added-card-note{font-size:16px;line-height:1.8;margin-top:14px;color:#dbbe87}
.source-button{display:block;width:100%;margin-top:16px;min-height:46px;font-size:17px;background:#162c3a;border-color:#7b8b9359}
.source-modal{width:min(1000px,100%)}
.source-image-scroll{max-height:68dvh;overflow:auto;margin-top:16px;background:#0a111a;border:1px solid #7d929847;border-radius:6px;overscroll-behavior:contain}
.source-image{display:block;width:100%;height:auto;max-width:740px;margin:auto}
.source-image-scroll.zoomed .source-image{width:1240px;max-width:none}
.source-image-scroll.zoomed{touch-action:pan-x pan-y}
.collection-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.collection-grid .framed-card.hand-card{height:325px;position:relative}
.collection-grid .framed-card.hand-card .card-surface{height:calc(100% - 88px)}
.copy-count{position:absolute;right:5px;top:5px;background:#0b182def;border:1px solid #c9ad77aa;border-radius:4px;font-size:17px;line-height:1.3;padding:4px 8px;color:#ffe2a3;z-index:6}
.framed-card.hand-card{width:144px;flex-basis:144px}
.framed-card.hand-card .card-surface{height:calc(100% - 88px)}
.framed-card .card-caption{height:88px;padding:7px 9px;gap:5px}
.framed-card .card-caption .card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:'Leelawadee UI',Tahoma,sans-serif;font-style:normal;font-size:16px;line-height:1.45;white-space:normal;overflow:hidden;font-weight:700;min-height:23px}
.framed-card .card-caption .card-meta{height:22px;gap:4px}
.framed-card .card-caption .card-type{font-size:14px}
.framed-card .card-caption .card-bp{font-size:19px}
.framed-card .card-caption .card-bp small{font-size:12px}
.caption-cost{display:inline}
.field-name{position:absolute;left:0;right:0;bottom:0;z-index:5;background:#0c1825f2;color:#f6eddb;padding:4px 5px;min-height:27px;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-align:center;font-weight:600}
.framed-card.field-card .card-surface .card-bp{bottom:43px;font-size:22px;left:5%;right:5%;padding:3px}
.framed-card.field-card .card-surface .stance-mark{font-size:14px;top:28%}
.context-content .dock-copy strong{font-size:19px;line-height:1.5}
.context-content .dock-copy>span{font-size:16px;line-height:1.7}
.context-content .context-effect{font-size:17px;line-height:1.75;max-height:100px;overflow:auto;display:block;-webkit-line-clamp:unset}
.dock-buttons button{font-size:16px;min-height:42px}
.action-reason{font-size:15px!important}
.phase-title,#phase-title{font-size:22px}#phase-description{font-size:16px;line-height:1.7}
#next-phase,#buy-draw{font-size:17px}
.pile-label,.damage-zone-button>span,.mana-zone-heading>span{font-size:15px}
.player-status strong,.player-status .element-tag{font-size:16px}
.effect-choice-modal{width:min(880px,100%)}
.choice-instruction{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block:10px 18px}
.choice-instruction strong{color:#f3da9d}
.effect-options{display:grid;gap:10px}
.effect-option{display:grid;grid-template-columns:64px minmax(0,1fr) 32px;gap:16px;align-items:center;text-align:left;padding:12px;background:#142a39;min-height:112px;border:1px solid #758b9a66}
.effect-option.selected{border-color:#f7d991;background:#374337;box-shadow:inset 3px 0 #f7d991}
.effect-option:disabled{opacity:.58}
.effect-thumb{position:relative;display:block;width:64px;height:88px;overflow:hidden;border-radius:4px;background:#0a1624}
.effect-option-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.effect-option-copy strong{font-size:18px;line-height:1.5}
.effect-option-copy>span{font-size:16px;color:#e2d29e}
.effect-option-copy small{font-size:16px;line-height:1.65;color:#b7cbd3}
.choice-number{border:1px solid #9b9b7f;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:18px;color:#f7d991}
.choice-confirm{position:sticky;bottom:-24px;background:#162a38f5;padding-block:18px 5px;margin-bottom:0;border-top:1px solid #91a5a64d;z-index:10}
.choice-confirm button{font-size:18px;min-height:50px}
@media(max-width:760px){
 .catalog-detail,.card-detail-layout{grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:22px}
 .start-decks .start-element strong{font-size:17px}.start-deck-description{font-size:16px}
 .start-actions button{font-size:17px}.start-note{font-size:14px}
 .framed-card.hand-card{width:138px;flex-basis:138px}
 .framed-card .card-caption .card-name{font-size:15px}
 .framed-card.field-card .card-surface .card-bp{font-size:19px;bottom:38px}
 .field-name{font-size:13px}
 .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .collection-grid .framed-card.hand-card{height:290px}
}
@media(max-width:600px){
 .catalog-detail,.card-detail-layout{grid-template-columns:1fr;gap:22px}
 .inspect-card.has-portrait{max-width:280px}
 .modal h2{font-size:24px}.ability-copy .card-detail-text{font-size:20px}
 .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .collection-grid .framed-card.hand-card{height:290px}
 .effect-option{grid-template-columns:48px minmax(0,1fr) 26px;gap:10px;padding:10px}
 .effect-thumb{width:48px;height:70px}.effect-option-copy strong{font-size:17px}
 .effect-option-copy small{font-size:16px}.choice-number{width:26px;height:26px}
 .start-deck-name{font-size:17px}.start-decks .start-element{min-height:64px}
}
@media(max-height:500px){
 .start-layout{overflow:auto;max-height:calc(100dvh - 55px);align-items:start}
 .start-controls h1{font-size:25px}.start-decks .start-element{min-height:52px}
 .start-actions button{min-height:44px;font-size:16px}.start-decks .start-element strong{font-size:16px}
 .start-deck-description{font-size:15px;line-height:1.5}.start-view-deck{font-size:15px;min-height:36px}
 .framed-card.hand-card{display:grid;width:215px;flex-basis:215px;grid-template-columns:46px minmax(0,1fr);gap:8px;padding:4px}
 .framed-card.hand-card .card-surface{width:46px;height:69px}
 .framed-card .card-caption{height:auto;min-height:70px;padding:4px;background:none}
 .framed-card .card-caption .card-name{font-size:15px;line-height:1.4}
 .caption-cost{display:inline}.framed-card .card-caption .card-bp{font-size:18px}
 .collection-grid .framed-card.hand-card{display:flex;height:290px;padding:0}
 .collection-grid .framed-card.hand-card .card-surface{width:auto;height:202px}
 .collection-grid .framed-card .card-caption{height:88px;width:100%;padding:7px;background:#122434}
 .field-name{font-size:12px;line-height:1.25;padding:2px}.framed-card.field-card .card-surface .card-bp{font-size:18px;bottom:32px}
 .context-content .context-effect{max-height:55px;font-size:16px}
}


.large-text .modal p{font-size:19px}.large-text .ability-copy .card-detail-text{font-size:23px}.large-text .modal button{font-size:19px}
.mulligan-card>strong{font-size:16px;line-height:1.6}.mulligan-card>span:last-child{font-size:15px}

/* v13 — bronze commands, crimson attacks and steel-blue defenses. */
button:is(.primary-button,.secondary-button,.quiet-button,.icon-button,.menu-button,.dock-detail,.source-button){
  --button-top:#365064;--button-bottom:#1a2d3c;--button-edge:#829eaa;
  position:relative;isolation:isolate;min-height:48px;gap:10px;padding:11px 17px;
  border:1px solid var(--button-edge);border-radius:5px;font:600 16px/1.4 'Leelawadee UI',Tahoma,sans-serif;
  background:linear-gradient(180deg,var(--button-top),var(--button-bottom));color:#eaf0ec;
  text-shadow:0 1px 2px #0008;box-shadow:inset 0 1px #ffffff26,inset 0 -2px #0004,0 3px 0 #07111a,0 5px 12px #0004;
  transition:transform 100ms ease,background 140ms ease,border-color 140ms ease,box-shadow 140ms ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
button:is(.primary-button,.secondary-button,.menu-button,.source-button)::before{
  content:'';position:absolute;inset:3px;border:1px solid #ffffff16;border-radius:2px;pointer-events:none;z-index:-1;
}
button.primary-button{--button-top:#edd49c;--button-bottom:#b88a45;--button-edge:#f4dda7;color:#211b13;text-shadow:0 1px #fff6ce70;font-weight:800;box-shadow:inset 0 1px #fff7d5,inset 0 -2px #70502066,0 3px 0 #4a351e,0 5px 14px #0005}
button.primary-button::before{border-color:#4f38173d}
button:is(.primary-button,.secondary-button,.quiet-button,.icon-button,.menu-button,.dock-detail,.source-button):not(:disabled):hover{
  border-color:#f6e6bd;transform:translateY(-1px);box-shadow:inset 0 1px #ffffff40,inset 0 -2px #0004,0 4px 0 #07111a,0 7px 18px #0006;
}
button.primary-button:not(:disabled):hover{background:linear-gradient(#f8e4b4,#cca25f);box-shadow:inset 0 1px #fff9df,0 4px 0 #4a351e,0 7px 18px #0006}
button:is(.primary-button,.secondary-button,.quiet-button,.icon-button,.menu-button,.dock-detail,.source-button):not(:disabled):active{
  transform:translateY(2px);box-shadow:inset 0 2px 5px #0005,0 1px 0 #07111a;
}
button:focus-visible{outline:3px solid #b9edff;outline-offset:4px}
button:is(.primary-button,.secondary-button,.quiet-button,.icon-button,.menu-button,.dock-detail,.source-button):disabled{
  opacity:1;--button-top:#2b3c47;--button-bottom:#1e2b35;--button-edge:#50636e;
  background:linear-gradient(var(--button-top),var(--button-bottom));color:#a7b4bc;box-shadow:inset 0 1px #ffffff0d;transform:none;text-shadow:none;cursor:not-allowed;
}
button.primary-button:disabled::before{border-color:#acbec60f}
button.quiet-button,button.dock-detail{background:transparent;border-color:#829ba143;box-shadow:none;color:#cbdce1;text-shadow:none}
button.quiet-button:not(:disabled):hover,button.dock-detail:not(:disabled):hover{background:#57768c1f;box-shadow:none}
button.icon-button{width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;border-color:#829ba163;box-shadow:inset 0 1px #ffffff12,0 2px 0 #07111a}
[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex:none}
[data-icon]>svg{width:22px;height:22px}
button[data-action="attack"],#next-phase[data-command="battle"]{--button-top:#98443c;--button-bottom:#5c2527;--button-edge:#e3a17c;color:#fff0d7;text-shadow:0 1px 2px #25080b;box-shadow:inset 0 1px #ffc29b48,0 3px 0 #32131b,0 5px 13px #0005}
button[data-action="attack"]:not(:disabled):hover,#next-phase[data-command="battle"]:not(:disabled):hover{background:linear-gradient(#a54f43,#713135);border-color:#ffcf9c;box-shadow:inset 0 1px #ffd6ba50,0 4px 0 #32131b,0 7px 16px #0006}
button[data-action="block"]{--button-top:#356577;--button-bottom:#1b3d51;--button-edge:#8ec9d2;color:#efffff;text-shadow:0 1px #102531;box-shadow:inset 0 1px #ddffff35,0 3px 0 #0e2434,0 5px 13px #0005}
button[data-action="block"]:not(:disabled):hover{background:linear-gradient(#3e7688,#25536a);border-color:#b8f3f3;box-shadow:inset 0 1px #ddffff40,0 4px 0 #0e2434,0 7px 16px #0006}
button:is([data-action="attack"],[data-action="block"]):disabled,#next-phase:disabled{background:linear-gradient(#2b3c47,#1e2b35);border-color:#50636e;color:#a7b4bc;box-shadow:inset 0 1px #ffffff0d;text-shadow:none}
.start-actions{align-items:stretch;gap:14px}
.start-actions .start-play{display:flex;justify-content:flex-start;min-height:76px;gap:13px;padding:12px 17px;text-align:left}
.start-play-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.start-play-copy strong{font-size:22px;line-height:1.35;font-weight:800}
.start-play-copy small{font-size:14px;line-height:1.45;color:#46341e;font-weight:500}
.button-emblem{width:35px;height:35px;flex:none;border:1px solid #7853268c;transform:rotate(45deg);background:#fff1bf27;box-shadow:inset 0 0 0 2px #fff0c73a}
.button-emblem>svg{width:24px;height:24px;transform:rotate(-45deg);stroke-width:2}
.button-trailing>svg{width:23px;height:23px}
.start-actions .secondary-button{padding-inline:17px;white-space:nowrap;font-size:17px}
.start-tools{gap:12px}.start-tools .quiet-button{min-height:44px;padding:8px 12px;border-color:transparent}
.start-view-deck{justify-content:flex-start;padding:10px 0!important;border-color:transparent!important;min-height:44px;font-size:16px!important}
.start-resume button{min-height:48px!important;justify-content:flex-start}
button.element-option{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-height:122px;padding:15px 9px 11px;border:1px solid color-mix(in srgb,var(--element),#4b5b66 65%);border-radius:5px;background:linear-gradient(155deg,#2a3b47e8,#101e2aef);color:#ebeadf;box-shadow:inset 0 1px #ffffff12,0 3px 0 #06101a;outline:0;transition:background 140ms,border-color 140ms,transform 100ms}
.element-option .deck-emblem{display:grid;place-items:center;width:37px;height:37px;color:var(--element);filter:drop-shadow(0 2px 3px #0008)}
.element-option .deck-emblem svg{width:30px;height:30px;stroke-width:1.9}
.element-option strong,.start-decks .start-element strong{font-size:19px;line-height:1.5;font-weight:700}
.element-option .deck-choice-label{font-size:14px;line-height:1.4;color:#a9bac5}
.element-option .deck-picked{display:none;position:absolute;right:8px;top:8px;width:22px;height:22px;border:1px solid var(--element);border-radius:50%;color:var(--element);background:#101b25}
.deck-picked svg{width:17px;height:17px;stroke-width:2.5}
button.element-option.active,.start-decks .start-element.active{border-color:var(--element);outline:1px solid var(--element);outline-offset:2px;background:linear-gradient(155deg,color-mix(in srgb,var(--element),#182c39 84%),#172735);box-shadow:inset 0 -3px var(--element),inset 0 1px #ffffff22,0 4px 12px #0005}
.element-option.active .deck-picked{display:grid;place-items:center}
.element-option.active .deck-choice-label{color:var(--element)}
button.element-option:not(:disabled):hover{border-color:var(--element);background:linear-gradient(155deg,#354b58,#192b39);transform:translateY(-2px)}
button.element-option:not(:disabled):active{transform:translateY(1px)}
button.element-option:focus-visible{outline:3px solid #c3edff;outline-offset:5px}
.deck-grid{gap:15px}.newgame-modal .deck-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#next-phase{display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;align-items:center;text-align:left;min-height:82px;padding:13px 12px;width:100%}
.phase-button-icon{width:30px;height:36px}.phase-button-icon svg{width:28px;height:28px;stroke-width:1.9}
.phase-button-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
#next-phase-label{font-size:19px;line-height:1.4;font-weight:800;word-break:normal;overflow-wrap:anywhere}
#phase-button-caption{font-size:13px;line-height:1.5;font-weight:500;opacity:.9}
#next-phase:disabled .phase-button-icon{opacity:.55}
#buy-draw{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 9px;min-height:49px;font-size:16px}
.draw-cost{display:inline-flex;gap:4px;align-items:center;padding-left:10px;margin-left:auto;border-left:1px solid #acced456;color:#e3d2a3;font:20px/1 'Card Numbers',Impact,sans-serif}
.draw-cost svg{width:17px;height:17px}
#buy-draw:disabled .draw-cost{color:#93a4b0}
.command-button{display:flex!important;align-items:center;gap:10px!important;justify-content:flex-start;min-height:62px!important;min-width:0;padding:10px 12px!important;text-align:left}
.command-icon{display:grid;place-items:center;width:25px;flex:none}.command-icon svg{width:25px;height:25px}
.command-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.command-copy strong{font-size:18px;line-height:1.35;font-weight:800}
.command-copy small{font-size:13px;line-height:1.4;font-weight:500;opacity:.85}
.command-cost{display:grid;grid-template-columns:13px auto;align-items:center;column-gap:3px;margin-left:4px;padding-left:10px;border-left:1px solid #5d422549;flex:none}
.command-cost svg{width:13px;height:15px}.command-cost b{font:23px/1.1 'Card Numbers',Impact,sans-serif}
.command-cost small{grid-column:1/-1;font-size:12px;line-height:1.3;text-align:center;font-weight:500}
.command-button:disabled .command-cost{border-left-color:#8ca4b036}
.dock-buttons{gap:9px;align-items:stretch}
.dock-buttons .dock-detail{min-height:44px;padding:8px 11px;font-size:15px}
.inline-context .dock-buttons{display:grid;grid-template-columns:1fr;gap:7px}
.inline-context .dock-detail{min-height:38px;justify-content:center;padding:5px;background:transparent;border-color:#8aa3b044;box-shadow:none}
.inline-context .context-content .dock-copy strong{font-size:17px}
.inline-context .context-content .dock-copy>span{font-size:14px}
.inline-context .action-reason{font-size:14px!important;line-height:1.6}
.context-close{width:38px;height:38px;right:4px;top:3px;border:1px solid transparent;border-radius:4px}
.context-close:hover{background:#718e9c25;border-color:#9fb1b655!important}
.menu-modal{width:min(680px,100%)}
.menu-heading{padding-bottom:18px;margin-bottom:4px}.menu-heading>p{color:#b4c7d0;font-size:16px}
.game-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.game-menu .menu-tile{display:grid;grid-template-columns:28px minmax(0,1fr) 15px;align-items:center;gap:11px;min-height:86px;padding:14px 13px;text-align:left;border:1px solid #6a879764;border-radius:5px;background:linear-gradient(145deg,#243a49,#142635);box-shadow:inset 0 1px #ffffff0b}
.menu-tile-icon{color:#d1bd88;display:flex}.menu-tile-icon svg{width:25px;height:25px}
.menu-tile>span:nth-child(2){display:flex;flex-direction:column;gap:5px;min-width:0}
.menu-tile strong{font-size:17px;line-height:1.4;color:#f1e6ce;font-weight:600}
.menu-tile small{font-size:14px;line-height:1.5;color:#a9bec9}
.menu-tile>svg:last-child{width:15px;height:15px;color:#879fab}
.game-menu .menu-tile:not(:disabled):hover{border-color:#ccb17f;background:linear-gradient(145deg,#344b57,#1c3444)}
.game-menu .menu-tile:not(:disabled):active{background:#102536;box-shadow:inset 0 2px 5px #0005}
.menu-footer{display:flex;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid #8c9f9b35;margin-top:20px}
.menu-footer button{min-width:126px}.menu-status{padding-top:14px;font-size:14px;color:#99afbc}
.modal-actions{gap:12px;align-items:stretch}.modal-actions>button{min-height:50px}
.filter-tabs,.element-tabs{gap:9px}
.filter-tabs button,.element-tabs button,.lab-controls button{min-height:44px;padding:9px 14px;border-color:#78939f65;border-radius:4px;font-size:15px;background:#172c3c;color:#bbcdd5;box-shadow:inset 0 1px #ffffff0b}
.filter-tabs button.active,.element-tabs button.active,.lab-controls button.active{border-color:#d8bf83;background:linear-gradient(#425b64,#2b424e);box-shadow:inset 0 -2px #d8bf83;color:#fff0cb}
.filter-tabs button:active,.element-tabs button:active,.lab-controls button:active{box-shadow:inset 0 2px 5px #0005}
.mulligan-card{position:relative;border-width:1px;border-radius:5px;padding:8px;transition:background 140ms,border-color 140ms}
.mulligan-card.selected{border-color:#f0d294;background:#3c4036;outline:1px solid #d8b774;outline-offset:2px}
.mulligan-card.selected::after{content:'✓';position:absolute;right:7px;top:7px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid #f9df9d;background:#d7b878;color:#1b292c;font-size:19px;font-weight:800;z-index:8}
.effect-option{transition:background 140ms,border-color 140ms,box-shadow 140ms}
.effect-option:not(:disabled):hover{background:#243f4d;border-color:#b2d4d9}
.effect-option.selected{background:#354738;border-color:#efd497;box-shadow:inset 3px 0 #efd497}
.effect-option:not(:disabled):active{box-shadow:inset 0 2px 5px #0006}
.effect-option:disabled{opacity:1;color:#8da1ad;background:#122330;border-color:#445865}
.effect-option:disabled .effect-option-copy strong,.effect-option:disabled .effect-option-copy small{color:#90a5b0}
.effect-option:disabled .effect-thumb{opacity:.5}
.defense-option{position:relative;border-radius:5px;border-width:1px;padding:13px;transition:background 140ms,border-color 140ms,box-shadow 140ms}
.defense-option.safe-block{background:linear-gradient(135deg,#1f4556,#163240);border-color:#7db8c5}
.defense-option.sacrifice-block{background:linear-gradient(135deg,#49433c,#2a3540);border-color:#c5a27a}
.defense-option.take-damage{background:linear-gradient(135deg,#62373d,#352631);border-color:#d29783}
.defense-option:not(:disabled):hover{box-shadow:inset 0 0 0 1px #fff5;border-color:#ffe4b1}
.defense-option:not(:disabled):active{box-shadow:inset 0 2px 6px #0005}
.defense-option-copy>span{font-size:17px;font-weight:600}.defense-option-copy small{font-size:14px}
.game-hud{padding-block:5px}.game-hud .menu-button{min-height:44px;padding:9px 13px;font-size:15px;gap:8px}
.game-hud .icon-button{width:44px;min-height:44px}.game-hud .hud-tools{gap:8px}
@media(max-width:760px){
 :root{--hud-height:54px}
 button:is(.primary-button,.secondary-button,.quiet-button,.menu-button,.dock-detail,.source-button){padding-inline:13px}
 .start-actions .start-play{min-height:70px;gap:10px;padding:11px 13px}
 .start-play-copy strong{font-size:20px}.start-play-copy small{font-size:13px}
 .button-emblem{width:29px;height:29px}.button-emblem>svg{width:21px;height:21px}
 .start-actions{gap:10px}.start-actions .secondary-button{font-size:16px;padding-inline:12px}
 .start-decks .start-element strong,.element-option strong{font-size:18px}
 button.element-option{min-height:112px;padding:12px 5px 9px}.element-option .deck-choice-label{font-size:14px}
 .element-option .deck-picked{right:5px;top:5px;width:19px;height:19px}
 .deck-picked svg{width:15px;height:15px}
 #next-phase{min-height:72px;gap:9px;padding:10px;grid-template-columns:27px minmax(0,1fr)}
 #next-phase-label{font-size:18px}.phase-button-icon{width:27px}.phase-button-icon svg{width:25px;height:25px}
 #buy-draw{font-size:15px;min-height:46px}.draw-cost{font-size:19px;padding-left:7px}
 .command-copy strong{font-size:17px}.command-icon{width:22px}.command-icon svg{width:22px;height:22px}
 .game-hud .menu-button{padding-inline:9px}.game-hud .icon-button{width:42px;min-width:42px;padding:9px}
 .game-hud .hud-tools{gap:6px}
}
@media(max-width:440px){
 .start-actions{flex-wrap:wrap}.start-actions .start-play{flex:1 1 100%}.start-actions .secondary-button{width:100%;min-height:46px}
 .start-play-copy strong{font-size:22px}.start-play-copy small{font-size:14px}
 .game-menu{grid-template-columns:1fr}.game-menu .menu-tile{min-height:78px}
 .menu-tile strong{font-size:18px}.menu-tile small{font-size:15px}
 .menu-footer{gap:10px}.menu-footer button{min-width:0;flex:1}
 .newgame-modal .deck-grid{gap:10px}.newgame-modal .element-option strong{font-size:16px}
}
@media(max-height:500px){
 .start-actions .start-play{min-height:58px}.start-play-copy strong{font-size:19px}.start-play-copy small{font-size:13px}
 .start-decks .start-element{min-height:89px;padding-block:8px;gap:2px}.start-element .deck-emblem{height:27px}.start-element .deck-emblem svg{width:25px;height:25px}
 .start-decks .start-element strong{font-size:17px}.start-element .deck-choice-label{font-size:13px}
 .start-actions .secondary-button{min-height:48px}
 #next-phase{min-height:54px;grid-template-columns:24px minmax(0,1fr);padding:8px 10px}
 #next-phase-label{font-size:17px}#phase-button-caption{font-size:12px}.phase-button-copy{gap:2px}
 #buy-draw{min-height:44px;font-size:15px}
 .command-button{min-height:50px!important;padding:7px 10px!important}.command-copy strong{font-size:17px}
 .command-copy small{display:none}.command-cost small{display:none}
 .hand-context .dock-buttons button{min-height:44px}.hand-context .dock-buttons .command-button{min-height:50px}
 .modal-actions>button{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
 button:is(.primary-button,.secondary-button,.quiet-button,.icon-button,.menu-button,.dock-detail,.source-button,.element-option,.effect-option,.defense-option){transition:none}
 button:is(.primary-button,.secondary-button,.quiet-button,.icon-button,.menu-button,.dock-detail,.source-button,.element-option):not(:disabled):hover,button:is(.primary-button,.secondary-button,.quiet-button,.icon-button,.menu-button,.dock-detail,.source-button,.element-option):not(:disabled):active{transform:none}
}
/* Keep the command reachable beside a shallow battlefield and on phone-width consoles. */
@media(min-width:761px) and (max-height:950px) and (min-height:501px){
 .turn-console{gap:8px;padding:10px}
 .phase-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
 .phase-track li{min-height:28px;gap:5px;padding:3px;font-size:13px}
 .phase-track li>span{width:19px;height:19px;font-size:12px}
 .phase-track li::after{display:none}
 .phase-information p{font-size:14px;line-height:1.6}
 #next-phase{min-height:74px;grid-template-columns:23px minmax(0,1fr);gap:8px;padding:10px 9px}
 .phase-button-icon{width:23px}.phase-button-icon svg{width:23px;height:23px}
 #next-phase-label{font-size:18px}#phase-button-caption{font-size:13px;line-height:1.4}
 #buy-draw{min-height:46px}
}
@media(min-width:761px) and (max-height:820px) and (min-height:501px){
 .turn-console{gap:7px;padding:7px 9px}
 .phase-information p{display:none}
 .turn-indicator{gap:2px}.turn-indicator>span b{font-size:23px}
}
@media(min-width:761px) and (max-height:680px) and (min-height:501px){
 .phase-track{display:none}
 .turn-indicator{flex-direction:row;align-items:center;justify-content:center;gap:8px}
}
@media(max-width:760px) and (min-height:501px){
 #next-phase{min-height:58px;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:10px}
 .phase-button-icon{width:22px;height:28px}.phase-button-icon svg{width:22px;height:22px}
 #next-phase-label{font-size:17px;line-height:1.4}#phase-button-caption{display:none}
 #phase-title{font-size:18px;line-height:1.5}
 .turn-console.is-draw{min-height:124px}
}