/* Layout lab: page chrome, the simulated iPhone 16, shared game pieces, then one block per layout option. */

/* ================================================================ page */
:root {
  --page: #e8e6e0; --panel: #fbfaf7; --ink: #1d1c1a; --muted: #6b665d; --line: #d7d1c5; --accent: #2f6db5;
  --good: #2e7d32; --warnc: #b3261e;
  --s: 0.83; --bz: 11px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #141617; --panel: #1d2022; --ink: #e9e7e2; --muted: #9b978f; --line: #30353a; --accent: #8fb3ff; --good: #7bd88f; --warnc: #ff8a80; }
}
:root[data-theme="dark"] { --page: #141617; --panel: #1d2022; --ink: #e9e7e2; --muted: #9b978f; --line: #30353a; --accent: #8fb3ff; --good: #7bd88f; --warnc: #ff8a80; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }

header.lab { position: sticky; top: 0; z-index: 100; background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px 16px 8px; }
.titlerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
h1 { font-size: 18px; margin: 0; }
.sub { color: var(--muted); font-size: 12.5px; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { font: inherit; font-size: 13px; padding: 5px 12px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--ink); color: var(--panel); font-weight: 600; }
select { font: inherit; font-size: 13px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.desc { margin: 8px 0 0; font-size: 13px; max-width: 1200px; }
.hint { margin: 3px 0 0; font-size: 12px; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc((852px + 2 * var(--bz)) * var(--s) + 30px)), 1fr)); gap: 16px; padding: 16px; }
.opt { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; min-width: 0; }
.opt > header { display: flex; gap: 10px; align-items: flex-start; }
.letter { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--panel); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.opt h2 { margin: 0; font-size: 16px; }
.opt h2 small { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.idea { margin: 2px 0 0; font-size: 13px; color: var(--muted); max-width: 70ch; }
.solo { margin-left: auto; flex: none; font-size: 12.5px; color: var(--accent); text-decoration: none; border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px; }
.audit { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin: 0 2px 6px; }
.audit b { color: var(--ink); font-variant-numeric: tabular-nums; }
.audit .warn b { color: var(--warnc); }
.audit span { cursor: help; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 12.5px; }
.pc ul { margin: 0; padding-left: 18px; }
.pc li { margin: 1px 0; }
.pros li::marker { content: '+  '; color: var(--good); font-weight: 800; }
.cons li::marker { content: '−  '; color: var(--warnc); font-weight: 800; }
@media (max-width: 700px) { .pc { grid-template-columns: 1fr; } }
footer.legend { padding: 4px 16px 30px; font-size: 12.5px; color: var(--muted); }
#legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
#legend b { flex-basis: 100%; margin-top: 6px; color: var(--ink); }
.credits { margin: 10px 0 0; font-size: 11.5px; }
.credits a { color: var(--accent); }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.lg.play { box-shadow: 0 0 0 2px #45d7ff; } .lg.atk { box-shadow: 0 0 0 2px #ff4f4f; } .lg.blk { box-shadow: 0 0 0 2px #42e08f; } .lg.tgt { box-shadow: 0 0 0 2px #d08bff; } .lg.sel { outline: 2px solid #888; }

/* ================================================================ simulated device */
.phone { width: calc((852px + 2 * var(--bz)) * var(--s)); height: calc((393px + 2 * var(--bz)) * var(--s)); margin: 10px auto 10px; }
.device { width: calc(852px + 2 * var(--bz)); height: calc(393px + 2 * var(--bz)); padding: var(--bz); border-radius: calc(55px + var(--bz)); background: #050505; box-shadow: 0 0 0 1.5px #48484a, 0 10px 28px rgba(0, 0, 0, .35); transform: scale(var(--s)); transform-origin: 0 0; }
.screen { position: relative; width: 852px; height: 393px; border-radius: 55px; overflow: hidden; isolation: isolate; }
.sim { position: absolute; inset: 0; pointer-events: none; z-index: 50; display: none; }
.show-safe .sim.safe { display: block; background: linear-gradient(to right, rgba(255, 50, 50, .2) 59px, transparent 59px, transparent 793px, rgba(255, 50, 50, .2) 793px), linear-gradient(to top, rgba(255, 50, 50, .2) 21px, transparent 21px); }
.show-safe .sim.safe::after { content: ''; position: absolute; left: 59px; right: 59px; top: 0; bottom: 21px; border: 1px dashed rgba(255, 110, 110, .8); }
.show-grid .sim.grid44 { display: block; background-image: linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 44px 44px; background-position: 59px 0; }
.show-small .sim.marks { display: block; }
.sim.marks i { position: absolute; border: 1.5px dashed #ff3b30; border-radius: 3px; background: rgba(255, 59, 48, .08); }
.island { position: absolute; left: 11px; top: 133.5px; width: 37px; height: 126px; border-radius: 18.5px; background: #000; z-index: 60; pointer-events: none; }
.homebar { position: absolute; left: 50%; bottom: 8px; width: 190px; height: 5px; margin-left: -95px; border-radius: 3px; background: rgba(255, 255, 255, .7); z-index: 60; pointer-events: none; }

body.solo { margin: 0; background: #000; overflow: hidden; }
.solowrap { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.solo .device { position: absolute; left: 50%; top: 50%; width: 852px; height: 393px; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: translate(-50%, -50%) scale(var(--s)); transform-origin: center; }
@media (pointer: coarse) { .solo .island, .solo .homebar { display: none; } .solo .screen { border-radius: 0; } }

/* ================================================================ game screen: shared pieces */
.screen {
  --you: #5b9bff; --opp: #ff6b61; --prio: #ffd54a; --play: #45d7ff; --atk: #ff4f4f; --blk: #42e08f; --tgt: #d08bff;
  --mW: #f3ebc8; --mU: #5aa8ec; --mB: #a597b3; --mR: #f07659; --mG: #5cc07a; --mC: #bfb8ad; --mM: #e3c35f;
  --hud: rgba(6, 10, 9, .5); --hudline: rgba(255, 255, 255, .1);
  color: #eef1ee; font: 11px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; text-align: left;
  background: radial-gradient(130% 100% at 50% 50%, #2f403a 0%, #1f2a27 55%, #141b19 100%);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: default;
}
.screen::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 107, 97, .09), transparent 32%, transparent 68%, rgba(91, 155, 255, .09)); }
.screen [data-tap], .screen [data-card] { cursor: pointer; }
.stage { position: absolute; top: 0; bottom: 21px; left: 59px; right: 59px; }
.deco { position: absolute; inset: 0; pointer-events: none; }
svg.arrows { position: absolute; left: 0; top: 0; width: 852px; height: 393px; pointer-events: none; z-index: 30; overflow: visible; }
.ar { fill: none; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
.ar.blk { stroke: var(--blk); } .ar.tgt { stroke: var(--tgt); stroke-dasharray: 6 4; } .ar.atk { stroke: var(--atk); }
.ah.blk { fill: var(--blk); } .ah.tgt { fill: var(--tgt); } .ah.atk { fill: var(--atk); }
.empty { color: rgba(255, 255, 255, .3); font-size: 11px; font-style: italic; align-self: center; margin: auto; }

/* rows of permanents */
.row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--gap, 6px); min-width: 0; min-height: 0; align-content: center; }

/* tiles */
.tile { position: relative; flex: none; border-radius: 7px; background: #0f1312; box-shadow: 0 1px 4px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .14); transform: translateY(var(--ty, 0)) rotate(var(--rot, 0)) scale(var(--sc, 1)); transition: transform .15s; }
.tile .art { position: absolute; left: 0; right: 0; top: 0; border-radius: 7px 7px 0 0; background-repeat: no-repeat; background-color: #222; }
.tile .nm { position: absolute; left: 0; right: 0; padding: 0 4px; font-size: var(--fs); font-weight: 650; color: #fff; background: rgba(0, 0, 0, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.tile .ft { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 0 3px; border-top: 2px solid var(--cc); background: #161b1a; border-radius: 0 0 7px 7px; }
.tile .kw { font-size: var(--ks); line-height: 1; white-space: nowrap; overflow: hidden; letter-spacing: -1px; min-width: 0; }
.tile .ty { font-size: 8.5px; color: #c9d1cd; white-space: nowrap; overflow: hidden; }
.pt { font-size: var(--pts, 12px); font-weight: 800; line-height: 1.05; padding: 1px 4px; border-radius: 5px; background: #f1eee4; color: #121212; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.pt.up { background: #b9f0c6; color: #083d16; } .pt.dn { background: #ffc9c4; color: #5a0e08; }
.tile.tapped { --rot: 9deg; --sc: .94; }
.tile.tapped:not(.atk):not(.blk) > .art, .tile.tapped:not(.atk):not(.blk) > .nm { filter: saturate(.3) brightness(.5); }
.tile.side-opp.atk { --ty: 7px; } .tile.side-you.atk { --ty: -7px; }
.tile.act { box-shadow: 0 0 0 2px var(--play), 0 0 10px 2px rgba(69, 215, 255, .45); }
.tile.atk { box-shadow: 0 0 0 2px var(--atk), 0 0 12px 3px rgba(255, 79, 79, .55); }
.tile.blk { box-shadow: 0 0 0 2px var(--blk), 0 0 12px 3px rgba(66, 224, 143, .5); }
.tile.tgt { box-shadow: 0 0 0 2.5px var(--tgt), 0 0 16px 5px rgba(208, 139, 255, .8); }
.tile.canblk { outline: 1.5px dashed rgba(255, 255, 255, .6); outline-offset: 2px; }
.tile.sel { outline: 2.5px solid #fff; outline-offset: 2px; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { outline-color: rgba(255, 255, 255, .25); } }

.bdg { position: absolute; z-index: 3; font-size: 9.5px; font-weight: 800; line-height: 14px; min-width: 14px; text-align: center; padding: 0 3px; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); pointer-events: none; white-space: nowrap; }
.bdg.ctr { left: -4px; top: -5px; background: #2f8f46; color: #fff; }
.bdg.dmg { right: -4px; top: -5px; background: #e53935; color: #fff; }
.bdg.zz { right: -4px; top: -5px; background: #d8e6ff; color: #1b3a73; }
.bdg.grp { right: -6px; top: 34%; background: #111; color: #fff; border: 1px solid rgba(255, 255, 255, .4); font-size: 10.5px; }
.bdg.role { left: 50%; top: -7px; transform: translateX(-50%); font-size: 8.5px; letter-spacing: .04em; }
.bdg.role.atk { background: var(--atk); color: #fff; } .bdg.role.blk { background: var(--blk); color: #04230f; }
.att { position: absolute; left: 3px; right: 3px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; z-index: 2; }
.att span { max-width: 100%; font-size: 8.5px; line-height: 12px; font-weight: 650; padding: 0 3px; border-radius: 4px; background: rgba(12, 12, 12, .88); border: 1px solid rgba(255, 255, 255, .3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att span.foe { border-color: var(--opp); color: #ffd2cf; }

/* full cards (A) */
.fc { position: relative; flex: none; height: var(--h); width: calc(var(--h) * .7176); transform: translateY(var(--ty, 0)); }
.fc.tapped { width: var(--h); }
.fc .in { position: absolute; left: 50%; top: 50%; width: calc(var(--h) * .7176); height: var(--h); transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); border-radius: calc(var(--h) * .045); }
.fc.tapped .in { --rot: 90deg; }
.fc.tapped:not(.tapdim *) .fkw { bottom: auto; top: 2px; }
.fc img.face { position: relative; width: 100%; height: 100%; border-radius: inherit; display: block; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); z-index: 1; }
.fc img.stackback { position: absolute; left: 3px; top: -3px; z-index: 0; filter: brightness(.6); }
.fc img.under { position: absolute; left: 10%; width: 80%; border-radius: inherit; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); z-index: 0; }
.fc.tapped:not(.atk):not(.blk) img.face { filter: saturate(.55) brightness(.72); }
.fc.side-opp.atk { --ty: 6px; } .fc.side-you.atk { --ty: -6px; }
.fc.act img.face { box-shadow: 0 0 0 2px var(--play), 0 0 10px 2px rgba(69, 215, 255, .5); }
.fc.atk img.face { box-shadow: 0 0 0 2px var(--atk), 0 0 12px 3px rgba(255, 79, 79, .6); }
.fc.blk img.face { box-shadow: 0 0 0 2px var(--blk), 0 0 12px 3px rgba(66, 224, 143, .55); }
.fc.tgt img.face { box-shadow: 0 0 0 2.5px var(--tgt), 0 0 16px 5px rgba(208, 139, 255, .8); }
.fc.canblk .in { outline: 1.5px dashed rgba(255, 255, 255, .6); outline-offset: 2px; }
.fc.sel .in { outline: 2.5px solid #fff; outline-offset: 2px; animation: pulse 1.1s ease-in-out infinite; }
.fc .fpt { position: absolute; right: -3px; bottom: -3px; z-index: 3; --pts: 11.5px; }
.fc .fkw { position: absolute; left: 2px; bottom: 46%; z-index: 3; font-size: 9px; letter-spacing: -1px; text-shadow: 0 0 2px #000; }
.fc.mini .bdg.grp { top: auto; bottom: -4px; right: -5px; font-size: 9.5px; }

/* mana, HUD, zones */
.mana { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 9px; background: rgba(0, 0, 0, .35); flex: none; }
.mp { display: inline-block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.mp.used { opacity: .25; }
.mana .mc { margin-left: 3px; font-weight: 700; font-size: 10.5px; color: #dfe6e2; font-variant-numeric: tabular-nums; }
.pip { display: inline-flex; width: var(--ps, 12px); height: var(--ps, 12px); border-radius: 50%; align-items: center; justify-content: center; font-size: calc(var(--ps, 12px) * .75); font-weight: 800; color: #222; font-style: normal; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .6); flex: none; }
.pip.W { background: var(--mW); } .pip.U { background: var(--mU); } .pip.B { background: var(--mB); } .pip.R { background: var(--mR); } .pip.G { background: var(--mG); } .pip.C, .pip.g { background: var(--mC); }
.pip.hy { background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); }
.hudrow { min-width: 0; }
.hud { display: flex; align-items: center; gap: 7px; padding: 0 6px 0 3px; height: 100%; border-radius: 9px; background: var(--hud); box-shadow: inset 0 0 0 1px var(--hudline); white-space: nowrap; min-width: 0; overflow: hidden; }
.life { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 28px; text-align: center; padding: 0 5px; border-radius: 7px; background: var(--pc, #555); color: #fff; line-height: 21px; }
.you { --pc: #2d63c8; } .opp { --pc: #c23b33; }
.hud .who { font-weight: 700; font-size: 11px; }
.prio { box-shadow: inset 0 0 0 1.5px var(--prio), 0 0 10px rgba(255, 213, 74, .35) !important; }
.zc { font-size: 10.5px; color: #d9e0dc; white-space: nowrap; } .zc b { font-weight: 700; margin-left: 1px; }
.zc.tapz { padding: 1px 4px; border-radius: 6px; background: rgba(255, 255, 255, .07); }
.story { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: rgba(170, 120, 255, .25); color: #e2d2ff; }
.others { display: inline-flex; gap: 4px; min-width: 0; }
.och { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 1px 5px 1px 1px; border-radius: 6px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); white-space: nowrap; }
.och i { width: 18px; height: 16px; border-radius: 4px; background-repeat: no-repeat; flex: none; }
.och em { font-style: normal; color: #9fe3b0; }
.och.act { box-shadow: inset 0 0 0 1.5px var(--play); }

/* phase track */
.phases { display: flex; gap: 2px; align-items: center; flex: none; }
.ph { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 8px; color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .07); white-space: nowrap; }
.ph.done { color: rgba(255, 255, 255, .32); }
.phases.you .ph.cur { background: var(--you); color: #fff; }
.phases.opp .ph.cur { background: var(--opp); color: #fff; }
.phases.v { flex-direction: column; align-items: stretch; gap: 2px; }
.phases.v .ph { text-align: center; padding: 2px 3px; }
.turn { font-size: 10px; font-weight: 800; text-align: center; padding: 3px 4px; border-radius: 7px; color: #fff; white-space: nowrap; }
.turn.you { background: var(--you); } .turn.opp { background: var(--opp); }

/* prompt */
.prompt { font-size: 10.5px; color: #dfe7e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.prompt b { color: #fff; }
.prompt em { font-style: normal; font-weight: 700; color: #ffb4a8; }

/* buttons */
.btns { display: flex; gap: 6px; }
.btns.col { flex-direction: column; }
.btn { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; border-radius: 12px; font: inherit; font-weight: 800; color: #fff; cursor: pointer; line-height: 1.1; text-align: center; padding: 4px 6px; }
.btn small { font-weight: 600; font-size: 9px; opacity: .85; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.primary { min-height: 50px; font-size: 14px; background: linear-gradient(#ffc93d, #e09a0a); color: #2a1a00; box-shadow: 0 2px 0 #8a5a00, 0 4px 10px rgba(0, 0, 0, .4); }
.btn.primary.atk { background: linear-gradient(#ff6d58, #d6392a); color: #fff; box-shadow: 0 2px 0 #74170e, 0 4px 10px rgba(0, 0, 0, .4); }
.btn.primary.ok { background: linear-gradient(#5fe097, #1f9d55); color: #032311; box-shadow: 0 2px 0 #0d5a2c, 0 4px 10px rgba(0, 0, 0, .4); }
.btn.primary.wait { background: #444; color: #bbb; box-shadow: none; }
.btn.secondary { min-height: 30px; font-size: 11px; background: rgba(255, 255, 255, .1); color: #e8eeea; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn.icon { min-height: 28px; font-size: 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); font-weight: 600; }

/* stack items */
.stk { position: relative; display: flex; gap: 5px; align-items: center; padding: 3px; border-radius: 8px; background: rgba(250, 248, 240, .96); color: #1b1b1b; border-left: 4px solid var(--you); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); min-width: 0; }
.stk.theirs { border-left-color: var(--opp); }
.stk.top { box-shadow: 0 0 0 2px var(--prio), 0 2px 8px rgba(0, 0, 0, .5); }
.stk .art { flex: none; border-radius: 5px; background-repeat: no-repeat; }
.stk .tx { min-width: 0; font-size: 10px; line-height: 1.2; }
.stk .tx b { display: block; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk .tx small { display: block; color: #4d4d4d; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk .tx small.it { white-space: normal; color: #333; }
.stk.card { flex-direction: column; align-items: stretch; gap: 3px; }
.stk.card .art { width: 100% !important; }
.stk.card .tx b { white-space: normal; }
.stk.card .tx small { white-space: normal; }
.stackcol { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; justify-content: center; }
.stackrow { display: flex; gap: 6px; min-width: 0; }
.stackrow .stk { flex: 1 1 0; }

/* hand tiles (B) */
.htile { position: relative; flex: none; border-radius: 7px; background: #111; box-shadow: 0 1px 4px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .14); overflow: hidden; }
.htile .hd { position: absolute; top: 0; left: 0; right: 0; height: 17px; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 0 3px 0 4px; background: rgba(0, 0, 0, .85); }
.htile .hd b { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.htile .cost { display: inline-flex; gap: 1px; flex: none; }
.htile .art { position: absolute; left: 0; right: 0; background-repeat: no-repeat; }
.htile .ty { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; font-size: 8.5px; padding: 0 4px; background: #181d1c; border-top: 2px solid var(--cc); display: flex; justify-content: space-between; align-items: center; gap: 2px; white-space: nowrap; overflow: hidden; }
.htile .ty b { font-size: 10px; }
.htile.playable { box-shadow: 0 0 0 2px var(--play), 0 0 12px 2px rgba(69, 215, 255, .5); }
.htile.dim { filter: brightness(.62) saturate(.55); }

/* hand rows (C, E) */
.handlist { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: auto; }
.hrow { flex: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px 0 4px; border-radius: 8px; background: rgba(0, 0, 0, .3); box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hrow.playable { background: rgba(69, 215, 255, .13); box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 1.5px rgba(69, 215, 255, .7); }
.hrow.dim { opacity: .5; }
.hrow .thumb { flex: none; width: 30px; height: 28px; border-radius: 5px; background-repeat: no-repeat; margin-left: 3px; }
.hrow .t { flex: 1; min-width: 0; padding-left: 3px; }
.hrow .t b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .t small { display: block; font-size: 9.5px; color: #b9c4bf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .cost { flex: none; display: flex; gap: 1px; }

/* fanned full-card hand (A, D) */
.hand { position: relative; display: flex; justify-content: center; min-width: 0; }
.fan { position: relative; height: 100%; }
.fan .hw { display: block; height: 1px; }
.hc { position: absolute; top: 4px; border-radius: 5px; }
.hc img { width: 100%; height: 100%; border-radius: 5px; display: block; box-shadow: -2px 0 6px rgba(0, 0, 0, .55); }
.hc.playable img { box-shadow: 0 0 0 2px var(--play), 0 0 10px 2px rgba(69, 215, 255, .5), -2px 0 6px rgba(0, 0, 0, .55); }
.hc.dim img { filter: brightness(.6) saturate(.6); }

/* overlays */
.ov { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(0, 0, 0, .66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 10px 70px 24px; }
.ov.show { display: flex; }
.zoom { display: flex; gap: 16px; align-items: center; }
.zoom img { height: 340px; border-radius: 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, .6); }
.zinfo { width: 250px; font-size: 12px; line-height: 1.35; }
.zinfo h3 { margin: 0; font-size: 16px; }
.zinfo .ztype { color: #b8c3bd; margin-bottom: 8px; }
.zinfo p { margin: 3px 0; }
.zinfo .mut { color: #9aa59f; }
.zinfo .r { color: #ff8a80; font-weight: 700; } .zinfo .g { color: #7ee8a8; font-weight: 700; } .zinfo .p { color: #dcb0ff; font-weight: 700; } .zinfo .c { color: #8fe4ff; font-weight: 700; }
.zinfo .zbtn { min-height: 38px; width: 100%; margin-top: 8px; font-size: 13px; }
.zinfo .hint { color: #8d9893; font-size: 10.5px; margin-top: 10px; }
.bighand { position: relative; }
.bh { position: absolute; top: 0; border-radius: 11px; }
.bh img { width: 100%; height: 100%; border-radius: 11px; box-shadow: -4px 0 12px rgba(0, 0, 0, .6); }
.bh.playable img { box-shadow: 0 0 0 3px var(--play), 0 0 18px 4px rgba(69, 215, 255, .5); }
.bh.dim img { filter: brightness(.55); }
.ovhint { color: #b7c2bd; font-size: 11px; margin: 10px 0 0; }
.zone { max-width: 700px; max-height: 350px; overflow: auto; }
.zone h3 { margin: 0 0 8px; font-size: 14px; }
.zcards { display: flex; flex-wrap: wrap; gap: 6px; }
.zc2 img { height: 120px; border-radius: 6px; display: block; }
.zc2 img.tp { filter: brightness(.55) saturate(.5); }
.zone.log ol { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.5; }
.toast { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 45; max-width: 600px; padding: 6px 12px; border-radius: 10px; background: rgba(15, 15, 15, .94); color: #fff; font-size: 11px; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); font-family: ui-monospace, Menlo, monospace; }
.toast.show { opacity: 1; }

/* ================================================================ A: classic table */
.L-A .stage { display: grid; grid-template-columns: 66px 1fr 78px; column-gap: 6px; }
.L-A .left { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 4px 0 2px; min-height: 0; }
.L-A .ahud { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 3px; border-radius: 10px; background: var(--hud); box-shadow: inset 0 0 0 1px var(--hudline); }
.L-A .ahud .life { font-size: 22px; line-height: 28px; width: 100%; }
.L-A .ahud .who { font-size: 9.5px; font-weight: 700; }
.L-A .zcs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.L-A .zcs .zc { font-size: 10px; }
.L-A .zcs .story { font-size: 9px; }
.L-A .piles { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.L-A .pile { position: relative; width: 40px; height: 56px; border-radius: 4px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.L-A .pile img { width: 100%; height: 100%; border-radius: 4px; display: block; filter: grayscale(.4) brightness(.8); }
.L-A .pile b { position: absolute; right: -5px; bottom: -5px; background: #111; color: #fff; font-size: 10px; padding: 0 4px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35); }
.L-A .board { display: grid; grid-template-rows: 34px 1fr 8px 1fr 34px 84px; row-gap: 3px; min-width: 0; min-height: 0; }
.L-A .row { flex-wrap: nowrap; justify-content: center; }
.L-A .row.crs.opp { align-items: flex-end; padding-bottom: 2px; }
.L-A .row.crs.you { align-items: flex-start; padding-top: 10px; }
.L-A .row.lands { align-items: center; }
.L-A .line { border-top: 1px dashed rgba(255, 255, 255, .15); margin-top: 4px; }
.L-A .right { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 2px; min-height: 0; }
.L-A .right .btns .btn.primary { min-height: 54px; }

/* ================================================================ B: tiles & mana bars */
.L-B .stage { display: grid; grid-template-columns: 1fr 74px; column-gap: 6px; }
.L-B .board { display: grid; grid-template-rows: 26px 1fr 22px 1fr 26px 76px; row-gap: 4px; min-width: 0; min-height: 0; padding-top: 3px; }
.L-B .band, .L-D .band { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 2px; }
.L-B .row.hand { gap: 5px; flex-wrap: nowrap; }
.L-B .rail, .L-D .rail { display: flex; flex-direction: column; gap: 6px; padding: 3px 0 2px; min-height: 0; }

/* ================================================================ C: hand on the side */
.L-C .stage { display: grid; grid-template-columns: 1fr 196px; column-gap: 8px; }
.L-C .board { display: grid; grid-template-rows: 26px 1fr auto 1fr 26px; row-gap: 4px; min-width: 0; min-height: 0; padding-top: 3px; }
.L-C .band { display: flex; align-items: center; justify-content: center; min-height: 20px; }
.L-C .band.hasstack { min-height: 46px; }
.L-C .band .stackrow { width: 100%; }
.L-C .panel { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 2px; min-height: 0; }
.L-C .phead, .L-E .phead { display: flex; gap: 6px; align-items: stretch; }
.L-C .phead .turn, .L-E .phead .turn { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.L-C .phead .btn, .L-E .phead .btn { width: 44px; }
.L-C .prompt, .L-E .panel .prompt { white-space: normal; line-height: 1.3; padding: 4px 6px; border-radius: 8px; background: rgba(0, 0, 0, .3); }
.L-C .prompt span, .L-E .panel .prompt span { display: block; }
.L-C .prompt em, .L-E .panel .prompt em { display: block; }
.L-C .handlist, .L-E .handlist { flex: 1; }
.L-C .btns.row .btn, .L-E .btns.row .btn { flex: 1; min-height: 46px; }
.L-C .btns.row .btn.primary, .L-E .btns.row .btn.primary { flex: 1.6; }

/* ================================================================ D: focus */
.L-D .stage { display: grid; grid-template-columns: 1fr 74px; column-gap: 6px; }
.L-D .board { display: grid; row-gap: 4px; min-width: 0; min-height: 0; padding-top: 3px; }
.L-D .m-mine { grid-template-rows: 66px 22px 1fr 24px 94px; }
.L-D .m-theirs { grid-template-rows: 24px 1fr 22px 66px 94px; }
.L-D .m-combat { grid-template-rows: 24px 1fr 22px 1fr 24px 34px; }
.L-D .m-spot { grid-template-rows: 66px 1fr 24px 94px; }
.L-D .strip { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 3px; border-radius: 10px; background: var(--hud); box-shadow: inset 0 0 0 1px var(--hudline); min-height: 0; min-width: 0; }
.L-D .shud { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; font-weight: 700; font-size: 10.5px; height: 16px; }
.L-D .shud .mana { padding: 1px 5px; }
.L-D .shud .swap { margin-left: auto; font-weight: 600; color: #aebbb5; font-size: 9.5px; }
.L-D .minis { flex: 1; min-height: 0; justify-content: flex-start; flex-wrap: nowrap; }
.L-D .row.crs.big { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 4px 6px; scrollbar-width: thin; }
.L-D .mid { display: grid; grid-template-columns: 250px 1fr; gap: 8px; min-height: 0; }
.L-D .spot { display: flex; flex-direction: column; gap: 6px; min-height: 0; justify-content: center; }
.L-D .sp-top { display: flex; gap: 8px; padding: 6px; border-radius: 10px; background: rgba(250, 248, 240, .96); color: #1b1b1b; border-left: 5px solid var(--opp); box-shadow: 0 0 0 2px var(--prio), 0 4px 12px rgba(0, 0, 0, .5); }
.L-D .sp-top.mine { border-left-color: var(--you); }
.L-D .sp-top img { height: 112px; border-radius: 6px; flex: none; }
.L-D .sp-tx { font-size: 10.5px; line-height: 1.3; min-width: 0; }
.L-D .sp-tx small { color: #555; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.L-D .sp-tx b { display: block; font-size: 13px; margin: 2px 0; }
.L-D .sp-tx p { margin: 2px 0; }
.L-D .sp-tx .tg { color: #6a1b9a; font-weight: 700; }
.L-D .sp-rest > small { display: block; font-size: 9.5px; color: #aebbb5; margin: 0 0 3px 2px; }
.L-D .handmini { display: flex; align-items: center; gap: 4px; justify-content: center; padding: 2px 6px; border-radius: 9px; background: var(--hud); }
.L-D .handmini .hm { width: 52px; height: 26px; border-radius: 5px; background-repeat: no-repeat; filter: brightness(.6); }
.L-D .handmini .hm.playable { filter: none; box-shadow: 0 0 0 2px var(--play); }
.L-D .handmini .hl { font-size: 10px; color: #aebbb5; font-weight: 600; }
.sidelife { position: absolute; left: 9px; width: 44px; display: flex; flex-direction: column; align-items: center; border-radius: 12px; padding: 4px 0; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px var(--pc); }
.sidelife b { font-size: 22px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sidelife small { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #cdd6d1; }
.sidelife.opp { top: 44px; } .sidelife.you { bottom: 44px; }

/* ================================================================ E: text first */
.L-E .stage { display: grid; grid-template-columns: 1fr 188px; column-gap: 8px; }
.L-E .board { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; padding-top: 3px; }
.L-E .tline { flex: none; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 6px 0 3px; border-radius: 9px; background: var(--hud); box-shadow: inset 0 0 0 1px var(--hudline); white-space: nowrap; overflow: hidden; }
.L-E .tline b { font-size: 11px; }
.L-E .chips { flex: 1 1 0; min-height: 0; overflow: auto; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; padding: 2px; }
.L-E .chips.you { align-content: flex-end; }
.L-E .sep { flex-basis: 100%; height: 0; }
.L-E .band { flex: none; display: flex; align-items: center; gap: 8px; min-height: 22px; min-width: 0; }
.L-E .band .stackrow { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 7px; border-radius: 6px; background: rgba(0, 0, 0, .38); box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 1px rgba(255, 255, 255, .12); font-size: 11px; white-space: nowrap; max-width: 100%; }
.chip .pt { --pts: 10.5px; padding: 0 3px; }
.chip .cn { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.chip .x { color: #fff; background: #000; border-radius: 5px; padding: 0 3px; font-size: 10px; }
.chip .k { font-size: 10px; letter-spacing: -1px; }
.chip em { font-style: normal; font-size: 9.5px; color: #c7d0cc; }
.chip em.foe { color: #ffb4ad; }
.chip em.ct { color: #9fe3b0; font-weight: 700; }
.chip i { font-style: normal; font-size: 8.5px; font-weight: 800; padding: 0 3px; border-radius: 4px; }
.chip i.r { background: var(--atk); color: #fff; } .chip i.g { background: var(--blk); color: #032; }
.chip.tapped { opacity: .5; }
.chip.atk, .chip.blk { opacity: 1; }
.chip.atk { box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 1.5px var(--atk); }
.chip.blk { box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 1.5px var(--blk); }
.chip.tgt { box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 2px var(--tgt); background: rgba(208, 139, 255, .2); }
.chip.act { box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 1.5px var(--play); }
.chip.canblk { outline: 1px dashed rgba(255, 255, 255, .5); }
.chip.sel { outline: 2px solid #fff; animation: pulse 1.1s infinite; }
.L-E .panel { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 2px; min-height: 0; }
.L-E .hrow { height: 32px; }
.stk.card .tx small.it { display: none; }

/* ================================================================ whole-card pieces */
/* tapped cards that stay upright (G, H, I): dimmed with the tap symbol instead of turning sideways */
.tapdim .fc.tapped { width: calc(var(--h) * .7176); }
.tapdim .fc.tapped .in { --rot: 0deg; }
.tapdim .fc.tapped:not(.atk):not(.blk) img.face { filter: saturate(.35) brightness(.45); }
/* the tap symbol on upright tapped cards */
.fc .tapmark { display: none; }
.tapdim .fc.tapped .tapmark { display: grid; place-items: center; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: calc(var(--h) * .27); height: calc(var(--h) * .27); border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; font-size: calc(var(--h) * .15); z-index: 4; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
.fc.mini .fpt, .fc.mini .fkw { display: none; }

/* land piles */
.piles { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 5px 7px; align-content: center; justify-content: start; flex: none; padding: 0 4px 0 2px; }
.piles.hrz { grid-template-rows: auto; }
.lpile { position: relative; display: flex; align-items: flex-end; gap: 5px; }
.lstack { position: relative; flex: none; width: calc(var(--h) * .7176 + (var(--n) - 1) * 3px); height: calc(var(--h) + (var(--n) - 1) * 3px); }
.lstack img { position: absolute; width: calc(var(--h) * .7176); height: var(--h); border-radius: calc(var(--h) * .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
/* tapped lands lie sideways: the footprint swaps width and height, each card turns a quarter to the right */
.lstack.tapped { width: calc(var(--h) + (var(--n) - 1) * 3px); height: calc(var(--h) * .7176 + (var(--n) - 1) * 3px); }
.lstack.tapped img { transform-origin: 0 0; transform: translateX(var(--h)) rotate(90deg); filter: saturate(.55) brightness(.72); }
.lstack .cnt { position: absolute; right: -5px; top: -5px; z-index: 2; font-size: 10px; font-weight: 800; background: #111; color: #fff; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; padding: 0 4px; line-height: 14px; }
.fc.mini { margin-bottom: 0; }

/* hand of whole cards */
.row.hand { flex-wrap: nowrap; }
.hcard { position: relative; flex: none; height: var(--h); width: calc(var(--h) * .7176); border-radius: calc(var(--h) * .05); }
.hcard img { width: 100%; height: 100%; border-radius: inherit; display: block; box-shadow: -2px 0 6px rgba(0, 0, 0, .55); }
.hcard.playable img { box-shadow: 0 0 0 2px var(--play), 0 0 10px 2px rgba(69, 215, 255, .5); }
.hcard.dim img { filter: brightness(.6) saturate(.6); }

/* stack item as a whole card */
.stkc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 3px; border-radius: 8px; background: rgba(250, 248, 240, .95); color: #1b1b1b; border-top: 4px solid var(--you); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); min-width: 0; }
.stkc.theirs { border-top-color: var(--opp); }
.stkc.top { box-shadow: 0 0 0 2px var(--prio), 0 2px 8px rgba(0, 0, 0, .5); }
.stkc img { border-radius: 4px; display: block; }
.stkc .tx { text-align: center; font-size: 9.5px; line-height: 1.15; min-width: 0; max-width: 100%; }
.stkc .tx b { display: block; font-size: 10px; }
.stkc .tx small { display: block; color: #555; font-size: 9px; }

.btn.handbtn { min-height: 52px; font-size: 15px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.btn.handbtn.has { box-shadow: inset 0 0 0 2px var(--play), 0 0 10px rgba(69, 215, 255, .4); }

/* shared shell for F, G, H, I */
:is(.L-F, .L-G, .L-H, .L-I) .stage { display: grid; grid-template-columns: 1fr 76px; column-gap: 6px; }
:is(.L-F, .L-G, .L-H, .L-I) .board { display: grid; row-gap: 4px; min-width: 0; min-height: 0; padding-top: 3px; }
:is(.L-F, .L-G, .L-H, .L-I) .rail { display: flex; flex-direction: column; gap: 6px; padding: 3px 0 2px; min-height: 0; }
:is(.L-F, .L-G, .L-H) .band { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 2px; }
.side { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 0; }
.side .row.crs { flex: 1; align-self: stretch; }
.side .row.crs.opp { align-items: flex-end; }
.side .row.crs.you { align-items: flex-start; padding-top: 8px; }
:is(.L-G, .L-H, .L-I) .side .row.crs { align-items: center; padding-top: 0; }

/* F: land piles */
.L-F .board { grid-template-rows: 24px 1fr 20px 1fr 24px 82px; }
:is(.L-F, .L-J, .L-K, .L-L, .L-M) .row.crs { flex-wrap: nowrap; justify-content: flex-start; }

/* G: hand drawer */
.L-G .board { grid-template-rows: 24px 1fr 20px 1fr 24px; }
.L-G .rail { width: 76px; }

/* H: focus, whole cards */
.L-H .m-mine { grid-template-rows: 70px 20px 1fr 24px 82px; }
.L-H .m-theirs { grid-template-rows: 24px 1fr 20px 70px 82px; }
.L-H .m-combat { grid-template-rows: 24px 1fr 20px 1fr 24px 62px; }
.L-H .m-spot { grid-template-rows: 70px 1fr 24px 82px; }
.L-H .strip { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 3px; border-radius: 10px; background: var(--hud); box-shadow: inset 0 0 0 1px var(--hudline); min-height: 0; min-width: 0; }
.L-H .shud { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; font-weight: 700; font-size: 10.5px; height: 15px; }
.L-H .shud .swap { margin-left: auto; font-weight: 600; color: #aebbb5; font-size: 9.5px; }
.L-H .minis { flex: 1; min-height: 0; justify-content: flex-start; flex-wrap: nowrap; }
.L-H .row.crs.big { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 5px 6px 0; scrollbar-width: thin; align-items: center; }
.L-H .mid { display: grid; grid-template-columns: 236px 1fr; gap: 8px; min-height: 0; }
.L-H .spot { display: flex; flex-direction: column; gap: 5px; min-height: 0; justify-content: center; }
.L-H .sp-top { display: flex; gap: 8px; padding: 5px; border-radius: 10px; background: rgba(250, 248, 240, .96); color: #1b1b1b; border-left: 5px solid var(--opp); box-shadow: 0 0 0 2px var(--prio), 0 4px 12px rgba(0, 0, 0, .5); }
.L-H .sp-top.mine { border-left-color: var(--you); }
.L-H .sp-top img { height: 104px; border-radius: 6px; flex: none; }
.L-H .sp-tx { font-size: 10.5px; line-height: 1.3; min-width: 0; }
.L-H .sp-tx small { color: #555; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.L-H .sp-tx b { display: block; font-size: 13px; margin: 2px 0; }
.L-H .sp-tx p { margin: 2px 0; }
.L-H .sp-tx .tg { color: #6a1b9a; font-weight: 700; }
.L-H .sp-rest { display: flex; align-items: center; gap: 6px; }
.L-H .sp-rest > small { font-size: 9.5px; color: #aebbb5; width: 60px; }
.L-H .sp-cards { display: flex; gap: 6px; }
.L-H .sp-cards .stkc { flex-direction: row; border-top: 0; border-left: 4px solid var(--opp); max-width: 170px; }
.L-H .sp-cards .stkc.mine { border-left-color: var(--you); }
.L-H .sp-cards .stkc .tx { text-align: left; }
.L-H .side .piles { grid-template-rows: repeat(2, auto); }

/* I: side by side */
.L-I .board { grid-template-columns: 1fr 16px 1fr; grid-template-rows: 1fr 96px; column-gap: 4px; }
.L-I .half { display: grid; grid-template-rows: 24px 54px 1fr; gap: 4px; min-width: 0; min-height: 0; }
.L-I .half .piles { justify-content: center; }
.L-I .half .row.crs { align-content: center; }
.L-I .mid { display: flex; align-items: center; justify-content: center; border-left: 1px dashed rgba(255, 255, 255, .18); margin-left: 7px; }
.L-I .mid span { writing-mode: vertical-rl; font-size: 9px; color: rgba(255, 255, 255, .45); letter-spacing: .1em; text-transform: uppercase; margin-left: -8px; }
.L-I .bottom { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.L-I .bandv { display: flex; align-items: center; gap: 8px; height: 18px; min-width: 0; }
.L-I .bottom .row.hand { flex: 1; min-height: 0; }
.L-H .strow { display: flex; flex: 1; min-height: 0; gap: 6px; align-items: center; }
.L-H .strow .minis { align-self: stretch; }
.L-H .strow .piles { gap: 5px; padding-top: 3px; }

/* ================================================================ icons
   Magic symbols: Mana font (.ms …). UI / zone icons: game-icons.net SVGs used as masks (take the text color). */
.gi { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; background-color: currentColor; -webkit-mask: var(--gi) center / contain no-repeat; mask: var(--gi) center / contain no-repeat; flex: none; }
.gi-poker-hand { --gi: url(vendor/game-icons/poker-hand.svg); }
.gi-deck { --gi: url(vendor/game-icons/deck.svg); }
.gi-tombstone { --gi: url(vendor/game-icons/tombstone.svg); }
.gi-vortex { --gi: url(vendor/game-icons/vortex.svg); }
.gi-scroll-unfurled { --gi: url(vendor/game-icons/scroll-unfurled.svg); }
.gi-open-book { --gi: url(vendor/game-icons/open-book.svg); }
.gi-hourglass { --gi: url(vendor/game-icons/hourglass.svg); }
.gi-crossed-swords { --gi: url(vendor/game-icons/crossed-swords.svg); }
.gi-shield { --gi: url(vendor/game-icons/shield.svg); }
.gi-targeted { --gi: url(vendor/game-icons/targeted.svg); }
/* keyword/type icons sit on the text line; cost circles keep Mana's own line-height, which centres the symbol */
.screen .ms:not(.ms-cost) { line-height: 1; }
.zc .gi { margin-right: 2px; opacity: .85; }
.zc b { margin-left: 0; }
.story .gi { vertical-align: -.2em; }
.btn.icon .gi { width: 1.25em; height: 1.25em; }
.btn.handbtn .gi { width: 1.1em; height: 1.1em; vertical-align: -.15em; }
.ms-cost { flex: none; }
.mana .ms-cost { margin: 0 .5px; }
.mana .mp.used { opacity: .28; }
.tile .kw { letter-spacing: 0; display: inline-flex; gap: 2px; align-items: center; }
.fc .fkw { display: inline-flex; gap: 2px; padding: 2px 3px; border-radius: 5px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 9.5px; letter-spacing: 0; text-shadow: none; }
.bdg .ms, .bdg .gi { vertical-align: -.1em; }
.bdg.ctr .ms, .bdg.dmg .ms { margin-right: 2px; }
.bdg.zz { background: #1b2a44; color: #cfe0ff; font-size: 11px; line-height: 16px; }
.bdg.role { font-size: 11px; line-height: 16px; padding: 0 5px; }
.bdg.tgtb { left: 50%; top: 38%; transform: translate(-50%, -50%); background: var(--tgt); color: #fff; font-size: 15px; line-height: 22px; min-width: 22px; border-radius: 11px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); }
.htile .ty .ms, .hrow small .ms { margin-right: 1px; opacity: .9; }
.chip i.r, .chip i.g { font-size: 11px; padding: 1px 3px; }
.chip .ms-tap { opacity: .9; }
.chip .k { letter-spacing: 0; display: inline-flex; gap: 2px; }
.lg-icons { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
#legend .ms, #legend .gi { font-size: 15px; margin-right: 4px; }
#legend .gi { width: 15px; height: 15px; }

/* ================================================================ J–M: hand held as a fan, life centered */
:is(.L-J, .L-K, .L-L, .L-M) .stage { bottom: 0; display: grid; grid-template-columns: 1fr 76px; column-gap: 6px; }
:is(.L-J, .L-K, .L-L, .L-M) .rail { display: flex; flex-direction: column; gap: 6px; padding: 3px 0 23px; min-height: 0; }
:is(.L-J, .L-K, .L-L, .L-M) .board { position: relative; display: grid; grid-template-rows: 30px 1fr 18px 1fr var(--fanH); row-gap: 4px; min-width: 0; min-height: 0; padding-top: 3px; --fanH: 112px; }
:is(.L-J, .L-K, .L-L, .L-M) .board.idle { --fanH: 54px; }
.L-M .board.acting { --fanH: 84px; }
.L-J .board.acting { --fanH: 124px; }
:is(.L-J, .L-K, .L-L, .L-M) .band { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 2px; }
.topbar { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 8px; min-width: 0; }
.topbar .hud { height: 26px; }
.fanzone { position: relative; min-height: 0; z-index: 5; }
.mybar { position: absolute; left: 0; bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; max-width: 112px; padding: 5px 7px; border-radius: 10px; background: var(--hud); box-shadow: inset 0 0 0 1px var(--hudline); font-size: 10.5px; z-index: 0; }
.mybar b { flex-basis: 100%; }
.board.idle .mybar { max-width: none; bottom: 23px; }
.board.idle .mybar b { flex-basis: auto; }
.fanc { position: absolute; border-radius: 6% / 4.3%; transform-origin: 50% 100%; transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg)); transition: transform .18s ease-out; }
.fanc img { width: 100%; height: 100%; border-radius: inherit; display: block; box-shadow: -3px 0 8px rgba(0, 0, 0, .6); }
.fanc.playable img { box-shadow: 0 0 0 2.5px var(--play), 0 0 14px 4px rgba(69, 215, 255, .6), -3px 0 8px rgba(0, 0, 0, .6); }
.fanc.dim img { filter: brightness(.68) saturate(.65); }
.fanc.lift { --dy: var(--lift) !important; --rot: 0deg !important; z-index: 40 !important; }
.fanc.lift img { filter: none; }
.idle .fanc img { filter: brightness(.8); }

/* life badges */
.lifeb { position: absolute; left: 50%; z-index: 30; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; transform: translateX(-50%); }
.lifeb b { font-weight: 900; }
.lifeb small { font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin-top: 1px; }
.lifeb.opp { top: 0; }
.lifeb.you { bottom: 12px; }
.lifeb.circle, .lifeb.ring { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #3d434a, #0e1112 72%); }
.lifeb.circle { box-shadow: 0 0 0 3px #caa65e, 0 0 0 5px rgba(0, 0, 0, .65), 0 4px 12px rgba(0, 0, 0, .6); }
.lifeb.ring { box-shadow: 0 0 0 3.5px var(--pc), 0 0 0 5.5px rgba(0, 0, 0, .65), 0 4px 12px rgba(0, 0, 0, .6); }
.lifeb.circle b, .lifeb.ring b { font-size: 22px; }
.lifeb.crest { width: 48px; height: 54px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .7)); }
.lifeb.crest::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#ffffff55, transparent 45%), var(--pc); clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%); z-index: -1; }
.lifeb.crest b { font-size: 22px; margin-top: -6px; }
.lifeb.crest.opp { top: -3px; }
.lifeb.pill { min-width: 60px; height: 30px; padding: 0 10px; border-radius: 15px; background: var(--pc); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 3px 8px rgba(0, 0, 0, .55); }
.lifeb.pill b { font-size: 18px; }
.lifeb.pill.opp { top: 1px; }
.lifeb.pill.you { bottom: 16px; }
.lifeb.prio.circle, .lifeb.prio.ring { box-shadow: 0 0 0 3px var(--prio), 0 0 0 5px rgba(0, 0, 0, .65), 0 0 16px 5px rgba(255, 213, 74, .55); }
.lifeb.prio.pill { box-shadow: 0 0 0 2px var(--prio), 0 0 14px 4px rgba(255, 213, 74, .55); }
.lifeb.prio.crest { filter: drop-shadow(0 0 6px rgba(255, 213, 74, .9)); }