:root {
  /* --- dizajn tokeni stola (MTG Commander Client Design) --- */
  --tbl-bg: var(--ds-table);
  --tbl-panel: var(--ds-panel);
  --tbl-panel2: var(--ds-panel);
  --tbl-raise: var(--ds-panel-raised);
  --tbl-line: rgba(var(--ds-accent-soft-rgb), .16);
  --tbl-line2: rgba(var(--ds-accent-soft-rgb), .28);
  --tbl-gold: var(--ds-accent);
  --tbl-gold-lt: var(--ds-accent-bright);
  --tbl-ink: var(--ds-copy);
  --tbl-ink-hi: var(--ds-text);
  --tbl-mute: var(--ds-muted);
  --tbl-mute2: #66717d;
  --tbl-good: var(--ds-good);
  --tbl-bad: #d24a3a;
  --tbl-font: var(--ds-font-body);
  --tbl-cond: var(--ds-font-display);
  --art-back: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20140'%3E%3Crect%20width='100'%20height='140'%20fill='%230d1018'/%3E%3Crect%20x='4'%20y='4'%20width='92'%20height='132'%20rx='7'%20fill='none'%20stroke='%23c9a03a'%20stroke-width='1.6'%20opacity='.8'/%3E%3Crect%20x='9'%20y='9'%20width='82'%20height='122'%20rx='5'%20fill='none'%20stroke='%23c9a03a'%20stroke-width='.6'%20opacity='.45'/%3E%3Ccircle%20cx='50'%20cy='70'%20r='25'%20fill='none'%20stroke='%23c9a03a'%20stroke-width='1.1'%20opacity='.7'/%3E%3Ccircle%20cx='50'%20cy='70'%20r='17'%20fill='none'%20stroke='%23c9a03a'%20stroke-width='.6'%20opacity='.45'/%3E%3Cpath%20d='M50%2057%20L58.6%2083.4%20L36.2%2067.1%20L63.8%2067.1%20L41.4%2083.4%20Z'%20fill='none'%20stroke='%23c9a03a'%20stroke-width='1'%20opacity='.9'/%3E%3Ccircle%20cx='50'%20cy='45'%20r='4.6'%20fill='%23e8e3c8'/%3E%3Ccircle%20cx='73.8'%20cy='62.3'%20r='4.6'%20fill='%234a90d9'/%3E%3Ccircle%20cx='64.7'%20cy='90.2'%20r='4.6'%20fill='%238a6f9a'/%3E%3Ccircle%20cx='35.3'%20cy='90.2'%20r='4.6'%20fill='%23d95a4a'/%3E%3Ccircle%20cx='26.2'%20cy='62.3'%20r='4.6'%20fill='%235aa860'/%3E%3C/svg%3E");
  --art-hero: radial-gradient(120% 150% at 50% 8%, #2a2136 0%, #171a24 45%, #12141a 100%);
  --art-felt: radial-gradient(90% 120% at 50% 0%, #1a1d27 0%, #12141a 70%);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: var(--ds-font-body); background: var(--ds-table); color: var(--ds-text); overflow-x: hidden; }
button { font-family: inherit; }
img { -webkit-user-drag: none; }
.gameicon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.14em;
}

/* ---------- setup ---------- */
#setup { max-width: 560px; margin: 0 auto; padding: 18px 14px 48px; }
.title { font-size: 26px; text-align: center; margin-top: 8px; background: linear-gradient(90deg,var(--ds-accent-bright),#d95a4a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { text-align: center; color: #9aa; margin: 4px 0 18px; font-size: 13px; }
.seclabel { font-size: 13px; color: var(--ds-accent-soft); margin: 18px 0 8px; font-weight: 600; letter-spacing: .4px; }
.decklist { display: flex; flex-direction: column; gap: 10px; }
.deckcard { display: flex; gap: 10px; background: #1c2029; border: 2px solid #2a2f3a; border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.deckcard.selected { border-color: var(--ds-accent-bright); box-shadow: 0 0 14px #e8c05a44; }
.deckart { width: 110px; height: 110px; object-fit: cover; flex-shrink: 0; }
.deckinfo { padding: 8px 10px 8px 0; flex: 1; }
.deckname { font-weight: 700; font-size: 15px; }
.deckcmd { font-size: 12px; color: var(--ds-accent-soft); margin: 2px 0; }
.deckcolors { display: flex; align-items: center; gap: 4px; margin: 3px 0; }
.deckstyle { font-size: 11px; color: #9aa; margin-left: 4px; }
.deckblurb { font-size: 11.5px; color: #bbc; line-height: 1.35; }
.deckset { font-size: 10px; color: #778; margin-top: 3px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #0006; }
.dot.big { width: 13px; height: 13px; }
.start { width: 100%; margin-top: 22px; font-size: 17px; padding: 14px; }
.credits { margin-top: 26px; font-size: 11px; color: #778; line-height: 1.5; text-align: center; }

/* ---------- game layout ---------- */
#game {
  display: none; flex-direction: column; height: calc(100 * var(--dvhu)); max-width: 640px; margin: 0 auto;
  background-image: linear-gradient(#12141ae0, #12141af2), var(--art-felt);
  background-size: cover, cover; background-position: center; background-attachment: fixed;
}
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px 4px; background: #1a1e26; border-bottom: 1px solid #2a2f3a; }
.phasewrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.phase { font-size: 12px; color: #cdd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper { display: flex; gap: 3px; }
.step { font-size: 8.5px; font-weight: 800; letter-spacing: .3px; color: #556; background: #20242e; border-radius: 4px; padding: 2px 5px; }
.step.on { color: var(--ds-accent-ink); background: linear-gradient(90deg,var(--ds-accent-bright),#d98a4a); }
.ticker { font-size: 11px; color: #8a95a8; background: #14161c; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #1e2230; }
.topbtns { display: flex; gap: 6px; }
.tbtn { background: #262b36; color: #dde; border: none; border-radius: 8px; padding: 5px 9px; font-size: 15px; }
.monarchstatus { display: flex; align-items: center; gap: 7px; margin-left: auto; margin-right: 8px; padding: 5px 9px; color: #f2d58a; background: #29210f; border: 1px solid #c99c39; border-radius: 8px; box-shadow: 0 0 18px #d2a13a33; }
.monarchstatus > span { font-size: 25px; line-height: 1; }
.monarchstatus > div { display: grid; grid-template-columns: auto auto; gap: 1px 6px; align-items: baseline; }
.monarchstatus small { color: #c99c39; font-size: 8px; letter-spacing: .16em; }
.monarchstatus b { color: #fff1c4; font-size: 11px; }
.monarchstatus em { grid-column: 1 / -1; color: #9d8c66; font-size: 8px; font-style: normal; white-space: nowrap; }

.oppswrap { max-height: calc(42 * var(--dvhu)); overflow-y: auto; padding: 4px 8px 2px; display: flex; flex-direction: column; gap: 5px; }
.opprow { background: #1c2029; border: 2px solid #2a2f3a; border-radius: 10px; overflow: hidden; }
.opprow.active { border-color: #6a8ad9; }
.opprow.monarch { border-color: #d4aa48; box-shadow: 0 0 0 1px #f0cf7544, 0 0 24px #d4aa4830; }
.opprow.lost { opacity: .35; }
.opphead { display: flex; align-items: center; gap: 7px; padding: 4px 7px; font-size: 11.5px; }
.opphead .chev { color: #667; font-size: 10px; }
.oppname { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seatcrown { color: #f3cf6a; font-size: 16px; font-style: normal; text-shadow: 0 0 10px #f1c75f88; }
.seatcrown .gameicon { width: 16px; height: 16px; }
.oppidentityicon { width: 13px; height: 13px; color: var(--seat-accent, #889792); }
.opplife { font-size: 16px; font-weight: 800; color: #f0d0a0; }
.oppmeta { color: #9ab; display: inline-flex; align-items: center; gap: 3px; }
.oppmeta > .gameicon { width: 11px; height: 11px; color: #88928f; }
.oppcmd { color: var(--ds-accent-soft); font-size: 10px; margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.oppcmd > .gameicon { width: 11px; height: 11px; }
.tbtn.small { padding: 2px 6px; font-size: 12px; }
/* stanje panel toggle-a (tiše od .armed, koji je rezervisan za HOLD) */
.tbtn.on { box-shadow: inset 0 0 0 1.5px #c9a03a99; color: var(--ds-accent-bright); }
.deskonly { display: none; }
.oppstrip { display: flex; gap: 4px; overflow-x: auto; padding: 3px 6px 6px; align-items: flex-end; min-height: 74px; }
.oppLands { background: #262b36; border-radius: 7px; padding: 5px 8px; font-size: 11px; text-align: center; color: #8a9; font-weight: 700; flex-shrink: 0; line-height: 1.3; }
.emptystrip { color: #556; font-size: 11px; padding: 8px; }

.center { padding: 0 8px; }
.stack { background: #241f2e; border: 1px solid #4a3f6a; border-radius: 10px; padding: 6px 8px; margin: 2px 0; }
.stacktitle { font-size: 10px; color: #b8a0e8; letter-spacing: 1px; }
.stackitem { padding: 4px 6px; margin: 3px 0; background: #2e2840; border-radius: 7px; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }
.stackitem.top { border: 1px solid #8a70d8; }
.stackitem .who { color: #9a8; font-size: 10.5px; }

.myboard { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 8px; overflow: hidden; min-height: 120px; }
.cardrow { display: flex; gap: 5px; overflow-x: auto; padding: 4px 0; min-height: 96px; align-items: flex-end; }
.landrow { display: flex; gap: 5px; overflow-x: auto; padding: 3px 0; align-items: center; }
.emptyrow { color: #556; font-size: 12px; padding: 12px; }

.mini { position: relative; width: 66px; height: 88px; border-radius: 7px; flex-shrink: 0; background: #222; border: 2px solid transparent; overflow: hidden; }
.mini::before { content:''; position: absolute; inset: 0; background: var(--frame, #555); opacity: .8; }
.mini img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; border-radius: 5px; }
.mini .mname { position: absolute; bottom: 0; left: 0; right: 0; font-size: 8.2px; background: #000b; padding: 2px 3px; line-height: 1.1; max-height: 22px; overflow: hidden; }
.mini .pt { position: absolute; top: 2px; right: 2px; background: #000d; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 5px; }
.mini.has-marked-damage { min-width:max-content; }
.permanentpile:has(> .mini.has-marked-damage) { min-width:max-content; }
/* Keep the stat row in flow so long damage/P-T values size the card instead
   of clipping inside an absolutely positioned 52px opponent card. */
.mini .markeddamagestats { position:relative; margin:2px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:2px; }
.mini .markeddamagestats .pt { position:static; flex:0 0 auto; }
.mini .markeddamage { display:block; padding:2px 3px; color:#ffe5df; background:#661b17; border:1px solid #e27868; border-radius:4px; box-shadow:0 1px 4px #000b; font:850 7.5px/1 var(--tbl-cond,inherit); white-space:nowrap; }
.mini.sm .markeddamage { padding:2px; font-size:6.5px; }
.mini.has-marked-damage .badge { top:21px; }
.mini .cnt { position: absolute; top: 18px; right: 2px; background: #2a6a2add; font-size: 9px; padding: 1px 3px; border-radius: 4px; }
.mini .m1counter { position:absolute; top:32px; right:2px; z-index:3; display:flex; align-items:center; gap:2px; min-height:14px; padding:1px 3px; color:#ffe6e1; background:linear-gradient(90deg,#6e1714ee,#32100fee); border:1px solid #e06c59; border-radius:4px; box-shadow:0 0 9px #b8362f88; font:850 7px/1 var(--tbl-cond,inherit); white-space:nowrap; }
.mini .m1counter .gameicon { width:11px; height:11px; stroke-width:2.2; }
.mini .m1counter span { color:#ffb4a8; }
.mini .cnt2 { position: absolute; bottom: 15px; right: 2px; z-index: 3; background: #2a3f6add; color: #dfe8ff; font-size: 9px; padding: 1px 3px; border-radius: 4px; letter-spacing: .3px; white-space: nowrap; }
.mini .crewtag { position: absolute; bottom: 14px; left: 2px; background: #6a4a1add; color: #ffe0b0; font-size: 7.5px; letter-spacing: .12em; padding: 1px 3px; border-radius: 3px; }
.mini .att { position: absolute; top: 34px; right: 2px; background: #6a5a2add; font-size: 9px; padding: 1px 3px; border-radius: 4px; }
.mini .badge { position: absolute; top: 2px; left: 2px; display: flex; gap: 2px; color: #f1c36d; filter: drop-shadow(0 0 2px #000); }
.mini .badge .gameicon { width: 13px; height: 13px; padding: 1px; background: rgba(5,7,8,.72); border-radius: 3px; }
.mini .keywordrack { position:absolute; left:2px; bottom:17px; z-index:4; display:grid; grid-template-columns:repeat(3,13px); grid-auto-rows:13px; gap:1px; max-width:41px; }
.mini .keywordbadge { position:relative; display:grid; place-items:center; width:13px; height:13px; color:#f3efe4; background:#0b1012d9; border:1px solid color-mix(in srgb,currentColor 82%,#fff 18%); border-radius:50%; box-shadow:0 2px 6px #000c,0 0 5px color-mix(in srgb,currentColor 38%,transparent); backdrop-filter:blur(2px); }
.mini .keywordbadge .gameicon { width:9px; height:9px; stroke-width:2.15; }
.mini .keywordbadge b { position:absolute; right:-4px; bottom:-3px; min-width:9px; padding:1px; color:#fff; background:#080a0c; border-radius:5px; font:800 6px/1 var(--tbl-cond,inherit); text-align:center; }
.mini .keywordbadge.tone-gold { color:var(--ds-accent-bright); }
.mini .keywordbadge.tone-blue { color:#6ed8ff; }
.mini .keywordbadge.tone-violet { color:#cda1ff; }
.mini .keywordbadge.tone-red { color:#ff826c; }
.mini .keywordbadge.tone-orange { color:#ffbd69; }
.mini .keywordbadge.tone-sky { color:#9ee8ff; }
.mini .keywordbadge.tone-acid { color:#b4ee78; }
.mini .keywordbadge.tone-rose { color:#ff9eb4; }
.mini .keywordbadge.tone-green { color:#8ed48b; }
.mini .keywordbadge.tone-white { color:var(--ds-accent-glow); }
.mini .keywordbadge.tone-crimson { color:#ff6f79; }
.mini .keywordbadge.tone-silver { color:#cbd2d3; }
.mini .keywordbadge.tone-cyan { color:#71e7dc; }
.mini.sm .keywordrack { grid-template-columns:repeat(3,11px); grid-auto-rows:11px; max-width:35px; bottom:14px; }
.mini.sm .keywordbadge { width:11px; height:11px; }
.mini.sm .keywordbadge .gameicon { width:8px; height:8px; }
.mini.nontarget-selected { outline-color:#7ddcaa; box-shadow:0 0 0 2px #173d2c,0 0 18px #5bd798cc !important; }
.mini.tapped { transform: rotate(8deg) scale(.94); opacity: .75; }
.mini.sick img { filter: saturate(.6); }
.mini.sm { width: 52px; height: 70px; }
.mini.sm .mname { font-size: 7px; max-height: 17px; }
.mini.sm .pt { font-size: 8.5px; padding: 0 3px; }
.mini.cmdr { border-color: #c9a03a; box-shadow: 0 0 8px #c9a03a66; }
.mini.actable { border-color: #4ab8d9; box-shadow: 0 0 9px #4ab8d977; }
.mini.landcreature { border-color: #55d8ca; box-shadow: 0 0 0 1px #102f31, 0 0 12px #36cabb66; }
.mini .toktag { position: absolute; top: 46%; left: 0; right: 0; text-align: center; font-size: 6.5px; letter-spacing: 1px; color: #fffc; background: #0008; padding: 1px 0; }
.mini .landcreaturetag { position: absolute; left: 2px; right: 2px; bottom: 18px; z-index: 2; padding: 2px 1px; border: 1px solid #73e4d1; border-radius: 3px; background: #082a2bee; color: #c7fff5; font-size: 6.5px; font-weight: 900; line-height: 1; letter-spacing: .08em; text-align: center; white-space: nowrap; }
.mini.sm .landcreaturetag { bottom: 14px; font-size: 5.5px; letter-spacing: .04em; }
.mini .stackn { position: absolute; bottom: 20px; right: 2px; background: var(--ds-accent-bright); color: var(--ds-accent-ink); font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 6px; box-shadow: 0 1px 3px #000a; }
.mini.stacked { box-shadow: 2px 2px 0 #2e3542, 4px 4px 0 #262b36; margin-right: 4px; }
.permanentpile {
  width: 66px; flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: stretch; gap: 3px; position: relative;
}
.permanentpile.sm { width: 52px; }
.permanentpile > .mini { flex: 0 0 auto; }
.attachmenttray {
  display: grid; gap: 3px; padding-top: 6px; position: relative;
}
.attachmenttray::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 6px;
  background: #c9a03a99;
}
.attachedcard {
  position: relative; width: 100%; height: 30px; overflow: hidden; cursor: pointer;
  display: grid; grid-template-columns: 21px minmax(0,1fr); align-items: center; gap: 4px;
  background: linear-gradient(100deg,#241b0e,#11161a 72%); color: var(--ds-copy);
  border: 1px solid #6a5429; border-left: 3px solid #d7a84b; border-radius: 3px;
  box-shadow: 0 3px 8px #0009; text-align: left;
}
.attachedcard + .attachedcard { margin-top: -1px; transform: translateX(3px); }
.attachedcard img { width: 21px; height: 28px; object-fit: cover; }
.attachedcard span { min-width: 0; display: grid; gap: 1px; }
.attachedcard small { color: #d7a84b; font-size: 5.8px; line-height: 1; letter-spacing: .12em; }
.attachedcard b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 7px; line-height: 1.05; }
.attachedcard.aura { border-left-color: #8d7bd6; }
.attachedcard.aura small { color: #b9a9f2; }
.attachedcard.tapped { opacity: .68; }
.attachedcard:hover { border-color: #d7a84b; filter: brightness(1.12); }
.attachedcard.actable { box-shadow: 0 0 0 1px #4ab8d9, 0 3px 9px #0009; }
.attachedcard.targetable { box-shadow: 0 0 0 1px var(--ds-accent-bright), 0 0 11px #e8c05a66; }
.cdrow { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 11.5px; }
.cdrow span:first-child { min-width: 82px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdbar { flex: 1; height: 7px; background: #262b36; border-radius: 4px; overflow: hidden; }
.cdfill { display: block; height: 100%; background: #c9973a; }
.cdfill.hot { background: #d95a4a; }
.cdnone { color: #667; font-size: 11px; margin-top: 4px; }
.mini.eligible { border-color: #4a90d9; }
.mini.attacking { border-color: #d95a4a; box-shadow: 0 0 10px #d95a4a88; }
.mini.blocking { border-color: #5aa860; box-shadow: 0 0 10px #5aa86088; }
.atkchip { position: absolute; bottom: 20px; left: 0; right: 0; background: #d95a4add; font-size: 8px; text-align: center; padding: 1px; }
.targetable { border-color: var(--ds-accent-bright) !important; box-shadow: 0 0 12px #e8c05a99 !important; cursor: pointer; animation: pulse 1.2s infinite; }
.target-selected { position: relative; border-color: #ff6b3d !important; box-shadow: 0 0 0 2px rgba(255,107,61,.78), 0 0 24px rgba(255,76,30,.68) !important; cursor: pointer; animation: targetLocked 1.35s ease-in-out infinite; }
.target-selected::after { content: ''; position: absolute; inset: 3px; z-index: 4; pointer-events: none; border: 1px solid rgba(255,211,153,.72); border-radius: inherit; }
.targetorderbadge { position: absolute; z-index: 14; top: -8px; left: -8px; min-width: 29px; height: 29px; padding: 0 7px; display: flex; align-items: center; justify-content: center; gap: 3px; border: 1px solid #ffd19a; border-radius: 999px; color: #fff7e8; background: linear-gradient(145deg,#ff6b3d,#982914); box-shadow: 0 5px 18px #000b, 0 0 18px rgba(255,82,35,.65); font: 800 12px/1 var(--ds-font-body); }
.targetorderbadge span { font-size: 11px; }
@keyframes targetLocked { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes pulse { 50% { box-shadow: 0 0 4px #e8c05a55; } }

.landstack { background: #1c2029; border: 2px solid #2a2f3a; border-radius: 8px; padding: 4px 7px; font-size: 10px; flex-shrink: 0; min-width: 64px; }
.landstack.tapped { opacity: .55; }
.landstack .lname { font-size: 9px; color: #cdd; white-space: nowrap; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.landstack .lcount { color: #8a9; font-weight: 700; }
.meinfo { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; flex-shrink: 0; padding-left: 6px; }
.meinfo.monarch { border-color: #d8aa42; box-shadow: 0 0 0 1px #edca7040, 0 0 24px #d8aa4230; }
.memonarch { display: flex; align-items: center; gap: 4px; padding: 3px 6px; color: #f5d579; background: #2b210d; border: 1px solid #c99c39; border-radius: 6px; }
.memonarch span { font-size: 18px; line-height: 1; }
.memonarch b { font-size: 8px; letter-spacing: .12em; }
.melife { font-size: 20px; font-weight: 800; color: #f0d0a0; }
.zbtns { display: flex; gap: 4px; }
.zbtn { background: #262b36; color: #cde; border: none; border-radius: 7px; padding: 4px 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.zbtn .gameicon { width: 13px; height: 13px; color: #c7aa72; }
.zbtn b { color: #dce4df; font: 700 10px/1 var(--tbl-cond); }

/* wrap: sa partnerima može biti 2 komandera + emblem u istom redu */
.czrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; }
.czcard { display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg,#2a2416,#1c2029); border: 2px solid #c9a03a88; border-radius: 10px; padding: 5px 8px; flex: 1 1 230px; min-width: 0; position: relative; }
.czcard.castable { border-color: #5aa860; box-shadow: 0 0 10px #5aa86055; }
.czcard > img { width: 40px; height: 54px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.czinfo { flex: 1; min-width: 0; }
.czlabel { font-size: 8.5px; letter-spacing: 1.2px; color: #c9a03a; font-weight: 800; display: flex; align-items: center; gap: 5px; }
.czlabel .gameicon { width: 12px; height: 12px; }
.czname { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.czcost { font-size: 10.5px; color: #aab; display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.czcost .tax { color: #d98a5a; }
.czgo { background: linear-gradient(90deg,#c9973a,#d95a4a); color: #fff; font-weight: 800; font-size: 12px; padding: 8px 10px; border-radius: 9px; }
/* The Ring emblem uz komandera */
/* emblem ne otima prostor komanderu — ne raste, samo se skuplja i prelama */
.ringcard { cursor: pointer; background: linear-gradient(90deg,#2b2110,#191c24); border-color: #e8c05a99; flex: 0 1 260px; }
.ringart { width: 40px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 5px; background: radial-gradient(circle at 50% 40%, #4a3714, #14161d 70%); border: 1px solid #e8c05a55; }
.ringart .gameicon { width: 25px; height: 25px; color: #f0c76f; }
.ringnone { color: #778; font-weight: 400; font-style: italic; }
.ringpips { display: flex; gap: 4px; margin-top: 4px; }
.ringpip { width: 100%; height: 4px; border-radius: 2px; background: #3a3f4a; }
.ringpip.on { background: linear-gradient(90deg,var(--ds-accent-bright),#d99a3a); }
.ringab { font-size: 12px; line-height: 1.45; color: var(--ds-muted); margin: 5px 0; }
.ringab.on { color: #e8e8ea; }
.ringchoiceguide { margin: 12px 0 18px; padding: 14px; border: 1px solid #ad8b4d; border-radius: 8px; background: #211b12; color: #f2e9d7; }
.ringchoiceguide h3 { margin: 0 0 8px; font-size: 18px; }
.ringchoiceguide p { margin: 8px 0; font-size: 14px; line-height: 1.5; }
.ringchoiceguide ol { display: grid; gap: 8px; margin: 12px 0; padding-left: 24px; }
.ringchoiceguide li { padding-left: 4px; font-size: 14px; line-height: 1.5; }
.ringchoiceguide li b { display: block; color: #f2cc82; font-size: 11px; letter-spacing: .06em; }
.ringchoiceguide li.locked, .ringchoiceguide li.locked b { color: #b3afa6; }
.hintact { color: #4ab8d9; }
.helptext { font-size: 12.5px; line-height: 1.55; color: #cdd; }
.promptbar { background: #1a1e26; border-top: 1px solid #2a2f3a; padding: 7px 10px; display: flex; flex-direction: column; gap: 6px; }
.ptext { font-size: 13px; }
.ptext.dim { color: #789; }
.priorityruleshint { padding: 7px 9px; border: 1px solid rgba(98,179,255,.32); border-radius: 7px; background: rgba(30,79,118,.22); color: #c9e8ff; font-size: 11px; line-height: 1.35; }
.priorityruleshint b { color: #8dceff; }
.pbtn { background: #2e3542; color: #e8e8ea; border: none; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.pbtn.primary { background: linear-gradient(90deg,#c9973a,#d95a4a); color: #fff; }
.pbtn.danger { background: #8a3a3a; }
.pbtn.wide { width: 100%; margin-top: 6px; }
.pbtn.selected { outline: 2px solid var(--ds-accent-bright); }
.pbtn.choice { flex: 1; }
.pbtn:disabled { opacity: .45; }
.btnrow { display: flex; gap: 8px; margin-top: 8px; }
.btnrow.center { justify-content: center; }
.atkrow { display: flex; gap: 6px; overflow-x: auto; }
.atkchipbig { background: #3a2a2a; border: 1px solid #6a4a4a; border-radius: 8px; padding: 5px 8px; font-size: 11.5px; white-space: nowrap; }
.atkchipbig.selchip { border-color: var(--ds-accent-bright); background: #4a3a2a; }
.btnrow.offzone { flex-wrap: wrap; gap: 6px; }
.btnrow.offzone .pbtn { font-size: 12px; padding: 7px 10px; background: #2a3550; border: 1px solid #46567e; flex: 0 1 auto; }

.handwrap { background: #14161c; border-top: 1px solid #2a2f3a; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
.hand { display: flex; gap: 6px; overflow-x: auto; min-height: 108px; align-items: flex-end; }
.hcard { position: relative; width: 76px; height: 104px; border-radius: 8px; flex-shrink: 0; background: #222; border: 2px solid transparent; overflow: hidden; }
.hcard::before { content:''; position: absolute; inset: 0; background: var(--frame, #555); opacity: .85; }
.hcard img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; border-radius: 6px; }
.hcard .mname { position: absolute; bottom: 0; left: 0; right: 0; font-size: 8.6px; background: #000c; padding: 2px 3px; }
.hcard .hcost { position: absolute; top: 2px; right: 2px; display: flex; gap: 1px; flex-wrap: wrap; justify-content: flex-end; max-width: 90%; }
.hcard.castable { border-color: #5aa860; box-shadow: 0 0 10px #5aa86077; }
.hcard[role="button"] { cursor: pointer; }
.hcard[role="button"]:focus-visible,
.mini[role="button"]:focus-visible,
.czcard[role="button"]:focus-visible,
.stackpopitem[role="button"]:focus-visible,
.stackitem[role="button"]:focus-visible { outline: 2px solid var(--ds-accent-bright); outline-offset: 3px; }
.msym { width: 14px; height: 14px; vertical-align: -2px; border-radius: 50%; box-shadow: 0 1px 1px #0006; }
.czcost .msym, .stype .msym { width: 13px; height: 13px; }
.pip { display: inline-flex; align-items: center; justify-content: center; min-width: 13px; height: 13px; border-radius: 50%; font-size: 8.5px; font-weight: 800; padding: 0 2px; border: 1px solid #0006; }

/* overlays */
.overlay { position: fixed; inset: 0; background: #000a; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.overlay.dark { background: #000d; align-items: center; }
.modal { background: #1c2029; border-radius: 16px 16px 0 0; padding: 14px; width: 100%; max-width: 640px; max-height: calc(82 * var(--dvhu)); overflow-y: auto; }
.overlay.dark .modal { border-radius: 16px; width: 88%; }
.mtitle { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.mtitle.small { font-size: 12.5px; color: var(--ds-accent-soft); margin-top: 10px; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; margin: 8px 0; }
.bigcard { position: relative; border-radius: 8px; overflow: hidden; background: #262b36; border: 2px solid #333a48; aspect-ratio: 5/7; }
.bigcard img { width: 100%; height: 100%; object-fit: cover; }
.bigcard img.noimg { display: none; }
.bigcard .bcname { position: absolute; bottom: 0; left: 0; right: 0; background: #000c; font-size: 9.5px; padding: 3px 4px; }
.bigcard.selected { border-color: var(--ds-accent-bright); box-shadow: 0 0 10px #e8c05a88; }
.bigcard.scrybottom { opacity: .5; }
.bigcard.inspectable { cursor: pointer; }
.bigcard.castable { border-color: #65bf72; box-shadow: 0 0 14px #65bf7288; }
.bigcard .zoneplay { position: absolute; top: 5px; right: 5px; z-index: 2; border: 1px solid #9ee6a8; border-radius: 4px; background: #17391fed; color: #dfffe4; font-size: 9px; font-weight: 900; letter-spacing: .08em; padding: 3px 5px; }
.decisioncards { margin: 8px 0 12px; padding: 10px; border: 1px solid #3d4654; border-radius: 11px; background: #11151dcc; }
.decisioncardslabel { color: var(--ds-accent-soft); font-size: 9.5px; font-weight: 850; letter-spacing: .13em; text-align: center; }
.decisioncards .decisioncardgrid { grid-template-columns: repeat(auto-fit, minmax(150px, 170px)); justify-content: center; margin-bottom: 0; }
.decisioncardgrid .bigcard { width: 100%; }
.choicevisualoption { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(160px, 1.2fr); align-items: center; gap: 12px; min-height: 112px; margin-top: 7px; padding: 9px; text-align: left; }
.choiceoptionart { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; padding: 2px; }
.choiceoptionthumb { width: 58px; aspect-ratio: 5/7; flex: 0 0 auto; overflow: hidden; border: 1px solid #4a5262; border-radius: 5px; background-image: var(--art-back); background-size: cover; background-position: center; box-shadow: 0 4px 10px #0008; }
.choiceoptionthumb img { display: block; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.choiceoptionthumb.hidden { filter: saturate(.7) brightness(.72); }
.choiceoptionlabel { color: #eef1f5; font-size: 12px; font-weight: 750; line-height: 1.35; }
.scrylabel { position: absolute; top: 4px; left: 4px; background: #000c; font-size: 10px; font-weight: 800; padding: 2px 5px; border-radius: 5px; color: var(--ds-accent-bright); }
.xrow { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px 0; }
.xrow .pbtn { font-size: 22px; width: 52px; }
.xval { font-size: 30px; font-weight: 800; min-width: 48px; text-align: center; }
.pbtn.manacolorchoice { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; font-size: 13px; }
.manacolorchoice .mana-glyph { width: 24px; height: 24px; flex: 0 0 auto; }
.selectionreview { display:flex; flex-direction:column; gap:4px; margin:7px 0; padding:8px 10px; color:#b5aea1; background:rgba(8,12,13,.72); border-left:3px solid var(--ds-accent); font-size:10px; line-height:1.35; }
.selectionreview b { color:#f0d4a7; font-size:11px; }.selectionreview span { max-height:42px; overflow:auto; }

/* Numbered multi-target selection: the board remains clickable while this
   compact tray keeps the full target set visible and reversible. */
.promptbar.targetprompt { gap: 6px; border-color: rgba(255,111,67,.58); box-shadow: 0 -14px 38px rgba(123,31,12,.35), inset 0 1px rgba(255,228,196,.08); }
.targetprompthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #f7e7d4; font-size: 13px; }
.targetprompthead > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.targetprompthead strong { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(255,125,77,.48); border-radius: 999px; color: #ffbd91; background: rgba(104,29,12,.52); font: 800 11px/1 var(--ds-font-body); letter-spacing: .08em; }
.targetprompthint { color: var(--ds-copy); font-size: 12px; line-height: 1.45; }
.targetpromptbody { min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.targetpromptbody > * { flex-shrink: 0; }
.targetinstruction { padding: 10px 12px; border-left: 3px solid var(--ds-accent-bright); border-radius: 4px; background: rgba(var(--ds-accent-rgb), .1); }
.targetstep { display: block; margin-bottom: 6px; color: var(--ds-accent-bright); font: 750 10px/1.3 var(--ds-font-body); letter-spacing: .1em; }
.targetinstructiontext { color: var(--ds-text); font: 650 15px/1.5 var(--ds-font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.targetprevious { color: var(--ds-copy); font: 400 12px/1.5 var(--ds-font-body); overflow-wrap: anywhere; }
.targetprevious b { color: var(--ds-accent-bright); }
.targetzonelinks { display: flex; gap: 6px; overflow: auto; flex: 0 0 auto; padding: 2px; }
.targetzoneopen { flex: 1 0 150px; border-color: var(--ds-accent-bright) !important; color: var(--ds-accent-bright); text-align: left; }
.targetzoneopen span { display: block; color: var(--ds-copy); font-size: 10px; }
.targetzone { position: relative; overflow: visible !important; outline: 2px solid var(--ds-accent-bright); outline-offset: 2px; box-shadow: 0 0 14px rgba(var(--ds-accent-rgb), .5); }
.targetzonebadge { display: block; padding: 2px 3px; border-radius: 3px; background: var(--ds-accent-bright); color: var(--ds-accent-ink); font: 800 8px/1.2 var(--ds-font-body); pointer-events: none; }
.zonetargetguide { display: grid; gap: 8px; margin: 8px 0 16px; padding: 12px; border-left: 3px solid var(--ds-accent-bright); background: rgba(var(--ds-accent-rgb), .1); color: var(--ds-text); font: 500 14px/1.5 var(--ds-font-body); overflow-wrap: anywhere; }
.zonetargetguide b { color: var(--ds-accent-bright); }
.zonetargetguide small { color: var(--ds-copy); }
.zonetargetpicker .targetineligible { opacity: .45; }
.targetzonepick { color: var(--ds-accent-ink) !important; background: var(--ds-accent-bright) !important; font-weight: 800; }
.targetpickchips { display: flex; align-items: center; gap: 6px; min-height: 29px; overflow-x: auto; }
.targetpickchip { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; max-width: 210px; padding: 4px 7px 4px 4px; border: 1px solid rgba(255,117,70,.5); border-radius: 999px; color: #f7e9d8; background: linear-gradient(90deg,rgba(137,39,17,.78),rgba(48,23,17,.88)); cursor: pointer; }
.targetpickchip span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--ds-accent-ink); background: #ffb27c; font: 900 10px/1 var(--ds-font-body); }
.targetpickchip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.targetpickchip i { color: #ffb18e; font-style: normal; font-weight: 900; }
.targetpickempty { color: var(--ds-muted); font-size: 10.5px; font-style: italic; }
.targetpromptactions { margin-left: auto; }
.promptbar.proliferateprompt { border-color:rgba(104,225,168,.62); box-shadow:0 -14px 38px rgba(26,105,75,.3),inset 0 1px rgba(205,255,231,.08); background:linear-gradient(100deg,rgba(15,43,34,.97),rgba(25,20,44,.97)); }
.proliferateprompt .targetprompthead .gameicon { width:19px; height:19px; vertical-align:-5px; color:#76e2ac; filter:drop-shadow(0 0 7px #50d69688); }
.proliferateprompt .targetprompthead strong { color:#a5f1c9; border-color:rgba(104,225,168,.5); background:rgba(24,89,65,.54); }
.targetpickchip.proliferatechoice { display:grid; grid-template-columns:20px minmax(0,auto) auto; column-gap:6px; border-color:rgba(100,218,158,.52); background:linear-gradient(90deg,rgba(22,102,71,.72),rgba(38,28,63,.88)); }
.targetpickchip.proliferatechoice span { grid-row:1/3; color: var(--ds-accent-ink); background:#86e5b5; }
.targetpickchip.proliferatechoice small { grid-column:2; max-width:190px; overflow:hidden; color:#a5cdb9; font-size:7.5px; text-overflow:ellipsis; white-space:nowrap; }
.targetpickchip.proliferatechoice i { grid-column:3; grid-row:1/3; align-self:center; color:#9ce7c0; }

/* Divided-damage review. Every target stays visible while one row is edited;
   the final forced row is still confirmed so no allocation is hidden. */
.damageallocationmodal { max-width: 900px !important; padding: 22px !important; border: 1px solid rgba(255,103,55,.64) !important; background: radial-gradient(circle at 85% 0,rgba(139,42,17,.24),transparent 38%),linear-gradient(145deg,#171c1c,var(--ds-table) 72%) !important; }
.damageallocationkicker { color: #ff8d5c; font: 800 10px/1.2 var(--ds-font-display); letter-spacing: .24em; }
.damageallocationhero { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 13px; margin-top: 11px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,187,137,.16); }
.damageallocationhero > img { width: 58px; height: 58px; border-radius: 7px; object-fit: cover; border: 1px solid rgba(255,169,111,.35); }
.damageallocationhero > div:not(.damageallocationtotal) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.damageallocationhero small { color: #8f887e; font: 700 8px/1 var(--ds-font-display); letter-spacing: .18em; }
.damageallocationhero b { overflow: hidden; color: #f8ead8; font: 22px/1.1 var(--ds-font-display); text-overflow: ellipsis; white-space: nowrap; }
.damageallocationhero span { color: #aca59a; font-size: 11px; }
.damageallocationtotal { min-width: 92px; display: flex; flex-direction: column; align-items: flex-end; }
.damageallocationtotal strong { color: #ff7749; font: 800 36px/1 var(--ds-font-display); text-shadow: 0 0 24px rgba(255,78,27,.45); }
.damageallocationtotal span { color: #b69d8f; font: 700 8px/1 var(--ds-font-display); letter-spacing: .15em; text-transform: uppercase; }
.damageallocationprogress { height: 4px; margin: 13px 0; overflow: hidden; border-radius: 99px; background: #2d221e; }
.damageallocationprogress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#b93819,#ffad6e); box-shadow: 0 0 16px #ff6a36; transition: width .16s ease; }
.damageallocationlist { display: grid; gap: 7px; }
.damageallocationrow { position: relative; display: grid; grid-template-columns: 28px 44px minmax(0,1fr) 72px auto; align-items: center; gap: 10px; min-height: 58px; padding: 6px 9px; border: 1px solid rgba(226,205,169,.11); border-radius: 8px; background: rgba(4,8,9,.58); }
.damageallocationrow.current { border-color: rgba(255,118,69,.66); background: linear-gradient(90deg,rgba(130,40,18,.3),rgba(7,11,11,.76)); box-shadow: inset 3px 0 #ff6a39,0 8px 22px rgba(0,0,0,.22); }
.damageallocationrow.locked { border-color: rgba(117,168,108,.3); }
.damageallocationrow.pending { opacity: .58; }
.damagetargetnumber { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(255,163,105,.52); border-radius: 50%; color: #ffd6b6; background: #542416; font: 900 10px/1 var(--ds-font-body); }
.damageallocationrow > img,.damageplayericon { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(224,203,166,.2); }
.damageplayericon { display: grid; place-items: center; color: #f4d6bd; background: radial-gradient(circle,#77351f,#17100d); font-size: 20px; }
.damagetargetinfo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.damagetargetinfo b { overflow: hidden; color: #eee6da; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.damagetargetinfo small { color: #817d76; font-size: 9px; }
.damageamount { display: flex; flex-direction: column; align-items: flex-end; }
.damageamount strong { color: #ff8355; font: 800 25px/1 var(--ds-font-display); }
.damageamount span { color: #927b70; font: 700 7px/1 var(--ds-font-display); letter-spacing: .13em; text-transform: uppercase; }
.damageamount.waiting strong { color: var(--ds-muted); }
.damagecontrols { display: flex; gap: 5px; }
.damagecontrols .pbtn { min-width: 35px !important; width: 35px; height: 35px; padding: 0 !important; font-size: 18px !important; }
.damageallocationsummary { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; color: #9c958a; font-size: 10px; }
.damageallocationsummary b { color: #f0c199; }
.damageallocationnote { margin: 10px 0; padding: 8px 10px; border-left: 2px solid #b64b29; color: #aaa096; background: rgba(105,37,18,.13); font-size: 10.5px; line-height: 1.4; }
.damageconfirm { padding: 12px 16px !important; }

.sheet { background: #1c2029; border-radius: 16px 16px 0 0; width: 100%; max-width: 640px; max-height: calc(88 * var(--dvhu)); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sheet.tall { min-height: calc(55 * var(--dvhu)); }
.sheetkeywords { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.sheetkeyword { display:flex; align-items:center; gap:5px; padding:4px 7px; color:#e9e5db; background:#111a; border:1px solid currentColor; border-radius:999px; font-size:9px; }
.sheetkeyword .gameicon { width:16px; height:16px; }.sheetkeyword small { color:#9ca3a4; }.sheetkeyword.tone-gold { color:var(--ds-accent-bright); }.sheetkeyword.tone-blue { color:#6ed8ff; }.sheetkeyword.tone-violet { color:#cda1ff; }.sheetkeyword.tone-red { color:#ff826c; }.sheetkeyword.tone-orange { color:#ffbd69; }.sheetkeyword.tone-sky { color:#9ee8ff; }.sheetkeyword.tone-acid { color:#b4ee78; }.sheetkeyword.tone-rose { color:#ff9eb4; }.sheetkeyword.tone-green { color:#8ed48b; }.sheetkeyword.tone-white { color:var(--ds-accent-glow); }.sheetkeyword.tone-crimson { color:#ff6f79; }.sheetkeyword.tone-silver { color:#cbd2d3; }.sheetkeyword.tone-cyan { color:#71e7dc; }
.sheettitlebar { position: sticky; top: -12px; z-index: 3; margin: -12px -12px 0; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(180deg,rgba(24,29,38,.99),rgba(24,29,38,.95)); border-bottom: 1px solid rgba(231,215,181,.12); }
.sheettitlebar .mtitle { margin: 0; }
.sheetclose { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: #cbd2d0; background: rgba(7,11,12,.72); border: 1px solid rgba(231,215,181,.2); border-radius: 50%; font-size: 20px; cursor: pointer; }
.sheetclose:hover { color: #fff; border-color: rgba(231,177,94,.7); }
.sheetclose:focus-visible { outline: 3px solid var(--ds-accent-bright); outline-offset: 2px; }
.sheetimg { width: min(62 * var(--vwu), 250px); border-radius: 12px; align-self: center; }
.sheetimg.noimg { display: none; }
.sname { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stype { font-size: 12px; color: var(--ds-accent-soft); margin: 3px 0; }
.spt { font-size: 13px; font-weight: 700; margin: 2px 0; }
.smarkeddamage { display:grid; gap:4px; margin:7px 0; padding:8px 10px; color:#f8d6ce; background:#361c1b; border-left:3px solid #e27868; border-radius:4px; }
.smarkeddamage b { font-size:12px; }
.smarkeddamage span { font-size:11px; line-height:1.45; }
.soracle { font-size: 12.5px; line-height: 1.45; color: #cdd; background: #14161c; border-radius: 8px; padding: 8px; margin-top: 5px; }
.simplified { font-size: 11px; color: #d9a05a; margin-top: 5px; }
.sheetacts { display: flex; flex-direction: column; gap: 2px; }
.cmddmg { font-size: 12px; color: #cdd; background: #14161c; padding: 8px; border-radius: 8px; margin-bottom: 6px; }

.logpanel { position: fixed; inset: 0; background: #14161cf5; z-index: 50; padding: 14px; display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; }
.logbox { flex: 1; overflow-y: auto; font-size: 12px; line-height: 1.5; }
.logline { padding: 1px 0; border-bottom: 1px solid #1e2230; }
.logline .lt { color: #667; font-size: 10px; }
.logline.dmg { color: #e8a0a0; }
.logline.cast { color: #a0c0e8; }
.logline.attack { color: var(--ds-accent-bright); }
.logline.win, .logline.lose { color: var(--ds-accent-bright); font-weight: 700; }
.logline.turn { color: #8a9; font-weight: 700; margin-top: 4px; }
.logline.token { color: #a0d8a0; }
.logline.counter { color: #d8a0e8; font-weight: 700; }


.importbox { background: #1c2029; border: 2px dashed #3a4050; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.importbox textarea { background: #12141a; color: #dde; border: 1px solid #2a2f3a; border-radius: 8px; padding: 8px; font-size: 12px; font-family: monospace; resize: vertical; }
.importnote { font-size: 10.5px; color: #8a95a8; line-height: 1.45; }
.impstatus { font-size: 12px; color: var(--ds-accent-soft); min-height: 16px; }
.judgegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.judgegrid .pbtn { font-size: 12.5px; padding: 9px 6px; }
.lastresortconfirm { z-index: 185; }
.lastresortwarning { width: min(560px, calc(100 * var(--vwu) - 28px)); display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid rgba(255,112,74,.56); background: linear-gradient(155deg,#24110e,#0d1114 62%); box-shadow: 0 34px 100px #000e,0 0 56px rgba(214,64,34,.18); }
.lastresortwarning .lastresortmark { font-size: 42px; line-height: 1; }
.lastresortwarning p,.lastresortwarning li { color: #c9b8b0; font-size: 12px; line-height: 1.5; }
.lastresortwarning ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.lastresortwarning .btnrow { justify-content: flex-end; }
.pbtn.danger { color: #ffe4da; border-color: #bc4a31; background: linear-gradient(180deg,#87321f,#542117); }
.lastresortoverlay { z-index: 180; }
.lastresortsheet { width: min(720px,100%); border: 1px solid rgba(255,109,70,.46); background: linear-gradient(155deg,#1d1514,#11171a 48%,#0d1114); box-shadow: 0 30px 100px #000d,0 0 50px rgba(191,55,30,.14); }
.lastresorthead { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid rgba(255,111,72,.34); border-radius: 10px; background: rgba(104,29,18,.24); }
.lastresorthead > span { font-size: 34px; }
.lastresorthead small { color: #e4775c; font: 800 9px/1 var(--ds-font-body); letter-spacing: .15em; }
.lastresorthead h2 { margin: 4px 0 2px; color: #ffe4d8; font-size: 22px; }
.lastresorthead p { margin: 0; color: #9d8d87; font-size: 11px; }
.lastresortprivacy { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border-left: 3px solid #6e9a94; background: rgba(50,87,82,.14); }
.lastresortprivacy b { color: #9ed0c8; font-size: 9px; letter-spacing: .12em; }
.lastresortprivacy span { color: #9ea9a6; font-size: 10.5px; line-height: 1.4; }
.lastresortstatus { padding: 8px 10px; color: #b5d9be; border-left: 3px solid #6bad7d; background: rgba(73,126,86,.13); font-size: 10.5px; }
.lastresortstatus.error { color: #efaa96; border-color: #d75236; background: rgba(132,42,25,.16); }
.lastresortplayer { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: 10px; }
.lastresortplayer > span { color: #b78776; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.lastresortplayer select { width: 100%; min-height: 42px; }
.lastresortgrid .pbtn,.lastresorttokens .pbtn { min-height: 46px; }
.lastresortcardtitle { margin: 8px 0 3px; padding: 8px; color: #f4a086; border-top: 1px solid rgba(255,109,70,.3); border-bottom: 1px solid rgba(255,109,70,.16); background: rgba(115,34,20,.15); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-align: center; }
.lastresortcardaction { border-color: rgba(224,100,68,.4) !important; }
.lastresortcard .zoneplay { color: #ffe1d4; background: #7e2b1d; }
.hiddenzonecards { grid-column: 1/-1; padding: 16px; color: #9e958e; border: 1px dashed #4a4642; border-radius: 8px; background: #121517; font-size: 11px; text-align: center; }
.lastresortfoot { position: sticky; bottom: -12px; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 5px -12px -12px; padding: 12px; border-top: 1px solid rgba(255,112,72,.26); background: rgba(13,17,20,.97); }
.lastresortfoot .pbtn { min-height: 48px; }

@media (max-width: 600px) {
  .lastresortsheet { max-height: calc(92 * var(--dvhu)); }
  .lastresortgrid,.lastresorttokens { grid-template-columns: 1fr; }
  .lastresortplayer { grid-template-columns: 1fr; gap: 5px; }
  .lastresortfoot { grid-template-columns: 1fr; }
}

.gameover { font-size: 24px; font-weight: 800; text-align: center; margin: 10px 0 16px; }
.turnbanner { position: fixed; top: 34%; left: 50%; transform: translateX(-50%); background: #1c2029f2; border: 2px solid #4a5060; color: #e8e8ea; font-size: 18px; font-weight: 800; padding: 13px 26px; border-radius: 14px; z-index: 95; white-space: nowrap; animation: bannerIn 1.5s ease forwards; box-shadow: 0 6px 30px #000a; pointer-events: none; }
.turnbanner.gold { border-color: var(--ds-accent-bright); color: var(--ds-accent-bright); box-shadow: 0 0 30px #e8c05a44; }
@keyframes bannerIn { 0% { opacity: 0; transform: translateX(-50%) scale(.85); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }
.monarchannouncement { position: fixed; z-index: 190; top: 28%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; width: min(calc(100 * var(--vwu) - 28px),520px); min-width: 0; box-sizing: border-box; padding: 18px 24px; color: #f4e7bf; background: linear-gradient(115deg,#271e0bf5,#0e1011f7 68%); border: 2px solid #d8aa42; border-radius: 12px; box-shadow: 0 24px 70px #000c,0 0 55px #d6a73c3b,inset 0 1px #fff3bd33; pointer-events: none; animation: monarchIn .3s cubic-bezier(.2,.8,.2,1) both; }
.monarchannouncement.mine { border-color: #f1c862; box-shadow: 0 24px 70px #000c,0 0 70px #efbd4c55,inset 0 1px #fff3bd44; }
.monarchannouncementcrown { flex: none; color: #f5cf69; font-size: 58px; line-height: 1; text-shadow: 0 0 24px #e9ba4d66; }
.monarchannouncementcopy { display: flex; flex-direction: column; gap: 5px; }
.monarchannouncementcopy small { color: #c69f4b; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.monarchannouncementcopy b { color: #fff5d5; font-size: 20px; letter-spacing: .06em; }
.monarchannouncementcopy em { color: #b8aa87; font-size: 11px; font-style: normal; }
.monarchannouncement.leaving { opacity: 0; transform: translateX(-50%) scale(.94); transition: .32s ease; }
@keyframes monarchIn { from { opacity: 0; transform: translateX(-50%) scale(.86); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.diplomacyannouncement { position: fixed; z-index: 195; top: 22%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 14px; width: min(calc(100 * var(--vwu) - 32px),720px); box-sizing: border-box; padding: 17px 19px; color: #eee7d7; background: linear-gradient(120deg,#17221ff7,#0b1011f8 70%); border: 1px solid #8fae91; border-left: 5px solid var(--ds-accent); border-radius: 11px; box-shadow: 0 26px 80px #000d,0 0 44px #7ca58226; animation: monarchIn .28s cubic-bezier(.2,.8,.2,1) both; }
.diplomacyannouncement.incoming { border-color: var(--ds-accent-bright); box-shadow: 0 26px 80px #000d,0 0 58px rgba(var(--ds-accent-rgb), .24); }
.diplomacyannouncementicon { color: var(--ds-accent-bright); font-size: 38px; text-align: center; filter: drop-shadow(0 0 15px rgba(var(--ds-accent-rgb), .33)); }
.diplomacyannouncementcopy { min-width: 0; display: grid; gap: 4px; }
.diplomacyannouncementcopy small { color: #91aa93; font: 800 8px/1 var(--tbl-cond); letter-spacing: .2em; }
.diplomacyannouncementcopy b { color: #fff3d8; font: 18px/1.1 var(--ds-font-display); }
.diplomacyannouncementcopy em { color: #b9aa8c; font-size: 9px; font-style: normal; }
.diplomacyannouncementcopy p { margin: 2px 0 0; color: #c4c5bb; font-size: 10px; line-height: 1.45; }
.diplomacyannouncementopen { min-width: 112px; }
.diplomacyannouncement.leaving { opacity: 0; transform: translateX(-50%) scale(.95); transition: .32s ease; }
.toastmsg { position: fixed; bottom: 130px; left: 50%; transform: translateX(-50%); background: #262b36ee; border: 1px solid #4a5060; color: #fff; padding: 9px 16px; border-radius: 10px; font-size: 13px; z-index: 90; max-width: 88%; text-align: center; }

.effectnoticestack { position: fixed; right: 18px; bottom: 118px; z-index: 140; display: flex; flex-direction: column; gap: 8px; width: min(390px, 32 * var(--vwu)); pointer-events: none; }
.effectnotice { background: linear-gradient(135deg, #202638f2, #2c2340f2); border: 1px solid #8c72c7; border-left: 4px solid #d9b95d; color: #fff; padding: 11px 14px; border-radius: 9px; box-shadow: 0 8px 25px #0009; font-size: 13px; line-height: 1.35; animation: effectin .2s ease-out; }
.effectnotice.counter { border-left-color: #d85d66; }
.effectnotice.spellCopy, .effectnotice.abilityCopy { border-left-color: #6eb4ef; }
.effectnotice.leaving { opacity: 0; transform: translateX(20px); transition: .22s ease; }
@keyframes effectin { from { opacity: 0; transform: translateX(25px); } }
.spellcopynoticestack { position: fixed; left: 18px; bottom: 118px; z-index: 130; display: flex; flex-direction: column; gap: 8px; width: min(410px,34 * var(--vwu)); pointer-events: none; }
.spellcopynotice { min-height: 88px; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 10px; padding: 8px; color: #eaf6ff; background: linear-gradient(120deg,#10232ef2,#0a0d11f5 72%); border: 1px solid #65b5df99; border-left: 4px solid #82d3ff; border-radius: 9px; box-shadow: 0 16px 38px #000b,0 0 28px #52b8e52b; animation: effectin .2s ease-out; }
.spellcopynotice.mine { border-color: #d6b75c99; border-left-color: #f1cf6d; }
.spellcopynotice > img { width: 54px; height: 76px; object-fit: cover; border-radius: 5px; box-shadow: 0 7px 18px #0009; }
.spellcopynoticeinfo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.spellcopynoticeinfo > small { color: #82d3ff; font: 800 8px/1.1 var(--ds-font-body); letter-spacing: .13em; }
.spellcopynoticeinfo > b { overflow: hidden; color: #f3fbff; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.spellcopynoticeinfo > em { color: #8aa7b6; font-size: 9px; font-style: normal; }
.spellcopynotice.leaving { opacity: 0; transform: translateX(-24px); transition: .26s ease; }

.manamode.on { border-color: #d6b95c; color: #ffe59a; background: #3b321d; }
.manapickmodal { max-width: 860px; }
.manapickcost { text-align: center; font-size: 18px; margin: 2px 0 8px; }
.manapickhint { color: #bfc5d4; background: #171b25; border: 1px solid #353b4a; border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; }
.manasourcelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: calc(52 * var(--vhu)); overflow: auto; padding: 2px; }
.manasourcerow { display: grid; grid-template-columns: 28px 48px 1fr; align-items: center; gap: 9px; text-align: left; border: 1px solid #3d4352; background: #20242f; color: #edf0f7; border-radius: 9px; min-height: 62px; padding: 6px 9px; cursor: pointer; }
.manasourcerow:hover { border-color: #7a8298; }
.manasourcerow.selected { border-color: #d8bc64; background: #342f20; box-shadow: inset 0 0 0 1px #d8bc6440; }
.manasourcerow img { width: 44px; height: 54px; object-fit: cover; border-radius: 4px; }
.manasourcerow b, .manasourcerow small { display: block; }
.manasourcerow small { color: #acb4c7; margin-top: 3px; }
.manacheck { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #687083; border-radius: 50%; font-weight: 800; }
.manasourcerow.selected .manacheck { background: #d8bc64; border-color: #d8bc64; color: var(--ds-accent-ink); }
.manavalid { margin: 10px 0 4px; padding: 8px 11px; border-radius: 7px; }
.manavalid.ok { background: #173525; color: #9be4b8; }
.manavalid.bad { background: #3a2022; color: #f1adb2; }

/* Blokirajući pregled "each opponent" efekata. */
.effectreviewmodal { max-width: 900px; padding: 22px; border: 1px solid rgba(221,103,70,.6) !important; }
.effectreviewkicker { color: #ff9b78; font: 700 11px/1.2 var(--tbl-cond,inherit); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 12px; }
.effectreviewhero { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px; background: linear-gradient(100deg,rgba(92,29,18,.5),rgba(17,20,18,.86)); border: 1px solid rgba(226,130,90,.28); }
.effectreviewhero > img { width: 84px; height: 112px; object-fit: cover; border-radius: 3px; box-shadow: 0 10px 28px #000a; }
.effectreviewhero small,.effectreviewhero b,.effectreviewhero span { display:block; }
.effectreviewhero small { color:#a9a293; font-size:9px; letter-spacing:.18em; }
.effectreviewhero b { color:#fff3e6; font:700 24px/1.05 var(--tbl-serif,serif); margin:5px 0; }
.effectreviewhero span { color:#c0b7aa; font-size:12px; }
.effectreviewamount { min-width: 104px; text-align:center; padding:10px 14px; border-left:1px solid rgba(255,255,255,.1); }
.effectreviewamount strong,.effectreviewamount span { display:block; }
.effectreviewamount strong { color:#ff8b61; font:800 44px/.9 var(--tbl-cond,inherit); text-shadow:0 0 22px rgba(255,91,46,.36); }
.effectreviewamount span { color:#d8c5b7; font-size:10px; letter-spacing:.08em; text-transform:uppercase; margin-top:7px; }
.effectreviewtargets { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; margin:12px 0; }
.effectreviewtarget { padding:10px 12px; background:#111512; border:1px solid rgba(255,255,255,.11); border-left:3px solid #a96149; }
.effectreviewtarget.human { background:rgba(102,31,24,.38); border-color:#de7455; }
.effectreviewtarget span,.effectreviewtarget b { display:block; }
.effectreviewtarget span { color:#8f928b; font-size:8px; letter-spacing:.2em; }
.effectreviewtarget b { color:#f0eadf; font-size:13px; margin:3px 0 6px; }
.effectreviewtarget strong { color:#ffb09a; font:700 18px/1 var(--tbl-cond,inherit); }
.effectreviewnote { color:#aaa79f; font-size:11px; line-height:1.4; margin:2px 0 12px; }
.effectreviewmodal.lifeloss { border-color:rgba(151,106,187,.62) !important; }
.effectreviewmodal.lifeloss .effectreviewkicker,.effectreviewmodal.lifeloss .effectreviewamount strong { color:#d3a2f0; }

/* Kratak, neblokirajući signal za Commandera i velike creature ulaske. */
.battlefieldarrival { position:fixed; top:26px; left:50%; z-index:165; width:min(620px,calc(100 * var(--vwu) - 80px)); min-height:116px; transform:translateX(-50%); display:grid; grid-template-columns:86px minmax(0,1fr); align-items:center; gap:16px; overflow:hidden; pointer-events:none; padding:10px 22px 10px 12px; color:#fff6df; background:linear-gradient(100deg,rgba(16,13,8,.98),rgba(72,48,16,.96),rgba(10,13,11,.98)); border:1px solid rgba(239,190,91,.72); box-shadow:0 26px 75px #000d,0 0 48px rgba(232,173,70,.2); animation:arrivalIn .46s cubic-bezier(.16,.82,.2,1); }
.battlefieldarrival.powerhouse { background:linear-gradient(100deg,rgba(8,14,16,.98),rgba(22,59,64,.96),rgba(8,12,13,.98)); border-color:rgba(92,186,196,.65); }
.battlefieldarrival > img { position:relative; z-index:1; width:86px; height:96px; object-fit:cover; object-position:center 18%; border:1px solid rgba(255,231,174,.55); box-shadow:0 8px 24px #000c; }
.arrivalcopy { position:relative; z-index:1; min-width:0; }
.arrivalcopy small,.arrivalcopy b,.arrivalcopy span { display:block; }
.arrivalcopy small { color:var(--ds-accent-bright); font:700 10px/1 var(--tbl-cond,inherit); letter-spacing:.28em; }
.arrivalcopy small .gameicon { width:14px; height:14px; margin-right:6px; vertical-align:-.25em; }
.arrivalcopy b { overflow:hidden; color:#fff8e9; font:700 27px/1.05 var(--tbl-serif,serif); text-overflow:ellipsis; white-space:nowrap; margin:8px 0 6px; text-shadow:0 4px 24px #000; }
.arrivalcopy span { color:#d1c5ad; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.arrivalflare { position:absolute; inset:-60% -20%; background:radial-gradient(circle,rgba(255,203,104,.25),transparent 26%),linear-gradient(110deg,transparent 38%,rgba(255,238,188,.18) 49%,transparent 59%); animation:arrivalFlare 1.25s ease-out; }
.battlefieldarrival.leaving { opacity:0; transform:translateX(-50%) translateY(-18px) scale(.97); transition:.3s ease; }
.battlefieldarrival.commander {
  top: 50%;
  width: min(720px, calc(100 * var(--vwu) - 32px));
  min-height: 0;
  aspect-ratio: 4 / 3;
  display: block;
  padding: 0;
  transform: translate(-50%, -50%);
  background: var(--ds-table);
  border-color: rgba(var(--ds-accent-bright-rgb), .86);
  box-shadow: 0 42px 110px rgba(0,0,0,.9), 0 0 0 1px rgba(255,225,170,.16), 0 0 70px rgba(226,158,65,.22);
  animation: commanderArrivalIn .42s cubic-bezier(.16,.82,.2,1);
}
.battlefieldarrival.commander::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(255, 230, 184, .18);
  box-shadow: inset 0 0 54px rgba(0,0,0,.42);
}
.arrivalmedia { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--ds-table); }
.arrivalvideo,.arrivalfallback { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.arrivalfallback[hidden],.arrivalvideo[hidden] { display: none; }
.arrivalscan { position:absolute; inset:0; background:linear-gradient(115deg,transparent 36%,rgba(255,226,174,.12) 49%,transparent 61%); transform:translateX(-110%); animation:arrivalScan 1.6s .18s ease-out; mix-blend-mode:screen; }
.battlefieldarrival.commander .arrivalflare { z-index: 2; inset: -30%; opacity: .7; }
.battlefieldarrival.commander .arrivalcopy { position:absolute; left:0; right:0; bottom:0; z-index:4; padding:86px 28px 24px; background:linear-gradient(180deg,transparent,rgba(4,6,7,.82) 46%,rgba(4,6,7,.98)); }
.battlefieldarrival.commander .arrivalcopy b { max-width: 90%; font-size: 34px; }
.battlefieldarrival.commander .arrivalcopy span { color:#d8d0c1; }
.battlefieldarrival.commander.leaving { transform:translate(-50%,-53%) scale(.97); }
.mini.arrival-highlight { z-index:8; animation:permanentArrival 1.05s ease-in-out 3; }
@keyframes arrivalIn { from { opacity:0; transform:translateX(-50%) translateY(-24px) scale(.94); filter:blur(5px); } to { opacity:1; transform:translateX(-50%); filter:none; } }
@keyframes commanderArrivalIn { from { opacity:0; transform:translate(-50%,-46%) scale(.88); filter:blur(7px); } to { opacity:1; transform:translate(-50%,-50%); filter:none; } }
@keyframes arrivalFlare { from { transform:translateX(-35%); opacity:0; } 35% { opacity:1; } to { transform:translateX(35%); opacity:0; } }
@keyframes arrivalScan { to { transform:translateX(110%); } }
@keyframes permanentArrival { 0%,100% { box-shadow:0 0 8px rgba(226,174,64,.45); } 50% { box-shadow:0 0 0 3px var(--ds-accent-bright),0 0 34px 12px rgba(240,189,118,.8); transform:translateY(-8px) scale(1.08); } }

@media (max-width: 767px) {
  .battlefieldarrival.commander { width: calc(100 * var(--vwu) - 16px); }
  .battlefieldarrival.commander .arrivalcopy { padding: 58px 16px 15px; }
  .battlefieldarrival.commander .arrivalcopy small { font-size: 8px; letter-spacing: .2em; }
  .battlefieldarrival.commander .arrivalcopy b { max-width: 100%; margin: 6px 0 4px; font-size: 21px; }
  .battlefieldarrival.commander .arrivalcopy span { font-size: 9px; }
}

.mini.facedown { background: radial-gradient(circle at 35% 30%, #493d63, #171522 62%); border-color: #9c84c5; }
.mini.facedown > img { opacity: .28; filter: grayscale(1) contrast(1.2); }
.facedowntag { position: absolute; left: 4px; right: 4px; bottom: 22px; background: #171421e8; color: #e4d9ff; border: 1px solid #8d78b5; border-radius: 4px; padding: 2px 3px; font-size: 8px; text-align: center; overflow: hidden; white-space: nowrap; }
.facedownsheet { color: #e2d5ff; background: #302744; border: 1px solid #806aa7; border-radius: 6px; padding: 7px 9px; margin-bottom: 8px; font-size: 12px; letter-spacing: .04em; }
.faceupready { position: absolute; left: 4px; right: 4px; top: 24px; padding: 4px 2px; border: 1px solid #c4aae8; border-radius: 4px; background: #302744f2; color: #fff; font-size: 9px; font-weight: 800; text-align: center; pointer-events: none; }
.animatedpermanentstate { color: #c7fff5; background: linear-gradient(90deg,#0d3a3be8,#17453ee8); border: 1px solid #55d8ca; border-radius: 6px; padding: 7px 9px; margin-bottom: 2px; font-size: 10px; font-weight: 900; letter-spacing: .12em; }

/* ============================================================
   DESKTOP (≥1100px) — glavni raspored
   ============================================================ */
.sidebar { display: none; }
#hoverprev { display: none; position: fixed; z-index: 120; width: 300px; pointer-events: none; filter: drop-shadow(0 10px 30px #000c); }
#hoverprev img { width: 300px; border-radius: 14px; display: block; }
.personachip { font-size: 10px; background: #262b36; border: 1px solid #3a4050; color: var(--ds-accent-soft); border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.botstyles { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.botstylerow { display: flex; align-items: center; gap: 10px; }
.botname { font-size: 13px; font-weight: 600; min-width: 74px; }
.styleselect { flex: 1; background: #12141a; color: #e8e8ea; border: 1px solid #3a4050; border-radius: 8px; padding: 8px; font-size: 13px; }
.styledesc { font-size: 10.5px; color: #8a95a8; margin: 0 0 8px 46px; line-height: 1.35; }
.setupgrid { display: flex; flex-direction: column; }

/* --- izbor komandera --- */
.cmdbox { display: flex; flex-direction: column; gap: 8px; }
.cmdchosen { display: flex; flex-direction: column; gap: 6px; }
.cmdchip { display: flex; gap: 9px; background: #1c2029; border: 2px solid #e8c05a55; border-radius: 12px; overflow: hidden; }
.cmdchip img { width: 92px; height: 68px; object-fit: cover; flex: none; }
.cmdchipinfo { padding: 6px 8px 6px 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.cmdchipname { font-size: 12.5px; font-weight: 700; color: var(--ds-accent-bright); }
.cmdchiptype { font-size: 10px; color: #8a95a8; }
.cmdbadge { font-size: 10px; color: #7fd6a0; background: #1b2a20; border: 1px solid #2f5a3f; border-radius: 7px; padding: 1px 6px; align-self: flex-start; }
.cmdhint { font-size: 10.5px; color: #8a95a8; line-height: 1.4; }
.cmdcheck { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c8ccd6; margin-top: 10px; cursor: pointer; }
.cmdcheck input { width: 16px; height: 16px; accent-color: var(--ds-accent-bright); }
.cmdstatus { font-size: 12px; margin: 10px 0; padding: 7px 9px; border-radius: 9px; }
.cmdstatus.good { background: #16281c; color: #8fe0aa; border: 1px solid #2f5a3f; }
.cmdstatus.bad { background: #2a1a1a; color: #e89a9a; border: 1px solid #5a2f2f; }
.cmdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 10px 0; }
.cmdopt { display: flex; gap: 8px; background: #171a21; border: 2px solid #2a2f3a; border-radius: 11px; overflow: hidden; cursor: pointer; transition: border-color .12s, transform .12s; }
.cmdopt:hover { transform: translateY(-1px); border-color: #4a5266; }
.cmdopt.selected { border-color: var(--ds-accent-bright); box-shadow: 0 0 12px #e8c05a44; background: #221f18; }
.cmdopt.pairable { border-color: #4fa86a; box-shadow: 0 0 10px #4fa86a44; }
.cmdopt img { width: 54px; height: 76px; object-fit: cover; flex: none; }
.cmdoptinfo { padding: 5px 6px 5px 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.cmdoptname { font-size: 11.5px; font-weight: 650; line-height: 1.25; }
.cmdoptname .deft { color: var(--ds-accent-soft); font-weight: 400; font-size: 10px; }
.cmdopttype { font-size: 9.5px; color: #8a95a8; }

/* --- atmosferska grafika --- */
#setup { position: relative; }
#setup::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 320px; z-index: 0;
  background-image: var(--art-hero);
  background-size: cover; background-position: center 30%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, #000 38%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 38%, transparent 100%);
  opacity: .5; pointer-events: none;
}
#setup > * { position: relative; z-index: 1; }
.title { text-shadow: 0 2px 18px #000a; }
.subtitle { text-shadow: 0 1px 10px #000c; }
/* poleđina karte kad Scryfall slika ne stigne */
img.imgfail {
  background-image: var(--art-back);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  font-size: 0; color: transparent; border: 0;
}
/* u igri karta bez arta ostaje čist obojeni okvir + ime (čitljivije od poleđine) */
.mini img.imgfail, .hcard img.imgfail { display: none; }
.bigcard { background-image: var(--art-back); background-size: cover; background-position: center; }
/* AI persona amblemi (2x2 sprite) */
.pbadge {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 28%, #2c3140, #171a22);
  border: 1px solid #3a4050; box-shadow: inset 0 0 10px #0009;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.pbadge.p-aggressive { border-color: #7a3a34; }
.pbadge.p-opportunist { border-color: #6a5a3a; }
.pbadge.p-passive    { border-color: #35506e; }
.pbadge.p-teaser     { border-color: #5c3a72; }
.cdnote { font-size: 10px; color: #8a95a8; margin: 3px 0 6px; line-height: 1.35; }

/* --- prozor za reakciju + HOLD + reflektor na AI akcije --- */
.tbtn.armed { background: linear-gradient(90deg,var(--ds-accent-bright),#d98a4a); color: var(--ds-accent-ink); box-shadow: 0 0 10px #e8c05a66; }
.promptbar.reacting { border-top: 2px solid var(--ds-accent-bright); background: linear-gradient(#241f18, #1a1e26); }
.spotbar {
  position: fixed; left: 50%; top: 40%; transform: translateX(-50%);
  z-index: 130; max-width: min(92 * var(--vwu), 720px); pointer-events: none;
  padding: 11px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 650; line-height: 1.35;
  text-align: center; box-shadow: 0 12px 34px #000b; animation: spotin .22s ease-out;
  background: #232833; border: 2px solid #3a4050; color: #e8e8ea;
}
.spotbar.danger { background: linear-gradient(#3a1e1e, #2a1618); border-color: #b04a44; color: #ffd9d4; }
.spotbar.warn { background: linear-gradient(#3a331e, #2a2416); border-color: #b0904a; color: #ffeec4; }
@keyframes spotin { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sideloglist .k-spot { color: #ffb37a; font-weight: 650; }

/* --- modal "bot te cilja": velika karta + kategorija prijetnje --- */
.overlay.threatov { background: #0009; }
.threatmodal { max-width: 620px; border: 2px solid #b04a44; box-shadow: 0 0 40px #b04a4455; animation: threatin .2s ease-out; }
@keyframes threatin { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.threatmodal.counter { border-color: #4a7ab0; box-shadow: 0 0 40px #4a7ab055; }
.threatmodal.exile   { border-color: #9a6ac0; box-shadow: 0 0 40px #9a6ac055; }
.threatmodal.bounce  { border-color: #4aa0b0; box-shadow: 0 0 40px #4aa0b055; }
.threatmodal.steal   { border-color: #c08a3a; box-shadow: 0 0 40px #c08a3a55; }
.threatmodal.discard { border-color: #8a7a9a; }
.threatmodal.debuff  { border-color: #7a9a5a; }
.threathead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.threatkind { font-size: 15px; font-weight: 800; letter-spacing: .3px; background: #2a1618; border: 1px solid #b04a44; color: #ffd9d4; border-radius: 9px; padding: 4px 10px; }
.threatmodal.counter .threatkind { background: #16202a; border-color: #4a7ab0; color: #cfe4ff; }
.threatmodal.exile .threatkind   { background: #1e1628; border-color: #9a6ac0; color: #e8d4ff; }
.threatmodal.bounce .threatkind  { background: #16242a; border-color: #4aa0b0; color: #d0f0ff; }
.threatmodal.steal .threatkind   { background: #2a2216; border-color: #c08a3a; color: #ffe8bf; }
.threatby { font-size: 12.5px; color: #b8c0cc; }
.threatbody { display: flex; gap: 14px; align-items: flex-start; }
.threatart { width: 190px; flex: none; border-radius: 11px; box-shadow: 0 8px 24px #000a; background: var(--art-back) center/cover; aspect-ratio: 5/7; object-fit: cover; }
.threatinfo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.threatname { font-size: 17px; font-weight: 750; line-height: 1.2; }
.threatname .threatab { font-size: 12.5px; color: var(--ds-accent-soft); font-weight: 500; }
.threatcost { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.threattype { font-size: 11.5px; color: #8a95a8; }
.threattargets { font-size: 13px; color: #ffd9d4; background: #2a1618; border-radius: 8px; padding: 5px 8px; }
.threatoracle { font-size: 12px; color: #c8ccd6; line-height: 1.45; max-height: 190px; overflow-y: auto; }
.threathint { font-size: 11.5px; color: #ffe0a8; background: #2a2416; border: 1px solid #5a4a2a; border-radius: 8px; padding: 5px 8px; line-height: 1.4; }
.threatfoot { font-size: 10.5px; color: #8a95a8; margin-top: 8px; line-height: 1.4; }
.threattargetmap { margin-top: 10px; padding: 8px; border: 1px solid #b04a4455; border-radius: 8px; background: #110d0ef0; }
.threattargetmaphead { margin-bottom: 6px; color: #ff9d8f; font: 800 8px/1 var(--ds-font-body); letter-spacing: .16em; }
.pbtn.hot { background: linear-gradient(90deg,#d95a4a,var(--ds-accent-bright)); color: var(--ds-accent-ink); font-weight: 700; }
/* meta na tabli pulsira dok je modal otvoren */
.mini.threatened, .hcard.threatened {
  outline: 3px solid #ff5a4a; outline-offset: 2px; filter: brightness(1.5) saturate(1.2);
  animation: threatpulse 1.1s ease-in-out infinite;
}
@keyframes threatpulse {
  0%,100% { box-shadow: 0 0 0 3px #ff5a4a, 0 0 14px 4px #ff5a4a77; }
  50%     { box-shadow: 0 0 0 3px #ff8a6a, 0 0 30px 12px #ff5a4abb; }
}
@media (min-width: 1100px) {
  .threatmodal { max-width: 900px; }
  .threatart { width: 220px; }
}

@media (min-width: 1100px) {
  /* --- setup ekran: dvije kolone --- */
  #setup { max-width: 1560px; margin: 0 auto; padding: 18px 28px; }
  .setupgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
  .setupright { position: sticky; top: 12px; display: flex; flex-direction: column; }
  .decklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
  .deckcard { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
  .deckcard:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #0008; }
  .title { font-size: 34px; }
  .pbtn.start { font-size: 16px; padding: 14px; }

  /* --- igra: grid sa sidebarom --- */
  #game { max-width: none; height: calc(100 * var(--vhu)); display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px;
    /* Proporcije po dizajnu stola: protivnici su kompaktna traka gore, a
       tvoja tabla dobija glavninu visine. Stack se skuplja kad je prazan. */
    grid-template-rows: auto auto minmax(130px, .8fr) auto minmax(0, 1.4fr) auto auto;
    grid-template-areas:
      "topbar  topbar"
      "ticker  side"
      "opps    side"
      "center  side"
      "mine    side"
      "prompt  side"
      "hand    hand";
    column-gap: 12px; padding: 0 12px 0 0; }
  .topbar { grid-area: topbar; padding: 8px 16px; }
  .phase { font-size: 15px; }
  .stepper .step { font-size: 11px; padding: 3px 8px; }
  .ticker { grid-area: ticker; font-size: 13px; }
  .oppswrap { grid-area: opps; max-height: none; overflow: visible; flex-direction: row !important; display: grid;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; padding: 8px 4px 4px 12px; align-items: start; }
  .opprow { border-radius: 12px; height: 100%; display: flex; flex-direction: column; min-height: 0; }
  /* protivnička tabla koristi svu dodijeljenu visinu, pa skroluje tek kad prelije */
  .oppstrip { flex-wrap: wrap; flex: 1; min-height: 0; max-height: none; overflow-y: auto; align-content: flex-start; }
  .center { grid-area: center; }
  .myboard { grid-area: mine; padding: 6px 4px 6px 12px; }
  /* na širokom ekranu komander i emblem ostaju grupisani lijevo umjesto da se
     razvuku na suprotne krajeve reda */
  .czcard { flex: 0 1 340px; }
  .ringcard { flex: 0 1 280px; }
  .promptbar { grid-area: prompt; border-radius: 12px 12px 0 0; }
  .handwrap { grid-area: hand; }
  /* centriranje bez overflow-clip buga: auto-margine na krajevima */
  .hand { justify-content: flex-start; }
  .hand > :first-child { margin-left: auto; }
  .hand > :last-child { margin-right: auto; }

  /* veće karte na velikom ekranu */
  .mini { width: 86px; height: 116px; border-radius: 9px; }
  .permanentpile { width: 86px; }
  .permanentpile.sm { width: 74px; }
  .mini .mname { font-size: 9.5px; max-height: 26px; }
  .mini .pt { font-size: 12px; }
  .mini.sm { width: 74px; height: 100px; }
  .hcard { width: 96px; height: 132px; }
  .hcard .mname { font-size: 10px; }
  .hand { min-height: 138px; }
  .oppLands { min-width: 46px; font-size: 12px; }

  /* --- sidebar --- */
  .sidebar { grid-area: side; display: flex; flex-direction: column; gap: 10px; padding: 8px 0;
    min-height: 0; overflow: hidden; }
  .sidetitle { font-size: 12.5px; font-weight: 800; letter-spacing: .4px; color: var(--ds-accent-soft); margin-bottom: 6px; }
  .threatpanel { background: #1a1e26; border: 1px solid #2a2f3a; border-radius: 12px; padding: 10px 12px; }
  .threatrow { display: grid; grid-template-columns: 26px minmax(0,1fr) 90px 34px; align-items: center; gap: 6px;
    padding: 4px 2px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
  .threatrow:hover { background: #232838; }
  .threatrow.top .tname { color: #e8905a; font-weight: 800; }
  .threatrow.me .tname { color: #7ac0e8; }
  .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .tbarwrap { background: #12141a; border-radius: 6px; height: 9px; overflow: hidden; }
  .tbar { display: block; height: 100%; background: linear-gradient(90deg, #5aa860, var(--ds-accent-bright), #d95a4a); border-radius: 6px; }
  .tscore { text-align: right; font-variant-numeric: tabular-nums; color: #aab; font-size: 11.5px; }
  .sidenote { font-size: 10px; color: #667; margin-top: 6px; line-height: 1.35; }
  .persona { font-size: 11px; }
  .sidelog { background: #1a1e26; border: 1px solid #2a2f3a; border-radius: 12px; padding: 10px 12px;
    flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .sideloglist { flex: 1; overflow-y: auto; font-size: 11.5px; line-height: 1.45; min-height: 0; }
  .sideloglist .ll { padding: 1px 0; border-bottom: 1px solid #1e2230; color: #bcc; }
  .sideloglist .k-dmg { color: #e8a0a0; }
  .sideloglist .k-cast { color: #a0c0e8; }
  .sideloglist .k-attack { color: var(--ds-accent-bright); }
  .sideloglist .k-turn { color: #8a9; font-weight: 700; margin-top: 3px; }
  .sideloglist .k-token { color: #a0d8a0; }
  .sideloglist .k-counter { color: #d8a0e8; }
  .sideloglist .k-resolve { color: #9ab; }

  /* panel toggle-i postoje samo tamo gdje sidebar i postoji */
  .deskonly { display: inline-block; }

  /* oba panela ugašena → jedna kolona preko cijele širine */
  #game.nosidebar { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topbar" "ticker" "opps" "center" "mine" "prompt" "hand";
    padding-right: 12px; }
  #game.nosidebar .sidebar { display: none; }
  /* kad je samo jedan panel aktivan, sidebar mu daje svu visinu */
  .sidebar > .threatpanel:only-child { align-self: start; }
  .sidebar > .sidelog:only-child { flex: 1; }

  /* modali/sheetovi centrirani umjesto bottom-sheet */
  .overlay { align-items: center; }
  .modal, .sheet { border-radius: 16px; max-width: 760px; max-height: calc(86 * var(--vhu)); }
  .modal.wide { max-width: 1080px; width: 92%; }
  .cardgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .logpanel { max-width: 900px; }
}
@media (min-width: 1500px) {
  #game { grid-template-columns: minmax(0, 1fr) 400px; }
  .mini { width: 96px; height: 130px; }
  .permanentpile { width: 96px; }
  .mini.sm { width: 82px; height: 111px; }
  .permanentpile.sm { width: 82px; }
  .hcard { width: 106px; height: 146px; }
}

/* ============================================================
   MENI — dizajn iz "Game menu design request"
   Namjerno drugačiji od stola: zaobljeno (11px), bijele hairline
   linije i Marcellus serif naslovi. Sve pod #setup.
   ============================================================ */
#setup {
  --mn-bg: #08090d; --mn-panel: #0d0e14; --mn-raise: #14161d; --mn-raise2: #191b24;
  --mn-line: rgba(255,255,255,.07); --mn-line2: rgba(255,255,255,.10);
  --mn-gold: var(--ds-accent); --mn-gold-lt: #ffd583;
  --mn-ink: #f2eee6; --mn-mute: rgba(233,230,223,.55); --mn-mute2: rgba(233,230,223,.35);
  --mn-ok: #5ec98a;
  background: var(--mn-bg); color: var(--mn-ink);
  font-family: var(--ds-font-body), 'Segoe UI', Roboto, sans-serif;
}
body:has(#setup) { background: #08090d; }
/* zaglavlje */
#setup .menuhead {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 2px 18px; border-bottom: 1px solid var(--mn-line); margin-bottom: 18px;
}
#setup .menumark {
  width: 38px; height: 38px; flex: none; transform: rotate(45deg);
  border: 1.5px solid var(--mn-gold); border-radius: 7px;
  box-shadow: inset 0 0 14px rgba(232,176,75,.25);
}
#setup .menutitles { flex: 1; min-width: 0; }
#setup .title {
  font-family: var(--ds-font-display); font-weight: 400;
  font-size: 30px; text-align: left; margin: 0; color: var(--mn-ink);
  background: none; -webkit-text-fill-color: currentColor; letter-spacing: .2px;
}
#setup .subtitle { text-align: left; margin: 3px 0 0; color: var(--mn-mute); font-size: 13px; }
#setup .menupill {
  display: flex; align-items: center; gap: 7px; flex: none;
  border: 1px solid var(--mn-line2); border-radius: 999px; padding: 6px 14px;
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--mn-mute);
}
#setup .menupill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mn-ok);
  box-shadow: 0 0 8px rgba(94,201,138,.7);
}
/* sekcije 01/02/03 */
#setup .seclabel {
  font-family: var(--ds-font-display); font-size: 17px; color: var(--mn-ink);
  letter-spacing: .2px; display: flex; align-items: baseline; gap: 10px; margin: 20px 0 10px;
}
#setup .seclabel i {
  font-style: normal; font-family: var(--ds-font-body); font-size: 11px;
  letter-spacing: 2px; color: var(--mn-gold); opacity: .85;
}
#setup .seclabel em {
  font-style: normal; font-size: 11px; color: var(--mn-mute2); letter-spacing: .3px;
}
/* deck kartice */
#setup .deckcard {
  background: var(--mn-panel); border: 1px solid var(--mn-line); border-radius: 11px;
  overflow: hidden; transition: border-color .14s, background .14s, transform .14s;
}
#setup .deckcard:hover { background: var(--mn-raise); border-color: var(--mn-line2); }
#setup .deckcard.selected {
  border-color: rgba(232,176,75,.5); background: var(--mn-raise);
  box-shadow: 0 0 0 1px rgba(232,176,75,.18), 0 10px 30px rgba(0,0,0,.5);
}
#setup .deckart { width: 104px; height: auto; align-self: stretch; object-fit: cover; }
#setup .deckname { font-family: var(--ds-font-display); font-weight: 400; font-size: 17px; color: var(--mn-ink); }
#setup .deckcmd { color: var(--mn-gold); font-size: 12.5px; margin: 3px 0 5px; }
#setup .deckblurb { color: var(--mn-mute); font-size: 12px; line-height: 1.45; }
#setup .deckset { color: var(--mn-mute2); font-size: 10.5px; margin-top: 5px; }
#setup .deckstyle { color: var(--mn-mute); }
#setup .dot { border: none; }
/* desni panel */
#setup .setupright {
  background: var(--mn-panel); border: 1px solid var(--mn-line);
  border-radius: 15px; padding: 4px 18px 18px;
}
#setup .cmdbox, #setup .cmdopt, #setup .pbtn, #setup select, #setup textarea, #setup input {
  border-radius: 10px;
}
#setup .cmdbox {
  border: 1px dashed var(--mn-line2); background: rgba(255,255,255,.012);
  color: var(--mn-mute2); min-height: 96px;
}
#setup .pbtn {
  background: var(--mn-raise); border: 1px solid var(--mn-line); color: var(--mn-ink);
  transition: border-color .14s, background .14s;
}
#setup .pbtn:hover { border-color: var(--mn-line2); background: var(--mn-raise2); }
#setup .pbtn.on, #setup .pbtn.sel {
  border-color: rgba(232,176,75,.55); color: var(--mn-gold-lt);
  background: linear-gradient(180deg, #1a1408, #14110a);
}
#setup .pbtn.start {
  background: linear-gradient(180deg, rgba(232,176,75,.16), rgba(232,176,75,.06));
  border-color: rgba(232,176,75,.4); color: var(--mn-gold-lt);
  font-family: var(--ds-font-display); font-size: 17px; letter-spacing: .3px;
}
#setup .pbtn.start:disabled { color: var(--mn-mute2); border-color: var(--mn-line); background: var(--mn-raise); }
#setup select, #setup textarea, #setup input {
  background: var(--mn-raise); border: 1px solid var(--mn-line); color: var(--mn-ink);
}
#setup .sidenote, #setup .cmdhint { color: var(--mn-mute2); font-size: 11px; }

/* ============================================================
   STO — dizajn iz "MTG Commander Client Design"
   Sve je ograničeno na #game: setup ekran ostaje kakav je bio.
   Jezik: skoro-crna pozadina, zlatne hairline linije, oštri uglovi
   (radius 2-3px), razmaknute verzalne mikro-labele, Barlow.
   ============================================================ */
#game {
  background: radial-gradient(130% 95% at 50% 6%, #10161a 0%, #080b0d 42%, var(--tbl-bg) 100%);
  font-family: var(--tbl-font);
  color: var(--tbl-ink);
}
#game .sidetitle, #game .czlabel, #game .oppname, #game .seclabel {
  font-family: var(--tbl-cond);
}
/* mikro-labela: verzal + široki razmak */
#game .sidetitle, #game .czlabel {
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--tbl-mute); font-weight: 600;
}
/* --- panel osnova --- */
#game .threatpanel, #game .sidelog, #game .stackpanel, #game .cmddmgpanel,
#game .opprow, #game .czcard, #game .promptbar {
  background: linear-gradient(180deg, var(--tbl-panel2), var(--tbl-panel));
  border: 1px solid var(--tbl-line);
  border-radius: 3px;
}
#game .opprow.active { border-color: var(--tbl-line2); box-shadow: 0 0 0 1px rgba(200,134,60,.14) inset; }
#game .opprow.lost { opacity: .42; filter: grayscale(.7); }
/* --- top bar --- */
#game .topbar {
  background: linear-gradient(180deg, var(--ds-panel), var(--ds-table));
  border-bottom: 1px solid var(--tbl-line);
}
#game .phase { font-family: var(--tbl-cond); letter-spacing: .06em; }
#game .phase b { color: var(--tbl-gold-lt); font-weight: 700; }
#game .stepper { gap: 3px; }
#game .stepper .step {
  background: var(--ds-panel); border: 1px solid var(--tbl-line);
  border-radius: 2px; color: var(--tbl-mute2);
  font-family: var(--tbl-cond); letter-spacing: .18em; text-transform: uppercase;
  font-size: 9.5px; padding: 4px 10px;
}
#game .stepper .step.on {
  background: linear-gradient(180deg, #2a1d0e, #1a1208);
  border-color: rgba(200,134,60,.5); color: var(--tbl-gold-lt);
}
#game .tbtn {
  background: var(--ds-panel); border: 1px solid var(--tbl-line);
  border-radius: 2px; color: var(--tbl-ink);
}
#game .tbtn.on { box-shadow: inset 0 0 0 1px rgba(200,134,60,.55); color: var(--tbl-gold-lt); }
#game .tbtn.armed { background: linear-gradient(180deg, var(--tbl-gold-lt), var(--tbl-gold)); color: var(--ds-accent-ink); }
/* --- ticker --- */
#game .ticker {
  background: transparent; color: var(--tbl-mute);
  border-bottom: 1px solid rgba(185,160,106,.08);
  font-size: 12px; letter-spacing: .02em;
}
/* --- protivnici --- */
#game .oppname { letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--tbl-ink-hi); }
#game .opphead { border-bottom: 1px solid rgba(185,160,106,.1); }
/* --- moja tabla / command zona --- */
#game .czcard { background: linear-gradient(120deg, #14100a 0%, var(--tbl-panel) 62%); border-color: rgba(200,134,60,.32); }
#game .czname { font-family: var(--tbl-cond); font-size: 15px; letter-spacing: .04em; color: var(--tbl-ink-hi); }
#game .ringcard { background: linear-gradient(120deg, #15110a, var(--tbl-panel)); }
/* --- sidebar paneli --- */
#game .sidebar { gap: 8px; }
#game .sidehead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
#game .sidecount {
  font-family: var(--tbl-cond); font-size: 11px; color: var(--tbl-gold);
  letter-spacing: .1em;
}
#game .stackpanel, #game .cmddmgpanel { padding: 10px 12px; }
#game .stacklist { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
#game .stackempty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 0; color: var(--tbl-mute2);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
}
#game .stackempty span { font-size: 20px; color: var(--ds-muted); animation: omBreathe 3.4s ease-in-out infinite; }
@keyframes omBreathe { 0%,100% { opacity:.35 } 50% { opacity:.9 } }
#game .stackitem {
  border: 1px solid var(--tbl-line); border-left: 2px solid rgba(185,160,106,.35);
  border-radius: 2px; padding: 5px 8px; background: var(--ds-panel); cursor: pointer;
}
#game .stackitem.mine { border-left-color: var(--tbl-gold); }
#game .stackitem.copy { border-left-color: #65b5df; box-shadow: inset 2px 0 #65b5df22; }
#game .stackitem:hover { background: var(--tbl-raise); }
#game .siname { font-size: 12px; color: var(--tbl-ink-hi); }
#game .sisub { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tbl-mute2); }
#game .sitargets { margin-top: 3px; overflow: hidden; color: #bda96f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#game .stack > .stackitem { flex-wrap: wrap; }
#game .stackinlinegoal { flex-basis: 100%; overflow: hidden; color: #bda96f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#game .stack > .stackitem > .stacktargetflow { width: 100%; flex-basis: 100%; }
/* commander damage matrica */
#game .cdgrid { display: grid; gap: 2px; margin-top: 6px; align-items: center; }
#game .cdh {
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tbl-mute2); text-align: center; padding-bottom: 2px;
}
#game .cdname {
  font-size: 11px; color: var(--tbl-mute); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; padding-right: 4px;
}
#game .cdname.me { color: var(--tbl-gold-lt); }
#game .cdname.lost { text-decoration: line-through; opacity: .5; }
#game .cdv {
  text-align: center; font-variant-numeric: tabular-nums; font-size: 12px;
  padding: 2px 0; border-radius: 2px; background: var(--ds-panel);
  border: 1px solid rgba(185,160,106,.1); color: var(--tbl-ink);
}
#game .cdv.zero { color: var(--ds-muted); border-color: rgba(255,255,255,.04); }
#game .cdv.warn { color: var(--tbl-gold-lt); border-color: rgba(200,134,60,.4); }
#game .cdv.lethal { color: #fff; background: rgba(210,74,58,.8); border-color: var(--tbl-bad); font-weight: 700; }
/* threat + log u istom jeziku */
#game .tbar { background: linear-gradient(90deg, var(--tbl-good), var(--tbl-gold-lt), var(--tbl-bad)); }
#game .tbarwrap { background: var(--ds-panel); border-radius: 2px; }
#game .sideloglist { font-size: 11.5px; }
#game .sideloglist .ll { border-bottom: 1px solid rgba(185,160,106,.07); color: #b9b3a5; }
#game .sideloglist .k-turn { color: var(--tbl-gold); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
#game .sidenote { color: var(--tbl-mute2); }
/* --- tvoj život: u dizajnu je krupan broj uz command zonu --- */
#game .meinfo {
  align-items: baseline; gap: 12px;
  border-top: 1px solid rgba(185,160,106,.1); padding: 6px 12px 4px;
}
#game .melife {
  font-family: var(--tbl-cond); font-size: 34px; font-weight: 700;
  line-height: 1; color: var(--tbl-ink-hi); letter-spacing: -.01em;
  text-shadow: 0 0 18px rgba(200,134,60,.25); cursor: pointer;
}
#game .zbtn {
  background: var(--ds-panel); border: 1px solid var(--tbl-line); border-radius: 2px;
  color: var(--tbl-mute); font-variant-numeric: tabular-nums;
}
#game .zbtn:hover { color: var(--tbl-gold-lt); border-color: var(--tbl-line2); }
/* --- sekcijski naslovi (kao u dizajnu) --- */
#game .myboard { position: relative; padding-top: 20px !important; }
#game .myboard::before {
  content: 'Your battlefield'; position: absolute; top: 4px; left: 12px;
  font-family: var(--tbl-cond); font-size: 9px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--tbl-mute2);
}
#game .opprow { position: relative; }
#game .oppstrip { position: relative; padding-top: 14px; }
#game .oppstrip::before {
  content: 'Battlefield'; position: absolute; top: 0; left: 2px;
  font-family: var(--tbl-cond); font-size: 8px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ds-muted);
}
/* --- karte: oštriji okvir da prati jezik --- */
#game .mini, #game .hcard { border-radius: 3px; }
#game .mini.targetable, #game .hcard.playable { box-shadow: 0 0 0 1px var(--tbl-gold), 0 0 12px rgba(200,134,60,.3); }
/* --- prompt bar / dugmad --- */
#game .promptbar { border-radius: 3px 3px 0 0; }
#game .pbtn {
  border-radius: 2px; font-family: var(--tbl-cond);
  letter-spacing: .14em; text-transform: uppercase;
}
#game .pbtn.wide { background: linear-gradient(180deg, var(--tbl-gold-lt), var(--tbl-gold)); color: var(--ds-accent-ink); }

/* ============================================================
   THE STACK — popup na sredini ekrana
   Ne blokira tablu: wrapper je pointer-events:none, samo panel hvata klikove,
   pa igrač i dalje može reagovati dok stack stoji.
   ============================================================ */
.stackpopwrap {
  position: fixed; inset: 0; z-index: 115;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
/* reveal je blokirajuća odluka — mora iznad hover previewa (#hoverprev, 120) */
.stackpopwrap.revealwrap { z-index: 140; }
.stackpop {
  pointer-events: auto;
  width: min(430px, 92 * var(--vwu)); max-height: calc(72 * var(--dvhu));
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #12171af7, #070a0bfc);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(200,134,60,.45);
  border-radius: 4px;
  box-shadow: 0 18px 60px #000c, 0 0 0 1px #0006, 0 0 30px rgba(200,134,60,.10);
  animation: stackPopIn .16s ease-out;
  overflow: hidden;
}
@keyframes stackPopIn { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: none } }
.stackpop.dragging { animation: none; }
.stackpophead {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; cursor: grab;
  border-bottom: 1px solid rgba(185,160,106,.16);
  background: linear-gradient(180deg, #1a130a, #0d1113);
}
.stackpophead:active { cursor: grabbing; }
.stackpoptitle {
  font-family: var(--tbl-cond, inherit); font-size: 10.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--tbl-gold-lt, var(--ds-accent-bright)); font-weight: 700; flex: 1;
}
.stackpopn {
  background: linear-gradient(180deg, var(--tbl-gold-lt, var(--ds-accent-bright)), var(--tbl-gold, #c8863c));
  color: var(--ds-accent-ink); font-size: 11px; font-weight: 900;
  padding: 1px 8px; border-radius: 2px; letter-spacing: .06em;
}
.stackpopx {
  background: none; border: 1px solid rgba(185,160,106,.28); color: #b9a06a;
  border-radius: 2px; font-size: 13px; line-height: 1; padding: 3px 8px; cursor: pointer;
}
.stackpopx:hover { background: rgba(185,160,106,.14); color: #fff; }
.stackpopbody { overflow-y: auto; padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; }
.stackpopitem {
  display: block;
  border: 1px solid rgba(185,160,106,.16); border-left: 3px solid rgba(185,160,106,.4);
  border-radius: 2px; padding: 7px 9px; background: var(--ds-panel); cursor: pointer;
}
.stackpopmain { display: flex; align-items: center; gap: 9px; }
.stackpopitem:hover { background: #141a1d; }
.stackpopitem.mine { border-left-color: var(--tbl-gold-lt, var(--ds-accent-bright)); }
.stackpopitem.copy { border-left-color: #65b5df; background: linear-gradient(90deg,#0c1920,var(--ds-panel) 62%); }
.stackpopitem.next { border-color: rgba(200,134,60,.5); box-shadow: 0 0 0 1px rgba(200,134,60,.18) inset; }
.stackpopitem img { width: 34px; height: 46px; object-fit: cover; border-radius: 2px; flex-shrink: 0; background: #222; }
.stackpopinfo { flex: 1; min-width: 0; }
.stackpopname { font-size: 12.5px; color: #efe7d2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stackpopsub { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ds-muted); }
.stackpoptargetsummary { margin-top: 2px; overflow: hidden; color: #bda96f; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.stackpopidx { font-size: 9px; letter-spacing: .16em; color: #8a7a52; flex-shrink: 0; }
.stackpopfoot {
  padding: 6px 11px; border-top: 1px solid rgba(185,160,106,.12);
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ds-muted); text-align: center;
}
.stackpop.reveal .stackpopfoot { padding: 9px 11px; background: var(--ds-table); }
.stackpop.reveal .stackpopfoot .pbtn { width: 100%; position: relative; z-index: 1; }
.stackpop.reveal { border-color: rgba(200,134,60,.6); background: linear-gradient(180deg, #12171a, var(--ds-table)); }
.stackpop.reveal .stackpopbody { background: var(--ds-panel); }
@media (max-width: 700px) { .stackpop { width: calc(94 * var(--vwu)); max-height: calc(60 * var(--dvhu)); } }

/* ============================================================
   DESKTOP ACTION STAGE — obavezni pregled svake nonland akcije
   ============================================================ */
.actionstagewrap {
  position: fixed; inset: 0; z-index: 132; display: grid; place-items: center;
  padding: 30px; background: radial-gradient(circle at 50% 45%, rgba(32,24,12,.36), rgba(0,0,0,.86));
  backdrop-filter: blur(4px);
}
.actionstage {
  width: min(900px, calc(100 * var(--vwu) - 80px)); max-height: min(720px, calc(100 * var(--vhu) - 80px));
  display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 28px; overflow: hidden;
  padding: 24px; background: linear-gradient(145deg, var(--ds-panel-raised), var(--ds-table) 72%);
  border: 1px solid rgba(200,134,60,.58); box-shadow: 0 32px 110px #000, inset 0 1px rgba(255,255,255,.05);
  animation: actionStageIn .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes actionStageIn { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }
.actionstageart { align-self: center; }
.actionstageart img { display: block; width: 100%; border-radius: 12px; box-shadow: 0 18px 46px #000c; }
.actionstageinfo { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.actionstageeyebrow { color: var(--tbl-gold); font: 700 10px/1.2 var(--tbl-cond); letter-spacing: .24em; text-transform: uppercase; }
.actionstagename { margin-top: 9px; color: var(--ds-text); font: 30px/1.05 var(--ds-font-display); }
.actionstagecopyline { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.actionstagecopyline b,.actionstagecopyline span { padding: 4px 7px; border-radius: 4px; font: 800 8px/1 var(--ds-font-body); letter-spacing: .12em; }
.actionstagecopyline b { color: #cceeff; background: #10232e; border: 1px solid #65b5df66; }
.actionstagecopyline span { color: #f3d887; background: #28200d; border: 1px solid #c99c3955; }
.actionstagetype { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; color: #9d998e; font-size: 12px; }
.actionstagerules { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 9px 11px; border: 1px solid rgba(98,179,255,.34); border-radius: 7px; background: rgba(30,79,118,.2); color: #c9e8ff; font-size: 11px; line-height: 1.35; }
.actionstagerules b { color: #8dceff; font: 800 9px/1.2 var(--tbl-cond); letter-spacing: .12em; }
.actionstagetarget { margin-top: 16px; padding: 9px 11px; color: #e8d5a4; background: rgba(200,134,60,.09); border-left: 2px solid var(--tbl-gold); font-size: 13px; }
.actionstagedivision { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 6px; margin-top: 8px; }
.actionstagedamagetarget { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(255,111,65,.34); border-radius: 6px; background: rgba(99,30,13,.22); }
.actionstagedamagetarget > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--ds-accent-ink); background: #ff9c68; font: 900 9px/1 var(--ds-font-body); }
.actionstagedamagetarget > b { overflow: hidden; color: #ecdccc; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.actionstagedamagetarget > strong { color: #ff8958; font: 800 20px/1 var(--ds-font-display); }
.actionstagedamagetarget > strong small { display: block; color: #8f776b; font: 700 6px/1 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; }
.actionstageoracle { margin-top: 14px; max-height: 210px; overflow-y: auto; color: #d6d0c2; font-size: 14px; line-height: 1.55; }
.actionstagestack { margin-top: 16px; color: var(--ds-muted); font: 600 9px/1.3 var(--tbl-cond); letter-spacing: .16em; text-transform: uppercase; }
.actionstagebuttons { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.actionstagebuttons .pbtn { min-width: 180px; padding: 11px 16px; }
.actionrespond { border-color: rgba(90,150,190,.55) !important; color: #a9d7f2 !important; }

/* Spell/ability source → locked target map, shared by threat, action-stage and stack UI. */
.stacktargetflow { min-width: 0; display: flex; align-items: stretch; gap: 9px; margin-top: 8px; padding: 8px; border: 1px solid rgba(101,181,223,.28); border-radius: 8px; background: linear-gradient(100deg,rgba(13,35,45,.58),rgba(11,14,15,.76)); }
.stacktargetflow.copy { border-color: rgba(101,181,223,.52); box-shadow: inset 0 0 22px rgba(67,157,204,.08); }
.stackflowsource { width: 150px; flex: none; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 7px; padding: 5px; border: 1px solid rgba(101,181,223,.25); border-radius: 6px; background: #091318; }
.stackflowsource > img { width: 38px; height: 53px; object-fit: cover; border-radius: 3px; }
.stackflowsource > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stackflowsource small { color: #73c8ef; font: 800 7px/1 var(--ds-font-body); letter-spacing: .1em; }
.stackflowsource b { overflow: hidden; color: #eef9ff; font-size: 10px; line-height: 1.15; text-overflow: ellipsis; }
.stackflowsource em { color: #7795a3; font-size: 7.5px; font-style: normal; line-height: 1.2; }
.stackflowarrow { width: 42px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #6e9aad; }
.stackflowarrow span { width: 100%; height: 1px; position: relative; background: linear-gradient(90deg,#4f8ca8,#e3bd59); }
.stackflowarrow span::after { content: ''; position: absolute; right: -1px; top: -3px; border-left: 6px solid #e3bd59; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.stackflowarrow b { font: 800 6px/1 var(--ds-font-body); letter-spacing: .08em; text-transform: uppercase; }
.stackflowtargets { min-width: 0; flex: 1; display: flex; gap: 6px; overflow-x: auto; }
.stackflowtarget { min-width: 112px; max-width: 150px; flex: 1 0 112px; position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 6px; padding: 5px; border: 1px solid rgba(227,189,89,.3); border-radius: 6px; background: #171408; }
.stackflowtarget.human { border-color: #ef765e; background: linear-gradient(120deg,#321714,#171008); box-shadow: inset 0 0 18px #ef765e14; }
.stackflowtarget.hidden { background: #111315; }
.stackflowtarget > img,.stackflowplayer { width: 34px; height: 47px; object-fit: cover; border-radius: 3px; background: #202326; }
.stackflowplayer { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #efcf78; border: 1px solid #a8863e66; }
.stackflowplayer b { font: 800 13px/1 var(--ds-font-body); }
.stackflowplayer span { margin-top: 3px; font: 800 5px/1 var(--ds-font-body); letter-spacing: .1em; }
.stackflowtargetn { width: 17px; height: 17px; position: absolute; z-index: 2; top: -5px; left: -5px; display: grid; place-items: center; color: var(--ds-accent-ink); background: #edc45b; border-radius: 50%; box-shadow: 0 2px 7px #000b; font: 900 8px/1 var(--ds-font-body); }
.stackflowtargetinfo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stackflowtargetinfo b { overflow: hidden; color: #f2e7c7; font-size: 9.5px; line-height: 1.15; text-overflow: ellipsis; }
.stackflowtargetinfo small { color: #b89a53; font: 800 6.5px/1.1 var(--ds-font-body); letter-spacing: .08em; }
.stackflownone { min-width: 105px; display: grid; place-items: center; color: var(--ds-muted); border: 1px dashed #394247; border-radius: 6px; font: 800 7px/1 var(--ds-font-body); letter-spacing: .12em; }
.stackflowmore { min-width: 40px; display: grid; place-items: center; color: #d8c283; font-weight: 800; }
.stacktargetflow.compact { margin-top: 5px; padding: 4px 0 0; border: 0; border-top: 1px solid rgba(101,181,223,.13); border-radius: 0; background: transparent; box-shadow: none; }
.stacktargetflow.compact .stackflowtargets { gap: 4px; }
.stacktargetflow.compact .stackflowtarget { min-width: 80px; max-width: 116px; flex-basis: 80px; grid-template-columns: 23px minmax(0,1fr); padding: 3px; }
.stacktargetflow.compact .stackflowtarget > img,.stacktargetflow.compact .stackflowplayer { width: 23px; height: 31px; }
.stacktargetflow.compact .stackflowplayer b { font-size: 9px; }
.stacktargetflow.compact .stackflowplayer span { font-size: 4px; }
.stacktargetflow.compact .stackflowtargetinfo b { font-size: 7.5px; }
.stacktargetflow.compact .stackflowtargetinfo small { font-size: 5.5px; }
.stacktargetflow.compact .stackflowtargetn { width: 13px; height: 13px; top: -3px; left: -3px; font-size: 6px; }

/* The desktop action-stage grid collapses its information column to zero on
   phones. Keep the same explicit source/target context, but present it as a
   single, scrollable action sheet with full-width decisions. */
@media (max-width: 700px) {
  .actionstagewrap {
    padding: 8px;
    place-items: center;
  }

  .actionstage {
    width: calc(100 * var(--vwu) - 16px);
    max-height: calc(100 * var(--dvhu) - 16px);
    display: block;
    padding: 15px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .actionstageart { display: none; }
  .actionstageinfo { width: 100%; justify-content: flex-start; }
  .actionstageeyebrow { font-size: 8px; letter-spacing: .18em; }
  .actionstagename { margin-top: 7px; font-size: 25px; }
  .actionstagetype { margin-top: 7px; font-size: 10px; }
  .actionstagerules { margin-top: 8px; padding: 7px 8px; font-size: 10px; }
  .actionstagetarget { margin-top: 10px; padding: 8px 9px; font-size: 11px; line-height: 1.35; }
  .actionstageoracle { max-height: 126px; margin-top: 10px; font-size: 12px; line-height: 1.45; }
  .actionstagestack { margin-top: 11px; font-size: 7px; }

  .actionstage .stacktargetflow { gap: 5px; padding: 6px; }
  .actionstage .stackflowsource {
    width: 112px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 5px;
    padding: 4px;
  }
  .actionstage .stackflowsource > img { width: 30px; height: 42px; }
  .actionstage .stackflowarrow { width: 26px; }
  .actionstage .stackflowtarget { min-width: 100px; flex-basis: 100px; grid-template-columns: 30px minmax(0, 1fr); }
  .actionstage .stackflowtarget > img,
  .actionstage .stackflowplayer { width: 30px; height: 42px; }

  .actionstagebuttons {
    position: sticky;
    bottom: -15px;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 12px -15px -15px;
    padding: 10px 15px 15px;
    background: linear-gradient(180deg, rgba(var(--ds-table-rgb), .25), var(--ds-table) 26%);
  }
  .actionstagebuttons .pbtn { min-width: 0; min-height: 48px; padding: 9px 7px; }
  .actionstagebuttons .pbtn:only-child { grid-column: 1 / -1; }
}

/* Priority stop preset panel. */
#game .stopbtn { width: auto; min-width: 86px; padding-inline: 10px; font: 700 9px/1 var(--tbl-cond); letter-spacing: .13em; }
.stopmodal { width: min(680px, calc(100 * var(--vwu) - 80px)); }
.stopintro { margin: -4px 0 16px; color: #908b80; font-size: 12.5px; line-height: 1.5; }
.stopprofiles { display: grid; gap: 7px; margin-bottom: 14px; }
.stopprofile {
  width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 12px; text-align: left; cursor: pointer; background: var(--ds-panel); color: #ddd5c5;
  border: 1px solid rgba(185,160,106,.16); border-radius: 2px;
}
.stopprofile:hover { background: #12181b; border-color: rgba(200,134,60,.4); }
.stopprofile.selected { background: linear-gradient(90deg, rgba(200,134,60,.14), var(--ds-panel)); border-color: rgba(200,134,60,.66); }
.stopprofile .stopicon { font-size: 22px; text-align: center; }
.stopprofile b { display: block; font: 700 13px/1.2 var(--tbl-cond); letter-spacing: .08em; text-transform: uppercase; }
.stopprofile small { display: block; margin-top: 4px; color: #858176; font-size: 11px; line-height: 1.4; }
.stopprofile i { color: var(--tbl-gold-lt); font: normal 700 8px/1 var(--tbl-cond); letter-spacing: .16em; }

/* APNAP simultani trigger ordering. */
.orderhint { color: #8d887e; font-size: 11px; margin: -5px 0 12px; }
.triggerorder { display: grid; gap: 6px; margin-bottom: 12px; }
.triggerorderrow { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid rgba(185,160,106,.16); background: var(--ds-panel); }
.triggerordern { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ds-accent-ink); background: var(--tbl-gold); font-weight: 800; }
.triggerordertext b, .triggerordertext span { display: block; }
.triggerordertext b { color: #e9e1d0; font-size: 12px; }
.triggerordertext span { margin-top: 2px; color: #817d73; font-size: 10px; }
.triggerordercontrols { display: flex; gap: 4px; }
.triggerordercontrols .pbtn { min-width: 34px; padding: 5px 8px; }

/* Combat mapa: ko napada koga, blokeri i gornja procjena štete. */
.combatmap { display: grid; gap: 7px; padding: 8px 10px; border: 1px solid rgba(200,134,60,.22); background: rgba(7,10,11,.74); }
.combatmaptitle { color: var(--tbl-gold); font: 700 9px/1.2 var(--tbl-cond); letter-spacing: .22em; text-transform: uppercase; }
.combatlane { display: grid; grid-template-columns: minmax(0,1fr) 74px 150px; gap: 10px; align-items: center; padding: 6px; border-top: 1px solid rgba(185,160,106,.1); }
.combatlane.tome { background: linear-gradient(90deg, transparent, rgba(175,55,42,.13)); }
.combatattackers { display: flex; gap: 5px; overflow-x: auto; }
.combatunit { min-width: 118px; max-width: 150px; display: flex; align-items: center; gap: 7px; padding: 5px; background: var(--ds-panel); border: 1px solid rgba(185,160,106,.14); cursor: pointer; }
.combatunit img { width: 30px; height: 42px; object-fit: cover; }
.combatunit span { min-width: 0; }
.combatunit b, .combatunit small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combatunit b { color: #e6decd; font-size: 10px; }
.combatunit small { margin-top: 3px; color: #8a857a; font-size: 9px; }
.combatarrow { height: 16px; position: relative; overflow: hidden; }
.combatarrow::before { content: ''; position: absolute; left: 0; right: 9px; top: 7px; height: 1px; background: linear-gradient(90deg, transparent, var(--tbl-gold)); }
.combatarrow::after { content: ''; position: absolute; right: 1px; top: 3px; width: 8px; height: 8px; border-top: 1px solid var(--tbl-gold); border-right: 1px solid var(--tbl-gold); transform: rotate(45deg); }
.combatarrow span { position: absolute; width: 20px; height: 2px; top: 7px; background: #f0c86f; filter: blur(.4px); animation: combatTravel 1.35s linear infinite; }
@keyframes combatTravel { from { left: -20px; opacity: 0 } 20% { opacity: 1 } to { left: calc(100% + 5px); opacity: 0 } }
.combatdefender { min-width: 0; }
.combatdefender b, .combatdefender span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combatdefender b { color: #f3ead7; font: 700 12px/1.2 var(--tbl-cond); }
.combatdefender span { margin-top: 3px; color: #a97467; font-size: 9.5px; }

/* Izbor branitelja: veliko, jednoznačno i bez sitnog ciklanja mete na karti. */
.attackpickov, .overlay:has(.combatreviewmodal) { z-index: 150; background: rgba(0,0,0,.86); backdrop-filter: blur(5px); }
.attackpickmodal { width: min(980px, calc(100 * var(--vwu) - 80px)); max-width: 980px !important; padding: 22px; background: linear-gradient(145deg,var(--ds-panel-raised),#080b0d 72%); border: 1px solid rgba(200,134,60,.58); box-shadow: 0 28px 100px #000; }
.combatkicker { color: var(--tbl-gold); font: 700 10px/1.2 var(--tbl-cond); letter-spacing: .26em; text-transform: uppercase; }
.attackpicktitle { margin-top: 8px; color: var(--ds-text); font: 28px/1.15 var(--ds-font-display); }
.attackpickbody { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 22px; margin-top: 20px; }
.attackpickcard { padding: 10px; background: var(--ds-table); border: 1px solid rgba(185,160,106,.2); }
.attackpickcard img { display: block; width: 100%; border-radius: 9px; box-shadow: 0 12px 30px #000c; }
.attackpickcard div { display: grid; gap: 4px; margin-top: 10px; }
.attackpickcard b { color: var(--ds-text); font: 17px/1.15 var(--tbl-cond); }
.attackpickcard span { color: var(--tbl-gold-lt); font-size: 18px; font-weight: 800; }
.attackpickcard small { color: #858176; font-size: 10px; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; }
.attacktargets { display: grid; gap: 9px; align-content: start; }
.attacktarget { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto 24px; gap: 12px; align-items: center; padding: 15px; color: #e9e1d0; text-align: left; cursor: pointer; background: var(--ds-panel); border: 1px solid rgba(185,160,106,.2); }
.attacktarget:hover, .attacktarget.selected { background: linear-gradient(90deg,rgba(200,134,60,.15),var(--ds-panel)); border-color: rgba(200,134,60,.72); }
.attacktargeticon { display: grid; place-items: center; width: 38px; height: 38px; font-size: 22px; background: #141a1d; border: 1px solid rgba(185,160,106,.16); }
.attacktargetmain, .attacktargetstats { display: grid; gap: 4px; }
.attacktargetmain b { color: var(--ds-text); font: 18px/1 var(--tbl-cond); }
.attacktargetmain small, .attacktargetstats small { color: var(--ds-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.attacktargetstats { min-width: 180px; text-align: right; }
.attacktargetstats strong { color: #e8d5a4; font-size: 20px; }
.attacktargetgo { color: var(--tbl-gold); font-size: 22px; }
.attackpickfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Jedan ekran za cijelu deklaraciju napada: branioci gore, sve eligible karte
   ispod. Klik i drag/drop dijele isti model dodjele. */
.attackallocov { z-index: 154; padding: 24px; background: rgba(0,0,0,.9); backdrop-filter: blur(7px); }
.attackallocmodal { width: min(1240px, calc(100 * var(--vwu) - 48px)) !important; max-width: 1240px !important; max-height: calc(100 * var(--dvhu) - 48px); padding: 22px; overflow: hidden; background: radial-gradient(circle at 82% 0,rgba(127,60,29,.18),transparent 31%),linear-gradient(145deg,var(--ds-panel-raised),var(--ds-table) 72%); border: 1px solid rgba(207,144,65,.62); box-shadow: 0 34px 120px #000; }
.attackallochead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 7px 0 17px; }
.attackallochead h2 { margin: 0; color: #f7f0e2; font: 30px/1.08 var(--ds-font-display); }
.attackallochead p { margin: 7px 0 0; color: #938c7e; font-size: 12px; }
.attackallocscore { flex: none; display: grid; grid-template-columns: auto auto auto auto; gap: 5px 8px; align-items: baseline; padding: 10px 13px; background: var(--ds-table); border: 1px solid rgba(193,153,91,.22); }
.attackallocscore strong,.attackallocscore b { color: #efc56d; font: 800 23px/1 var(--tbl-cond); }
.attackallocscore span { color: var(--ds-muted); font: 700 8px/1 var(--tbl-cond); letter-spacing: .12em; text-transform: uppercase; }
.attackalloclanes { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 9px; max-height: calc(31 * var(--dvhu)); overflow: auto; padding: 1px 2px 7px; }
.attackalloclane { min-width: 0; display: block; padding: 0; color: #e9e1d1; text-align: left; cursor: pointer; background: var(--ds-panel); border: 1px solid rgba(185,160,106,.2); border-top: 3px solid #755b3c; transition: border-color .12s,background .12s,transform .12s; }
.attackalloclane.walker { border-top-color: #9268af; }
.attackalloclane:hover,.attackalloclane.focused { border-color: rgba(222,159,72,.82); background: linear-gradient(160deg,rgba(167,93,31,.17),var(--ds-panel) 60%); }
.attackalloclane.focused { box-shadow: inset 0 0 0 1px rgba(240,189,105,.24),0 0 0 1px rgba(240,189,105,.08); }
.attackalloclane.dragover { border-color: #f2bf67; transform: translateY(-2px); background: rgba(179,104,39,.22); }
.attacklanehead { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px; border-bottom: 1px solid rgba(185,160,106,.12); }
.attacklaneicon { display: grid; place-items: center; width: 34px; height: 34px; color: #d4aa68; font-size: 19px; background: #13191c; border: 1px solid rgba(185,160,106,.2); }
.walker .attacklaneicon { color: #c89aeb; }
.attacklanehead > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.attacklanehead small { color: var(--ds-muted); font: 700 8px/1 var(--tbl-cond); letter-spacing: .12em; }
.attacklanehead b { overflow: hidden; color: #f2e9d7; font: 17px/1.1 var(--tbl-cond); text-overflow: ellipsis; white-space: nowrap; }
.attacklanehead i { overflow: hidden; color: #9a8e7b; font: normal 9px/1.2 var(--tbl-cond); text-overflow: ellipsis; white-space: nowrap; }
.attacklanehead em { display: grid; place-items: center; min-width: 28px; height: 28px; color: #f5c978; font: 800 15px/1 var(--tbl-cond); background: rgba(182,105,38,.16); border: 1px solid rgba(211,144,64,.25); }
.attacklaneassigned { min-height: 54px; display: flex; gap: 5px; align-items: center; padding: 7px; overflow-x: auto; }
.attackassignedchip { flex: 0 0 154px; display: grid; grid-template-columns: 31px minmax(0,1fr) 12px; gap: 7px; align-items: center; padding: 4px; background: #12181b; border: 1px solid rgba(211,144,64,.26); }
.attackassignedchip img { width: 31px; height: 42px; object-fit: cover; object-position: top; }
.attackassignedchip > span { min-width: 0; display: grid; gap: 3px; }
.attackassignedchip b { overflow: hidden; color: #e9dfcd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.attackassignedchip small { color: #d5aa66; font-size: 10px; }
.attackassignedchip > i { color: var(--ds-accent-soft); font-style: normal; font-size: 14px; }
.attackdropempty { margin: auto; color: var(--ds-muted); font: 700 8px/1 var(--tbl-cond); letter-spacing: .13em; text-transform: uppercase; }
.attackallocempty { grid-column: 1/-1; padding: 24px; color: #9b8d7c; text-align: center; border: 1px dashed rgba(185,160,106,.25); }
.attackpoolhead { display: flex; justify-content: space-between; gap: 18px; margin: 17px 2px 8px; }
.attackpoolhead span { color: #d5ad68; font: 700 9px/1 var(--tbl-cond); letter-spacing: .2em; }
.attackpoolhead small { color: var(--ds-muted); font-size: 10px; }
.attackpool { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 7px; max-height: calc(30 * var(--dvhu)); overflow-y: auto; padding: 1px 2px 7px; }
.attackpoolcard { position: relative; min-width: 0; display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 9px; align-items: center; padding: 7px; color: #e8dfcf; text-align: left; cursor: grab; background: #0c1113; border: 1px solid rgba(185,160,106,.18); }
.attackpoolcard:hover { border-color: rgba(218,151,65,.62); background: #14191b; }
.attackpoolcard.assigned { border-color: rgba(218,151,65,.58); background: linear-gradient(105deg,rgba(174,94,28,.18),#0c1113 42%); }
.attackpoolcard.cantfocus:not(.assigned) { opacity: .42; }
.attackpoolcard img { width: 52px; height: 70px; object-fit: cover; object-position: top; border-radius: 3px; }
.attackpoolcard > span { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 7px; align-items: baseline; }
.attackpoolcard b { overflow: hidden; color: #eee5d4; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attackpoolcard strong { color: #efbd69; font-size: 15px; }
.attackpoolcard small,.attackpoolcard i { grid-column: 1/-1; overflow: hidden; font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.attackpoolcard small { color: var(--ds-muted); text-transform: uppercase; }
.attackpoolcard i { color: #bd8751; font-style: normal; }
.attackpoolcard > em { position: absolute; top: 4px; left: 4px; padding: 3px 5px; color: #ffe2aa; font: 800 6px/1 var(--tbl-cond); letter-spacing: .08em; background: #9b3d2d; box-shadow: 0 2px 8px #000; }
.attackallocfoot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(185,160,106,.16); }
.attackallocnote { color: #898277; font-size: 11px; }
.attackallocnote b { color: #ef9f85; }
@media (max-width: 850px) {
  .attackallocov { padding: 8px; }
  .attackallocmodal { width: calc(100 * var(--vwu) - 16px) !important; max-height: calc(100 * var(--dvhu) - 16px); padding: 14px; }
  .attackallochead { align-items: flex-start; }
  .attackallochead h2 { font-size: 23px; }
  .attackallocscore { display: none; }
  .attackalloclanes { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); max-height: calc(34 * var(--dvhu)); }
  .attackpool { grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); max-height: calc(30 * var(--dvhu)); }
  .attackallocfoot { align-items: stretch; flex-direction: column; gap: 9px; }
  .attackallocfoot .btnrow { justify-content: flex-end; }
}

@media (max-width: 520px) {
  .attackallocmodal { display: flex; flex-direction: column; min-height: 0; }
  .attackallochead { flex: none; margin-bottom: 11px; }
  .attackalloclanes { flex: 1 1 auto; max-height: calc(22 * var(--dvhu)); }
  .attackpoolhead { flex: none; margin: 10px 2px 6px; }
  .attackpool { flex: 1 1 auto; max-height: calc(26 * var(--dvhu)); }
  .attackallocfoot { flex: none; gap: 7px; margin-top: 8px; padding-top: 8px; }
  .attackallocfoot .btnrow {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .attackallocfoot .pbtn { min-width: 0; min-height: 44px; padding: 7px 6px; font-size: 8px; }

  .overlay .modal:has(> .cardgrid) > .btnrow {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 8px -2px -2px;
    padding: 9px 2px 2px;
    background: linear-gradient(180deg, rgba(28, 32, 41, 0), #1c2029 28%);
  }
  .overlay .modal:has(> .cardgrid) > .btnrow .pbtn {
    min-height: 44px;
    flex: 1;
  }
}

/* Obavezni pregled svakog proglašenog combata. */
.combatreviewmodal { width: min(1100px, calc(100 * var(--vwu) - 80px)) !important; max-width: 1100px !important; padding: 22px; background: linear-gradient(145deg,var(--ds-panel-raised),var(--ds-table) 72%); border: 1px solid rgba(200,134,60,.58); box-shadow: 0 30px 110px #000; }
.combatreviewhead { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 8px 0 18px; color: #f5ecda; font: 24px/1.2 var(--ds-font-display); }
.combatreviewhead span { flex: none; padding: 7px 11px; font: 700 9px/1 var(--tbl-cond); letter-spacing: .16em; text-transform: uppercase; border: 1px solid; }
.combatreviewhead span.safe { color: #9bc995; border-color: rgba(100,175,96,.45); background: rgba(65,120,60,.08); }
.combatreviewhead span.danger { color: #ffc0b5; border-color: rgba(210,74,58,.65); background: rgba(175,55,42,.14); }
.combatreviewlanes { display: grid; gap: 10px; max-height: calc(52 * var(--vhu)); overflow-y: auto; }
.combatreviewlane { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 12px; padding: 12px; background: var(--ds-table); border: 1px solid rgba(185,160,106,.17); border-left: 3px solid rgba(200,134,60,.48); }
.combatreviewlane.tome { border-color: rgba(210,74,58,.62); background: linear-gradient(90deg,rgba(130,32,24,.16),var(--ds-table) 34%); }
.combatreviewtarget { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 12px; border-right: 1px solid rgba(185,160,106,.13); }
.combatreviewtarget div:first-child { display: grid; gap: 3px; }
.combatreviewtarget small { color: var(--ds-muted); font: 700 8px/1 var(--tbl-cond); letter-spacing: .18em; }
.combatreviewtarget b { color: #f4ead5; font: 18px/1.1 var(--tbl-cond); }
.combatestimate { display: grid; justify-items: center; }
.combatestimate strong { color: #ef9a83; font: 28px/1 var(--tbl-cond); }
.combatestimate span { color: var(--ds-muted); font-size: 8px; text-transform: uppercase; }
.combatreviewcards { display: flex; gap: 7px; overflow-x: auto; }
.combatreviewcard { min-width: 180px; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 9px; align-items: center; padding: 7px; text-align: left; cursor: pointer; color: var(--ds-copy); background: var(--ds-panel); border: 1px solid rgba(185,160,106,.17); }
.combatreviewcard:hover { border-color: rgba(200,134,60,.52); background: #141a1d; }
.combatreviewcard img { width: 54px; height: 75px; object-fit: cover; border-radius: 3px; }
.combatreviewcard span { min-width: 0; display: grid; gap: 4px; }
.combatreviewcard b { overflow: hidden; color: #efe7d4; font-size: 12px; line-height: 1.2; }
.combatreviewcard strong { color: var(--tbl-gold-lt); font-size: 17px; }
.combatreviewcard small { color: var(--ds-muted); font-size: 8px; line-height: 1.35; text-transform: uppercase; }
.combatreviewnote { margin-top: 14px; color: #8c8679; font-size: 12px; line-height: 1.45; }
.combatreviewactions { margin-top: 14px; }
.combatreviewmodal .combatproceed { padding: 13px 18px; }
.combatboardpeek { box-shadow: 0 -8px 28px rgba(0,0,0,.5); }

@media (max-width: 700px) {
  .combatreviewmodal {
    width: calc(100 * var(--vwu) - 16px) !important;
    max-height: calc(100 * var(--dvhu) - 16px);
    padding: 14px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .combatreviewhead {
    display: grid;
    align-items: start;
    gap: 10px;
    margin: 6px 0 12px;
    font-size: 22px;
  }
  .combatreviewhead span {
    width: 100%;
    white-space: normal;
    line-height: 1.3;
  }
  .combatreviewlanes { max-height: calc(48 * var(--dvhu)); }
  .combatreviewlane { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
  .combatreviewtarget {
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid rgba(185,160,106,.13);
  }
  .combatreviewcard { min-width: 158px; }
  .combatreviewactions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .combatreviewactions .pbtn { min-width: 0; min-height: 44px; padding: 8px 6px; }
}

/* ============================================================
   Podesive AI table — visina zone i veličina karata
   ============================================================ */
.oppswrap { max-height: var(--opp-h, calc(42 * var(--dvhu))); }
.oppstrip { min-height: calc(74px * var(--opp-scale, 1)); }
.oppstrip .mini.sm { width: calc(52px * var(--opp-scale, 1)); height: calc(70px * var(--opp-scale, 1)); }
.oppstrip .permanentpile.sm { width: calc(52px * var(--opp-scale, 1)); }
.oppstrip .attachmenttray { gap: calc(2px * var(--opp-scale, 1)); padding-top: calc(5px * var(--opp-scale, 1)); }
.oppstrip .attachedcard {
  height: calc(25px * var(--opp-scale, 1));
  grid-template-columns: calc(17px * var(--opp-scale, 1)) minmax(0,1fr);
  gap: calc(3px * var(--opp-scale, 1)); border-left-width: calc(2px * var(--opp-scale, 1));
}
.oppstrip .attachedcard img { width: calc(17px * var(--opp-scale, 1)); height: calc(23px * var(--opp-scale, 1)); }
.oppstrip .attachedcard small { font-size: calc(5px * var(--opp-scale, 1)); }
.oppstrip .attachedcard b { font-size: calc(6px * var(--opp-scale, 1)); }
.oppstrip .mini.sm .mname { font-size: calc(7px * var(--opp-scale, 1)); max-height: calc(17px * var(--opp-scale, 1)); }
.oppstrip .mini.sm .pt { font-size: calc(8.5px * var(--opp-scale, 1)); }
.oppstrip .mini.sm .cnt, .oppstrip .mini.sm .cnt2, .oppstrip .mini.sm .att { font-size: calc(9px * var(--opp-scale, 1)); }
.oppstrip .mini.sm .badge { font-size: calc(13px * var(--opp-scale, 1)); }
.oppstrip .oppLands { font-size: calc(11px * var(--opp-scale, 1)); padding: calc(5px * var(--opp-scale,1)) calc(8px * var(--opp-scale,1)); }
/* hvatište za povlačenje visine */
.oppresize {
  height: 11px; margin: -2px 8px 0; cursor: ns-resize;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex-shrink: 0; touch-action: none;
}
.oppresize::before {
  content: ''; width: 46px; height: 3px; border-radius: 2px;
  background: rgba(185,160,106,.26); transition: background .12s, width .12s;
}
.oppresize:hover::before, .oppresize.drag::before { background: rgba(200,134,60,.75); width: 78px; }
.oppsizebar {
  display: flex; align-items: center; gap: 5px; padding: 0 9px 3px;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ds-muted);
}
.oppsizebar .zbtn {
  background: var(--ds-panel); border: 1px solid rgba(185,160,106,.22); color: #c9bfa6;
  border-radius: 2px; font-size: 12px; line-height: 1; padding: 2px 8px; cursor: pointer;
}
.oppsizebar .zbtn:hover { border-color: rgba(200,134,60,.6); color: #fff; }
.oppsizebar .zval { min-width: 34px; text-align: center; color: #b9a06a; }
.oppsizebar .zspacer { flex: 1; }
.activeaitag { flex: none; padding: 3px 6px; color: var(--ds-accent-ink); background: linear-gradient(180deg,var(--tbl-gold-lt),var(--tbl-gold)); font: 800 8px/1 var(--tbl-cond); letter-spacing: .14em; }

/* ============================================================
   DIPLOMACY & POLITICS
   ============================================================ */
#setup .diplomacysetup {
  align-items: flex-start; margin: 12px 0 2px; padding: 11px 12px;
  color: var(--wr-muted, rgba(233,230,223,.62));
  border: 1px solid rgba(231,177,94,.15); border-radius: 9px;
  background: rgba(231,177,94,.025); transition: border-color .15s, background .15s;
}
#setup .diplomacysetup.enabled { border-color: rgba(231,177,94,.48); background: rgba(231,177,94,.075); }
#setup .diplomacysetup > span { display: grid; gap: 3px; }
#setup .diplomacysetup b { color: #eee4cf; font-size: 12px; letter-spacing: .04em; }
#setup .diplomacysetup small { color: var(--ds-muted); font-size: 10px; line-height: 1.4; }

#game .sidebartabs {
  display: grid; grid-template-columns: .85fr 1.35fr .7fr; flex: none;
  border: 1px solid rgba(231,215,181,.16); border-radius: 9px; overflow: hidden;
  background: rgba(4,8,9,.75);
}
#game .sidebartab {
  padding: 9px 5px; color: var(--ds-muted); background: transparent; border: 0;
  border-right: 1px solid rgba(231,215,181,.1); cursor: pointer;
  font: 800 8.5px/1 var(--tbl-cond); letter-spacing: .14em;
}
#game .sidebartab:last-child { border-right: 0; }
#game .sidebartab:hover { color: #d6ccb7; background: rgba(255,255,255,.025); }
#game .sidebartab.on { color: var(--ds-accent-bright); background: linear-gradient(180deg,rgba(211,151,76,.15),rgba(211,151,76,.035)); box-shadow: inset 0 -2px var(--ds-accent); }

#game .diplomacypanel,
#game .diplomacylog { flex: 1; min-height: 0; overflow-y: auto; }
#game .diplomacypanel { display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
#game .diplomacyhero {
  display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 9px; align-items: start;
  padding: 12px; border: 1px solid rgba(231,177,94,.26); border-radius: 10px;
  background: linear-gradient(145deg,rgba(28,28,22,.92),rgba(8,12,12,.92));
}
#game .diplomacyhero > span { font-size: 24px; filter: drop-shadow(0 0 10px rgba(240,189,118,.25)); }
#game .diplomacyhero div { display: grid; gap: 4px; }
#game .diplomacyhero b { color: #f3ead8; font: 16px/1.1 var(--ds-font-display); }
#game .diplomacyhero small { color: var(--ds-muted); font-size: 10px; line-height: 1.4; }
#game .diplomacylock {
  display: grid; gap: 6px; padding: 11px; color: #b8b1a2;
  border: 1px solid rgba(145,145,135,.18); border-radius: 9px; background: rgba(12,16,16,.8);
}
#game .diplomacylock b { color: #d7d0c2; font-size: 12px; }
#game .diplomacylock span, #game .diplomacylock small { color: var(--ds-muted); font-size: 10px; line-height: 1.35; }
#game .dipprogress { height: 5px; overflow: hidden; border-radius: 5px; background: #050909; }
#game .dipprogress i { display: block; height: 100%; background: linear-gradient(90deg,#5f7d68,var(--ds-accent)); }
#game .dipsectiontitle { margin-top: 4px; color: var(--ds-muted); font: 800 8px/1 var(--tbl-cond); letter-spacing: .18em; }
#game .dipempty { padding: 12px; color: var(--ds-muted); font-size: 10px; text-align: center; border: 1px dashed rgba(231,215,181,.12); border-radius: 8px; }
#game .dipincoming, #game .dipcontract, #game .dipplayer {
  border: 1px solid rgba(231,215,181,.15); border-radius: 9px;
  background: linear-gradient(180deg,rgba(16,22,22,.88),rgba(7,11,12,.88));
}
#game .dipincoming { padding: 11px; box-shadow: inset 3px 0 rgba(211,151,76,.7); }
#game .dipincoming.counteroffer { box-shadow: inset 3px 0 rgba(126,166,194,.78); }
#game .dipincoming.laststand { box-shadow: inset 3px 0 rgba(198,86,64,.85); }
#game .dipincoming > b { color: #f0d5a6; font-size: 12px; }
#game .dipincoming.counteroffer > b { color: #bdd9e8; }
#game .diproute { margin-top: 5px; color: #85827a; font-size: 9px; line-height: 1.4; }
#game .dipincoming p { display: grid; gap: 2px; margin: 8px 0 0; color: #c8c2b6; font-size: 10px; line-height: 1.35; }
#game .dipincoming p span { color: var(--ds-muted); font: 800 7.5px/1 var(--tbl-cond); letter-spacing: .15em; }
#game .dipincoming > small { display: block; margin-top: 7px; color: var(--ds-muted); font-size: 9px; }
#game .dipvaluecheck {
  display: grid; gap: 3px; margin-top: 9px; padding: 8px 9px;
  border: 1px solid rgba(126,166,194,.24); border-radius: 7px; background: rgba(35,57,65,.24);
}
#game .dipvaluecheck b { color: #a9c7d5; font: 800 7.5px/1 var(--tbl-cond); letter-spacing: .15em; }
#game .dipvaluecheck span { color: #d5d2c8; font-size: 10px; line-height: 1.35; }
#game .dipvaluecheck small { color: #7f8e90; font-size: 8.5px; line-height: 1.35; }
#game .diplomacyreviewvalue { margin: 10px 0 0; padding: 11px 12px; }
#game .dipactions { display: flex; gap: 6px; margin-top: 10px; }
#game .dipactions .pbtn { flex: 1; padding: 7px; font-size: 10px; }
#game .dipcontract { display: grid; gap: 6px; padding: 10px; }
#game .dipcontract > b { color: #dfc38e; font: 800 9px/1 var(--tbl-cond); letter-spacing: .12em; }
#game .dipcontract p { margin: 0; color: #aaa69d; font-size: 9.5px; line-height: 1.4; }
#game .dipcontract p.state-active { color: #d4d0c6; }
#game .dipgroupdeal { display: grid; gap: 7px; padding: 11px; border: 1px solid rgba(143,174,145,.34); border-left: 3px solid #8fae91; border-radius: 9px; background: linear-gradient(145deg,rgba(20,34,29,.82),rgba(7,12,12,.9)); }
#game .dipgroupdeal b { color: #d9e4d6; font-size: 11px; }
#game .dipgroupdeal small { color: #8da18f; font-size: 9px; }
#game .dipgroupdeal p { margin: 0; color: #9c9e95; font-size: 9.5px; line-height: 1.4; }
#game .dipgroupdeal .pbtn { justify-self: start; padding: 7px 10px; font-size: 9px; }
/* Last stand: the one place diplomacy is allowed to look alarming. */
#game .diplaststand { display: grid; gap: 7px; padding: 11px; border: 1px solid rgba(198,86,64,.44); border-left: 3px solid #c65640; border-radius: 9px; background: linear-gradient(145deg,rgba(46,18,14,.86),rgba(12,7,7,.92)); }
#game .diplaststand b { color: #f0c9ba; font-size: 11px; }
#game .diplaststand small { color: #c39685; font-size: 9px; line-height: 1.45; }
#game .diplaststand p { margin: 0; color: #a89a94; font-size: 9.5px; line-height: 1.4; }
#game .diplaststand .dipactions { display: flex; flex-wrap: wrap; gap: 6px; }
#game .diplaststand .pbtn { padding: 7px 10px; font-size: 9px; }
#game .laststandmodal { border-color: rgba(198,86,64,.5); }
#game .laststandmodal .combatkicker { color: #e08a70; }
#game .diprecent { display: grid; gap: 5px; }
#game .diprecent p {
  display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 6px; margin: 0; padding: 6px 7px;
  color: #8d8a82; font-size: 9px; line-height: 1.35; border-left: 2px solid rgba(231,215,181,.14);
  background: rgba(7,11,12,.58);
}
#game .diprecent p.kind-accepted { color: #c8c2b4; border-left-color: rgba(119,166,125,.7); }
#game .diprecent p.kind-bot-rejected, #game .diprecent p.kind-rejected { border-left-color: rgba(181,105,91,.55); }
#game .diprecent p span { color: var(--ds-muted); font: 800 8px/1.35 var(--tbl-cond); }
#game .dipplayer { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 9px 10px; }
#game .dipplayer > div { display: grid; gap: 2px; min-width: 0; }
#game .dipplayer b { overflow: hidden; color: #e8e2d6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
#game .dipplayer small { color: var(--ds-muted); font-size: 9px; }
#game .dipplayer.relation-active small { color: var(--ds-accent-bright); }
#game .dipplayer.relation-reliable small { color: #8fc58d; }
#game .dipplayer.relation-wary small { color: #dc8c78; }
#game .dipplayer .pbtn { flex: none; padding: 6px 8px; font-size: 9px; }
#game .diprules { padding: 10px; color: var(--ds-muted); font-size: 9px; line-height: 1.45; border-top: 1px solid rgba(231,215,181,.1); }
#game .sideloglist .k-diplomacy { color: #dfc38e; }

.diplomacyov { z-index: 180; }
.diplomacymodal { width: min(780px,calc(100 * var(--vwu) - 80px)) !important; max-width: 780px !important; padding: 22px !important; }
.dippreamble { margin: 4px 0 16px; color: #8b887f; font-size: 12px; line-height: 1.5; }
.dipfields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dipfield { display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(231,215,181,.15); border-radius: 9px; background: rgba(5,9,10,.7); }
.dipfield > span { color: #d8bd88; font: 800 9px/1 var(--tbl-cond); letter-spacing: .16em; }
.dipfield > span small { display: block; margin-top: 5px; color: var(--ds-muted); font: 10px/1.3 var(--tbl-font); letter-spacing: 0; }
.dipfield select { width: 100%; min-height: 58px; color: #e8e3d8; background: #0c1213; border-color: rgba(231,177,94,.28); white-space: normal; }
.dipreview { display: grid; gap: 7px; margin-top: 14px; padding: 13px; border: 1px solid rgba(231,177,94,.34); border-radius: 9px; background: rgba(211,151,76,.055); }
.dipreview > b { color: #d8bd88; font: 800 8px/1 var(--tbl-cond); letter-spacing: .17em; }
.dipreview p { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 10px; margin: 0; color: #d4cfc3; font-size: 11px; line-height: 1.4; }
.dipreview p span { color: #817d73; font-weight: 800; }
.dipwarning { margin: 12px 0; padding: 9px 11px; color: #8c887e; font-size: 10px; line-height: 1.4; border-left: 2px solid rgba(211,151,76,.65); background: rgba(211,151,76,.035); }
.diplomacyreviewov { z-index: 210; background: rgba(0,0,0,.9); backdrop-filter: blur(7px); }
.diplomacyreviewmodal { width: min(900px,calc(100 * var(--vwu) - 80px)) !important; max-width: 900px !important; border: 1px solid rgba(211,151,76,.72) !important; box-shadow: 0 32px 130px #000, 0 0 0 1px rgba(240,189,118,.08) inset !important; }
.diplomacyreviewroute { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2px 0 16px; }
.diplomacyreviewroute span { min-width: 130px; padding: 10px 14px; color: #d9d3c6; text-align: center; font: 800 10px/1 var(--tbl-cond); letter-spacing: .12em; border: 1px solid rgba(231,215,181,.18); border-radius: 7px; background: rgba(5,9,10,.82); }
.diplomacyreviewroute span.human { color: #f4d59c; border-color: rgba(211,151,76,.52); background: rgba(211,151,76,.09); }
.diplomacyreviewroute i { color: #8a877e; font-style: normal; font-size: 18px; }
.diplomacyreviewterms { margin-top: 0; }
.diplomacyreviewterms p { grid-template-columns: 80px minmax(0,1fr); gap: 16px; padding: 4px 0; }
.diplomacyreviewoutcome { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: center; margin: 14px 0; padding: 13px; border: 1px solid rgba(178,125,99,.28); border-radius: 9px; background: rgba(92,48,42,.12); }
.diplomacyreviewoutcome > span { color: #d0806e; text-align: center; font-size: 28px; }
.diplomacyreviewoutcome > div { display: grid; gap: 4px; }
.diplomacyreviewoutcome small { color: var(--ds-muted); font: 800 8px/1 var(--tbl-cond); letter-spacing: .16em; }
.diplomacyreviewoutcome b { color: #e1d8ca; font-size: 14px; }
.diplomacyreviewoutcome p { margin: 0; color: #8f8b81; font-size: 10px; line-height: 1.4; }
.diplomacyreviewoutcome.accepted { border-color: rgba(116,168,126,.38); background: rgba(61,103,72,.14); }
.diplomacyreviewoutcome.accepted > span { color: #87bd91; }
.diplomacyreviewactions { position: sticky; bottom: -22px; z-index: 2; margin-top: 16px; padding: 14px 0 22px; background: linear-gradient(180deg,rgba(8,12,12,0),#080c0c 28%); }
.diplomacyreviewactions .pbtn { min-height: 44px; }
.diplomacypausebar { border-color: rgba(211,151,76,.58) !important; box-shadow: inset 3px 0 var(--ds-accent); }

/* Board-aware deal starters and a short, one-time signing animation. */
#game .dipguide { flex: none; border: 1px solid rgba(231,177,94,.18); border-radius: 9px; background: rgba(211,151,76,.035); }
#game .dipguide summary { padding: 12px; color: #d7c7a7; font-size: 11px; cursor: pointer; }
#game .dipguidebody { display: grid; gap: 10px; padding: 0 12px 12px; }
#game .dipguidebody p { margin: 0; color: #b6b3a9; font-size: 11px; line-height: 1.5; }
#game .dipguidebody b { display: block; color: #e0d6c4; }
#game .dipguidebody small { color: var(--ds-muted); font-size: 10px; line-height: 1.4; }
.dipquickstarts { display: grid; grid-template-columns: repeat(auto-fit,minmax(122px,1fr)); gap: 8px; }
.dipquickstart { display: grid; grid-template-columns: 24px minmax(0,1fr); align-content: start; align-items: center; gap: 7px; min-height: 92px; min-width: 0; padding: 11px; border: 1px solid rgba(231,215,181,.2); border-radius: 9px; color: #d9d2c2; background: #0b1414; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.dipquickstart > span { color: #d8b679; font-size: 22px; line-height: 1; }
.dipquickstart b { font-size: 12px; line-height: 1.2; }
.dipquickstart small { grid-column: 1 / -1; color: #9fa99f; font-size: 10px; line-height: 1.4; }
.dipquickstart:hover, .dipquickstart.selected { border-color: #c79e5d; background: #25271c; }
.dipquickstart:focus-visible, #game .dipguide summary:focus-visible { outline: 2px solid #f4d59c; outline-offset: 3px; }
.dipcustomhint { margin: 9px 0 13px; color: #a6a393; font-size: 11px; line-height: 1.4; }
.dipavailability { margin-top: 10px; padding: 9px 11px; border-radius: 7px; font-size: 11px; line-height: 1.45; }
.dipavailability.ready { color: #b5d6b8; background: rgba(99,150,109,.1); border: 1px solid rgba(99,150,109,.25); }
.dipavailability.blocked { color: #e5bf98; background: rgba(179,115,65,.12); border: 1px solid rgba(205,154,91,.3); }
.dipreview p span { overflow-wrap: anywhere; }
.dipaccordvisual { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 0 0 15px; color: #e3bd7a; }
.dipaccordline { width: min(24%,120px); height: 1px; background: linear-gradient(90deg,transparent,currentColor); transform-origin: right center; opacity: .55; }
.dipaccordline:last-child { transform: rotate(180deg); }
.dipaccordseal { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; font-size: 26px; line-height: 1; background: rgba(205,154,91,.08); box-shadow: 0 0 0 5px rgba(205,154,91,.04); }
.status-accepted .dipaccordvisual, .diplomacyannouncement.status-accepted .diplomacyannouncementicon { color: #a9d6ad; }
.status-accepted .dipaccordseal { background: rgba(87,145,104,.16); box-shadow: 0 0 0 5px rgba(87,145,104,.05); }
.dipanimate .dipaccordseal { animation: dipSign .5s cubic-bezier(.2,.8,.2,1) both; }
.dipanimate.status-accepted .dipaccordseal { animation: dipSign .5s cubic-bezier(.2,.8,.2,1) both, dipSealGlow .9s .3s ease-out; }
.dipanimate .dipaccordline { animation: dipLink .55s ease-out both; }
#game .dipincoming.dipanimate, #game .dipcontract.dipanimate { animation: dipArrive .32s ease-out both; }
.diplomacyannouncement.status-accepted .diplomacyannouncementicon { animation: dipSign .5s .1s ease-out both; }
.diplomacyannouncement.status-countered .diplomacyannouncementicon { animation: dipCounter .5s ease-out both; }
@keyframes dipSign { from { opacity: 0; scale: .65; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes dipLink { from { opacity: 0; scale: 0 1; } to { opacity: .55; scale: 1; } }
@keyframes dipSealGlow { 0% { box-shadow: 0 0 0 3px #77b98244; } 100% { box-shadow: 0 0 0 20px #77b98200; } }
@keyframes dipArrive { from { opacity: .35; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@keyframes dipCounter { from { opacity: .2; rotate: -65deg; } to { opacity: 1; rotate: 0deg; } }
body.reduced-motion .dipanimate, body.reduced-motion .dipanimate *, body.reduced-motion .diplomacyannouncement, body.reduced-motion .diplomacyannouncement *, body.reduced-motion .dipquickstart { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .dipanimate, .dipanimate *, .diplomacyannouncement, .diplomacyannouncement *, .dipquickstart { animation: none !important; transition: none !important; }
}
@media (max-width: 700px) {
  .diplomacyreviewroute { flex-wrap: wrap; gap: 7px; }
  .diplomacyreviewroute span { flex: 1; min-width: 0; padding: 10px 7px; font-size: 9px; overflow-wrap: anywhere; }
}
@media (max-width: 520px) {
  .dipquickstarts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dipquickstart { min-height: 84px; padding: 10px; }
  .dipaccordvisual { margin-bottom: 12px; }
  .dipaccordseal { width: 36px; height: 36px; font-size: 22px; }
}

@media (max-width: 520px) {
  .diplomacymodal { width: calc(100 * var(--vwu) - 24px) !important; max-height: calc(100 * var(--dvhu) - 24px) !important; padding: 16px !important; }
  .dipfields { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .dipfield { padding: 10px; }
  .dipfield select { min-height: 48px; }
  .dipreview p { grid-template-columns: 64px minmax(0,1fr); gap: 8px; }
  .diplomacymodal > .btnrow { position: sticky; bottom: -16px; z-index: 3; margin: 8px -16px -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg,rgba(8,12,12,0),#080c0c 24%); }
  .diplomacymodal > .btnrow .pbtn { min-height: 44px; flex: 1; }
}

@media (min-width: 1280px) {
  .oppswrap.active-ai-turn { display: flex; flex-direction: row !important; align-items: stretch; }
  .oppswrap.active-ai-turn .opprow { width: 0; flex: 1 1 0; transition: flex-grow .2s ease; }
  .oppswrap.active-ai-turn .opprow.activeai { flex-grow: 1.7; border-color: rgba(200,134,60,.65); box-shadow: 0 0 0 1px rgba(200,134,60,.18) inset, 0 8px 24px #0008; }
  .oppswrap.active-ai-turn .opprow.activeai .oppstrip { background: linear-gradient(180deg,rgba(200,134,60,.055),transparent 42%); }
}

/* Desktop-only proizvod: ispod 1280 px ne pokušavamo sabiti Commander sto. */
#desktop-only { display: none; }
@media (max-width: 1279px) {
  #setup, #game { display: none !important; }
  #desktop-only {
    min-height: calc(100 * var(--vhu)); padding: 32px; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 15%, #211c2d, #080a0d 64%);
  }
  .desktop-only-card {
    width: min(560px, 100%); padding: 42px; text-align: center;
    border: 1px solid rgba(200,134,60,.55); background: rgba(10,13,15,.94);
    box-shadow: 0 28px 80px #000c, inset 0 1px rgba(255,255,255,.04);
  }
  .desktop-only-card span { color: #c8863c; font-size: 11px; letter-spacing: .24em; }
  .desktop-only-card h1 { margin: 12px 0 8px; color: var(--ds-text); font: 32px/1.1 var(--ds-font-display); }
  .desktop-only-card p { color: #9f998b; font-size: 14px; line-height: 1.6; }
}

/* ============================================================
   DESKTOP CONCEPT — "COMMANDER WAR ROOM"
   Lokalni vizuelni prototip. Namjerno je ograničen na setup ekran
   i desktop širine; game engine i uži prikazi ostaju netaknuti.
   ============================================================ */
@media (min-width: 1280px) {
  body:has(#setup) {
    --wr-bg: #0a0b09;
    --wr-surface: #10110e;
    --wr-surface-hi: #171812;
    --wr-line: rgba(218, 194, 145, .14);
    --wr-line-hi: rgba(var(--ds-accent-rgb), .48);
    --wr-copper: var(--ds-accent);
    --wr-copper-hi: var(--ds-accent-bright);
    --wr-ink: #f1ecdf;
    --wr-muted: #a7a091;
    --wr-dim: #6f6a60;
    background:
      radial-gradient(900px 620px at 11% -12%, rgba(98, 112, 63, .18), transparent 66%),
      radial-gradient(760px 540px at 92% 8%, rgba(150, 91, 45, .11), transparent 70%),
      var(--wr-bg);
    color: var(--wr-ink);
  }

  body:has(#setup)::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .17;
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
  }

  #setup {
    width: min(1760px, 100%);
    max-width: none;
    min-height: calc(100 * var(--vhu));
    margin: 0 auto;
    padding: 28px clamp(32px, 3 * var(--vwu), 58px) 76px;
    background: transparent;
    isolation: isolate;
  }

  #setup::before {
    top: 0;
    height: 480px;
    opacity: .76;
    background:
      radial-gradient(70% 100% at 24% 0%, rgba(90, 104, 58, .17), transparent 72%),
      linear-gradient(to bottom, rgba(10,11,9,.1), var(--wr-bg));
    -webkit-mask-image: none;
    mask-image: none;
  }

  #setup .menuhead {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-height: 126px;
    margin: 0 0 34px;
    padding: 8px 0 28px;
    border-bottom: 1px solid var(--wr-line);
  }

  #setup .menumark {
    position: relative;
    width: 58px;
    height: 58px;
    border: 1px solid var(--wr-line-hi);
    border-radius: 50%;
    transform: none;
    background: radial-gradient(circle, rgba(211,151,76,.19), transparent 62%);
    box-shadow: 0 0 36px rgba(211,151,76,.08), inset 0 0 0 8px rgba(10,11,9,.84);
  }

  #setup .menumark::before,
  #setup .menumark::after {
    content: '';
    position: absolute;
    inset: 15px;
    border: 1px solid var(--wr-copper);
    transform: rotate(45deg);
  }

  #setup .menumark::after {
    inset: 23px;
    background: var(--wr-copper-hi);
    border: 0;
    box-shadow: 0 0 16px rgba(240,189,118,.5);
  }

  #setup .menu-kicker {
    margin-bottom: 8px;
    color: var(--wr-copper);
    font: 600 10px/1 var(--tbl-cond);
    letter-spacing: .24em;
    text-transform: uppercase;
  }

  #setup .menu-kicker span { color: var(--wr-dim); }

  #setup .title {
    max-width: 880px;
    color: var(--wr-ink);
    font: 400 clamp(38px, 3.2 * var(--vwu), 54px)/.98 var(--ds-font-display);
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  #setup .subtitle {
    margin-top: 10px;
    color: var(--wr-muted);
    font-size: 13px;
    letter-spacing: .015em;
  }

  #setup .menu-mana-showcase {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
  }

  #setup .menu-mana-showcase > span {
    color: var(--wr-dim);
    font: 600 8px/1 var(--tbl-cond);
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  #setup .menu-mana-showcase > div { display: flex; align-items: center; gap: 6px; }
  #setup .menu-mana-showcase img,
  #setup .deckmana {
    display: block;
    width: 23px;
    height: 23px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.62));
  }

  #setup .menu-mana-showcase img {
    width: 29px;
    height: 29px;
    transition: transform .2s ease, filter .2s ease;
  }

  #setup .menu-mana-showcase img:hover {
    transform: translateY(-2px) scale(1.08);
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.78)) brightness(1.08);
  }

  #setup .menupill {
    min-width: 188px;
    padding: 13px 16px;
    border: 1px solid var(--wr-line);
    border-radius: 2px;
    background: rgba(17,18,14,.64);
    color: var(--wr-muted);
    letter-spacing: .14em;
  }

  #setup .menupill .dot {
    width: 8px;
    height: 8px;
    background: #9bbb73;
    box-shadow: 0 0 0 4px rgba(155,187,115,.08), 0 0 12px rgba(155,187,115,.48);
  }

  #setup .menupill span:last-child { display: grid; gap: 3px; }
  #setup .menupill b {
    color: var(--wr-copper);
    font-size: 8px;
    letter-spacing: .22em;
  }

  #setup .setupgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: clamp(30px, 3 * var(--vwu), 52px);
    align-items: start;
  }

  #setup .setupleft { min-width: 0; }

  #setup .seclabel {
    position: relative;
    margin: 0 0 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wr-line);
    color: var(--wr-ink);
    font: 400 18px/1.1 var(--ds-font-display);
  }

  #setup .seclabel i {
    color: var(--wr-copper);
    font: 600 10px/1 var(--tbl-cond);
  }

  #setup .seclabel em {
    margin-left: auto;
    color: var(--wr-dim);
    font: 500 9px/1 var(--tbl-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  #setup .decklist {
    counter-reset: war-room-deck;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #setup .deckcard {
    counter-increment: war-room-deck;
    position: relative;
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    min-height: 188px;
    padding: 0;
    overflow: hidden;
    appearance: none;
    text-align: left;
    font: inherit;
    color: var(--wr-ink);
    background: rgba(16,17,14,.82);
    border: 1px solid var(--wr-line);
    border-radius: 2px;
    box-shadow: none;
    cursor: pointer;
    transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, background .24s ease, box-shadow .24s ease;
  }

  #setup .deckcard::after {
    content: counter(war-room-deck, decimal-leading-zero);
    position: absolute;
    right: 12px;
    top: 10px;
    color: rgba(218,194,145,.28);
    font: 600 9px/1 var(--tbl-cond);
    letter-spacing: .16em;
  }

  #setup .deckcard:hover {
    transform: translateY(-3px);
    background: var(--wr-surface-hi);
    border-color: rgba(211,151,76,.36);
    box-shadow: 0 18px 38px rgba(0,0,0,.32);
  }

  #setup .deckcard:focus-visible {
    outline: 2px solid var(--wr-copper-hi);
    outline-offset: 3px;
  }

  #setup .deckcard:active { transform: translateY(-1px) scale(.995); }

  #setup .deckcard.selected {
    transform: translateY(-2px);
    background: linear-gradient(110deg, rgba(211,151,76,.12), rgba(23,24,18,.96) 48%);
    border-color: var(--wr-copper);
    box-shadow: 0 0 0 1px rgba(211,151,76,.12), 0 22px 44px rgba(0,0,0,.38);
  }

  #setup .deckart {
    width: 148px;
    height: 100%;
    min-height: 188px;
    object-fit: cover;
    object-position: center;
    filter: saturate(.82) contrast(1.03);
    transition: filter .24s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  }

  #setup .deckcard:hover .deckart,
  #setup .deckcard.selected .deckart {
    filter: saturate(1.06) contrast(1.03);
    transform: scale(1.025);
  }

  #setup .deckinfo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 24px 28px 18px 18px;
  }

  #setup .deckname {
    padding-right: 14px;
    color: var(--wr-ink);
    font: 400 19px/1.12 var(--ds-font-display);
    letter-spacing: -.015em;
  }

  #setup .deckcmd {
    margin: 7px 0 8px;
    overflow: hidden;
    color: var(--wr-copper-hi);
    font-size: 11.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #setup .deckcolors { display: flex; align-items: center; gap: 5px; margin: 0 0 8px; }
  #setup .dot.big { width: 9px; height: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
  #setup .deckstyle { color: var(--wr-muted); font-size: 10px; letter-spacing: .03em; }

  #setup .deckblurb {
    display: -webkit-box;
    overflow: hidden;
    color: var(--wr-muted);
    font-size: 11.5px;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #setup .deckset {
    margin-top: auto;
    padding-top: 9px;
    color: var(--wr-dim);
    font-size: 9.5px;
  }

  #setup .setupright {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    max-height: calc(100 * var(--vhu) - 36px);
    overflow-y: auto;
    padding: 0 22px 22px;
    background:
      linear-gradient(145deg, rgba(211,151,76,.055), transparent 30%),
      rgba(15,16,13,.96);
    border: 1px solid var(--wr-line);
    border-top: 2px solid var(--wr-copper);
    border-radius: 2px;
    box-shadow: 0 30px 70px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.025);
    scrollbar-width: thin;
    scrollbar-color: rgba(211,151,76,.38) transparent;
  }

  #setup .controlintro {
    position: relative;
    margin: 0 -22px 20px;
    padding: 22px 22px 20px;
    border-bottom: 1px solid var(--wr-line);
  }

  #setup .controlintro::after {
    content: '04';
    position: absolute;
    top: 9px;
    right: 16px;
    color: rgba(218,194,145,.06);
    font: 400 70px/.9 var(--ds-font-display);
  }

  #setup .controlintro > span {
    color: var(--wr-copper);
    font: 600 9px/1 var(--tbl-cond);
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  #setup .controlintro h2 {
    position: relative;
    z-index: 1;
    margin: 7px 0 6px;
    color: var(--wr-ink);
    font: 400 27px/1.05 var(--ds-font-display);
    letter-spacing: -.02em;
  }

  #setup .controlintro p {
    position: relative;
    z-index: 1;
    max-width: 34ch;
    color: var(--wr-muted);
    font-size: 11.5px;
    line-height: 1.48;
  }

  #setup .setupright .seclabel { margin-top: 17px; }
  #setup .setupright .controlintro + .seclabel { margin-top: 0; }

  #setup .cmdbox {
    min-height: 90px;
    padding: 10px;
    border: 1px dashed rgba(218,194,145,.18);
    border-radius: 2px;
    background: rgba(255,255,255,.012);
  }

  #setup .cmdchip { border-radius: 2px; background: var(--wr-surface-hi); }

  #setup .pbtn,
  #setup select,
  #setup textarea,
  #setup input {
    border-radius: 2px;
  }

  #setup .pbtn {
    min-height: 40px;
    background: rgba(255,255,255,.025);
    border-color: var(--wr-line);
    color: var(--wr-ink);
    font-family: var(--tbl-cond);
    font-weight: 600;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  }

  #setup .pbtn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(211,151,76,.42);
    background: rgba(211,151,76,.075);
  }

  #setup .pbtn:active:not(:disabled) { transform: translateY(1px); }

  #setup .pbtn:focus-visible,
  #setup select:focus-visible,
  #setup input:focus-visible {
    outline: 2px solid var(--wr-copper-hi);
    outline-offset: 2px;
  }

  #setup .pbtn.selected {
    border-color: var(--wr-copper);
    color: var(--wr-copper-hi);
    background: rgba(211,151,76,.08);
    box-shadow: inset 0 -2px var(--wr-copper);
  }

  #setup .styleselect {
    min-height: 38px;
    background: var(--wr-bg);
    border-color: var(--wr-line);
  }

  #setup .botconfig {
    padding: 10px 0;
    border-bottom: 1px solid var(--wr-line);
  }
  #setup .botconfig:last-child { border-bottom: 0; }
  #setup .botstylerow {
    display: grid;
    grid-template-columns: 34px 72px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  #setup .botidentity { display: grid; gap: 3px; min-width: 0; }
  #setup .botidentity small {
    color: var(--wr-dim);
    font: 600 8px/1 var(--tbl-cond);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  #setup .botname { min-width: 0; color: var(--wr-ink); font-size: 11.5px; }
  #setup .botfields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
  #setup .botfield { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 7px; }
  #setup .botfield > span {
    color: var(--wr-dim);
    font: 600 8px/1 var(--tbl-cond);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  #setup .botfield .styleselect { width: 100%; min-width: 0; }
  #setup .styledesc { margin: 7px 0 0 114px; color: var(--wr-dim); }
  #setup .cmdcheck { color: var(--wr-muted); line-height: 1.35; }
  #setup .cmdcheck input { accent-color: var(--wr-copper); }

  #setup .pbtn.start {
    position: relative;
    min-height: 54px;
    margin-top: 20px;
    color: var(--ds-accent-ink);
    background: linear-gradient(180deg, var(--wr-copper-hi), var(--wr-copper));
    border-color: var(--wr-copper-hi);
    font: 600 14px/1 var(--tbl-cond);
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(211,151,76,.16);
  }

  #setup .pbtn.start:hover:not(:disabled) {
    color: var(--ds-accent-ink);
    background: linear-gradient(180deg, #f7c986, #dda354);
    box-shadow: 0 14px 34px rgba(211,151,76,.24);
  }

  #setup .pbtn.start:disabled {
    color: var(--wr-dim);
    background: rgba(255,255,255,.025);
    border-color: var(--wr-line);
    box-shadow: none;
  }

  #setup .credits {
    margin-top: 18px;
    color: var(--wr-dim);
    font-size: 9.5px;
    line-height: 1.5;
  }
}

@media (min-width: 1280px) and (max-width: 1479px) {
  #setup .setupgrid { grid-template-columns: minmax(0, 1fr) 390px; gap: 28px; }
  #setup .deckcard { grid-template-columns: 124px minmax(0, 1fr); }
  #setup .deckart { width: 124px; }
  #setup .deckinfo { padding-left: 15px; }
  #setup .deckname { font-size: 17px; }
}

/* ============================================================
   PUBLIC VOTE BARGAINS + CENTRAL GAMEPLAY FX
   ============================================================ */
.votecampaignmodal {
  max-width: 820px;
  padding: 22px;
  border-color: rgba(211,151,76,.58) !important;
  background:
    radial-gradient(circle at 86% 0,rgba(102,139,102,.2),transparent 34%),
    linear-gradient(145deg,#18211d,#090d0c 74%) !important;
}
.votecampaignkicker { margin-bottom:12px; color:var(--ds-accent-bright); font:800 10px/1.2 var(--tbl-cond,inherit); letter-spacing:.22em; }
.votecampaignhero { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:15px; padding:12px; border:1px solid rgba(143,174,145,.32); background:linear-gradient(105deg,rgba(47,72,59,.48),rgba(11,17,15,.9)); }
.votecampaignhero > img { width:82px; height:110px; object-fit:cover; border-radius:4px; box-shadow:0 12px 30px #000b,0 0 0 1px rgba(239,189,118,.22); }
.votecampaignhero small,.votecampaignhero b,.votecampaignhero span { display:block; }
.votecampaignhero small { color:#91aa93; font-size:9px; letter-spacing:.18em; }
.votecampaignhero b { margin:5px 0; color:#fff2d7; font:700 25px/1.05 var(--tbl-serif,serif); }
.votecampaignhero span { color:#c7b99f; font-size:11px; line-height:1.4; }
.votecampaigndetail { margin:12px 0; padding:11px 13px; color:#d2d0c7; background:rgba(10,14,13,.75); border-left:3px solid #7c9f80; font-size:12px; line-height:1.5; }
.votecampaignoptions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.votecampaignoption { min-height:48px; color:#eae2d2 !important; text-align:left; border-color:rgba(143,174,145,.3) !important; background:linear-gradient(100deg,rgba(43,58,47,.7),rgba(21,27,24,.92)) !important; }
.votecampaignoption:hover,.votecampaignoption:focus-visible { border-color:var(--ds-accent-bright) !important; box-shadow:0 0 0 2px rgba(239,189,118,.12),0 10px 28px #0008; }
.votecampaignoption.accept { color: var(--ds-accent-ink) !important; background:linear-gradient(100deg,#a7c794,#d8c77e) !important; border-color:#e8dda8 !important; font-weight:850; }
.votecampaignoption.decline { color:#aaa89f !important; background:#141716 !important; }
.votecampaignfoot { margin-top:12px; color:#898f89; font-size:10px; line-height:1.45; }

.gamefxlayer { position:fixed; inset:0; z-index:170; overflow:hidden; pointer-events:none; contain:layout paint; }
.smokefxtrigger { position:fixed; left:50%; bottom:22px; z-index:260; transform:translateX(-50%); }
.gamefx-impact { position:absolute; width:1px; height:1px; color:#ffb07c; transform:translate(-50%,-50%); }
.gamefx-impact > span { position:absolute; left:-46px; top:-46px; width:92px; height:92px; border:2px solid currentColor; border-radius:50%; box-shadow:0 0 28px currentColor,inset 0 0 25px currentColor; animation:gamefxImpactRing .7s cubic-bezier(.12,.75,.2,1) both; }
.gamefx-impact > i { position:absolute; left:-3px; top:-34px; width:6px; height:68px; border-radius:50%; background:linear-gradient(180deg,transparent,currentColor,transparent); transform-origin:3px 34px; filter:drop-shadow(0 0 7px currentColor); animation:gamefxImpactShard .62s ease-out both; }
.gamefx-impact > i:nth-child(1) { transform:rotate(0deg); }
.gamefx-impact > i:nth-child(2) { transform:rotate(60deg); }
.gamefx-impact > i:nth-child(3) { transform:rotate(120deg); }
.gamefx-impact > strong,.gamefx-impact > small { position:absolute; left:0; width:100px; text-align:center; transform:translateX(-50%); text-shadow:0 3px 13px #000,0 0 12px currentColor; }
.gamefx-impact > strong { top:-22px; color:#fff2e8; font:900 31px/1 var(--tbl-cond,inherit); animation:gamefxDamageNumber .92s cubic-bezier(.16,.78,.2,1) both; }
.gamefx-impact > small { top:13px; color:#ffd1b6; font:800 8px/1 var(--tbl-cond,inherit); letter-spacing:.22em; animation:gamefxDamageNumber .92s .05s cubic-bezier(.16,.78,.2,1) both; }
.gamefx-impact.player { color:#ff704d; }
.gamefx-impact.permanent { color:#ffb05f; }
.gamefx-impact.combat { color:#ff543b; }
.gamefx-impact.combat > span,.gamefx-impact.combat > i,.gamefx-impact.combat > strong,.gamefx-impact.combat > small { animation-delay:var(--combat-delay,0ms); }
.gamefx-impact.combat::before { content:''; position:absolute; left:-23px; top:-23px; width:46px; height:46px; background:radial-gradient(circle,#fff 0 6%,#ffc188 8% 15%,#ff5637 18% 34%,transparent 62%); filter:drop-shadow(0 0 18px #ff4d2f); animation:gamefxCombatBurst .54s var(--combat-delay,0ms) cubic-bezier(.15,.78,.2,1) both; }
.gamefx-damageline { position:absolute; height:3px; transform-origin:0 50%; border-radius:50%; background:linear-gradient(90deg,transparent,#ffd0a5 28%,#ff5e3d 78%,transparent); box-shadow:0 0 13px #ff744f; animation:gamefxDamageLine .48s ease-out both; }
.gamefx-combattrail { position:absolute; height:7px; transform-origin:0 50%; border-radius:50%; background:linear-gradient(90deg,transparent 0,#ffdfac 25%,#fff 55%,#ff543b 78%,transparent 100%); box-shadow:0 0 6px #fff3,0 0 18px #ff5138,0 0 34px #b51c18; animation:gamefxCombatTrail .58s cubic-bezier(.12,.72,.16,1) both; }
.gamefx-combattrail::after { content:''; position:absolute; right:2px; top:50%; width:18px; height:18px; transform:translateY(-50%) rotate(45deg); border-top:3px solid #fff3d5; border-right:3px solid #ff6c4c; filter:drop-shadow(0 0 8px #ff4a32); }
.gamefx-combattrail.step-first { color:#ffd77a; background:linear-gradient(90deg,transparent,#fff0b9 28%,#fff 52%,#ffbd54 78%,transparent); box-shadow:0 0 8px #fff4,0 0 20px #ffac38,0 0 36px #a83d0c; }
.gamefx-combatghost { position:absolute; transform-origin:center; will-change:transform,opacity,filter; animation:gamefxCombatLunge .58s cubic-bezier(.18,.78,.18,1) both; }
.gamefx-combatghost > .mini { width:100% !important; height:100% !important; margin:0 !important; transform:none !important; pointer-events:none !important; box-shadow:0 12px 30px #000c,0 0 0 2px #ffbe75,0 0 25px #ff623e !important; }
.gamefx-combatghost.step-first > .mini { box-shadow:0 12px 30px #000c,0 0 0 2px #ffe4a0,0 0 28px #ffad3f !important; }
.fx-combat-source { animation:gamefxCombatSource .58s ease-out both !important; }
#game.fx-combat-camera { animation:gamefxCombatCamera .38s ease-out both; }
.fx-damage-target { animation:gamefxTargetHit .58s cubic-bezier(.2,.8,.2,1) both !important; }

.gamefx-cardghost,.gamefx-wipecard { position:absolute; transform-origin:center; will-change:transform,opacity,filter; }
.gamefx-cardghost { animation:gamefxZoneFlight 1s cubic-bezier(.22,.68,.16,1) both; }
.gamefx-cardghost > .mini,.gamefx-wipecard > .mini { width:100% !important; height:100% !important; margin:0 !important; transform:none !important; pointer-events:none !important; box-shadow:0 15px 36px #000c,0 0 0 2px rgba(255,255,255,.2) !important; }
.gamefx-cardghost.to-hand { filter:drop-shadow(0 0 13px #6fe9ff); }
.gamefx-cardghost.to-graveyard { filter:drop-shadow(0 0 13px #a6a49d); }
.gamefx-cardghost.to-exile { filter:drop-shadow(0 0 17px #bd83ff); }
.gamefx-cardghost.to-command { filter:drop-shadow(0 0 16px #f1c86f); }
.gamefx-zonebadge { position:absolute; transform:translate(-50%,-50%); padding:6px 10px; color:#e7fbff; background:rgba(11,31,36,.9); border:1px solid #69c9d8; box-shadow:0 8px 25px #000b,0 0 20px rgba(92,213,230,.25); font:850 8px/1 var(--tbl-cond,inherit); letter-spacing:.17em; white-space:nowrap; animation:gamefxZoneBadge .82s ease-out both; }
.gamefx-zonebadge.to-graveyard { color:#e1ddd2; background:#232321ee; border-color:#928c80; }
.gamefx-zonebadge.to-exile { color:#ead8ff; background:#281a35ee; border-color:#a97adc; }
.gamefx-zonebadge.to-command { color:#fff0bd; background:#352813ee; border-color:#d2ad58; }
.fx-zone-leaving { opacity:.2 !important; filter:saturate(.1) brightness(1.45) !important; transition:opacity .24s ease,filter .24s ease; }

.gamefx-wipe { position:absolute; inset:0; overflow:hidden; background:radial-gradient(circle at 50% 45%,rgba(210,226,223,.18),rgba(9,13,14,.76) 38%,rgba(2,4,5,.93) 78%); animation:gamefxWipeFrame 1.34s ease both; }
.gamefx-wipe.mode-exile { background:radial-gradient(circle at 50% 45%,rgba(174,119,236,.25),rgba(23,10,35,.82) 42%,rgba(3,2,7,.95) 80%); }
.gamefx-wipe.mode-damage { background:radial-gradient(circle at 50% 45%,rgba(255,135,80,.27),rgba(65,18,11,.78) 42%,rgba(6,2,1,.94) 80%); }
.gamefx-wipecloud { position:absolute; inset:-35%; background:conic-gradient(from 30deg,transparent,rgba(199,221,217,.32),transparent 20%,rgba(104,127,128,.22),transparent 47%,rgba(230,238,225,.2),transparent 74%); filter:blur(26px); animation:gamefxWipeCloud 1.25s cubic-bezier(.16,.7,.2,1) both; }
.gamefx-wiperune { position:absolute; left:50%; top:45%; color:#e6eee9; transform:translate(-50%,-50%); font:900 clamp(80px,16 * var(--vwu),220px)/1 var(--tbl-serif,serif); text-shadow:0 0 25px #fff,0 0 85px #9dbbb5; animation:gamefxWipeRune 1.08s ease-out both; }
.mode-exile .gamefx-wiperune { color:#dfbdff; text-shadow:0 0 28px #c37aff,0 0 95px #7c35aa; }
.mode-damage .gamefx-wiperune { color:#ffd2ad; text-shadow:0 0 28px #ff8a4d,0 0 95px #b52e17; }
.gamefx-wipetitle { position:absolute; left:50%; top:64%; transform:translateX(-50%); text-align:center; text-shadow:0 5px 25px #000; animation:gamefxWipeTitle 1.2s ease both; }
.gamefx-wipetitle small,.gamefx-wipetitle b { display:block; }
.gamefx-wipetitle small { color:#e3b96f; font:900 11px/1 var(--tbl-cond,inherit); letter-spacing:.34em; }
.gamefx-wipetitle b { margin-top:8px; color:#f2eee4; font:800 clamp(20px,3 * var(--vwu),42px)/1 var(--tbl-serif,serif); }
.gamefx-wipecard { animation:gamefxWipeCard .92s var(--wipe-delay,0ms) cubic-bezier(.18,.72,.18,1) both; }
#game.fx-boardwipe { filter:saturate(.38) brightness(.72); transition:filter .18s ease; }

.gamefx-counterspell { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle,rgba(40,116,177,.22),rgba(3,8,17,.88) 48%,rgba(0,2,8,.97)); animation:fxCounterFrame 1.45s ease both; }
.gamefx-counterspell > img { position:absolute; width:min(230px,34 * var(--vwu)); aspect-ratio:5/7; object-fit:cover; border:2px solid #77d3ff; border-radius:10px; box-shadow:0 22px 80px #000,0 0 45px #349ee4; filter:saturate(.4) brightness(.7); animation:fxCounterCard 1.35s cubic-bezier(.18,.75,.18,1) both; }
.counterspell-rings { position:absolute; left:50%; top:50%; width:1px; height:1px; color:#69ccff; }
.counterspell-rings i { position:absolute; left:-125px; top:-125px; width:250px; height:250px; border:2px solid currentColor; border-radius:50%; box-shadow:0 0 30px currentColor; animation:fxCounterRing 1.05s ease-out both; }
.counterspell-rings i:nth-child(2) { animation-delay:.12s; transform:rotate(45deg); border-radius:18%; }
.counterspell-rings i:nth-child(3) { animation-delay:.24s; }
.counterspell-seal { position:absolute; left:50%; top:47%; display:grid; place-items:center; width:118px; height:118px; color:#e7f8ff; transform:translate(-50%,-50%); background:#07182ee8; border:2px solid #79d5ff; border-radius:50%; box-shadow:0 0 30px #34a5ea,0 0 90px #2372bd; animation:fxCounterSeal 1.25s ease both; }
.counterspell-seal .gameicon { width:72px; height:72px; stroke-width:1.35; }
.counterspell-copy { position:absolute; left:50%; top:72%; width:min(720px,90 * var(--vwu)); transform:translateX(-50%); text-align:center; text-shadow:0 4px 22px #000; animation:fxCounterCopy 1.38s ease both; }
.counterspell-copy small,.counterspell-copy b,.counterspell-copy span { display:block; }
.counterspell-copy small { color:#7dcfff; font:900 9px/1 var(--tbl-cond,inherit); letter-spacing:.35em; }
.counterspell-copy b { margin:7px 0; color:#eefaff; font:900 clamp(27px,5 * var(--vwu),58px)/.9 var(--tbl-serif,serif); letter-spacing:.05em; }
.counterspell-copy span { color:#b8d8e8; font-size:11px; }

.gamefx-keyword { --kw:#eee; position:absolute; z-index:3; display:grid; grid-template-columns:58px auto; align-items:center; gap:10px; min-width:210px; padding:9px 14px 9px 9px; color:var(--kw); transform:translate(-50%,-50%); background:linear-gradient(100deg,#101516f2,#080b0df4); border:1px solid var(--kw); border-radius:999px; box-shadow:0 15px 40px #000d,0 0 28px color-mix(in srgb,var(--kw) 55%,transparent); animation:fxKeywordBurst 1.14s cubic-bezier(.16,.78,.2,1) both; }
.gamefx-keyword.tone-gold { --kw:#f3ca60; }.gamefx-keyword.tone-blue { --kw:#69d6ff; }.gamefx-keyword.tone-violet { --kw:#cba0ff; }.gamefx-keyword.tone-red { --kw:#ff806a; }.gamefx-keyword.tone-orange { --kw:#ffb862; }.gamefx-keyword.tone-sky { --kw:#9ee8ff; }.gamefx-keyword.tone-acid { --kw:#b4ee78; }.gamefx-keyword.tone-rose { --kw:#ff9eb4; }.gamefx-keyword.tone-green { --kw:#8ed48b; }.gamefx-keyword.tone-white { --kw:var(--ds-accent-glow); }.gamefx-keyword.tone-crimson { --kw:#ff6f79; }.gamefx-keyword.tone-silver { --kw:#cbd2d3; }.gamefx-keyword.tone-cyan { --kw:#71e7dc; }
.gamefx-keyword > i { position:absolute; left:29px; top:50%; width:68px; height:68px; transform:translate(-50%,-50%); border:2px solid var(--kw); border-radius:50%; animation:fxKeywordRing .9s ease-out both; }
.gamefx-keyword > span { display:grid; place-items:center; width:50px; height:50px; color: var(--ds-accent-ink); background:var(--kw); border-radius:50%; box-shadow:0 0 20px var(--kw); }
.gamefx-keyword > span .gameicon { width:31px; height:31px; stroke-width:1.6; }
.gamefx-keyword > div small,.gamefx-keyword > div b,.gamefx-keyword > div em { display:block; white-space:nowrap; }
.gamefx-keyword > div small { color:var(--kw); font:850 7px/1 var(--tbl-cond,inherit); letter-spacing:.18em; }.gamefx-keyword > div b { margin:3px 0; color:#fff; font:850 18px/1 var(--tbl-serif,serif); }.gamefx-keyword > div em { max-width:170px; overflow:hidden; color:#aab1b2; font:normal 8px/1 var(--tbl-cond,inherit); text-overflow:ellipsis; }
.gamefx-keyword.state-prevented { min-width:250px; }
.fx-keyword-gold,.fx-keyword-blue,.fx-keyword-violet,.fx-keyword-red,.fx-keyword-orange { animation:fxKeywordTarget .82s ease both !important; }

.gamefx-minuscounter { position:absolute; display:flex; align-items:center; gap:7px; padding:8px 12px; color:#ffe8e3; transform:translate(-50%,-50%); background:#541713f2; border:2px solid #f2705f; border-radius:999px; box-shadow:0 0 35px #ed4639aa,0 16px 32px #000c; animation:fxMinusCounter 1s cubic-bezier(.2,.78,.2,1) both; }
.gamefx-minuscounter .gameicon { width:30px; height:30px; color:#ff8979; }.gamefx-minuscounter b { font:900 19px/1 var(--tbl-cond,inherit); }.gamefx-minuscounter span { color:#ffad9f; font:800 11px/1 var(--tbl-cond,inherit); }

.gamefx-strike { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:20px; overflow:hidden; background:linear-gradient(90deg,transparent,rgba(48,9,5,.8),transparent); animation:fxStrikeFrame 1s ease both; }
.gamefx-strike > span { z-index:2; display:grid; place-items:center; width:76px; height:76px; color: var(--ds-accent-ink); background:#ff8a6f; border:2px solid #ffd2c7; border-radius:50%; box-shadow:0 0 45px #ff4f35; }.gamefx-strike.double > span { background:#ffbe65; box-shadow:0 0 45px #ff802c; }
.gamefx-strike > span .gameicon { width:47px; height:47px; stroke-width:1.45; }.gamefx-strike > div:not(.strike-slashes) { z-index:2; min-width:280px; text-shadow:0 3px 15px #000; }.gamefx-strike small,.gamefx-strike b,.gamefx-strike em { display:block; }.gamefx-strike small { color:#ff9b83; font:900 8px/1 var(--tbl-cond,inherit); letter-spacing:.3em; }.gamefx-strike b { margin:5px 0; color:#fff0eb; font:900 clamp(28px,4 * var(--vwu),48px)/1 var(--tbl-serif,serif); }.gamefx-strike em { color:#d8b1aa; font:normal 9px/1 var(--tbl-cond,inherit); }
.strike-slashes { position:absolute; inset:0; }.strike-slashes i { position:absolute; left:-12%; top:47%; width:124%; height:7px; transform:rotate(-10deg); background:linear-gradient(90deg,transparent,#fff 30%,#ff6041 55%,transparent); box-shadow:0 0 30px #ff5237; animation:fxStrikeSlash .72s ease-out both; }.strike-slashes i:nth-child(2) { top:54%; transform:rotate(8deg); animation-delay:.14s; }

.gamefx-proliferatepulse { position:absolute; display:grid; place-items:center; width:42px; height:42px; color:#8af0b9; transform:translate(-50%,-50%); background:#153a2de8; border:1px solid currentColor; border-radius:50%; box-shadow:0 0 25px #59d895; animation:fxProliferatePulse 1s ease both; }.gamefx-proliferatepulse .gameicon { width:24px; height:24px; }.gamefx-proliferatepulse i { position:absolute; inset:-3px; border:1px solid currentColor; border-radius:50%; animation:fxProliferateRing .92s ease-out both; }.gamefx-proliferatepulse i:nth-child(3) { animation-delay:.18s; }
.gamefx-proliferatetitle { position:absolute; left:50%; top:44%; display:flex; align-items:center; gap:12px; padding:11px 18px; color:#9ff0c4; transform:translate(-50%,-50%); background:#0c211bf2; border:1px solid #65d59b; border-radius:999px; box-shadow:0 18px 44px #000c,0 0 35px #42bd80; animation:fxProliferateTitle 1.12s ease both; }.gamefx-proliferatetitle > .gameicon { width:38px; height:38px; }.gamefx-proliferatetitle small,.gamefx-proliferatetitle b { display:block; white-space:nowrap; }.gamefx-proliferatetitle small { color:#77a990; font:800 7px/1 var(--tbl-cond,inherit); letter-spacing:.22em; }.gamefx-proliferatetitle b { margin-top:4px; color:#e5fff1; font:850 15px/1 var(--tbl-cond,inherit); letter-spacing:.08em; }

/* Command Zone signature AI comments: one queued, non-blocking center-stage
   reaction after a completed public game outcome. */
.personareaction {
  --persona-accent:#e4bf74;
  position:fixed;
  left:50%; top:50%; z-index:185;
  width:min(720px,calc(100 * var(--vwu) - 40px)); min-height:184px;
  display:grid; grid-template-columns:146px minmax(0,1fr); align-items:stretch;
  overflow:hidden; pointer-events:none; isolation:isolate;
  color:#f8f3e8; transform:translate(-50%,-50%);
  background:linear-gradient(112deg,rgba(5,8,10,.99),rgba(18,25,27,.98) 54%,rgba(7,10,12,.99));
  border:1px solid color-mix(in srgb,var(--persona-accent) 78%,#fff 8%);
  box-shadow:0 35px 110px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05),0 0 58px color-mix(in srgb,var(--persona-accent) 26%,transparent);
  animation:personaReactionIn .46s cubic-bezier(.16,.82,.2,1) both;
}
.personareaction.style-jimmy { --persona-accent:#ff8b4d; }
.personareaction.style-rachel { --persona-accent:#62d6c8; }
.personareaction.style-post { --persona-accent:#b98cff; }
.personareaction.style-olivia { --persona-accent:#ff709c; }
.personareaction.style-josh { --persona-accent:#75bfff; }
.personareaction::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 19% 42%,color-mix(in srgb,var(--persona-accent) 24%,transparent),transparent 34%),linear-gradient(90deg,color-mix(in srgb,var(--persona-accent) 9%,transparent),transparent 58%); }
.personareactionportrait { position:relative; min-height:184px; overflow:hidden; border-right:1px solid color-mix(in srgb,var(--persona-accent) 48%,transparent); background:#0a0d0f; }
.personareactionportrait::after { content:''; position:absolute; inset:0; box-shadow:inset -24px 0 34px rgba(4,7,9,.65),inset 0 -34px 30px rgba(3,5,6,.72); }
.personareactionportrait img { width:100%; height:100%; min-height:184px; display:block; object-fit:cover; object-position:center 24%; filter:saturate(.94) contrast(1.05); }
.personareactionportrait span { position:absolute; left:10px; right:10px; bottom:9px; z-index:2; padding:5px 7px; overflow:hidden; color:#f7f4ec; background:rgba(5,8,9,.82); border:1px solid color-mix(in srgb,var(--persona-accent) 55%,transparent); font:800 8px/1 var(--tbl-cond,inherit); letter-spacing:.2em; text-align:center; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.personareactioncopy { align-self:center; min-width:0; padding:25px 30px 24px; text-shadow:0 3px 18px rgba(0,0,0,.9); }
.personareactioncopy small,.personareactioncopy b,.personareactioncopy p,.personareactioncopy em { display:block; }
.personareactioncopy small { color:var(--persona-accent); font:850 9px/1 var(--tbl-cond,inherit); letter-spacing:.27em; }
.personareactioncopy b { margin:8px 0 9px; color:#fffaf0; font:700 24px/1 var(--tbl-serif,serif); letter-spacing:.02em; }
.personareactioncopy p { max-width:510px; margin:0; color:#fff; font:600 clamp(20px,2.35 * var(--vwu),29px)/1.16 var(--tbl-serif,serif); text-wrap:balance; }
.personareactioncopy em { margin-top:12px; overflow:hidden; color:#aeb6b7; font:700 9px/1 var(--tbl-cond,inherit); letter-spacing:.12em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.personareactionflare { position:absolute; inset:-70% -20%; z-index:-1; background:linear-gradient(108deg,transparent 36%,color-mix(in srgb,var(--persona-accent) 17%,transparent) 49%,transparent 62%); transform:translateX(-70%); animation:personaReactionFlare 1.4s .12s ease-out both; }
.personareaction.leaving { opacity:0; transform:translate(-50%,-54%) scale(.97); filter:blur(3px); transition:.28s ease; }
@keyframes personaReactionIn { from { opacity:0; transform:translate(-50%,-44%) scale(.9); filter:blur(8px); } to { opacity:1; transform:translate(-50%,-50%); filter:none; } }
@keyframes personaReactionFlare { to { transform:translateX(70%); } }

@media (max-width:767px) {
  .personareaction { width:calc(100 * var(--vwu) - 20px); min-height:144px; grid-template-columns:106px minmax(0,1fr); }
  .personareactionportrait,.personareactionportrait img { min-height:144px; }
  .personareactioncopy { padding:17px 14px 16px; }
  .personareactioncopy small { font-size:7px; letter-spacing:.18em; }
  .personareactioncopy b { margin:6px 0 7px; font-size:17px; }
  .personareactioncopy p { font-size:17px; line-height:1.14; }
  .personareactioncopy em { margin-top:9px; font-size:7px; letter-spacing:.08em; }
  .personareactionportrait span { left:6px; right:6px; bottom:6px; font-size:6px; letter-spacing:.12em; }
}

@keyframes gamefxImpactRing { 0% { opacity:0; transform:scale(.18); } 22% { opacity:1; } 100% { opacity:0; transform:scale(1.75); } }
@keyframes gamefxImpactShard { 0% { opacity:0; scale:.25; } 25% { opacity:1; } 100% { opacity:0; scale:1.45; } }
@keyframes gamefxDamageNumber { 0% { opacity:0; transform:translate(-50%,18px) scale(.65); } 22% { opacity:1; transform:translate(-50%,-6px) scale(1.16); } 100% { opacity:0; transform:translate(-50%,-55px) scale(.92); } }
@keyframes gamefxDamageLine { 0% { opacity:0; clip-path:inset(0 100% 0 0); } 35% { opacity:1; clip-path:inset(0 0 0 0); } 100% { opacity:0; clip-path:inset(0 0 0 75%); } }
@keyframes gamefxCombatBurst { 0% { opacity:0; transform:scale(.15) rotate(-20deg); } 32% { opacity:1; transform:scale(1.2) rotate(5deg); } 100% { opacity:0; transform:scale(2.2) rotate(24deg); filter:blur(3px); } }
@keyframes gamefxCombatTrail { 0% { opacity:0; clip-path:inset(0 100% 0 0); scale:.86 1; } 30% { opacity:1; clip-path:inset(0 0 0 0); scale:1 1; } 100% { opacity:0; clip-path:inset(0 0 0 82%); scale:1.03 .42; } }
@keyframes gamefxCombatLunge { 0% { opacity:0; transform:translate(0,0) scale(.92); filter:brightness(1); } 18% { opacity:.92; } 48% { opacity:1; transform:translate(var(--combat-x),var(--combat-y)) scale(1.06); filter:brightness(1.55) saturate(1.3); } 100% { opacity:0; transform:translate(var(--combat-x),var(--combat-y)) scale(.98); filter:brightness(1.1); } }
@keyframes gamefxCombatSource { 0%,100% { filter:none; } 24%,55% { filter:brightness(1.45) saturate(1.4) drop-shadow(0 0 8px #ff6a42); } }
@keyframes gamefxCombatCamera { 0%,100% { transform:none; } 28% { transform:translate(-2px,1px); } 48% { transform:translate(2px,-1px); } 70% { transform:translate(-1px,0); } }
@keyframes gamefxTargetHit { 0%,100% { filter:none; } 25% { filter:brightness(2) saturate(1.5); transform:translateX(-4px) rotate(-1deg); } 48% { transform:translateX(5px) rotate(1deg); } 70% { transform:translateX(-2px); } }
@keyframes gamefxZoneFlight { 0% { opacity:1; transform:translate(0,0) rotate(0) scale(1); } 26% { transform:translate(calc(var(--fx-x) * .16),calc(var(--fx-y) * .08 - 42px)) rotate(-5deg) scale(1.08); } 100% { opacity:0; transform:translate(var(--fx-x),var(--fx-y)) rotate(13deg) scale(.22); filter:blur(4px) brightness(1.5); } }
@keyframes gamefxZoneBadge { 0% { opacity:0; transform:translate(-50%,-30%) scale(.7); } 25%,65% { opacity:1; transform:translate(-50%,-70%) scale(1); } 100% { opacity:0; transform:translate(-50%,-120%) scale(.9); } }
@keyframes gamefxWipeFrame { 0%,100% { opacity:0; } 12%,76% { opacity:1; } }
@keyframes gamefxWipeCloud { 0% { opacity:0; transform:rotate(-35deg) scale(.5); } 35% { opacity:1; } 100% { opacity:0; transform:rotate(105deg) scale(1.35); } }
@keyframes gamefxWipeRune { 0% { opacity:0; transform:translate(-50%,-50%) scale(2.8) rotate(-20deg); filter:blur(18px); } 28%,60% { opacity:.9; transform:translate(-50%,-50%) scale(1) rotate(0); filter:none; } 100% { opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(12deg); filter:blur(5px); } }
@keyframes gamefxWipeTitle { 0%,18% { opacity:0; transform:translate(-50%,20px); } 38%,74% { opacity:1; transform:translate(-50%,0); } 100% { opacity:0; transform:translate(-50%,-18px); } }
@keyframes gamefxWipeCard { 0% { opacity:1; transform:translate(0,0) rotate(0) scale(1); filter:none; } 30% { opacity:1; transform:translate(0,-10px) rotate(var(--wipe-spin)) scale(1.08); filter:brightness(1.8) saturate(.3); } 100% { opacity:0; transform:translate(0,120px) rotate(var(--wipe-spin)) scale(.08); filter:blur(8px) brightness(2); } }
@keyframes fxCounterFrame { 0%,100%{opacity:0} 12%,78%{opacity:1} }
@keyframes fxCounterCard { 0%{opacity:0;transform:scale(1.3) rotate(8deg);filter:blur(12px)} 25%,58%{opacity:.72;transform:scale(1) rotate(0)} 100%{opacity:0;transform:scale(.18) rotate(-16deg);filter:blur(8px) brightness(2)} }
@keyframes fxCounterRing { 0%{opacity:0;scale:.2;rotate:-30deg} 30%{opacity:1} 100%{opacity:0;scale:2;rotate:35deg} }
@keyframes fxCounterSeal { 0%{opacity:0;transform:translate(-50%,-50%) scale(2.5) rotate(-18deg);filter:blur(12px)} 28%,67%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);filter:none} 100%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(16deg)} }
@keyframes fxCounterCopy { 0%,20%{opacity:0;transform:translate(-50%,22px)} 38%,78%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0;transform:translate(-50%,-17px)} }
@keyframes fxKeywordBurst { 0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-6deg)} 24%,68%{opacity:1;transform:translate(-50%,-70%) scale(1) rotate(0)} 100%{opacity:0;transform:translate(-50%,-130%) scale(.9)} }
@keyframes fxKeywordRing { 0%{opacity:1;scale:.2} 100%{opacity:0;scale:2.2} }
@keyframes fxKeywordTarget { 0%,100%{filter:none} 35%{filter:brightness(1.9) saturate(1.5);box-shadow:0 0 25px var(--ds-accent-bright)} }
@keyframes fxMinusCounter { 0%{opacity:0;transform:translate(-50%,-130%) scale(.5)} 22%,65%{opacity:1;transform:translate(-50%,-70%) scale(1.08)} 100%{opacity:0;transform:translate(-50%,35%) scale(.85);filter:blur(2px)} }
@keyframes fxStrikeFrame { 0%,100%{opacity:0} 15%,72%{opacity:1} }
@keyframes fxStrikeSlash { 0%{opacity:0;clip-path:inset(0 100% 0 0)} 35%{opacity:1;clip-path:inset(0 0 0 0)} 100%{opacity:0;clip-path:inset(0 0 0 80%)} }
@keyframes fxProliferatePulse { 0%{opacity:0;transform:translate(-50%,-50%) scale(.35)} 30%,68%{opacity:1;transform:translate(-50%,-50%) scale(1.05)} 100%{opacity:0;transform:translate(-50%,-50%) scale(.7)} }
@keyframes fxProliferateRing { 0%{opacity:1;scale:.35} 100%{opacity:0;scale:2.5} }
@keyframes fxProliferateTitle { 0%,16%{opacity:0;transform:translate(-50%,-25%) scale(.8)} 34%,74%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-80%) scale(.92)} }

@media (max-width: 700px) {
  .votecampaignmodal { width:calc(100 * var(--vwu) - 16px); max-height:calc(100 * var(--dvhu) - 20px); padding:14px; }
  .votecampaignhero { grid-template-columns:58px minmax(0,1fr); gap:10px; }
  .votecampaignhero > img { width:58px; height:78px; }
  .votecampaignhero b { font-size:18px; }
  .votecampaignoptions { grid-template-columns:1fr; }
  .votecampaignoption { min-height:42px; }
  .gamefx-impact > span { left:-34px; top:-34px; width:68px; height:68px; }
  .gamefx-wipetitle { top:68%; width:90%; }
  .gamefx-counterspell > img { width:170px; }
  .counterspell-seal { width:88px; height:88px; }.counterspell-seal .gameicon { width:52px; height:52px; }
  .gamefx-strike { gap:10px; padding:16px; }.gamefx-strike > span { width:58px; height:58px; }.gamefx-strike > span .gameicon { width:36px; height:36px; }.gamefx-strike > div:not(.strike-slashes) { min-width:0; }.gamefx-strike b { font-size:25px; }
  .gamefx-keyword { min-width:190px; transform-origin:center; }
  .gamefx-proliferatetitle { max-width:calc(100 * var(--vwu) - 24px); }.gamefx-proliferatetitle b { font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
  .personareaction,.personareactionflare { animation:none !important; }
  .personareaction.leaving { filter:none; transition:opacity .15s linear; }
  .gamefx-damageline,.gamefx-combattrail,.gamefx-combatghost,.gamefx-cardghost,.gamefx-wipecard,.gamefx-wipecloud,.counterspell-rings,.strike-slashes { display:none !important; }
  .gamefx-impact > span,.gamefx-impact > i,.gamefx-impact > strong,.gamefx-impact > small,
  .gamefx-zonebadge,.gamefx-wipe,.gamefx-wiperune,.gamefx-wipetitle,.gamefx-counterspell,.counterspell-seal,.counterspell-copy,.gamefx-keyword,.gamefx-minuscounter,.gamefx-strike,.gamefx-proliferatepulse,.gamefx-proliferatetitle { animation-duration:.55s !important; animation-iteration-count:1 !important; }
  #game.fx-boardwipe { filter:none; }
  #game.fx-combat-camera,.fx-combat-source { animation:none !important; }
}

body.reduced-motion .personareaction,body.reduced-motion .personareactionflare { animation:none !important; }
body.reduced-motion .personareaction.leaving { filter:none; transition:opacity .15s linear; }

/* ============================================================
   DESKTOP ARENA CONCEPT — 4 SEATS / LOCAL MANA SYSTEM
   ============================================================ */
.msym.mana-glyph {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0 1px;
  vertical-align: -3px;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 5px rgba(0,0,0,.42);
}

span.msym.mana-glyph {
  color: #ede5d4;
  font: 700 9px/1 var(--tbl-cond);
  text-align: center;
  border: 1px solid rgba(238,226,199,.34);
  background: linear-gradient(145deg,#4a4a44,#20221f);
}

.mana-combo {
  grid-template-columns: 1fr 2px 1fr;
  overflow: hidden;
  color: var(--ds-accent-ink) !important;
  background: linear-gradient(135deg,var(--mana-left) 0 49%,var(--mana-right) 51% 100%) !important;
  text-shadow: 0 1px rgba(255,255,255,.35);
}

.mana-combo b { font: inherit; }
.mana-combo i { font: 700 7px/1 var(--tbl-cond); opacity: .72; }
.mana-generic { font-variant-numeric: tabular-nums; }

@media (min-width: 1280px) {
  #game {
    --arena-bg: #070906;
    --arena-panel: rgba(13,16,12,.92);
    --arena-panel-hi: rgba(20,23,17,.94);
    --arena-line: rgba(205,184,135,.13);
    --arena-line-hi: rgba(211,151,76,.44);
    --arena-ink: #eee8da;
    --arena-muted: #938f84;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    height: calc(100 * var(--dvhu));
    min-height: 620px;
    margin: 0;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: 62px 28px minmax(205px, .9fr) auto minmax(238px, 1.05fr) auto 164px;
    grid-template-areas:
      "topbar topbar"
      "ticker side"
      "opps side"
      "center side"
      "mine side"
      "prompt side"
      "hand hand";
    column-gap: 14px;
    padding: 0 14px 0 0;
    color: var(--arena-ink);
    background:
      radial-gradient(ellipse 82% 58% at 43% 52%, rgba(49,59,35,.22), transparent 66%),
      radial-gradient(ellipse 62% 36% at 43% 44%, rgba(165,110,52,.075), transparent 72%),
      linear-gradient(115deg,#090b08,#050705 62%,#090a07);
  }

  #game::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 18px;
    right: 354px;
    top: 96px;
    bottom: 158px;
    pointer-events: none;
    border: 1px solid rgba(205,184,135,.07);
    border-radius: 45% 45% 12% 12% / 20% 20% 8% 8%;
    background:
      repeating-radial-gradient(ellipse at 50% 52%, transparent 0 62px, rgba(219,196,143,.018) 63px 64px),
      linear-gradient(90deg,transparent 49.9%,rgba(219,196,143,.035) 50%,transparent 50.1%);
    box-shadow: inset 0 0 110px rgba(0,0,0,.6), 0 0 90px rgba(95,112,64,.055);
  }

  #game::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(rgba(255,255,255,.011) 1px, transparent 1px),
      radial-gradient(circle at 42% 48%, transparent 42%, rgba(0,0,0,.52) 100%);
    background-size: 100% 4px, 100% 100%;
    opacity: .7;
    mix-blend-mode: screen, normal;
  }

  #game > * { position: relative; z-index: 1; }
  #game > .overlay,
  #game > .actionstagewrap,
  #game > .stackpopwrap,
  #game > .turnbanner,
  #game > .logpanel { position: fixed; }

  #game .topbar {
    grid-area: topbar;
    min-width: 0;
    padding: 10px 16px 8px 20px;
    background:
      linear-gradient(90deg,rgba(211,151,76,.08),transparent 24%),
      rgba(6,8,6,.95);
    border-bottom: 1px solid var(--arena-line);
    box-shadow: 0 10px 34px rgba(0,0,0,.22);
  }

  #game .phasewrap { flex-direction: row; align-items: center; gap: 18px; }
  #game .phase {
    min-width: 146px;
    color: var(--arena-muted);
    font: 500 12px/1.1 var(--tbl-cond);
    letter-spacing: .06em;
  }

  #game .phase b {
    display: block;
    margin-bottom: 4px;
    color: var(--arena-ink);
    font: 400 20px/1 var(--ds-font-display);
    letter-spacing: -.02em;
  }

  #game .stepper { gap: 4px; }
  #game .stepper .step {
    min-width: 35px;
    padding: 7px 8px;
    text-align: center;
    color: var(--ds-muted);
    background: rgba(255,255,255,.016);
    border: 1px solid rgba(205,184,135,.08);
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
  }

  #game .stepper .step.on {
    color: var(--ds-accent-ink);
    background: linear-gradient(180deg,var(--ds-accent-bright),#bd7f38);
    border-color: var(--ds-accent-bright);
    transform: translateY(-1px);
    box-shadow: 0 0 24px rgba(211,151,76,.25);
  }

  #game .topbtns { align-items: center; gap: 5px; }
  #game .monarchstatus {
    margin-right: 10px;
    padding: 6px 10px;
    border-color: rgba(240,189,118,.62);
    border-radius: 2px;
    background: linear-gradient(115deg,rgba(70,48,13,.9),rgba(13,16,12,.94));
    box-shadow: 0 0 0 1px rgba(240,189,118,.08),0 0 30px rgba(211,151,76,.14);
  }
  #game .monarchstatus > span { font-size: 29px; }
  #game .monarchstatus small { color: #d9a856; font: 800 8px/1 var(--tbl-cond); }
  #game .monarchstatus b { color: #fff0c9; font: 700 12px/1 var(--tbl-cond); }
  #game .monarchstatus em { color: #93805b; font: 600 8px/1 var(--tbl-cond); }
  #game .tbtn {
    min-height: 34px;
    padding: 7px 10px;
    color: #a9a497;
    background: rgba(255,255,255,.018);
    border: 1px solid var(--arena-line);
    border-radius: 2px;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
  }

  #game .tbtn:hover {
    color: #f1e9d8;
    border-color: var(--arena-line-hi);
    background: rgba(211,151,76,.07);
    transform: translateY(-1px);
  }

  #game .tbtn:active { transform: translateY(1px); }
  #game .tbtn:focus-visible { outline: 2px solid var(--ds-accent-bright); outline-offset: 2px; }

  #game .ticker {
    grid-area: ticker;
    display: flex;
    align-items: center;
    padding: 0 18px;
    color: var(--ds-muted);
    background: rgba(6,8,6,.55);
    border-bottom: 1px solid rgba(205,184,135,.06);
    font-size: 11px;
    letter-spacing: .025em;
  }

  #game .oppsouter {
    grid-area: opps;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 0 0 12px;
  }

  #game .oppswrap,
  #game .oppswrap.active-ai-turn {
    grid-area: unset;
    min-height: 0;
    max-height: none;
    flex: 1;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 10px;
    padding: 0;
    overflow: visible;
    align-items: stretch;
    perspective: 1200px;
  }

  #game .oppswrap.active-ai-turn:has(.seat-1.activeai) { grid-template-columns: 1.28fr 1fr 1fr; }
  #game .oppswrap.active-ai-turn:has(.seat-2.activeai) { grid-template-columns: 1fr 1.28fr 1fr; }
  #game .oppswrap.active-ai-turn:has(.seat-3.activeai) { grid-template-columns: 1fr 1fr 1.28fr; }

  #game .opprow,
  #game .oppswrap.active-ai-turn .opprow {
    width: auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--arena-line);
    border-radius: 2px;
    background:
      radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--seat-accent) 13%,transparent), transparent 52%),
      linear-gradient(180deg,var(--arena-panel-hi),var(--arena-panel));
    box-shadow: 0 16px 38px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.02);
    transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, box-shadow .24s ease;
  }

  #game .opprow::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,transparent,var(--seat-accent),transparent);
    opacity: .55;
  }

  #game .opprow::after {
    content: 'SEAT ' attr(data-seat);
    position: absolute;
    right: 10px;
    bottom: 7px;
    color: rgba(226,215,190,.13);
    font: 700 8px/1 var(--tbl-cond);
    letter-spacing: .2em;
    pointer-events: none;
  }

  #game .opprow.active,
  #game .oppswrap.active-ai-turn .opprow.activeai {
    transform: translateY(3px);
    border-color: color-mix(in srgb,var(--seat-accent) 62%,var(--ds-accent));
    box-shadow: 0 0 0 1px color-mix(in srgb,var(--seat-accent) 16%,transparent), 0 16px 42px rgba(0,0,0,.38), 0 0 30px color-mix(in srgb,var(--seat-accent) 10%,transparent);
    animation: activeSeatAura 2.8s ease-in-out infinite;
  }

  #game .opprow.monarch,
  #game .oppswrap.active-ai-turn .opprow.monarch {
    border-color: rgba(240,189,118,.82);
    box-shadow: 0 0 0 1px rgba(240,189,118,.16),0 16px 42px rgba(0,0,0,.38),0 0 34px rgba(211,151,76,.2);
  }

  #game .opprow.monarch::after {
    content: '♛  MONARCH';
    color: rgba(245,207,105,.68);
  }

  #game .opphead {
    min-height: 58px;
    display: grid;
    grid-template-columns: 10px 23px minmax(0,1fr) auto 29px;
    grid-template-areas:
      "chev seat name life info"
      "chev seat persona meta cmd";
    column-gap: 6px;
    row-gap: 3px;
    align-items: center;
    padding: 7px 8px;
    background: rgba(5,7,5,.54);
    border-bottom: 1px solid var(--arena-line);
  }

  #game .opphead .chev { grid-area: chev; color: var(--ds-muted); }
  #game .seatindex {
    grid-area: seat;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: none;
    color: var(--seat-accent);
    font: 700 9px/1 var(--tbl-cond);
    border: 1px solid color-mix(in srgb,var(--seat-accent) 42%,transparent);
    background: rgba(0,0,0,.22);
  }

  #game .oppname {
    grid-area: name;
    min-width: 0;
    color: var(--arena-ink);
    font-size: 12px;
    letter-spacing: .08em;
  }

  #game .personachip {
    grid-area: persona;
    overflow: hidden;
    width: max-content;
    max-width: 112px;
    padding: 2px 5px;
    text-overflow: ellipsis;
    border-radius: 2px;
    background: rgba(255,255,255,.025);
  }

  #game .opplife {
    grid-area: life;
    justify-self: end;
    color: #f1e9da;
    font: 700 21px/1 var(--tbl-cond);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 16px color-mix(in srgb,var(--seat-accent) 28%,transparent);
  }

  #game .oppmeta { grid-area: meta; justify-self: end; color: var(--ds-muted); font-size: 9px; }
  #game .oppcmd { grid-area: cmd; justify-self: end; margin: 0; color: #a99a72; font-size: 8px; }
  #game .opphead .tbtn.small { grid-area: info; width: 29px; min-height: 27px; padding: 3px; }
  #game .activeaitag {
    position: absolute;
    left: 10px;
    top: 57px;
    z-index: 4;
    padding: 4px 7px;
    color: var(--ds-accent-ink);
    background: linear-gradient(180deg,var(--ds-accent-bright),#bd7f38);
    box-shadow: 0 5px 16px rgba(0,0,0,.36);
  }

  #game .oppstrip {
    position: relative;
    flex: 1;
    min-height: 0;
    max-height: none;
    align-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    padding: 22px 8px 14px;
    overflow: auto;
    background:
      linear-gradient(90deg,transparent,rgba(205,184,135,.025),transparent),
      radial-gradient(circle at 50% 110%,rgba(86,100,62,.08),transparent 62%);
  }

  #game .oppstrip::before { left: 8px; top: 8px; }
  #game .emptystrip,
  #game .emptyrow {
    color: var(--ds-muted);
    font: 500 9px/1.4 var(--tbl-cond);
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  #game .oppsizebar { height: 22px; padding: 2px 1px 0; }
  #game .oppresize { height: 8px; margin: 0; }

  #game .center {
    grid-area: center;
    min-width: 0;
    padding: 4px 0 3px 12px;
  }

  #game .myboard {
    grid-area: mine;
    min-width: 0;
    min-height: 0;
    position: relative;
    justify-content: flex-end;
    padding: 30px 12px 8px 20px !important;
    overflow: hidden;
    border-top: 1px solid rgba(211,151,76,.13);
    border-bottom: 1px solid rgba(211,151,76,.08);
    background:
      radial-gradient(ellipse 75% 120% at 50% 110%,rgba(123,139,78,.12),transparent 65%),
      linear-gradient(180deg,rgba(5,7,5,.08),rgba(12,15,10,.62));
    box-shadow: inset 0 -30px 80px rgba(0,0,0,.26);
  }

  #game .myboard::before {
    content: 'SEAT 04  ·  YOUR BATTLEFIELD';
    top: 10px;
    left: 20px;
    color: rgba(240,189,118,.58);
    font-size: 9px;
    letter-spacing: .24em;
  }

  #game .myboard::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -34px;
    height: 80px;
    pointer-events: none;
    background: radial-gradient(ellipse,rgba(211,151,76,.15),transparent 68%);
    filter: blur(12px);
  }

  #game .cardrow,
  #game .landrow,
  #game .czrow { position: relative; z-index: 1; }

  #game .cardrow {
    min-height: 118px;
    gap: 8px;
    padding: 7px 0 5px;
  }

  #game .landrow {
    min-height: 51px;
    gap: 6px;
    padding: 5px 0;
    border-top: 1px solid rgba(205,184,135,.055);
  }

  #game .landstack {
    min-width: 82px;
    padding: 6px 8px;
    border: 1px solid rgba(205,184,135,.12);
    border-radius: 2px;
    background: rgba(7,9,7,.72);
    transition: border-color .18s ease, transform .18s ease;
  }

  #game .landstack:hover { transform: translateY(-2px); border-color: rgba(211,151,76,.4); }

  #game .meinfo {
    min-height: 44px;
    margin-left: auto;
    padding: 5px 8px 5px 5px;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(211,151,76,.2);
    border-top-color: rgba(211,151,76,.44);
    background: rgba(7,9,7,.88);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
  }

  #game .seatyou {
    width: 32px;
    height: 32px;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--ds-accent);
    border: 1px solid rgba(211,151,76,.42);
  }

  #game .seatyou span { font: 700 10px/1 var(--tbl-cond); }
  #game .seatyou small { margin-top: 2px; color: var(--ds-muted); font: 700 6px/1 var(--tbl-cond); letter-spacing: .12em; }
  #game .melife { display: grid; grid-template-columns: auto auto; align-items: end; gap: 3px; font-size: 29px; }
  #game .melife small { padding-bottom: 3px; color: var(--ds-muted); font: 600 7px/1 var(--tbl-cond); letter-spacing: .1em; text-transform: uppercase; }
  #game .manapool { display: flex; gap: 3px; min-width: 0; }
  #game .manapool:empty { display: none; }
  #game .manapoolchip { position: relative; display: inline-grid; place-items: center; }
  #game .manapoolchip .poolglyph { width: 20px; height: 20px; margin: 0; }
  #game .manapoolchip > b {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 13px;
    height: 13px;
    display: grid;
    place-items: center;
    color: var(--ds-accent-ink);
    background: var(--ds-accent-bright);
    border-radius: 50%;
    font: 800 8px/1 var(--tbl-cond);
  }

  #game .zbtn { min-height: 30px; padding: 4px 7px; }

  #game .czrow { gap: 8px; padding-top: 4px; }
  #game .czcard {
    flex: 0 1 330px;
    min-height: 56px;
    border-radius: 2px;
    background: linear-gradient(100deg,rgba(211,151,76,.13),rgba(8,10,7,.82) 68%);
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
  }

  #game .mini,
  #game .hcard {
    border-radius: 4px;
    box-shadow: 0 9px 20px rgba(0,0,0,.36);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), filter .2s ease, box-shadow .2s ease;
  }

  #game .mini:hover,
  #game .hcard:hover {
    z-index: 8;
    transform: translateY(-7px) scale(1.035);
    filter: brightness(1.08) saturate(1.05);
    box-shadow: 0 18px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(240,189,118,.22);
  }

  #game .mini.tapped:hover { transform: rotate(8deg) translateY(-4px) scale(.98); }

  #game .hcard.castable {
    border-color: #8eae74;
    box-shadow: 0 0 0 1px rgba(142,174,116,.25), 0 10px 25px rgba(0,0,0,.42), 0 0 18px rgba(142,174,116,.12);
    animation: castableBreathe 2.6s ease-in-out infinite;
  }

  #game .handwrap {
    grid-area: hand;
    position: relative;
    padding: 11px 16px 7px;
    border-top: 1px solid rgba(211,151,76,.28);
    background:
      linear-gradient(180deg,rgba(211,151,76,.05),transparent 18%),
      linear-gradient(180deg,#090b08,#050705);
    box-shadow: 0 -18px 45px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.02);
  }

  #game .handwrap::before {
    content: 'HAND';
    position: absolute;
    left: 18px;
    top: 10px;
    color: var(--ds-muted);
    font: 700 8px/1 var(--tbl-cond);
    letter-spacing: .24em;
  }

  #game .hand { min-height: 144px; padding: 0 54px 0; gap: 9px; align-items: flex-end; }
  #game .hcard { width: 98px; height: 136px; }
  #game .hcard .hcost { padding: 2px; background: rgba(3,4,3,.74); border-radius: 0 0 0 4px; }
  #game .hcard .hcost .mana-glyph { width: 14px; height: 14px; }

  #game .promptbar {
    grid-area: prompt;
    margin-left: 12px;
    padding: 6px 9px;
    border-radius: 2px 2px 0 0;
    background: rgba(13,16,12,.93);
    border-color: rgba(211,151,76,.2);
    box-shadow: 0 -10px 24px rgba(0,0,0,.24);
  }

  #game .sidebar {
    grid-area: side;
    min-width: 0;
    min-height: 0;
    gap: 8px;
    padding: 9px 0 9px 0;
    overflow: hidden;
    border-left: 1px solid rgba(205,184,135,.08);
    background: linear-gradient(90deg,rgba(255,255,255,.012),transparent 24%);
  }

  #game .stackpanel,
  #game .cmddmgpanel,
  #game .threatpanel,
  #game .sidelog {
    border-color: var(--arena-line);
    border-radius: 2px;
    background: linear-gradient(180deg,rgba(18,21,16,.92),rgba(9,12,9,.94));
    box-shadow: inset 0 1px rgba(255,255,255,.018);
  }

  #game .stackpanel,
  #game .cmddmgpanel { padding: 9px 11px; }
  #game .sidetitle { color: #9c9586; font-size: 9px; letter-spacing: .21em; }
  #game .sidecount { color: var(--ds-accent); }
  #game .stackempty { min-height: 48px; padding: 8px 0; }
  #game .stackempty span { animation: stackRune 3.2s ease-in-out infinite; }

  #game.nosidebar {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "topbar" "ticker" "opps" "center" "mine" "prompt" "hand";
    padding-right: 0;
  }

  #game.nosidebar::before { right: 18px; }

  .effectnoticestack {
    right: 360px;
    bottom: 178px;
    width: min(410px,31 * var(--vwu));
    gap: 7px;
  }

  .effectnotice {
    position: relative;
    overflow: hidden;
    padding: 12px 14px 12px 42px;
    color: #ede6d7;
    background: linear-gradient(100deg,rgba(28,34,23,.97),rgba(12,15,11,.97));
    border: 1px solid rgba(150,174,112,.42);
    border-left: 2px solid var(--ds-accent);
    border-radius: 2px;
    box-shadow: 0 18px 44px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.035);
    animation: arenaNoticeIn .34s cubic-bezier(.16,.8,.2,1);
  }

  .effectnotice::before {
    content: '✦';
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-accent-bright);
    font-size: 17px;
    filter: drop-shadow(0 0 8px rgba(240,189,118,.5));
  }

  .effectnotice::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    transform-origin: left;
    background: linear-gradient(90deg,var(--ds-accent),#8eae74);
    animation: noticeLife 3.8s linear forwards;
  }

  #game.combat-phase::before {
    border-color: rgba(191,87,62,.16);
    box-shadow: inset 0 0 120px rgba(112,31,23,.18),0 0 100px rgba(191,87,62,.07);
    animation: combatTablePulse 2.2s ease-in-out infinite;
  }

  #game.combat-phase .stepper .step.on {
    color: #fff1e3;
    background: linear-gradient(180deg,#c96e54,#843d30);
    border-color: #e69477;
    box-shadow: 0 0 28px rgba(201,110,84,.34);
  }

  #game .overlay.dark,
  #game .overlay:has(.modal) { backdrop-filter: blur(8px) saturate(.7); }

  #game .modal,
  #game .sheet {
    border: 1px solid rgba(211,151,76,.22);
    background: linear-gradient(145deg,#171b18,#090b09 72%);
    box-shadow: 0 34px 100px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.035);
  }

  .effectnotice.counter { border-left: 2px solid #c46f58; }
  .effectnotice.spellCopy,
  .effectnotice.abilityCopy { border-left: 2px solid #6f9ab0; }
  .effectnotice.leaving { transform: translateX(34px) scale(.98); filter: blur(2px); }

  .turnbanner {
    top: 45%;
    overflow: hidden;
    padding: 14px 28px;
    color: #e9e1d1;
    background: linear-gradient(100deg,rgba(17,21,15,.97),rgba(7,9,7,.98));
    border: 1px solid rgba(143,169,107,.44);
    border-radius: 2px;
    box-shadow: 0 22px 65px rgba(0,0,0,.68), inset 0 1px rgba(255,255,255,.04);
    font: 600 18px/1 var(--tbl-cond);
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .turnbanner.gold {
    color: #f3d9a9;
    border-color: rgba(211,151,76,.72);
    box-shadow: 0 22px 65px rgba(0,0,0,.68),0 0 38px rgba(211,151,76,.15),inset 0 1px rgba(255,255,255,.05);
  }

  .turnbanner::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(105deg,transparent 38%,rgba(255,239,197,.18),transparent 62%);
    animation: bannerSweep 1.2s .08s ease-out both;
  }

  .monarchannouncement {
    top: 32%;
    border-radius: 2px;
    background: linear-gradient(105deg,rgba(73,50,12,.97),rgba(10,13,10,.98) 70%);
    box-shadow: 0 28px 80px rgba(0,0,0,.72),0 0 55px rgba(211,151,76,.24),inset 0 1px rgba(255,255,255,.05);
  }

  .monarchannouncementcopy b { font: 700 22px/1.1 var(--tbl-cond); }
  .monarchannouncementcopy small,
  .monarchannouncementcopy em { font-family: var(--tbl-cond); }

  .toastmsg {
    bottom: 178px;
    padding: 10px 15px;
    color: #dcd5c6;
    background: rgba(12,15,11,.96);
    border: 1px solid rgba(211,151,76,.28);
    border-radius: 2px;
    box-shadow: 0 16px 42px rgba(0,0,0,.48);
    font-size: 11px;
  }
}

@media (min-width: 1500px) {
  #game { grid-template-columns: minmax(0,1fr) 360px; }
  #game::before { right: 374px; }
  .effectnoticestack { right: 380px; }
  #game .mini { width: 92px; height: 124px; }
  #game .permanentpile { width: 92px; }
  #game .mini.sm { width: calc(76px * var(--opp-scale,1)); height: calc(103px * var(--opp-scale,1)); }
  #game .permanentpile.sm { width: calc(76px * var(--opp-scale,1)); }
  #game .hcard { width: 104px; height: 144px; }
}

@media (min-width: 1280px) and (max-height: 799px) {
  #game {
    grid-template-rows: 56px 24px minmax(152px,.72fr) auto minmax(158px,1fr) auto 118px;
  }

  #game::before { top: 82px; bottom: 112px; }
  #game .topbar { padding-block: 7px; }
  #game .phase b { font-size: 17px; }
  #game .phase { min-width: 164px; font-size: 10px; }
  #game .stepper .step { min-width: 32px; padding: 6px 7px; }
  #game .tbtn { min-height: 32px; padding: 5px 8px; }
  #game .oppsouter { padding-top: 6px; }
  #game .opphead { min-height: 52px; padding-block: 5px; }
  #game .activeaitag { top: 51px; }
  #game .oppstrip { padding-top: 20px; }
  #game .oppsizebar { height: 18px; }
  #game .oppresize { height: 5px; }
  #game .myboard { padding: 25px 10px 5px 18px !important; }
  #game .myboard::before { top: 7px; left: 18px; }
  #game .cardrow { min-height: 84px; padding-block: 3px; }
  #game .myboard .cardrow > .emptyrow {
    align-self: flex-start;
    padding: 23px 0 0;
  }
  #game .landrow { min-height: 42px; padding-block: 3px; }
  #game .mini { width: 68px; height: 91px; }
  #game .permanentpile { width: 68px; }
  #game .mini.sm { width: calc(52px * var(--opp-scale,1)); height: calc(70px * var(--opp-scale,1)); }
  #game .permanentpile.sm { width: calc(52px * var(--opp-scale,1)); }
  #game .czrow { padding-top: 2px; }
  #game .czcard { min-height: 46px; }
  #game .czcard > img { width: 34px; height: 46px; }
  #game .czname { font-size: 12px; }
  #game .meinfo { min-height: 38px; }
  #game .melife { font-size: 25px; }
  #game .promptbar { padding: 5px 8px; }
  #game .pbtn { padding-block: 8px; }
  #game .handwrap { padding: 7px 12px 4px; }
  #game .handwrap::before { top: 7px; }
  #game .hand { min-height: 106px; padding-inline: 42px; gap: 7px; }
  #game .hcard { width: 75px; height: 104px; }
  #game .hcard .mname { font-size: 8px; }
  .effectnoticestack { bottom: 130px; }
  .toastmsg { bottom: 130px; }
}

@keyframes activeSeatAura {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes castableBreathe {
  0%,100% { box-shadow: 0 0 0 1px rgba(142,174,116,.2),0 10px 25px rgba(0,0,0,.42),0 0 12px rgba(142,174,116,.08); }
  50% { box-shadow: 0 0 0 1px rgba(142,174,116,.42),0 12px 30px rgba(0,0,0,.46),0 0 25px rgba(142,174,116,.2); }
}

@keyframes stackRune {
  0%,100% { opacity:.28; transform: rotate(0deg) scale(.92); }
  50% { opacity:.86; transform: rotate(45deg) scale(1.06); }
}

@keyframes arenaNoticeIn {
  from { opacity:0; transform:translateX(36px) scale(.97); }
  to { opacity:1; transform:none; }
}

@keyframes noticeLife { from { transform:scaleX(1); } to { transform:scaleX(0); } }

@keyframes combatTablePulse {
  0%,100% { opacity:.76; }
  50% { opacity:1; }
}

@keyframes bannerSweep {
  to { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  #game *, #game::before, #game::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .battlefieldarrival { animation-duration: .01ms !important; }
}

/* ============================================================
   COMMANDER CLIENT V2
   GPT Image background art + MTG Arena-inspired information flow.
   Panels use a 10px radius; controls use 8px; mana remains circular.
   ============================================================ */
@media (min-width: 1280px) {
  body {
    background: #080b0c;
    color: #f3eee2;
  }

  body:has(#setup) {
    --wr-bg: #080b0c;
    --wr-surface: rgba(var(--ds-panel-rgb), .82);
    --wr-surface-hi: rgba(22, 27, 27, .94);
    --wr-line: rgba(var(--ds-accent-soft-rgb), .18);
    --wr-line-hi: rgba(var(--ds-accent-rgb), .74);
    --wr-copper: #d79b4f;
    --wr-copper-hi: #ffd18a;
    --wr-ink: #f7f2e8;
    --wr-muted: #bbb6aa;
    --wr-dim: #777b77;
    min-height: calc(100 * var(--dvhu));
    background:
      linear-gradient(90deg, rgba(5, 8, 10, .82) 0%, rgba(5, 8, 10, .58) 55%, rgba(5, 8, 10, .24) 100%),
      linear-gradient(180deg, rgba(4, 7, 8, .1), rgba(4, 7, 8, .78)),
      url('../assets/backgrounds/commander-war-room.jpg') center top / cover fixed no-repeat;
  }

  body:has(#setup)::before {
    opacity: 1;
    background:
      linear-gradient(90deg, rgba(3, 6, 7, .2), transparent 58%),
      radial-gradient(circle at 79% 34%, rgba(216, 153, 73, .13), transparent 24%),
      linear-gradient(180deg, transparent 58%, rgba(4, 7, 8, .7));
    background-size: 100% 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #setup {
    width: min(1800px, 100%);
    min-height: calc(100 * var(--dvhu));
    padding: 22px clamp(28px, 3.2 * var(--vwu), 64px) 80px;
  }

  #setup::before {
    inset: 0;
    height: auto;
    opacity: 1;
    background:
      linear-gradient(90deg, rgba(5, 8, 9, .45), transparent 64%),
      linear-gradient(180deg, rgba(4, 7, 8, .08), rgba(4, 7, 8, .62));
  }

  #setup .menuhead {
    grid-template-columns: 70px minmax(0, 1fr) 198px;
    min-height: 116px;
    margin-bottom: 26px;
    padding: 8px 0 24px;
    border-bottom-color: rgba(var(--ds-accent-soft-rgb), .22);
  }

  #setup .menumark {
    width: 58px;
    height: 58px;
    border-color: rgba(255, 203, 123, .68);
    background: radial-gradient(circle, rgba(225, 159, 72, .22), rgba(10, 13, 13, .86) 67%);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .4), inset 0 0 0 8px rgba(8, 11, 12, .84);
  }

  #setup .menu-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    color: #f0bd72;
  }

  #setup .menu-kicker span {
    padding-left: 10px;
    color: #8d918d;
    border-left: 1px solid rgba(var(--ds-accent-soft-rgb), .23);
  }

  #setup .title {
    max-width: 860px;
    color: #fffaf0;
    font-size: clamp(38px, 3.05 * var(--vwu), 54px);
    text-shadow: 0 3px 26px rgba(0, 0, 0, .38);
  }

  #setup .subtitle {
    max-width: 66ch;
    color: #c7c4ba;
    font-size: 13px;
    line-height: 1.45;
  }

  #setup .menupill {
    min-width: 198px;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 10px;
    border-color: rgba(241, 217, 173, .22);
    background: rgba(var(--ds-panel-rgb), .7);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 16px 40px rgba(0, 0, 0, .22);
    backdrop-filter: blur(14px) saturate(1.1);
  }

  #setup .menupillmark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 199, 111, .48);
    border-radius: 50%;
    background: radial-gradient(circle, #f2bd6b 0 15%, rgba(215, 155, 79, .16) 17% 100%);
    box-shadow: 0 0 18px rgba(var(--ds-accent-rgb), .18);
  }

  #setup .setupgrid {
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: clamp(26px, 2.6 * var(--vwu), 48px);
  }

  #setup .seclabel {
    min-height: 36px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    color: #f8f1e4;
    border-bottom-color: rgba(var(--ds-accent-soft-rgb), .2);
  }

  #setup .seclabel i {
    min-width: 54px;
    color: #e5aa58;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  #setup .decklist {
    gap: 12px;
  }

  #setup .deckcard {
    grid-template-columns: 144px minmax(0, 1fr);
    min-height: 184px;
    border-radius: 10px;
    border-color: rgba(235, 218, 182, .18);
    background:
      linear-gradient(105deg, rgba(20, 25, 25, .95), rgba(var(--ds-panel-rgb), .82)),
      rgba(var(--ds-panel-rgb), .86);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 16px 35px rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px) saturate(.9);
  }

  #setup .deckcard::after {
    top: 12px;
    right: 14px;
    color: rgba(238, 211, 164, .38);
  }

  #setup .deckcard:hover {
    transform: translateY(-4px);
    border-color: rgba(235, 176, 92, .56);
    background: linear-gradient(105deg, rgba(29, 35, 34, .97), rgba(var(--ds-panel-rgb), .94));
    box-shadow: 0 24px 54px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .05);
  }

  #setup .deckcard.selected {
    transform: translateY(-2px);
    border-color: #edb45f;
    background:
      linear-gradient(100deg, rgba(103, 75, 35, .32), rgba(15, 20, 20, .96) 54%),
      rgba(var(--ds-panel-rgb), .96);
    box-shadow: 0 0 0 2px rgba(237, 180, 95, .18), 0 26px 56px rgba(0, 0, 0, .4);
  }

  #setup .deckart {
    width: 144px;
    min-height: 184px;
    filter: saturate(.9) contrast(1.04) brightness(.93);
  }

  #setup .deckinfo {
    padding: 20px 30px 17px 17px;
  }

  #setup .deckname {
    color: #fff9ed;
    font-size: 19px;
  }

  #setup .deckcmd {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    margin: 7px 0 7px;
    color: #f1c57f;
    white-space: nowrap;
  }

  #setup .deckcmd span {
    color: #8e918c;
    font: 600 8px/1 var(--tbl-cond);
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  #setup .deckcolors {
    display: flex;
    align-items: center;
    min-height: 20px;
    gap: 3px;
    margin-bottom: 7px;
  }

  #setup .deckmana {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .28);
  }

  #setup .deckstyle {
    margin-left: 5px;
    color: #b1aea4;
  }

  #setup .deckblurb {
    color: #b8b5ac;
  }

  #setup .deckset {
    color: var(--ds-muted);
  }

  #setup .setupright {
    top: 16px;
    max-height: calc(100 * var(--dvhu) - 32px);
    padding: 0 22px 22px;
    border: 1px solid rgba(238, 219, 180, .22);
    border-top: 1px solid rgba(255, 201, 114, .68);
    border-radius: 10px;
    background:
      linear-gradient(145deg, rgba(213, 152, 74, .08), transparent 32%),
      rgba(var(--ds-panel-rgb), .9);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .035);
    backdrop-filter: blur(18px) saturate(1.04);
  }

  #setup .setupright > * {
    flex-shrink: 0;
  }

  #setup .controlintro {
    padding-top: 21px;
  }

  #setup .controlintro::after {
    display: none;
  }

  #setup .cmdbox,
  #setup .cmdchip,
  #setup .pbtn,
  #setup select,
  #setup textarea,
  #setup input {
    border-radius: 8px;
  }

  #setup .cmdbox {
    border-style: solid;
    border-color: rgba(var(--ds-accent-soft-rgb), .16);
    background: rgba(255, 255, 255, .018);
  }

  #setup .pbtn {
    border-color: rgba(var(--ds-accent-soft-rgb), .2);
    background: rgba(255, 255, 255, .035);
  }

  #setup .pbtn.selected {
    color: #ffd08a;
    border-color: #dca154;
    background: rgba(220, 161, 84, .14);
    box-shadow: inset 0 -2px #dfa455;
  }

  #setup .pbtn.start {
    min-height: 56px;
    color: var(--ds-accent-ink);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffd692, #d99642);
    border-color: #ffdda2;
    box-shadow: 0 14px 34px rgba(var(--ds-accent-rgb), .22), inset 0 1px rgba(255, 255, 255, .48);
  }

  #setup .pbtn.start:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffe1aa, #e6a451);
    box-shadow: 0 18px 44px rgba(var(--ds-accent-rgb), .31), inset 0 1px rgba(255, 255, 255, .52);
  }

  #game {
    --arena-bg: var(--ds-table);
    --arena-panel: rgba(var(--ds-panel-rgb), .8);
    --arena-panel-hi: rgba(var(--ds-panel-raised-rgb), .86);
    --arena-line: rgba(var(--ds-accent-soft-rgb), .18);
    --arena-line-hi: rgba(226, 167, 86, .68);
    --arena-ink: #f5efe4;
    --arena-muted: #a8aaa3;
    grid-template-columns: minmax(0, 1fr) 332px;
    grid-template-rows: 64px 28px minmax(202px, .84fr) auto minmax(238px, 1.1fr) auto 164px;
    column-gap: 12px;
    padding-right: 12px;
    background:
      linear-gradient(90deg, rgba(4, 7, 8, .12) 0%, rgba(4, 7, 8, .02) 72%, rgba(4, 7, 8, .52) 100%),
      linear-gradient(180deg, rgba(2, 5, 6, .46), rgba(2, 5, 6, .04) 28%, rgba(2, 5, 6, .08) 68%, rgba(2, 5, 6, .72)),
      url('../assets/backgrounds/commander-arena-table.jpg') center / cover no-repeat,
      var(--ds-table);
  }

  #game::before {
    left: 12px;
    right: 344px;
    top: 92px;
    bottom: 156px;
    border: 0;
    border-radius: 18px;
    background:
      radial-gradient(circle at 50% 48%, rgba(212, 160, 87, .045), transparent 24%),
      linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(0, 0, 0, .05));
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .2);
  }

  #game::after {
    opacity: 1;
    mix-blend-mode: normal;
    background:
      radial-gradient(ellipse at 44% 48%, transparent 48%, rgba(0, 0, 0, .4) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, .16), transparent 18%, transparent 76%, rgba(0, 0, 0, .42));
    background-size: 100% 100%;
  }

  #game .topbar {
    padding: 9px 14px 8px 18px;
    border-bottom-color: rgba(var(--ds-accent-soft-rgb), .19);
    background:
      linear-gradient(90deg, rgba(var(--ds-accent-rgb), .11), transparent 24%),
      rgba(var(--ds-table-rgb), .9);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 -1px rgba(255, 255, 255, .02);
    backdrop-filter: blur(16px) saturate(1.08);
  }

  #game .phase b {
    color: #fff7e9;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .48);
  }

  #game .stepper .step,
  #game .tbtn {
    border-radius: 8px;
    border-color: rgba(var(--ds-accent-soft-rgb), .15);
    background: rgba(255, 255, 255, .025);
  }

  #game .stepper .step.on {
    color: var(--ds-accent-ink);
    border-color: var(--ds-accent-bright);
    background: linear-gradient(180deg, var(--ds-accent-bright), var(--ds-accent));
    box-shadow: 0 8px 22px rgba(var(--ds-accent-rgb), .24), inset 0 1px rgba(255, 255, 255, .5);
  }

  #game .ticker {
    color: #9b9d98;
    border-bottom-color: rgba(var(--ds-accent-soft-rgb), .09);
    background: rgba(5, 9, 10, .72);
    backdrop-filter: blur(12px);
  }

  #game .oppsouter {
    padding: 9px 0 0 12px;
  }

  #game .oppswrap,
  #game .oppswrap.active-ai-turn {
    gap: 9px;
  }

  #game .opprow,
  #game .oppswrap.active-ai-turn .opprow {
    border-radius: 10px;
    border-color: rgba(var(--ds-accent-soft-rgb), .2);
    background:
      radial-gradient(circle at 50% -18%, color-mix(in srgb, var(--seat-accent) 16%, transparent), transparent 56%),
      linear-gradient(180deg, rgba(var(--ds-panel-raised-rgb), .88), rgba(8, 13, 14, .76));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .035);
    backdrop-filter: blur(10px) saturate(.92);
  }

  #game .opprow.active,
  #game .oppswrap.active-ai-turn .opprow.activeai {
    border-color: color-mix(in srgb, var(--seat-accent) 64%, #e7b76f);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--seat-accent) 17%, transparent), 0 20px 44px rgba(0, 0, 0, .42);
  }

  #game .opprow.monarch,
  #game .oppswrap.active-ai-turn .opprow.monarch {
    border-color: rgba(var(--ds-accent-bright-rgb), .88);
    box-shadow: 0 0 0 2px rgba(236, 178, 75, .18), 0 20px 44px rgba(0, 0, 0, .42), 0 0 36px rgba(var(--ds-accent-rgb), .22);
  }

  #game .opphead {
    border-bottom-color: rgba(var(--ds-accent-soft-rgb), .14);
    background: rgba(var(--ds-table-rgb), .58);
  }

  #game .seatindex,
  #game .opphead .tbtn.small {
    border-radius: 7px;
  }

  #game .opplife {
    color: #fff8ec;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .48);
  }

  #game .oppstrip {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(4, 8, 8, .12)),
      radial-gradient(circle at 50% 110%, rgba(109, 125, 76, .1), transparent 66%);
  }

  #game .oppsizebar {
    opacity: .48;
    transition: opacity .18s ease;
  }

  #game .oppsouter:hover .oppsizebar { opacity: 1; }

  #game .myboard {
    margin-left: 12px;
    padding: 30px 12px 8px 18px !important;
    border: 1px solid rgba(var(--ds-accent-soft-rgb), .15);
    border-radius: 10px;
    background:
      radial-gradient(ellipse 70% 115% at 50% 112%, rgba(176, 132, 68, .12), transparent 66%),
      linear-gradient(180deg, rgba(8, 13, 13, .16), rgba(5, 9, 10, .38));
    box-shadow: inset 0 -40px 80px rgba(0, 0, 0, .2), 0 18px 40px rgba(0, 0, 0, .18);
    backdrop-filter: blur(2px);
  }

  #game .myboard::before {
    content: 'YOUR BATTLEFIELD';
    color: rgba(255, 205, 129, .78);
  }

  #game .meinfo,
  #game .landstack,
  #game .czcard {
    border-radius: 8px;
    border-color: rgba(var(--ds-accent-soft-rgb), .2);
    background: rgba(var(--ds-table-rgb), .82);
    backdrop-filter: blur(10px);
  }

  #game .meinfo.monarch {
    border-color: rgba(var(--ds-accent-bright-rgb), .82);
    background: linear-gradient(105deg,rgba(70,48,13,.82),rgba(6,10,11,.88) 70%);
    box-shadow: 0 0 0 2px rgba(236,178,75,.13),0 0 30px rgba(211,151,76,.2);
  }

  #game .memonarch {
    border-color: rgba(255,205,105,.7);
    border-radius: 7px;
    background: rgba(75,51,13,.72);
  }

  #game .czcard {
    background: linear-gradient(100deg, rgba(188, 132, 60, .19), rgba(var(--ds-table-rgb), .86) 68%);
  }

  #game .mini,
  #game .hcard {
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .44);
  }

  #game .hcard.castable {
    border-color: #b8d99d;
    box-shadow: 0 0 0 2px rgba(184, 217, 157, .32), 0 14px 28px rgba(0, 0, 0, .44);
  }

  #game .promptbar {
    margin-left: 12px;
    padding: 7px 9px;
    border-radius: 10px 10px 0 0;
    border-color: rgba(231, 173, 88, .3);
    background: rgba(var(--ds-panel-rgb), .9);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .025);
    backdrop-filter: blur(14px);
  }

  #game .promptbar .pbtn,
  #game .modal .pbtn,
  #game .sheet .pbtn {
    border-radius: 8px;
  }

  #game .handwrap {
    border-top-color: rgba(234, 177, 94, .32);
    background:
      linear-gradient(180deg, rgba(217, 154, 72, .07), transparent 24%),
      rgba(var(--ds-table-rgb), .88);
    box-shadow: 0 -18px 46px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .025);
    backdrop-filter: blur(15px) saturate(.9);
  }

  #game .sidebar {
    padding: 9px 0;
    border-left-color: rgba(var(--ds-accent-soft-rgb), .13);
    background: rgba(5, 9, 10, .66);
    backdrop-filter: blur(16px) saturate(.9);
  }

  #game .stackpanel,
  #game .cmddmgpanel,
  #game .threatpanel,
  #game .sidelog {
    border-radius: 10px;
    border-color: rgba(var(--ds-accent-soft-rgb), .17);
    background: linear-gradient(180deg, rgba(var(--ds-panel-raised-rgb), .88), rgba(7, 12, 13, .86));
    box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 28px rgba(0, 0, 0, .16);
  }

  #game .modal,
  #game .sheet,
  #game .actionstage,
  #game .stackpop {
    border-radius: 12px;
    border-color: rgba(235, 179, 98, .34);
    background: linear-gradient(145deg, rgba(25, 31, 30, .98), rgba(var(--ds-table-rgb), .98) 72%);
    box-shadow: 0 38px 110px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 255, 255, .045);
  }

  #game.combat-phase::before {
    border: 1px solid rgba(215, 107, 78, .34);
    box-shadow: inset 0 0 110px rgba(119, 34, 24, .15), 0 0 70px rgba(196, 77, 54, .07);
  }

  .effectnotice,
  .turnbanner,
  .toastmsg {
    border-radius: 10px;
  }

  #game.nosidebar::before { right: 14px; }
}

@media (min-width: 1500px) {
  #game { grid-template-columns: minmax(0, 1fr) 350px; }
  #game::before { right: 362px; }
}

@media (min-width: 1280px) and (max-width: 1479px) {
  #setup .setupgrid {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 22px;
  }

  #setup .deckcard {
    grid-template-columns: 122px minmax(0, 1fr);
    min-height: 176px;
  }

  #setup .deckart {
    width: 122px;
    min-height: 176px;
  }

  #setup .deckinfo { padding: 17px 26px 15px 14px; }
  #setup .deckname { font-size: 17px; }
  #setup .deckcmd { font-size: 10.5px; }
}

@media (min-width: 1280px) and (max-height: 799px) {
  #game {
    grid-template-rows: 56px 24px minmax(150px, .72fr) auto minmax(158px, 1fr) auto 118px;
  }

  #game::before { top: 80px; bottom: 112px; }
  #game .myboard { padding-top: 25px !important; }
}

@media (prefers-reduced-transparency: reduce) and (min-width: 1280px) {
  #setup .deckcard,
  #setup .setupright,
  #setup .menupill,
  #game .topbar,
  #game .opprow,
  #game .myboard,
  #game .handwrap,
  #game .sidebar {
    backdrop-filter: none;
  }

  #setup .deckcard,
  #setup .setupright { background-color: var(--ds-panel); }
  #game .opprow,
  #game .handwrap,
  #game .sidebar { background-color: #081011; }
}

/* Public poison counters are separate from life; ten counters is the loss threshold. */
#game .playerlifetotals { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#game .opphead .playerlifetotals { grid-area: life; }
#game .poisonbadge { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 21px; padding: 2px 4px; color: #d0e1a0; background: #17251a; border: 1px solid #71874c; border-radius: 4px; white-space: nowrap; font: 700 10px/1 var(--tbl-cond); }
#game .poisonbadge > span { font-size: 12px; }
#game .poisonbadge b { color: inherit; font-size: 11px; font-variant-numeric: tabular-nums; }
#game .poisonbadge i { font-size: 8px; font-style: normal; opacity: .8; }
#game .poisonbadge small { font-size: 7px; letter-spacing: .04em; }
#game .poisonbadge.energybadge { color: #f5da91; background: #302814; border-color: #9d823d; }
#game .poisonbadge.radbadge { color: #e4ef91; background: #282d13; border-color: #879648; }
#game .poisonbadge.danger { color: #ffd4ad; border-color: #d78355; background: #40251c; }
#game .poisonbadge.lethal { color: #ffe0de; border-color: #ec766d; background: #511e24; }

/* ---------- DECLARE BLOCKERS modal ---------- */
.blockov { z-index: 150; background: rgba(0,0,0,.86); backdrop-filter: blur(5px); }
.blockmodal { width: min(1150px, calc(100 * var(--vwu) - 70px)) !important; max-width: 1150px !important; max-height: calc(100 * var(--vhu) - 60px); overflow-y: auto; padding: 22px; background: linear-gradient(145deg,var(--ds-panel-raised),var(--ds-table) 72%); border: 1px solid rgba(210,74,58,.55); box-shadow: 0 30px 110px #000; }
.blockhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0 14px; color: var(--ds-text); font: 600 15px/1.3 var(--tbl-font); flex-wrap: wrap; }
.blockdmg { padding: 7px 12px; font: 600 13px/1.2 var(--tbl-cond); border: 1px solid rgba(185,160,106,.25); background: var(--ds-panel); color: #cfc8b6; }
.blockdmg strong { font-size: 16px; color: var(--ds-text); }
.blockdmg.warn { border-color: rgba(240,189,118,.55); color: var(--ds-accent-bright); }
.blockdmg.lethal { border-color: rgba(210,74,58,.8); color: #ff8b70; background: linear-gradient(90deg,rgba(130,32,24,.28),var(--ds-panel) 60%); }
.blocklanes { display: grid; gap: 9px; }
.blocklane { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 12px; padding: 10px; cursor: pointer; background: var(--ds-table); border: 1px solid rgba(185,160,106,.17); border-left: 3px solid rgba(210,74,58,.5); }
.blocklane:hover { border-color: rgba(200,134,60,.5); }
.blocklane.sel { background: linear-gradient(90deg,rgba(200,134,60,.16),var(--ds-table) 42%); border-color: rgba(200,134,60,.85); border-left-color: var(--tbl-gold); box-shadow: 0 0 0 1px rgba(200,134,60,.35); }
.blocklane img { width: 74px; border-radius: 6px; display: block; box-shadow: 0 8px 22px #000a; }
.blocklaneinfo { display: grid; gap: 4px; align-content: start; }
.blocklaneinfo b { color: var(--ds-text); font: 16px/1.1 var(--tbl-cond); }
.blocklaneinfo > span { color: var(--tbl-gold-lt); font: 700 12.5px/1.2 var(--tbl-cond); }
.blockassigned { display: flex; flex-wrap: wrap; gap: 6px; }
.blockchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font: 600 12px/1.2 var(--tbl-cond); color: #cfe4cc; background: rgba(90,168,96,.14); border: 1px solid rgba(143,212,138,.45); cursor: pointer; }
.blockchip i { color: #ff9b8a; font-style: normal; font-weight: 800; }
.blocknone { color: var(--ds-muted); font-size: 11.5px; font-style: italic; }
.blockoutcome { display: flex; flex-wrap: wrap; gap: 6px; }
.bo { padding: 2px 7px; font: 600 10.5px/1.4 var(--tbl-cond); letter-spacing: .06em; text-transform: uppercase; color: #b9b2a2; border: 1px solid rgba(185,160,106,.22); background: #0c1113; }
.bo.good { color: #8fd48a; border-color: rgba(143,212,138,.5); }
.bo.bad { color: #ff9b8a; border-color: rgba(210,74,58,.55); }
.bo.warn { color: var(--ds-accent-bright); border-color: rgba(240,189,118,.5); }
.blockyourstitle { margin: 14px 0 8px; color: #cfc8b6; }
.blockcandidates { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.blockcand { min-width: 200px; display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 9px; align-items: center; padding: 8px; text-align: left; cursor: pointer; color: var(--ds-copy); background: var(--ds-panel); border: 1px solid rgba(185,160,106,.2); }
.blockcand img { width: 52px; border-radius: 5px; display: block; }
.blockcand span { display: grid; gap: 3px; }
.blockcand b { color: var(--ds-text); font: 600 13.5px/1.15 var(--tbl-cond); }
.blockcand small { color: #8d8778; font-size: 10.5px; line-height: 1.3; }
.blockcand:hover { border-color: rgba(200,134,60,.6); }
.blockcand.assigned { border-color: rgba(143,212,138,.65); background: linear-gradient(90deg,rgba(90,168,96,.12),var(--ds-panel) 55%); }
.blockcand.assigned .assignedto { color: #8fd48a; font: 600 10.5px/1.2 var(--tbl-cond); font-style: normal; }
.blockcand.cant { opacity: .38; cursor: not-allowed; }
.blockmenacewarn { margin-top: 10px; padding: 8px 12px; color: var(--ds-accent-bright); font: 600 12.5px/1.4 var(--tbl-cond); border: 1px solid rgba(240,189,118,.45); background: rgba(240,189,118,.07); }
.blockfoot { margin-top: 14px; justify-content: flex-end; }

/* ---------- EXILE playable tray ---------- */
.exiletray { display: flex; align-items: center; gap: 10px; padding: 5px 10px; margin: 0 6px; background: linear-gradient(90deg,rgba(74,144,217,.12),var(--ds-panel) 65%); border: 1px solid rgba(74,144,217,.4); }
.exiletraytitle { flex: none; color: #9cc4ea; font: 700 11px/1.2 var(--tbl-cond); letter-spacing: .14em; text-transform: uppercase; }
.exiletraylist { display: flex; gap: 7px; overflow-x: auto; }
.exiletraycard { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 7px; align-items: center; min-width: 170px; padding: 4px 7px; text-align: left; cursor: pointer; color: var(--ds-copy); background: #0c1114; border: 1px solid rgba(74,144,217,.35); }
.exiletraycard img { width: 34px; border-radius: 4px; display: block; }
.exiletraycard span { display: grid; gap: 2px; }
.exiletraycard b { color: #e9eef5; font: 600 12px/1.15 var(--tbl-cond); }
.exiletraycard small { color: #7f8ea0; font-size: 9.5px; line-height: 1.25; }
.exiletraycard.castable { border-color: rgba(143,212,138,.7); box-shadow: 0 0 12px rgba(90,168,96,.25); }
.exiletraycard .exgo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #8fd48a; font: 800 10px/1 var(--tbl-cond); letter-spacing: .08em; font-style: normal; }

/* ---------- Suspend: persistent exile state + clear hand action ---------- */
.suspendtray { align-self: stretch; flex: 0 0 260px; min-width: 220px; max-width: min(320px, 36 * var(--vwu)); height: calc(100% - 4px); display: grid; grid-template-rows: auto minmax(0,1fr); gap: 5px; padding: 7px; border: 1px solid rgba(213,158,70,.62); border-left: 3px solid var(--ds-accent); border-radius: 5px; background: linear-gradient(145deg,rgba(54,39,13,.96),rgba(8,12,13,.98) 62%); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.35); overflow: hidden; }
.suspendtrayhead { display: grid; gap: 2px; min-width: 0; }
.suspendtrayhead b { color: var(--ds-accent-bright); font: 800 10px/1 var(--tbl-cond); letter-spacing: .14em; }
.suspendtrayhead small { color: #aa956d; font: 700 7px/1.2 var(--tbl-cond); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suspendtraylist { display: flex; min-height: 0; gap: 5px; overflow-x: auto; overflow-y: hidden; }
.suspendtraycard { position: relative; flex: 0 0 min(228px, 100%); min-width: 0; display: grid; grid-template-columns: 36px minmax(0,1fr) 28px; gap: 6px; align-items: center; padding: 4px 5px; text-align: left; color: #ece5d7; cursor: pointer; border: 1px solid rgba(213,158,70,.36); border-radius: 4px; background: rgba(5,9,10,.88); }
.suspendtraycard:hover, .suspendtraycard:focus-visible { border-color: #efc36f; outline: none; background: rgba(38,28,10,.9); }
.suspendtraycard.casting { border-color: #8fd48a; box-shadow: 0 0 12px rgba(90,168,96,.25); }
.suspendtraycard img { width: 36px; height: 48px; object-fit: cover; border-radius: 3px; display: block; }
.suspendtraycard > span { min-width: 0; display: grid; gap: 3px; }
.suspendtraycard > span b { overflow: hidden; color: #f3ead8; font: 700 10px/1.1 var(--tbl-cond); white-space: nowrap; text-overflow: ellipsis; }
.suspendtraycard > span small { color: #a99b80; font: 600 8px/1.2 var(--tbl-cond); }
.suspendcounter { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ds-accent-ink); background: radial-gradient(circle at 35% 30%,#ffe2a0,var(--ds-accent) 72%); border: 1px solid #ffe1a1; border-radius: 50%; box-shadow: 0 0 0 3px rgba(213,158,70,.14), 0 3px 8px #0008; font: 900 15px/1 var(--tbl-cond); font-style: normal; }
.hcard.suspendready { border-color: #d5a14e !important; box-shadow: 0 0 0 1px rgba(239,195,111,.25), 0 0 18px rgba(213,158,70,.38) !important; }
.handsuspendtag { position: absolute; z-index: 3; left: 3px; right: 3px; bottom: 17px; min-height: 17px; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 2px 3px; color: #c7bda9; background: rgba(15,13,9,.92); border: 1px solid rgba(213,158,70,.46); border-radius: 3px; font: 800 6.5px/1 var(--tbl-cond); letter-spacing: .05em; white-space: nowrap; }
.handsuspendtag.ready { color: #fff0c9; background: rgba(68,45,10,.95); border-color: #efc36f; }
.handsuspendtag .mana-glyph { width: 11px; height: 11px; }
.handsuspendtag b { color: var(--ds-accent-bright); font-size: 8px; }
.suspendstate { display: grid; gap: 5px; margin-bottom: 8px; padding: 9px 11px; border: 1px solid rgba(213,158,70,.58); border-left: 3px solid var(--ds-accent); border-radius: 6px; background: linear-gradient(90deg,rgba(67,45,12,.68),rgba(16,20,20,.95)); }
.suspendstate b { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; color: var(--ds-accent-bright); font: 800 10px/1.3 var(--tbl-cond); letter-spacing: .08em; }
.suspendstate b .mana-glyph { width: 14px; height: 14px; }
.suspendstate span { color: #d0c5b2; font: 600 10px/1.4 var(--tbl-cond); }
.suspendstate.exile { border-color: rgba(115,181,201,.58); border-left-color: #73b5c9; background: linear-gradient(90deg,rgba(18,57,69,.72),rgba(14,19,21,.96)); }
.suspendstate.exile b { color: #bfeafb; }
.bigcard.suspendedcard { border-color: #d5a14e; box-shadow: 0 0 0 1px rgba(213,158,70,.22), 0 10px 24px #0009; }
.zonesuspend { position: absolute; left: 5px; right: 5px; bottom: 22px; z-index: 3; padding: 4px 3px; color: var(--ds-accent-ink); background: linear-gradient(90deg,#f2c66f,var(--ds-accent)); border: 1px solid #ffe1a1; border-radius: 3px; font: 900 9px/1 var(--tbl-cond); letter-spacing: .08em; text-align: center; }

@media (max-width: 767px) {
  .suspendtray { flex-basis: 190px; min-width: 190px; max-width: 190px; padding: 5px; }
  .suspendtrayhead small { font-size: 6px; }
  .suspendtraycard { grid-template-columns: 30px minmax(0,1fr) 24px; padding: 3px; }
  .suspendtraycard img { width: 30px; height: 40px; }
  .suspendcounter { width: 24px; height: 24px; font-size: 13px; }
}