:root {
  --fW: #e6dcb8; --fU: #3a7ccc; --fB: #4a3858; --fR: #c4442b; --fG: #368a40; --fN: #8b8f99;
  --mW: #f7f0d4; --mU: #63aef2; --mB: #a68bbd; --mR: #f07352; --mG: #69c574; --mN: #c9ccd3;
  --bg: #0f1418; --panel: #182128; --panel2: #202c35; --line: #2f3e4a; --ink: #e9eef2; --dim: #8fa1ae;
  --gold: #f3c454; --red: #ff5d5d; --green: #5fe08a; --blue: #67b7ff;
  --parch: #f3eee2; --parch-ink: #1d1a16;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.35 system-ui, 'Segoe UI', Roboto, sans-serif; }
body { overflow: hidden; }
#app { height: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); background: #0d1317; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
h1, h2 { margin: 0; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.grow { flex: 1; }
.linkish { background: none; border: none; color: var(--blue); padding: 2px 4px; }
.linkish:hover { text-decoration: underline; }

.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-weight: 600; transition: transform .08s, background .15s; white-space: nowrap; }
.btn:hover { background: #2a3a46; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(#f7cf62, #d9a42c); color: #231a05; border-color: #f7d77a; }
.btn.primary:hover { background: linear-gradient(#ffd977, #e6b23a); }
.btn.danger { background: linear-gradient(#e2533f, #b4321f); color: #fff; border-color: #f07a66; }
.btn.big { padding: 12px 26px; font-size: 17px; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.chip.big { padding: 8px 14px; }

/* ---------- mana symbols */
.pip { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; font-size: .78em; font-weight: 800; color: #1b1b1b; border: 1px solid rgba(0,0,0,.45); box-shadow: 0 1px 0 rgba(0,0,0,.4); vertical-align: middle; line-height: 1; }
.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-N { background: var(--mN); } .pip-C { background: #c9c3b8; }
.perm.artifact .pip-C { position: absolute; bottom: 2px; right: 2px; font-size: 9px; }
.pip-hyb { background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); font-size: .6em; width: 2.1em; height: 2.1em; letter-spacing: -.5px; }

/* ---------- full card */
.card { --cs: 10px; font-size: var(--cs); width: 15em; height: 21em; border-radius: .9em; padding: .55em; position: relative; flex: none;
  background: linear-gradient(135deg, var(--fa), var(--fb)); box-shadow: 0 .3em .9em rgba(0,0,0,.55), inset 0 0 0 .12em rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: .3em; color: var(--parch-ink); user-select: none; }
.card-head, .card-type { background: var(--parch); border-radius: .45em; padding: .25em .5em; display: flex; align-items: center; gap: .3em; box-shadow: inset 0 0 0 .08em rgba(0,0,0,.25); }
.cname { font-weight: 800; font-size: 1.12em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccost { display: flex; gap: .1em; font-size: 1.15em; }
.card-art { flex: 0 0 7.6em; border-radius: .4em; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.55), transparent 65%), linear-gradient(160deg, var(--fa), var(--fb)); box-shadow: inset 0 0 0 .12em rgba(0,0,0,.35); }
.card-art span { font-size: 5.2em; filter: drop-shadow(0 .06em .08em rgba(0,0,0,.45)); line-height: 1; }
.card-type { font-size: .92em; font-weight: 700; }
.card-type .weight { margin-left: auto; font-weight: 600; opacity: .7; font-size: .9em; }
.card-text { flex: 1; background: var(--parch); border-radius: .45em; padding: .35em .55em; font-size: .98em; overflow: hidden; box-shadow: inset 0 0 0 .08em rgba(0,0,0,.25); }
.card-text p { margin: 0 0 .3em; }
.card-text .flavor { font-style: italic; opacity: .72; font-size: .92em; }
.card-pt { position: absolute; right: .5em; bottom: .45em; background: var(--parch); border-radius: .45em; padding: .1em .55em; font-weight: 900; font-size: 1.3em; box-shadow: 0 0 0 .12em rgba(0,0,0,.45); }
.card.col-W { color: var(--parch-ink); }
.card.land .card-art { flex: 1; }
.card.land .card-text { flex: 0 0 auto; }
.card.back { background: radial-gradient(circle at 50% 35%, #3a5d3b, #13241a 70%); display: grid; place-items: center; }
.back-inner { text-align: center; font-size: 3em; color: #b7e3a6; }
.back-inner b { display: block; font-size: .32em; letter-spacing: .1em; }
.card.back.mini { --cs: 2.1px; }

/* ---------- menu */
.menu { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; padding: 20px;
  background: radial-gradient(ellipse at 50% 30%, #1d3a2a, #0b1013 70%); }
.logo { font-size: clamp(48px, 9vw, 96px); letter-spacing: -2px; font-weight: 900; text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.logo span { color: var(--gold); }
.tag { color: #c8d7cf; max-width: 520px; margin: 0; font-size: 16px; }
.menu-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; color: var(--dim); font-size: 15px; }
.parade { font-size: 38px; display: flex; gap: 10px; }
.parade span { animation: bob 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.2s); }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* ---------- top bars, deck select */
.topbar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.topbar h1 { font-size: 20px; }
.decks, .rules-page { height: 100%; overflow: auto; }
.decks > h2 { padding: 0 18px; margin-top: 8px; }
.deck-row { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 14px; padding: 12px 18px 18px; }
.decks > h2 { margin-top: 14px !important; }
.deck-tile.col-multi { background: linear-gradient(120deg, var(--fa) 0%, var(--fa) 35%, var(--fb) 65%, #10161a 120%); }
.deck-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.deck-tile { width: 100%; border: 2px solid transparent; border-radius: 14px; padding: 14px; text-align: left; background: linear-gradient(160deg, var(--fa), #10161a 85%); min-height: 190px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .12s; color: #fff; }
.deck-tile:hover { transform: translateY(-3px); }
.deck-tile.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(243,196,84,.35), 0 6px 20px rgba(0,0,0,.4); }
.deck-tile.col-W { color: #1d1a16; background: linear-gradient(160deg, var(--fW), #59614e 95%); }
.deck-art { font-size: 34px; letter-spacing: 2px; }
.deck-name { font-weight: 800; font-size: 17px; }
.deck-blurb { font-size: 13px; opacity: .9; }
.opp-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 18px 18px; }
.deck-list { padding: 0 18px 30px; }
.deck-list h2 { margin: 10px 0; }
.card-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.counted { position: relative; }
.counted .count { position: absolute; top: -6px; right: -6px; background: var(--gold); color: #231a05; border-radius: 999px; padding: 2px 8px; font-weight: 900; }

/* ---------- rules page */
.rules-body { max-width: 860px; margin: 0 auto; padding: 10px 20px 60px; }
.rules-body section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 14px 0; }
.rules-body h2 { font-size: 18px; margin-bottom: 6px; color: var(--gold); }
.rules-body li { margin: 4px 0; }
.kw-list { columns: 2; }

/* ---------- game board */
.game { display: grid; grid-template-columns: 1fr 290px; height: 100vh; }
.board { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; background: radial-gradient(ellipse at 50% 50%, #1f3327 0%, #13201a 55%, #0c120f 100%); }
.zone { display: flex; flex-direction: column; min-height: 0; }
.zone.opp { background: linear-gradient(#1b1218aa, transparent); }
.row { display: flex; gap: 8px; padding: 4px 12px; align-items: center; justify-content: center; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; }
.row.creatures { min-height: 140px; padding-top: 14px; padding-bottom: 14px; }
.row.lands { min-height: 58px; }
.empty-row { color: #ffffff22; font-size: 13px; }
.mid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 6px 12px; border-top: 1px solid #ffffff14; border-bottom: 1px solid #ffffff14; background: #0007; min-height: 74px; }
.phases { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--dim); }
.phases .whose { font-weight: 800; font-size: 12px; margin-bottom: 2px; }
.whose.me { color: var(--green); } .whose.them { color: var(--red); }
.phases .ph { display: inline; }
.phases { flex-direction: row; flex-wrap: wrap; max-width: 300px; column-gap: 6px; }
.phases .whose { width: 100%; }
.ph.on { color: var(--gold); font-weight: 800; }
.stack { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.stack-item { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; animation: pop .25s ease-out; }
.stack-item.theirs { border-color: #ff5d5d88; }
.stack-item.mine { border-color: #5fe08a88; }
.semoji { font-size: 26px; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.prompt { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.ptext { max-width: 360px; text-align: right; }
.pbtns { display: flex; flex-direction: column; gap: 6px; }
.err { color: #ffb3a8; font-size: 12px; margin-top: 4px; }
.xrow { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-top: 6px; }
.xbtn { min-width: 34px; }
.numx { width: 58px; }

.pbar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.pbar.active .avatar { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(243,196,84,.4); }
.avatar { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; }
.aname { font-weight: 700; }
.life { font-weight: 900; font-size: 18px; color: #ffd0d0; }
.life.low { color: var(--red); animation: throb 1s infinite; }
@keyframes throb { 50% { opacity: .55; } }
.stat { background: #0006; border: 1px solid #ffffff14; border-radius: 8px; padding: 3px 8px; font-size: 13px; }
.ohand { display: flex; justify-content: center; gap: 2px; height: 50px; padding: 2px; }

/* permanents */
.pwrap { position: relative; flex: none; transition: margin .2s; }
.pwrap:has(.perm.creature.tapped) { margin: 0 13px; }
.perm { position: relative; border-radius: 10px; background: linear-gradient(150deg, var(--fa), var(--fb)); box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.35); transition: transform .2s, box-shadow .15s; cursor: default; }
.perm.creature { width: 92px; height: 118px; padding: 4px; display: flex; flex-direction: column; align-items: center; }
.perm .pname { background: var(--parch); color: var(--parch-ink); font-size: 10px; font-weight: 800; border-radius: 5px; padding: 1px 4px; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm .art { font-size: 44px; line-height: 1; margin-top: 6px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.perm .kws { position: absolute; left: 4px; bottom: 4px; display: flex; gap: 1px; font-size: 12px; font-style: normal; max-width: 52px; flex-wrap: wrap; }
.perm .kws i { font-style: normal; background: #000a; border-radius: 4px; padding: 0 2px; }
.perm .ppt { position: absolute; right: 4px; bottom: 4px; background: var(--parch); color: var(--parch-ink); border-radius: 5px; padding: 0 5px; font-weight: 900; font-size: 14px; }
.perm .ppt.up { background: #c9f7d5; } .perm .ppt.down { background: #ffd0c9; }
.perm .ppt b { color: #c0260f; }
.perm .dmg { position: absolute; top: 22px; right: -6px; background: var(--red); color: #fff; font-weight: 900; border-radius: 999px; padding: 0 6px; font-size: 12px; }
.perm .counters { position: absolute; top: 22px; left: -6px; background: var(--green); color: #032; font-weight: 900; border-radius: 999px; padding: 0 6px; font-size: 12px; }
.perm .tok { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 9px; text-transform: uppercase; background: #000a; color: #fff; padding: 0 4px; border-radius: 4px; }
.perm.land { width: 44px; height: 52px; display: grid; place-items: center; }
.perm.artifact { width: 70px; height: 62px; padding: 3px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(150deg, #9aa3ad, #5d6670); }
.perm.artifact .pname { font-size: 9px; }
.perm.artifact .art { font-size: 24px; margin-top: 2px; }
.perm.artifact .attached { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); background: #dfe6ec; color: #111; font-size: 9px; font-weight: 800; border-radius: 999px; padding: 0 5px; white-space: nowrap; }
.perm.artifact.tapped { transform: rotate(90deg) scale(.85); }
.pip-any { background: conic-gradient(var(--mW), var(--mU), var(--mB), var(--mR), var(--mG), var(--mW)); position: absolute; bottom: 2px; right: 2px; font-size: 9px; }
.perm .gear { position: absolute; top: 20px; left: 2px; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.perm .gear i { font-style: normal; background: #dfe6ecdd; border-radius: 4px; padding: 0 1px; }
.card.artifact { --fa: #a7b0ba; --fb: #5f6872; }
.opp-pick { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.decks > h2 small { font-weight: 400; font-size: 13px; margin-left: 6px; }
.perm.land .art { font-size: 24px; margin: 0; }
.perm.land .pip { position: absolute; bottom: 2px; right: 2px; font-size: 9px; }
.perm.tapped { transform: rotate(90deg) scale(.92); filter: brightness(.7); }
.perm.land.tapped { transform: rotate(90deg) scale(.85); }
.perm.sick .art { opacity: .65; }
.perm.sick::after { content: '💤'; position: absolute; top: 18px; right: 2px; font-size: 12px; }
.zone.me .perm.attacking { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--red), 0 0 18px rgba(255,93,93,.6); }
.zone.opp .perm.attacking { transform: translateY(14px); box-shadow: 0 0 0 3px var(--red), 0 0 18px rgba(255,93,93,.6); }
.zone.me .perm.attacking.tapped { transform: translateY(-14px) rotate(90deg) scale(.92); filter: none; }
.zone.opp .perm.attacking.tapped { transform: translateY(14px) rotate(90deg) scale(.92); filter: none; }
.perm.blocking { box-shadow: 0 0 0 3px var(--blue), 0 0 14px rgba(103,183,255,.6); }
.perm.can-act { box-shadow: 0 0 0 2px var(--green), 0 0 12px rgba(95,224,138,.55); cursor: pointer; }
.perm.selected-attack { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--red), 0 0 18px rgba(255,93,93,.7); cursor: pointer; }
.perm.selected { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(243,196,84,.8); cursor: pointer; transform: translateY(-6px); }
.perm.selected-block { box-shadow: 0 0 0 3px var(--blue), 0 0 14px rgba(103,183,255,.7); cursor: pointer; }
.targetable, .perm.targetable { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(243,196,84,.9) !important; cursor: crosshair !important; animation: glow 1s ease-in-out infinite; }
.chosen { box-shadow: 0 0 0 3px #fff !important; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 6px rgba(243,196,84,.4); } }
.blocknote { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); background: var(--blue); color: #021; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; white-space: nowrap; z-index: 2; }

/* hand */
.hand { display: flex; justify-content: center; height: 132px; padding: 0 20px; position: relative; }
.hand-card { margin: 0 -14px; transition: transform .15s; position: relative; z-index: 1; }
.hand .card { --cs: 9.4px; }
.hand-card:hover { transform: translateY(-74px) scale(1.08); z-index: 5; }
.card.playable { box-shadow: 0 0 0 .3em var(--green), 0 0 1.6em rgba(95,224,138,.7); cursor: pointer; }
.card.picked { box-shadow: 0 0 0 .35em var(--red), 0 0 1.6em rgba(255,93,93,.7); transform: translateY(-1em); }
.card.casting { box-shadow: 0 0 0 .35em var(--gold); transform: translateY(-2em); }

/* sidebar */
.sidebar { display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); min-height: 0; }
.preview-slot { padding: 10px; display: grid; place-items: center; min-height: 300px; border-bottom: 1px solid var(--line); }
.preview-slot .card { --cs: 17px; }
.hint { color: var(--dim); font-size: 13px; }
.log { flex: 1; overflow-y: auto; padding: 8px 10px; font-size: 12.5px; color: #c5d1da; }
.log div { padding: 1px 0; }
.log .turnline { color: var(--gold); font-weight: 700; margin-top: 6px; }
.side-btns { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.side-btns button { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }

/* overlays */
.overlay { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; z-index: 50; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; max-width: 92vw; max-height: 92vh; overflow: auto; text-align: center; box-shadow: 0 20px 60px #000; }
.dialog.wide { min-width: min(900px, 92vw); }
.dialog h2 { margin-bottom: 8px; }
.dialog.result h1 { font-size: 64px; }
.dialog.result.win h1 { color: var(--gold); }
.dialog.result.lose h1 { color: var(--red); }
.mull-hand { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.mull-hand .hand-card { margin: 0; }
.mull-hand .card { --cs: 10px; cursor: pointer; }
.mull-hand .hand-card:hover { transform: translateY(-6px); }
.row-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; align-items: center; }
.row-btns.left { justify-content: flex-start; }
.dialog .card-grid { justify-content: center; }

/* ---------- editor */
.editor { height: 100%; display: flex; flex-direction: column; }
.ed-body { flex: 1; display: grid; grid-template-columns: 290px 1fr 330px; min-height: 0; }
.ed-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; padding: 10px; gap: 8px; }
.search { width: 100%; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.ed-items { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ed-item { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; text-align: left; }
.ed-item:hover { background: var(--panel2); }
.ed-item.on { background: var(--panel2); border-color: var(--gold); }
.ed-emoji { font-size: 20px; width: 26px; text-align: center; }
.ed-name { flex: 1; font-size: 13px; }
.ed-cost { display: flex; gap: 1px; font-size: 12px; }
.ed-pt { font-weight: 800; font-size: 12px; color: var(--dim); width: 32px; text-align: right; }
.edited { font-style: normal; font-size: 10px; background: var(--gold); color: #231a05; border-radius: 999px; padding: 0 6px; margin-left: 4px; font-weight: 800; }
.ed-main { overflow-y: auto; padding: 16px 22px 40px; }
.ed-form { max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.ed-title { display: flex; align-items: center; gap: 10px; }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld > span { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.fld small { color: var(--dim); }
.bad { color: var(--red); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.chk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.suggest { background: #f3c45418; border: 1px solid #f3c45455; border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.ab-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--panel2); border-radius: 8px; padding: 6px; margin-bottom: 4px; }
.ab-row input[type=number] { width: 58px; }
.ab-row .x { background: none; border: none; color: var(--red); font-size: 16px; margin-left: auto; }
.notice { background: #5fe08a1c; border: 1px solid #5fe08a55; border-radius: 8px; padding: 8px 12px; }
.ed-preview { border-left: 1px solid var(--line); display: grid; place-items: start center; padding-top: 24px; }
.ed-preview .card { --cs: 19px; }

/* ---------- smaller screens */
@media (max-height: 820px) {
  .row.creatures { min-height: 118px; padding-top: 10px; padding-bottom: 10px; }
  .perm.creature { width: 80px; height: 100px; }
  .perm .art { font-size: 36px; margin-top: 4px; }
  .hand { height: 108px; }
  .hand .card { --cs: 8.4px; }
  .ohand { height: 38px; }
  .card.back.mini { --cs: 1.7px; }
  .preview-slot .card { --cs: 14px; }
  .preview-slot { min-height: 0; }
}
@media (max-width: 1100px) {
  .game { grid-template-columns: 1fr 220px; }
  .preview-slot .card { --cs: 12px; }
  .ed-body { grid-template-columns: 240px 1fr; }
  .ed-preview { display: none; }
  .deck-row { grid-template-columns: repeat(3, 1fr); }
}
.edited.new { background: var(--green); color: #032; }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; }
.deck-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--panel2); border-radius: 8px; padding: 3px 8px; font-size: 13px; }
.deck-count input { width: 56px; }
.costin { width: 74px; }
[data-kindsel] { margin-left: auto; }
.deck-tile:not(.col-W) { text-shadow: 0 1px 3px #000, 0 0 8px #0009; }
.grave-pick { cursor: pointer; }
.grave-pick.off { opacity: .35; cursor: default; }
.grave-pick .card.targetable { animation: glow 1s ease-in-out infinite; }
.dive-ready { box-shadow: 0 0 0 2px var(--blue), 0 0 12px rgba(103,183,255,.7); animation: glow 1.4s ease-in-out infinite; }
.dive-pick { position: relative; margin: 0; cursor: pointer; }
.dive-pick:hover { transform: translateY(-4px); }
.dive-tag { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: var(--blue); color: #021; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; display: flex; gap: 2px; align-items: center; }

/* Piles of identical permanents */
.pstack { position: relative; display: flex; flex: none; }
.pstack > .pwrap { margin: 0 !important; }
.pstack.land > .pwrap + .pwrap { margin-left: -36px !important; }
.pstack.artifact > .pwrap + .pwrap { margin-left: -58px !important; }
.pstack.creature > .pwrap + .pwrap { margin-left: -78px !important; }
.pstack.creature.tapped { margin: 0 13px; }
.pstack .stack-count { position: absolute; top: -8px; right: -8px; z-index: 3; background: var(--gold); color: #231a05; font-weight: 900; font-size: 11px; border-radius: 999px; padding: 0 6px; box-shadow: 0 1px 4px #000a; pointer-events: none; }
.pstack.land.tapped .stack-count, .pstack.artifact.tapped .stack-count { right: -14px; }
@media (max-height: 820px) { .pstack.creature > .pwrap + .pwrap { margin-left: -66px !important; } }
.hatch-pick { background: none; border: none; padding: 0; cursor: pointer; transition: transform .15s; }
.hatch-pick:hover { transform: translateY(-6px) scale(1.04); }
.hatch-pick .card { --cs: 12px; }
.cnt-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #f3c45412; border: 1px dashed #f3c45455; border-radius: 6px; padding: 4px 6px; font-size: 13px; }
.cnt-add { margin-left: 4px; }
.namein { width: 90px; }
.perm.artifact.enchantment { background: linear-gradient(150deg, var(--fa), var(--fb)); box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.35), 0 0 10px rgba(255,255,255,.15); }
.card.enchantment .card-art { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.75), transparent 70%), linear-gradient(160deg, var(--fa), var(--fb)); }
.scry-pick { position: relative; }
.scry-pick.bottomed .card { opacity: .45; filter: grayscale(.6); }
.scry-tag { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: var(--gold); color: #231a05; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.scry-pick.bottomed .scry-tag { background: var(--red); color: #fff; }

/* ---------- deck builder */
.deckbuilder { height: 100%; display: flex; flex-direction: column; }
.db-body { flex: 1; display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
.db-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.db-filters { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); }
.db-pool { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.db-card { position: relative; cursor: pointer; transition: transform .1s; }
.db-card:hover { transform: translateY(-3px); }
.db-card .card { --cs: 8.5px; }
.db-card.in .card { box-shadow: 0 0 0 .3em var(--gold), 0 .3em .9em rgba(0,0,0,.55); }
.db-card .count { position: absolute; top: -6px; right: -6px; background: var(--gold); color: #231a05; border-radius: 999px; padding: 1px 8px; font-weight: 900; z-index: 2; }
.db-right { overflow-y: auto; padding: 12px 14px 30px; display: flex; flex-direction: column; gap: 8px; }
.db-title { font-size: 18px; font-weight: 800; }
.db-total { font-weight: 800; color: var(--gold); }
.db-total.ok { color: var(--green); }
.db-warn { background: #ff5d5d18; border: 1px solid #ff5d5d55; border-radius: 8px; padding: 5px 9px; font-size: 13px; }
.db-list h4 { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.db-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.db-row b { width: 18px; text-align: center; }
.db-n { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; width: 22px; height: 22px; padding: 0; line-height: 1; }
.db-emoji { width: 22px; text-align: center; }
.db-name { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-cost { display: flex; gap: 1px; font-size: 12px; }
.curve { display: flex; gap: 4px; align-items: flex-end; height: 76px; padding: 4px 0; }
.curve .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.curve .bar span { width: 100%; background: linear-gradient(var(--gold), #c08a20); border-radius: 4px 4px 0 0; min-height: 2px; }
.curve .bar b { font-size: 11px; order: -1; }
.curve .bar i { font-style: normal; font-size: 11px; color: var(--dim); }
.pad { padding: 0 18px; }
.card.reduced .ccost { background: #5fe08a55; border-radius: .4em; box-shadow: 0 0 0 .12em var(--green); }
.grant { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--gold); background: #f3c45410; border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }

/* Keep the menu, deck tools and match reachable in narrow browser windows. */
.board, .ed-main, .db-left, .db-right, .deck-col { min-width: 0; }
@media (max-width: 760px) {
  .menu { justify-content: flex-start; overflow-y: auto; padding-top: 30px; }
  .parade { flex-wrap: wrap; justify-content: center; font-size: 30px; max-width: 100%; gap: 8px; }
  .topbar { gap: 8px; padding: 10px; }
  .topbar select { max-width: 100%; }
  .deck-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-art { font-size: 25px; }
  .ed-body, .db-body { display: block; overflow-y: auto; }
  .ed-list { height: 35vh; min-height: 220px; border-bottom: 1px solid var(--line); }
  .ed-main { overflow: visible; padding: 14px; }
  .ed-title { flex-wrap: wrap; }
  .ed-form input, .ed-form select, .ed-form textarea { max-width: 100%; min-width: 0; }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .db-left { height: 48vh; min-height: 330px; border-bottom: 1px solid var(--line); }
  .db-right { overflow: visible; }
  .game { display: block; overflow-y: auto; }
  .board { display: flex; flex-direction: column; }
  .mid { grid-template-columns: minmax(0, 1fr); }
  .prompt { justify-content: space-between; flex-wrap: wrap; }
  .ptext { text-align: left; }
  .pbtns { flex-direction: row; flex-wrap: wrap; }
  .pbar { flex-wrap: wrap; gap: 6px; }
  .row { justify-content: flex-start; }
  .hand { justify-content: flex-start; height: 215px; overflow-x: auto; padding: 15px; }
  .hand .hand-card { margin: 0 5px; }
  .hand .hand-card:hover { transform: translateY(-5px); }
  .preview-slot { display: none; }
  .sidebar .log { max-height: 160px; flex: none; }
  .kw-list { columns: 1; }
}
@media (max-width: 480px) {
  .deck-row { grid-template-columns: minmax(0, 1fr); }
  .deck-tile { min-height: 150px; }
  .dialog { padding: 16px 12px; }
  .dialog .mull-hand .card { --cs: 8px; }
}