* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0816; color: #fff;
  font-family: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif; user-select: none; }
body.busy #hand .card, body.busy #end-turn { cursor: wait; }
.hidden { display: none !important; }
button { font-family: inherit; }

/* scroll areas only ever scroll vertically, on a slim neon rail */
.scroll-y { overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
::-webkit-scrollbar { width: 12px; height: 0; }
::-webkit-scrollbar-track { margin: 8px 0; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 12px; min-height: 48px;
  background: linear-gradient(#ff6fae, #b35cff) padding-box; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#ff8fc2, #c98bff) padding-box; }
::-webkit-scrollbar-thumb:active { background: linear-gradient(#ffe680, #ff6fae) padding-box; }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; }
@supports not selector(::-webkit-scrollbar) {
  .scroll-y { scrollbar-width: thin; scrollbar-color: #ff6fae rgba(255,255,255,.06); }
}

#bg { position: fixed; inset: -40px; z-index: 0; }
#bg .bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
#bg-shade { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(10,6,25,.05) 30%, rgba(10,6,25,.75) 100%), linear-gradient(to bottom, rgba(10,6,25,.2), rgba(10,6,25,.55)); }

#ui-root { position: absolute; width: 1600px; height: 900px; transform-origin: 0 0; z-index: 1; --bx: 0px; --by: 0px; }

/* ================= 3D arena ================= */
#arena { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 30%; }
#camera { position: absolute; left: 50%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; }
#board { --tilt: 52deg; position: absolute; width: 1180px; height: 760px; left: -590px; top: -380px;
  transform: rotateX(var(--tilt)); transform-style: preserve-3d; }
.board-surface { position: absolute; inset: 0; border-radius: 46px; transform-style: preserve-3d;
  background: linear-gradient(180deg, rgba(70,24,60,.78), rgba(28,20,64,.8) 50%, rgba(18,36,80,.82));
  border: 4px solid rgba(255,255,255,.28);
  box-shadow: 0 0 80px rgba(140,110,255,.45), inset 0 0 90px rgba(0,0,0,.55); }
.board-surface::after { content: ''; position: absolute; left: 30px; right: 30px; bottom: -2px; height: 46px;
  transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(#3b2a70, #120c28); border-radius: 0 0 20px 20px; box-shadow: 0 20px 40px rgba(0,0,0,.6); }
.board-grid { position: absolute; inset: 20px; border-radius: 30px; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.18) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.18) 2px, transparent 2px);
  background-size: 60px 60px; }
.board-mid { position: absolute; left: 40px; right: 40px; top: 388px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 20px #c9a6ff; opacity: .7; }
.board-glow { position: absolute; left: 0; right: 0; height: 50%; border-radius: 46px; pointer-events: none; }
.board-glow.side1 { top: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255,80,110,.22), transparent 70%); }
.board-glow.side0 { bottom: 0; background: radial-gradient(ellipse at 50% 60%, rgba(80,170,255,.22), transparent 70%); }

.slot { position: absolute; width: 200px; height: 150px; margin: -75px 0 0 -100px; border-radius: 22px;
  border: 3px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 25px rgba(255,255,255,.08); transition: all .2s; }
.slot.side0 { border-color: rgba(110,190,255,.45); }
.slot.side1 { border-color: rgba(255,110,140,.45); }
.slot.open { border-color: #7dff9a; background: rgba(90,255,140,.14); box-shadow: 0 0 25px #3dff6a, inset 0 0 25px #3dff6a66; animation: pulse 1s infinite alternate; }
.slot.hot { background: rgba(120,255,160,.4); transform: scale(1.08); }
@keyframes pulse { to { box-shadow: 0 0 40px #3dff6a, inset 0 0 35px #3dff6a99; } }

.unit { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.unit-shadow { position: absolute; width: 170px; height: 70px; left: -85px; top: -35px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); }
.leader .unit-shadow { width: 220px; height: 90px; left: -110px; top: -45px; }
.stand { position: absolute; width: 340px; left: -170px; bottom: 0; transform-origin: 50% 100%;
  transform: rotateX(calc(-1 * var(--tilt))); transform-style: preserve-3d; pointer-events: none; }
.figure { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; transform-origin: 50% 100%; }
.sprite { height: 100%; width: auto; pointer-events: auto; cursor: pointer; transition: filter .2s; }
.emoji-sprite { font-size: 150px; line-height: 1; pointer-events: auto; transform-origin: 50% 100%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.unit.ready .sprite, .unit.ready .emoji-sprite { filter: drop-shadow(0 0 3px #aaffbb) drop-shadow(0 0 12px #3dff6a); }
.unit.selected .sprite, .unit.selected .emoji-sprite { filter: drop-shadow(0 0 4px #fff6a0) drop-shadow(0 0 16px #ffd84a); }
.unit.targetable .sprite, .unit.targetable .emoji-sprite { filter: drop-shadow(0 0 3px #ffb0b0) drop-shadow(0 0 12px #ff3b5c); }
.unit.hot .sprite, .unit.hot .emoji-sprite { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 22px #ff3b5c) brightness(1.15); }
.gallery-mode .leader { display: none; }

.plate { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%) translateZ(60px); display: flex; align-items: center; gap: 6px;
  pointer-events: none; white-space: nowrap; }
.plate > span { font-weight: 900; }
.plate .atk, .plate .hp { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 24px;
  border: 3px solid #fff; text-shadow: 0 2px 2px #0008; box-shadow: 0 4px 10px #0009; }
.plate .atk { background: linear-gradient(#ffb23f, #d45f00); clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%); border: none; }
.plate .hp { background: linear-gradient(#ff5d73, #b1002a); border-radius: 50%; }
.plate .hp.hurt { color: #ffd0d0; background: linear-gradient(#d4001f, #6b0012); }
.plate .up { color: #9dff9d; }
.plate .down { color: #ffb0b0; }
.plate .pname { font-size: 17px; background: rgba(12,8,30,.85); padding: 3px 10px; border-radius: 10px; border: 1px solid #fff4; }
.plate .kw { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); font-size: 20px; letter-spacing: 2px; font-style: normal; }
.plate .kw i { font-style: normal; filter: drop-shadow(0 2px 2px #000); }
.leader-plate .hp.big { width: 70px; height: 70px; font-size: 34px; border-width: 4px; }

.status { position: absolute; inset: 0; pointer-events: none; }
.status .bubble { position: absolute; left: 50%; bottom: -10px; width: 230px; height: 260px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(140,220,255,.15) 40%, rgba(90,200,255,.3) 70%);
  border: 3px solid rgba(180,240,255,.8); box-shadow: 0 0 25px #6fdcff; animation: bob 2s infinite alternate ease-in-out; }
.status .ice { position: absolute; left: 50%; bottom: 0; width: 200px; height: 85%; transform: translateX(-50%);
  background: linear-gradient(160deg, rgba(230,250,255,.75), rgba(120,210,255,.45) 50%, rgba(200,245,255,.7));
  border: 3px solid rgba(255,255,255,.8); border-radius: 12px; box-shadow: 0 0 30px #8fe8ff inset, 0 0 20px #8fe8ff;
  clip-path: polygon(8% 12%, 30% 0, 60% 6%, 92% 0, 100% 40%, 94% 100%, 4% 100%, 0 45%); }
.status .flames { position: absolute; left: 50%; bottom: 0; width: 180px; height: 55%; transform: translateX(-50%); }
.status .flames i { position: absolute; bottom: 0; width: 60px; height: 100%; border-radius: 50% 50% 20% 20% / 70% 70% 20% 20%;
  background: linear-gradient(to top, rgba(255,240,160,.85), rgba(255,110,30,.6) 40%, transparent); filter: blur(4px);
  transform-origin: 50% 100%; animation: flicker .5s infinite alternate ease-in-out; mix-blend-mode: screen; }
.status .flames i:nth-child(1) { left: 0; height: 70%; animation-delay: -.2s; }
.status .flames i:nth-child(2) { left: 60px; animation-delay: -.35s; }
.status .flames i:nth-child(3) { right: 0; height: 60%; }
@keyframes flicker { from { transform: scaleY(.8) skewX(-4deg); opacity: .7; } to { transform: scaleY(1.1) skewX(5deg); opacity: 1; } }
.unit.stealthed .sprite { opacity: .45; }
.status .zzz { position: absolute; right: 60px; top: 10px; font: 900 30px 'Segoe UI'; color: #cfe3ff; text-shadow: 0 0 8px #4a7dff; animation: zzz 2s infinite; }
.status .zzz span { font-size: .75em; margin-left: 2px; }
@keyframes zzz { 0% { transform: translateY(10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
@keyframes bob { to { transform: translateX(-50%) scale(1.03); } }

/* ============ billboards & FX ============ */
#fx-layer { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.bb { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; pointer-events: none; }
.bb-stand { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; transform: rotateX(calc(-1 * var(--tilt))); transform-style: preserve-3d; }
/* effects stand 75px toward the viewer: over the target and a melee attacker 85 board px in front of it, still behind the next row */
.bb-stand.lift { transform: rotateX(calc(-1 * var(--tilt))) translateZ(75px); }
.bb-body { position: absolute; left: 0; top: 0; white-space: nowrap; }
.yumi-dolphin-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pristo-guitar-pose { width: 280px; height: 280px; background-repeat: no-repeat; background-size: 200% 200%; }
.pristo-chord svg { display: block; overflow: visible; }
.pristo-chord { filter: drop-shadow(0 0 5px var(--c)); }
.julia-singing-pose { background-repeat: no-repeat; background-size: 200% 200%; }
.metal-mass-note { font-size: 46px; filter: drop-shadow(0 0 5px #9fe8ff); }
.metal-mass-chord svg { display: block; overflow: visible; }
.metal-mass-chord { filter: drop-shadow(0 0 5px #f0d27a); }
/* Complete drawn poses: no limb is cut out or transformed separately from its shoulder. */
.jay-painter { position: relative; width: 200px; height: 300px;
  background-repeat: no-repeat; background-size: 186.181818% 200%; }
.jay-spike-art > img { display: block; width: 100%; height: 100%; }
.jay-proud-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.art-books-pose { background-repeat: no-repeat; }
.art-books-pose.art-books-jay { background-size: 200% 200%; }
.art-books-stairs svg { display: block; width: 100%; height: 100%; overflow: visible; }
.art-books-stairs .stair-solid { fill: #203d64; stroke: #78dfff; stroke-width: 3; stroke-linejoin: round; }
.art-books-stairs .stair-tread { stroke: #e0faff; stroke-width: 4; stroke-linejoin: round; }
.art-books-stairs .stair-ink { stroke: #29c5ff; stroke-width: 7; fill: none; stroke-linejoin: round;
  stroke-linecap: round; filter: drop-shadow(0 0 4px #29c5ff); }
.art-books-book { font-size: 64px; filter: drop-shadow(0 5px 4px #0008); }
.jay-paint-cut { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.jay-paint-cut::before { content: ''; position: absolute; inset: 90px 360px 125px 70px; border-radius: 30px;
  opacity: var(--veil, 1); background: radial-gradient(ellipse, #102c47ed, #0b102bcc 55%, transparent 75%); }
.jay-paint-stage { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.jay-paint-stage > .jay-painter, .jay-paint-stage > .jay-spike-art { position: absolute; }
.jay-paint-cut .jay-spike-art > img { position: absolute; inset: 0; }
.jay-canvas { position: absolute; inset: -18px; border: 12px solid #a87943; border-radius: 3px;
  background: repeating-linear-gradient(0deg, #e5d9c733 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, #e5d9c733 0 1px, transparent 1px 4px), #fff8e6;
  box-shadow: inset 0 0 22px #b9986344, 0 8px 0 #664328, 0 15px 30px #0008; }
.jay-canvas::after { content: ''; position: absolute; left: -26px; right: -26px; bottom: -25px; height: 16px;
  border-radius: 4px; background: linear-gradient(#d6a568, #8b5a30); box-shadow: 0 5px 8px #0006; }
.jay-paint-caption { position: absolute; left: 180px; top: 110px; width: 900px; text-align: center;
  font: 800 22px 'Segoe UI', sans-serif; color: #caf2ff; text-shadow: 0 2px 8px #000; }
.flat { position: absolute; left: 0; top: 0; pointer-events: none; }

.spark { border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, var(--c) 45%, transparent 72%); }
.spark.shard { border-radius: 2px; background: linear-gradient(135deg, #fff, var(--c)); box-shadow: 0 0 8px var(--c); }
.spark.plus { background: radial-gradient(circle, #fff 0 15%, var(--c) 40%, transparent 70%); }
.impact-flash { border-radius: 50%; background: radial-gradient(circle, #fff 0 15%, var(--c) 35%, transparent 68%); }
.charge, .beam-seg { border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, var(--c) 48%, transparent 72%); }
.charge { box-shadow: 0 0 40px var(--c); }
.dust { background: #efe6f7; border-radius: 1px; }
.star-shot { font-size: 46px; color: #fff; text-shadow: 0 0 8px var(--c), 0 0 18px var(--c), 0 0 30px #fff; }
.petal-orb { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, #fff 0 15%, var(--c) 40%, transparent 70%); }
.petal-orb > span { position: absolute; inset: 0; text-align: center; font-size: 24px; line-height: 1; }
.petal-orb > span:nth-child(2) { rotate: 120deg; }
.petal-orb > span:nth-child(3) { rotate: 240deg; }
.petal { font-size: 26px; }
mb-attack-art.attack-art { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.15em; background-size: 400% 400%; background-repeat: no-repeat; pointer-events: none; flex: none; }
.confetti { width: 11px; height: 18px; border-radius: 2px; }
.hex-cloud { width: 260px; height: 110px; border-radius: 50%; background: radial-gradient(ellipse, #12051f 0 30%, var(--c) 58%, transparent 72%); }
.bolt svg { display: block; overflow: visible; filter: drop-shadow(0 0 10px #fff); }
.thrown { font-size: 70px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.coin { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #a57400;
  background: radial-gradient(circle at 35% 35%, #fff7c2, #ffcc33 45%, #c08a00); box-shadow: 0 0 12px #ffcc33; }
.wave { width: 210px; height: 140px; border-radius: 60% 60% 8% 8% / 100% 100% 8% 8%;
  background: linear-gradient(to top, rgba(20,100,230,.92), rgba(80,190,255,.85) 65%, rgba(230,250,255,.95));
  box-shadow: 0 0 35px #3fb6ff; }
.wave .foam { position: absolute; left: 10%; right: 10%; top: 4px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.9); filter: blur(3px); }
.frost-floor { width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(235,252,255,.9), rgba(140,220,255,.5) 50%, transparent 70%); }
.slash-arc { width: 240px; height: 240px; border-radius: 50%; border-top: 12px solid #fff; border-right: 4px solid transparent; border-left: 4px solid transparent;
  filter: drop-shadow(0 -4px 8px var(--c)) drop-shadow(0 0 16px var(--c)); }
.slash-svg { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 18px var(--c)); }
.slash-svg svg { display: block; overflow: visible; }
.cracks { filter: drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 10px var(--c)); }
.cracks svg { display: block; }
.ghost img, .ghost .emoji-sprite { height: 100%; opacity: .5; filter: brightness(1.6) drop-shadow(0 0 10px var(--c)); }
.ghost .emoji-sprite { font-size: 150px; }
.item-icon img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 0 14px var(--c)) drop-shadow(0 4px 4px #000a); }
.shock-ring, .summon-ring { width: 220px; height: 220px; border-radius: 50%; border: 8px solid var(--c); box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c); }
.summon-ring { border-style: dashed; }
.pillar { width: 90px; height: 360px; border-radius: 50% 50% 20% 20% / 70% 70% 10% 10%; mix-blend-mode: screen;
  background: linear-gradient(to top, #fff 0, #ffe066 12%, var(--c) 45%, transparent); box-shadow: 0 0 40px var(--c); filter: blur(1px); }
.pillar.small { width: 50px; height: 150px; }
.sigil { width: 280px; height: 280px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c);
  background: radial-gradient(circle, transparent 52%, var(--c) 54% 57%, transparent 59%),
    repeating-conic-gradient(rgba(255,90,30,.45) 0 8deg, transparent 8deg 45deg); }
.halo-ring { width: 150px; height: 44px; border-radius: 50%; border: 8px solid #fff6c8; box-shadow: 0 0 22px var(--c), inset 0 0 12px var(--c); }
.sky-beam { width: 130px; height: 900px; border-radius: 65px 65px 20px 20px; mix-blend-mode: screen;
  background: linear-gradient(to top, #fff, var(--c) 30%, rgba(255,240,180,0)); box-shadow: 0 0 60px var(--c); }
.page { width: 22px; height: 28px; border-radius: 2px; background: linear-gradient(#fff, #e8e4ff); border: 1px solid #b9b0ff; box-shadow: 0 0 8px var(--c); }
.paint-blob { width: 34px; height: 30px; border-radius: 50% 50% 45% 55%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 40%); box-shadow: 0 0 12px var(--c); }
.splat { width: 170px; height: 170px; background: var(--c);
  clip-path: polygon(50% 0, 58% 22%, 78% 6%, 72% 30%, 100% 28%, 80% 46%, 98% 66%, 72% 64%, 76% 92%, 56% 74%, 44% 100%, 38% 74%, 14% 90%, 24% 62%, 0 56%, 22% 42%, 6% 18%, 32% 26%); }

.float-text { font: 900 46px/1.1 'Segoe UI', sans-serif; width: max-content; max-width: 620px; white-space: normal; text-align: center; overflow-wrap: break-word; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 4px 0 #000, 0 0 16px currentColor; }
.float-text.dmg { color: #ff4d5e; font-size: 58px; }
.float-text.heal { color: #6fff9a; }
.float-text.buff { color: #ffd84a; font-size: 38px; }
.float-text.debuff { color: #d38cff; font-size: 36px; }
.float-text.shield { color: #9fe8ff; font-size: 36px; }
.float-text.burn { color: #ff8a3c; font-size: 38px; }
.float-text.baka { color: #ff5c8a; font-size: 44px; }
.float-text.hic { color: #ffe6a0; font-size: 28px; }
.float-text.ability { color: #fff; font-size: 30px; text-shadow: 0 3px 0 #000, 0 0 14px #c58cff; }
.attack-name { font: italic 900 22px 'Segoe UI'; padding: 6px 16px; border-radius: 30px; color: #fff; text-shadow: 0 2px 2px #000;
  background: linear-gradient(90deg, transparent, var(--c) 20%, var(--c) 80%, transparent); letter-spacing: 1px; }

/* ================= HUD ================= */
#battle-hud { position: absolute; inset: 0; pointer-events: none; }
#battle-hud > .panel, #power-btn, #end-turn, #btn-forfeit { pointer-events: auto; }
.panel { position: absolute; background: rgba(14,10,34,.8); border: 2px solid rgba(255,255,255,.18); border-radius: 16px; padding: 10px 14px; backdrop-filter: blur(6px); }
#enemy-panel { left: 20px; top: 16px; width: 330px; border-color: #ff6b8a88; }
#player-panel { left: 20px; bottom: 16px; width: 250px; border-color: #6bb6ff88; }
.p-name { font: 900 20px 'Segoe UI'; }
.p-row { font-size: 14px; opacity: .85; margin-top: 4px; }
.small { font-size: 12px; opacity: .8; margin-top: 4px; }
.gold { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.gold-num { font: 900 18px 'Segoe UI'; color: #ffd84a; min-width: 42px; }
.gems { display: flex; gap: 3px; flex-wrap: wrap; }
.gems i { width: 14px; height: 18px; clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); background: #4a3a1a; }
.gems i.full { background: linear-gradient(#fff3a0, #ffc400); filter: drop-shadow(0 0 4px #ffcc33); }
#enemy-hand { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); display: flex; pointer-events: none; }
.card-back { width: 60px; height: 84px; margin: 0 -10px; border-radius: 8px; border: 2px solid #ffffff55;
  background: repeating-linear-gradient(45deg, #3b1f6b 0 8px, #2a1650 8px 16px); box-shadow: 0 4px 10px #0008; }
#power-btn { position: absolute; left: 285px; bottom: 16px; width: 170px; height: 104px; border-radius: 16px; cursor: pointer; color: #fff;
  border: 2px solid #ffffff33; background: linear-gradient(#3a2a6a, #1d1440); padding: 8px; text-align: left; opacity: .6; }
#power-btn.usable { opacity: 1; border-color: #7dff9a; box-shadow: 0 0 18px #3dff6a88; }
#power-btn.usable:hover { transform: translateY(-3px); }
#power-btn.used { filter: grayscale(1); }
.pw-cost { position: absolute; right: 8px; top: 6px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(#ffe680, #d99a00); color: #3a2500; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.pw-name { font-weight: 900; font-size: 15px; }
.pw-text { font-size: 11px; opacity: .85; margin-top: 4px; }
#end-turn { position: absolute; right: 24px; top: 400px; width: 170px; height: 64px; border-radius: 34px; cursor: pointer;
  font: 900 20px 'Segoe UI'; color: #3a2500; border: 3px solid #fff8; background: linear-gradient(#ffe680, #ffb300); box-shadow: 0 6px 0 #a06800, 0 10px 20px #0009; }
#end-turn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a06800; }
#end-turn:disabled { background: linear-gradient(#777, #444); color: #ccc; box-shadow: 0 6px 0 #222; cursor: default; }
#end-turn.pulse { animation: endpulse .9s infinite alternate; }
@keyframes endpulse { to { box-shadow: 0 6px 0 #a06800, 0 0 30px #ffd84a, 0 0 60px #ffd84a; } }
#btn-forfeit { position: absolute; right: 80px; top: 16px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff4; background: #1d1440cc; color: #fff; font-size: 20px; cursor: pointer; }
#log { position: absolute; right: 20px; top: 490px; width: 290px; font-size: 13px; pointer-events: none; }
.log-line { background: rgba(12,8,30,.7); margin-bottom: 4px; padding: 4px 10px; border-radius: 8px; border-left: 3px solid #c58cff; }
.hint { position: absolute; left: 50%; top: 50px; transform: translateX(-50%); font-size: 12px; opacity: .55; pointer-events: none; white-space: nowrap; }
.banner { position: absolute; left: 0; right: 0; top: 380px; text-align: center; font: 900 76px 'Segoe UI'; letter-spacing: 12px; opacity: 0; pointer-events: none;
  -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.banner.mine { color: #8fd3ff; text-shadow: 0 0 30px #3fa0ff, 0 6px 0 #000; }
.banner.theirs { color: #ff8fa3; text-shadow: 0 0 30px #ff3b5c, 0 6px 0 #000; }

#hand { position: absolute; inset: 0; pointer-events: none !important; }
#hand .card { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; transform-origin: 50% 100%; }
#hand .card.dragging { cursor: grabbing; pointer-events: none; }
#aim-arrow { position: absolute; inset: 0; width: 1600px; height: 900px; pointer-events: none; z-index: 50; }
#aim-arrow path { fill: none; stroke: var(--c); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 22; filter: drop-shadow(0 0 8px var(--c)); animation: dash .5s linear infinite; }
#aim-arrow .head { fill: var(--c); filter: drop-shadow(0 0 8px var(--c)); }
@keyframes dash { to { stroke-dashoffset: -24; } }

/* ================= cards ================= */
.card { --rc: #b8c0cc; width: 160px; height: 220px; border-radius: 14px; position: relative; color: #fff;
  background: linear-gradient(160deg, #2c2456, #120e2c); border: 3px solid var(--rc); box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.card.r-common { --rc: #c9d1dc; }
.card.r-common .card-name { background: linear-gradient(90deg, #0008, #6b7382, #0008); }
.card.r-rare { --rc: #4aa3ff; }
.card.r-epic { --rc: #b35cff; }
.card.r-legendary { --rc: #ffc93c; box-shadow: 0 0 16px #ffc93c88, 0 8px 18px rgba(0,0,0,.6); }
.card.r-token { --rc: #888; }
.card-art { position: absolute; left: 5px; right: 5px; top: 5px; height: 110px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--c), #1a1433 78%); }
.card-art img { position: absolute; left: 0; top: 0; width: 100%; }
.card-art .item-art { width: 88px; height: 88px; left: 50%; top: 12px; margin-left: -44px; object-fit: contain; filter: drop-shadow(0 0 10px #fff8); }
.emoji-art { font-size: 80px; text-align: center; line-height: 110px; }
.cost { position: absolute; top: -8px; left: -8px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff3a0, #e0a000 60%, #a86f00); color: #3a2500; font: 900 22px 'Segoe UI'; border: 2px solid #fff; box-shadow: 0 3px 6px #000a; }
.card-name { position: absolute; top: 108px; left: 8px; right: 8px; text-align: center; font: 800 14px 'Segoe UI'; padding: 3px 4px; border-radius: 8px;
  background: linear-gradient(90deg, #0008, var(--rc), #0008); text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-body { position: absolute; top: 134px; left: 8px; right: 8px; bottom: 24px; font-size: 10.5px; text-align: center; line-height: 1.25; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.kws b { color: #ffe680; }
.kws.icons { font-size: 14px; letter-spacing: 3px; line-height: 1.1; }
.card-body.dense { font-size: 9.5px; line-height: 1.2; gap: 1px; }
.card-body.dense-2 { font-size: 8.8px; line-height: 1.18; gap: 1px; }
.card-attack { color: var(--c); font-weight: 800; font-style: italic; filter: brightness(1.3); }
.stat { position: absolute; bottom: -8px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font: 900 20px 'Segoe UI'; border: 2px solid #fff; text-shadow: 0 1px 2px #000; }
.stat.atk { left: -8px; background: linear-gradient(#ffb23f, #d45f00); clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%); border: none; }
.stat.hp { right: -8px; background: linear-gradient(#ff5d73, #b1002a); border-radius: 50%; }
.spell-tag { position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); font: 900 10px 'Segoe UI'; letter-spacing: 3px; opacity: .7; }
/* rarity: gem on the bottom edge + animated foil on epic/legendary art */
.r-gem { position: absolute; bottom: -10px; left: 50%; width: 20px; height: 20px; margin-left: -10px; transform: rotate(45deg); border-radius: 3px;
  background: linear-gradient(135deg, #fff, var(--rc) 55%, #0006); border: 2px solid #fff; box-shadow: 0 0 8px var(--rc), 0 2px 4px #000a; }
.card.r-common .r-gem { background: linear-gradient(135deg, #fff, #9aa3b0 60%); box-shadow: 0 2px 4px #000a; }
.card.r-epic .card-art::after, .card.r-legendary .card-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .45;
  background: linear-gradient(115deg, transparent 30%, rgba(255,120,220,.7) 42%, rgba(120,230,255,.7) 50%, rgba(255,240,140,.7) 58%, transparent 70%);
  background-size: 300% 100%; animation: foil 4s linear infinite; }
.card.r-legendary { animation: legend 2.4s ease-in-out infinite alternate; }
.card.r-legendary .r-gem { animation: gem 1.6s ease-in-out infinite alternate; }
@keyframes foil { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes legend { from { box-shadow: 0 0 10px #ffc93c88, 0 8px 18px rgba(0,0,0,.6); } to { box-shadow: 0 0 26px #ffc93ccc, 0 8px 18px rgba(0,0,0,.6); } }
@keyframes gem { to { box-shadow: 0 0 18px #fff3b0, 0 0 30px var(--rc); } }
.card .stat.up { color: #9dff9d; }
.card .stat.down { color: #ffd0d0; }
.card.locked .card-art::after { display: none; }
.card.locked { animation: none; }
/* a locked card in pieces: dark shards for the fragments still missing, cracks where they've been filled in */
.shards { position: absolute; inset: -3px; border-radius: 14px; overflow: hidden; pointer-events: none; z-index: 2; }
.shards svg { display: block; width: 100%; height: 100%; }
.sh { fill: rgba(10,7,26,.93); stroke: color-mix(in srgb, var(--rc) 70%, transparent); stroke-width: 1.2; }
.sh.got { fill: transparent; stroke: rgba(255,255,255,.5); stroke-width: .8; }
.shard-veil { position: absolute; left: 0; right: 0; top: 52px; display: flex; flex-direction: column; align-items: center; }
.shard-veil b { font-size: 40px; filter: drop-shadow(0 0 10px var(--rc)); }
.shard-veil span { font: 900 11px 'Segoe UI'; letter-spacing: 3px; text-transform: uppercase; color: var(--rc); text-shadow: 0 1px 2px #000; }
.shards:not(.none) .shard-veil { display: none; }
.shard-count { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 104px; height: 22px; border-radius: 11px; overflow: hidden;
  background: #000c; border: 1.5px solid var(--rc); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 50%, transparent); }
.shard-count i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 60%, #000), var(--rc)); }
.shard-count span { position: relative; display: block; text-align: center; font: 900 12px/19px 'Segoe UI'; text-shadow: 0 1px 2px #000; }
#hand .card.playable { box-shadow: 0 0 0 3px #7dff9a, 0 0 24px #3dff6a, 0 8px 18px rgba(0,0,0,.6); }
.card.reveal { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; }

#preview { position: absolute; left: 30px; top: 180px; z-index: 40; pointer-events: none; opacity: 0; transform: translateX(-30px); transition: all .2s; width: 300px; }
#preview.show { opacity: 1; transform: none; }
#preview .card { transform: scale(1.4); transform-origin: 0 0; }
#preview .notes { margin-top: 330px; background: rgba(12,8,30,.9); border-radius: 12px; padding: 10px; font-size: 13px; border: 1px solid #fff3; }
.leader-info { background: rgba(12,8,30,.92); border: 2px solid #fff3; border-radius: 16px; padding: 14px; width: 280px; }
.leader-info img { height: 180px; display: block; margin: 0 auto; }
.leader-info h3 { margin: 6px 0 2px; }
.leader-info .pw { background: #ffffff12; border-radius: 10px; padding: 8px; font-size: 13px; margin: 8px 0; }
.leader-info p { font-size: 12px; opacity: .8; margin: 0; }

/* ================= screens ================= */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; padding: 30px 40px; z-index: 30; }
.screen.active { display: flex; }
.screen h1 { font: 900 44px 'Segoe UI'; margin: 0 0 20px; text-shadow: 0 4px 0 #000, 0 0 20px #c58cff; }
.btn { font: 800 20px 'Segoe UI'; color: #fff; padding: 12px 26px; border-radius: 14px; cursor: pointer; border: 2px solid #ffffff44;
  background: linear-gradient(#3d2d78, #22185a); box-shadow: 0 5px 0 #120c33, 0 8px 18px #0008; transition: transform .1s, filter .1s; }
.btn:hover { filter: brightness(1.2); transform: translateY(-2px); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #120c33; }
.btn.primary { background: linear-gradient(#ff6fae, #d8337e); box-shadow: 0 5px 0 #7a1244, 0 8px 18px #0008; }
.btn.back { position: absolute; left: 30px; bottom: 26px; }
.row { display: flex; gap: 12px; justify-content: center; }

/* full-window (not just the 1600x900 root) so it also covers letterbox bars */
#title-shade { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: linear-gradient(90deg, rgba(10,6,25,.7), rgba(10,6,25,.25) 40%, transparent 65%); }
body:has(#screen-title.active) #title-shade { opacity: 1; }
#screen-title { justify-content: center; align-items: flex-start; padding-left: 110px; perspective: 1200px; }
#screen-title .menu { display: flex; flex-direction: column; gap: 12px; transform-style: preserve-3d; }
#logo { margin: 0 0 34px 6px; transform-style: preserve-3d; perspective: 800px; }
#logo span { display: inline-block; will-change: transform; }
.logo-top { font: 900 40px 'Segoe UI'; letter-spacing: 26px; color: #8ff0ff; text-shadow: 0 0 20px #3fd0ff, 0 4px 0 #000; margin-left: 8px; }
.logo-main { font: 900 140px/0.9 'Segoe UI Black', 'Arial Black', sans-serif; letter-spacing: 4px; filter: drop-shadow(0 6px 0 #5a0f3a) drop-shadow(0 0 26px #ff4f9a); }
.logo-main span { background: linear-gradient(#fff 20%, #ffb0d8 55%, #ff4f9a 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-sub { font: italic 800 24px 'Segoe UI'; letter-spacing: 6px; color: #ffe680; text-shadow: 0 3px 0 #000; margin: 8px 0 0 10px; }
#loading.ready { cursor: pointer; }
#loading.ready .bar { opacity: 0; transition: opacity .3s; }
.menu-btn { --glow: #b9a4ff; position: relative; overflow: hidden; width: 400px; height: 66px; display: flex; align-items: center; gap: 18px;
  padding: 0 26px; border-radius: 18px; cursor: pointer; color: #fff; font: 800 26px 'Segoe UI'; letter-spacing: 1px; text-align: left;
  border: 2px solid rgba(255,255,255,.28); border-left: 6px solid var(--glow);
  background: linear-gradient(100deg, rgba(20,14,48,.78), rgba(20,14,48,.42)); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); text-shadow: 0 2px 4px #000a; transition: border-color .2s, box-shadow .2s; }
.menu-btn:hover { border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow), 0 0 30px var(--glow), 0 10px 30px rgba(0,0,0,.45); }
.menu-btn.primary { --glow: #ff6fae; background: linear-gradient(100deg, rgba(216,51,126,.85), rgba(120,20,80,.5)); }
.menu-btn i { width: 34px; font-style: normal; text-align: center; font-size: 26px; color: var(--glow); filter: drop-shadow(0 0 8px var(--glow)); }
.menu-btn.primary i { color: #fff; }
.menu-btn .sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }

#leader-grid { display: grid; grid-template-columns: repeat(8, 174px); gap: 12px; max-height: 650px; padding: 6px 10px 10px; }
.grid-head { grid-column: 1 / -1; font: 900 20px 'Segoe UI'; color: #ffe680; text-shadow: 0 2px 0 #000; border-bottom: 2px solid #ffffff22; padding: 6px 2px 4px; }
.leader-tile { height: 320px; border-radius: 16px; background: linear-gradient(#2c2456dd, #120e2cdd); border: 2px solid #ffffff33; position: relative; overflow: hidden; cursor: pointer; text-align: center; }
.leader-tile img { height: 210px; margin-top: 8px; }
.leader-tile.chosen { border-color: #ffd84a; box-shadow: 0 0 20px #ffd84a88; }
.leader-tile.locked { cursor: default; }
.leader-tile.locked img { filter: brightness(0) drop-shadow(0 0 2px #fff6); }
.lt-name { font-weight: 900; font-size: 15px; }
.lt-power { font-size: 11px; opacity: .85; padding: 2px 8px; }
.leader-tile:not(.locked):hover { border-color: #7dff9a; }

/* ================= Story map ================= */
#bg .bg-img.blurred { filter: blur(14px) brightness(.45) saturate(1.2); }
#screen-story { padding: 0; overflow: hidden; }
#map-view { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
#map-view.dragging { cursor: grabbing; }
#map-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#map-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  filter: saturate(1.08) contrast(1.02); box-shadow: 0 0 120px #000; }
#map-path { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
#map-path .under { fill: none; stroke: #0009; stroke-width: 16; stroke-linecap: round; }
#map-path .line { fill: none; stroke: #ffffffcc; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 18; }
#map-path .walked .under { stroke: #3a2200aa; stroke-width: 18; }
#map-path .walked .line { stroke: #ffd84a; stroke-dasharray: none; filter: drop-shadow(0 0 6px #ffb400); }
#map-nodes { position: absolute; inset: 0; }

.qn { position: absolute; width: 0; height: 0; z-index: 2; }
.qn-ring { position: absolute; width: 92px; height: 92px; left: -46px; top: -46px; border-radius: 50%; padding: 5px; cursor: pointer;
  background: conic-gradient(from 200deg, #fff6c4, #ffd84a, #c98b00, #ffd84a, #fff6c4); box-shadow: 0 6px 0 #5a3a00, 0 10px 18px #000a;
  transition: transform .2s; }
.qn-face { width: 100%; height: 100%; border-radius: 50%; background: #2a1d4a no-repeat 50% 6% / 190% auto; box-shadow: inset 0 0 0 3px #0006;
  display: flex; align-items: center; justify-content: center; font-size: 40px; }
.qn-face.scene { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, #1a1030); }
.qn-face.lock { background: radial-gradient(#3a3450, #15121f); color: #ffffff88; font: 900 40px 'Segoe UI'; }
.qn:hover .qn-ring { transform: scale(1.1) translateY(-4px); }
.qn.sel .qn-ring { transform: scale(1.14) translateY(-4px); box-shadow: 0 6px 0 #5a3a00, 0 0 0 5px #fff, 0 0 30px 8px #ffd84a; }
.qn.locked .qn-ring { background: #6b6680; box-shadow: 0 5px 0 #2a2638, 0 8px 14px #0009; }
.qn.done .qn-face { filter: saturate(.75) brightness(.92); }
.qn.next .qn-ring { animation: qnPulse 1.1s infinite alternate; }
.qn.next .qn-ring::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 3px solid #ffd84a; pointer-events: none; animation: qnSonar 1.8s infinite ease-out; }
@keyframes qnSonar { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
@keyframes qnPulse { from { box-shadow: 0 6px 0 #5a3a00, 0 0 0 0 #ffd84a00; } to { box-shadow: 0 6px 0 #5a3a00, 0 0 26px 10px #ffd84acc; } }
.qn.side .qn-ring { width: 66px; height: 66px; left: -33px; top: -33px; padding: 4px;
  background: conic-gradient(from 200deg, #f0d8ff, #b35cff, #6a2aa8, #b35cff, #f0d8ff); box-shadow: 0 5px 0 #321052, 0 8px 14px #000a; }
.qn.side.sel .qn-ring { box-shadow: 0 5px 0 #321052, 0 0 0 4px #fff, 0 0 26px 6px #c58cff; }
.qn.boss .qn-ring { background: conic-gradient(from 200deg, #ffd0d0, #ff4a5a, #8a0014, #ff4a5a, #ffd0d0); box-shadow: 0 6px 0 #4a0010, 0 10px 18px #000a; }
.qn.boss.side .qn-ring { box-shadow: 0 5px 0 #4a0010, 0 8px 14px #000a; }
.qn-num { position: absolute; left: -54px; top: -54px; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font: 900 18px 'Segoe UI'; color: #3a2400; background: linear-gradient(#fff3b0, #ffc93c); border: 2px solid #fff; box-shadow: 0 3px 0 #7a5200, 0 4px 8px #0008; pointer-events: none; }
.qn.locked .qn-num { background: #aaa4bd; color: #2a2638; box-shadow: 0 3px 0 #444; }
.qn-new { position: absolute; left: 14px; top: -46px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 900 20px 'Segoe UI'; color: #3a2400; background: linear-gradient(#fff3b0, #ffc93c); border: 2px solid #fff; box-shadow: 0 0 12px #ffd84a;
  animation: qnHop .9s infinite ease-in-out alternate; pointer-events: none; }
@keyframes qnHop { to { transform: translateY(-7px); } }
.qn-crown { position: absolute; left: 20px; top: -64px; font-size: 26px; transform: rotate(18deg); filter: drop-shadow(0 2px 2px #000); pointer-events: none; }
.qn.side .qn-crown { left: 8px; top: -50px; font-size: 20px; }
.qn-stars { position: absolute; left: -40px; width: 80px; top: 34px; text-align: center; font-size: 17px; letter-spacing: 1px; pointer-events: none; }
.qn.side .qn-stars { top: 22px; font-size: 14px; }
.qn-stars i { display: inline-block; font-style: normal; color: #ffffff66; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.qn-stars i.on { color: #ffd84a; text-shadow: 0 0 6px #ffb400, 0 1px 2px #000; }
.qn-label { position: absolute; left: -110px; width: 220px; top: 56px; text-align: center; pointer-events: none;
  font: 800 15px/1.15 'Segoe UI'; text-shadow: 0 2px 0 #000, 0 0 6px #000, 0 0 12px #000; }
.qn.side .qn-label { top: 40px; font-size: 13px; opacity: 0; transition: opacity .2s; }
.qn.done .qn-label { top: 76px; }
.qn.side.done .qn-label { top: 56px; }
.qn.side:hover .qn-label, .qn.side.sel .qn-label { opacity: 1; }
.qn:hover, .qn.sel { z-index: 5; }
/* ambience and celebrations (storymap.js): motes drifting over the map, rings, star bursts, the token's sparkle trail, CLEAR stamps */
#map-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#map-motes i { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3px; border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: color-mix(in srgb, var(--c) 40%, #fff); box-shadow: 0 0 10px 3px color-mix(in srgb, var(--c) 70%, transparent); }
#map-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#map-fx i { position: absolute; left: 0; top: 0; pointer-events: none; font-style: normal; }
.mfx-ring { border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 14px #fff8, inset 0 0 10px #fff6; }
.mfx-star { font: 900 24px 'Segoe UI'; text-shadow: 0 0 8px currentColor, 0 2px 2px #000; }
.mfx-dust { width: 8px; height: 8px; border-radius: 50%; background: #fff6c4; box-shadow: 0 0 8px 2px #ffd84a; }
.qn-clear { position: absolute; left: -80px; width: 160px; top: -24px; text-align: center; pointer-events: none; z-index: 6;
  font: italic 900 32px 'Segoe UI Black', 'Segoe UI'; color: #fff; letter-spacing: 1px; -webkit-text-stroke: 1px #5a3a00;
  text-shadow: 0 3px 0 #000, 0 0 14px #ffd84a, 0 0 28px var(--c); }
#map-token { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
#map-token img { width: 58px; height: 58px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 3px #ff6fae, 0 8px 14px #000b; display: block;
  margin-bottom: 44px; }

#map-head { position: absolute; left: 0; right: 0; top: 0; height: 84px; display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: linear-gradient(#0b0816ee, #0b081600); pointer-events: none; }
#map-head > * { pointer-events: auto; }
#map-acts { display: flex; gap: 10px; }
.act-tab { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 16px; cursor: pointer; color: #fff; text-align: left;
  background: rgba(14,10,34,.85); border: 2px solid #ffffff33; box-shadow: 0 4px 0 #0008; transition: transform .15s; }
.act-tab:hover { transform: translateY(-2px); }
.act-tab i { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 18px 'Segoe UI'; font-style: normal;
  background: var(--c); color: #1a1030; }
.act-tab span { display: flex; flex-direction: column; }
.act-tab b { font: 900 15px 'Segoe UI'; }
.act-tab small { font-size: 12px; opacity: .8; }
.act-tab.on { border-color: var(--c); box-shadow: 0 4px 0 #0008, 0 0 18px color-mix(in srgb, var(--c) 70%, transparent); background: rgba(30,20,60,.95); }
.act-tab.locked { opacity: .55; cursor: not-allowed; }
.act-tab.locked i { background: #666; }
#map-count { margin: 0 64px 0 auto; display: flex; gap: 8px; }
#map-count span { padding: 6px 12px; border-radius: 12px; background: rgba(14,10,34,.85); border: 2px solid #ffffff22; font: 800 16px 'Segoe UI'; }
#map-next { position: absolute; right: 30px; bottom: 26px; max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#map-next b { font-weight: 900; }

#map-panel { position: absolute; right: 18px; top: 96px; bottom: 96px; width: 400px; padding: 18px 22px; border-radius: 22px; overflow-y: auto;
  background: rgba(14,10,34,.93); border: 3px solid #ffffff2a; box-shadow: 0 16px 40px #000c; display: flex; flex-direction: column; gap: 8px; }
#map-panel.closed { display: none; }
#map-panel h2 { margin: 0; font: 900 26px/1.1 'Segoe UI'; text-shadow: 0 3px 0 #000; }
.mp-close { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: #ffffff18; color: #fff; font-size: 16px; }
.mp-close:hover { background: #ffffff33; }
.mp-tag { align-self: flex-start; padding: 3px 12px; border-radius: 10px; font: 900 12px 'Segoe UI'; letter-spacing: 1.5px; text-transform: uppercase;
  background: color-mix(in srgb, var(--c) 30%, #0000); border: 1px solid var(--c); color: color-mix(in srgb, var(--c) 60%, #fff); }
.mp-art { height: 230px; flex: none; display: flex; justify-content: center; align-items: flex-end; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, #ffffff22, #0000 70%); }
/* a chapter's art (storymap.js artOf): its place, its characters acting out beats on it */
.mp-art.stage { position: relative; display: block; background: #0a0818; border: 2px solid color-mix(in srgb, var(--c) 55%, #ffffff22);
  box-shadow: inset 0 0 0 1px #0008, 0 0 18px color-mix(in srgb, var(--c) 30%, #0000); }
.mp-bg { position: absolute; inset: -4%; background-size: cover; background-position: center; }
.mp-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#0000 45%, #000a), radial-gradient(ellipse at 50% 115%, color-mix(in srgb, var(--c) 45%, #0000), #0000 60%); }
.mp-aura { position: absolute; left: 50%; bottom: -60px; width: 340px; height: 340px; margin-left: -170px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 75%, #0000), #0000 65%); mix-blend-mode: screen; }
.mp-fig { position: absolute; bottom: -24px; width: 0; display: flex; justify-content: center; transform-origin: 50% 100%; }
.mp-fig img { height: 250px; flex: none; filter: drop-shadow(0 6px 10px #000); transition: filter .35s; }
.mp-art.crowd .mp-fig img { height: 215px; }
.mp-fig.hush img { filter: drop-shadow(0 6px 10px #000) brightness(.55) saturate(.7); }
.mp-emote { position: absolute; bottom: 196px; left: 30px; font-size: 34px; line-height: 1; pointer-events: none; filter: drop-shadow(0 3px 3px #000a); }
.mp-art.crowd .mp-emote { bottom: 168px; left: 18px; font-size: 28px; }
.mp-slash { position: absolute; left: -20%; top: 42%; width: 140%; height: 7px; opacity: 0; pointer-events: none; transform: rotate(-16deg);
  background: linear-gradient(90deg, #0000, #fff 45%, color-mix(in srgb, var(--c) 60%, #fff) 55%, #0000); box-shadow: 0 0 14px var(--c); }
.mp-spill { position: absolute; width: 300px; height: 220px; margin: -110px 0 0 -150px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse, #c9a0ffcc, #7a3cff55 40%, #0000 70%); }
.mp-rift { position: absolute; width: 250px; height: 125px; margin: -62px 0 0 -125px; overflow: visible; pointer-events: none; transform: rotate(var(--t)) scale(var(--s)); }
.mr-shadow { filter: brightness(0); }
.mp-art.lock .mp-bg { filter: blur(3px) brightness(.4) grayscale(.6); }
.mp-art.lock .mp-fig img { filter: brightness(0) drop-shadow(0 0 6px #ffffff55); opacity: .85; }
.mp-q { position: absolute; inset: 0; display: grid; place-items: center; font: 900 90px 'Segoe UI'; color: #ffffffb0;
  text-shadow: 0 4px 0 #000, 0 0 24px var(--c); }
.mp-who { font-size: 15px; line-height: 1.35; }
.mp-who small { opacity: .75; }
.mp-text { margin: 0; font-size: 16px; line-height: 1.4; opacity: .95; }
.mp-boss { padding: 8px 10px; border-radius: 10px; font-size: 14px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 18%, #0008); }
.mp-stars { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.mp-stars span { opacity: .7; }
.mp-stars span.on { opacity: 1; color: #ffd84a; }
.mp-reward { font-size: 14px; padding: 7px 10px; border-radius: 10px; background: #ffffff10; }
.mp-btns { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; }
.mp-btns .btn { flex: 1; }

.act-card { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 20; }
.act-card small { display: block; font: 900 22px 'Segoe UI'; letter-spacing: 10px; text-transform: uppercase; color: var(--c); text-shadow: 0 2px 0 #000; }
.act-card b { display: block; font: 900 72px/1.1 'Segoe UI Black', 'Segoe UI'; white-space: nowrap; text-shadow: 0 5px 0 #000, 0 0 30px var(--c); }
.act-done { position: absolute; inset: calc(-1 * var(--by)) calc(-1 * var(--bx)); z-index: 60; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #0b0816aa, #0b0816f0); }
.ad-rays { position: absolute; left: 50%; top: 45%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c) 35%, transparent) 0 6deg, transparent 6deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 0 6%, #0000 40%); mask: radial-gradient(circle, #000 0 6%, #0000 40%); animation: rsSpin 50s linear infinite; }
.ad-fx { position: absolute; left: var(--bx); top: var(--by); width: 1600px; height: 900px; pointer-events: none; overflow: hidden; z-index: 2; perspective: 600px; }
.ad-card { position: relative; z-index: 1; width: 640px; padding: 28px 36px; text-align: center; border-radius: 26px;
  background: rgba(14,10,34,.96); border: 3px solid var(--c); box-shadow: 0 0 0 6px #0006, 0 0 70px color-mix(in srgb, var(--c) 60%, transparent), 0 20px 50px #000; }
.ad-card small { display: block; font: 900 18px 'Segoe UI'; letter-spacing: 6px; text-transform: uppercase; color: var(--c); }
.ad-card > b { display: block; font: 900 50px/1.15 'Segoe UI Black', 'Segoe UI'; margin: 6px 0 12px; text-shadow: 0 4px 0 #000, 0 0 30px var(--c); }
.ad-card p { font-size: 18px; line-height: 1.45; margin: 0 0 18px; }
.ad-pack { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 20px; }
.ad-pack img { height: 180px; filter: drop-shadow(0 0 26px #b35cffaa) drop-shadow(0 8px 10px #000a); }

/* ================= Story scenes ================= */
#screen-scene { padding: 0; cursor: pointer; }
/* the scene's full-screen layers run past the 16:9 box into the letterbox margins (--bx/--by, set by main.js),
   so any window shape gets the lighting, fades, bars and weather edge to edge; the ::before takes clicks there */
#screen-scene::before { content: ''; position: absolute; }
#screen-scene::before, #screen-scene #sc-weather, #screen-scene #sc-light, #screen-scene #sc-close, #screen-scene #sc-bars,
#screen-scene #sc-flash, #screen-scene #sc-fade { inset: calc(-1 * var(--by)) calc(-1 * var(--bx)); }
#sc-stage { position: absolute; inset: 0; }
.sc-sprite { position: absolute; bottom: calc(-1 * var(--by)); height: 780px; filter: drop-shadow(0 10px 20px #000a); transition: filter .3s; }
.sc-sprite.left { left: 70px; }
.sc-sprite.right { right: 70px; }
.sc-sprite.center { left: 50%; margin-left: -260px; height: 820px; }
.sc-sprite.dim { filter: brightness(.45) saturate(.6) drop-shadow(0 10px 20px #000a); }
.sc-sprite.gone { display: none; }
/* everyone on stage breathes (the CSS scale property, so it stacks with the GSAP moves on transform) */
.sc-sprite { transform-origin: 50% 100%; animation: scBreathe 3.4s ease-in-out infinite alternate; }
.sc-sprite.right { animation-delay: -1.2s; }
.sc-sprite.center { animation-delay: -2.3s; }
@keyframes scBreathe { from { scale: 1 1; } to { scale: 1.005 1.012; } }
.sc-emote { position: absolute; left: 0; top: 0; font-size: 72px; line-height: 1; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 4px 6px #000a); }
.sc-emote.m-happy, .sc-emote.m-excited { color: #ffd84a; font-weight: 900; }
.sc-emote.m-rage { font-size: 96px; filter: drop-shadow(0 0 10px #ff2a2a) drop-shadow(0 4px 6px #000a); }
#sc-weather { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#sc-weather i { position: absolute; left: 0; top: 0; display: block; }
#sc-weather .petals { width: 16px; height: 10px; border-radius: 60% 0 60% 0; background: linear-gradient(135deg, #ffe0ee, #ff9cc9); box-shadow: 0 0 4px #ff9cc955; }
#sc-weather .snow { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .85; filter: blur(.5px); }
#sc-weather .rain { width: 2px; height: 34px; background: linear-gradient(#fff0, #cfe6ffcc); transform: rotate(12deg); }
#sc-weather .embers { width: 6px; height: 6px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 10px 3px #ff5a1f; }
#sc-weather .sparkles, #sc-weather .stars { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #fff8; }
#sc-weather .sparkles { background: #fff3b0; box-shadow: 0 0 12px 4px #ffd84a99; }
/* close-ups: the speaker in front of their own sky (data-sky, MB.CLOSE_LOOKS) with particles (.cl-fx, storymap.js).
   --sx/--sy is the sun, behind the speaker's head; ::before/::after are each sky's moving layers */
#sc-close { --sx: calc(var(--bx) + 1150px); --sy: calc(var(--by) + 340px); position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(circle at var(--sx) var(--sy), color-mix(in srgb, var(--c) 45%, transparent), #0000 900px),
    repeating-conic-gradient(from 0deg at var(--sx) var(--sy), #ffffff10 0 2deg, #0000 2deg 9deg); }
#sc-close img { position: absolute; right: calc(60px + var(--bx)); top: calc(var(--by) - 80px); height: 1500px; filter: drop-shadow(0 20px 40px #000c); z-index: 2; }
#sc-close::before, #sc-close::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
#sc-close:not([data-sky])::before, #sc-close:not([data-sky])::after { display: none; }
/* a layer centred on the sun, big enough to spin without showing its corners */
#sc-close[data-sky="impact"]::before, #sc-close[data-sky="sunshine"]::before, #sc-close[data-sky="blueprint"]::before,
#sc-close[data-sky="blueprint"]::after, #sc-close[data-sky="riches"]::before, #sc-close[data-sky="disco"]::before,
#sc-close[data-sky="obsession"]::before, #sc-close[data-sky="holy"]::before, #sc-close[data-sky="hypno"]::before, #sc-close[data-sky="hypno"]::after {
  inset: auto; left: var(--sx); top: var(--sy); width: 4000px; height: 4000px; margin: -2000px 0 0 -2000px; }
.cl-fx { position: absolute; inset: 0; z-index: 1; }
.cl-fx i { position: absolute; left: 0; top: 0; display: block; font-style: normal; line-height: 1; }
.cl-fx .emo { filter: drop-shadow(0 4px 8px #0006); }
.cl-fx .ember { width: 7px; height: 7px; border-radius: 50%; background: #ffcf6a; box-shadow: 0 0 10px 4px #ff5a1f; }
.cl-fx .spark { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 5px color-mix(in srgb, var(--c) 70%, #fff); }
.cl-fx .firefly { width: 7px; height: 7px; border-radius: 50%; background: #f4ffb0; box-shadow: 0 0 14px 6px #c8ff5a99; }
.cl-fx .bubble { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ffffffb0; background: radial-gradient(circle at 30% 30%, #fffc 0 3px, #ffffff22 5px, #fff0 70%); }
.cl-fx .bubble:nth-child(3n) { width: 12px; height: 12px; } .cl-fx .bubble:nth-child(5n) { width: 36px; height: 36px; }
.cl-fx .petal { width: 18px; height: 12px; border-radius: 60% 0 60% 0; background: linear-gradient(135deg, #fff0f5, #ff9cc9); box-shadow: 0 0 4px #ff9cc955; }
.cl-fx .feather { width: 14px; height: 46px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: linear-gradient(90deg, #fff 48%, #e8dcc8 50%, #fff 52%); box-shadow: 0 0 10px #fff9; }
.cl-fx .streak { width: 340px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #fff0, #fff 60%, #fff0); }
.cl-fx .confetti { width: 12px; height: 18px; background: #ff5a8a; }
.cl-fx .confetti:nth-child(5n+1) { background: #ffd84a; } .cl-fx .confetti:nth-child(5n+2) { background: #4aa3ff; }
.cl-fx .confetti:nth-child(5n+3) { background: #5fd068; } .cl-fx .confetti:nth-child(5n+4) { background: #b35cff; }

/* hell: a black-red sky, a burning sun and a wall of flames licking up */
#sc-close[data-sky="hell"] { background: radial-gradient(circle at var(--sx) var(--sy), #fff1b0 0 60px, #ff9a1c 115px, #d0200a 200px, #6a0606aa 340px, #0000 560px),
  linear-gradient(#170204f4, #3a0606f0 55%, #901c04f4); }
#sc-close[data-sky="hell"]::before, #sc-close[data-sky="hell"]::after { top: 42%; transform-origin: 50% 100%;
  background: linear-gradient(0deg, #fff3a0, #ffb02e 16%, #ff4a1c 42%, #b0100a99 72%, #0000);
  -webkit-mask: conic-gradient(from 160deg at 50% 0, #000 0 40deg, #0000 0) 0 0 / 110px 100% repeat-x;
  mask: conic-gradient(from 160deg at 50% 0, #000 0 40deg, #0000 0) 0 0 / 110px 100% repeat-x; animation: clFlame .5s ease-in-out infinite alternate; }
#sc-close[data-sky="hell"]::after { top: 58%; opacity: .85; -webkit-mask-size: 170px 100%; mask-size: 170px 100%; -webkit-mask-position: 60px 0; mask-position: 60px 0;
  animation-duration: .37s; animation-direction: alternate-reverse; }
@keyframes clFlame { from { transform: scaleY(1) skewX(-3deg); } to { transform: scaleY(1.14) skewX(3deg); } }

/* hearth: warm pink morning light and soft glowing blurs */
#sc-close[data-sky="hearth"] { background: radial-gradient(circle at var(--sx) var(--sy), #fffaf0 0 80px, #ffe0e6 160px, color-mix(in srgb, var(--c) 55%, transparent) 320px, #0000 700px),
  linear-gradient(160deg, #ffb3c7f0, #ffd8b0f0 50%, #f79ab8f0); }
#sc-close[data-sky="hearth"]::before { background: radial-gradient(circle at 12% 22%, #fff8 0 70px, #0000 72px), radial-gradient(circle at 30% 75%, #fff6 0 110px, #0000 112px),
  radial-gradient(circle at 48% 30%, #ffffff50 0 50px, #0000 52px), radial-gradient(circle at 20% 50%, #fff5 0 36px, #0000 38px), radial-gradient(circle at 88% 85%, #fff6 0 90px, #0000 92px);
  filter: blur(6px); animation: clBreathe 4s ease-in-out infinite alternate; }
@keyframes clBreathe { from { opacity: .5; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }

/* impact: manga speed lines rushing into a white-hot centre */
#sc-close[data-sky="impact"] { background: radial-gradient(circle at var(--sx) var(--sy), #fff 0 90px, var(--c) 280px, #7a2a00 900px); }
#sc-close[data-sky="impact"]::before { background: repeating-conic-gradient(#0000 0 3deg, #fffc 3deg 3.6deg, #0000 3.6deg 7deg, #2a0e0099 7deg 7.4deg, #0000 7.4deg 11deg);
  -webkit-mask: radial-gradient(circle, #0000 150px, #000 420px); mask: radial-gradient(circle, #0000 150px, #000 420px); animation: clJitter .24s steps(1) infinite; }
@keyframes clJitter { 0% { transform: rotate(0); } 33% { transform: rotate(1.5deg); } 66% { transform: rotate(-1deg); } }

/* sunshine: a blue sky, a huge happy sun turning its rays, and a rainbow */
#sc-close[data-sky="sunshine"] { background: radial-gradient(circle at var(--sx) var(--sy), #fff 0 90px, #fff3a0 130px, #ffd84a 180px, #ffd84a00 340px),
  radial-gradient(circle at 18% 115%, #0000 0 540px, #ff5a5a88 540px 570px, #ffa64088 570px 600px, #ffe06688 600px 630px, #5fd06888 630px 660px, #4aa3ff88 660px 690px, #b35cff88 690px 720px, #0000 720px),
  linear-gradient(#6fcaff, #bfe9ff 60%, #fff4c2); }
#sc-close[data-sky="sunshine"]::before { background: repeating-conic-gradient(#fff6b077 0 8deg, #0000 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 20%, #0000 55%); mask: radial-gradient(circle, #000 20%, #0000 55%); animation: clSpin 40s linear infinite; }
@keyframes clSpin { to { transform: rotate(360deg); } }

/* bokeh: an evening glow full of soft out-of-focus lights */
#sc-close[data-sky="bokeh"] { background: radial-gradient(circle at var(--sx) var(--sy), #fff 0 40px, color-mix(in srgb, var(--c) 70%, #fff) 100px, #0000 380px),
  linear-gradient(135deg, #1d1240f2, #4a2a7af2 50%, #b04a8af2); }
#sc-close[data-sky="bokeh"]::before { background: radial-gradient(circle at 10% 20%, #ff9cc977 0 60px, #0000 62px), radial-gradient(circle at 34% 72%, color-mix(in srgb, var(--c) 60%, transparent) 0 90px, #0000 92px),
  radial-gradient(circle at 22% 45%, #ffd84a55 0 40px, #0000 42px), radial-gradient(circle at 52% 18%, #ffffff44 0 70px, #0000 72px), radial-gradient(circle at 60% 88%, #ff9cc955 0 55px, #0000 57px),
  radial-gradient(circle at 90% 12%, #ffffff33 0 80px, #0000 82px); filter: blur(4px); animation: clFloat 7s ease-in-out infinite alternate; }
@keyframes clFloat { from { transform: translate(-20px, 10px); } to { transform: translate(30px, -20px); } }

/* blueprint: a drafting grid, compass rings round the sun and a radar sweep */
#sc-close[data-sky="blueprint"] { background: radial-gradient(circle at var(--sx) var(--sy), #e8fbff 0 50px, var(--c) 120px, #0000 400px),
  linear-gradient(#ffffff40 2px, #0000 2px) 0 0 / 200px 200px, linear-gradient(90deg, #ffffff40 2px, #0000 2px) 0 0 / 200px 200px,
  linear-gradient(#ffffff1c 1px, #0000 1px) 0 0 / 40px 40px, linear-gradient(90deg, #ffffff1c 1px, #0000 1px) 0 0 / 40px 40px, #0d3a73f4; }
#sc-close[data-sky="blueprint"]::before { background: repeating-radial-gradient(circle, #0000 0 118px, #9fe8ff66 118px 121px, #0000 121px 180px);
  -webkit-mask: radial-gradient(circle, #000 20%, #0000 30%); mask: radial-gradient(circle, #000 20%, #0000 30%); animation: clBreathe 3s ease-in-out infinite alternate; }
#sc-close[data-sky="blueprint"]::after { background: conic-gradient(#9fe8ff66, #0000 50deg);
  -webkit-mask: radial-gradient(circle, #000 12%, #0000 18%); mask: radial-gradient(circle, #000 12%, #0000 18%); animation: clSpin 5s linear infinite; }

/* spotlight: a dark stage, two spotlights hunting for the star */
#sc-close[data-sky="spotlight"] { background: radial-gradient(circle at var(--sx) var(--sy), #fff 0 60px, var(--c) 190px, #0000 440px),
  radial-gradient(ellipse at 50% 125%, color-mix(in srgb, var(--c) 45%, transparent), #0000 60%), #12061af2; }
#sc-close[data-sky="spotlight"]::before, #sc-close[data-sky="spotlight"]::after { transform-origin: 18% 0;
  background: conic-gradient(from 130deg at 18% 0, #0000 0deg, #fff5d955 6deg 24deg, #0000 30deg); animation: clSweep 3.2s ease-in-out infinite alternate; }
#sc-close[data-sky="spotlight"]::after { transform-origin: 96% 0; background: conic-gradient(from 196deg at 96% 0, #0000 0deg, #ffd6ec55 6deg 22deg, #0000 28deg);
  animation-duration: 2.6s; animation-direction: alternate-reverse; }
@keyframes clSweep { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* moonwood: a silver moon over a pine forest at night */
#sc-close[data-sky="moonwood"] { background: radial-gradient(circle at var(--sx) var(--sy), #fbfff0 0 72px, #dff2c8 82px, color-mix(in srgb, var(--c) 30%, transparent) 180px, #0000 440px),
  linear-gradient(#071524f4, #0f2c2af4 70%, #081810f6); }
#sc-close[data-sky="moonwood"]::before { top: 50%; background: conic-gradient(from 155deg at 50% 0, #0b2418 0 50deg, #0000 0) 30px 0 / 150px 100% repeat-x; }
#sc-close[data-sky="moonwood"]::after { top: 64%; background: conic-gradient(from 150deg at 50% 0, #040d08 0 60deg, #0000 0) 0 0 / 220px 100% repeat-x; }

/* deep: underwater, light shafts wavering down from the surface */
#sc-close[data-sky="deep"] { background: radial-gradient(circle at var(--sx) var(--sy), #e6fbff 0 40px, #7fe0ff 110px, #3fb6ff33 280px, #0000 500px),
  linear-gradient(#1b8fd0f2, #0b4f8cf4 50%, #041a3af6); }
#sc-close[data-sky="deep"]::before { background: repeating-linear-gradient(100deg, #fff0 0 70px, #ffffff1e 70px 130px, #fff0 130px 230px);
  -webkit-mask: linear-gradient(#000, #0000 80%); mask: linear-gradient(#000, #0000 80%); animation: clShafts 6s ease-in-out infinite alternate; }
@keyframes clShafts { from { background-position: 0 0; } to { background-position: 160px 0; } }

/* dawn: sunrise over a river that shimmers */
#sc-close[data-sky="dawn"] { background: radial-gradient(circle at var(--sx) var(--sy), #fffbe8 0 75px, #ffd27a 135px, color-mix(in srgb, var(--c) 45%, transparent) 280px, #0000 560px),
  linear-gradient(#ff9a8bf2, #ffc59af2 35%, #ffe3a8f2 60%, #6fc3c9f4 60%, #2f7f9af6); }
#sc-close[data-sky="dawn"]::before { top: 60%; background: repeating-linear-gradient(#fff0 0 16px, #ffffff66 16px 18px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 90px, #0000 90px 150px); mask: repeating-linear-gradient(90deg, #000 0 90px, #0000 90px 150px);
  opacity: .7; animation: clRipple 2.4s linear infinite; }
@keyframes clRipple { to { -webkit-mask-position: 150px 0; mask-position: 150px 0; } }

/* redsun: an ink-painting sky, a great red sun and mist drifting across it */
#sc-close[data-sky="redsun"] { background: radial-gradient(circle at var(--sx) var(--sy), var(--c) 0 230px, #0000 232px),
  radial-gradient(ellipse at 50% 125%, #ffc1d6, #0000 60%), linear-gradient(#fff4f0f4, #ffe0eaf4); }
#sc-close[data-sky="redsun"]::before { inset: auto 0; top: calc(var(--by) + 280px); height: 150px;
  background: linear-gradient(#0000 10%, #fff4f0e0 10% 30%, #0000 30% 55%, #fff4f0c8 55% 68%, #0000 68%) 0 0 / 900px 100%;
  -webkit-mask: linear-gradient(90deg, #0000, #000 20% 80%, #0000) 0 0 / 900px 100%; mask: linear-gradient(90deg, #0000, #000 20% 80%, #0000) 0 0 / 900px 100%;
  animation: clMist 14s linear infinite; }
@keyframes clMist { to { -webkit-mask-position: 900px 0; mask-position: 900px 0; } }

/* warlord: a blood sun over black mountains; a sword stroke cuts the sky */
#sc-close[data-sky="warlord"] { background: radial-gradient(circle at var(--sx) var(--sy), #ff6a4a 0 180px, var(--c) 195px, #b8322a00 440px),
  linear-gradient(#1a0606f4, #3a0a0af4 60%, #0a0303f6); }
#sc-close[data-sky="warlord"]::before { top: 55%; background: conic-gradient(from 120deg at 50% 0, #0a0303 0 120deg, #0000 0) 0 0 / 520px 100% repeat-x,
  conic-gradient(from 130deg at 50% 25%, #1c0808 0 100deg, #0000 0) 240px 0 / 700px 100% repeat-x; }
#sc-close[data-sky="warlord"]::after { background: linear-gradient(-18deg, #0000 49.7%, #fff 49.85% 50.15%, #0000 50.3%);
  transform-origin: 0 50%; animation: clSlash 2.6s ease-out infinite; }
@keyframes clSlash { 0% { transform: scaleX(0); opacity: 1; } 12% { transform: scaleX(1); opacity: 1; } 40%, 100% { transform: scaleX(1); opacity: 0; } }

/* riches: pink and gold, the sun a coin throwing golden rays */
#sc-close[data-sky="riches"] { background: radial-gradient(circle at var(--sx) var(--sy), #fffbe6 0 60px, #ffe27a 140px, color-mix(in srgb, var(--c) 40%, transparent) 300px, #0000 580px),
  linear-gradient(135deg, #ffd6e8f4, #ffe7a8f4 50%, #ffb8d6f4); }
#sc-close[data-sky="riches"]::before { background: repeating-conic-gradient(#ffc93c55 0 6deg, #0000 6deg 15deg); animation: clSpin 50s linear infinite; }

/* disco: party lights wheeling round a mirror-ball sun, colours cycling */
#sc-close[data-sky="disco"] { background: radial-gradient(circle at var(--sx) var(--sy), #fff 0 55px, color-mix(in srgb, var(--c) 60%, transparent) 130px, #0000 320px), #140a24f4; }
#sc-close[data-sky="disco"]::before { background: repeating-conic-gradient(#ff3b3b88 0 10deg, #0000 10deg 30deg, #ffd84a88 30deg 40deg, #0000 40deg 60deg, #4aa3ff88 60deg 70deg, #0000 70deg 90deg);
  -webkit-mask: radial-gradient(circle, #000 5%, #0000 40%); mask: radial-gradient(circle, #000 5%, #0000 40%); animation: clDisco 6s linear infinite; }
@keyframes clDisco { to { transform: rotate(360deg); filter: hue-rotate(360deg); } }

/* obsession: a dark room, a heartbeat of red light */
#sc-close[data-sky="obsession"] { background: radial-gradient(circle at var(--sx) var(--sy), #ffd6dc 0 40px, #ff4a5a 120px, #c0303a88 250px, #0000 540px),
  linear-gradient(#2a0410f4, #150208f6); }
#sc-close[data-sky="obsession"]::before { background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent) 0 150px, #0000 560px);
  animation: clBeat 1.2s ease-out infinite; }
@keyframes clBeat { 0%, 30%, 100% { transform: scale(1); opacity: .6; } 10%, 40% { transform: scale(1.25); opacity: 1; } }

/* holy: pale heaven, slow white rays and a halo behind her head */
#sc-close[data-sky="holy"] { background: radial-gradient(circle at var(--sx) var(--sy), #0000 0 255px, #ffd76a 258px 268px, #0000 272px),
  radial-gradient(circle at var(--sx) var(--sy), #fff 0 100px, #fff6dc 170px, color-mix(in srgb, var(--c) 50%, transparent) 340px, #0000 680px),
  linear-gradient(#fff9f2f4, #ffe6eff4 60%, #f2d6fff4); }
#sc-close[data-sky="holy"]::before { background: repeating-conic-gradient(#ffffffaa 0 3deg, #0000 3deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 5%, #0000 40%); mask: radial-gradient(circle, #000 5%, #0000 40%); animation: clSpin 70s linear infinite; }

/* hypno: a turning pinwheel and rings falling inwards; look into her eyes */
#sc-close[data-sky="hypno"] { background: #1a0630; }
#sc-close[data-sky="hypno"]::before { background: repeating-conic-gradient(var(--c) 0 15deg, #2a0a4a 15deg 30deg); animation: clSpin 4s linear infinite; }
#sc-close[data-sky="hypno"]::after { background: radial-gradient(circle, #fff 0 30px, color-mix(in srgb, var(--c) 60%, #fff) 60px, #0000 160px),
  repeating-radial-gradient(circle, #0000 calc(0px - var(--ring)) calc(70px - var(--ring)), #0a021899 calc(70px - var(--ring)) calc(110px - var(--ring)));
  animation: clSink 1.2s linear infinite; }
@property --ring { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes clSink { to { --ring: 110px; } }
#sc-bars { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#sc-bars i { position: absolute; left: 0; right: 0; height: calc(64px + var(--by)); background: #000; transform-origin: 50% 0; pointer-events: none; z-index: 2; }
#sc-bars i:first-child { top: 0; }
#sc-bars i:last-child { bottom: 0; transform-origin: 50% 100%; }
#sc-caption { position: absolute; left: 40px; top: 90px; padding: 10px 22px 10px 18px; border-left: 4px solid #ff6fae; background: linear-gradient(90deg, #0b0816dd, #0b081600);
  pointer-events: none; z-index: 3; }
#sc-caption b { display: block; font: 900 26px 'Segoe UI'; letter-spacing: 1px; text-shadow: 0 2px 0 #000; min-height: 34px; }
#sc-caption small { font: 700 16px 'Segoe UI'; letter-spacing: 3px; text-transform: uppercase; opacity: .8; }
#sc-title { position: absolute; left: 0; right: 0; top: 330px; text-align: center; pointer-events: none; z-index: 4; }
#sc-title small { display: block; font: 900 18px 'Segoe UI'; letter-spacing: 8px; text-transform: uppercase; color: var(--c); text-shadow: 0 2px 0 #000; }
#sc-title .band { position: absolute; left: 0; right: 0; top: 50%; height: 150px; margin-top: -75px; z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 30%, #0b0816cc) 22% 78%, transparent); }
#sc-title .band::before, #sc-title .band::after { content: ''; position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--c), transparent); }
#sc-title .band::before { top: 0; }
#sc-title .band::after { bottom: 0; }
#sc-title b { display: inline-block; font: 900 64px/1.15 'Segoe UI Black', 'Segoe UI'; text-shadow: 0 5px 0 #000, 0 0 30px var(--c); }
#screen-scene .sc-box { cursor: pointer; z-index: 3; bottom: 78px; min-height: 160px; }
.sc-box.narr { border-color: #ffffff55; }
.sc-box.narr .vn-text { font-style: italic; opacity: .92; }
.sc-box.you { border-color: #7ad7ff; }
.sc-box.you .vn-name { color: #9fe4ff; }
#sc-more { position: absolute; right: 26px; bottom: 16px; font-style: normal; color: #ff9cc9; animation: qnHop .6s infinite alternate; }
#sc-fx { position: absolute; inset: 0; pointer-events: none; }
#sc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#sc-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 6; }
#sc-rays { position: absolute; left: 50%; top: 40%; width: 1800px; height: 1800px; margin: -900px 0 0 -900px; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0, #f3e6ffcc 6%, #0000 22%), repeating-conic-gradient(from 0deg, #f3e6ff66 0 1.2deg, #0000 1.2deg 6deg, #ffffff33 6deg 9deg, #0000 9deg 17deg, #e9dbff55 17deg 18deg, #0000 18deg 23deg);
  filter: blur(3px); -webkit-mask-image: radial-gradient(circle, #000 0, #0006 20%, #0000 48%); mask-image: radial-gradient(circle, #000 0, #0006 20%, #0000 48%); }

/* scene lighting (js/scenefx.js): vignette, candlelight, the rift's spill, and a black layer for flickering lights */
#sc-light { position: absolute; inset: 0; pointer-events: none; }
#sc-light i { position: absolute; inset: 0; display: block; opacity: 0; }
#sc-light .vig { opacity: .35; background: radial-gradient(ellipse 75% 70% at 50% 45%, #0000 45%, #05030fcc 100%); }
#sc-light .candle { transform-origin: 50% 100%;
  background: radial-gradient(ellipse 1000px 720px at 50% calc(100% - var(--by) - 72px), #ffc97066, #ff8a2a33 38%, #b040000c 66%, #0000 82%); }
/* plain overlays: #bg lives outside this stacking context, so blend modes would have nothing to blend with */
#sc-light .tint { background: #000; }
#sc-light .dim { background: #000; }

/* the rift: a tear in the sky that sits behind the characters */
#sc-sky { position: absolute; inset: 0; pointer-events: none; }
.sc-rift { position: absolute; width: 0; height: 0; }
.sc-rift > * { position: absolute; left: 0; top: 0; }
.sc-tear { width: 1080px; height: 552px; margin: -276px 0 0 -540px; overflow: visible; }
.rift-halo { width: 1500px; height: 760px; margin: -380px 0 0 -750px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(ellipse, #fff8 0, #e6ccffaa 10%, #a86bff66 28%, #5a2ab033 48%, #0000 68%); }
.rift-rays { width: 1400px; height: 1400px; margin: -700px 0 0 -700px; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, #e9dbff55 0 1.5deg, #0000 1.5deg 7deg, #ffffff22 7deg 8deg, #0000 8deg 17deg);
  -webkit-mask-image: radial-gradient(ellipse 50% 22%, #000 10%, #0000 70%); mask-image: radial-gradient(ellipse 50% 22%, #000 10%, #0000 70%); }
.rift-motes { width: 0; height: 0; }
.rift-motes i { position: absolute; left: 0; top: 0; display: block; }
.rift-mote { width: 26px; height: 3px; margin: -1.5px 0 0 -13px; border-radius: 3px; background: linear-gradient(90deg, #fff0, #f1e6ff); box-shadow: 0 0 8px #c9a0ff; }
.rift-spark { width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #c9a0ff, 0 0 22px 6px #8a4dff88; }
.rift-shard { width: 16px; height: 26px; margin: -13px -8px; clip-path: polygon(50% 0, 100% 60%, 45% 100%, 0 45%);
  background: linear-gradient(160deg, #fff, #d9bcff 50%, #8a4dff); filter: drop-shadow(0 0 6px #c9a0ff); }
/* while a rift is open, everyone on stage catches its light */
#screen-scene.rift-lit .sc-sprite { filter: drop-shadow(0 -2px 3px #e3ccffaa) drop-shadow(0 0 26px #9a5cff66) drop-shadow(0 10px 20px #000a); }
#screen-scene.rift-lit .sc-sprite.dim { filter: brightness(.45) saturate(.6) drop-shadow(0 -2px 3px #e3ccff66) drop-shadow(0 10px 20px #000a); }
#sc-ui { position: absolute; right: 84px; top: 14px; display: flex; gap: 8px; z-index: 5; }
#sc-ui .btn { font-size: 14px; padding: 7px 14px; background: rgba(14,10,34,.8); box-shadow: 0 3px 0 #0008; }
#sc-ui .btn.on { background: linear-gradient(#ff6fae, #d8337e); }
#sc-choices { position: absolute; left: 0; right: 0; top: 280px; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 5; pointer-events: none; }
.sc-choice { pointer-events: auto; }
.sc-choice { min-width: 520px; padding: 14px 26px; border-radius: 16px; cursor: pointer; color: #fff; font: 800 21px 'Segoe UI';
  background: rgba(14,10,34,.92); border: 3px solid #ffffff44; box-shadow: 0 6px 20px #000a; transition: transform .15s, border-color .15s; }
.sc-choice:hover { transform: scale(1.04); border-color: #ff6fae; box-shadow: 0 0 24px #ff6fae88; }
#sc-log { position: absolute; left: 260px; right: 260px; top: 80px; bottom: 80px; padding: 20px 30px; border-radius: 20px; z-index: 7; cursor: default;
  background: rgba(10,7,24,.97); border: 3px solid #ffffff33; }
#sc-log h3 { margin: 0 0 10px; font: 900 24px 'Segoe UI'; }
#sc-log p { margin: 0 0 10px; font-size: 17px; line-height: 1.4; }
#sc-log p b { display: block; color: #ff9cc9; font-size: 15px; }
#sc-log .btn { position: sticky; bottom: 0; }

/* ================= Story map: locations, secrets, fly-overs ================= */
.qn.place .qn-ring { width: 104px; height: 104px; left: -52px; top: -52px; border-radius: 50%; isolation: isolate; background: none;
  box-shadow: 0 6px 0 #1a1040, 0 0 30px color-mix(in srgb, var(--c) 70%, transparent); }
.qn.place .qn-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #9fe4ff, #6a5cff, #ff6fae, #ffd84a, #9fe4ff); animation: portalSpin 4s linear infinite; }
@keyframes portalSpin { to { transform: rotate(360deg); } }
.qn-face.qn-portal { font-size: 50px; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; color: initial; text-shadow: none; background: radial-gradient(circle, #3a2a6a, #120c28 75%); }
.qn.place.locked .qn-ring::before { animation: none; background: #6b6680; }
.qn.place .qn-label { top: 62px; }
.qn.place .qn-new { left: 26px; top: -60px; width: auto; min-width: 30px; padding: 0 6px; border-radius: 15px; }
.qn-label small { display: block; font: 900 11px 'Segoe UI'; letter-spacing: 2px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 60%, #fff); }
.secret { position: absolute; width: 0; height: 0; z-index: 3; cursor: pointer; }
.secret i { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-style: normal;
  font-size: 26px; color: #fff3b0; text-shadow: 0 0 10px #ffd84a, 0 0 20px #ffb400; animation: twinkle 1.6s ease-in-out infinite alternate; }
@keyframes twinkle { from { transform: scale(.75) rotate(0deg); opacity: .6; } to { transform: scale(1.15) rotate(45deg); opacity: 1; } }
.secret span { position: absolute; left: -90px; width: 180px; top: 20px; text-align: center; font: 800 13px 'Segoe UI'; text-shadow: 0 2px 0 #000, 0 0 6px #000;
  opacity: 0; transition: opacity .2s; pointer-events: none; }
.secret:hover span { opacity: 1; }
.secret.found i { animation: none; opacity: .45; font-size: 20px; }
#map-path .arc .line { stroke-width: 6; }
#map-leave { position: absolute; left: 200px; bottom: 26px; }
#screen-story.in-place #map-img { box-shadow: 0 0 0 4px #ffffff22, 0 0 120px #000; border-radius: 20px; }
.place-card { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 20; }
.place-card small { display: block; font: 900 14px 'Segoe UI'; letter-spacing: 6px; text-transform: uppercase; color: var(--c); }
.place-card b { font: 900 40px 'Segoe UI Black', 'Segoe UI'; text-shadow: 0 4px 0 #000, 0 0 20px var(--c); white-space: nowrap; }
.act-fly { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 30;
  background: radial-gradient(ellipse at center, #0b081688, #0b0816cc); cursor: pointer; }
.act-fly small { font: 900 22px 'Segoe UI'; letter-spacing: 10px; text-transform: uppercase; color: var(--c); text-shadow: 0 2px 0 #000; }
.act-fly b { font: 900 82px/1.1 'Segoe UI Black', 'Segoe UI'; text-shadow: 0 6px 0 #000, 0 0 40px var(--c); }
.act-fly p { max-width: 900px; min-height: 60px; text-align: center; font: 600 24px/1.4 'Segoe UI'; text-shadow: 0 2px 4px #000; }
.act-fly em { font-size: 14px; opacity: .6; }
#screen-story.flying #map-head, #screen-story.flying #map-next, #screen-story.flying .btn.back { opacity: 0; pointer-events: none; }
.map-toast { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); padding: 12px 24px; border-radius: 16px; z-index: 25; pointer-events: none;
  background: rgba(14,10,34,.95); border: 2px solid #ffd84a; box-shadow: 0 0 24px #ffd84a66; font: 700 18px 'Segoe UI'; white-space: nowrap; }
.mp-list { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.mp-list span { opacity: .6; }
.mp-list span.open { opacity: 1; color: #ffe680; }
.mp-list span.done { opacity: .9; color: #8dffa8; }
.mp-art.place { background-size: cover; background-position: center; border: 2px solid #ffffff22; }

.vn-sprite { position: absolute; bottom: 0; height: 760px; filter: drop-shadow(0 10px 20px #000a); }
.vn-sprite.left { left: 80px; }
.vn-sprite.right { right: 80px; }
.vn-box { position: absolute; left: 200px; right: 200px; bottom: 30px; min-height: 180px; background: rgba(14,10,34,.9); border: 3px solid #ff6fae; border-radius: 20px; padding: 20px 30px; }
.vn-name { font: 900 26px 'Segoe UI'; color: #ff9cc9; margin-bottom: 8px; }
.vn-text { font-size: 24px; min-height: 70px; }
.vn-box .btn { position: absolute; right: 24px; bottom: 20px; }
/* the Story fight's face-off (ui.js faceOff): colour streaks behind both rivals and a VS between them */
.intro-slash { position: absolute; top: 40px; height: 560px; width: 980px; pointer-events: none; overflow: hidden; }
.intro-slash.left { left: -60px; clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%); background: linear-gradient(90deg, #0000, #2a6cff66 45%, #7ad7ffaa); }
.intro-slash.right { right: -60px; clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(270deg, #0000, #ff2a5a66 45%, #ff8aa6aa); }
.intro-slash.right.boss { background: linear-gradient(270deg, #0000, #b0001e88 45%, #ffcf4aaa); }
.intro-slash::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #fff0, #ffffff66 50%, #fff0) 0 0 / 360px 100%;
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 2px, #0000 2px 29px); mask: repeating-linear-gradient(180deg, #000 0 2px, #0000 2px 29px);
  animation: introStreak .45s linear infinite; }
.intro-slash.right::after { animation-direction: reverse; }
@keyframes introStreak { to { background-position: 360px 0; } }
.intro-vs { position: absolute; left: 50%; top: 140px; width: 360px; margin-left: -180px; text-align: center; pointer-events: none; }
.intro-vs b { display: block; padding: 0 16px; font: italic 900 160px/1 'Segoe UI Black', 'Segoe UI'; color: transparent;
  background: linear-gradient(#fff 15%, #ffe066 45%, #ff7a00 85%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 6px 0 #5a1a00) drop-shadow(0 0 26px #ff9d00aa); }
.intro-vs.boss b { background-image: linear-gradient(#fff 12%, #ff9a9a 45%, #c4001c 85%); filter: drop-shadow(0 6px 0 #3a0008) drop-shadow(0 0 26px #ff2a3aaa); }
.intro-vs small { display: inline-block; margin-top: 6px; padding: 4px 14px; border-radius: 10px; font: 900 18px 'Segoe UI'; letter-spacing: 3px; text-transform: uppercase;
  color: #ffd84a; background: #0b0816cc; border: 2px solid #ff4a5a; }
.intro-flash { position: absolute; inset: calc(-1 * var(--by)) calc(-1 * var(--bx)); background: #fff; pointer-events: none; z-index: 10; opacity: 0; }


/* How to Play (js/howto.js): topic list on the left, a looping clip of a mock battle and the rule text on the right */
.howto { display: grid; grid-template-columns: 230px 780px; gap: 18px; height: 720px; background: rgba(14,10,34,.9); border-radius: 20px; padding: 16px 18px; border: 2px solid #ffffff33; }
#ht-tabs { display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.ht-group { margin: 8px 0 2px 6px; font: 900 12px 'Segoe UI'; letter-spacing: 2px; text-transform: uppercase; color: #ff9ccb; }
.ht-group:first-child { margin-top: 0; }
#ht-tabs button { display: flex; align-items: center; gap: 10px; flex: none; padding: 8px 12px; border-radius: 10px; border: 2px solid transparent; background: #ffffff0c; color: #fff; font: 700 16px 'Segoe UI'; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
#ht-tabs button span { width: 24px; text-align: center; }
#ht-tabs button:hover { background: #ffffff1c; }
#ht-tabs button.on { background: linear-gradient(90deg, #ff6fae55, #ff6fae14); border-color: #ff6fae; }
.ht-main { display: flex; flex-direction: column; min-height: 0; }
.ht-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ht-head h2 { margin: 0; font: 900 26px 'Segoe UI'; text-shadow: 0 2px 0 #000; }
#ht-step { font: 700 14px 'Segoe UI'; color: #fff9; }
#ht-stage { position: relative; flex: none; width: 760px; height: 400px; border-radius: 14px; overflow: hidden; border: 2px solid #ffffff2a; background: #120c2a; }
#ht-text { flex: 1; min-height: 0; margin-top: 10px; font-size: 17px; line-height: 1.45; padding-right: 6px; }
#ht-text p { margin: 0 0 8px; }
.ht-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.ht-nav .btn { padding: 7px 18px; font-size: 16px; }
.kw-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 15px; background: #ffffff10; padding: 12px; border-radius: 12px; }

#ht-stage > * { position: absolute; }
.ht-board { inset: 0; background: radial-gradient(ellipse at 50% 55%, #3a2a78, #150e30 75%); }
.ht-board::before { content: ''; position: absolute; inset: 0; opacity: .25;
  background: linear-gradient(#fff2 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, #fff2 1px, transparent 1px) 0 0 / 40px 40px; }
.ht-board.plain { background: radial-gradient(ellipse at 50% 45%, #43307e, #120c2a 75%); }
.ht-board.plain::before { opacity: .12; }
.ht-board.map { background: radial-gradient(ellipse at 30% 70%, #2f6a4a, transparent 50%), radial-gradient(ellipse at 75% 30%, #4a5f2a, transparent 50%), linear-gradient(#27493a, #1a2f2a); }
.ht-tile { width: 92px; height: 34px; margin: -17px 0 0 -46px; border-radius: 50%; border: 2px solid #7fb4ff66; background: #7fb4ff18; }
.ht-tile.s1 { border-color: #ff7f9a66; background: #ff7f9a18; }
.ht-cap { left: 14px; top: 12px; max-width: 520px; padding: 7px 14px; border-radius: 12px; background: #0b0816d9; border: 1px solid #ffffff33; font: 600 16px/1.3 'Segoe UI'; z-index: 20; opacity: 0; }
.ht-cap:empty { display: none; }
.ht-unit { transform-origin: 50% 100%; translate: -50% -100%; display: flex; align-items: flex-end; justify-content: center; z-index: 5; }
.ht-unit img { height: 108px; max-width: 110px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 4px 4px #000a); }
.ht-unit.foe img { transform: scaleX(-1); }
.ht-unit.duo img { max-width: 80px; margin: 0 -10px; }
.ht-unit.ready img { filter: drop-shadow(0 0 3px #7dff9a) drop-shadow(0 0 8px #3dff6a) drop-shadow(0 4px 4px #000a); }
.ht-unit b, .ht-leader b, .ht-power b { position: absolute; bottom: -8px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 14px 'Segoe UI'; border: 2px solid #fff; box-shadow: 0 2px 4px #000a; }
.ht-unit .a { left: calc(50% - 32px); background: #e8a020; }
.ht-unit .h, .ht-leader .h { right: calc(50% - 32px); background: #d83a4a; }
.ht-unit .h.hurt { color: #ffb0b0; }
.ht-unit .kw { position: absolute; top: -4px; left: 50%; translate: -50% 0; font-style: normal; font-size: 16px; white-space: nowrap; filter: drop-shadow(0 1px 2px #000); }
.ht-unit .kw.hearts { color: #ff8fc6; font-weight: 900; }
.ht-leader { width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 3px solid #7fb4ff; background: #1d1440; z-index: 4; }
.ht-leader.s1 { border-color: #ff7f9a; }
.ht-leader img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 8%; }
.ht-leader .h { right: -6px; width: 30px; height: 30px; }
.ht-hc { width: 67px; height: 92px; z-index: 8; transform-origin: 50% 50%; }
.ht-hc .card, .ht-frag .card { transform: scale(.42); transform-origin: 0 0; }
.ht-hc.glow .card { box-shadow: 0 0 0 5px #7dff9a, 0 0 30px #3dff6a; }
.ht-tag { position: absolute; left: 50%; top: -12px; translate: -50% 0; padding: 1px 8px; border-radius: 8px; background: #ffc93c; color: #3a2400; font: 900 12px 'Segoe UI'; white-space: nowrap; }
.ht-coins { display: flex; gap: 3px; z-index: 4; }
.ht-coins i { width: 16px; height: 16px; border-radius: 50%; background: #3a3050; border: 2px solid #5a4a70; transition: all .2s; }
.ht-coins i.on { background: radial-gradient(circle at 35% 35%, #fff7c2, #ffcc33 45%, #c08a00); border-color: #a57400; box-shadow: 0 0 6px #ffcc33; }
.ht-cursor { left: 0; top: 0; width: 30px; height: 30px; margin: -2px 0 0 -4px; z-index: 30; pointer-events: none; transform-origin: 4px 2px; filter: drop-shadow(0 3px 3px #0009); }
.ht-ripple { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid #fff; z-index: 29; }
.ht-arrow { inset: 0; width: 100%; height: 100%; z-index: 25; pointer-events: none; overflow: visible; }
.ht-arrow line { stroke: #ff5f8f; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 12; opacity: 0; filter: drop-shadow(0 0 6px #ff5f8f); }
.ht-pop { translate: -50% -50%; font: 900 24px 'Segoe UI'; white-space: nowrap; text-shadow: 0 2px 0 #000, 0 0 8px #000; z-index: 26; pointer-events: none; }
.ht-bit { translate: -50% -50%; font-size: 20px; z-index: 24; pointer-events: none; }
.ht-shot { translate: -50% -50%; font-size: 26px; z-index: 24; opacity: 0; }
.ht-zzz { font: 900 22px 'Segoe UI'; color: #cfe3ff; text-shadow: 0 0 8px #4a7dff; z-index: 6; animation: zzz 2s infinite; }
.ht-zzz span { font-size: .75em; margin-left: 2px; }
.ht-banner { left: 50%; top: 50%; translate: -50% -50%; font: italic 900 64px 'Segoe UI Black', 'Segoe UI'; color: #ffe066; text-shadow: 0 5px 0 #5a1a00, 0 0 24px #ff9d00; z-index: 27; white-space: nowrap; }
.ht-banner.blue { top: 22%; font-size: 44px; color: #bfe0ff; text-shadow: 0 4px 0 #0a2a5a, 0 0 22px #4aa3ff; }
.ht-flash { inset: 0; background: #fff; opacity: 0; z-index: 22; pointer-events: none; }
.ht-flash.gold { background: radial-gradient(circle, #fff, #ffc93c); }
.ht-flash.rage { background: radial-gradient(circle, #ff2a3a44, #ff2a3a); }
.ht-power { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid #ffd84a; background: #1d1440; z-index: 6; }
.ht-power img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 8%; }
.ht-power b { right: -8px; bottom: -6px; background: #ffcc33; color: #5a3a00; border-color: #a57400; }
.ht-bubble { width: 110px; height: 120px; margin: -120px 0 0 -55px; border-radius: 50%; border: 2px solid #8fe8ffcc; background: radial-gradient(circle at 35% 30%, #ffffff66, #8fe8ff22 45%, #8fe8ff44); z-index: 6; }
.ht-no { translate: -50% -50%; font: 900 60px 'Segoe UI'; color: #ff3a4a; text-shadow: 0 0 10px #000; z-index: 26; }
.ht-boss { width: 150px; z-index: 5; text-align: center; }
.ht-boss img { height: 120px; max-width: 150px; object-fit: contain; transform-origin: 50% 100%; filter: drop-shadow(0 0 6px #ff4a5a88); }
.ht-boss .bar { height: 10px; margin-top: 4px; border-radius: 5px; background: #0008; border: 1px solid #fff5; overflow: hidden; }
.ht-boss .bar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ff3a4a, #ff8a5a); }
.ht-boss .ctr { display: inline-block; margin-top: 4px; padding: 1px 10px; border-radius: 8px; background: #0b0816cc; border: 1px solid #ff4a5a; font: 700 14px 'Segoe UI'; }
.ht-wave { width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 8px solid #ff4a5a; box-shadow: 0 0 30px #ff4a5a, inset 0 0 30px #ff4a5a; z-index: 7; pointer-events: none; }
.ht-pack { translate: -50% -50%; z-index: 6; }
.ht-pack img { height: 230px; filter: drop-shadow(0 0 20px #4aa3ff88); }
.ht-pack.small img { height: 120px; filter: drop-shadow(0 0 16px #b35cffaa); }
.ht-frag { width: 67px; height: 92px; margin: -46px 0 0 -34px; z-index: 7; transform-origin: 50% 50%; scale: 1.5; }
.ht-frag .ht-tag { top: auto; bottom: -14px; }
.ht-prog { width: 200px; height: 18px; margin-left: -100px; border-radius: 9px; background: #0008; border: 1px solid #fff5; overflow: hidden; z-index: 7; }
.ht-prog i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2a7dff, #8fd0ff); }
.ht-prog b { position: absolute; inset: 0; text-align: center; font: 800 12px/18px 'Segoe UI'; text-shadow: 0 1px 2px #000; }
.ht-path { inset: 0; width: 100%; height: 100%; }
.ht-path path { fill: none; stroke: #fff8; stroke-width: 5; stroke-dasharray: 4 12; stroke-linecap: round; }
.ht-node { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; border: 3px solid #ffd84a; background: #1d1440; z-index: 4; }
.ht-node img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 8%; }
.ht-node b { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #ffd84a; color: #3a2400; font: 900 13px/22px 'Segoe UI'; text-align: center; }
.ht-node.done { border-color: #7dff9a; }
.ht-node.done b { background: #7dff9a; font-size: 0; }
.ht-node.done b::after { content: '✓'; font-size: 14px; }
.ht-side { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #ffd84a; color: #3a2400; font: 900 24px/34px 'Segoe UI'; text-align: center; box-shadow: 0 0 14px #ffd84a; z-index: 4; }
.ht-marker { width: 44px; height: 44px; margin: -60px 0 0 -22px; border-radius: 50%; border: 3px solid #fff; background: #ff6fae; z-index: 6; box-shadow: 0 4px 10px #000a; }
.ht-marker img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 8%; }
.ht-star { width: 130px; margin-left: -65px; text-align: center; z-index: 4; }
.ht-star b { display: block; font-size: 80px; line-height: 1; color: #3a3050; text-shadow: 0 3px 0 #0008; }
.ht-star.on b { color: #ffd84a; text-shadow: 0 0 20px #ffb800, 0 3px 0 #8a5a00; }
.ht-star span { display: block; margin-top: 6px; font: 700 14px 'Segoe UI'; color: #fffc; }
.ht-pick { width: 120px; height: 170px; margin: -85px 0 0 -60px; border-radius: 14px; border: 3px solid #ffffff55; background: linear-gradient(#2a1d5a, #150e30); overflow: hidden; z-index: 4; text-align: center; }
.ht-pick img { height: 140px; max-width: 120px; object-fit: contain; object-position: bottom; }
.ht-pick span { position: absolute; left: 0; right: 0; bottom: 4px; font: 800 13px 'Segoe UI'; }
.ht-count { translate: -50% 0; padding: 4px 14px; border-radius: 10px; background: #0b0816cc; border: 1px solid #fff4; font: 700 16px 'Segoe UI'; z-index: 4; }
.ht-record { translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 4; }
.ht-record div { display: flex; gap: 10px; }
.ht-record i { width: 36px; height: 36px; border-radius: 50%; background: #3a3050; border: 3px solid #5a4a70; }
.ht-record .w i.on { background: radial-gradient(circle at 35% 35%, #fff7c2, #ffcc33 45%, #c08a00); border-color: #a57400; box-shadow: 0 0 10px #ffcc33; }
.ht-record .l i { width: 28px; height: 28px; }
.ht-record .l i.on { background: #d83a4a; border-color: #ff8a9a; }
.ht-mission { width: 380px; margin-left: -190px; display: grid; grid-template-columns: 1fr 60px; gap: 4px 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #ffffff12; border: 1px solid #ffffff2a; z-index: 4; font: 700 15px 'Segoe UI'; }
.ht-mission .bar { grid-column: 1; height: 10px; border-radius: 5px; background: #0008; overflow: hidden; }
.ht-mission .bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff6fae, #ffd84a); }
.ht-mission b { grid-row: 1 / 3; grid-column: 2; color: #ffe27a; text-align: right; }
.ht-glitter { translate: -50% -50%; padding: 8px 18px; border-radius: 14px; background: #0b0816cc; border: 2px solid #ffe27a; font: 900 24px 'Segoe UI'; color: #ffe27a; z-index: 4; }
.ht-closeup { width: 280px; height: 340px; z-index: 6; }
.ht-closeup img { height: 330px; max-width: 180px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 10px #000a); }
.ht-closeup .chips i { position: absolute; left: 190px; width: 88px; padding: 5px 0; border-radius: 10px; background: #ffffff14; border: 2px solid #ffffff33; font: 700 13px 'Segoe UI'; font-style: normal; text-align: center; white-space: nowrap; overflow: hidden; }
.ht-closeup .chips i.on { background: #ff6fae55; border-color: #ff6fae; }

/* the result screen (js/result.js): rays and confetti for a win, gloom and rain for a loss */
#screen-result { justify-content: center; overflow: hidden; background: radial-gradient(ellipse, rgba(10,6,25,.35), rgba(10,6,25,.88)); }
.rs-rays { position: absolute; left: 50%; top: 230px; width: 2000px; height: 2000px; margin: -1000px 0 0 -1000px; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c) 30%, transparent) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 8%, #0000 45%); mask: radial-gradient(circle, #000 0 8%, #0000 45%); animation: rsSpin 60s linear infinite; }
@keyframes rsSpin { to { rotate: 360deg; } }
.rs-gloom { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 35%, #0000 30%, #0a1030cc 100%), linear-gradient(#20306055, #05081888); }
#screen-result.win .rs-gloom, #screen-result.lose .rs-rays { display: none; }
.rs-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; perspective: 600px; }
.rs-fx .cf, .ad-fx .cf { position: absolute; left: 0; top: 0; width: 10px; height: 16px; border-radius: 2px; margin: -8px 0 0 -5px; }
.rs-fx .cf.ribbon, .ad-fx .cf.ribbon { width: 6px; height: 26px; border-radius: 3px; }
.rs-fx .rn { position: absolute; left: 0; top: 0; width: 2px; height: 46px; background: linear-gradient(#9fb4ff00, #9fb4ffaa); transform: rotate(11deg); }
#screen-result .vn-sprite { height: 720px; z-index: 1; transition: filter .8s; }
#screen-result .vn-sprite.left { left: 30px; }
#screen-result .vn-sprite.right { right: 30px; }
#screen-result .vn-sprite.beaten { filter: brightness(.5) saturate(.3) drop-shadow(0 10px 20px #000a); }
.result-box { position: relative; z-index: 2; width: 840px; text-align: center; padding: 20px 36px 24px; border-radius: 26px;
  background: linear-gradient(#1a1240f2, #0e0a22f5); border: 3px solid var(--c);
  box-shadow: 0 0 0 6px #0006, 0 0 60px color-mix(in srgb, var(--c) 45%, transparent), 0 24px 60px #000c; }
#result-kicker { font: 900 14px 'Segoe UI'; letter-spacing: 4px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 65%, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#result-title { margin: 2px 0 0; font: 900 84px/1.05 'Segoe UI Black', 'Segoe UI'; letter-spacing: 2px; white-space: nowrap; text-shadow: none; }
.win #result-title { filter: drop-shadow(0 5px 0 #6a3a00) drop-shadow(0 0 18px #ffb40099); }
.lose #result-title { filter: drop-shadow(0 5px 0 #1a1c50) drop-shadow(0 0 14px #6a78ff66); }
#result-title span { display: inline-block; }
.win #result-title span { background: linear-gradient(#fffbe0 10%, #ffd84a 45%, #ff9d00 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lose #result-title span { background: linear-gradient(#eef0ff 10%, #9fa8ff 55%, #5a62c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
#result-text { font-size: 20px; margin: 4px 0 10px; }
#result-text b { color: color-mix(in srgb, var(--c) 55%, #fff); }
#result-stats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
#result-stats span { display: flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 12px; background: #ffffff0d; border: 1px solid #ffffff1c; }
#result-stats i { font-style: normal; font-size: 16px; }
#result-stats b { font: 900 20px 'Segoe UI'; }
#result-stats small { font-size: 12px; opacity: .7; text-transform: uppercase; letter-spacing: 1px; }
#result-stars { margin-top: 4px; }
#result-rewards { margin-top: 12px; }
#result-rewards h3 { margin: 0 0 8px; font: 900 14px 'Segoe UI'; letter-spacing: 6px; text-transform: uppercase; opacity: .75; }
.rr-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; perspective: 800px; }
.r-tile { position: relative; width: 102px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--rc) 35%, transparent), #0000 70%), #ffffff0a;
  border: 2px solid color-mix(in srgb, var(--rc) 70%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 35%, transparent), 0 6px 14px #0008; }
.rt-art { position: relative; width: 84px; height: 92px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; }
.rt-pack { height: 92px; filter: drop-shadow(0 4px 6px #000a); }
.rt-pfp { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--rc), 0 4px 10px #000a; }
.rt-face { width: 76px; height: 76px; border-radius: 50%; background: #2a1d4a no-repeat 50% 6% / 190% auto; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--rc), 0 4px 10px #000a; }
.k-shards .rt-art { flex-direction: column; gap: 7px; }
.k-shards .rt-face { width: 68px; height: 68px; }
.rt-bar { display: block; width: 72px; height: 8px; border-radius: 4px; background: #ffffff22; overflow: hidden; box-shadow: inset 0 0 0 1px #0006; }
.rt-bar i { display: block; height: 100%; width: 0; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.rt-glit { font-size: 58px; filter: drop-shadow(0 0 14px #ffc93c); }
.rt-shine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; pointer-events: none; transform: translateX(-160%) skewX(-20deg);
  background: linear-gradient(90deg, #fff0, #fffa, #fff0); mix-blend-mode: overlay; }
.rt-count { position: absolute; right: 0; bottom: 2px; padding: 1px 7px; border-radius: 10px; font: 900 14px 'Segoe UI'; font-style: normal; color: #fff;
  background: var(--rc); box-shadow: 0 2px 4px #000a; }
.r-tile b { font: 900 13px/1.15 'Segoe UI'; color: color-mix(in srgb, var(--rc) 55%, #fff); max-width: 94px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-tile small { font-size: 11px; opacity: .75; line-height: 1.2; max-width: 94px; }
.r-tile .rt-spark { position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 8px currentColor; }
#result-notes { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.result-box .row { margin-top: 16px; }
.result-box .row .btn { white-space: nowrap; padding: 11px 20px; font-size: 18px; }

#gallery-panel { position: absolute; right: 20px; top: 20px; bottom: 20px; width: 340px; background: rgba(14,10,34,.9); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 20; border: 2px solid #ffffff33; }
#gallery-panel h2 { margin: 0; }
.gal-search-label { font-size: 12px; color: #e2c9ef; }
.gal-search { display: flex; align-items: center; gap: 6px; }
#gallery-search { flex: 1; min-width: 0; width: 100%; padding: 10px 12px; border: 1px solid #ffffff44; border-radius: 10px; background: #08061999; color: #fff; font: inherit; font-size: 14px; }
#gallery-search::placeholder { color: #c6b3d7; }
#gallery-search::-webkit-search-cancel-button { -webkit-appearance: none; }
#gallery-search:focus-visible { outline: 2px solid #ff9fcf; outline-offset: 2px; }
#gallery-search-clear { flex: none; width: 30px; height: 34px; border: 1px solid #ffffff44; border-radius: 8px; background: #ffffff12; color: #fff; cursor: pointer; font-size: 22px; }
#gallery-count { font-size: 12px; color: #c6b3d7; }
#gallery-empty { margin: 0; padding: 16px 4px; color: #e2c9ef; font-size: 14px; }
#gallery-panel [hidden] { display: none !important; }
#gallery-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
.gal-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 10px; cursor: pointer; border-left: 5px solid var(--c); background: #ffffff0d; }
.gal-row img { width: 44px; height: 44px; object-fit: cover; object-position: top; border-radius: 8px; }
.gal-row span { display: block; font-size: 12px; color: var(--c); filter: brightness(1.3); }
.gal-row.on, .gal-row:hover { background: #ffffff26; }
#gal-info { font-size: 14px; min-height: 60px; }

#btn-settings, #btn-howto { position: absolute; right: 20px; top: 16px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff4; background: #1d1440cc; color: #fff; font-size: 20px; cursor: pointer; z-index: 70; }
#btn-howto { right: 74px; font: 900 22px 'Segoe UI'; }
#btn-howto:hover, #btn-settings:hover { border-color: #ff6fae; box-shadow: 0 0 14px #ff6fae88; }
#settings { position: absolute; right: 20px; top: 70px; width: 300px; background: rgba(14,10,34,.95); border: 2px solid #ffffff33; border-radius: 14px; padding: 14px; z-index: 70; display: none; flex-direction: column; gap: 10px; }
#settings.open { display: flex; }
#settings label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
#settings select { max-width: 180px; }
#now-playing { font-size: 12px; opacity: .7; }
#settings .save-row { display: flex; align-items: center; gap: 8px; font-size: 14px; border-top: 1px solid #ffffff22; padding-top: 10px; }
#settings .save-row span { flex: 1; }
#settings .save-row .btn { padding-left: 10px; padding-right: 10px; }
#settings .btn.danger { background: linear-gradient(#ff6b6b, #c0282f); box-shadow: 0 4px 0 #6e1116; }

/* M-chan pointing at Story after the intro */
#screen-title .menu { position: relative; }
#mchan-guide { position: absolute; left: 420px; top: -150px; display: flex; align-items: flex-start; pointer-events: none; z-index: 2; }
#mchan-guide img { height: 520px; filter: drop-shadow(0 8px 18px #000a);
  -webkit-mask-image: linear-gradient(#000 70%, transparent 96%); mask-image: linear-gradient(#000 70%, transparent 96%); }
#mchan-guide .mg-bubble { position: relative; margin-top: 160px; margin-right: -30px; width: 220px; padding: 14px 16px; border-radius: 18px; z-index: 1;
  background: #fff; color: #2a1640; font: 700 17px/1.35 'Segoe UI'; box-shadow: 0 6px 20px #0008; }
#mchan-guide .mg-bubble b { color: #d8337e; }
#mchan-guide .mg-bubble::before { content: ''; position: absolute; left: -10px; top: 18px; width: 20px; height: 20px; background: #fff; transform: rotate(45deg); }
#mchan-guide { transition: opacity .2s; }
#screen-title .menu:has(.menu-btn:hover) #mchan-guide { opacity: .2; } /* out of the way of the button's tip */
#settings .btn.small { font-size: 13px; padding: 6px 12px; border-radius: 10px; box-shadow: 0 3px 0 #120c33; }
#save-status { font-size: 12px; color: #7ee08a; min-height: 1em; }
#save-status.bad { color: #ff7a7a; }

/* leader select: deck + difficulty */
#battle-opts { margin: -8px 0 12px; display: flex; gap: 18px; align-items: center; font-weight: 800; font-size: 15px; }
#battle-opts label { display: flex; align-items: center; gap: 8px; }
#battle-opts label > span { opacity: .75; }
#battle-opts select { font: 700 15px 'Segoe UI'; padding: 6px 8px; border-radius: 8px; max-width: 200px; }
.seg { display: flex; border: 2px solid #ffffff33; border-radius: 10px; overflow: hidden; }
.seg button { font: 800 14px 'Segoe UI'; color: #fff; background: rgba(12,8,30,.85); border: 0; padding: 7px 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid #ffffff22; }
.seg button:hover { background: #3d2d78; }
.seg button.on { background: linear-gradient(#ff6fae, #d8337e); }

/* stats */
#stats-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
#stats-body .st-tile b { font-size: 32px; }
#stats-body .st-cols { gap: 14px; }
#stats-body .st-col { padding: 10px 12px; }
#stats-body .st-row { font-size: 14px; gap: 8px; }
#stats-body .st-wl { width: 76px; }
#stats-body .st-bar { width: 70px; }
.stats-empty { font-size: 22px; text-align: center; opacity: .8; margin-top: 120px; }
.st-tiles { display: flex; gap: 14px; }
.st-tile { flex: 1; background: rgba(14,10,34,.9); border: 2px solid #ffffff33; border-radius: 16px; padding: 14px; text-align: center; }
.st-tile b { display: block; font: 900 40px 'Segoe UI'; color: #ffe680; text-shadow: 0 3px 0 #000; }
.st-tile span { font-size: 14px; opacity: .8; }
.st-diff { display: flex; gap: 30px; justify-content: center; align-self: center; font-size: 16px; background: rgba(14,10,34,.9); border: 2px solid #ffffff33; border-radius: 12px; padding: 8px 22px; }
.st-diff b { color: #ff8fc6; margin-right: 4px; }
.st-cols { display: flex; gap: 20px; align-items: flex-start; }
.st-col { flex: 1; background: rgba(14,10,34,.9); border: 2px solid #ffffff33; border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.st-col h2 { margin: 0 0 4px; font: 900 22px 'Segoe UI'; color: #ffe680; }
.st-row { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.st-row img { width: 40px; height: 40px; object-fit: cover; object-position: top; border-radius: 50%; background: #ffffff14; }
.st-name { flex: 1; font-weight: 700; }
.st-wl { width: 90px; text-align: right; opacity: .85; }
.st-bar { width: 120px; height: 8px; background: #ffffff18; border-radius: 8px; overflow: hidden; }
.st-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6fae, #ffd84a); }
.st-pct { width: 44px; text-align: right; font-weight: 800; }

#loading { position: fixed; inset: 0; z-index: 100; background: #0b0816; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font: 800 22px 'Segoe UI'; }
#loading .bar { width: 400px; height: 10px; background: #ffffff22; border-radius: 10px; overflow: hidden; }
#loading { overflow: hidden; }
#loading > div:not(.ld-sprites) { position: relative; z-index: 2; text-shadow: 0 3px 0 #000, 0 0 14px #000; font-size: 30px; }
#loading::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(10,4,24,.85) 10%, rgba(10,4,24,.15) 75%); }
#loading .ld-sprites { position: absolute; inset: 0; z-index: 0; background: #120828; }
#loading .ld-sprites > div { position: absolute; border-radius: 10px; background-size: 190% auto; background-position: 50% 4%; background-repeat: no-repeat; }
#loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff6fae, #ffd84a); }
#banner, .hint, #log, #enemy-hand, #preview { pointer-events: none !important; }
#hand .card.playable.r-legendary { animation: none; }

/* ================= screen-space FX ================= */
#ui-fx { position: absolute; inset: 0; pointer-events: none; z-index: 120; }
.fx-pt, .fx-star, .fx-ring { position: absolute; left: 0; top: 0; pointer-events: none; }
.fx-pt { border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, var(--c) 55%, transparent 75%); box-shadow: 0 0 10px var(--c); }
.fx-star { color: #fff; line-height: 1; text-shadow: 0 0 6px var(--c), 0 0 14px var(--c); }
.fx-ring { border-radius: 50%; border: 6px solid var(--c); box-shadow: 0 0 24px var(--c), inset 0 0 24px var(--c); }
.fly-ghost { position: absolute !important; left: 0; top: 0; pointer-events: none; }
.glare { position: absolute; inset: 0; border-radius: 11px; pointer-events: none; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.75), rgba(255,255,255,0) 45%); }

/* ================= card close-up modal ================= */
.cm { position: absolute; inset: 0; z-index: 95; }
.cm-backdrop { position: absolute; inset: -1500px; backdrop-filter: blur(7px) saturate(1.2);
  background: radial-gradient(circle 1000px at 1930px 1950px, color-mix(in srgb, var(--rc) 28%, transparent), rgba(8,5,20,.9) 90%) rgba(8,5,20,.9); }
.cm-rays { position: absolute; left: 430px; top: 450px; width: 1300px; height: 1300px; margin: -650px 0 0 -650px; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, var(--rc) 0 5deg, transparent 5deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 5%, transparent 60%); mask: radial-gradient(circle, #000 5%, transparent 60%); }
.cm-sprite { position: absolute; right: 10px; bottom: 0; height: 840px; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 26px var(--rc)); }
.cm.locked .cm-sprite { filter: brightness(0) drop-shadow(0 0 3px var(--rc)) drop-shadow(0 0 22px var(--rc)); }
.cm-pivot { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.cm-tilt { width: 100%; height: 100%; transform-style: preserve-3d; }
.cm-card { position: absolute !important; left: 0; top: 0; box-shadow: 0 0 14px var(--rc), 0 10px 20px rgba(0,0,0,.7) !important; }
.cm-info { position: absolute; left: 720px; top: 110px; width: 470px; max-height: 700px; padding: 26px 30px; border-radius: 22px;
  background: rgba(14,10,34,.86); border: 2px solid color-mix(in srgb, var(--rc) 60%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--rc) 30%, transparent);
  display: flex; flex-direction: column; gap: 10px; }
.cm-rarity { font: 900 15px 'Segoe UI'; letter-spacing: 5px; color: var(--rc); text-shadow: 0 0 12px var(--rc); }
.cm-rarity .stars { letter-spacing: 2px; margin-right: 6px; }
.cm-rarity .stars i { font-style: normal; opacity: .22; }
.cm-rarity .stars i.on { opacity: 1; }
.cm-info h2 { margin: 0; font: 900 40px/1.05 'Segoe UI'; text-shadow: 0 3px 0 #000, 0 0 20px var(--rc); }
.cm-type { font-size: 15px; opacity: .85; }
.cm-cost { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 900;
  background: radial-gradient(#ffe680, #d99a00); color: #3a2500; }
.cm-stats { display: flex; gap: 10px; }
.cm-stats span { font: 900 18px 'Segoe UI'; padding: 5px 14px; border-radius: 10px; }
.cm-stats .a { background: linear-gradient(#ffb23f, #d45f00); }
.cm-stats .h { background: linear-gradient(#ff5d73, #b1002a); }
.cm-bio { margin: 0; font-size: 15px; line-height: 1.4; opacity: .8; font-style: italic; }
.cm-kws { display: flex; flex-direction: column; gap: 5px; }
.cm-kw { font-size: 14px; background: #ffffff10; padding: 6px 10px; border-radius: 8px; }
.cm-kw b { color: #ffe680; margin-right: 4px; }
.cm-text { font-size: 16px; background: #ffffff10; padding: 8px 12px; border-radius: 8px; border-left: 3px solid var(--rc); }
.cm-attack { font: italic 800 18px 'Segoe UI'; color: var(--c); filter: brightness(1.3); }
.cm-own { font-size: 14px; color: #9dff9d; }
.cm-own.lockedtxt { color: #ffd0a0; line-height: 1.45; }
.cm-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 13px; opacity: 0; pointer-events: none; }
.cm-fx { position: absolute; inset: 0; pointer-events: none; }
/* relationship close-up: both partners side by side, equally tall (MB.fitDuo), plus the props of their scene.
   z-index 0 keeps the props' stacking inside the duo, under the info panel */
.cm.duo .cm-rays { left: 290px; }
.cm.duo .cm-info { left: 530px; width: 400px; }
.cm-duo { position: absolute; right: 20px; bottom: 0; height: 700px; display: flex; align-items: flex-end; pointer-events: none; z-index: 0; }
.cm-duo img { position: relative; z-index: 1; height: 100%; width: auto; opacity: 0; transform-origin: 50% 100%;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 22px var(--rc)); }
.cm-duo img + img { margin-left: -40px; }
.cm-prop { position: absolute; left: 50%; pointer-events: none; }
.cm-loveheart { top: calc(var(--top, 0px) - 60px); font: 900 520px/1 'Segoe UI'; color: var(--c); opacity: 0;
  filter: blur(3px) drop-shadow(0 0 40px var(--c)); mix-blend-mode: screen; }
.cm-table { bottom: -10px; width: 118%; height: 150px; display: flex; justify-content: space-around; align-items: flex-start;
  border-radius: 18px 18px 0 0; background: linear-gradient(#b0703a, #7a4520 30%, #5a3014); border-top: 8px solid #d59055;
  box-shadow: 0 -8px 24px #0009, inset 0 6px 10px #fff3; }
.cm-table i { font-style: normal; font-size: 72px; margin-top: -54px; filter: drop-shadow(0 6px 4px #0008); }
.cm-steam { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #fffc, transparent 70%); filter: blur(3px); }
.cm-tvlight { --h: 0deg; left: -20%; width: 140%; top: var(--top, 0px); bottom: 0;
  background: radial-gradient(ellipse at 50% 115%, rgba(110,180,255,.9), rgba(160,110,255,.4) 45%, transparent 70%);
  mix-blend-mode: screen; filter: hue-rotate(var(--h)); opacity: 0; }
.cm-popcorn { bottom: 96px; font-size: 120px; line-height: 1; filter: drop-shadow(0 8px 6px #0009); }
.cm-vs { top: calc(var(--top, 0px) + 80px); font: italic 900 120px/1 'Segoe UI Black', 'Segoe UI'; color: #fff;
  -webkit-text-stroke: 4px #000; paint-order: stroke fill; text-shadow: -6px 0 24px #ff4a1c, 6px 0 24px #ffe9a0, 0 6px 0 #000; opacity: 0; }
.cm-chalkboard { top: calc(var(--top, 0px) - 190px); width: 460px; height: 190px; border-radius: 10px; background: #1e4a33;
  border: 12px solid #a0683a; box-shadow: 0 10px 24px #000a, inset 0 0 30px #0006; opacity: 0; }
.cm-chalkboard span { position: absolute; left: 24px; top: 40px; font: 700 44px 'Comic Sans MS', 'Segoe Print', 'Segoe UI'; color: #f4f4ea; text-shadow: 0 0 2px #fff; }
.cm-chalkboard b { position: absolute; right: 18px; bottom: 6px; font: 900 72px 'Comic Sans MS', 'Segoe UI'; color: #ff4d5e; opacity: 0; text-shadow: 0 0 10px #ff4d5e; }
.cm-floaty { top: calc(var(--top, 0px) + 200px); font-size: 86px; line-height: 1; filter: drop-shadow(0 6px 6px #0008); }
.cm-frame { top: calc(var(--top, 0px) - 150px); font-size: 130px; line-height: 1; opacity: 0; filter: drop-shadow(0 0 20px #fff8); }
.cm-bubble { max-width: 300px; padding: 9px 16px; border-radius: 18px; background: #fff; color: #1a1030; border: 3px solid var(--c);
  font: 800 21px/1.2 'Segoe UI'; text-align: center; white-space: normal; box-shadow: 0 6px 16px #0008; }
.cm-bubble::after { content: ''; position: absolute; left: 50%; bottom: -14px; margin-left: -10px; border: 10px solid transparent; border-top: 14px solid #fff; border-bottom: 0; }
.cm-paper { width: 170px; padding: 14px 10px 18px; border-radius: 6px; text-align: center; color: #333;
  background: repeating-linear-gradient(#fdfcf5 0 26px, #cfe0f0 26px 27px); box-shadow: 0 8px 18px #0009; }
.cm-paper small { display: block; font: 800 16px 'Segoe UI'; letter-spacing: 4px; }
.cm-paper b { display: inline-block; margin-top: 8px; padding: 4px 12px; font: 900 40px 'Comic Sans MS', 'Segoe UI'; color: #e0102a;
  border: 4px solid #e0102a; border-radius: 50%; transform: rotate(-8deg); }
.cm-relplate { padding: 8px 22px; border-radius: 30px; background: rgba(12,8,30,.92); border: 2px solid var(--c); white-space: nowrap;
  font: 800 20px 'Segoe UI'; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent), 0 6px 14px #0009; }
.cm-relplate i { font-style: normal; color: var(--c); margin-left: 10px; filter: brightness(1.3); }
/* close-up entrance effects (cards.js INTRO) */
.cm-fx > * { position: absolute; left: 0; top: 0; pointer-events: none; }
.cm-word { font: 900 54px 'Segoe UI', sans-serif; color: #fff; white-space: nowrap; -webkit-text-stroke: 2px #000; paint-order: stroke fill;
  text-shadow: 0 4px 0 #000, 0 0 18px var(--c), 0 0 30px var(--c); }
.cm-emoji { line-height: 1; filter: drop-shadow(0 3px 4px #0008); }
.cm-after { opacity: .5; filter: brightness(2) drop-shadow(0 0 20px var(--rc)) !important; }
.cm-bolt { filter: drop-shadow(0 0 12px #fff); }
.cm-flash { width: 1600px; height: 900px; background: radial-gradient(circle at 75% 50%, #fff, var(--c) 45%, transparent 80%); mix-blend-mode: screen; }
.cm-slash { width: 760px; height: 12px; border-radius: 50%; background: linear-gradient(90deg, transparent, var(--c) 20%, #fff 50%, var(--c) 80%, transparent);
  box-shadow: 0 0 20px var(--c); }
.cm-splat { width: 240px; height: 240px; background: var(--c); opacity: .85;
  clip-path: polygon(50% 0, 60% 30%, 90% 12%, 72% 42%, 100% 55%, 70% 62%, 82% 95%, 52% 72%, 30% 100%, 32% 68%, 0 70%, 26% 48%, 6% 20%, 36% 30%); }
.cm-confetti { width: 12px; height: 20px; border-radius: 2px; }
.cm-scan { width: 10px; background: #fff; box-shadow: 0 0 20px var(--c), 0 0 50px var(--c), 0 0 90px var(--c); border-radius: 5px; }
.cm-light, .cm-fire, .cm-water { width: 440px; height: 1000px; mix-blend-mode: screen; border-radius: 220px 220px 0 0; }
.cm-light { background: linear-gradient(to top, #fff 0%, color-mix(in srgb, var(--c) 70%, #fff) 30%, transparent 95%); }
.cm-fire { background: radial-gradient(ellipse at 50% 100%, #ffe066 0%, #ff7a1c 25%, var(--c) 45%, transparent 70%); }
.cm-water { height: 520px; background: linear-gradient(to top, #e8f8ff 0%, var(--c) 40%, transparent 90%); }
/* relationship scenery (backdrop) and the newer scenes */
.cm-scenery { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cm-scenery > * { position: absolute; left: 0; top: 0; }
.cm-tint { height: 900px; mask: radial-gradient(ellipse 50% 60% at 50% 55%, #000 45%, transparent 100%); }
.cm-raindrop { width: 2px; height: 46px; background: linear-gradient(transparent, #cfe8ff); opacity: .7; rotate: 8deg; }
.cm-spotlight { top: -80px; width: 760px; height: 1000px; opacity: 0; mix-blend-mode: screen; clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--c) 50%, #fff) 0%, transparent 60%), linear-gradient(to bottom, #fff8, #fff1 80%); }
.cm-polaroid { top: max(calc(var(--top, 0px) - 210px), -170px); width: 230px; height: 200px; padding: 10px 10px 36px; box-sizing: border-box; background: #fff;
  box-shadow: 0 8px 20px #0009; transform-origin: 50% 0; }
.cm-polaroid div { width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-start; overflow: hidden;
  background: linear-gradient(135deg, var(--c), #1a1030); }
.cm-polaroid img { height: 260%; margin: 0 -18px; }
.cm-polaroid b { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 20px 'Comic Sans MS', 'Segoe Print', 'Segoe UI'; color: #333; }
.cm-speedline { width: 180px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); opacity: .7; }
.cm-portal { border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: 0 0 30px var(--c), 0 0 70px var(--c), inset 0 0 40px #000; }
.cm-portal i { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, var(--c) 0 18deg, #fff 18deg 24deg, #2a0a4a 24deg 60deg); }
.cm-mirror { top: calc(var(--top, 0px) + 10px); bottom: 0; width: 150px; overflow: hidden; border-radius: 75px 75px 12px 12px; border: 10px solid #e8c878;
  background: linear-gradient(120deg, #cfe8ff66, #ffffff22 40%, #cfe8ff55 60%, #ffffff11); box-shadow: 0 0 30px #fff8, inset 0 0 30px #fff6; transform-origin: 50% 100%; }
.cm-mirror i { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #fffc 50%, transparent 65%); }
.cm-rope { height: 14px; border-radius: 7px; opacity: 0; transform-origin: 50% 50%; box-shadow: 0 4px 6px #0008;
  background: repeating-linear-gradient(60deg, #d9b77a 0 10px, #a8834a 10px 16px); }
.cm-rope b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 40px; }
.cm-spiral { opacity: 0; filter: drop-shadow(0 0 12px var(--c, #b07cff)); }
.cm-spiral svg { display: block; }
.cm-carpet { bottom: -20px; width: 130%; height: 110px; opacity: 0; clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  background: linear-gradient(#8a0e22, #e8283c 40%, #b3122e); border-top: 6px solid #ffd24a; }
.cm-camflash { width: 130px; height: 130px; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, #fff 0 18%, #fffb 34%, transparent 70%); }
.cm-cover { width: 250px; height: 250px; }
.cm-cover b { font: 900 22px 'Segoe UI', sans-serif; letter-spacing: 1px; color: #b3122e; }
.cm-bar { bottom: -10px; width: 124%; height: 130px; border-radius: 14px 14px 0 0; border-top: 10px solid #c98a4a;
  background: linear-gradient(#6a3a18, #4a2610 40%, #2e1608); box-shadow: 0 -8px 24px #0009, inset 0 8px 10px #fff2; }
.cm-bar::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 26px; height: 8px; border-radius: 4px; background: linear-gradient(#ffe08a, #b8862a); }
.cm-amp { bottom: 0; width: 150px; height: 190px; border-radius: 10px; padding-top: 8px; box-sizing: border-box; border: 5px solid #3a3a44;
  background: linear-gradient(#2a2a30, #121216); box-shadow: 0 0 22px var(--c), 0 10px 14px #0009; }
.cm-amp i { display: block; width: 100px; height: 72px; margin: 10px auto 0; border-radius: 50%; background: radial-gradient(circle, #666 0 16%, #1a1a1a 19% 58%, #3a3a3a 61%); }
.cm-pan { bottom: 40px; font-size: 100px; line-height: 1; filter: drop-shadow(0 8px 6px #0009); }
.cm-tub { bottom: -10px; width: 62%; height: 150px; overflow: hidden; border-radius: 10px 10px 34px 34px; border: 6px solid #4a2610;
  background: repeating-linear-gradient(90deg, #8a5226 0 34px, #6a3a18 34px 38px); box-shadow: 0 -6px 20px #0009; }
.cm-tub i { position: absolute; inset: 0; transform-origin: 50% 100%; opacity: .8; background: linear-gradient(#b04ae0, #5a1a8a); }
.cm-screen { bottom: 0; height: 78%; display: flex; gap: 4px; opacity: 0; transform-origin: 50% 100%; }
.cm-screen i { width: 110px; height: 100%; border: 6px solid #8a5226; border-top-color: #ff8ac8; border-radius: 12px 12px 0 0; box-shadow: 0 6px 14px #0008;
  background: radial-gradient(circle at 50% 30%, #ffc8e0 0 10%, transparent 11%), linear-gradient(#fff6ea, #e8d8c0); }
.cm-smoke { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #e8e4f0, #b8b0c8 45%, transparent 70%); filter: blur(4px); }

/* ================= new-card reveal ================= */
.rv { position: absolute; inset: 0; z-index: 110; cursor: pointer; perspective: 1400px; touch-action: none; user-select: none; }
.rv-bg { position: absolute; inset: -1500px; background: radial-gradient(circle 900px at 2300px 1940px, color-mix(in srgb, var(--rc) 22%, transparent), rgba(6,4,16,.93) 100%) rgba(6,4,16,.93); }
.rv-rays { position: absolute; left: 800px; top: 440px; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--rc) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 6%, transparent 58%); mask: radial-gradient(circle, #000 6%, transparent 58%); }
.rv-fx { position: absolute; inset: 0; pointer-events: none; }
.rv-flash { position: absolute; inset: -1500px; background: #fff; opacity: 0; pointer-events: none; }
.rv-back, .rv-front { position: absolute !important; left: 0; top: 0; }
.rv-back { width: 304px; height: 418px; border-radius: 26px; border-width: 5px; border-radius: 14px; border: 3px solid #fff;
  background: radial-gradient(circle at 50% 45%, #6a3fc0, #2a1650 70%), repeating-linear-gradient(45deg, #3b1f6b 0 8px, #2a1650 8px 16px);
  box-shadow: 0 10px 30px rgba(0,0,0,.7); }
.rv-glow { position: absolute; left: 0; top: 0; width: 420px; height: 540px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse, var(--rc), transparent 68%); filter: blur(8px); }
.rv-back-emblem { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 130px; color: #fff;
  text-shadow: 0 0 20px var(--rc), 0 0 40px var(--rc); }
.rv-front { transform-style: preserve-3d; }
.rv-front .card { position: absolute; left: 0; top: 0; box-shadow: 0 0 20px var(--rc), 0 10px 20px rgba(0,0,0,.7) !important; }
.rv-title { position: absolute; left: 0; right: 0; top: 70px; text-align: center; font: 900 64px 'Segoe UI Black', 'Segoe UI'; letter-spacing: 10px;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 0 30px currentColor, 0 5px 0 #000; pointer-events: none; }
.rv-sub { position: absolute; left: 0; right: 0; top: 700px; text-align: center; font-size: 26px; text-shadow: 0 2px 4px #000; pointer-events: none; }
.rv-sub b { color: var(--rc); }
.rv-hint { position: absolute; left: 0; right: 0; bottom: 60px; text-align: center; font-size: 16px; letter-spacing: 3px; text-transform: uppercase; pointer-events: none; }
/* rainbow foil on rare+ reveals, sliding opposite the pointer */
.rv-holo { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; z-index: 4; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .6s;
  background: linear-gradient(115deg, transparent 25%, #ff6fae40 38%, #ffe68040 46%, #7dff9a40 54%, #4aa3ff40 62%, transparent 75%)
    calc(100% - var(--gx, 50%)) calc(100% - var(--gy, 50%)) / 300% 300%; }
.rv-front.live .rv-holo { opacity: .6; }
.rv-pfp .rv-holo { border-radius: 20px; }
.rv-skip { position: absolute; top: 26px; right: 30px; padding: 8px 20px; font-size: 16px; background: rgba(14,10,34,.85); opacity: .85; }
/* the haul: everything from a pack side by side */
.rv-haul { position: absolute !important; left: 0; top: 0; cursor: pointer; }
.rv-haul .card { box-shadow: 0 0 18px var(--rc), 0 10px 20px rgba(0,0,0,.7); }
.rv-haul-tag { position: absolute; left: 50%; top: 100%; margin-top: 12px; transform: translateX(-50%); white-space: nowrap; font: 900 17px 'Segoe UI';
  padding: 3px 12px; border-radius: 12px; background: rgba(14,10,34,.9); border: 2px solid var(--rc); }
.rv-haul.new .rv-haul-tag { background: var(--rc); color: #1a1030; letter-spacing: 3px; box-shadow: 0 0 14px var(--rc); }
.rv-haul-btns { position: absolute; left: 0; right: 0; top: 700px; display: flex; justify-content: center; gap: 24px; }

/* ================= relationships & costumes ================= */
/* a duo stands side by side, shoulders just touching, with a heart floating over their heads */
.duo-sprite { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; transform-origin: 50% 100%; }
/* heights are set by MB.fitDuo so both partners are equally tall */
.duo-sprite img { height: 100%; width: auto; transform-origin: 50% 100%; }
.duo-sprite img + img { margin-left: -18px; }
.duo-sprite::after { content: '♥'; position: absolute; left: 50%; top: calc(var(--top, 0px) - 30px); font: 900 28px/1 'Segoe UI'; color: #fff; pointer-events: none;
  text-shadow: 0 0 6px var(--c, #ff5fa2), 0 0 14px var(--c, #ff5fa2), 0 2px 2px #000; animation: duo-heart 1.3s ease-in-out infinite alternate; }
@keyframes duo-heart { from { transform: translateX(-50%) scale(.85); } to { transform: translateX(-50%) translateY(-6px) scale(1.1); } }
.ghost .duo-sprite { height: 100%; }
.ghost .duo-sprite::after { display: none; }
.unit.duo .unit-shadow { width: 250px; left: -125px; }
.unit.duo .status .bubble { width: 310px; }
.unit.duo .status .ice { width: 280px; }
.unit.duo .status .flames { width: 260px; }
.unit.duo .status .flames i:nth-child(2) { left: 100px; }
.unit.duo .status .zzz { right: 20px; }
.plate .pname.bond { color: #ffd0e8; border-color: #ff5fa2; box-shadow: 0 0 10px #ff5fa288; }
.card.r-bond { --rc: #ff5fa2; box-shadow: 0 0 16px #ff5fa288, 0 8px 18px rgba(0,0,0,.6); }
.card-art.duo img { width: 62%; height: auto; } /* height: .sprite's 100% would squash them sideways */
.card-art.duo img:first-child { left: -4%; }
.card-art.duo img:last-child { left: auto; right: -4%; }
.card-bond { position: absolute; top: 4px; right: 6px; font-size: 13px; color: #ff8fc6; text-shadow: 0 0 6px #ff5fa2, 0 1px 2px #000; }
.float-text.bond-name { color: #fff; font-size: 40px; text-shadow: 0 3px 0 #000, 0 0 18px #ff5fa2, 0 0 30px #ff5fa2; }
.thrown.big { font-size: 110px; }
.sky-beam.slim { width: 60px; }
.slot-machine { display: flex; gap: 6px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(#5a3a00, #2a1a00);
  border: 4px solid #ffcc33; box-shadow: 0 0 30px #ffcc33; }
.slot-machine i { font-style: normal; font-size: 44px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: #fff8e0; border-radius: 10px; box-shadow: inset 0 3px 8px #0006; }

.bond-cutin { position: absolute; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.bc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.bc-band { position: absolute; left: -100px; right: -100px; top: 250px; height: 400px; transform: skewY(-5deg); overflow: hidden; transform-origin: 50% 50%;
  background: linear-gradient(90deg, #0b0718f0, color-mix(in srgb, var(--c) 50%, #0b0718) 50%, #0b0718f0);
  border-top: 6px solid var(--c); border-bottom: 6px solid var(--c); box-shadow: 0 0 60px var(--c); }
.bc-rays { position: absolute; left: 50%; top: 50%; width: 1800px; height: 1800px; margin: -900px 0 0 -900px; opacity: .3;
  background: repeating-conic-gradient(var(--c) 0 6deg, transparent 6deg 18deg); }
.bond-cutin.t3 .bc-rays { opacity: .55; }
.bond-cutin img { position: absolute; bottom: 170px; height: 580px; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 24px var(--c)); }
.bc-a { left: 90px; }
.bc-b { right: 90px; }
.bc-title { position: absolute; left: 0; right: 0; top: 340px; text-align: center; color: #fff; }
.bc-title small { display: block; font: 900 20px 'Segoe UI'; letter-spacing: 8px; color: var(--c); filter: brightness(1.5); text-shadow: 0 2px 0 #000; }
.bc-title b { display: block; font: 900 82px/1.05 'Segoe UI Black', 'Segoe UI'; -webkit-text-stroke: 3px #000; paint-order: stroke fill;
  text-shadow: 0 0 30px var(--c), 0 6px 0 #000; }
.bc-title span { font: italic 700 24px 'Segoe UI'; text-shadow: 0 2px 4px #000; }
.bc-heart { position: absolute; left: 0; top: 0; font-size: 34px; color: var(--c); text-shadow: 0 0 12px var(--c); }

/* item combos */
.combo-cutin .bc-item { left: auto; right: 170px; bottom: 300px; height: 300px; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 30px var(--c)); }
.combo-cutin .bc-title small { letter-spacing: 6px; }
.float-text.combo-name { text-shadow: 0 3px 0 #000, 0 0 18px #ffd23f, 0 0 30px #ffb020; }
.plate .pname.combo { color: #fff1c2; border-color: #ffc93c; box-shadow: 0 0 10px #ffc93c88; }
#hand .card.combo-ready::after { content: '🔗 COMBO'; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 5;
  font: 900 12px 'Segoe UI'; letter-spacing: 2px; color: #3a2400; background: linear-gradient(#ffe27a, #ffb020); padding: 2px 9px;
  border-radius: 10px; box-shadow: 0 0 12px #ffc93c; white-space: nowrap; }
.unit.combo-partner .sprite { filter: drop-shadow(0 0 3px #fff3b0) drop-shadow(0 0 14px #ffc93c); }
.card-combo { position: absolute; top: 3px; right: 5px; font-size: 12px; filter: drop-shadow(0 0 4px #ffc93c) drop-shadow(0 1px 1px #000); }
.card-combo.second { right: 20px; }
.cm-combo { font-size: 14px; background: #ffc93c1c; padding: 6px 10px; border-radius: 8px; border-left: 3px solid #ffc93c; }

/* outfit upgrades (a card's `upgrades`): the button on its plate, the dressing screen and the cut-in */
.plate .up-btn { position: absolute; left: 100%; top: 50%; margin-left: 8px; transform: translateY(-50%); display: flex; align-items: center; gap: 3px;
  font: 900 20px 'Segoe UI', sans-serif; color: #fff; background: rgba(12,8,30,.88); border: 2px solid #ff8ac866; border-radius: 14px;
  padding: 3px 10px; pointer-events: auto; cursor: pointer; opacity: .5; white-space: nowrap; }
.plate .up-btn b { color: #ffd84a; }
.plate .up-btn.on { opacity: 1; border-color: #ff8ac8; box-shadow: 0 0 12px #ff5fa2; animation: upPulse 1.1s ease-in-out infinite; }
.plate .up-btn.foe { pointer-events: none; opacity: .4; font-size: 16px; }
@keyframes upPulse { 50% { box-shadow: 0 0 24px #ff5fa2, 0 0 6px #fff; transform: translateY(-50%) scale(1.1); } }
.busy .plate .up-btn { pointer-events: none; }
.plate .pname.outfit { color: #ffe0f0; border-color: #ff8ac8; box-shadow: 0 0 10px #ff8ac888; }
.float-text.outfit-name { text-shadow: 0 3px 0 #000, 0 0 18px #ff8ac8, 0 0 30px #ff5fa2; }
.cm-upgrade { font-size: 14px; background: #ff8ac81c; padding: 6px 10px; border-radius: 8px; border-left: 3px solid #ff8ac8; }
.cm-upgrade.now { background: #ff8ac844; box-shadow: 0 0 10px #ff8ac866; }
.cm-upgrade.past { opacity: .55; }
.wardrobe-screen { display: flex; gap: 3px; height: 230px; }
.wardrobe-screen i { width: 72px; height: 100%; border: 5px solid #8a5226; border-top-color: var(--c); border-radius: 10px 10px 0 0; box-shadow: 0 6px 14px #0008;
  background: radial-gradient(circle at 50% 28%, #ffc8e0 0 12%, transparent 13%), linear-gradient(#fff6ea, #e8d8c0); }
.outfit-cutin .bc-b { right: 190px; left: auto; bottom: 210px; height: 460px; filter: grayscale(1) brightness(.8) drop-shadow(0 0 8px #000); }
.oc-steps { position: absolute; left: 0; right: 0; top: 575px; text-align: center; font-size: 30px; letter-spacing: 6px; }
.oc-steps i { display: inline-block; font-style: normal; opacity: .25; filter: grayscale(1); }
.oc-steps i.on { opacity: 1; filter: drop-shadow(0 0 8px var(--c)); }

/* cross-novel duos of the one-girl novels */
.maid-cloth { width: 230px; height: 190px; border-radius: 10px; background: linear-gradient(#ffffff, #e9e6f2);
  border-bottom: 10px dotted var(--c); box-shadow: 0 8px 20px #0007; }
.holo-beam { width: 260px; height: 400px; opacity: .75; filter: blur(2px);
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 75%, transparent), transparent);
  clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0); }
.ghost.holo img { opacity: .8; filter: sepia(1) hue-rotate(160deg) saturate(3) brightness(1.35) drop-shadow(0 0 16px var(--c)); }
.ghost.holo::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 3px, #7af0ff40 3px 5px);
  mix-blend-mode: screen; pointer-events: none; }
.keynote { width: 230px; padding: 8px 12px 6px; border-radius: 10px; background: #f8f8fb; border: 6px solid #2a2a3a; color: #1a1a2a;
  box-shadow: 0 0 24px var(--c), 0 8px 16px #0008; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.keynote em { font: 900 22px 'Segoe UI', sans-serif; font-style: normal; }
.keynote small { font: 700 11px 'Segoe UI', sans-serif; letter-spacing: 2px; opacity: .7; }
.kn-bars { display: flex; align-items: flex-end; justify-content: center; gap: 14px; width: 100%; height: 90px;
  border-left: 3px solid #2a2a3a; border-bottom: 3px solid #2a2a3a; }
.kn-bars i { width: 38px; height: 100%; border-radius: 4px 4px 0 0; transform: scaleY(.06); transform-origin: 50% 100%;
  background: linear-gradient(var(--c), #2a6ae8); }
.cm-combo b { color: #ffe08a; }

.cm-bonds { display: flex; flex-direction: column; gap: 5px; }
.cm-bond { font-size: 14px; background: #ff5fa21c; padding: 6px 10px; border-radius: 8px; border-left: 3px solid #ff5fa2; }
.cm-bond b { color: #ff9fcf; }
.cm-bond i { font-style: normal; color: #ff5fa2; letter-spacing: 1px; margin-right: 4px; }
.cm-wardrobe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.cm-wardrobe > span { opacity: .75; margin-right: 2px; }
.cm-wardrobe button { font: 600 12px 'Segoe UI'; color: #fff; background: #ffffff14; border: 1px solid #ffffff33; border-radius: 14px; padding: 4px 10px; cursor: pointer; }
.cm-wardrobe button:hover { background: #ffffff2a; }
.cm-wardrobe button.on { background: var(--rc); color: #1a1030; border-color: #fff; font-weight: 900; }
.gal-row.bond img { width: 30px; }
.gal-row.bond img + img { margin-left: -14px; }
.gal-row.style, .gal-row.sky { --c: #9fd3ff; }
.gal-row.sky { --c: #c58cff; }
.gal-row.style i, .gal-row.sky i { flex: none; width: 44px; font-style: normal; font-size: 22px; text-align: center; }
.gal-head { font: 900 13px 'Segoe UI'; letter-spacing: 3px; color: #ff9fcf; padding: 8px 4px 2px; }
.gloom-floor { width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(20,0,40,.85), rgba(80,20,140,.45) 50%, transparent 70%); }
.blood-moon { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff9a9a, #d0102a 55%, #5a0010);
  box-shadow: 0 0 40px #ff2a4a, 0 0 90px #9b4dff; }
.thrown.bat { font-size: 44px; filter: drop-shadow(0 0 8px #9b4dff); }
.pillow { width: 70px; height: 48px; border-radius: 40% / 50%; background: radial-gradient(ellipse at 40% 35%, #fff, #ffe4f2 60%, var(--c));
  box-shadow: 0 4px 10px #0006, inset 0 -4px 8px #0002; }
.disco-spot { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 65%); mix-blend-mode: screen; }
.chalkboard { font: 900 64px 'Comic Sans MS', 'Segoe UI'; color: #ff5d5d; padding: 10px 34px; border-radius: 8px; background: #1e4a33;
  border: 8px solid #a0683a; box-shadow: 0 8px 18px #0008; text-shadow: 0 0 2px #fff; }
.chalk { width: 22px; height: 7px; border-radius: 3px; background: #fff; box-shadow: 0 0 6px #fff; }
.pompom { width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 0 16px var(--c);
  background: radial-gradient(circle at 30% 30%, #fff 0 6%, transparent 7%), radial-gradient(circle at 65% 40%, #fff 0 5%, transparent 6%),
    radial-gradient(circle at 45% 70%, #fff 0 5%, transparent 6%), radial-gradient(circle, #fff, var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000)); }
.chain-link { width: 30px; height: 18px; border-radius: 50%; border: 5px solid #d6dcea; box-shadow: 0 0 6px var(--c), inset 0 0 3px #0008, 0 2px 3px #0008; }
.full-moon { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff, #e6edff 50%, #a9bcff);
  box-shadow: 0 0 40px #cddaff, 0 0 100px #7aa7ff; }
.thrown.spirit { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 22px var(--c)) brightness(1.2); opacity: .92; }
.claw { width: 120px; height: 160px; }
.claw i { position: absolute; top: 0; width: 12px; height: 100%; border-radius: 50%; transform-origin: 50% 0;
  background: linear-gradient(#fff, var(--c) 70%, transparent); box-shadow: 0 0 12px var(--c); }
.claw i:nth-child(1) { left: 10px; }
.claw i:nth-child(2) { left: 54px; top: -12px; }
.claw i:nth-child(3) { left: 98px; }
.sun-orb { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #ffd84a 45%, #ff9a1f 70%, transparent 72%);
  box-shadow: 0 0 30px #ffcf3f, 0 0 60px #ff9a1f; }
.sun-orb::before { content: ''; position: absolute; inset: -18px; border-radius: 50%;
  background: repeating-conic-gradient(#ffe066 0 10deg, transparent 10deg 30deg); mask: radial-gradient(circle, transparent 45%, #000 46%, transparent 70%); }
.gloom-orb { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c9a0ff 0 10%, #5a1ea8 45%, #1a0533 75%);
  box-shadow: 0 0 26px #8a3cff, 0 0 50px #3a0a70; }
.whirlpool { width: 300px; height: 300px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 80%, #fff) 0 12deg, rgba(20,80,160,.55) 12deg 30deg);
  mask: radial-gradient(circle, transparent 12%, #000 16%, #000 55%, transparent 70%); box-shadow: 0 0 40px var(--c); }
/* shark fin cutting through the board (stands on its base) and snapping jaws */
.fin, .cm-fin { width: 60px; height: 80px; background: linear-gradient(100deg, color-mix(in srgb, var(--c) 55%, #1a1f2e), var(--c));
  clip-path: polygon(0 100%, 30% 30%, 62% 0, 58% 40%, 100% 100%); filter: drop-shadow(0 0 6px #bfe9ff); }
.cm-fin { width: 110px; height: 150px; }
.jaw { width: 230px; height: 200px; }
.jaw i { position: absolute; left: 0; right: 0; height: 92px; background: linear-gradient(#fff, #dfe6f5); filter: drop-shadow(0 0 8px var(--c)); }
.jaw i:first-child { top: 0; clip-path: polygon(0 0, 100% 0, 100% 30%, 92% 100%, 83% 30%, 75% 100%, 67% 30%, 58% 100%, 50% 30%, 42% 100%, 33% 30%, 25% 100%, 17% 30%, 8% 100%, 0 30%); }
.jaw i:last-child { bottom: 0; clip-path: polygon(0 100%, 100% 100%, 100% 70%, 92% 0, 83% 70%, 75% 0, 67% 70%, 58% 0, 50% 70%, 42% 0, 33% 70%, 25% 0, 17% 70%, 8% 0, 0 70%); }
/* basketball hoop: backboard and rim */
.hoop { width: 130px; height: 100px; }
.hoop::before { content: ''; position: absolute; left: 15px; top: 0; width: 100px; height: 64px; border: 5px solid #fff; border-radius: 4px; background: #ffffff22; box-shadow: 0 0 10px #0008; }
.hoop::after { content: ''; position: absolute; left: 30px; top: 58px; width: 60px; height: 14px; border: 5px solid #ff5a1f; border-radius: 50%; }
/* rubber-stamped verdicts */
.stamp-mark, .cm-stamp { font: 900 54px 'Segoe UI', sans-serif; letter-spacing: 4px; color: #e8283c; border: 8px solid currentColor; border-radius: 12px;
  padding: 2px 18px; background: #fff3; text-shadow: 0 0 10px #fff8; }
.cm-stamp { --c: #3fbf6a; color: var(--c); font-size: 64px; }
/* signature styles of the later novels */
.thrown.eye { font-size: 84px; filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 22px var(--c)); }
.dark-pool { width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(8,10,24,.7), rgba(8,10,24,.35) 45%, transparent 70%); }
.pompom { width: 60px; height: 60px; border-radius: 50%; background: repeating-conic-gradient(var(--c) 0 10deg, #fff 10deg 14deg);
  mask: radial-gradient(circle, #000 55%, transparent 72%); filter: drop-shadow(0 0 8px var(--c)); }
.lasso { width: 130px; height: 130px; border-radius: 50%; border: 7px solid #d9b77a; box-shadow: 0 0 10px var(--c), inset 0 0 6px #0006; }
.rope { border-radius: 50%; background: #d9b77a; box-shadow: 0 0 4px #0008; }
.smoke { border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 60%, #fff) 0 25%, var(--c) 50%, transparent 72%); filter: blur(2px); }
.red-card { width: 56px; height: 80px; border-radius: 6px; background: linear-gradient(135deg, #ff4a4a, #c8102e); border: 3px solid #fff;
  box-shadow: 0 0 16px #ff2a3a, 0 4px 8px #0008; }

/* attack skies (fx.js sky()): above the background picture, below the board */
#sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; overflow: hidden; }
#sky > div { position: absolute; top: 0; }
.sky-star { aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff, 0 0 12px #9fc3ff; }
.sky-rain { width: 2px; height: 70px; background: linear-gradient(transparent, #cfe3ffcc); rotate: 12deg; }
.sky-mote { width: 6px; height: 6px; border-radius: 50%; }
.sky-bubble { aspect-ratio: 1; border-radius: 50%; border: 2px solid #ffffffaa; background: radial-gradient(circle at 30% 30%, #fff8 0 12%, transparent 30%); }
.sky-petal { font-size: 26px; }
.sky-code { font: 700 18px/1.1 Consolas, monospace; color: #36ff7a; text-shadow: 0 0 8px #36ff7a; white-space: pre; opacity: .8; }
.sky-rays { left: 50%; top: -60vmax !important; width: 120vmax; height: 120vmax; margin-left: -60vmax; opacity: .35;
  background: repeating-conic-gradient(#fff 0 6deg, transparent 6deg 18deg); mask: radial-gradient(circle, #000 20%, transparent 70%); }
.sky-flash { inset: 0; background: #e8f0ff; opacity: 0; }
.sky-planet { right: 8%; top: 12% !important; width: 16vmin; height: 16vmin; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9a0, #c96a3a 55%, #3a1420);
  box-shadow: 0 0 40px #ff9a5a88; }
.sky-planet::after { content: ''; position: absolute; left: -35%; top: 38%; width: 170%; height: 24%; border-radius: 50%; border: 3px solid #ffe2b8aa; rotate: -14deg; }

/* effect styles (meteor, tornado, black hole, vines, runes...) */
.meteor { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 10%, #ffd27a 25%, var(--c) 55%, #5a1a00 75%);
  box-shadow: 0 0 20px var(--c), 0 0 50px #ff7a1c; }
.meteor::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: 170px; height: 26px; margin-top: -13px; transform-origin: 0 50%; rotate: -106deg;
  border-radius: 13px; background: linear-gradient(90deg, #fff3c4, var(--c) 30%, transparent); filter: blur(2px); }
.crater { width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, #1a0f08 0 28%, #3a2414 42%, color-mix(in srgb, var(--c) 55%, #000) 54%, transparent 68%); }
.twister { width: 200px; height: 330px; display: flex; flex-direction: column-reverse; align-items: center; }
.twister i { display: block; flex: none; height: 40px; margin-top: -8px; border-radius: 50%; border: 5px solid color-mix(in srgb, var(--c) 55%, #fff);
  border-left-color: transparent; background: radial-gradient(ellipse, transparent 40%, #ffffff30 70%); box-shadow: 0 0 12px var(--c); opacity: .85; }
.twister i:nth-child(1) { width: 40px; } .twister i:nth-child(2) { width: 70px; } .twister i:nth-child(3) { width: 100px; }
.twister i:nth-child(4) { width: 130px; } .twister i:nth-child(5) { width: 165px; } .twister i:nth-child(6) { width: 200px; }
.singularity { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #000 0 44%, #fff 48%, var(--c) 56%, transparent 72%);
  box-shadow: 0 0 40px var(--c), 0 0 90px var(--c); }
.accretion { width: 380px; height: 380px; border-radius: 50%; opacity: .85;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 70%, #fff) 0 8deg, transparent 8deg 24deg); mask: radial-gradient(circle, transparent 14%, #000 24%, transparent 70%); }
.thrown.rocket { font-size: 48px; }
.vine svg { display: block; overflow: visible; }
.vine .st { fill: none; stroke: color-mix(in srgb, var(--c) 45%, #1d6b2a); stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 0 4px #7dff8a); }
.vine .th { fill: none; stroke: #d7ffc2; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1 18; opacity: 0; }
.vine i { position: absolute; top: 0; font-style: normal; font-size: 34px; filter: drop-shadow(0 0 6px var(--c)); }
.runes { filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 16px var(--c)); }
.runes svg { display: block; }
.float-text.rune { font-size: 34px; -webkit-text-stroke: 0; text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; }
.float-text.note { font-size: 44px; }
.float-text.code { font: 700 24px Consolas, monospace; -webkit-text-stroke: 0; text-shadow: 0 0 8px currentColor; }
.shuriken { width: 46px; height: 46px; background: linear-gradient(135deg, #f4f6fb, #8a93a8);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.bubble-ball { width: 150px; height: 150px; border-radius: 50%; box-shadow: inset 0 0 22px #fff8, 0 0 18px var(--c);
  background: radial-gradient(circle at 30% 28%, #fff 0 7%, transparent 13%), radial-gradient(circle, transparent 56%, color-mix(in srgb, var(--c) 40%, transparent) 72%, #fffa 79%, transparent 81%); }
.bubble-ball.small { width: 34px; height: 34px; }
.clock { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #fff 0 60%, #e8e4ff 61%); border: 7px solid var(--c);
  box-shadow: 0 0 20px var(--c), inset 0 0 10px #0003; }
.clock i { position: absolute; left: 50%; bottom: 50%; width: 6px; margin-left: -3px; border-radius: 3px; background: #1a1030; transform-origin: 50% 100%; }
.clock i.h { height: 28px; } .clock i.m { height: 42px; width: 4px; margin-left: -2px; background: var(--c); }
.ghost.clone img, .ghost.clone .emoji-sprite { opacity: .85; filter: brightness(1.15) saturate(.7) drop-shadow(0 0 8px var(--c)); }
.ghost.flyer img { opacity: 1; filter: drop-shadow(0 0 10px var(--c)); }
.reticle { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 10px var(--c); }
.reticle::before, .reticle::after { content: ''; position: absolute; background: var(--c); }
.reticle::before { left: 50%; top: -16px; bottom: -16px; width: 4px; margin-left: -2px; }
.reticle::after { top: 50%; left: -16px; right: -16px; height: 4px; margin-top: -2px; }
.reticle i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 10px #ff2a2a; }
.cracks { filter: drop-shadow(0 0 6px #ff7a1c) drop-shadow(0 0 14px var(--c)); }
.cracks svg { display: block; }
.lava-pool { width: 260px; height: 260px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff3a0 0 8%, #ffb347 20%, #ff5a1f 40%, color-mix(in srgb, var(--c) 60%, #300) 58%, transparent 70%); }
.pillar.lava { width: 130px; height: 420px; }
.blade { width: 50px; height: 160px; filter: drop-shadow(0 0 8px var(--c)); }
.blade i { position: absolute; left: 16px; top: 32px; width: 18px; height: 128px; background: linear-gradient(90deg, #9aa4b8, #fff 50%, #9aa4b8);
  clip-path: polygon(50% 100%, 0 84%, 0 0, 100% 0, 100% 84%); }
.blade b { position: absolute; left: 0; top: 24px; width: 50px; height: 10px; border-radius: 5px; background: var(--c); }
.blade b::before { content: ''; position: absolute; left: 20px; top: -24px; width: 10px; height: 24px; border-radius: 4px; background: #5a3a22; }
.terminal { min-width: 240px; padding: 10px 14px; border-radius: 8px; background: rgba(4, 12, 6, .92); border: 2px solid var(--c); box-shadow: 0 0 16px var(--c); transform-origin: 50% 100%; }
.terminal pre { margin: 0; min-height: 60px; font: 700 16px/1.25 Consolas, monospace; color: var(--c); text-shadow: 0 0 6px var(--c); }
.polaroid { width: 70px; height: 84px; padding: 6px 6px 18px; background: #fff; box-shadow: 0 4px 10px #0008; box-sizing: border-box; }
.polaroid div { width: 100%; height: 100%; overflow: hidden; background: linear-gradient(135deg, var(--c), #1a1030); }
.polaroid img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gravity-field { width: 230px; height: 700px; mix-blend-mode: screen; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c) 50%, transparent));
  mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.gravity-field i { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 34px, color-mix(in srgb, var(--c) 70%, #fff) 34px 40px); }
.spike { width: 46px; height: 150px; opacity: .92; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000)); }
.fireball { border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, #ffe066 24%, #ff7a1c 45%, #a3200a 62%, transparent 72%); }
.sky-beam.spot { width: 180px; opacity: .6; }
/* signature styles: DSF RPG, Legend of You, Noble One, New Haven (fx.js) */
.thrown.fist { font-size: 56px; filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 16px var(--c)); }
.thrown.big.fist { font-size: 120px; }
.thrown.dove { font-size: 46px; filter: drop-shadow(0 0 8px #fff) drop-shadow(0 4px 4px #0006); }
.thrown.axe { filter: drop-shadow(0 0 10px #ff1a3c) drop-shadow(0 6px 6px #0008); }
.hypno-spiral svg, .soundwave svg, .wires svg, .cheese svg { display: block; overflow: visible; }
.hypno-spiral { filter: drop-shadow(0 0 10px var(--c)); opacity: .9; }
.soundwave { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 20px var(--c)); }
.wires { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px var(--c)); }
.cheese { filter: drop-shadow(0 2px 2px #0006); }
.portal { border-radius: 50%; overflow: hidden; border: 5px solid #fff; box-shadow: 0 0 24px var(--c), 0 0 50px var(--c), inset 0 0 30px #000; }
.portal i { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, var(--c) 0 18deg, #fff 18deg 24deg, #2a0a4a 24deg 60deg); }
.portal::after, .cm-portal::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse, #fff 0 8%, #2a0a4acc 30%, transparent 75%); }
.amp { width: 140px; height: 170px; border-radius: 10px; background: linear-gradient(#2a2a30, #121216); border: 5px solid #3a3a44;
  box-shadow: 0 0 22px var(--c), 0 10px 14px #0009; padding-top: 6px; box-sizing: border-box; }
.amp i { display: block; width: 92px; height: 66px; margin: 8px auto 0; border-radius: 50%; background: radial-gradient(circle, #666 0 16%, #1a1a1a 19% 58%, #3a3a3a 61%); }
.pizza { width: 120px; height: 120px; border-radius: 50%; border: 9px solid #d8903e; box-sizing: border-box; box-shadow: 0 8px 12px #0008;
  background: radial-gradient(circle at 30% 35%, #c8322a 0 9%, transparent 10%), radial-gradient(circle at 66% 30%, #c8322a 0 8%, transparent 9%),
    radial-gradient(circle at 56% 68%, #c8322a 0 9%, transparent 10%), radial-gradient(circle at 28% 70%, #3f8a2e 0 5%, transparent 6%),
    radial-gradient(circle at 74% 56%, #3f8a2e 0 5%, transparent 6%), radial-gradient(circle, #ffd65a, #f2b640); }
.bar-counter { height: 64px; border-radius: 12px; background: linear-gradient(#d0924e, #8a5226 55%, #6a3a18); border: 4px solid #f0b070;
  box-shadow: 0 0 18px var(--c), inset 0 6px 8px #fff4; }
.red-carpet { height: 96px; background: linear-gradient(#b3122e, #e8283c 50%, #b3122e); border-top: 7px solid #ffd24a; border-bottom: 7px solid #ffd24a;
  box-shadow: 0 0 22px #e8283c88; }
.coin.big-coin { display: flex; align-items: center; justify-content: center; font: 900 24px 'Segoe UI'; color: #8a5a00; }
.mimic { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 18px var(--c)); }
.mimic img, .mimic .duo-sprite { height: 100%; }
.mimic .emoji-sprite { font-size: 150px; }
.quest-form { width: 130px; padding: 12px 8px; border-radius: 6px; text-align: center; color: #5a3a1a; box-shadow: 0 6px 12px #0008;
  background: repeating-linear-gradient(#fdf6e3 0 22px, #e8dcc0 22px 23px); }
.quest-form b { display: block; font: 900 22px 'Segoe UI'; letter-spacing: 3px; }
.quest-form small { font: 700 13px 'Segoe UI'; }
.keyboard svg { display: block; filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 6px 6px #0008); }
.keyboard .w { fill: #fff; stroke: #1a1030; stroke-width: 1.5; }
.keyboard .k { fill: #1a1030; }
.ice-cross svg { display: block; overflow: visible; filter: drop-shadow(0 0 10px #9fe8ff) drop-shadow(0 0 24px #6fd6ff); }
.ice-cross path { fill: rgba(200, 240, 255, .85); stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
.ice-cross .hl { fill: none; stroke: #ffffffaa; stroke-width: 3; }
/* signature styles: Fake It to Make It! and the Adoptive Life leads (fx.js) */
.thrown.spirit.bear { font-size: 250px; }
.thrown.spirit.paw, .thrown.spirit.finger { font-size: 150px; }
.thrown.sun { font-size: 80px; filter: drop-shadow(0 0 14px #ffe066) drop-shadow(0 0 34px #ffb347); }
.rb-dot { border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); opacity: .92; }
.chat-bubble { padding: 10px 22px; border-radius: 26px 26px 26px 8px; font: 900 40px 'Segoe UI', sans-serif; color: #fff; background: #2f7bff;
  box-shadow: 0 0 0 4px #fff, 0 0 18px var(--c), 0 8px 12px #0008; }
.chat-bubble.typing { padding: 16px 18px; background: #e5e5ea; }
.chat-bubble.typing i { display: inline-block; width: 13px; height: 13px; margin: 0 3px; border-radius: 50%; background: #8e8e93; }
.read-receipt { font: 700 20px 'Segoe UI', sans-serif; color: #cfe0ff; text-shadow: 0 2px 0 #000, 0 0 8px #2f7bff; }
.compliment { padding: 6px 14px; border-radius: 18px; font: 800 20px 'Segoe UI', sans-serif; color: #7a4a00; background: #fff6c8;
  box-shadow: 0 0 0 3px var(--c), 0 0 14px var(--c), 0 6px 8px #0006; }
.tally { min-width: 160px; padding: 8px 14px; border-radius: 10px; text-align: center; color: #fff; background: linear-gradient(#24324a, #111a2a);
  border: 4px solid var(--c); box-shadow: 0 0 16px var(--c), 0 8px 12px #0008; }
.tally b { display: block; font: 900 16px 'Segoe UI', sans-serif; letter-spacing: 1px; }
.tally span { font: 900 30px 'Segoe UI', sans-serif; color: #7dff9a; }
.tally.passed { background: #fdf6e3; border-color: #d0202e; box-shadow: 0 0 16px #d0202e, 0 8px 12px #0008; }
.tally.passed b { font-size: 34px; letter-spacing: 3px; color: #d0202e; }
.thrown.giant-gavel { font-size: 210px; filter: drop-shadow(0 0 12px var(--c)) drop-shadow(0 10px 8px #0008); }
.float-text.ice-letter { color: #e6fbff; font-size: 70px; text-shadow: 0 4px 0 #000, 0 0 18px #6fd6ff, 0 0 30px #6fd6ff; }
.float-text.cute { color: #ffb3dc; font-size: 28px; }
.float-text.yard { color: #fff; font-size: 44px; text-shadow: 0 4px 0 #000, 0 0 12px #5fd068; }
.turf { height: 150px; border-radius: 8px; box-shadow: 0 0 20px var(--c); background: repeating-linear-gradient(90deg, #3f8a2e 0 36px, #4a9a36 36px 72px); }
.turf::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 68px, #ffffffcc 68px 72px); }
.stained-glass svg { display: block; overflow: visible; filter: drop-shadow(0 0 14px #fff8) drop-shadow(0 0 30px var(--c)); }
.brawl { width: 300px; height: 230px; filter: drop-shadow(0 8px 10px #0007); }
.brawl i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e4deec 55%, #bdb4cc); }
.brawl i:nth-child(1) { left: 0; top: 70px; width: 140px; height: 130px; }
.brawl i:nth-child(2) { left: 70px; top: 10px; width: 160px; height: 150px; }
.brawl i:nth-child(3) { left: 160px; top: 60px; width: 140px; height: 140px; }
.brawl i:nth-child(4) { left: 40px; top: 110px; width: 220px; height: 120px; }
.thrown.poke { font-size: 56px; }
.harp svg { display: block; overflow: visible; filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 6px 6px #0008); }
.fact-card { width: 190px; padding: 10px 12px; border-radius: 6px; text-align: center; white-space: normal; color: #4a3010; box-shadow: 0 6px 12px #0008;
  background: repeating-linear-gradient(#fffdf5 0 20px, #cfe0f5 20px 21px); border-top: 4px solid #e85a5a; }
.fact-card b { display: block; font: 900 18px 'Segoe UI', sans-serif; letter-spacing: 2px; color: #b5651d; }
.fact-card span { font: 700 16px 'Segoe UI', sans-serif; }
/* signature styles: New Haven (fx.js) */
.hoofprint { width: 22px; height: 26px; display: flex; gap: 3px; }
.hoofprint i { flex: 1; border-radius: 50% 50% 40% 40%; background: #3a2616cc; }
.grind-rail { height: 14px; border-radius: 7px; background: linear-gradient(#f4f6fa, #9aa3b0 60%, #5a6270); box-shadow: 0 0 12px var(--c), 0 6px 6px #0006; }
.thrown.board { font-size: 64px; }
.thrown.tray-item { font-size: 44px; }
.thrown.glove { font-size: 50px; filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 4px 4px #0007); }
.thrown.bottle { font-size: 46px; }
.thrown.tree { font-size: 260px; }
.thrown.axe-held { font-size: 56px; }
.present svg, .clipboard svg, .d20 svg, .rift-tear svg { display: block; overflow: visible; }
.present svg { filter: drop-shadow(0 8px 8px #0008); }
.stream-overlay { display: flex; gap: 10px; align-items: center; padding: 6px 12px; border-radius: 8px; font: 800 18px 'Segoe UI', sans-serif; color: #fff;
  background: #0e0e16e0; border: 2px solid var(--c); box-shadow: 0 0 14px var(--c); }
.stream-overlay b { color: #ff3b4e; }
.chat-msg { padding: 4px 10px; border-radius: 10px; font: 800 18px 'Segoe UI', sans-serif; color: #fff; background: #1a1a26d8; border-left: 4px solid var(--c); }
.donation { padding: 8px 14px; border-radius: 12px; font: 700 20px 'Segoe UI', sans-serif; color: #1a1030; background: linear-gradient(#ffe98a, #ffc93c);
  box-shadow: 0 0 18px #ffc93c, 0 6px 8px #0007; }
.haiku { padding: 10px 18px; border-radius: 4px; text-align: center; color: #2a1a3a; background: linear-gradient(#fbf5e6, #efe3c6); box-shadow: 0 6px 12px #0008;
  border-top: 6px solid #8e6bbf; border-bottom: 6px solid #8e6bbf; }
.haiku p { margin: 3px 0; font: italic 700 20px Georgia, serif; }
.paper-word { padding: 3px 8px; border-radius: 3px; font: italic 700 18px Georgia, serif; color: #2a1a3a; background: #fbf5e6; box-shadow: 0 0 8px #fff, 0 3px 4px #0006; }
.float-text.giant-l { font-size: 260px; line-height: 1; -webkit-text-stroke: 6px #000; text-shadow: 0 10px 0 #000, 0 0 30px currentColor; }
.flashlight { height: 140px; clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%); mix-blend-mode: screen;
  background: linear-gradient(90deg, #fffbe6, #fff6c8aa 55%, #fff6c800); }
.caution-tape { width: 250px; padding: 3px 0; overflow: hidden; text-align: center; font: 900 14px 'Segoe UI', sans-serif; letter-spacing: 1px; color: #111;
  background: #ffd21f; border-top: 3px solid #111; border-bottom: 3px solid #111; box-shadow: 0 3px 6px #0007; }
.clipboard { width: 170px; padding: 18px 12px 10px; border-radius: 8px; color: #2a2a2a; background: #fdfaf0; border: 6px solid #8a5a2e; box-shadow: 0 8px 12px #0008; }
.clipboard > i { position: absolute; left: 50%; top: -12px; width: 60px; height: 20px; margin-left: -30px; border-radius: 5px; background: linear-gradient(#e8e8f0, #9aa0b0); }
.clipboard b { display: block; margin-bottom: 4px; text-align: center; font: 900 16px 'Segoe UI', sans-serif; letter-spacing: 3px; }
.clipboard p { display: flex; justify-content: space-between; align-items: center; margin: 3px 0; font: 700 15px 'Segoe UI', sans-serif; border-bottom: 1px solid #cfd8e8; }
.clipboard p span { width: 20px; height: 20px; border: 2px solid #555; }
.clipboard .d { fill: none; stroke: #e8283c; stroke-width: 4; stroke-linecap: round; }
.clipboard .grade { position: relative; width: 60px; height: 50px; margin: 4px auto 0; text-align: center; font: 900 40px/50px Georgia, serif; color: #e8283c; }
.clipboard .grade svg { position: absolute; left: 0; top: 0; }
.float-text.verdict { color: #ff3b3b; font-size: 50px; letter-spacing: 4px; }
.whiteboard { width: 190px; padding: 10px 12px; border-radius: 6px; background: #fbfcff; border: 7px solid #b8c0cc; box-shadow: 0 8px 12px #0008; }
.whiteboard p { margin: 4px 0; font: 700 20px 'Comic Sans MS', 'Segoe Print', sans-serif; color: #2f4a7a; }
.whiteboard p:last-child { color: #e8283c; }
.blue-flame { width: 36px; height: 56px; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; transform-origin: 50% 100%; filter: blur(1px);
  background: radial-gradient(ellipse at 50% 80%, #fff 0 15%, #6fb8ff 40%, #2a5affaa 65%, transparent 72%); }
.finish-tape { display: flex; width: 240px; height: 16px; }
.finish-tape i { flex: 1; background: repeating-linear-gradient(90deg, #fff 0 14px, #e8283c 14px 28px); box-shadow: 0 2px 4px #0007; }
.d20 svg { filter: drop-shadow(0 0 10px #b07cff) drop-shadow(0 6px 6px #0008); }
.d20.crit svg { filter: drop-shadow(0 0 16px #ffe066) drop-shadow(0 0 34px #ffb347); }
.rift-tear svg { filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 26px #fff); }
.rift-tear .lens { fill: #0a0418; stroke: var(--c); stroke-width: 3; }
.rift-tear .d { fill: none; stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
/* signature styles: Doki Doki Literature Club, Flaming, Lust, and Pain. and Paradiso Suburbia (fx.js) */
.console { min-width: 260px; padding: 8px 14px 10px; border-radius: 6px; text-align: left; font: 700 20px Consolas, 'Courier New', monospace; color: #b8ffcf;
  background: #050d08ee; border: 2px solid var(--c); box-shadow: 0 0 18px var(--c), 0 8px 12px #000a; transform-origin: 50% 100%; }
.console b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--c); }
.console p { margin: 0; white-space: pre; }
.console i { font-style: normal; color: #ff6fae; }
.glitch-block { mix-blend-mode: screen; box-shadow: 0 0 6px currentColor; }
.thrown.toast { font-size: 40px; }
.manga-panel { width: 290px; height: 340px; border: 9px solid #111; border-radius: 4px; overflow: hidden; box-shadow: 8px 8px 0 #111, 0 0 24px var(--c);
  background: radial-gradient(#0002 22%, transparent 24%) 0 0 / 12px 12px; }
.manga-panel i { position: absolute; inset: -40%; opacity: .55;
  background: repeating-conic-gradient(from 0deg at 50% 45%, #111 0 1.5deg, transparent 1.5deg 9deg);
  mask: radial-gradient(circle at 50% 45%, transparent 22%, #000 48%); }
.thrown.manga { font-size: 58px; }
.manga-sfx { font: italic 900 50px 'Impact', 'Arial Black', sans-serif; color: #fff36a; -webkit-text-stroke: 3px #111; paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--c), 0 0 14px #fff; letter-spacing: 1px; }
.trail svg { display: block; overflow: visible; }
.trail.ink svg { filter: drop-shadow(0 0 6px #8a5cc8) drop-shadow(0 0 16px #2a0f3f); opacity: .92; }
.trail.devil-tail svg { filter: drop-shadow(0 0 8px var(--c)); }
.trail b { position: absolute; right: -24px; top: 50%; transform: translateY(-50%) rotate(90deg); font: 900 46px/1 'Segoe UI'; color: #1a1422;
  text-shadow: 0 0 10px var(--c); }
.ink-tendril svg { display: block; overflow: visible; filter: drop-shadow(0 0 8px var(--c)); }
.ink-tendril path { fill: none; stroke: #2a0f3f; stroke-width: 14; stroke-linecap: round; }
.vn-choice { width: 250px; padding: 10px; border-radius: 10px; background: #fff8fbee; border: 3px solid #ffb3d9; box-shadow: 0 8px 16px #0009; text-align: center; }
.vn-choice p { margin: 0 0 6px; font: 700 16px 'Segoe UI'; color: #8a4a6a; }
.vn-choice i { display: block; margin: 5px 0; padding: 5px 0; border-radius: 6px; font: 800 18px 'Segoe UI'; font-style: normal; color: #5a3a4a;
  background: #ffe6f2; border: 2px solid #ffb3d9; transition: background .1s, color .1s; }
.vn-choice i.on { background: var(--c); color: #fff; border-color: #fff; box-shadow: 0 0 12px var(--c); }
.pentagram svg { display: block; filter: drop-shadow(0 0 8px var(--c)); }
.pentagram.lit svg { filter: drop-shadow(0 0 10px #ffe066) drop-shadow(0 0 26px var(--c)); color: #ffd27a; }
.tail-coil svg { display: block; overflow: visible; filter: drop-shadow(0 0 8px var(--c)); }
.queen-halo { width: 80px; height: 24px; border-radius: 50%; border: 6px solid #ffe38a; box-shadow: 0 0 16px #ffe38a, inset 0 0 8px #ffe38a; }
.queen-shadow { opacity: .9; }
.queen-shadow img { height: 100%; filter: brightness(0) drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 30px var(--c)); }
.queen-shadow b { position: absolute; left: 50%; top: -6%; transform: translateX(-50%); font-size: 90px; filter: drop-shadow(0 0 16px #ffd24a); }
.queen-shadow i { position: absolute; top: 14%; width: 16px; height: 9px; border-radius: 50%; background: #ff5aff; box-shadow: 0 0 12px #ff5aff, 0 0 26px var(--c); }
.queen-shadow i:nth-of-type(1) { left: 42%; } .queen-shadow i:nth-of-type(2) { left: 53%; }
.thrown.hardhat { font-size: 56px; }
.blueprint { width: 330px; height: 170px; border-radius: 6px; background-color: #1f5aa8; border: 4px solid #cfe2ff; box-shadow: 0 0 16px #6fb8ff;
  background-image: linear-gradient(#cfe2ff44 2px, transparent 2px), linear-gradient(90deg, #cfe2ff44 2px, transparent 2px); background-size: 22px 22px; }
.blueprint i { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; border: 5px dashed #fff; border-radius: 50%; }
.ibeam { width: 240px; height: 0; }
.ibeam b { position: absolute; left: 0; top: 0; width: 240px; height: 46px; border-radius: 4px; box-shadow: 0 10px 14px #0008;
  background: linear-gradient(#c24a24 0 10px, #9a3418 10px 16px, #c24a24 16px 30px, #9a3418 30px 36px, #c24a24 36px);
  border: 3px solid #5a1c0a; }
.ibeam .cable { position: absolute; left: 118px; bottom: 46px; width: 4px; height: 900px; background: #2a2a30; }
.ibeam .hook { position: absolute; left: 106px; bottom: 44px; width: 28px; height: 22px; border: 6px solid #6a6a74; border-top: 0; border-radius: 0 0 16px 16px; }
.yarn-line { height: 6px; border-radius: 3px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.yarn-wrap svg { display: block; overflow: visible; filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 4px 4px #0006); }
.thrown.stray { font-size: 50px; filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 4px 4px #0007); }
.thrown.big-hand { font-size: 120px; filter: drop-shadow(0 0 12px var(--c)) drop-shadow(0 6px 6px #0008); }
.chin-light { width: 70px; height: 140px; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(ellipse at 50% 100%, #fff6c8, #fff6c855 45%, transparent 70%); }
.ghost-rise { font-size: 110px; filter: drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 30px #fff8); }
.ghost-rise.monster { filter: drop-shadow(0 0 14px #ff2a2a) drop-shadow(0 0 34px #6a0010) brightness(.8); }
.float-text.boo { color: #fff; font-size: 90px; letter-spacing: 4px; text-shadow: 0 6px 0 #000, 0 0 24px #b07cff, 0 0 40px #b07cff; }
.chessboard { width: 320px; height: 320px; border: 8px solid #6b4a2a; box-shadow: 0 0 20px var(--c);
  background: repeating-conic-gradient(#f4e6d0 0 25%, #8a5a3a 0 50%) 0 0 / 80px 80px; }
.chess-piece { font: 900 90px/1 'Segoe UI Symbol', 'Segoe UI', serif; color: #1a1a22; text-shadow: 0 0 2px #fff, 0 0 12px var(--c), 0 8px 6px #0008; }
.chess-piece.king { color: #fdf6e3; font-size: 70px; text-shadow: 0 0 2px #000, 0 0 10px #000, 0 6px 6px #0008; }
.chess-piece.queen { font-size: 110px; color: #fff; text-shadow: 0 0 3px #000, 0 0 18px var(--c), 0 0 34px var(--c); }
.float-text.checkmate { font-size: 60px; letter-spacing: 5px; }
.rap-bar { padding: 5px 12px; border-radius: 8px; font: 900 italic 22px 'Segoe UI'; color: #fff; background: #111c; border: 2px solid var(--c); box-shadow: 0 0 10px var(--c); }
.float-text.micdrop { font-size: 64px; letter-spacing: 3px; }
.compliment.sweet { color: #8a2a5a; background: #ffe6f2; }
.detention-slip { width: 190px; padding: 10px; border-radius: 4px; text-align: center; background: #ffc8d8; border: 3px solid #d0202e; box-shadow: 0 8px 12px #0008; }
.detention-slip b { display: block; font: 900 26px 'Segoe UI'; letter-spacing: 2px; color: #d0202e; }
.detention-slip span { font: 700 14px 'Segoe UI'; color: #5a1a2a; }
.derrick svg { display: block; filter: drop-shadow(0 6px 6px #0008); }
.oil-gusher { width: 90px; height: 480px; }
.oil-gusher i { position: absolute; inset: 0; border-radius: 40px 40px 10px 10px; filter: blur(1px);
  background: linear-gradient(to top, #0e0a06, #2a2016 60%, #3a2a18cc 85%, transparent); box-shadow: 0 0 20px #0009; }
.oil-drop { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c); box-shadow: inset -3px -3px 4px #fff3; }
.ring-light { width: 170px; height: 170px; border-radius: 50%; border: 14px solid #fff; box-shadow: 0 0 24px #fff, 0 0 50px var(--c), inset 0 0 20px var(--c); mix-blend-mode: screen; }
.stream-counter { padding: 6px 12px; border-radius: 8px; font: 800 20px 'Segoe UI'; color: #fff; background: #0e0e16e0; border: 2px solid var(--c); box-shadow: 0 0 14px var(--c); }
.stream-counter b { color: #ff3b4e; }
.cursive { font: italic 700 76px 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', cursive; color: #2a0a14; padding: 0 20px;
  text-shadow: 0 0 2px #fff, 0 0 14px #fff, 0 0 26px var(--c); }
.ink-dot { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a2a3a, #1a0a12 60%); box-shadow: 0 0 16px #0009; }
.bicorne { width: 110px; height: 44px; }
.bicorne i { position: absolute; inset: 0; border-radius: 55px 55px 12px 12px / 44px 44px 12px 12px; background: #15151c; border-bottom: 6px solid #d4a73a; box-shadow: 0 4px 6px #0008; }
.battle-map { height: 130px; border-radius: 10px; box-shadow: 0 0 16px #0008, inset 0 0 40px #8a6a3a;
  background: radial-gradient(circle at 30% 40%, #9ac27a55 0 18%, transparent 19%), radial-gradient(circle at 70% 70%, #6aa0c855 0 14%, transparent 15%), #e8d6ac; }
.map-dash { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.thrown.candle { font-size: 50px; }
.yinyang { width: 130px; height: 130px; border-radius: 50%; box-shadow: 0 0 30px #ffe38a, 0 0 50px var(--c);
  background: linear-gradient(90deg, #ffe9a8 50%, #14121c 50%); }
.yinyang i { position: absolute; left: 32.5px; width: 65px; height: 65px; border-radius: 50%; }
.yinyang i:nth-child(1) { top: 0; background: radial-gradient(circle, #14121c 0 16%, #ffe9a8 18%); }
.yinyang i:nth-child(2) { bottom: 0; background: radial-gradient(circle, #ffe9a8 0 16%, #14121c 18%); }
.fence-post { width: 16px; height: 70px; border-radius: 8px 8px 2px 2px; background: linear-gradient(90deg, #fff, #e4dccb); box-shadow: 0 4px 4px #0006, inset -3px 0 0 #cfc4ad; }
.thrown.house { font-size: 230px; filter: drop-shadow(0 12px 10px #0008); }
.drop-shadow { width: 300px; height: 110px; border-radius: 50%; background: radial-gradient(ellipse, #000a, transparent 70%); }
.brush-stroke svg { display: block; overflow: visible; filter: drop-shadow(0 0 8px #0008); }
.float-text.safe { font-size: 72px; letter-spacing: 3px; }
/* cross-novel duo styles */
.chalkboard.proof { min-width: 250px; min-height: 150px; font-size: 34px; line-height: 1.25; color: #fff; text-align: left; }
.ecg { position: relative; padding: 8px 10px 4px; border-radius: 14px; background: #08140e; border: 5px solid #3a4a44; box-shadow: 0 0 18px #5dff8a66, 0 8px 12px #0008; }
.ecg svg { display: block; }
.ecg path { stroke: #5dff8a; filter: drop-shadow(0 0 4px #5dff8a); }
.ecg b { position: absolute; top: 4px; right: 10px; font: 900 18px Consolas, monospace; color: #5dff8a; }
.ecg.flat-line path { stroke: #ff4d5e; filter: drop-shadow(0 0 4px #ff4d5e); }
.ecg.flat-line b { color: #ff4d5e; }
.live-phone { width: 110px; height: 190px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(160deg, #2a2440, #0e0b1a); border: 6px solid #111; box-shadow: 0 0 18px var(--c), 0 8px 12px #0008; color: #fff; }
.live-phone em { font: 900 13px 'Segoe UI', sans-serif; font-style: normal; padding: 2px 8px; border-radius: 6px; background: #e8283c; }
.live-phone b { font: 900 30px 'Segoe UI', sans-serif; text-shadow: 0 0 10px var(--c); }
.live-phone small { font: 700 13px 'Segoe UI', sans-serif; opacity: .75; }
.play-card { width: 48px; height: 68px; border-radius: 6px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: 0 4px 8px #0008; font: 900 20px 'Segoe UI', sans-serif; color: #111;
  background: repeating-linear-gradient(45deg, var(--c) 0 6px, #0006 6px 12px), #222; }
.play-card.up { background: #fff; border-color: #ddd; box-shadow: 0 0 12px var(--c), 0 4px 8px #0008; }
.price-tag { padding: 4px 16px 4px 28px; border-radius: 6px 16px 16px 6px; font: 900 34px 'Segoe UI', sans-serif; color: #3a2410;
  background: #ffe36a; box-shadow: 0 4px 8px #0007; }
.price-tag::before { content: ''; position: absolute; left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #3a2410; }
.arrow-fall { width: 5px; height: 70px; border-radius: 2px; background: linear-gradient(#e8e8e8 0 18%, #6a4a2a 18%); box-shadow: 0 0 4px #0008; }
.arrow-fall::after { content: ''; position: absolute; left: -5px; bottom: -12px; border: 7px solid transparent; border-top: 12px solid #cfcfcf; border-bottom: 0; }
.trapdoor { width: 260px; height: 260px; border-radius: 50%; box-shadow: 0 0 30px var(--c);
  background: radial-gradient(circle, #000 0 52%, #1a0030 58%, #5a3a1a 61%, #3a2410 69%, transparent 71%); }
.barbell { width: 220px; height: 12px; border-radius: 6px; background: linear-gradient(#eee, #888); box-shadow: 0 3px 6px #0008; }
.barbell i { position: absolute; top: -29px; width: 16px; height: 70px; border-radius: 5px; background: #222; border: 2px solid #555; transition: all .2s; }
.barbell i:nth-child(1) { left: 12px; } .barbell i:nth-child(2) { left: 32px; }
.barbell i:nth-child(3) { right: 32px; } .barbell i:nth-child(4) { right: 12px; }
.barbell.heavy i { top: -44px; width: 20px; height: 100px; background: #b02020; border-color: #ff6a6a; }
/* relationship scenes: poem, late, debate, ritual, prayer, dreamhome, grill, streak, pushups, roast (cards.js) */
.cm-notebook { top: -150px; width: 380px; padding: 16px 22px 18px; border-radius: 6px; box-sizing: border-box; text-align: left; box-shadow: 0 10px 22px #0009;
  background: repeating-linear-gradient(#fffdf5 0 38px, #cfe0f0 38px 40px); border-left: 10px solid var(--c); }
.cm-notebook b { display: block; margin-bottom: 4px; font: 900 22px 'Segoe UI'; letter-spacing: 2px; color: var(--c); }
.cm-notebook p { margin: 0; font: italic 700 26px/40px 'Segoe Script', 'Segoe Print', 'Comic Sans MS', cursive; color: #3a2a4a; white-space: nowrap; }
.cm-banner { top: -140px; padding: 10px 30px; border-radius: 8px; white-space: nowrap; font: 900 34px 'Segoe UI'; letter-spacing: 2px; color: #fff;
  background: linear-gradient(#2a2a40, #14142a); border: 4px solid var(--c); box-shadow: 0 0 22px var(--c), 0 10px 16px #0009; }
.cm-podium { bottom: -10px; width: 210px; height: 190px; border-radius: 12px 12px 0 0; background: linear-gradient(#3a2a1a, #1e140c); border-top: 10px solid var(--c);
  box-shadow: 0 -6px 20px #0009, inset 0 0 30px #0007; }
.cm-podium i { position: absolute; left: 50%; top: 40px; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%; border: 5px solid var(--c); box-shadow: 0 0 14px var(--c); }
.cm-pentagram { bottom: -240px; filter: drop-shadow(0 0 12px var(--c)); }
.cm-pentagram svg { display: block; }
.cm-pentagram.lit { color: #ffd27a !important; filter: drop-shadow(0 0 14px #ffe066) drop-shadow(0 0 36px var(--c)); }
.cm-candle { bottom: 10px; font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 6px #0009); }
.cm-candle i { position: absolute; left: 50%; top: -18px; width: 22px; height: 34px; margin-left: -11px; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; opacity: 0;
  background: radial-gradient(ellipse at 50% 80%, #fff 0 15%, #ffcf5a 40%, #ff5a1f 65%, transparent 72%); filter: blur(.5px); }
.cm-candle.lit i { opacity: 1; animation: cm-flicker .12s infinite alternate; }
@keyframes cm-flicker { from { transform: scaleY(1) } to { transform: scaleY(1.25) translateY(-2px) } }
.cm-halo { top: 10px; width: 150px; height: 44px; border-radius: 50%; border: 10px solid #ffe38a; box-shadow: 0 0 24px #ffe38a, inset 0 0 12px #ffe38a; }
.cm-sun { top: 0; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, #fff6c8, #ffc24a 45%, #ff7a3a 70%, transparent 72%);
  box-shadow: 0 0 80px #ff9a3a; mix-blend-mode: screen; }
.cm-house { top: 60px; filter: drop-shadow(0 0 10px #ffd27a) drop-shadow(0 0 30px var(--c, #ffb347)); }
.cm-house svg { display: block; }
.cm-grill { bottom: 40px; width: 260px; height: 110px; border-radius: 0 0 120px 120px; background: linear-gradient(#2a2a2e, #0e0e10); border-top: 10px solid #555;
  box-shadow: 0 10px 18px #0009, inset 0 -10px 20px #ff5a1f55; }
.cm-grill::before { content: ''; position: absolute; left: 6%; right: 6%; top: -14px; height: 8px;
  background: repeating-linear-gradient(90deg, #aaa 0 6px, transparent 6px 22px); }
.cm-grill i { position: absolute; left: 50%; bottom: -60px; width: 10px; height: 60px; margin-left: -5px; background: #333; box-shadow: -70px 0 0 #333, 70px 0 0 #333; }
.cm-streak { width: 22px; border-radius: 11px; background: linear-gradient(#ff3b4e, var(--c) 60%, #ff3b4e00); box-shadow: 0 0 16px var(--c), 0 0 30px var(--c);
  mix-blend-mode: screen; }
/* cross-novel relationship scenes */
.cm-beam { width: 620px; height: 260px; clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%); mix-blend-mode: screen;
  background: linear-gradient(90deg, #fffbe0, color-mix(in srgb, var(--c) 60%, transparent) 40%, transparent); filter: blur(2px); }
.cm-lattice { bottom: 0; width: 150px; height: 560px; border: 12px solid #6b3f1f; border-radius: 70px 70px 0 0; box-shadow: 0 0 24px #000a, inset 0 0 20px #000a;
  background: repeating-linear-gradient(45deg, transparent 0 18px, #8a5a2b 18px 24px), repeating-linear-gradient(-45deg, #1a0e06cc 0 18px, #8a5a2b 18px 24px);
  transform-origin: 50% 100%; }
.cm-meter { top: -110px; width: 320px; height: 44px; border-radius: 22px; background: #1a1030; border: 4px solid #fff; box-shadow: 0 6px 16px #0009; overflow: hidden; }
.cm-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffb0c8, var(--c)); box-shadow: 0 0 16px var(--c); }
.cm-meter small { position: absolute; inset: 0; z-index: 1; text-align: center; font: 900 22px/36px 'Segoe UI'; letter-spacing: 6px; color: #fff; text-shadow: 0 2px 0 #000; }
.cm-meter.full { border-color: var(--c); box-shadow: 0 0 30px var(--c), 0 0 60px var(--c); animation: cm-alarm .25s infinite alternate; }
@keyframes cm-alarm { to { filter: brightness(1.8); } }
.cm-cork { top: -150px; width: 820px; height: 460px; border-radius: 10px; border: 14px solid #8a5a2b; box-shadow: 0 10px 30px #000a, inset 0 0 30px #0007;
  background: radial-gradient(circle at 20% 30%, #c89660 0 2px, transparent 3px) 0 0 / 23px 19px, linear-gradient(#b8844f, #a06d3c); }
.cm-snap { width: 96px; padding: 6px 6px 4px; background: #fff; box-shadow: 0 4px 10px #0009; text-align: center; }
.cm-snap::before { content: ''; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #e0245e; box-shadow: 0 2px 3px #0008; }
.cm-snap i { display: block; height: 70px; font: normal 50px/70px 'Segoe UI Emoji'; background: linear-gradient(135deg, #ffd6e6, #c3a8ff); }
.cm-snap b { font: 700 14px 'Comic Sans MS', 'Segoe Print', 'Segoe UI'; color: #e0245e; }
.cm-snap.big { width: 200px; padding: 12px 12px 8px; }
.cm-snap.big i { height: 150px; font-size: 110px; line-height: 150px; }
.cm-snap.big b { font-size: 26px; }
.cm-snap.half { clip-path: polygon(0 0, 50% 0, 46% 20%, 54% 40%, 44% 60%, 52% 80%, 48% 100%, 0 100%); }
.cm-snap.half.r { clip-path: polygon(50% 0, 100% 0, 100% 100%, 48% 100%, 52% 80%, 44% 60%, 54% 40%, 46% 20%); }
.cm-ropes { bottom: 150px; width: 112%; height: 190px; }
.cm-ropes i { display: block; height: 10px; margin-bottom: 50px; border-radius: 5px; background: linear-gradient(#ff6b6b, #b0182c); box-shadow: 0 4px 6px #0008; }
.cm-ropes::before, .cm-ropes::after { content: ''; position: absolute; top: -20px; bottom: -160px; width: 26px; border-radius: 6px; background: linear-gradient(90deg, #ccc, #777); }
.cm-ropes::before { left: -12px; } .cm-ropes::after { right: -12px; }
.cm-chess { bottom: 30px; width: 360px; height: 130px; }
.cm-chess i { position: absolute; inset: 0; border: 10px solid #4a2c14; border-radius: 8px; box-shadow: 0 10px 20px #000a;
  background: repeating-conic-gradient(#e8d7b0 0 25%, #3a2a1a 0 50%) 0 0 / 60px 43px; transform: perspective(500px) rotateX(38deg); }
.cm-piece { font-size: 60px; text-shadow: 0 0 10px currentColor, 0 4px 0 #000; }
.cm-oven { bottom: -10px; width: 230px; height: 200px; border-radius: 14px 14px 0 0; background: linear-gradient(#e8e8ec, #a0a0a8); border-top: 12px solid var(--c);
  box-shadow: 0 -6px 20px #0009, inset 0 -8px 16px #0004; }
.cm-oven i { position: absolute; left: 24px; right: 24px; top: 34px; height: 100px; border-radius: 10px; border: 6px solid #555;
  background: radial-gradient(ellipse at 50% 100%, #ffcf5a, #ff7a1c 45%, #3a1a0a 80%); box-shadow: inset 0 0 20px #000a; }
.cm-scorecard { min-width: 90px; padding: 10px 16px; border-radius: 10px; background: #fff; border: 5px solid var(--c); box-shadow: 0 8px 16px #0009;
  font: 900 64px/1 'Segoe UI'; color: #1a1030; text-align: center; }
.cm-waves { bottom: 0; width: 130%; height: 0; overflow: visible; opacity: .85; mix-blend-mode: normal;
  background: linear-gradient(#4fc3f7cc, #0a5a8acc 60%, #063a5aee); box-shadow: inset 0 10px 20px #fff6; }
.cm-waves::before { content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 24px;
  background: radial-gradient(circle at 50% 100%, #4fc3f7cc 0 20px, transparent 21px) 0 0 / 44px 24px; }
.cm-hammock { bottom: 90px; width: 92%; height: 170px; border: 10px solid #d8b27a; border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: repeating-linear-gradient(45deg, transparent 0 16px, #d8b27a99 16px 19px), repeating-linear-gradient(-45deg, transparent 0 16px, #d8b27a99 16px 19px);
  box-shadow: 0 10px 12px #0006; }
.cm-felt { background: radial-gradient(ellipse at 50% 20%, #2e9a5a, #14532e 70%); border-top-color: #6b3f1f; }
.cm-cardlet { width: 58px; height: 82px; border-radius: 7px; border: 3px solid #fff; box-shadow: 0 4px 8px #0009;
  background: repeating-linear-gradient(45deg, #b0182c 0 6px, #8a0f20 6px 12px); }
.cm-cardlet.up { background: #fff; border-color: #ddd; font: 900 26px/76px 'Segoe UI'; text-align: center; color: #1a1030; }
.cm-paddle { padding: 10px 18px; border-radius: 50%; background: #fff; border: 5px solid var(--c); box-shadow: 0 6px 14px #0009, 0 0 20px var(--c);
  font: 900 34px 'Segoe UI'; color: #1a1030; white-space: nowrap; }
.cm-art { padding: 16px; font-size: 110px; background: linear-gradient(#fff8e0, #f0e0b0); border: 14px solid #c9a44c; border-radius: 6px;
  box-shadow: 0 0 0 4px #8a6a1c, 0 12px 26px #000a, 0 0 40px #ffd24a88; }

/* ================= card packs ================= */
.menu-btn .badge { margin-left: auto; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px; font: 900 18px/34px 'Segoe UI'; font-style: normal; text-align: center;
  color: #3a2500; background: radial-gradient(circle at 35% 30%, #fff3a0, #ffc400); box-shadow: 0 0 14px #ffcc33; animation: badge 1.2s ease-in-out infinite alternate; }
@keyframes badge { to { box-shadow: 0 0 26px #ffcc33, 0 0 4px #fff; transform: scale(1.08); } }
#pack-progress { font-size: 18px; margin: -8px 0 10px; background: rgba(14,10,34,.85); border: 2px solid #ffffff22; border-radius: 12px; padding: 6px 18px; }
#pack-progress b { color: #ffe680; }
#pack-progress .done { color: #7dff9a; }
#pack-list { display: flex; gap: 60px; align-items: flex-end; margin-top: 6px; }
.pack-tile { --rc: #c9d1dc; width: 330px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; }
.pack-art { width: 262px; height: 424px; position: relative; }
.pack-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--rc) 70%, transparent)) drop-shadow(0 14px 16px #000a);
  animation: pack-float 3s ease-in-out infinite alternate; transition: transform .25s, filter .25s; }
.pack-tile.t-rare .pack-art img { animation-delay: -1s; }
.pack-tile.t-epic .pack-art img { animation-delay: -2s; }
.pack-tile:not(.empty):hover .pack-art img { transform: translateY(-10px) scale(1.04) rotate(-2deg); filter: drop-shadow(0 0 30px var(--rc)) drop-shadow(0 14px 16px #000a) brightness(1.1); }
.pack-tile.empty .pack-art img { filter: grayscale(.85) brightness(.5); animation: none; }
@keyframes pack-float { from { translate: 0 0; } to { translate: 0 -10px; } }
.pack-count { position: absolute; top: 10px; right: 30px; font: 900 28px 'Segoe UI'; padding: 2px 14px; border-radius: 16px; color: #1a1030;
  background: var(--rc); box-shadow: 0 0 16px var(--rc), 0 4px 8px #0009; }
.pack-tile.empty .pack-count { background: #555; color: #ccc; box-shadow: none; }
.pack-name { font: 900 26px 'Segoe UI'; color: var(--rc); text-shadow: 0 3px 0 #000, 0 0 16px var(--rc); }
.pack-slots { font-size: 15px; line-height: 1.5; min-height: 70px; background: rgba(14,10,34,.85); border: 2px solid #ffffff22; border-radius: 12px; padding: 6px 16px; }
.pack-tile .btn { min-width: 160px; }
.pack-tile .btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; transform: none; }
.pack-tip { font-size: 15px; opacity: .85; margin: 18px 0 0; background: rgba(14,10,34,.8); border-radius: 12px; padding: 8px 18px; }

/* the glow sits on the wrapper: on the halves it would be cut off by their clip-path */
.rv-pack { position: absolute; left: 0; top: 0; pointer-events: none; filter: drop-shadow(0 0 20px var(--rc)) drop-shadow(0 16px 20px #000b); }
.rv-pack-body, .rv-pack-top { position: absolute; inset: 0; background: var(--art) center / contain no-repeat; }
.rv-pack-top { clip-path: inset(0 0 calc(100% - var(--tear)) 0); }
.rv-pack-body { clip-path: inset(var(--tear) 0 0 0); }
/* the pack leans toward the pointer; a holo shine on the art, a dotted tear line, light leaking out of the tear */
.rv-pack-tilt { position: absolute; inset: 0; }
.rv-pack-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--sx, 30%) var(--sy, 25%), rgba(255,255,255,.85), transparent 38%),
    linear-gradient(115deg, transparent 30%, #ff6fae55 42%, #ffe68055 50%, #4aa3ff55 58%, transparent 70%) var(--sx, 30%) 0 / 300% 100% no-repeat;
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.rv-slit { position: absolute; top: var(--tear); left: 0; width: 0; height: 6px; margin-top: -3px; border-radius: 4px; opacity: 0; pointer-events: none;
  background: #fff; box-shadow: 0 0 10px 3px var(--in), 0 0 36px 12px var(--in); }
.rv-tearline { position: absolute; top: var(--tear); left: 5%; right: 5%; height: 0; border-top: 3px dashed rgba(255,255,255,.85); pointer-events: none;
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 6px var(--rc)); }
.rv-tearline i { position: absolute; left: 0; top: -13px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 35%, var(--rc) 60%, transparent 72%); box-shadow: 0 0 16px var(--rc); }
.rv-pfp { position: absolute; left: 0; top: 0; border-radius: 26px; overflow: hidden; border: 6px solid #ff6fae;
  background: linear-gradient(160deg, #2c2456, #120e2c); box-shadow: 0 0 30px #ff6fae, 0 10px 20px rgba(0,0,0,.7); }
.rv-pfp img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.rv-pfp-name { font: 900 26px 'Segoe UI'; text-align: center; padding: 12px 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 2px #000; }
.rv-pfp-tag { font: 900 13px 'Segoe UI'; letter-spacing: 4px; text-align: center; color: #ff9cc9; margin-top: 4px; }
.rv-pfp .glare { border-radius: 20px; }

/* ================= profile ================= */
#profile-chip { position: absolute; right: 132px; top: 16px; display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 30px; cursor: pointer;
  color: #fff; text-align: left; border: 2px solid #ffffff44; background: rgba(20,14,48,.8); backdrop-filter: blur(8px); box-shadow: 0 6px 18px #0008;
  transition: border-color .2s, box-shadow .2s; }
#profile-chip:hover { border-color: #ff6fae; box-shadow: 0 0 20px #ff6fae88, 0 6px 18px #0008; }
#profile-chip img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #ff6fae; background: #2c2456; }
#profile-chip b { display: block; font: 800 17px 'Segoe UI'; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profile-chip small { font-size: 12px; opacity: .75; }
.p-avatar { position: absolute; right: 10px; top: 10px; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #6bb6ff; background: #2c2456; }
#player-panel .p-name { padding-right: 58px; }
#profile-body { display: flex; gap: 24px; align-items: flex-start; }
#profile-card { width: 380px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; border-radius: 20px;
  background: rgba(14,10,34,.9); border: 2px solid #ff6fae88; box-shadow: 0 0 30px #ff6fae33; }
#profile-avatar { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; border: 5px solid #ff6fae; box-shadow: 0 0 30px #ff6fae88; background: #2c2456; }
.profile-name-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#profile-name { font: 900 30px 'Segoe UI'; text-shadow: 0 3px 0 #000; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profile-rename { background: none; border: 0; color: #fff; opacity: .7; font-size: 20px; cursor: pointer; }
#profile-rename:hover { opacity: 1; color: #ffd84a; }
#profile-pic-name { font-size: 15px; color: #ff9cc9; margin-top: -4px; }
#profile-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 10px; }
#profile-tiles .st-tile { padding: 10px; }
#profile-tiles .st-tile b { font-size: 28px; }
#avatar-side { width: 900px; height: 700px; display: flex; flex-direction: column; background: rgba(14,10,34,.9); border: 2px solid #ffffff33; border-radius: 20px; padding: 14px 16px; }
#profile-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
#profile-tabs button { font: 900 19px 'Segoe UI'; color: #fff; opacity: .6; padding: 8px 18px; border-radius: 12px; cursor: pointer; background: #ffffff0d; border: 2px solid transparent; transition: opacity .15s, border-color .15s; }
#profile-tabs button:hover { opacity: .9; }
#profile-tabs button.on { opacity: 1; color: #ffe680; border-color: #ff6fae; background: linear-gradient(#3d2d78, #22185a); }
#profile-tabs span { color: #fff; opacity: .75; font-size: 15px; margin-left: 4px; }
#avatar-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 110px); grid-auto-rows: 110px; gap: 12px; justify-content: center; align-content: start; padding: 4px 6px 4px 2px; }
.pfp { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; border: 3px solid #ffffff22; background: #2c2456; transition: transform .15s, border-color .15s; }
.pfp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pfp span { position: absolute; left: 0; right: 0; bottom: 0; font: 700 11px 'Segoe UI'; text-align: center; padding: 10px 4px 4px;
  background: linear-gradient(transparent, #000c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfp:not(.locked):hover { transform: translateY(-3px); border-color: #ff9cc9; }
.pfp.on { border-color: #ff6fae; box-shadow: 0 0 16px #ff6fae; }
.pfp.on::after { content: '\2714'; position: absolute; top: 4px; right: 6px; font-weight: 900; color: #fff; text-shadow: 0 0 6px #ff6fae, 0 1px 2px #000; }
.pfp.locked { cursor: not-allowed; }
.pfp.locked img { filter: blur(5px) brightness(.25) grayscale(.6); transform: scale(1.1); }
.pfp.locked span { top: 0; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; background: none; }

.card.locked .cost, .card.locked .stat, .card.locked .r-gem { z-index: 3; }

/* ================= deck & collection ================= */
#screen-deck { align-items: stretch; padding: 20px 40px 24px; }
#coll-head { display: flex; align-items: center; gap: 22px; height: 58px; }
#coll-head h1 { margin: 0; font-size: 40px; }
#coll-progress { display: flex; align-items: center; gap: 10px; }
#coll-progress > div { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 19px; font-size: 15px;
  background: rgba(14,10,34,.85); border: 2px solid #ffffff22; }
#coll-progress b { color: #ffe680; }
#coll-progress .ctotal { font-size: 17px; }
.cmeter span { font-weight: 800; min-width: 44px; }
.cmeter > b { width: 62px; height: 7px; border-radius: 4px; background: #ffffff18; overflow: hidden; }
.cmeter > b i { display: block; height: 100%; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
#coll-progress .cmeter.full { border-color: color-mix(in srgb, var(--rc) 60%, transparent); }
.gem { display: inline-block; width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; border: 1.5px solid #fff;
  background: linear-gradient(135deg, #fff, var(--rc) 55%, #0006); box-shadow: 0 0 6px var(--rc); }
#coll-progress .ccollect b { color: #ffb86b; }
#coll-main { flex: 1; min-height: 0; display: flex; gap: 20px; margin-top: 10px; }
#coll-left { width: 1080px; display: flex; flex-direction: column; gap: 10px; }
#coll-tools { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-radius: 16px; background: rgba(14,10,34,.9); border: 2px solid #ffffff22; }
.ct-row { display: flex; align-items: center; gap: 8px; height: 34px; }
.ct-search { flex: 1; min-width: 0; display: flex; align-items: center; height: 34px; padding: 0 0 0 10px; border-radius: 10px; border: 2px solid #ffffff22; background: #0008; cursor: text; }
.ct-search i { font-style: normal; font-size: 14px; opacity: .7; }
.ct-search:focus-within { border-color: #ff6fae; box-shadow: 0 0 10px #ff6fae66; }
#coll-search { flex: 1; min-width: 0; height: 100%; padding: 0 10px 0 8px; border: 0; background: transparent; color: #fff; font: 600 14px 'Segoe UI'; outline: none; }
#coll-search::placeholder { color: #ffffff66; }
.ct-tabs { display: flex; padding: 2px; gap: 2px; border-radius: 11px; background: #0006; }
.ct-tabs button { height: 30px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: #fff; opacity: .6; cursor: pointer; white-space: nowrap;
  font: 700 13px 'Segoe UI'; display: flex; align-items: center; gap: 5px; transition: opacity .15s, background .15s; }
.ct-tabs button:hover { opacity: .95; background: #ffffff14; }
.ct-tabs button.on { opacity: 1; background: linear-gradient(#ff6fae, #b0336e); box-shadow: 0 0 10px #ff6fae88; }
.ct-tabs small { min-width: 18px; padding: 0 5px; border-radius: 8px; background: #0007; font: 800 11px 'Segoe UI'; line-height: 17px; text-align: center; }
.ct-tabs button[data-show="levelup"] small { color: #9dff9d; }
.ct-count { min-width: 74px; text-align: right; font-size: 13px; opacity: .85; white-space: nowrap; }
.ct-count b { font-size: 16px; color: #ffe680; }
#coll-tools select { height: 34px; padding: 0 6px; border-radius: 10px; border: 2px solid #ffffff22; background: #1a1438; color: #fff; font: 600 13px 'Segoe UI'; cursor: pointer; }
#coll-tools select:hover, #coll-tools select:focus { border-color: #ff6fae99; outline: none; }
#coll-tools .ct-novel { width: 150px; }
#coll-tools .ct-sort { width: 170px; border-color: #ffd36a66; background: #2a1f3f; }
.ct-sep { flex: 1; }
.chips { display: flex; padding: 2px; gap: 2px; border-radius: 11px; background: #0006; }
.chips button { min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; color: #fff; opacity: .55; cursor: pointer;
  font: 800 14px 'Segoe UI'; display: flex; align-items: center; justify-content: center; transition: opacity .15s, background .15s; }
.chips button:hover { opacity: .9; background: #ffffff14; }
.chips button.on { opacity: 1; background: linear-gradient(#ff6fae, #b0336e); box-shadow: 0 0 10px #ff6fae88; }
.chips button .gem { --rc: var(--cc); }
.chip-reset { height: 34px; padding: 0 10px; border-radius: 10px; border: 2px solid #ffffff22; background: #0006; color: #fff; opacity: .5; cursor: pointer;
  font: 800 13px 'Segoe UI'; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.chip-reset.on { opacity: 1; border-color: #ff6fae99; }
.chip-reset:hover { border-color: #ff6fae; color: #ff9cc9; }
.chip-reset b { padding: 0 6px; border-radius: 8px; background: #ff6fae; color: #2a0a1a; font-size: 11px; line-height: 16px; }
.chip-reset b:empty { display: none; }
/* one page of 2 rows of 4 cards, a little bigger than in battle; nothing scrolls */
#collection { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 192px); grid-template-rows: repeat(2, 264px); justify-content: space-evenly;
  align-content: space-evenly; padding: 0 20px; overflow: hidden; border-radius: 18px; background: rgba(12,9,30,.88); border: 2px solid #ffffff14; }
#collection .card.collect { zoom: 1.2; }
.coll-empty { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; text-align: center; font-size: 20px; opacity: .7; }
.coll-empty small { font-size: 14px; opacity: .8; }
/* the sort group a card starts, written above it */
.coll-tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 10px; border-radius: 8px; background: #000c; border: 1px solid #ffe9a855; color: #ffe9a8; font: 900 11px 'Segoe UI'; letter-spacing: .3px; pointer-events: none; }
#coll-pager { display: flex; align-items: center; justify-content: center; gap: 12px; height: 46px; padding: 0 10px; border-radius: 16px; background: rgba(14,10,34,.97); border: 2px solid #ffffff22; }
#coll-pager .cp-jump { width: 240px; height: 32px; margin-right: auto; padding: 0 6px; border-radius: 10px; border: 2px solid #ffd36a66; background: #2a1f3f; color: #fff; font: 600 13px 'Segoe UI'; cursor: pointer; }
#coll-pager button { width: 52px; height: 34px; border-radius: 10px; border: 2px solid #ffffff33; background: linear-gradient(#3d6fd8, #23408f); color: #fff; font-size: 15px; cursor: pointer; }
#coll-pager button:hover:not(:disabled) { filter: brightness(1.25); }
#coll-pager button:disabled { opacity: .3; cursor: default; }
#coll-pager .cp-page { min-width: 110px; text-align: center; font-size: 15px; }
#coll-pager .cp-page b { color: #ffe680; font-size: 18px; }
#coll-pager::after { content: ''; width: 240px; margin-left: auto; }
.card.collect { cursor: pointer; transition: transform .15s; }
.card.collect:hover { transform: translateY(-5px) scale(1.04); z-index: 1; }
.card.collect.maxed { filter: brightness(.55); }
.card.collect.locked { cursor: not-allowed; }
.card.collect.locked:hover { transform: none; }
.copies { position: absolute; top: 4px; right: 6px; font-weight: 900; background: #000a; padding: 2px 8px; border-radius: 10px; font-size: 13px; z-index: 1; }
.copies.in { background: linear-gradient(#7dff9a, #22b04a); color: #06210e; box-shadow: 0 0 8px #3dff6a; }
#deck-side { width: 420px; display: flex; flex-direction: column; gap: 10px; }
#deck-tabs { display: flex; gap: 6px; }
.deck-tab { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: rgba(12,8,30,.8); border: 2px solid #ffffff22; font-weight: 700; font-size: 14px; }
.deck-tab:hover { filter: brightness(1.3); }
.deck-tab.on { cursor: default; border-color: #ff6fae; background: linear-gradient(#3d2d78, #22185a); filter: none; }
.deck-tab .dt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-tab small { opacity: .7; }
.deck-tab.bad small { color: #ff7a7a; opacity: 1; }
#deck-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(14,10,34,.9); border: 2px solid #ffffff22; }
.dh-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.dh-name small { font: 900 11px 'Segoe UI'; letter-spacing: 3px; opacity: .6; }
.dh-name b { font: 900 24px 'Segoe UI'; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#deck-rename { background: none; border: 0; color: #fff; opacity: .6; font-size: 18px; cursor: pointer; }
#deck-rename:hover { opacity: 1; color: #ffd84a; }
#deck-count { --p: 0%; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none;
  background: radial-gradient(#1a1438 58%, transparent 60%), conic-gradient(#7dff9a var(--p), #ffffff1a 0); }
#deck-count b { font: 900 22px 'Segoe UI'; color: #7dff9a; }
#deck-count.bad { background: radial-gradient(#1a1438 58%, transparent 60%), conic-gradient(#ff7d8a var(--p), #ffffff1a 0); }
#deck-count.bad b { color: #ff7d8a; }
#deck-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 14px; }
#deck-meta span { flex: 1; text-align: center; padding: 6px 4px; border-radius: 10px; background: rgba(12,8,30,.8); border: 1px solid #ffffff1a; }
#deck-meta b { color: #ffe680; }
#deck-curve { height: 84px; flex: none; display: flex; align-items: flex-end; gap: 6px; background: rgba(12,8,30,.8); border-radius: 12px; padding: 6px 12px; }
#deck-curve .bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
#deck-curve .bar em { font: 800 10px 'Segoe UI'; font-style: normal; opacity: .8; min-height: 12px; }
#deck-curve .bar i { width: 100%; background: linear-gradient(#ffe680, #ff6fae); border-radius: 4px 4px 0 0; transition: height .3s; }
#deck-curve .bar span { font-size: 11px; }
#deck-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.deck-row { display: flex; flex: none; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px; border-left: 5px solid var(--c); border-right: 3px solid var(--rc, transparent); cursor: pointer;
  background: rgba(20,16,40,.95); background-size: cover; background-position: right 20%; }
.deck-row:hover { filter: brightness(1.3); }
.dc { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(#ffe680, #d99a00); color: #3a2500; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.dn { flex: 1; font-weight: 700; }
.dx { font-weight: 900; color: #ffd84a; }
.deck-empty { text-align: center; opacity: .65; padding: 40px 10px; line-height: 1.6; }

/* fragments elsewhere */
.pack-slots .frag { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 8px; background: #ffffff14; font-size: 13px; font-weight: 800; }
.cm-shardbar { height: 10px; margin: 6px 0; border-radius: 5px; background: #ffffff18; overflow: hidden; }
.cm-shardbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb86b, var(--rc)); box-shadow: 0 0 8px var(--rc); }
.rv-frag { position: absolute; left: 0; top: 0; font-size: 44px; filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 3px #fff); pointer-events: none; }

/* ================= main menu: dev tools and hover explainers ================= */
.dev-only { display: none !important; }
body.dev .dev-only { display: flex !important; }
.menu-dev { flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 2px dashed #ffffff33; position: relative; }
.menu-dev::before { content: 'DEV'; position: absolute; right: 0; top: -11px; font: 900 11px 'Segoe UI'; letter-spacing: 3px; padding: 1px 8px; border-radius: 6px; background: #ffb86b; color: #2a1600; }
.menu-dev .menu-btn { --glow: #ffb86b; height: 52px; font-size: 21px; }
.menu-tip { --glow: #b9a4ff; --ay: 50%; position: absolute; left: 0; top: 0; width: 380px; z-index: 5; pointer-events: none; padding: 14px 14px 16px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(34,24,78,.96), rgba(14,10,34,.96)); border: 2px solid var(--glow);
  box-shadow: 0 0 30px color-mix(in srgb, var(--glow) 45%, transparent), 0 16px 40px #000b; }
.menu-tip::before { content: ''; position: absolute; left: -11px; top: var(--ay); width: 18px; height: 18px; margin-top: -9px; transform: rotate(45deg);
  background: rgba(30,21,70,.98); border-left: 2px solid var(--glow); border-bottom: 2px solid var(--glow); }
.menu-tip h3 { margin: 12px 4px 4px; font: 900 22px 'Segoe UI'; color: var(--glow); text-shadow: 0 2px 0 #000; }
.menu-tip h3 em { font: 900 11px 'Segoe UI'; font-style: normal; letter-spacing: 2px; padding: 1px 6px; border-radius: 5px; background: #ffb86b; color: #2a1600; vertical-align: middle; }
.menu-tip p { margin: 0 4px; font-size: 14.5px; line-height: 1.45; opacity: .92; }
.menu-tip p small { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: #ffe680; }
.mt-stage { position: relative; width: 340px; height: 170px; margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--glow) 28%, #1a1438), #0c0920 80%); border: 1px solid #ffffff1f; }
.mt-stage > * { position: absolute; }
.mt-svg { inset: 0; }
.mt-svg svg { display: block; overflow: visible; }
.mt-svg path { fill: none; stroke: #ffe680; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px #ffb400); }
.mt-svg path.slash { stroke-width: 7; filter: drop-shadow(0 0 8px #fff); }
.mt-chap { font: 800 12px 'Segoe UI'; color: #ffe680; padding: 2px 8px; border-radius: 8px; background: #0008; white-space: nowrap; z-index: 3; }
.mt-node { width: 60px; height: 100px; }
.mt-node img { position: absolute; left: 0; bottom: 14px; width: 60px; height: 76px; object-fit: contain; object-position: bottom; }
.mt-node i { position: absolute; left: 20px; bottom: 0; width: 20px; height: 20px; border-radius: 50%; background: #2c2456; border: 2px solid #ffe680; font: 900 11px/16px 'Segoe UI'; font-style: normal; text-align: center; }
.mt-node b { position: absolute; left: 16px; top: 0; font-size: 28px; color: #ffe680; text-shadow: 0 0 10px #ffb400, 0 2px 0 #000; }
.mt-me { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 2px solid #ff6fae; box-shadow: 0 0 10px #ff6fae; z-index: 2; background: #2c2456; }
.mt-me img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-card .card { box-shadow: 0 6px 12px #000a; }
.mt-stack { width: 64px; height: 84px; }
.mt-stack i { position: absolute; inset: 0; border-radius: 8px; border: 2px solid #ffffff66; background: linear-gradient(135deg, #3d2d78, #120e2c); }
.mt-stack i:nth-child(2) { transform: translate(3px, -3px); }
.mt-stack i:nth-child(3) { transform: translate(6px, -6px); }
.mt-stack b { position: absolute; left: 0; right: -6px; bottom: -22px; text-align: center; font: 900 13px 'Segoe UI'; color: #7dff9a; }
.mt-pack { filter: drop-shadow(0 0 12px #4aa3ff) drop-shadow(0 8px 10px #000a); }
.mt-pack .rv-pack-body, .mt-pack .rv-pack-top { position: absolute; inset: 0; background: var(--art) center / contain no-repeat; }
.mt-frag { font-size: 24px; filter: drop-shadow(0 0 6px #ffe680); z-index: 3; }
.mt-gold { font: 900 14px 'Segoe UI'; color: #ffe680; padding: 2px 8px; border-radius: 8px; background: #0008; }
.mt-unit { width: 76px; height: 90px; z-index: 2; }
.mt-unit img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.mt-unit.big { width: 130px; height: 150px; }
.mt-vs-sprite { width: 120px; height: 160px; }
.mt-vs-sprite img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.mt-vs-sprite.flip img { transform: scaleX(-1); }
.mt-vs { font: 900 52px 'Segoe UI Black', 'Segoe UI'; color: #ffe680; text-shadow: 0 4px 0 #a00040, 0 0 20px #ff4f9a; z-index: 2; }
/* the Arena's tip: its mode switch, reward track and a PvP match */
.mt-modes { display: flex; padding: 2px; border-radius: 999px; background: #0009; border: 1px solid #ffffff22; z-index: 4; }
.mt-modes i { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 100px; border-radius: 999px; background: linear-gradient(135deg, #ff6fae, #b35cff); box-shadow: 0 0 10px #ff6fae; }
.mt-modes span { position: relative; width: 100px; text-align: center; font: 800 11px/20px 'Segoe UI'; white-space: nowrap; opacity: .6; transition: opacity .2s, color .2s; }
.mt-modes span.on { opacity: 1; color: #fff; text-shadow: 0 1px 2px #0008; }
.mt-ladder { width: 300px; height: 40px; }
.mt-ladder div { position: absolute; left: 10px; width: 280px; top: 8px; height: 4px; border-radius: 2px; background: #ffffff22; }
.mt-ladder div i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, #ffe680, #ff6fae); box-shadow: 0 0 8px #ff6fae; }
.mt-ladder b { position: absolute; top: 0; width: 20px; height: 20px; border-radius: 50%; font: 900 10px/16px 'Segoe UI'; text-align: center; color: #ffffffaa;
  background: #1a1438; border: 2px solid #ffffff44; }
.mt-ladder b:nth-of-type(4), .mt-ladder b:nth-of-type(6), .mt-ladder b:nth-of-type(8) { border-color: #ffc93caa; }
.mt-ladder b.on { color: #3a2400; background: linear-gradient(#fff3a0, #ffb020); border-color: #fff; box-shadow: 0 0 10px #ffc93c; }
.mt-ladder img { position: absolute; left: 116px; top: -46px; height: 42px; filter: drop-shadow(0 0 8px #ffe680) drop-shadow(0 3px 3px #000a); }
.mt-player { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mt-player div { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 3px solid #8ff0ff; background: #2c2456; box-shadow: 0 0 14px #3fd0ff88; }
.mt-player.foe div { border-color: #ff6fae; box-shadow: 0 0 14px #ff6fae88; }
.mt-player img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-player span { max-width: 100px; font: 800 12px 'Segoe UI'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.mt-search { width: 40px; height: 40px; border-radius: 50%; border: 4px solid #ff6fae; border-top-color: transparent; border-right-color: #b35cff; }
.mt-cap { width: 340px; text-align: center; font: 800 14px 'Segoe UI'; text-shadow: 0 1px 2px #000; }
.mt-cap b { color: #ffe680; }
.mt-atk { font: 900 16px 'Segoe UI'; text-shadow: 0 2px 0 #000; white-space: nowrap; }

/* ================= daily missions, Glitter, Shiny ================= */
.glit { color: #ffe27a; text-shadow: 0 0 8px #ffb02088; }
#glitter-bank { font-size: 26px; margin: -8px 0 16px; padding: 6px 22px; border-radius: 14px; background: rgba(14,10,34,.85); border: 2px solid #ffc93c66;
  box-shadow: 0 0 20px #ffc93c33; }
#mission-list { display: flex; flex-direction: column; gap: 14px; width: 820px; }
.mission { display: grid; grid-template-columns: 1fr 230px 90px 130px; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(44,36,86,.95), rgba(18,14,44,.95)); border: 2px solid #ffffff22; box-shadow: 0 8px 18px #0008; }
.mission.done { border-color: #ffc93c; box-shadow: 0 0 22px #ffc93c55, 0 8px 18px #0008; }
.mission.claimed { opacity: .55; }
.m-text { font: 700 20px 'Segoe UI'; }
.m-bar { position: relative; height: 22px; border-radius: 11px; background: #0008; overflow: hidden; border: 1px solid #ffffff33; }
.m-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff6fae, #ffc93c); transition: width .4s; }
.m-bar span { position: relative; display: block; text-align: center; font: 800 14px/22px 'Segoe UI'; text-shadow: 0 1px 2px #000; }
.m-reward { font: 900 20px 'Segoe UI'; color: #ffe27a; text-align: center; }
.m-act { text-align: center; }
.m-act .btn { padding: 8px 18px; font-size: 18px; }
.m-ok { color: #7dff9a; font-weight: 800; }
#mission-foot { max-width: 820px; text-align: center; line-height: 1.5; }
.glit-fly { position: absolute; left: 0; top: 0; font-size: 26px; z-index: 200; pointer-events: none; filter: drop-shadow(0 0 6px #ffc93c); }
.glit-pop { position: absolute; left: 0; top: 0; z-index: 200; pointer-events: none; font: 900 30px 'Segoe UI'; color: #ffe27a;
  text-shadow: 0 3px 0 #000, 0 0 14px #ffb020; white-space: nowrap; }
#coll-progress .ccollect.glit b { color: #ffe27a; }

/* a card's close-up: crafting / Shiny */
.cm-glitter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.cm-glitter > .glit { font-weight: 800; margin-right: 4px; }
.cm-glitter button { font: 700 13px 'Segoe UI'; color: #3a2400; background: linear-gradient(#ffe27a, #ffb020); border: 0; border-radius: 14px;
  padding: 6px 12px; cursor: pointer; box-shadow: 0 3px 0 #8a5a00; }
.cm-glitter button:hover { filter: brightness(1.1); }
.cm-glitter button:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
.cm-glitter.on { font: 900 18px 'Segoe UI'; color: #ffe27a; text-shadow: 0 0 10px #ffb020; }

/* Shiny cards: a rainbow sheen sweeping over the whole card, a golden edge and a few twinkles */
.card.shiny { box-shadow: 0 0 0 2px #fff6c0, 0 0 18px #ffc93caa, 0 8px 18px rgba(0,0,0,.6); }
.card .shine { position: absolute; inset: 0; border-radius: 11px; pointer-events: none; z-index: 3; overflow: hidden; mix-blend-mode: color-dodge; opacity: .55;
  background: linear-gradient(115deg, transparent 20%, #ff6fae 32%, #ffe27a 40%, #7dff9a 48%, #6fd0ff 56%, #c58cff 64%, transparent 76%);
  background-size: 300% 100%; animation: foil 3s linear infinite; }
.card .shine i { position: absolute; font-style: normal; color: #fff; font-size: 16px; mix-blend-mode: normal; text-shadow: 0 0 6px #fff;
  animation: twinkle 1.8s ease-in-out infinite; }
.card .shine i:nth-child(1) { left: 12%; top: 18%; }
.card .shine i:nth-child(2) { right: 14%; top: 42%; animation-delay: .6s; }
.card .shine i:nth-child(3) { left: 30%; bottom: 22%; animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.mt-mission { width: 316px; height: 34px; padding: 3px 10px; border-radius: 8px; background: #0009; border: 1px solid #ffffff22; font: 700 11px 'Segoe UI'; }
.mt-mission span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 250px; }
.mt-mission b { position: absolute; left: 10px; bottom: 5px; width: 250px; height: 7px; border-radius: 4px; background: #ffffff22; overflow: hidden; }
.mt-mission b i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff6fae, #ffc93c); }
.mt-mission em { position: absolute; right: 8px; top: 9px; font: 900 12px 'Segoe UI'; font-style: normal; color: #ffe27a; }
.mt-mission { transition: border-color .2s, box-shadow .2s; }
.mt-mission.done { border-color: #ffc93c88; box-shadow: 0 0 10px #ffc93c44; }
.mt-mission.done span::before { content: '✔ '; color: #7dff9a; }
.mt-mission.done em { text-shadow: 0 0 8px #ffb020; }
.mt-price { width: 80px; text-align: center; padding: 2px 0; border-radius: 8px; background: #0009; border: 1px solid #ffe68055; font: 900 12px 'Segoe UI'; color: #ffe680; white-space: nowrap; z-index: 2; }
.mt-price s { font-weight: 700; font-size: 10px; color: #ffffff88; margin-right: 2px; }
.mt-sold { padding: 1px 6px; border: 3px solid #ff5d73; border-radius: 6px; font: 900 16px 'Segoe UI'; letter-spacing: 1px; color: #ff5d73; background: #1a0a18cc; text-shadow: 0 0 6px #ff2040; z-index: 3; }

/* ================= boss rules ================= */
.boss-banner { position: absolute; left: 50%; top: 150px; width: 760px; margin-left: -380px; z-index: 80; pointer-events: none; text-align: center;
  padding: 14px 24px 16px; border-radius: 18px; color: #fff; background: linear-gradient(#1a0f2eee, #0b0716ee);
  border: 3px solid var(--c); box-shadow: 0 0 40px var(--c), inset 0 0 30px color-mix(in srgb, var(--c) 30%, transparent); }
.boss-banner small { display: block; font: 900 15px 'Segoe UI'; letter-spacing: 6px; color: var(--c); filter: brightness(1.4); }
.boss-banner b { display: block; font: 900 46px/1.1 'Segoe UI Black', 'Segoe UI'; text-shadow: 0 0 20px var(--c), 0 4px 0 #000; }
.boss-banner span { font: 700 18px 'Segoe UI'; opacity: .9; }
.boss-banner.rage { border-width: 4px; background: linear-gradient(#3a0a14ee, #12040aee); }
.boss-banner.rage b { color: #ffd0d0; }
.boss-rule { margin-top: 6px; padding: 5px 8px; border-radius: 8px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.intro-boss { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 16px; border-left: 4px solid var(--c);
  background: color-mix(in srgb, var(--c) 18%, #0008); }

/* ================= Story stars ================= */
.result-stars i { font-style: normal; color: #ffffff55; text-shadow: 0 2px 2px #000; display: inline-block; }
.result-stars i.on { color: #ffd84a; text-shadow: 0 0 8px #ffb400, 0 2px 2px #000; }
.intro-stars { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 10px; font-size: 15px; }
.intro-stars span { opacity: .75; }
.intro-stars span.on { opacity: 1; color: #ffd84a; }
.intro-stars em { font-size: 13px; opacity: .6; }
.result-stars { font-size: 46px; letter-spacing: 8px; margin: 2px 0 0; line-height: 1.1; }

/* ================= arena ================= */
#screen-arena { padding-top: 22px; }
#screen-arena h1 { margin-bottom: 10px; }
#arena-body { width: 1440px; flex: 1; display: flex; gap: 24px; justify-content: center; align-items: flex-start; min-height: 0; }
#arena-body.stage-none, #arena-body.stage-leader { flex-direction: column; align-items: center; }
/* the two modes, as a segmented switch */
#arena-tabs { display: flex; gap: 6px; padding: 5px; margin: 0 0 16px; border-radius: 20px; background: rgba(14,10,34,.72); border: 1px solid #ffffff22;
  backdrop-filter: blur(8px); box-shadow: 0 10px 30px #0006; }
#arena-tabs button { display: flex; align-items: center; gap: 12px; min-width: 270px; padding: 7px 22px 7px 8px; border: 0; border-radius: 15px; cursor: pointer;
  color: #fff; text-align: left; background: transparent; opacity: .6; transition: opacity .15s, background .2s, box-shadow .2s; }
#arena-tabs button:hover { opacity: .9; background: #ffffff0b; }
#arena-tabs i { width: 44px; height: 44px; display: grid; place-items: center; flex: none; font-style: normal; font-size: 24px; border-radius: 12px; background: #ffffff12; }
#arena-tabs b { display: block; font: 900 19px/1.15 'Segoe UI'; }
#arena-tabs small { display: block; font: 600 12px 'Segoe UI'; opacity: .75; }
#arena-tabs button.on { opacity: 1; background: linear-gradient(135deg, #ff6fae38, #b35cff30); box-shadow: inset 0 0 0 2px #ff6fae, 0 0 24px #ff6fae44; }
#arena-tabs button.on i { background: linear-gradient(#ff6fae, #d8337e); box-shadow: 0 0 14px #ff6fae; }
#arena-tabs button.on b { color: #ffe680; }

/* panels */
.ar-hero, .ar-side, .ar-record, .ar-vs, .ar-done { border-radius: 20px; border: 1px solid #ffffff26; backdrop-filter: blur(6px);
  background: linear-gradient(160deg, rgba(38,27,86,.9), rgba(12,8,30,.93)); box-shadow: 0 20px 50px #0008, inset 0 1px 0 #ffffff1a; }
.ar-hero { position: relative; width: 1000px; padding: 20px 30px 24px; overflow: hidden; }
.ar-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ff6fae, #b35cff, #8ff0ff); }
.ar-hero-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ar-hero-title small, .ar-label, .ar-leader small, .ar-done > small { display: block; font: 800 12px 'Segoe UI'; letter-spacing: 3px; text-transform: uppercase; color: #ff9cc9; }
.ar-hero-title b { display: block; font: 900 40px/1.1 'Segoe UI'; text-shadow: 0 3px 0 #000, 0 0 20px #c58cff88; }
.ar-stats { display: flex; gap: 10px; }
.ar-stats div { min-width: 86px; padding: 8px 14px; border-radius: 14px; text-align: center; background: #0006; border: 1px solid #ffffff1f; }
.ar-stats b { display: block; font: 900 26px/1.1 'Segoe UI'; color: #ffe680; }
.ar-stats span { font: 800 11px 'Segoe UI'; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; }
.ar-stats .hot { border-color: #ff9a5588; box-shadow: 0 0 16px #ff6a0044; }
.ar-stats .hot b { color: #ffb070; }
.ar-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.ar-steps div { position: relative; min-height: 78px; padding: 13px 16px 13px 64px; border-radius: 14px; background: #ffffff0b; border: 1px solid #ffffff1a; }
.ar-steps i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border-radius: 50%; font: normal 900 18px/36px 'Segoe UI'; text-align: center;
  background: linear-gradient(#ff6fae, #d8337e); box-shadow: 0 0 12px #ff6fae88; }
.ar-steps b { display: block; font: 900 18px 'Segoe UI'; }
.ar-steps span { font-size: 14px; opacity: .85; }
.ar-steps em { font-style: normal; font-weight: 800; color: #ffe680; }
.ar-label { color: #fff; opacity: .6; }
.ar-go { margin-top: 22px; font-size: 26px; padding: 14px 46px; }

/* the reward track: a node per win, packs above the wins that add one */
.ar-ladder { --pt: 58px; position: relative; display: grid; grid-template-columns: repeat(8, 1fr); padding-top: var(--pt); }
.al-track { position: absolute; left: 6.25%; right: 6.25%; top: calc(var(--pt) + 16px); height: 5px; border-radius: 3px; background: #ffffff1c; }
.al-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffe680, #ff6fae); box-shadow: 0 0 12px #ff6fae; }
.al-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.al-pack { position: absolute; bottom: 100%; margin-bottom: 4px; display: flex; }
.al-pack img { height: 52px; filter: drop-shadow(0 0 8px var(--pc)) drop-shadow(0 3px 3px #000a); }
.al-node i { position: relative; width: 36px; height: 36px; border-radius: 50%; font: normal 900 16px/32px 'Segoe UI'; text-align: center; color: #ffffffaa;
  background: #1a1438; border: 2px solid #ffffff33; }
.al-node.prize i { border-color: #ffc93caa; color: #ffe680; }
.al-node.on i { color: #3a2400; background: linear-gradient(#fff3a0, #ffb020); border-color: #fff; box-shadow: 0 0 14px #ffc93c; }
.al-node.next i { color: #fff; border-color: #ff6fae; animation: alnext .8s ease-in-out infinite alternate; }
@keyframes alnext { from { box-shadow: 0 0 0 3px #ff6fae33; } to { box-shadow: 0 0 0 7px #ff6fae22, 0 0 18px #ff6fae; } }
.al-node span { font: 800 13px 'Segoe UI'; }

/* Deathpick's three steps */
.ar-stepper { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 5px 16px 5px 6px; border-radius: 999px; background: rgba(14,10,34,.78); border: 1px solid #ffffff1a; font: 800 13px 'Segoe UI'; letter-spacing: 1.5px; text-transform: uppercase; }
.ar-stepper span { display: flex; align-items: center; gap: 8px; opacity: .5; }
.ar-stepper i { width: 26px; height: 26px; border-radius: 50%; font: normal 900 13px/22px 'Segoe UI'; text-align: center; border: 2px solid #ffffff66; }
.ar-stepper span.on { opacity: 1; color: #ffe680; }
.ar-stepper span.on i { color: #fff; border-color: #fff; background: linear-gradient(#ff6fae, #d8337e); box-shadow: 0 0 12px #ff6fae; }
.ar-stepper span.past { opacity: .85; }
.ar-stepper span.past i { color: #6fff9a; border-color: #6fff9a; background: #6fff9a22; }
.ar-stepper b { width: 40px; height: 2px; background: #ffffff33; }
.ar-step { font: 900 30px 'Segoe UI'; margin: 0 0 16px; text-shadow: 0 3px 0 #000; }

/* choosing a leader */
.ar-leaders { display: flex; gap: 30px; perspective: 1000px; }
.ar-lead { position: relative; width: 300px; height: 500px; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; border-radius: 22px;
  border: 2px solid #ffffff26; box-shadow: 0 20px 50px #0009;
  background: radial-gradient(ellipse at 50% 40%, #ff6fae38, transparent 62%), linear-gradient(170deg, #2e2264, #110c2a);
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.ar-lead:hover { transform: translateY(-10px); border-color: #ff6fae; box-shadow: 0 0 0 1px #ff6fae, 0 0 40px #ff6fae66, 0 26px 50px #000a; }
.al-art { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.al-art::after { content: ''; position: absolute; bottom: 4px; width: 70%; height: 26px; border-radius: 50%; background: radial-gradient(#000a, transparent 70%); }
.al-art img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 14px #000a); transition: transform .25s; transform-origin: bottom; }
.ar-lead:hover .al-art img { transform: scale(1.05); }
.al-info { padding: 12px 18px 18px; text-align: center; background: linear-gradient(#0000, #0009 30%); }
.ar-lead .lt-name { font: 900 26px 'Segoe UI'; text-shadow: 0 2px 0 #000; }
.ar-novel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 800 11px 'Segoe UI'; letter-spacing: 1.5px; text-transform: uppercase; color: #ff9cc9; }
.ar-power { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; text-align: left; border-radius: 12px; background: #ffffff0d; border: 1px solid #ffffff1a; }
.ar-power > b { width: 30px; height: 30px; flex: none; border-radius: 50%; font: 900 15px/30px 'Segoe UI'; text-align: center; color: #3a2400;
  background: radial-gradient(circle at 35% 30%, #fff3a0, #ffb020); box-shadow: 0 0 10px #ffc93c88; }
.ar-power span { font-size: 13px; line-height: 1.35; opacity: .92; }
.ar-power em { display: block; font: normal 900 14px 'Segoe UI'; color: #ffe680; }

/* the side panel: leader and deck */
.ar-main { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ar-side { width: 320px; flex: none; display: flex; flex-direction: column; gap: 10px; max-height: 700px; padding: 14px; overflow: hidden; }
.ar-leader { display: flex; gap: 12px; align-items: flex-end; margin: -14px -14px 0; padding: 12px 14px 10px; border-bottom: 1px solid #ffffff14;
  background: radial-gradient(ellipse at 18% 100%, #ff6fae40, transparent 70%); }
.ar-leader > div { min-width: 0; }
.ar-leader img { width: 84px; height: 108px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 4px 6px #000a); }
.ar-leader .lt-name { font: 900 22px 'Segoe UI'; }
.ar-side .ar-power { margin-top: 0; }
.ad-head { font: 800 13px 'Segoe UI'; letter-spacing: 1.5px; text-transform: uppercase; opacity: .9; }
.ad-head b { color: #ffe680; font-size: 16px; letter-spacing: 0; }
.ad-curve { height: 74px; flex: none; display: flex; align-items: flex-end; gap: 5px; padding: 6px 8px 4px; border-radius: 10px; background: #0005; }
.ad-curve div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ad-curve em { font: normal 800 10px/12px 'Segoe UI'; color: #ffe680; min-height: 12px; }
.ad-curve i { width: 100%; background: linear-gradient(#ffe680, #ff6fae); border-radius: 3px 3px 0 0; min-height: 2px; }
.ad-curve span { font: 800 10px 'Segoe UI'; opacity: .7; }
.ad-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.ad-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: 9px; font-size: 13px; flex: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 20%, transparent), #ffffff08 60%); border-left: 3px solid var(--rc); }
.ad-row b { width: 20px; height: 20px; border-radius: 50%; background: #ffc93c; color: #3a2400; font: 900 12px/20px 'Segoe UI'; text-align: center; flex: none; }
.ad-row span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-row i { font-style: normal; font-weight: 900; color: #ffe680; }

/* drafting */
.ar-draft-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ar-draft-head .ar-step { margin: 0; }
.ar-step em { margin-left: 10px; padding: 3px 12px; vertical-align: 5px; border-radius: 999px; font: normal 900 14px 'Segoe UI'; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c); border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 15%, #0009); text-shadow: none; }
.ar-progress { display: flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 999px; background: #0008; border: 1px solid #ffffff1a; }
.ar-progress div { display: flex; gap: 4px; }
.ar-progress i { width: 20px; height: 8px; border-radius: 4px; background: #ffffff22; }
.ar-progress i.on { background: linear-gradient(90deg, #ffe680, #ff6fae); }
.ar-progress i.now { background: #ff6fae; animation: alnow .6s ease-in-out infinite alternate; }
@keyframes alnow { to { background: #fff; box-shadow: 0 0 8px #ff6fae; } }
.ar-progress span { font: 800 15px 'Segoe UI'; opacity: .9; }
.ar-progress b { font-size: 19px; color: #ffe680; }
.ar-offer { display: flex; gap: 44px; justify-content: center; margin: 44px 0 10px; }
.ar-card { position: relative; }
.ar-card .card { zoom: 1.55; cursor: pointer; transition: transform .15s; }
.ar-card .card:hover { transform: translateY(-8px); box-shadow: 0 0 0 3px #ffe680, 0 0 26px #ffc93c; }
.ar-tag { position: absolute; left: 50%; top: -34px; translate: -50% 0; white-space: nowrap; padding: 3px 12px; border-radius: 999px; font: 800 12px 'Segoe UI';
  background: linear-gradient(#ff6fae, #d8337e); border: 1px solid #ffffff88; box-shadow: 0 0 12px #ff6fae88; }
.ar-tip { margin-top: 18px; }

/* the run: reward track and lives, then the next rival */
.ar-record { display: flex; gap: 22px; width: 880px; padding: 10px 22px 14px; margin-bottom: 14px; }
.ar-record .ar-ladder { --pt: 46px; flex: 1; }
.ar-record .al-pack img { height: 42px; }
.ar-lives { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding-left: 22px; border-left: 1px solid #ffffff1a; }
.ar-lives small { font: 800 11px 'Segoe UI'; letter-spacing: 2px; text-transform: uppercase; opacity: .7; }
.ar-lives div { display: flex; gap: 4px; }
.ar-lives i { font: normal 34px/1 'Segoe UI'; color: #ff4a6a; text-shadow: 0 0 10px #ff0030, 0 2px 2px #000; }
.ar-lives i.lost { color: #ffffff22; text-shadow: none; }
.ar-vs { position: relative; width: 880px; height: 410px; display: grid; grid-template-columns: 1fr 130px 1fr; padding: 0 20px; overflow: hidden;
  background: linear-gradient(100deg, #4aa3ff2a, transparent 42%, transparent 58%, #ff4a6a36), linear-gradient(160deg, rgba(38,27,86,.9), rgba(12,8,30,.93)); }
.vs-side { position: relative; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 16px; }
.vs-side img { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 14px #000a); }
.vs-side b { font: 900 26px 'Segoe UI'; text-shadow: 0 2px 0 #000; }
.vs-side > span { font: 800 11px 'Segoe UI'; letter-spacing: 1.5px; text-transform: uppercase; color: #ff9cc9; }
.vs-side.you > span { color: #8ff0ff; }
.vs-side.you img { opacity: .92; }
.vs-stats { display: flex; gap: 8px; margin-top: 8px; }
.vs-stats em { font: normal 800 14px 'Segoe UI'; padding: 3px 12px; border-radius: 999px; background: #0009; border: 1px solid #ffffff22; }
.vs-threat i { font-style: normal; font-size: 12px; filter: grayscale(1); opacity: .3; }
.vs-threat i.on { filter: none; opacity: 1; }
.vs-mid { align-self: center; text-align: center; }
.vs-mid small { display: block; font: 800 12px 'Segoe UI'; letter-spacing: 3px; text-transform: uppercase; opacity: .7; }
.vs-mid b { display: inline-block; font: italic 900 72px/1 'Segoe UI Black', 'Arial Black', sans-serif; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(#fff 20%, #ffe680 50%, #ff6fae 85%); filter: drop-shadow(0 4px 0 #5a0f3a) drop-shadow(0 0 18px #ff4f9a); padding: 0 6px; }
.ar-btns { margin-top: 16px; gap: 14px; align-items: center; }
.ar-fight { font-size: 26px; padding: 14px 60px; }
.ar-retire { display: flex; flex-direction: column; align-items: center; padding: 7px 22px; line-height: 1.15; }
.ar-retire small { font: 700 12px 'Segoe UI'; opacity: .75; }
.ar-done { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 880px; padding: 22px 40px 26px; border-color: #ffc93c88;
  background: radial-gradient(ellipse at 50% 0, #ffc93c30, transparent 60%), linear-gradient(160deg, rgba(38,27,86,.9), rgba(12,8,30,.93)); }
.ar-done.perfect { box-shadow: 0 0 50px #ffc93c55, 0 20px 50px #0008; }
.ar-done > small { color: #ffe680; }
.ar-done b { font: 900 38px 'Segoe UI'; text-shadow: 0 3px 0 #000; }
.ar-done > span { font-size: 18px; opacity: .85; }
.ar-done .ar-go { margin-top: 0; }
.ar-rewards { display: flex; gap: 14px; justify-content: center; margin-top: 12px; }
.ar-reward { --pc: #ffc93c; width: 124px; height: 136px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px;
  background: #0006; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); box-shadow: inset 0 0 24px color-mix(in srgb, var(--pc) 22%, transparent); }
.ar-reward img { height: 80px; filter: drop-shadow(0 0 10px var(--pc)); }
.ar-reward b.glit { font-size: 40px; line-height: 1; }
.ar-reward span.glit { font: 900 24px 'Segoe UI'; }
.ar-reward small { font: 800 13px 'Segoe UI'; }
.arena-wl { color: #ffe680; }

/* Casual PvP */
.pvp-main .ar-hero { width: 100%; max-width: 1000px; }
.pvp-lead { margin: 0 0 14px; font-size: 17px; opacity: .9; }
.pvp-pay { display: flex; gap: 20px; align-items: stretch; }
.pvp-pay .ar-rewards { margin: 0; }
.pvp-pay .ar-reward { width: 96px; height: 92px; }
.pvp-pay .ar-reward b.glit { font-size: 28px; }
.pvp-pay .ar-reward.wide { width: 200px; flex-direction: row; gap: 10px; }
.pvp-pay .ar-reward.wide img { height: 62px; }
.pvp-pay .ar-reward.wide small { font-size: 12px; line-height: 1.3; opacity: .9; }
.ar-reward.done { opacity: .45; }
.ar-reward.done small::after { content: ' ✔'; color: #6fff9a; }
.pvp-daily { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 12px 16px; border-radius: 14px; background: #ffffff0b; border: 1px solid #ffffff1a; }
.pvp-daily span { font: 700 15px 'Segoe UI'; }
.pvp-daily b { color: #ffe680; }
.pvp-daily small { font-size: 13px; opacity: .7; }
.ar-meter { height: 10px; border-radius: 5px; background: #0008; overflow: hidden; }
.ar-meter i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #ffe680, #ff6fae); }
.pvp-local { margin: 14px 0 0; font-size: 15px; color: #9fe6ff; }
.pvp-play { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.pvp-status { min-height: 30px; font: 700 20px 'Segoe UI'; text-align: center; }
.pvp-status.error { color: #ff8a9a; }
.pvp-status.search::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 10px; border-radius: 50%; border: 3px solid #ff6fae;
  border-top-color: transparent; vertical-align: -2px; animation: pvpspin .8s linear infinite; }
@keyframes pvpspin { to { transform: rotate(360deg); } }
.pvp-code { display: inline-block; font: 900 34px 'Consolas', monospace; letter-spacing: 8px; color: #ffe680; padding: 0 10px; border-radius: 10px; background: #0008; vertical-align: -4px; user-select: all; }
.pvp-btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pvp-quick { font-size: 26px; padding: 14px 64px; }
.pvp-or { display: flex; align-items: center; gap: 12px; width: 480px; font: 800 12px 'Segoe UI'; letter-spacing: 2px; text-transform: uppercase; opacity: .65; }
.pvp-or::before, .pvp-or::after { content: ''; flex: 1; height: 1px; background: #ffffff55; }
.pvp-friend, .pvp-join { display: flex; gap: 10px; align-items: center; }
.pvp-friend { gap: 18px; }
.pvp-btns .btn:disabled, .pvp-side .btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; transform: none; }
.pvp-code-in { width: 120px; height: 50px; text-align: center; text-transform: uppercase; font: 900 24px 'Consolas', monospace; letter-spacing: 5px; border-radius: 14px;
  border: 2px solid #ffffff44; background: #1a1438; color: #ffe680; }
.pvp-code-in:focus { outline: none; border-color: #ff6fae; box-shadow: 0 0 14px #ff6fae66; }
.pvp-side .btn.small { font-size: 15px; padding: 8px 14px; border-radius: 10px; box-shadow: 0 3px 0 #120c33; flex: none; }
.pvp-deck { display: flex; flex-direction: column; gap: 4px; font: 800 12px 'Segoe UI'; letter-spacing: 1.5px; text-transform: uppercase; opacity: .9; flex: none; }
.pvp-deck select { height: 38px; padding: 0 10px; border-radius: 10px; border: 2px solid #ffffff22; background: #1a1438; color: #fff; font: 600 15px 'Segoe UI'; letter-spacing: 0; text-transform: none; }
.pvp-warn { margin: 0; color: #ff8a9a; font-size: 14px; }
/* the turn clock in a PvP battle */
#pvp-timer { position: absolute; right: 24px; top: 356px; width: 170px; text-align: center; font: 900 18px 'Segoe UI'; padding: 4px 0; border-radius: 12px;
  background: #1d1440cc; border: 2px solid #ffffff33; color: #ddd; }
#pvp-timer.mine { color: #ffe680; border-color: #ffc93c88; }
#pvp-timer.low { color: #ff5a6e; border-color: #ff5a6e; animation: endpulse .6s infinite alternate; }

/* ================= card levels ================= */
/* the level badge sits on the art's bottom-left corner; MAX glows gold */
.card-lv { position: absolute; top: 88px; left: 8px; z-index: 2; padding: 1px 7px; border-radius: 8px; font: 900 11px/16px 'Segoe UI'; letter-spacing: .5px;
  color: #fff; background: linear-gradient(#5b8cff, #2b4fc4); border: 1.5px solid #fff; box-shadow: 0 2px 4px #000a; }
.card-lv.max { color: #3a2400; background: linear-gradient(#fff3a0, #ffb020); box-shadow: 0 0 10px #ffc93c, 0 2px 4px #000a; }
/* collection: fragments banked toward the next level, and a pulse once there are enough */
.lv-bank { position: absolute; right: 8px; top: 88px; z-index: 2; white-space: nowrap; padding: 1px 8px; border-radius: 8px;
  font: 800 11px/16px 'Segoe UI'; background: #000b; border: 1px solid #ffffff44; }
.lv-bank.ready { color: #1a2e00; background: linear-gradient(#b8ff7a, #4ccf3a); border-color: #fff; box-shadow: 0 0 10px #7dff9a; animation: badge 1s ease-in-out infinite alternate; }
#coll-progress .ccollect.lvup b { color: #9dff9d; }
/* close-up: level, pips, fragments toward the next level */
.cm-level { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #ffffff0d; border: 1px solid #ffffff22; }
.cm-lvhead { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cm-lvhead > b { font: 900 18px 'Segoe UI'; color: #9cc0ff; }
.cm-level.max .cm-lvhead > b { color: #ffe27a; text-shadow: 0 0 10px #ffb020; }
.cm-pips { display: flex; gap: 4px; }
.cm-pips i { width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: #ffffff22; }
.cm-pips i.on { background: linear-gradient(135deg, #fff, #5b8cff); box-shadow: 0 0 6px #5b8cff; }
.cm-level.max .cm-pips i.on { background: linear-gradient(135deg, #fff, #ffc93c); box-shadow: 0 0 6px #ffc93c; }
.cm-lvnext { font-size: 13px; opacity: .9; margin-left: auto; }
.cm-lvnext b { color: #9dff9d; }
.cm-level.max .cm-lvnext { margin-left: 0; color: #ffe27a; }
.cm-lvbar { display: flex; align-items: center; gap: 10px; font: 800 13px 'Segoe UI'; }
.cm-lvbar .cm-shardbar { flex: 1; margin: 0; }
.cm-glitter button.lvup { color: #06210e; background: linear-gradient(#b8ff7a, #22b04a); box-shadow: 0 3px 0 #0d5a22; }
.rv-haul-tag.up { border-color: #5b8cff; }

/* ================= shop ================= */
#shop-bank { font-size: 24px; margin: -10px 0 10px; padding: 4px 22px; border-radius: 14px; background: rgba(14,10,34,.85); border: 2px solid #ffc93c66;
  box-shadow: 0 0 20px #ffc93c33; }
#shop-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
#shop-tabs button { font: 900 19px 'Segoe UI'; color: #fff; opacity: .6; padding: 8px 18px; border-radius: 12px; cursor: pointer; background: #ffffff0d; border: 2px solid transparent; }
#shop-tabs button:hover { opacity: .9; }
#shop-tabs button.on { opacity: 1; color: #ffe680; border-color: #ff6fae; background: linear-gradient(#3d2d78, #22185a); }
#shop-body { display: flex; gap: 30px; align-items: flex-start; min-height: 0; }
#shop-body.tab-cards { flex-direction: column; align-items: center; gap: 10px; flex: 1; }
.shop-deals { display: grid; grid-template-columns: repeat(3, 180px); gap: 18px 22px; }
.shop-deal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 16px;
  background: linear-gradient(rgba(44,36,86,.95), rgba(18,14,44,.95)); border: 2px solid #ffffff22; box-shadow: 0 8px 18px #0008; }
.shop-deal .card, .shop-card .card { zoom: .72; cursor: pointer; }
.shop-deal.sold { opacity: .5; }
.sd-info { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding: 0 4px; }
.sd-n { font: 900 16px 'Segoe UI'; color: #ffb86b; white-space: nowrap; }
.sd-st { font-size: 12px; opacity: .9; text-align: right; line-height: 1.2; }
.sd-st .lv { color: #9cc0ff; }
.sd-st .ok { color: #9dff9d; }
.sd-buy { padding: 5px 12px; font-size: 16px; width: 100%; }
.sd-buy s { opacity: .55; font-size: 13px; margin-right: 4px; }
.shop-deal .btn:disabled, .shop-pack .btn:disabled, .shop-card .btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; transform: none; }
.shop-packs { display: flex; flex-direction: column; gap: 14px; width: 440px; }
.shop-packs::before { content: '🎁 Packs · opened right away'; font: 900 18px 'Segoe UI'; opacity: .85; }
.shop-pack { --rc: #c9d1dc; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(44,36,86,.95), rgba(18,14,44,.95)); border: 2px solid color-mix(in srgb, var(--rc) 50%, transparent); box-shadow: 0 8px 18px #0008; }
.sp-art { width: 70px; height: 112px; object-fit: contain; filter: drop-shadow(0 0 10px var(--rc)); }
.shop-pack b { font: 900 19px 'Segoe UI'; }
.sp-slots { font-size: 12.5px; line-height: 1.4; opacity: .9; margin-top: 2px; }
.sp-buy { padding: 8px 16px; font-size: 18px; color: #3a2400; background: linear-gradient(#ffe27a, #ffb020); box-shadow: 0 4px 0 #8a5a00; border: 0; }
.shop-tools { display: flex; gap: 10px; }
.shop-tools input, .shop-tools select { height: 38px; padding: 0 12px; border-radius: 12px; border: 2px solid #ffffff22; background: #1a1438; color: #fff; font: 600 15px 'Segoe UI'; }
.shop-tools input { width: 320px; }
.shop-cards { width: 1300px; height: 560px; display: grid; align-content: start; grid-template-columns: repeat(7, 160px); gap: 16px 22px; padding: 6px 10px; }
.shop-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; background: rgba(14,10,34,.8); border: 2px solid #ffffff18; }
.shop-card .sd-st { text-align: center; }
.sc-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sc-btns .btn { padding: 3px 8px; font-size: 12px; border-radius: 10px; }
.sc-buy { color: #3a2400; background: linear-gradient(#ffe27a, #ffb020); border: 0; box-shadow: 0 2px 0 #8a5a00; }
.sc-lv { background: linear-gradient(#b8ff7a, #22b04a) !important; color: #06210e; box-shadow: 0 2px 0 #0d5a22 !important; }
#shop-foot { max-width: 1100px; text-align: center; margin-top: 12px; }
/* attack styles: Academia Magicka, Cyber Delivery, Elina, Makin' Magic with Miku */
.friend-count { padding: 4px 16px; border-radius: 10px; text-align: center; background: #fff; color: #2a2a3a;
  border: 4px solid var(--c); box-shadow: 0 0 14px var(--c), 0 6px 10px #0008; }
.friend-count b { display: block; font: 900 13px 'Segoe UI', sans-serif; letter-spacing: 3px; }
.friend-count em { font: 900 40px 'Segoe UI', sans-serif; font-style: normal; }
.friend-count.denied { border-color: #e8283c; box-shadow: 0 0 22px #e8283c; }
.friend-count.denied em { color: #e8283c; }
.thrown.god-hand { font-size: 220px; filter: sepia(.5) brightness(1.3) drop-shadow(0 0 18px #fff6c8) drop-shadow(0 0 40px var(--c)); }
.thrown.polearm { font-size: 60px; filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 4px 4px #0008); }
.chalkboard.quiz { font-size: 26px; line-height: 1.25; color: #fff; text-align: center; }
.mb-comment { padding: 8px 14px; border-radius: 14px 14px 14px 4px; font: 700 20px 'Segoe UI', sans-serif; color: #fff;
  background: #2a2440; border: 2px solid #7a6aa8; box-shadow: 0 6px 10px #0008; }
.mb-comment b { color: #b48cff; margin-right: 8px; }
.mb-review { width: 230px; padding: 8px 12px; border-radius: 12px; text-align: center; color: #fff;
  background: linear-gradient(#3a2a6a, #1a1438); border: 4px solid var(--c); box-shadow: 0 0 18px var(--c), 0 8px 12px #0008; }
.mb-review small { display: block; font: 900 12px 'Segoe UI', sans-serif; letter-spacing: 4px; opacity: .8; }
.mb-review em { font: 900 38px 'Segoe UI Symbol', 'Segoe UI', sans-serif; font-style: normal; color: #ffd84a; letter-spacing: 2px; }
.delivery-timer { padding: 4px 12px; border-radius: 8px; font: 900 32px Consolas, monospace; color: #ff5d4a; background: #111;
  border: 3px solid var(--c); box-shadow: 0 0 14px var(--c); }
.lock-brackets { width: 170px; height: 170px; }
.lock-brackets i { position: absolute; width: 36px; height: 36px; border: 6px solid var(--c); filter: drop-shadow(0 0 6px var(--c)); }
.lock-brackets i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.lock-brackets i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.lock-brackets i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.lock-brackets i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.lock-brackets b { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); font: 900 16px Consolas, monospace;
  letter-spacing: 3px; color: var(--c); text-shadow: 0 0 8px var(--c); }
.helix svg { display: block; overflow: visible; filter: drop-shadow(0 0 8px #7dffb0); }
.float-text.kanji { color: #ff2a4a; font-size: 110px; -webkit-text-stroke: 0; text-shadow: 0 0 12px #ff2a4a, 0 0 30px #ff2a4a, 5px 0 0 #2af0ff; }
.moth-wings { font-size: 260px; filter: saturate(0) brightness(1.8) drop-shadow(0 0 20px var(--c)); }
.cutting-board { width: 200px; height: 90px; border-radius: 14px; background: linear-gradient(#c89a5a, #a8763a);
  box-shadow: 0 8px 12px #0007, inset 0 0 0 5px #8a5a2a; }
.lift-cable { width: 760px; height: 5px; border-radius: 3px; background: linear-gradient(#555, #111); box-shadow: 0 0 6px #fff8; }
.fx-playcard { width: 64px; height: 90px; border-radius: 8px; background: #fff; border: 3px solid #222; box-shadow: 0 6px 10px #0008;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font: 900 26px 'Segoe UI Symbol', 'Segoe UI', sans-serif; color: #111; }
.fx-playcard i { font-style: normal; font-size: 34px; line-height: 1; }
.ring-ropes { width: 240px; height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
.ring-ropes i { display: block; height: 7px; border-radius: 4px; background: var(--c); box-shadow: 0 0 8px var(--c), 0 3px 0 #0006; }
.fx-purikura { width: 200px; border: 10px solid var(--c); border-radius: 18px; background: #ffffff14; box-shadow: 0 0 18px var(--c), inset 0 0 18px var(--c); }
.fx-purikura b { position: absolute; left: 50%; bottom: -8px; transform: translate(-50%, 100%); padding: 2px 10px; border-radius: 8px;
  background: var(--c); color: #fff; font: 900 18px 'Segoe UI', sans-serif; white-space: nowrap; }
.fx-judge { width: 210px; height: 6px; border-radius: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.fx-note { width: 42px; height: 42px; border-radius: 10px; line-height: 42px; text-align: center; color: #fff; background: var(--c);
  box-shadow: 0 0 12px var(--c); font: 900 32px 'Segoe UI Symbol', 'Segoe UI', sans-serif; }
.cocoon { width: 130px; height: 230px; border-radius: 50% 50% 46% 46%; box-shadow: 0 0 20px #fff8, inset -10px -10px 20px #0003;
  background: repeating-linear-gradient(35deg, #fffaf0 0 6px, #efe6d8 6px 12px); }
.fx-vn-box { width: 320px; padding: 22px 16px 12px; border-radius: 12px; white-space: normal; color: #fff; font: 600 18px 'Segoe UI', sans-serif;
  background: #151028e8; border: 3px solid #b48cff; box-shadow: 0 0 16px #b48cff88, 0 8px 12px #0008; }
.fx-vn-box b { position: absolute; left: 12px; top: -16px; padding: 2px 12px; border-radius: 8px; background: #b48cff; color: #1a1030; font: 900 16px 'Segoe UI', sans-serif; }
.fx-vn-box span.struck { text-decoration: line-through 4px #e8283c; color: #ffb0b8; }
.mb-console { padding: 6px 12px; border-radius: 6px; font: 700 20px Consolas, monospace; color: #5dff8a; background: #000d;
  border: 2px solid #5dff8a; box-shadow: 0 0 12px #5dff8a88; }

/* the practice battle's coaching (js/tutorial.js): a speech bubble at the top, and a ring around what it's about.
   .block dims the screen and waits for a click; .tip lets you play while it's up */
#coach { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
#coach.block { z-index: 200; pointer-events: auto; cursor: pointer; background: radial-gradient(ellipse at 50% 40%, #0b081644, #0b0816bb); }
#coach .co-bubble { position: absolute; left: 50%; top: 74px; width: 700px; margin-left: -350px; display: flex; align-items: center; gap: 16px;
  padding: 14px 20px 12px 14px; border-radius: 22px; background: rgba(14,10,34,.94); border: 3px solid var(--cc); box-shadow: 0 10px 30px #000a, 0 0 24px var(--cc); }
#coach.ally { --cc: #6bb6ff; }
#coach.rival { --cc: #ff8fb1; }
#coach.rival .co-bubble { flex-direction: row-reverse; padding: 14px 14px 12px 20px; }
#coach .co-face { width: 104px; height: 104px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 6%; background: #ffffff14; border: 3px solid var(--cc); }
#coach .co-say { flex: 1; min-width: 0; }
#coach .co-name { font: 900 20px 'Segoe UI'; color: var(--cc); margin-bottom: 4px; }
#coach .co-text { font-size: 19px; line-height: 1.4; }
#coach .co-text b { color: #ffd84a; }
#coach .co-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; }
#coach .co-go { flex: 1; opacity: .7; animation: coachGo 1s infinite alternate; }
#coach .co-skip { pointer-events: auto; cursor: pointer; background: none; border: 1px solid #ffffff44; border-radius: 10px; color: #fff; opacity: .6; padding: 3px 10px; font-size: 12px; }
#coach .co-skip:hover { opacity: 1; }
@keyframes coachGo { to { opacity: .3; } }
#coach-ring { position: absolute; z-index: 201; pointer-events: none; border: 4px solid #ffd84a; border-radius: 22px; box-shadow: 0 0 0 4px #ffd84a44, 0 0 30px #ffd84a; }

/* ================= Credits (js/credits.js) ================= */
#btn-credits { position: absolute; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 8px; padding: 9px 20px 9px 14px; border-radius: 30px;
  font: 800 17px 'Segoe UI'; letter-spacing: 1px; color: #fff; cursor: pointer; z-index: 5;
  background: linear-gradient(100deg, rgba(216,51,126,.55), rgba(29,20,64,.85)); border: 2px solid #ff6fae88; box-shadow: 0 6px 18px #0008;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
#btn-credits i { font-style: normal; color: #ff6fae; font-size: 20px; text-shadow: 0 0 10px #ff6fae; animation: crBeat 1.6s ease-in-out infinite; }
#btn-credits:hover { transform: translateY(-2px); border-color: #ff6fae; box-shadow: 0 0 20px #ff6fae88, 0 8px 20px #0008; }
@keyframes crBeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(.95); } 45% { transform: scale(1.12); } }

#credits { position: absolute; inset: 0; z-index: 100; }
#credits .cr-backdrop { position: absolute; inset: -1500px; backdrop-filter: blur(8px) saturate(1.2);
  background: radial-gradient(circle 900px at 50% 50%, rgba(120,30,90,.35), rgba(8,5,20,.92) 70%) rgba(8,5,20,.9); }
.cr-panel { position: absolute; left: 140px; top: 34px; width: 1320px; height: 832px; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, rgba(40,22,78,.97), rgba(14,10,34,.98) 45%, rgba(24,10,40,.98));
  border: 2px solid #ff6fae66; box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 60px #ff6fae33, 0 24px 60px #000c; }
.cr-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 12% 0%, #ff6fae33, transparent 40%), radial-gradient(circle at 88% 0%, #b35cff33, transparent 40%),
    radial-gradient(circle, #ffffff14 1px, transparent 1.5px) 0 0 / 22px 22px; }
.cr-close { position: absolute; right: 18px; top: 16px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff4; background: #1d1440cc;
  color: #fff; font: 900 18px 'Segoe UI'; cursor: pointer; z-index: 2; transition: transform .15s, border-color .15s, box-shadow .15s; }
.cr-close:hover, .cr-close:focus-visible { border-color: #ff6fae; box-shadow: 0 0 14px #ff6fae88; transform: rotate(90deg); outline: none; }
.cr-head { position: relative; text-align: center; padding: 22px 80px 14px; flex: none; }
.cr-kicker { font: 900 13px 'Segoe UI'; letter-spacing: 5px; text-transform: uppercase; color: #ff9ccb; }
.cr-head h2 { margin: 2px 0 6px; font: 900 58px/1 'Segoe UI'; letter-spacing: 2px; color: transparent; background: linear-gradient(#fff 15%, #ffd0e8 50%, #ff6fae 90%);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 0 #3a0a2a) drop-shadow(0 0 22px #ff6fae88); }
.cr-head p { margin: 0 auto; max-width: 760px; font-size: 16px; line-height: 1.4; opacity: .85; }
#cr-count { display: inline-block; margin-top: 10px; padding: 4px 16px; border-radius: 20px; font: 800 13px 'Segoe UI'; letter-spacing: 1px;
  color: #ffe680; background: #0b0816aa; border: 1px solid #ffe68055; }

#cr-body { position: relative; flex: 1; padding: 8px 22px 24px 30px; }
#cr-grid { columns: 3; column-gap: 18px; }
.cr-card { --c: #ff6fae; break-inside: avoid; position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 70px 18px 16px;
  border-radius: 20px; background: linear-gradient(170deg, color-mix(in srgb, var(--c) 22%, #1a1236), #120c28 60%);
  border: 2px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 8px 22px #0007; transition: transform .2s, box-shadow .2s, border-color .2s; }
.cr-card:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 40%, transparent), 0 12px 26px #0008; }
.cr-faces { position: absolute; right: 12px; top: 8px; width: 150px; height: 64px; pointer-events: none; }
.cr-faces img { position: absolute; right: calc(54px - var(--i) * 24px); top: 4px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: top;
  background: #2c2456; color: transparent; font-size: 0; border: 2px solid var(--c); box-shadow: 0 4px 10px #0009; transform: rotate(calc(var(--i) * 6deg)); transition: transform .25s, right .25s; }
.cr-card:hover .cr-faces img { right: calc(54px - var(--i) * 28px); transform: rotate(calc(var(--i) * 10deg)) translateY(-3px); }
.cr-who { position: absolute; left: 16px; top: 12px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 180px); color: #fff; text-decoration: none; }
.cr-pic { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 3px solid var(--c);
  background: linear-gradient(135deg, var(--c), #2c2456); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent), 0 4px 10px #0009; }
.cr-pic i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 22px 'Segoe UI'; font-style: normal; text-shadow: 0 2px 0 #0006; }
.cr-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-name { min-width: 0; }
.cr-name b { display: block; font: 900 20px/1.15 'Segoe UI'; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 0 #000; }
.cr-name small { display: block; font-size: 12px; opacity: .7; white-space: nowrap; }
.cr-who:hover b { color: var(--c); }
.cr-tally { margin-top: 6px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .75; }
.cr-tally b { color: var(--c); font-size: 14px; }
.cr-novels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cr-novels a { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 700;
  background: #ffffff0d; border: 1px solid #ffffff14; transition: background .15s, border-color .15s, transform .15s; }
.cr-novels a span { flex: 1; min-width: 0; }
.cr-novels a em { flex: none; font: 800 11px 'Segoe UI'; font-style: normal; padding: 2px 8px; border-radius: 10px; color: #120c28; background: var(--c); }
.cr-novels a em::after { content: ' ✦'; }
.cr-novels a:hover { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); transform: translateX(3px); }
.cr-note { font-size: 12px; font-style: italic; color: var(--c); }
.cr-visit { align-self: flex-start; padding: 6px 14px; border-radius: 20px; font: 800 13px 'Segoe UI'; letter-spacing: .5px; text-decoration: none; color: #120c28;
  background: var(--c); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 45%, #000); transition: transform .15s, box-shadow .15s; }
.cr-visit span { display: inline-block; transition: transform .15s; }
.cr-visit:hover { transform: translateY(-1px); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 45%, #000), 0 0 16px var(--c); }
.cr-visit:hover span { transform: translate(2px, -2px); }

.cr-extra { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 6px; }
.cr-extra section { padding: 16px 20px; border-radius: 20px; background: #ffffff08; border: 1px solid #ffffff1c; }
.cr-extra h3 { margin: 0 0 8px; font: 900 18px 'Segoe UI'; letter-spacing: 1px; color: #ffe680; }
.cr-extra p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; opacity: .9; }
.cr-extra a { color: #ff9ccb; font-weight: 700; text-decoration: none; border-bottom: 1px dashed #ff9ccb88; }
.cr-extra a:hover { color: #fff; border-color: #fff; }
.cr-extra .cr-small { font-size: 12px; opacity: .65; }
#cr-sounds { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
#cr-sounds span { padding: 2px 8px; border-radius: 8px; font-size: 11px; background: #ffffff10; color: #ffffffcc; }

/* Drawn pose attacks (js/poses.js, fx.js "drawn pose attacks"): the actor is a crop of a 2x2 sheet, the props are small
   HTML/SVG billboards styled here. */
.pose-actor { background-repeat: no-repeat; filter: drop-shadow(0 10px 6px rgba(0,0,0,.35)); }
.cord-tag { font: 900 24px/1 'Segoe UI', sans-serif; letter-spacing: 1px; color: #3a1f4a; background: #f6efd9; border: 3px solid #6b2e8a;
  border-radius: 4px; padding: 7px 12px; box-shadow: 3px 4px 0 rgba(30,10,45,.55), 0 0 14px #9b4dff; }
.flat.chess-board { height: 150px; border: 5px solid #4a3a7a; border-radius: 6px; box-shadow: 0 0 22px var(--c);
  background: repeating-conic-gradient(rgba(40,30,70,.82) 0 25%, rgba(236,228,255,.85) 0 50%) 0 0 / 56px 56px; }
.chess-knight { font-size: 76px; line-height: 1; color: #2a2142; text-shadow: 0 0 6px #fff, 0 0 16px var(--c); filter: drop-shadow(0 0 10px var(--c)); }
.ida-holo { min-width: 190px; padding: 8px 14px 10px; border: 2px solid #5dffa0; border-radius: 8px; color: #b8ffd8; text-align: left;
  font: 700 17px/1.5 'Consolas', 'Courier New', monospace; background: rgba(8, 40, 24, .72); box-shadow: 0 0 18px #5dffa0, inset 0 0 14px rgba(93,255,160,.3); }
.ida-holo b { display: block; color: #fff; letter-spacing: 2px; border-bottom: 1px solid #5dffa0; margin-bottom: 3px; font-size: 15px; }
.ida-holo i { display: block; font-style: normal; padding: 0 6px; border-radius: 3px; }
.ida-holo i.sel { background: #5dffa0; color: #04230f; }
.ida-holo u { display: block; height: 9px; margin-top: 6px; border: 1px solid #5dffa0; text-decoration: none; }
.ida-holo u s { display: block; height: 100%; width: 0; background: #5dffa0; }
.ida-read { min-width: 150px; text-align: center; }
.ida-drone svg { display: block; overflow: visible; filter: drop-shadow(0 6px 5px rgba(0,0,0,.4)); }
.ida-scan { width: 190px; height: 8px; border-radius: 4px; background: #5dffa0; box-shadow: 0 0 18px 6px #5dffa0; }
.flat.lotus-floor svg, .thrown.lotus svg { display: block; overflow: visible; }
.flat.lotus-floor { filter: drop-shadow(0 0 16px #f5c242); }
.thrown.lotus { filter: drop-shadow(0 0 16px #f5c242); }
.flat.vine-strip svg, .vine-coil svg { display: block; overflow: visible; }
.vine-coil { filter: drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.eliza-reticle svg { display: block; overflow: visible; filter: drop-shadow(0 0 8px #4fe8ff); }
.eliza-read { padding: 7px 12px; border: 2px solid #4fe8ff; border-radius: 6px; background: rgba(5, 40, 56, .78); color: #c8f7ff; text-align: left;
  font: 700 17px/1.45 'Consolas', 'Courier New', monospace; box-shadow: 0 0 14px #4fe8ff; }
.eliza-read b { display: block; color: #fff; letter-spacing: 1px; }
.eliza-read i { display: block; font-style: normal; }
.hare-shadow { opacity: .6; filter: drop-shadow(0 0 22px #ff2a3a); pointer-events: none; }
.hare-shadow svg, .rabbit-bot svg, .bat-flock svg { display: block; overflow: visible; }
.rabbit-bot { filter: drop-shadow(0 5px 5px rgba(0,0,0,.45)); }
.bat-flock { filter: drop-shadow(0 0 8px var(--c)); }

/* drawn effects (fx.js "drawn effects"): SVG billboards and floor marks */
.dfx svg { display: block; overflow: visible; }
.dfx.track { opacity: .85; filter: drop-shadow(0 1px 0 #fff3); }
.dfx.speed-lines { filter: drop-shadow(0 0 4px var(--c)); opacity: .9; }
.dfx.impact-star { filter: drop-shadow(0 4px 6px #0008); }
.dfx.impact-star b, .dfx.kaboom b, .dfx.viewfinder b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg);
  font: 900 28px 'Segoe UI', sans-serif; color: #fff; -webkit-text-stroke: 2px #1a0a10; letter-spacing: 1px; white-space: nowrap; }
.dfx.kaboom b { font-size: 34px; color: #fff3a0; -webkit-text-stroke: 3px #3a1a10; }
.dfx.viewfinder b { left: 22%; top: 12%; transform: none; font-size: 16px; color: #ff3a3a; -webkit-text-stroke: 0; }
.dfx.chalkboard { background: #23402e; border: 7px solid #7a4a2a; border-radius: 6px; padding: 8px 16px; box-shadow: 0 8px 14px #0008, inset 0 0 18px #0006;
  font: 700 22px 'Segoe Print', 'Comic Sans MS', cursive; color: #f4f4ea; text-shadow: 0 0 2px #fffa; text-align: left; }
.dfx.chalkboard i { display: block; font-style: normal; line-height: 1.35; }
.dfx.sound-arc, .dfx.scent { filter: drop-shadow(0 0 5px var(--c)); }
.dfx.web-net { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px var(--c)); }
.dfx.wisp { filter: drop-shadow(0 0 10px #c8f4ff) drop-shadow(0 0 24px #7ad8ff); }
.dfx.splash-crown, .dfx.drop { filter: drop-shadow(0 3px 3px #0005); }
.flat.dfx.puddle { opacity: .9; }
.flat.dfx.paw-shadow { width: 170px; height: 110px; border-radius: 50%; background: radial-gradient(#000c, #0000 70%); }
.dfx.paw-drop { filter: drop-shadow(0 10px 8px #0008); }
.flat.dfx.paw-print { opacity: .7; }
.dfx.gem { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 20px var(--c)); }
.dfx.prism-seg { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(#fff 0 30%, var(--c) 60%, transparent 72%);
  box-shadow: 0 0 18px var(--c), 0 0 36px var(--c); }
.dfx.shard { filter: drop-shadow(0 0 6px #fff); }
.dfx.starburst { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px var(--c)); }
.dfx.kaboom { filter: drop-shadow(0 6px 8px #0007); }
.dfx.ofuda { filter: drop-shadow(0 3px 4px #0006); }
.flat.dfx.seal { filter: drop-shadow(0 0 8px #ff4a5a) drop-shadow(0 0 18px #ff4a5a); }
.flat.dfx.orbit-line { filter: drop-shadow(0 0 6px #fff3a0); }
.dfx.planet { filter: drop-shadow(0 0 10px var(--c)); }
.dfx.heartfire { filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 24px #ff5a1f); }
.dfx.heartfire .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dfx-flicker .16s ease-in-out infinite alternate; }
@keyframes dfx-flicker { from { transform: scaleY(.75) skewX(-6deg); } to { transform: scaleY(1.2) skewX(6deg); } }
.flat.dfx.ripple { filter: drop-shadow(0 0 4px #fff); }
.dfx.viewfinder { filter: drop-shadow(0 0 3px #000); }
.dfx.bale { filter: drop-shadow(0 8px 6px #0007); }
.dfx.bell { filter: drop-shadow(0 0 10px #ffe08a); }
.dfx.warm-orb { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(#fff 0 12%, var(--c) 40%, transparent 70%); opacity: .9;
  mix-blend-mode: screen; }
.flat.dfx.warm-ring { filter: drop-shadow(0 0 10px #ffd88a) drop-shadow(0 0 22px #ffb347); }
.dfx.jaw { filter: drop-shadow(0 4px 4px #0008); }
.dfx.gum { filter: drop-shadow(0 2px 3px #0005); }

/* drawn effects of Phantom Dream */
.dfx.dream-bubble { filter: drop-shadow(0 4px 6px #0006); }
.dfx.butterfly { filter: drop-shadow(0 0 6px #b88aff); }
.dfx.barcode { filter: drop-shadow(0 3px 4px #0006); }
.dfx.scanline { width: 6px; height: 120px; border-radius: 3px; background: #ff2a2a; box-shadow: 0 0 10px #ff2a2a, 0 0 24px #ff2a2a; }
.dfx.price-tag { filter: drop-shadow(0 4px 4px #0007); }
.dfx.sticky { filter: drop-shadow(0 3px 3px #0006); }
.dfx.line-dot { box-shadow: 0 0 4px #fff; }
.dfx.stream-frame { filter: drop-shadow(0 0 6px #e8283c); }
.dfx.chat-bubble { background: var(--c); color: #fff; font: 800 18px 'Segoe UI', sans-serif; padding: 5px 12px; border-radius: 14px 14px 14px 3px;
  box-shadow: 0 3px 6px #0006; }
.dfx.chat-bubble b { font-weight: 800; }
.dfx.observer-eye { filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 22px var(--c)); }
.dfx.causal-ring { filter: drop-shadow(0 0 8px var(--c)); }
.dfx.evidence, .dfx.case-folder { filter: drop-shadow(0 4px 4px #0007); }
.dfx.flash-cone { mix-blend-mode: screen; }
.dfx.heart-circle, .dfx.beam-heart { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 18px var(--c)); }
.dfx.focus-lines { mix-blend-mode: multiply; }
.dfx.deadpan b { font: 900 34px 'Segoe UI', sans-serif; color: #fff; -webkit-text-stroke: 2px #222; letter-spacing: 2px; }
.dfx.cut-line { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #8ab0ff); }
.dfx.phone-feed { width: 120px; height: 180px; overflow: hidden; border: 6px solid #222; border-radius: 16px; background: #f4f4f8; box-shadow: 0 6px 10px #0007; }
.dfx.phone-feed .screen { display: flex; flex-direction: column; gap: 8px; padding: 10px 6px; }
.dfx.phone-feed i { display: block; font: 900 13px 'Segoe UI', sans-serif; font-style: normal; color: #c8202c; background: #fff; border: 2px solid #ddd;
  border-radius: 6px; padding: 8px 4px; text-align: center; white-space: normal; }
.dfx.flat-earth { filter: drop-shadow(0 4px 6px #0007); }
.dfx.bobber { filter: drop-shadow(0 2px 2px #0006); }
.flat.dfx.spot-pool { width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(#fff6d0cc, #fff6d000 70%); mix-blend-mode: screen; }
.dfx.waveform { filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 14px var(--c)); }
.dfx.mask { filter: drop-shadow(0 3px 4px #0007); }

/* drawn effects II (fx.js "drawn effects II") */
.dfx.icicle, .dfx.flake { filter: drop-shadow(0 0 6px #bff0ff) drop-shadow(0 0 14px #7ad8ff); }
.dfx.bolt-d { filter: drop-shadow(0 0 8px #fff36a) drop-shadow(0 0 22px #ffe94a); }
.dfx.storm-cloud, .dfx.anvil, .dfx.cage, .dfx.mallet, .dfx.glove, .dfx.pie, .dfx.cream, .dfx.die, .dfx.card-d, .dfx.crane, .dfx.letter,
.dfx.hourglass, .dfx.clockface, .dfx.drill, .dfx.fan, .dfx.great-wave, .dfx.stalag, .dfx.gear, .dfx.yinyang, .dfx.half-heart, .dfx.padlock,
.dfx.harpoon, .dfx.arrow-d, .dfx.sword-d, .dfx.ink-splat, .dfx.thornwrap, .dfx.mummy, .dfx.tentacle, .dfx.lasso, .dfx.chain-link, .dfx.chain-wrap { filter: drop-shadow(0 5px 5px #0007); }
.flat.dfx.fall-shadow { width: 170px; height: 100px; border-radius: 50%; background: radial-gradient(#000c, #0000 70%); }
.dfx.sigil, .dfx.reticle, .dfx.staff, .dfx.iaido, .dfx.zaps, .dfx.pincer-x, .dfx.gust, .dfx.fan-gust { filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 14px var(--c)); }
.dfx.eclipse { filter: drop-shadow(0 0 20px #ffb347); }
.dfx.sun, .dfx.sunbeam { filter: drop-shadow(0 0 16px #ffcf3f); }
.dfx.bulb.lit { filter: drop-shadow(0 0 14px #fff36a) drop-shadow(0 0 30px #ffd84a); }
.dfx.lantern { filter: drop-shadow(0 0 12px #ffb347) drop-shadow(0 0 26px #ff7a2a); }
.dfx.flame-d { filter: drop-shadow(0 0 8px #ff7a2a); }
.dfx.pincer-bolt, .dfx.pincer-trail, .dfx.bead { filter: drop-shadow(0 0 6px var(--c)); }
.dfx.rainbow, .dfx.star-d, .dfx.rose, .dfx.love-heart { filter: drop-shadow(0 0 6px #fff8) drop-shadow(0 0 14px var(--c)); }
.dfx.spot-cone { filter: blur(1px); }
.dfx.mirror { filter: drop-shadow(0 0 10px #d8a830); }
.dfx.soap { opacity: .95; }
.dfx.grind { filter: drop-shadow(0 0 6px #ffd84a); }
.flat.dfx.portal { filter: drop-shadow(0 0 16px #b05ae8); }
.flat.dfx.whirl { opacity: .9; }
.flat.dfx.floor-ring { filter: drop-shadow(0 0 6px var(--c)); }

/* sketched effects (Rough.js, fx.js "sketched effects") */
[class*="dfx sk-"] { filter: drop-shadow(0 4px 4px #0006); }
.dfx.sk-wave, .dfx.sk-x, .dfx.sk-geo, .dfx.sk-chop, .dfx.sk-tag, .dfx.sk-trend, .dfx.sk-garland, .dfx.sk-foam, .dfx.sk-cheese { filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 2px #fff); }
.dfx.sk-glitter, .dfx.sk-pixel, .dfx.sk-burn { filter: drop-shadow(0 0 8px #fff8); }
.dfx.sk-flame { filter: drop-shadow(0 0 8px #ff7a2a); }
.dfx.sk-sign b, .dfx.sk-shout b, .dfx.sk-panel b { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-4deg); font: 900 22px 'Segoe UI', sans-serif;
  color: #2a1a1a; white-space: nowrap; pointer-events: none; }
.dfx.sk-shout b { top: 48%; font-size: 18px; color: #c0182a; }
.dfx.sk-panel b { top: auto; bottom: -18px; font-size: 30px; color: #fff; -webkit-text-stroke: 3px var(--c); }
.dfx.buoy { filter: drop-shadow(0 5px 5px #0007); }

/* SVG.js stages (fx.js "SVG.js stages") */
.dfx.sj svg { display: block; overflow: visible; }
.dfx.sj { filter: drop-shadow(0 5px 6px #0007); }
.dfx.sj-scan, .dfx.sj-decree, .dfx.sj-hall { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 4px 4px #0006); }
.dfx.sj-candle { filter: none; }
.dfx.sj-glass, .dfx.sj-sun { filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 4px 4px #0006); }