:root {
  --bg: #050b16; --panel: rgba(6, 16, 32, .82); --edge: #1f6fb5; --glow: #3fc2ff; --orange: #ff9a2e; --txt: #dbeaff; --dim: #8fa9c9;
  --good: #46e08a; --bad: #ff5d5d;
  --MM: #e0443a; --TEKU: #35c7e8; --SIL: #a46bf0; --DRONE: #c7e03a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; overflow: hidden; }
button { font: inherit; color: var(--txt); background: linear-gradient(#17406b, #0c2644); border: 1px solid var(--edge); border-radius: 6px; padding: 6px 14px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--glow); box-shadow: 0 0 8px var(--glow); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: linear-gradient(#ffb04a, #e0761a); color: #1b0d00; border-color: #ffd08a; font-weight: 700; }
.hidden { display: none !important; }

#app { height: 100vh; display: flex; flex-direction: column; background: #02060d; }
#topbar { display: flex; align-items: center; gap: 16px; padding: 4px 14px; background: #040a14; border-bottom: 1px solid var(--edge); height: 54px; flex: none; }
#logo { height: 44px; }
#status { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
#turnInfo { font-weight: 700; color: var(--glow); letter-spacing: .03em; }
#eventInfo { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topbtns { display: flex; gap: 8px; }

#main { flex: 1; display: grid; grid-template-columns: 1fr 290px; min-height: 0; }
#side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--edge); background: #060e1b; }

/* ---- the playmat: a 4:3 board, everything is positioned in % of the mat so it lines up with the printed boxes ---- */
#stage { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; background: #02060d; overflow: hidden; }
#board { position: relative; aspect-ratio: 4 / 3; width: min(100%, calc((100vh - 54px) * 4 / 3)); max-height: 100%; container-type: size; overflow: hidden;
  background: url(../assets/mat.jpg) center / 100% 100% no-repeat; }
#layer { position: absolute; inset: 0; }

/* Realm cards sit exactly inside the orange boxes of the mat */
.rslot { position: absolute; top: 44.8%; width: 10.9%; height: 10.5%; }
.realm { position: relative; width: 100%; height: 100%; border-radius: .5cqw; background: #000; box-shadow: 0 0 1.2cqw rgba(255, 154, 46, .55); }
.realm.down { box-shadow: none; }
.realm img { width: 100%; height: 100%; display: block; border-radius: .5cqw; object-fit: cover; }
.realm img.back { object-position: 50% 12%; filter: brightness(.75); }
.realm .num { position: absolute; left: 0; top: 0; background: var(--orange); color: #1b0d00; font-weight: 800; font-size: max(10px, 1cqw); border-radius: .5cqw 0 .6cqw 0; padding: 0 .55cqw; }
.realm .esc { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .8); font-size: max(9px, .85cqw); text-align: center; padding: .1cqw .2cqw; border-radius: 0 0 .5cqw .5cqw; white-space: nowrap; overflow: hidden; }
.realm .esc b { color: var(--orange); }
.realm .own { position: absolute; right: .2cqw; top: .2cqw; background: #0a2a4c; border: 1px solid var(--glow); border-radius: 1cqw; font-size: max(8px, .7cqw); padding: 0 .4cqw; }

/* piles live in the printed DECK / DISCARD slots */
.slot { position: absolute; left: 5.4%; width: 8.4%; border-radius: .6cqw; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slot .cnt { position: absolute; right: .3cqw; bottom: .3cqw; background: #000c; border: 1px solid var(--glow); border-radius: 1cqw; padding: 0 .6cqw; font-weight: 700; font-size: max(11px, 1.05cqw); }
.slot.junk { cursor: pointer; } .slot.junk:hover { box-shadow: 0 0 1.2cqw var(--glow); }
.slot.empty img { opacity: .15; }
.fin { position: absolute; left: 86.6%; width: 9%; text-align: center; font-size: max(10px, .95cqw); }
.fin .circ { font-weight: 800; font-size: max(14px, 1.9cqw); color: var(--glow); text-shadow: 0 0 .8cqw #000; }
.fin .th { display: flex; justify-content: center; gap: .2cqw; margin-top: .2cqw; }
.fin .th img { width: 45%; border-radius: .2cqw; }
.fin small { display: block; color: #cfe3ff; text-shadow: 0 0 .5cqw #000; }

/* stack zones: above (opponent) and below (you) each realm */
.zone { position: absolute; width: 16.6%; display: flex; flex-wrap: wrap; gap: .5cqw; justify-content: center; --sw: 11.2cqw; }
.zone.opp { top: 4.2%; bottom: 55.8%; align-content: flex-end; }
.zone.me { top: 56.2%; bottom: 13%; align-content: flex-start; }
.zone.dense { --sw: 7.9cqw; }
.zone.dense2 { --sw: 6.2cqw; }
.stack { position: relative; width: var(--sw); background: #000b; border: 1px solid #22456d; border-radius: .4cqw; padding: .15cqw; transition: box-shadow .2s; }
.stack.mine { border-color: #2f9c63; } .stack.theirs { border-color: #9c3a3a; }
.stack .veh { position: relative; }
.stack .veh img { width: 100%; display: block; border-radius: .3cqw; aspect-ratio: 611 / 440; }
.sppbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: .2cqw; padding: .1cqw; background: linear-gradient(transparent, #000c); }
.sppbar span { background: #0b1b30e0; border: 1px solid #335a86; border-radius: .3cqw; padding: 0 calc(var(--sw) * .04); font-weight: 700; font-size: max(8px, calc(var(--sw) * .092)); white-space: nowrap; }
.sppbar span.esc { border-color: var(--orange); color: var(--orange); }
.sppbar span.ok { background: #124a2a; border-color: var(--good); color: var(--good); box-shadow: 0 0 .6cqw var(--good); }
.badges { position: absolute; left: .15cqw; top: .15cqw; display: flex; gap: .15cqw; flex-wrap: wrap; max-width: 95%; }
.badge { background: #000c; border: 1px solid #fff5; border-radius: 1cqw; font-size: max(8px, calc(var(--sw) * .078)); padding: 0 calc(var(--sw) * .035); font-weight: 700; white-space: nowrap; }
.badge.t-MM { border-color: var(--MM); color: var(--MM); } .badge.t-TEKU { border-color: var(--TEKU); color: var(--TEKU); }
.badge.t-SIL { border-color: var(--SIL); color: var(--SIL); } .badge.t-DRONE { border-color: var(--DRONE); color: var(--DRONE); }
.badge.bad { color: var(--bad); border-color: var(--bad); } .badge.good { color: var(--good); border-color: var(--good); }
.eqs { margin-top: .15cqw; display: flex; flex-direction: column; gap: .15cqw; }
.eq { position: relative; height: calc(var(--sw) * .2); min-height: 14px; border-radius: .3cqw; border: 1px solid #1a3a5f; background-size: 100% auto; background-position: 50% 4%; cursor: default; overflow: hidden; }
.eq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .1) 60%, transparent); }
.eq span { position: absolute; left: .3cqw; top: 50%; transform: translateY(-50%); z-index: 2; font-size: max(8px, calc(var(--sw) * .088)); font-weight: 700; text-shadow: 0 0 3px #000, 0 0 3px #000; white-space: nowrap; }
.eq i { position: absolute; right: .2cqw; top: 50%; transform: translateY(-50%); z-index: 2; font-style: normal; font-size: max(8px, calc(var(--sw) * .08)); background: #000b; border-radius: 1cqw; padding: 0 .35cqw; color: var(--orange); }
.eq.t-mod { border-color: #a23ea0; } .eq.t-shift { border-color: #1fa85a; } .eq.t-ac { border-color: #9aa7b5; }

.targetable { outline: 3px solid var(--good); box-shadow: 0 0 16px var(--good), inset 0 0 12px rgba(70, 224, 138, .35); cursor: crosshair !important; animation: pulse 1.1s infinite alternate; }
.targetable.haz { outline-color: var(--bad); box-shadow: 0 0 16px var(--bad); }
@keyframes pulse { to { filter: brightness(1.35); } }

/* ---- overlays on the mat ---- */
.strip { position: absolute; z-index: 5; display: flex; align-items: center; gap: .9cqw; padding: .25cqw .9cqw; background: var(--panel); border: 1px solid #12365d; border-radius: .6cqw; font-size: max(11px, 1.1cqw); flex-wrap: nowrap; white-space: nowrap; }
#oppStrip { top: .5%; left: 15%; right: 13%; }
#bottomUI { position: absolute; left: 15%; right: 13%; bottom: 0; z-index: 6; display: flex; flex-direction: column; align-items: stretch; gap: .35cqw; pointer-events: none; }
#bottomUI > * { pointer-events: auto; }
#myStrip { position: static; }
.strip .nm { font-weight: 700; font-size: max(12px, 1.25cqw); }
.strip .nm small { color: var(--dim); font-weight: 400; margin-left: 4px; }
.strip.active .nm { color: var(--orange); }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pip { width: .95cqw; height: .95cqw; min-width: 9px; min-height: 9px; border-radius: 50%; border: 1px solid var(--orange); }
.pip.on { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.flag { background: #4a1620; color: #ffb3b3; border: 1px solid var(--bad); border-radius: 10px; padding: 0 8px; font-size: max(10px, .95cqw); }
.backs { display: inline-flex; vertical-align: middle; }
.backs img { height: 2.6cqw; min-height: 24px; margin-left: -1.1cqw; border-radius: 3px; box-shadow: -2px 0 4px #000a; }
.backs img:first-child { margin-left: 0; }
.strip .badge { font-size: max(10px, .95cqw); padding: 0 .5cqw; }

#controls { display: flex; align-items: center; gap: .8cqw; padding: .3cqw .9cqw; background: var(--panel); border: 1px solid var(--edge); border-radius: .6cqw; min-height: 3.4cqw; flex-wrap: wrap; font-size: max(11px, 1.1cqw); }
#controls .hint { flex: 1; color: #bcd3f0; min-width: 120px; }
#controls .hint b { color: var(--orange); }
#controls button { padding: .35cqw 1cqw; font-size: max(11px, 1.05cqw); }

/* hand tucks under the bottom edge of the mat and lifts when hovered */
#hand { display: flex; align-items: flex-end; justify-content: center; height: 13.5cqh; overflow: visible; position: relative; }
.hcard { flex: none; position: relative; margin: 0 .25cqw; cursor: pointer; transform: translateY(46%); transition: transform .14s; }
.hcard img { height: 20cqh; display: block; border-radius: .5cqw; border: 2px solid #1d3d63; background: #000; }
.hcard.land img { height: 13.8cqh; }
.hcard:hover { transform: translateY(-4%); z-index: 20; }
.hcard.ok img { border-color: var(--good); box-shadow: 0 0 .9cqw rgba(70, 224, 138, .7); }
.hcard.no img { filter: brightness(.55) saturate(.7); }
.hcard.no:hover img { filter: brightness(.9); }
.hcard.sel { transform: translateY(-4%); z-index: 19; }
.hcard.sel img { border-color: var(--orange); box-shadow: 0 0 1.4cqw var(--orange); }
.hcard .ap { position: absolute; left: .3cqw; top: .3cqw; background: #000c; border: 1px solid var(--orange); color: var(--orange); border-radius: 50%; width: 2cqw; height: 2cqw; min-width: 18px; min-height: 18px; text-align: center; font-weight: 800; line-height: 1.9cqw; font-size: max(11px, 1.1cqw); }

#preview { padding: 10px; border-bottom: 1px solid var(--edge); flex: none; min-height: 150px; }
#preview img { width: 100%; border-radius: 8px; display: block; }
#preview .ph { color: var(--dim); text-align: center; padding: 50px 10px; }
#preview .info { margin-top: 6px; font-size: 13px; line-height: 1.35; }
#preview .info h3 { margin: 0 0 2px; font-size: 16px; color: var(--glow); }
#preview .tag { display: inline-block; background: #0f2c4e; border: 1px solid #285b94; border-radius: 8px; padding: 0 7px; margin: 0 4px 3px 0; font-size: 12px; }
#log { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: 13px; line-height: 1.35; }
#log div { padding: 1px 0; color: #b8cde6; }
#log .turn { color: var(--glow); font-weight: 700; margin-top: 7px; border-top: 1px solid #12365d; padding-top: 4px; }
#log .em { color: #ffd27a; } #log .bad { color: #ff9a9a; } #log .good { color: var(--good); } #log .haz { color: #ff7b5a; font-weight: 600; } #log .play { color: #d7f0ff; } #log .win { color: var(--orange); font-weight: 800; font-size: 15px; }

#modal { position: fixed; inset: 0; background: rgba(2, 6, 14, .82); z-index: 50; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; }
.box { background: linear-gradient(#0c2442, #071428); border: 2px solid var(--edge); border-radius: 12px; padding: 16px 20px; max-width: min(1100px, 96vw); max-height: 94vh; overflow: auto; box-shadow: 0 0 40px #000; }
.box h2 { margin: 0 0 4px; color: var(--glow); }
.box p { margin: 4px 0 10px; color: #c4d8f2; }
.opts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0; }
.opt { width: 170px; text-align: center; cursor: pointer; border: 2px solid transparent; border-radius: 8px; padding: 4px; }
.opt.land { width: 230px; }
.opt:hover { border-color: var(--orange); background: #ffffff10; }
.opt img { width: 100%; border-radius: 6px; display: block; }
.opt div { font-size: 13px; margin-top: 3px; }
.box .foot { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.box .btnrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0; }
.haz-img { height: 230px; border-radius: 8px; display: block; margin: 0 auto 8px; box-shadow: 0 0 20px var(--bad); }
.settings label { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.settings select, .settings input[type=text] { background: #04101f; color: var(--txt); border: 1px solid var(--edge); border-radius: 5px; padding: 4px 8px; font: inherit; }
.rules { max-width: 900px; font-size: 14px; line-height: 1.45; display: flex; gap: 18px; }
.rules img { height: 520px; border-radius: 8px; }
.rules h4 { margin: 8px 0 2px; color: var(--orange); }
.rules ul { margin: 2px 0; padding-left: 18px; }
#toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); background: #0b2c52; border: 1px solid var(--glow); padding: 8px 18px; border-radius: 8px; z-index: 120; box-shadow: 0 0 20px #000; }
.winbox { text-align: center; padding: 20px 40px; }
.winbox h1 { font-size: 34px; margin: 0 0 8px; color: var(--orange); }

@media (max-width: 1100px) { #main { grid-template-columns: 1fr 220px; } }

/* ---------------- icons, escape meters ---------------- */
.ico { display: inline-block; height: calc(var(--sw, 11cqw) * .15); min-height: 12px; width: auto; border-radius: 3px; border: 1px solid #0008; background: #cfd6de; vertical-align: middle; }
.ico.team { background: #cfd6de; border-color: #0009; }
.ico.match { box-shadow: 0 0 0 2px var(--good), 0 0 8px var(--good); }
.icorow { display: flex; gap: .2cqw; align-items: center; flex-wrap: wrap; }
.badges .icorow { background: #000a; border-radius: 4px; padding: 1px 2px; }
.meter { position: absolute; left: 3%; right: 3%; bottom: calc(var(--sw, 11cqw) * .135); height: max(4px, .5cqw); background: #000a; border: 1px solid #335a86; border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #d9741a, #ffb04a); transition: width .5s; }
.meter.near i { background: linear-gradient(90deg, #c9b21a, #f2e04a); }
.meter.full i { background: linear-gradient(90deg, #2bbf6b, #6dffa8); box-shadow: 0 0 6px var(--good); }
.stack.rolling { animation: rolling 1.2s ease-in-out infinite alternate; }
@keyframes rolling { from { box-shadow: 0 0 0 rgba(70, 224, 138, 0); } to { box-shadow: 0 0 1.2cqw 2px rgba(70, 224, 138, .85); } }
.stack .rollTag { position: absolute; right: 0; top: -.9cqw; background: var(--good); color: #052a14; font-weight: 800; font-size: max(8px, calc(var(--sw, 11cqw) * .075)); border-radius: 1cqw; padding: 0 .4cqw; z-index: 3; }
.realm .esc .ico { height: max(11px, 1cqw); vertical-align: -2px; margin-left: 2px; }
#preview .tag .ico { height: 15px; margin-right: 3px; vertical-align: -3px; }

/* ---------------- animation overlay ---------------- */
#fxlayer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.flycard { position: fixed; z-index: 91; border-radius: 6px; box-shadow: 0 6px 20px #000a; transform-origin: center; }
.ring { position: fixed; border: 3px solid #46e08a; border-radius: 50%; animation: ringout .8s ease-out forwards; }
@keyframes ringout { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.burst { position: fixed; width: 0; height: 0; }
.burst span { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; animation: burstp .7s ease-out forwards; }
@keyframes burstp { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.1); opacity: 0; } }
.floattxt { position: fixed; transform: translateX(-50%); font-weight: 900; font-size: 20px; letter-spacing: .06em; text-shadow: 0 0 6px #000, 0 0 12px #000, 0 2px 0 #000; animation: floatup 1.5s ease-out forwards; white-space: nowrap; }
@keyframes floatup { from { transform: translate(-50%, 10px) scale(.7); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } to { transform: translate(-50%, -48px) scale(1); opacity: 0; } }
.flash { position: fixed; animation: flashout .65s ease-out forwards; }
@keyframes flashout { from { opacity: 1; } to { opacity: 0; } }
.banner { position: fixed; text-align: center; font-size: 54px; font-weight: 900; letter-spacing: .12em; font-style: italic; text-shadow: 0 0 20px currentColor, 0 4px 0 #000; animation: bannerin 1.7s ease-out forwards; }
@keyframes bannerin { 0% { transform: translateX(-60%) skewX(-12deg); opacity: 0; } 18% { transform: translateX(0) skewX(-12deg); opacity: 1; } 75% { transform: translateX(0) skewX(-12deg); opacity: 1; } 100% { transform: translateX(60%) skewX(-12deg); opacity: 0; } }
.confetti { position: fixed; top: -20px; width: 9px; height: 15px; animation: confall linear forwards; }
@keyframes confall { to { top: 105vh; transform: rotate(900deg); } }
.shake { animation: shaking .55s linear; }
@keyframes shaking { 0%, 100% { transform: translate(0); } 10% { transform: translate(-6px, 2px) rotate(-1deg); } 20% { transform: translate(6px, -2px) rotate(1deg); } 30% { transform: translate(-5px, -3px); } 40% { transform: translate(5px, 3px); } 50% { transform: translate(-4px, 2px); } 60% { transform: translate(4px, -2px); } 80% { transform: translate(-2px, 1px); } }
.flipin { animation: flipin .7s ease-out; }
@keyframes flipin { from { transform: perspective(500px) rotateY(90deg) scale(1.2); filter: brightness(2.2); } to { transform: perspective(500px) rotateY(0) scale(1); filter: none; } }

/* ---------------- deck builder ---------------- */
#builder { position: fixed; inset: 0; z-index: 70; background: #030810; display: flex; flex-direction: column; }
#builder header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #061426; border-bottom: 1px solid var(--edge); flex-wrap: wrap; }
#builder h2 { margin: 0 8px 0 0; color: var(--glow); font-size: 20px; }
#builder input[type=text], #builder select, #builder textarea { background: #04101f; color: var(--txt); border: 1px solid var(--edge); border-radius: 5px; padding: 5px 8px; font: inherit; }
#builder .bbody { flex: 1; display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
#builder .pool { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--edge); }
#builder .filters { display: flex; gap: 6px; align-items: center; padding: 8px 12px; flex-wrap: wrap; border-bottom: 1px solid #12365d; }
#builder .chip { padding: 3px 11px; border-radius: 14px; border: 1px solid #285b94; background: #0b1f38; cursor: pointer; user-select: none; }
#builder .chip.on { background: var(--orange); color: #1b0d00; border-color: #ffd08a; font-weight: 700; }
#builder .grid { flex: 1; overflow-y: auto; padding: 10px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; align-content: start; }
#builder .grid.landgrid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
#builder .pc { position: relative; cursor: pointer; border: 2px solid transparent; border-radius: 6px; }
#builder .pc img { width: 100%; display: block; border-radius: 5px; background: #000; }
#builder .pc:hover { border-color: var(--orange); }
#builder .pc .n { position: absolute; right: 4px; top: 4px; background: var(--orange); color: #1b0d00; font-weight: 800; border-radius: 12px; min-width: 24px; text-align: center; padding: 0 6px; }
#builder .pc.maxed img { filter: brightness(.55); }
#builder .pc .nm { font-size: 11px; text-align: center; color: var(--dim); margin-top: 2px; }
#builder .side { display: flex; flex-direction: column; min-height: 0; background: #060e1b; }
#builder .bprev { padding: 8px 12px; border-bottom: 1px solid #12365d; display: flex; gap: 10px; min-height: 130px; font-size: 12px; line-height: 1.3; }
#builder .bprev img { height: 120px; border-radius: 5px; }
#builder .stats { padding: 8px 12px; border-bottom: 1px solid #12365d; font-size: 13px; }
#builder .stats .bad { color: var(--bad); } #builder .stats .good { color: var(--good); }
#builder .dlist { flex: 1; overflow-y: auto; padding: 6px 12px; }
#builder .dlist h4 { margin: 8px 0 3px; color: var(--orange); font-size: 13px; }
#builder .row { display: flex; align-items: center; gap: 6px; padding: 1px 0; font-size: 13px; }
#builder .row img { height: 26px; border-radius: 3px; }
#builder .row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#builder .row button { padding: 0 8px; line-height: 20px; }
#builder .row .c { min-width: 22px; text-align: center; font-weight: 700; }
#builder .imp { width: min(600px, 90vw); height: 220px; display: block; margin: 8px 0; }


/* keep the card art fully visible: status strip sits BELOW the picture, team shown by border colour */
.sppbar { position: static; background: none; padding: .1cqw 0 0; }
.meter { position: static; margin: .15cqw 0 0; }
.badges { position: static; max-width: none; margin-top: .15cqw; }
.stack.tm-MM { border-color: var(--MM) !important; } .stack.tm-TEKU { border-color: var(--TEKU) !important; }
.stack.tm-SIL { border-color: var(--SIL) !important; } .stack.tm-DRONE { border-color: var(--DRONE) !important; }
.stack .rollTag { top: -.7cqw; }

/* ---- layout v3: no black bars (side panel absorbs spare width), compact bottom bar, stacks auto-fit their zone ---- */
#main { display: flex; }
#stage { flex: none; width: min(calc((100vh - 54px) * 4 / 3), calc(100vw - 290px)); }
#board { width: 100%; }
#side { flex: 1; min-width: 290px; }
#preview img { max-width: 440px; margin: 0 auto; }
#bottomUI { flex-direction: column; }
#bottomUI .row1 { display: flex; gap: .5cqw; align-items: stretch; }
#myStrip { flex: none; }
#controls { flex: 1; min-width: 0; }
.zone.me { bottom: 17.5%; }
.zone.opp { top: 5%; }
.fin.mine { display: flex; flex-direction: column-reverse; }
.fin.mine .th { margin: 0 0 .3cqw; }
.hcard { margin: 0; }
.hcard + .hcard { margin-left: var(--ov, .25cqw); }
@media (max-width: 1100px) { #main { display: flex; } }

.fin.mine { display: block; }

/* ---- intro video + music widget ---- */
#intro { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; align-items: center; justify-content: center; transition: opacity .5s; }
#intro.out { opacity: 0; pointer-events: none; }
#intro video { width: 100%; height: 100%; object-fit: contain; background: #000; }
#introSkip { position: absolute; right: 22px; bottom: 22px; padding: 10px 22px; font-size: 16px; background: rgba(8, 20, 38, .8); border-color: #fff8; z-index: 2; }
#introPrompt { position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle, #0c2a4d, #02060d); }
#introPrompt h1 { margin: 0; font-size: 56px; letter-spacing: .12em; color: var(--orange); font-style: italic; text-shadow: 0 0 24px var(--orange); }
#introPrompt p { margin: 4px 0 26px; font-size: 22px; color: var(--glow); letter-spacing: .2em; }
#introPrompt button { font-size: 20px; padding: 12px 34px; }
#music { display: flex; align-items: center; gap: 6px; min-width: 0; }
#music button { padding: 4px 10px; }
#mTitle { color: var(--dim); font-size: 12px; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1250px) { #mTitle { display: none; } }

/* ================= v4: ring glow, realm symbol, team flash, charge, foil, home, packs ================= */
#fxlayer { z-index: 400; }
#ringglow { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: url(../assets/mat.jpg) center / 100% 100% no-repeat; filter: contrast(3.4) brightness(1.15) saturate(1.7);
  -webkit-mask-image: radial-gradient(ellipse 46% 40% at 50% 44%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 46% 40% at 50% 44%, #000 50%, transparent 100%); }
#ringglow.on { animation: ringglow 1.9s ease-in-out; }
@keyframes ringglow { 0% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: .85; } 100% { opacity: 0; } }
.realmsym { position: fixed; border-radius: 50%; animation: realmsym 1.7s ease-out forwards; box-shadow: 0 0 22px 6px rgba(255, 190, 90, .9), 0 0 60px 14px rgba(63, 194, 255, .55); }
@keyframes realmsym { 0% { transform: scale(.3) rotate(-25deg); opacity: 0; } 22% { transform: scale(1.18) rotate(0); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
.teamflash { position: fixed; border-radius: 6px; background: #cfd6de; border: 2px solid #fff9; animation: teamflash 1.2s ease-out forwards; box-shadow: 0 0 26px 8px var(--tc, #fff); }
.teamflash.t-MM { --tc: #e0443a; } .teamflash.t-TEKU { --tc: #35c7e8; } .teamflash.t-SIL { --tc: #a46bf0; } .teamflash.t-DRONE { --tc: #c7e03a; }
@keyframes teamflash { 0% { transform: scale(.4) translateY(10px); opacity: 0; } 20% { transform: scale(1.15); opacity: 1; } 65% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1) translateY(-18px); opacity: 0; } }
.arcs { position: fixed; left: 0; top: 0; pointer-events: none; overflow: visible; }
.arc { fill: none; stroke: #bff6ff; stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 0 5px #3fd0ff) drop-shadow(0 0 10px #3fd0ff); opacity: 0; animation: arcflick .55s steps(2, end) 2 forwards; }
.arc.gold { stroke: #fff3b0; filter: drop-shadow(0 0 6px #ffb04a); }
@keyframes arcflick { 0% { opacity: 0; } 20% { opacity: 1; } 50% { opacity: .3; } 70% { opacity: 1; } 100% { opacity: 0; } }
.chargecard { position: fixed; border-radius: 8px; animation: chargecard 1.2s ease-out forwards; box-shadow: 0 0 30px 8px #8fe9ff; }
@keyframes chargecard { 0% { transform: scale(.5) translateY(30px); opacity: 0; filter: brightness(3); } 25% { transform: scale(1.05); opacity: 1; filter: brightness(1.6); } 75% { opacity: 1; filter: none; } 100% { transform: scale(1) translateY(-20px); opacity: 0; } }
.charged { animation: charged 1.1s ease-out; }
@keyframes charged { 0% { box-shadow: 0 0 0 #8fe9ff; filter: brightness(1); } 30% { box-shadow: 0 0 2cqw 5px #8fe9ff, inset 0 0 1.5cqw #8fe9ff; filter: brightness(1.5); } 100% { box-shadow: 0 0 0 #8fe9ff; filter: brightness(1); } }

/* ---- foil / holographic shine ---- */
.foil { position: relative; --mx: 50%; --my: 50%; --ang: 115deg; }
.foil::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 4;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 28%),
    linear-gradient(var(--ang), transparent 15%, rgba(255, 0, 140, .32) 32%, rgba(0, 235, 255, .36) 45%, rgba(255, 245, 0, .32) 58%, rgba(120, 90, 255, .3) 70%, transparent 85%);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--mx) var(--my); mix-blend-mode: color-dodge; }
.foil:hover::after { opacity: .9; }
.foil.auto::after { opacity: .75; animation: foilauto 3.2s linear infinite; }
@keyframes foilauto { 0% { --mx: 0%; background-position: 0 0, 0% 0%; } 50% { background-position: 0 0, 100% 100%; } 100% { background-position: 0 0, 0% 0%; } }
.hcard.foil::after { border-radius: .5cqw; } .pvwrap { position: relative; border-radius: 8px; } .pvwrap img { border-radius: 8px; } .veh.foil::after { border-radius: .3cqw; }
#builder .pc.foil::after { border-radius: 5px; bottom: 16px; }

/* ---- main menu ---- */
#home { position: fixed; inset: 0; z-index: 150; background: #02060d; display: flex; align-items: center; justify-content: center; overflow: hidden; animation: homein .6s ease-out; }
@keyframes homein { from { opacity: 0; } to { opacity: 1; } }
#home .hbg { position: absolute; inset: -6%; background-size: cover; background-position: center; filter: blur(12px) brightness(.4) saturate(1.25); animation: hbgdrift 40s ease-in-out infinite alternate; }
@keyframes hbgdrift { from { transform: scale(1.04) translate(-1.5%, -1%); } to { transform: scale(1.14) translate(1.5%, 1%); } }
#home .hvig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .75) 100%); }
.hring { position: absolute; border-radius: 50%; left: 50%; top: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
.hring.r1 { width: min(86vh, 760px); background: conic-gradient(from 0deg, transparent 0 18%, rgba(63, 194, 255, .95) 30%, transparent 44%, rgba(255, 154, 46, .85) 68%, transparent 82%); animation: spin 9s linear infinite; filter: drop-shadow(0 0 12px #3fc2ff); }
.hring.r2 { width: min(72vh, 640px); background: conic-gradient(from 90deg, transparent 0 40%, rgba(255, 154, 46, .9) 55%, transparent 70%); animation: spin 14s linear infinite reverse; filter: drop-shadow(0 0 10px #ff9a2e); }
.hring.r3 { width: min(100vh, 880px); background: conic-gradient(from 200deg, transparent 0 60%, rgba(120, 220, 255, .6) 75%, transparent 90%); animation: spin 22s linear infinite; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
#home .hcol { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
#home .hlogo { width: min(520px, 60vw); filter: drop-shadow(0 0 22px rgba(63, 194, 255, .55)); animation: hlogo 4s ease-in-out infinite alternate; }
@keyframes hlogo { from { transform: translateY(-3px) scale(1); } to { transform: translateY(4px) scale(1.025); } }
#home .hmenu { display: flex; flex-direction: column; gap: 10px; width: min(380px, 80vw); }
#home .hmenu button { padding: 10px 16px; font-size: 16px; background: rgba(8, 24, 46, .78); backdrop-filter: blur(3px); letter-spacing: .05em; }
#home .hmenu button.big { padding: 13px 16px; font-size: 18px; font-weight: 600; }
#home .hmenu button.primary { font-size: 21px; padding: 16px; letter-spacing: .1em; font-style: italic; animation: gopulse 1.8s ease-in-out infinite alternate; }
@keyframes gopulse { from { box-shadow: 0 0 6px #ff9a2e; } to { box-shadow: 0 0 26px #ffb04a; } }
#home .hfoot { color: var(--dim); font-size: 13px; }
#home .hrealm { position: absolute; left: 14px; bottom: 10px; z-index: 2; color: #7f9bbdaa; font-size: 12px; }

/* ---- booster pack opening ---- */
#packs { position: fixed; inset: 0; z-index: 160; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 40%, #0d2a4d, #02060d 75%); overflow: hidden; }
#packs::before { content: ""; position: absolute; inset: 0; background: url(../assets/mat.jpg) center / cover; opacity: .18; filter: blur(3px); pointer-events: none; }
#packs .phead { position: relative; display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: rgba(4, 10, 20, .85); border-bottom: 1px solid var(--edge); }
#packs .phead h2 { margin: 0; flex: 1; color: var(--glow); letter-spacing: .08em; }
#packs .phead #pkColl { color: var(--dim); }
#packs .pbody { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
#packs .pstage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 10px; }
#packs .pprev { border-left: 1px solid var(--edge); background: rgba(5, 12, 24, .85); padding: 12px; overflow-y: auto; }
#packs .pprev img { width: 100%; display: block; border-radius: 8px; }
#packs .pprev .ph { color: var(--dim); text-align: center; padding: 60px 10px; }
#packs .pprev .info { margin-top: 8px; font-size: 13px; line-height: 1.35; } #packs .pprev h3 { margin: 0 0 3px; color: var(--glow); }
#packs .pfoot { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 8px; background: rgba(4, 10, 20, .85); border-top: 1px solid var(--edge); }
#packs .phint, #packs .phint2 { color: #bcd3f0; letter-spacing: .08em; margin-top: 14px; animation: hintpulse 1.6s ease-in-out infinite alternate; }
@keyframes hintpulse { from { opacity: .55; } to { opacity: 1; } }
.packwrap { position: relative; height: min(66vh, 640px); aspect-ratio: 544 / 892; cursor: pointer; filter: drop-shadow(0 20px 30px #000); }
.packwrap .pk { position: absolute; left: 0; top: 0; width: 100%; height: 100%; user-select: none; }
.packwrap.idle { animation: packbob 3s ease-in-out infinite; }
@keyframes packbob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
.packwrap.idle:hover { filter: drop-shadow(0 0 28px #3fc2ff) drop-shadow(0 20px 30px #000); }
.packwrap .sheen { position: absolute; inset: 3% 4%; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 48%, rgba(120, 220, 255, .35) 52%, transparent 70%); background-size: 250% 100%; mix-blend-mode: overlay; animation: sheen 3.4s ease-in-out infinite; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.packwrap.shake { animation: packshake .65s linear; }
@keyframes packshake { 0%, 100% { transform: rotate(0); } 10% { transform: translateX(-9px) rotate(-3deg); } 20% { transform: translateX(9px) rotate(3deg); } 30% { transform: translateX(-10px) rotate(-3.5deg); } 40% { transform: translateX(10px) rotate(3.5deg); } 50% { transform: translateX(-8px) rotate(-3deg); } 60% { transform: translateX(8px) rotate(3deg); } 80% { transform: translateX(-4px); } }
.packwrap .pk.top { transition: transform .75s cubic-bezier(.3, .1, .3, 1), opacity .75s ease-in; transform-origin: 90% 100%; }
.packwrap.torn .pk.top { transform: translate(60px, -150px) rotate(24deg); opacity: 0; }
.packwrap .pflash { position: absolute; left: 10%; right: 10%; top: 6%; height: 14%; background: radial-gradient(ellipse, #fff, rgba(150, 220, 255, .7) 40%, transparent 70%); opacity: 0; transform: scaleY(.2); pointer-events: none; mix-blend-mode: screen; }
.packwrap.torn .pflash { animation: pflash .9s ease-out; }
@keyframes pflash { 0% { opacity: 1; transform: scaleY(.2) scaleX(.6); } 40% { opacity: 1; transform: scaleY(2.6) scaleX(1.4); } 100% { opacity: 0; transform: scaleY(5) scaleX(1.8); } }
.packwrap.gone { transition: transform .8s ease-in, opacity .8s ease-in; transform: translateY(80px) scale(.85); opacity: 0; }
.pcards { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 22px 16px; padding: 10px 24px; --cw: min(11.5vw, 156px); --ch: calc(var(--cw) * 1.39); }
.pcard { width: var(--cw); height: var(--ch); perspective: 900px; cursor: pointer; opacity: 0; transform: translateY(160px) scale(.5); transition: transform .6s cubic-bezier(.2, .9, .3, 1.1) var(--d), opacity .4s ease var(--d); position: relative; }
.pcards.out .pcard { opacity: 1; transform: none; }
.pcard .pin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.2, .4, 1); }
.pcard.revealed .pin { transform: rotateY(180deg); }
.pcard:not(.revealed):hover .pin { transform: translateY(-8px) rotateY(8deg); }
.pcard .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 22px #000b; background: #000; }
.pcard .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard .face.fr { transform: rotateY(180deg); }
.pcard .face.fr img.land { position: absolute; left: 50%; top: 50%; width: var(--ch); height: var(--cw); transform: translate(-50%, -50%) rotate(90deg); }
.pcard.revealed:hover { z-index: 5; }
.pcard.rareglow .face.fr { box-shadow: 0 0 26px 6px #ffd27a, 0 0 60px 12px rgba(255, 150, 60, .5); }
.pcard.last:not(.revealed) .bk { box-shadow: 0 0 22px 4px rgba(255, 210, 120, .8); animation: lastglow 1.4s ease-in-out infinite alternate; }
@keyframes lastglow { from { box-shadow: 0 0 8px 1px rgba(255, 210, 120, .4); } to { box-shadow: 0 0 26px 6px rgba(255, 210, 120, .95); } }
.pcard .newbadge { position: absolute; right: -6px; top: -8px; z-index: 6; background: #ff3d6e; color: #fff; font-weight: 900; font-size: 12px; padding: 2px 8px; border-radius: 10px; box-shadow: 0 0 10px #ff3d6e; transform: rotate(8deg); }
.pcard .face.fr.foil::after { border-radius: 8px; }
#home .hmenu button.primary { background: linear-gradient(#ffb04a, #e0761a); color: #1b0d00; border-color: #ffd08a; }

.pcards { max-width: calc(var(--cw) * 4 + 16px * 3 + 48px); margin: 0 auto; left: 0; right: 0; }

/* ring glow v2: sharp bright glyphs + a soft halo, no tint on the rest of the mat */
#ringglow { filter: none; background: none; }
#ringglow::before, #ringglow::after { content: ""; position: absolute; inset: 0; background: url(../assets/mat.jpg) center / 100% 100% no-repeat; }
#ringglow::before { filter: contrast(5) brightness(1.5) saturate(2.4); }
#ringglow::after { filter: blur(7px) contrast(5) brightness(2.6) saturate(2.6); opacity: .9; }
#tokens { color: #ffd27a; font-weight: 700; background: rgba(40, 28, 6, .7); border: 1px solid #b8862a; border-radius: 14px; padding: 3px 12px; white-space: nowrap; }
.packwrap.locked { filter: grayscale(.8) brightness(.55) drop-shadow(0 20px 30px #000); cursor: not-allowed; }
#packs .phint2, #packs .phint { max-width: 90%; text-align: center; }

#home .hlogos { display: flex; flex-direction: column; align-items: center; gap: 0; animation: hlogo 4s ease-in-out infinite alternate; }
#home .hlogo { width: min(600px, 62vw, 62vh); animation: none; filter: drop-shadow(0 0 26px rgba(63, 194, 255, .5)) drop-shadow(0 6px 10px #000a); }
#home .htcg { width: min(440px, 46vw, 46vh); margin-top: -2vh; filter: drop-shadow(0 4px 8px #000c); }

.pcard .newbadge.dupe { background: #4a6a96; box-shadow: 0 0 8px #4a6a96; font-size: 11px; }

#home .hlogo { width: auto; height: min(34vh, 330px); max-width: 78vw; }
#home .hcol { gap: 14px; }

#introPrompt { background: radial-gradient(ellipse at 50% 45%, #123a68 0%, #061528 55%, #02060d 100%); }
#introPrompt .ipc { display: flex; flex-direction: column; align-items: center; gap: 30px; }
#introPrompt img { height: min(52vh, 480px); max-width: 82vw; width: auto; filter: drop-shadow(0 0 28px rgba(63, 194, 255, .55)) drop-shadow(0 6px 12px #000a); animation: hlogo 4s ease-in-out infinite alternate; }

/* ---- My Collection / selling duplicates ---- */
#sell { position: fixed; inset: 0; z-index: 165; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 30%, #0d2a4d, #02060d 75%); }
#sell .phead { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: rgba(4, 10, 20, .9); border-bottom: 1px solid var(--edge); }
#sell .phead h2 { margin: 0; flex: 1; color: var(--glow); letter-spacing: .08em; } #sell .phead span { color: #ffd27a; font-weight: 700; }
#sell .slbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(5, 14, 28, .9); border-bottom: 1px solid #12365d; flex-wrap: wrap; }
#sell .slbar #slFilters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; }
#sell .chip { padding: 3px 11px; border-radius: 14px; border: 1px solid #285b94; background: #0b1f38; cursor: pointer; user-select: none; }
#sell .chip.on { background: var(--orange); color: #1b0d00; border-color: #ffd08a; font-weight: 700; }
#sell .slsep { color: var(--dim); }
#sell #slAll.confirm { background: linear-gradient(#ff6a5a, #c42a1a); border-color: #ffb0a8; color: #fff; animation: gopulse 0.8s ease-in-out infinite alternate; }
#sell .slbody { flex: 1; display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
#sell .slgrid { overflow-y: auto; padding: 14px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; align-content: start; }
#sell .sc { display: flex; flex-direction: column; gap: 4px; }
#sell .scimg { position: relative; border-radius: 6px; overflow: hidden; background: #000; }
#sell .scimg img { width: 100%; display: block; aspect-ratio: 440 / 611; object-fit: cover; }
#sell .scimg.land img { aspect-ratio: 611 / 440; }
#sell .sc.missing .scimg img { filter: brightness(.25) grayscale(1); }
#sell .scn { position: absolute; right: 5px; top: 5px; background: var(--orange); color: #1b0d00; font-weight: 800; border-radius: 12px; padding: 0 8px; z-index: 6; }
#sell .scn.miss { background: #223; color: #8fa9c9; font-weight: 600; font-size: 11px; }
#sell .scname { font-size: 12px; color: var(--dim); text-align: center; min-height: 2.4em; }
#sell .scbtns { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
#sell .scbtns button { padding: 3px 8px; font-size: 12px; background: linear-gradient(#2a6a3d, #153d24); border-color: #46e08a; }
#sell .scone { text-align: center; font-size: 11px; color: #5f7a99; }
#sell .slempty { grid-column: 1 / -1; text-align: center; color: var(--dim); padding: 60px 10px; }
#sell .pprev { border-left: 1px solid var(--edge); background: rgba(5, 12, 24, .85); padding: 12px; overflow-y: auto; }
#sell .pprev img { width: 100%; display: block; border-radius: 8px; } #sell .pprev .ph { color: var(--dim); text-align: center; padding: 50px 10px; line-height: 1.6; }
#sell .pprev .info { margin-top: 8px; font-size: 13px; line-height: 1.35; } #sell .pprev h3 { margin: 0 0 3px; color: var(--glow); }
/* realm symbol: the transparent symbol itself, glowing in its own colour (--g is set per realm from js/symbols.js) */
.realmsym { border-radius: 0; box-shadow: none; --g: #bfe9ff; object-fit: contain; animation-name: realmsym2; animation-timing-function: ease-out; animation-fill-mode: forwards;
  filter: drop-shadow(0 0 8px var(--g)) drop-shadow(0 0 26px var(--g)) drop-shadow(0 0 60px var(--g)); }
@keyframes realmsym2 {
  0%   { transform: scale(.35) rotate(-18deg); opacity: 0; filter: drop-shadow(0 0 0 var(--g)); }
  22%  { transform: scale(1.18) rotate(0); opacity: 1; filter: drop-shadow(0 0 12px var(--g)) drop-shadow(0 0 38px var(--g)) drop-shadow(0 0 90px var(--g)); }
  60%  { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 8px var(--g)) drop-shadow(0 0 26px var(--g)) drop-shadow(0 0 60px var(--g)); }
  100% { transform: scale(1.12); opacity: 0; filter: drop-shadow(0 0 14px var(--g)) drop-shadow(0 0 40px var(--g)) drop-shadow(0 0 90px var(--g)); }
}
/* team logos are transparent now: no silver plate, glow in the team colour follows the logo's shape */
.ico.team { background: transparent; border: none; min-height: 16px; }
.teamflash { background: transparent; border: none; border-radius: 0; box-shadow: none; height: auto; object-fit: contain; animation: teamflash2 1.5s ease-out forwards;
  filter: drop-shadow(0 0 8px var(--tc, #fff)) drop-shadow(0 0 24px var(--tc, #fff)) drop-shadow(0 4px 6px #000a); }
@keyframes teamflash2 {
  0%   { transform: scale(.4) translateY(14px); opacity: 0; }
  22%  { transform: scale(1.14); opacity: 1; filter: drop-shadow(0 0 14px var(--tc, #fff)) drop-shadow(0 0 44px var(--tc, #fff)) drop-shadow(0 4px 6px #000a); }
  65%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.08) translateY(-20px); opacity: 0; }
}
/* finished counter sits dead-centre in the mat's printed circles; the thumbnails hang outside them */
.fin { left: 91.5%; width: 9%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.05; }
.fin.mine { display: flex; }
.fin .th { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 1.6cqw); width: 14cqw; margin: 0; justify-content: center; }
.fin.mine .th { top: auto; bottom: calc(100% + 1.6cqw); }
.fin .th img { width: 46%; max-width: 6.2cqw; }
/* several team bonuses stack in a column so the bar stays narrow and the action buttons keep their room */
.bstack { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.bstack .badge { padding: 0 .5cqw; line-height: 1.25; }
.fin.mine { flex-direction: column; }

/* "thinking" chip next to the bot that is deciding on its move */
.thinkchip { color: #ffd27a; border: 1px solid #b8862a; background: rgba(40, 28, 6, .7); border-radius: 12px; padding: 0 .8cqw; font-size: max(10px, .95cqw); font-style: italic; }
.thinkchip::after { content: ""; display: inline-block; width: 1.6em; text-align: left; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
/* ================= rivals, match score, record & achievements ================= */
.avatar { --sz: 40px; --tc: #ff9a2e; width: var(--sz); height: var(--sz); border-radius: 50%; flex: none; position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 55%, #fff) 0%, color-mix(in srgb, var(--tc) 40%, #0a1626) 55%, #060e1b 100%);
  border: calc(var(--sz) * .045) solid var(--tc); box-shadow: 0 0 calc(var(--sz) * .3) color-mix(in srgb, var(--tc) 60%, transparent), inset 0 0 calc(var(--sz) * .25) #000a; overflow: hidden; }
.avatar img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 2px 3px #000a); }
.avatar span { font-weight: 900; font-size: calc(var(--sz) * .55); color: #fff; text-shadow: 0 2px 4px #000; font-style: italic; }
#oppStrip .avatar { margin-right: -.2cqw; }

#vs { position: fixed; inset: 0; z-index: 180; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--tc) 22%, #08182e) 0%, #02060d 72%); animation: homein .4s ease-out; transition: opacity .35s; }
#vs.out { opacity: 0; pointer-events: none; }
#vs .vsrow { display: flex; align-items: center; justify-content: center; gap: min(6vw, 70px); }
#vs .vsside { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(34vw, 340px); text-align: center; }
#vs .vsside:first-child { animation: vsleft .55s cubic-bezier(.2, .9, .3, 1); } #vs .vsside:last-child { animation: vsright .55s cubic-bezier(.2, .9, .3, 1); }
@keyframes vsleft { from { transform: translateX(-80px); opacity: 0; } } @keyframes vsright { from { transform: translateX(80px); opacity: 0; } }
#vs .vsname { font-size: 30px; font-weight: 800; letter-spacing: .06em; text-shadow: 0 0 14px var(--tc); }
#vs .vsside:first-child .vsname { text-shadow: 0 0 14px #ff9a2e; }
#vs .vssub { color: var(--dim); font-size: 14px; letter-spacing: .08em; }
#vs .vsblurb { color: #bcd3f0; font-size: 14px; max-width: 320px; line-height: 1.4; }
#vs .vsmid { font-size: 76px; font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 0 22px var(--tc), 0 4px 0 #000; animation: vsmid .7s ease-out; }
@keyframes vsmid { from { transform: scale(2.4); opacity: 0; } }
#vs .vsinfo { font-size: 18px; color: #ffd27a; letter-spacing: .1em; } #vs .vshint { color: var(--dim); animation: hintpulse 1.4s ease-in-out infinite alternate; }

.bubble { position: absolute; z-index: 9; left: 15%; top: 8.4%; max-width: 40%; background: rgba(6, 16, 32, .92); border: 2px solid var(--tc, #fff); border-radius: .9cqw; padding: .5cqw 1cqw; font-size: max(12px, 1.2cqw);
  box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--tc, #fff) 50%, transparent); animation: bubblein .3s ease-out; transition: opacity .4s; pointer-events: none; }
.bubble b { color: var(--tc, #fff); } .bubble.out { opacity: 0; }
@keyframes bubblein { from { transform: translateY(-8px) scale(.9); opacity: 0; } }

.winbox .matchline { font-size: 20px; font-weight: 800; color: var(--orange); letter-spacing: .05em; margin: 0 0 6px; }
.winbox .quote { font-style: italic; font-weight: 700; margin: 4px 0 8px; } .winbox .recline { color: var(--dim); margin: 2px 0 8px; }
.newach { background: rgba(255, 210, 122, .1); border: 1px solid #b8862a; border-radius: 8px; padding: 8px 14px; margin: 8px auto; max-width: 560px; text-align: left; color: #ffe2a0; font-size: 14px; }
.newach b { display: block; color: #ffd27a; letter-spacing: .08em; margin-bottom: 2px; }

#achvbar { position: fixed; z-index: 500; left: 50%; top: 14px; transform: translateX(-50%); background: linear-gradient(#2a2208, #1a1405); border: 2px solid #ffd27a; border-radius: 10px; padding: 8px 22px; text-align: center;
  box-shadow: 0 0 24px rgba(255, 210, 122, .55); animation: achin .45s ease-out; transition: opacity .5s, transform .5s; pointer-events: none; max-width: min(560px, 92vw); }
#achvbar small { display: block; color: #ffd27a; letter-spacing: .22em; font-size: 11px; } #achvbar b { display: block; font-size: 20px; color: #fff; margin: 1px 0; } #achvbar span { color: #ffe2a0; font-size: 13px; }
#achvbar.out { opacity: 0; transform: translate(-50%, -20px); }
@keyframes achin { from { transform: translate(-50%, -40px); opacity: 0; } }

#achv { position: fixed; inset: 0; z-index: 168; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 20%, #0d2a4d, #02060d 75%); }
#achv .phead { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: rgba(4, 10, 20, .9); border-bottom: 1px solid var(--edge); }
#achv .phead h2 { margin: 0; flex: 1; color: var(--glow); letter-spacing: .08em; } #achv .phead span { color: #ffd27a; font-weight: 700; }
#achv .avbody { flex: 1; display: grid; grid-template-columns: 380px 1fr; gap: 18px; padding: 16px 20px; min-height: 0; }
#achv .avrec { background: rgba(5, 14, 28, .8); border: 1px solid #12365d; border-radius: 10px; padding: 16px; align-self: start; }
#achv .avbig { font-size: 26px; } #achv .avbig b { color: var(--orange); font-size: 34px; } #achv .avbig span { color: var(--dim); }
#achv .avsub { color: var(--dim); margin: 6px 0 14px; line-height: 1.5; }
#achv .avtab { width: 100%; border-collapse: collapse; font-size: 13px; } #achv .avtab th { text-align: left; color: var(--dim); font-weight: 600; padding: 3px 4px; border-bottom: 1px solid #12365d; }
#achv .avtab td { padding: 5px 4px; border-bottom: 1px solid #0c2340; }
#achv .avlist { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-content: start; padding-right: 6px; }
#achv .avitem { background: rgba(5, 14, 28, .75); border: 1px solid #12365d; border-radius: 8px; padding: 9px 12px; opacity: .72; }
#achv .avitem.got { opacity: 1; border-color: #b8862a; background: rgba(40, 30, 6, .6); }
#achv .avname { font-weight: 800; letter-spacing: .03em; } #achv .avitem.got .avname { color: #ffd27a; }
#achv .avdesc { color: #bcd3f0; font-size: 13px; margin: 2px 0 4px; } #achv .avstate { font-size: 12px; color: var(--dim); }
#achv .avitem.got .avstate { color: #ffd27a; }
@media (max-width: 900px) { #achv .avbody { grid-template-columns: 1fr; overflow-y: auto; } }
/* card preview tags: icons at a readable size, each tag on one line (no squashed icons / wrapped labels) */
#preview .tag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 3px 11px; margin: 0 5px 6px 0; border-radius: 12px; }
#preview .tag .ico { height: 26px; min-height: 0; width: auto; margin: 0; border-radius: 4px; }
#preview .tag .ico.team { height: 30px; }
#builder .bprev .ico { height: 22px; min-height: 0; width: auto; margin-right: 4px; vertical-align: middle; }
#builder .bprev .ico.team { height: 26px; }
/* ---- How to play: quick guide + official rulebook viewer ---- */
.box.rulesbox { max-width: min(1350px, 97vw); width: min(1350px, 97vw); display: block; }
.rulesbox .rtabs { display: flex; gap: 8px; margin-bottom: 10px; }
.rulesbox .chip { padding: 4px 14px; border-radius: 14px; border: 1px solid #285b94; background: #0b1f38; cursor: pointer; user-select: none; }
.rulesbox .chip.on { background: var(--orange); color: #1b0d00; border-color: #ffd08a; font-weight: 700; }
.rulesbox .rquick { display: flex; gap: 18px; font-size: 14px; line-height: 1.45; }
.rulesbox .rquick img { height: 520px; border-radius: 8px; align-self: flex-start; }
.rulesbox .rnote { color: var(--dim); font-size: 13px; margin: 6px 0; }
.rulesbox .rbar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; }
.rulesbox .rlab { min-width: 130px; text-align: center; color: #ffd27a; font-weight: 700; }
.rulesbox .rnums { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 8px; }
.rulesbox .rnums .chip { padding: 1px 9px; font-size: 13px; }
.rulesbox .rview { overflow: auto; max-height: 64vh; background: #000; border-radius: 8px; border: 1px solid #12365d; text-align: center; }
.rulesbox .rpic { width: 100%; max-width: 100%; display: block; margin: 0 auto; cursor: zoom-in; }
.rulesbox .rview.zoom .rpic { width: 190%; max-width: none; cursor: zoom-out; }
.rulesbox .rmiss { color: #ffb3b3; text-align: center; padding: 40px 20px; }
@media (max-width: 900px) { .rulesbox .rquick { flex-direction: column; } .rulesbox .rquick img { height: auto; width: 100%; } }
.rulesbox .rpic { height: auto; border-radius: 0; }