:root {
  --bg: #12141a; --panel: #1b1e27; --panel2: #232733; --line: #343a4a; --ink: #e9e6df; --dim: #9a9fae;
  --gold: #e0b354; --red: #d2483f; --yel: #e2c044; --blu: #3f8fd9; --good: #6fcf7f; --bad: #ff6b5e;
  --cw: 84px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.35 "Segoe UI", system-ui, sans-serif; overflow: hidden; }
#app { height: 100%; }
button { font: inherit; }
a { color: var(--gold); }

/* ---------- cards ---------- */
.card { position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: 7px; background: #0c0d11; border: 2px solid #4a4f5f; flex: 0 0 auto; overflow: hidden; user-select: none; box-shadow: 0 2px 6px #0009; font-size: calc(var(--cw) / 7.6); }
.card .art { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
.card .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4em .35em .3em; text-align: center; font-weight: 700; font-size: .92em; line-height: 1.05; background: linear-gradient(transparent, #000d 55%); text-shadow: 0 1px 2px #000; }
.card.k-action .nm, .card.k-ar .nm, .card.k-dr .nm, .card.k-block .nm, .card.k-weapon .nm, .card.k-equipment .nm { padding-bottom: 1.75em; }
.card .cost { position: absolute; top: .25em; right: .25em; width: 1.75em; height: 1.75em; border-radius: 50%; background: #1a1c22; border: .14em solid var(--gold); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 1.05em; }
.card .pitch { position: absolute; top: .3em; left: .3em; display: flex; gap: .15em; padding: .2em .3em; background: #000a; border-radius: 1em; }
.card .pitch i { width: .62em; height: .62em; border-radius: 50%; display: block; }
.card.p1 { border-color: var(--red); } .card.p1 .pitch i { background: var(--red); }
.card.p2 { border-color: var(--yel); } .card.p2 .pitch i { background: var(--yel); }
.card.p3 { border-color: var(--blu); } .card.p3 .pitch i { background: var(--blu); }
.card .st { position: absolute; bottom: .2em; min-width: 1.6em; height: 1.6em; padding: 0 .2em; font-weight: 800; font-size: 1.1em; display: grid; place-items: center; color: #fff; text-shadow: 0 1px 2px #000; }
.card .st.pw { left: .2em; background: #b5342c; border-radius: .3em .9em .3em .9em; }
.card .st.df { right: .2em; background: #4b5a70; border-radius: .9em .3em .9em .3em; border: .1em solid #cfd6e4; }
.card .badge { position: absolute; left: 50%; transform: translateX(-50%); top: 36%; padding: .1em .45em; border-radius: 1em; font-weight: 800; font-size: .95em; background: #000c; border: 1px solid #fff5; white-space: nowrap; }
.card .badge.bt { color: #ffd98a; top: 64%; font-size: .75em; } .card .badge.bc { color: #9fd0ff; top: 50%; font-size: .75em; }
.card .badge.bp { color: var(--good); } .card .badge.bd { color: var(--bad); top: 50%; } .card .badge.bl { color: var(--gold); top: 22%; font-size: .75em; }
.card .ctag { position: absolute; top: 2.2em; left: 0; right: 0; text-align: center; font-size: .72em; background: #000b; color: var(--gold); padding: .1em; }
.card.sm { --cw: 58px; }
.card.big { --cw: 250px; border-width: 3px; }
.card.back { background: repeating-linear-gradient(45deg, #2a2137, #2a2137 6px, #3a2c4d 6px, #3a2c4d 12px); border-color: #6b5a86; display: grid; place-items: center; }
.card.back .cnt { font-size: 1.6em; font-weight: 800; background: #000a; border-radius: .4em; padding: .1em .4em; }
.card.legal { cursor: pointer; box-shadow: 0 0 0 2px #fff8, 0 0 14px 4px var(--gold); animation: glow 1.4s ease-in-out infinite; }
.card.legal:hover { transform: translateY(-5px); }
@keyframes glow { 50% { box-shadow: 0 0 0 2px #fffb, 0 0 20px 7px var(--gold); } }
.card.k-token { border-style: dashed; border-color: #b9a36a; }

/* ---------- layout ---------- */
.game { display: grid; grid-template-columns: 1fr 300px; height: 100%; }
.board { display: grid; grid-template-rows: auto minmax(150px, 1fr) auto auto auto; min-width: 0; height: 100%; padding: 6px 8px; gap: 5px; background: radial-gradient(ellipse at 50% 45%, #2a2f3e, #14161d 75%); }
.side { display: grid; grid-template-columns: 150px auto auto 1fr; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 10px; background: #0005; border: 1px solid #fff1; }
.side.active { border-color: var(--gold); box-shadow: inset 0 0 22px #e0b35422; }
.herobox { position: relative; height: 122px; border-radius: 9px; overflow: hidden; border: 2px solid #5a6072; background: #000; }
.side.active .herobox { border-color: var(--gold); }
.portrait { position: absolute; inset: 0; background-size: cover; background-position: center 18%; opacity: .8; }
.hname { position: absolute; top: 0; left: 0; right: 0; padding: 3px 7px; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(#000c, transparent); }
.hname .you { font-size: 11px; color: var(--gold); border: 1px solid var(--gold); border-radius: 8px; padding: 0 5px; margin-left: 4px; }
.life { position: absolute; left: 8px; bottom: 26px; font-size: 40px; font-weight: 800; line-height: 1; text-shadow: 0 2px 6px #000, 0 0 12px #000; color: #fff; }
.life::after { content: " ♥"; font-size: 18px; color: var(--red); }
.chips { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3px; padding: 3px; background: #000b; }
.chip { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: #2b3040; white-space: nowrap; }
.chip.ap { background: #6a4b12; color: #ffd98a; font-weight: 700; } .chip.res { background: #1d4468; color: #a8d4ff; font-weight: 700; }
.heroact { position: absolute; right: 6px; top: 28px; background: var(--gold); color: #000; font-weight: 700; padding: 2px 8px; border-radius: 8px; cursor: pointer; }
.gear { display: flex; gap: 5px; }
.slot { position: relative; width: calc(var(--cw) + 2px); height: calc(var(--cw) * 1.4 + 2px); border: 1px dashed #fff2; border-radius: 8px; }
.slot .card { position: absolute; inset: 0; margin: auto; }
.slotlbl { position: absolute; inset: 0; display: grid; place-items: center; color: #fff3; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.zl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin-bottom: 2px; white-space: nowrap; }
.row { display: flex; gap: 3px; flex-wrap: wrap; }
.zones { display: flex; gap: 8px; justify-content: flex-end; align-items: stretch; min-width: 0; }
.zone { min-width: 62px; display: flex; flex-direction: column; padding: 3px 5px; border-radius: 7px; background: #0003; border: 1px solid #fff1; min-height: calc(58px * 1.4 + 24px); }
.zone.click { cursor: pointer; } .zone.click:hover { border-color: var(--gold); }
.zone .card { --cw: 58px; }
.pitchrow { max-width: 190px; flex-wrap: nowrap; } .pitchrow .card + .card { margin-left: -30px; }
.backs { flex-wrap: nowrap; } .backs .card + .card { margin-left: -40px; }
.perms { min-width: 70px; padding: 3px 5px; border-radius: 7px; background: #0003; border: 1px solid #fff1; align-self: stretch; }
.empty, .nodef, .stackempty, .chainempty { color: #fff4; font-size: 12px; padding: 6px; }

.mid { display: grid; grid-template-columns: 1fr 170px; gap: 8px; min-height: 0; }
.chain { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 4px; border-radius: 10px; background: #0003; border: 1px solid #fff1; }
.chainempty { margin: auto; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.link { flex: 0 0 auto; padding: 5px 8px; border-radius: 9px; background: #1c1f29; border: 1px solid var(--line); }
.link.live { border-color: var(--gold); box-shadow: 0 0 12px #e0b35444; } .link.done { opacity: .62; }
.lhead { font-size: 11px; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.kw { margin-left: 6px; color: #000; background: var(--gold); border-radius: 7px; padding: 0 6px; text-transform: none; font-weight: 700; }
.lrow { display: flex; align-items: center; gap: 8px; }
.vs { text-align: center; min-width: 54px; }
.pwn { font-size: 26px; font-weight: 800; color: #ff8b80; line-height: 1; } .dfn { font-size: 26px; font-weight: 800; color: #b9c8e0; line-height: 1; }
.vsx { font-size: 10px; color: var(--dim); text-transform: uppercase; }
.res { margin-top: 3px; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 4px; } .res.hit { background: #7a1f19; } .res.blk { background: #2c3a52; }
.defs { display: flex; gap: 3px; max-width: 260px; flex-wrap: wrap; }
.stack { padding: 4px 6px; border-radius: 10px; background: #0003; border: 1px solid #fff1; overflow-y: auto; }
.layer { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; } .llbl { font-size: 11px; text-transform: uppercase; color: var(--gold); } .llbl span { color: var(--dim); text-transform: none; }

.prompt { display: flex; gap: 14px; align-items: center; justify-content: space-between; min-height: 64px; padding: 7px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.prompt.mine { border-color: var(--gold); background: linear-gradient(#2c2a1f, #1f1e19); }
.prompt.wait { opacity: .8; } .prompt.over { justify-content: center; gap: 24px; border-color: var(--gold); }
.ptitle { font-weight: 700; font-size: 16px; } .pbody { color: #cfd2db; font-size: 13px; max-width: 760px; } .pbody b, .ptitle b { color: var(--gold); }
.pbtns { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.btn { background: var(--panel2); color: var(--ink); border: 1px solid #56607a; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn:hover { border-color: var(--gold); } .btn.primary { background: var(--gold); color: #1a1405; border-color: #fff3; } .btn.ghost { background: transparent; color: var(--dim); }
.btn.tiny { padding: 2px 8px; font-size: 12px; } .btn.big { padding: 11px 26px; font-size: 17px; }
.hand { display: flex; justify-content: center; gap: 6px; min-height: calc(112px * 1.4 + 8px); padding-top: 6px; }
.hand .card { --cw: 112px; }

.sidebar { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border-left: 1px solid var(--line); min-height: 0; }
.topbar { display: flex; gap: 6px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--line); } .brand { font-weight: 800; letter-spacing: .12em; color: var(--gold); margin-right: auto; }
.log { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.loghead { padding: 5px 10px; font-size: 11px; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; }
.loglines { overflow-y: auto; padding: 0 9px 10px; }
.ll { padding: 2px 0 2px 7px; border-left: 3px solid transparent; font-size: 12.5px; color: #c9ccd6; }
.ll.lme { border-left-color: #4d8a5a; } .ll.lopp { border-left-color: #a34b45; }
.ll .cn { color: #fff; cursor: help; font-weight: 600; } .ll b { color: var(--gold); }
.ll.t-trigger, .ll.t-resolve, .ll.t-nextApplied { opacity: .6; font-size: 11.5px; }
.ll.t-damage { color: #ffb0a8; } .ll.t-clashOfArms { color: #fff; }
.turnline { display: block; margin: 7px 0 2px -10px; padding: 3px 10px; background: var(--panel2); color: var(--gold); font-weight: 700; border-radius: 0 7px 7px 0; }

.zoom { position: fixed; top: 12px; left: 12px; z-index: 50; display: none; gap: 12px; padding: 12px; border-radius: 12px; background: #0e1016f2; border: 1px solid var(--gold); box-shadow: 0 10px 40px #000; pointer-events: none; max-width: 620px; }
.zoom.on { display: flex; } .zoom.left { left: 12px; right: auto; } .zoom:not(.left) { left: auto; right: 316px; }
.ztext { width: 300px; } .zname { font-size: 19px; font-weight: 800; } .ztype { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .zstats { color: var(--dim); margin: 3px 0 8px; }
.zrules { font-size: 14.5px; line-height: 1.45; } .sym { color: var(--gold); font-weight: 700; } .sym.r { color: #ff7b6e; }
.zlive { margin-top: 8px; color: var(--good); font-weight: 600; } .zwhy { margin-top: 8px; color: var(--bad); } .zkw { margin-top: 7px; font-size: 12px; color: var(--dim); border-top: 1px solid var(--line); padding-top: 5px; }

.spot { position: fixed; left: calc(50% - 280px); top: 16%; z-index: 30; text-align: center; pointer-events: none; animation: pop .25s ease-out; }
.spotlbl { margin-top: 8px; font-size: 17px; font-weight: 700; background: #000c; border-radius: 9px; padding: 4px 12px; display: inline-block; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.modal { position: fixed; inset: 0; z-index: 60; background: #000a; display: grid; place-items: center; }
.mbox { background: var(--panel); border: 1px solid var(--gold); border-radius: 12px; padding: 16px 18px; max-width: 880px; max-height: 86vh; overflow: auto; }
.mtitle { font-size: 17px; font-weight: 700; margin-bottom: 10px; } .mcards { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.cmenu { position: fixed; z-index: 70; display: grid; gap: 5px; padding: 8px; background: var(--panel); border: 1px solid var(--gold); border-radius: 10px; box-shadow: 0 8px 30px #000; }
.howto { max-width: 640px; } .howto p { margin: 7px 0; } .howto h2 { margin: 0 0 8px; color: var(--gold); }

/* ---------- menu ---------- */
.menu { height: 100%; overflow-y: auto; padding: 22px 30px; background: radial-gradient(ellipse at 50% 0, #2f2a3d, #12141a 70%); }
.mhead h1 { margin: 0; font-size: 46px; letter-spacing: .2em; color: var(--gold); } .sub { color: var(--dim); margin-bottom: 14px; }
.mcols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .mcol h2 { margin: 0 0 8px; font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.deckrow { display: flex; gap: 10px; flex-wrap: wrap; }
.deckcard { width: 112px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); background: var(--panel); cursor: pointer; }
.deckcard.sel { border-color: var(--gold); box-shadow: 0 0 16px #e0b35466; } .dart { height: 104px; background-size: cover; background-position: center 15%; }
.dname { padding: 5px 8px 0; font-weight: 700; } .dtype { padding: 0 8px 7px; color: var(--dim); font-size: 12px; }
.ddetail { margin-top: 10px; padding: 10px 12px; background: #0004; border-radius: 10px; font-size: 13px; } .ddetail h3 { margin: 0 0 4px; } .ddetail h4 { margin: 8px 0 3px; color: var(--gold); font-size: 12px; text-transform: uppercase; }
.ddetail p { margin: 4px 0; color: #c9ccd6; } .rule { font-style: italic; } .dcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .drow { cursor: help; } .drow span { color: var(--dim); display: inline-block; width: 22px; }
.mstart { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 18px 0 10px; } .mstart input { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px; }
.mfoot { color: var(--dim); font-size: 12px; max-width: 900px; margin: 0 auto; text-align: center; }

@media (max-height: 860px) { :root { --cw: 70px; } .hand .card { --cw: 96px; } .hand { min-height: calc(96px * 1.4 + 8px); } .herobox { height: 104px; } .life { font-size: 32px; } }
@media (max-height: 720px) { :root { --cw: 60px; } .hand .card { --cw: 84px; } .hand { min-height: calc(84px * 1.4 + 8px); } }

/* ---------- feedback ---------- */
.life.hurt { animation: hurt .7s ease-out; }
@keyframes hurt { 0% { color: #ff3b2f; transform: scale(1.5); } 100% { color: #fff; transform: scale(1); } }
.dmgfly { position: absolute; left: 60px; top: -6px; font-size: 26px; color: #ff5a4e; animation: fly 1.1s ease-out forwards; text-shadow: 0 2px 4px #000; }
@keyframes fly { from { opacity: 1; transform: translateY(8px); } to { opacity: 0; transform: translateY(-34px); } }

.tray { display: flex; gap: 6px; flex-wrap: wrap; max-width: 520px; } .tray .card { --cw: 78px; }

.devent { padding: 0 8px 7px; font-size: 11px; color: var(--gold); line-height: 1.2; } .devent b { color: #fff; }
.dname { font-size: 13px; line-height: 1.15; } .deckrow { max-height: 330px; overflow-y: auto; padding: 4px; }