/* Store, Museum, calling cards, companions and battle boards (js/screens-store.js, companions.js, boards.js) */

/* ================================================================ battle boards */
#game.lcb-on { background: #07050d; }
#game.lcb-on::before, #game.lcb-on .motes { display: none; }
.lcb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lcb > * { position: absolute; }
.lcb-bg, .lcb-fx, .lcb-var { inset: 0; }
.lcb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lcb:not(.lcb-default)::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 42% 46% at 50% 50%, rgba(4,2,10,.5), rgba(4,2,10,.18) 70%, transparent 100%); }
.lcb-lanes { top: 0; bottom: 0; left: calc(50% - 470px); width: 900px; z-index: 1;
  background: linear-gradient(180deg, transparent 0 80px, rgba(5,3,12,.5) 112px 300px, rgba(5,3,12,.22) 330px 470px, rgba(5,3,12,.5) 500px 700px, transparent 740px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.lcb-edge { top: 0; bottom: 0; width: 240px; }
.lcb-l { left: 0; } .lcb-r { right: 0; }

/* Storm over Philadelphia: rain on the windows, lightning reveals the hall */
.lcb-hall { fill: #05060d; stroke: #c3d0ff; stroke-width: 2.5; stroke-opacity: 0; animation: lcbRim 11s infinite; }
.lcb-hall .lcb-lit rect { fill: #e8b560; opacity: .16; stroke: none; }
.lcb-clock { fill: #171c30 !important; stroke: #6b7396; }
.lcb-flash { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 72% 0%, rgba(205,218,255,.55), rgba(120,140,220,.14) 60%, transparent); opacity: 0; animation: lcbFlash 11s infinite; }
.lcb-bolt { fill: #e6ecff; opacity: 0; animation: lcbFlash 11s infinite; filter: drop-shadow(0 0 10px #9fb4ff); }
@keyframes lcbFlash { 0%, 86% { opacity: 0; } 87% { opacity: .95; } 88% { opacity: .12; } 89.5% { opacity: .7; } 92%, 100% { opacity: 0; } }
@keyframes lcbRim { 0%, 86% { stroke-opacity: 0; } 87% { stroke-opacity: .95; } 88% { stroke-opacity: .2; } 89.5% { stroke-opacity: .75; } 93%, 100% { stroke-opacity: 0; } }
.lcb-window { position: absolute; left: 10px; top: 90px; width: 220px; height: 720px; opacity: .8; }
.lcb-r .lcb-window { left: auto; right: 10px; }
.lcb-rain, .lcb-drops { position: absolute; left: 22px; right: 22px; top: 22px; bottom: 22px; border-radius: 92px 92px 0 0; }
.lcb-rain { background: linear-gradient(180deg, rgba(38,50,92,.4), rgba(18,24,48,.55)), repeating-linear-gradient(100deg, transparent 0 14px, rgba(170,190,255,.2) 14px 15px, transparent 15px 31px);
  background-size: 100% 100%, 100% 180px; animation: lcbRain 1.1s linear infinite; }
.lcb-rain.r2 { background: repeating-linear-gradient(96deg, transparent 0 22px, rgba(190,205,255,.14) 22px 23px, transparent 23px 47px); background-size: 100% 260px; animation: lcbRain2 1.7s linear infinite; }
.lcb-drops { background: radial-gradient(circle at 30% 30%, rgba(210,220,255,.45) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(210,220,255,.35) 0 1.5px, transparent 2.5px); background-size: 46px 70px, 62px 90px; opacity: .45; }
@keyframes lcbRain { to { background-position: 0 0, -32px 180px; } }
@keyframes lcbRain2 { to { background-position: -48px 260px; } }

/* Midnight Print Shop: presses roll in the corners, pages stack up */
.lcb-brick { background: linear-gradient(180deg, #180d13, #0f080c); }
.lcb-brick::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,190,140,.035) 0 2px, transparent 2px 30px), repeating-linear-gradient(90deg, rgba(255,190,140,.025) 0 2px, transparent 2px 64px); }
.lcb-corner { width: 240px; height: 290px; opacity: .8; }
.lcb-corner.tl { left: 0; top: -60px; } .lcb-corner.tr { right: 0; top: -60px; } .lcb-corner.bl { left: 0; bottom: -10px; } .lcb-corner.br { right: 0; bottom: -10px; }
.lcb-press { width: 100%; height: 100%; } .lcb-press.flip { transform: scaleX(-1); }
.lcb-roller { transform-box: fill-box; transform-origin: 50% 50% !important; animation: lcbSpin 9s linear infinite; }
.lcb-roller.rev { animation-direction: reverse; animation-duration: 6s; }
@keyframes lcbSpin { to { transform: rotate(360deg); } }
.lcb-pages { width: 120px; height: 90px; }
.lcb-pages.a { left: 236px; bottom: 26px; } .lcb-pages.b { right: 236px; top: 30px; transform: rotate(180deg); }
.lcb-pages i { position: absolute; left: 0; width: 110px; height: 12px; border-radius: 2px; background: linear-gradient(#efe3c6, #cbbb95); box-shadow: 0 1px 0 rgba(0,0,0,.45); opacity: .5; animation: lcbPage .6s ease-out; }
@keyframes lcbPage { from { transform: translate(40px, -60px) rotate(18deg); opacity: 0; } }

/* Crossroads at Dawn: fog clears and the sky lightens as turns pass (--dawn 0..1 from the turn number) */
.lcb-crossroads { --dawn: 0; }
.lcb-crossroads .lcb-bg { filter: brightness(calc(.74 + var(--dawn) * .36)); transition: filter 3s; }
.lcb-sky { position: absolute; inset: 0; }
.lcb-sky.night { background: linear-gradient(180deg, #05071a, #0e1233 44%, #1b1d40 49%, #07060f 51%); }
.lcb-sky.dawn { background: linear-gradient(180deg, #1b2552 0%, #4d3a74 28%, #b0607a 43%, #f09a62 48.5%, #1a1426 51%, #0b0914 100%); opacity: var(--dawn); transition: opacity 3s; }
.lcb-sun { position: absolute; left: 50%; top: 0; width: 900px; height: 500px; transform: translate(-50%, 0); background: radial-gradient(ellipse 50% 40% at 50% 88%, rgba(255,200,120,.55), transparent 70%); opacity: calc(var(--dawn) * .9); transition: opacity 3s; }
.lcb-stars { opacity: calc(1 - var(--dawn)); transition: opacity 3s; }
.lcb-road { fill: #231c33; opacity: .75; }
.lcb-fog { left: -10%; right: -10%; height: 440px; bottom: 0; transition: opacity 3s; animation: lcbFog 70s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 18% 38% at 8% 62%, rgba(205,210,235,.4), transparent 70%), radial-gradient(ellipse 20% 34% at 92% 58%, rgba(205,210,235,.4), transparent 70%), radial-gradient(ellipse 30% 30% at 50% 78%, rgba(205,210,235,.16), transparent 70%);
  opacity: calc(.95 - var(--dawn) * .88); }
.lcb-fog.f2 { bottom: 200px; height: 320px; animation-duration: 95s; animation-direction: alternate-reverse; opacity: calc(.7 - var(--dawn) * .7); }
@keyframes lcbFog { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* Telegraph Station: signals pulse along the near wires at the top and bottom edges */
.lcb-pulse { fill: #aef0ff; }
.lcb-litwin { opacity: .8; }

/* Riverboat at Sunset: the far shore drifts slowly behind the board */
.lcb-shore { left: 0; top: 0; width: 4800px; height: 900px; animation: lcbShore 170s linear infinite; }
@keyframes lcbShore { to { transform: translateX(-1600px); } }

/* The Archive Beyond Time: paintings and maps drift in the walls */
.lcb-shelf { width: 230px; overflow: hidden; opacity: .7;
  background: repeating-linear-gradient(0deg, #1d1236 0 8px, transparent 8px 150px), repeating-linear-gradient(90deg, rgba(90,60,120,.35) 0 14px, rgba(60,40,90,.25) 14px 22px, rgba(110,70,60,.3) 22px 34px, transparent 34px 37px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.lcb-drift { position: absolute; left: 34px; right: 34px; top: 0; animation: lcbDrift 140s linear infinite; }
.lcb-r .lcb-drift { animation-direction: reverse; }
@keyframes lcbDrift { to { transform: translateY(-50%); } }
.lcb-frame { height: 200px; margin-bottom: 50px; border: 8px solid #3a2a18; outline: 2px solid #8a6a2a; background: #120c08; box-shadow: 0 8px 20px rgba(0,0,0,.7); overflow: hidden; }
.lcb-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: sepia(.55) brightness(.5) contrast(1.05); display: block; }
.lcb-frame.map { background: linear-gradient(135deg, #d9c79a, #a8905c); filter: brightness(.5) sepia(.3); }
.lcb-frame.map svg { width: 100%; height: 100%; }

/* variants */
.lcbv-nightfall-lighting .lcb-var { background: linear-gradient(180deg, rgba(10,22,70,.45), rgba(4,8,30,.5)); mix-blend-mode: multiply; }
.lcbv-nightfall-lighting .lcb-bg { filter: saturate(.7) hue-rotate(12deg); }
.lcb-particles { position: absolute; top: 0; bottom: 0; width: 230px; }
.lcb-particles.l { left: 0; -webkit-mask: linear-gradient(90deg, #000 45%, transparent); mask: linear-gradient(90deg, #000 45%, transparent); }
.lcb-particles.r { right: 0; -webkit-mask: linear-gradient(270deg, #000 45%, transparent); mask: linear-gradient(270deg, #000 45%, transparent); }
.lcbv-first-snow .lcb-particles { background-image: radial-gradient(circle, rgba(255,255,255,.85) 0 2px, transparent 3px), radial-gradient(circle, rgba(235,242,255,.6) 0 1.4px, transparent 2.4px);
  background-size: 70px 90px, 46px 60px; background-position: 0 0, 20px 30px; animation: lcbSnow 11s linear infinite; }
@keyframes lcbSnow { to { background-position: 70px 900px, 46px 900px; } }
.lcbv-autumn-leaves .lcb-particles { background-image: radial-gradient(ellipse 5px 2.5px, #d9722e 90%, transparent), radial-gradient(ellipse 4px 2px, #b8452a 90%, transparent), radial-gradient(ellipse 4px 2.2px, #e3a53a 90%, transparent);
  background-size: 110px 150px, 80px 110px, 130px 180px; background-position: 0 0, 40px 20px, 70px 90px; opacity: .8; animation: lcbLeaves 16s linear infinite; }
@keyframes lcbLeaves { to { background-position: 110px 900px, -80px 880px, 130px 900px; } }
.lcbv-gilded-trim .lcb-var { box-shadow: inset 0 0 0 3px rgba(242,193,78,.4), inset 0 0 0 12px rgba(0,0,0,.25), inset 0 0 0 14px rgba(242,193,78,.2); }
.lcb-orn { position: absolute; width: 110px; height: 110px; opacity: .65; }
.lcb-orn.tl { left: 8px; top: 8px; } .lcb-orn.tr { right: 8px; top: 8px; transform: scaleX(-1); } .lcb-orn.bl { left: 8px; bottom: 8px; transform: scaleY(-1); } .lcb-orn.br { right: 8px; bottom: 8px; transform: scale(-1); }

/* low graphics, still previews, midnight theme */
body.fx-low .lcb *, .lcb-still *, body.fx-low .lcb *::before, body.fx-low .lcb *::after { animation: none !important; transition: none !important; }
body.fx-low .lcb-pulses, .lcb-still .lcb-pulses { display: none; }
body.theme-midnight .lcb { filter: brightness(.72) saturate(.85); }
body.theme-midnight #game.lcb-on { background: #000; }

/* previews */
.lcb-preview { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: #120a26; flex: none; }
.lcb-preview-in { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.lcb-default-bg { background: radial-gradient(ellipse at 50% 50%, rgba(120,70,220,.16), transparent 60%), linear-gradient(180deg, #120a26, #1a0f35 48%, #1a0f35 52%, #120a26); }
.lcb-ghost i { position: absolute; width: 120px; height: 168px; border-radius: 10px; border: 3px dashed rgba(190,160,255,.28); background: rgba(255,255,255,.025); }

/* ================================================================ companions */
.cz { position: relative; display: inline-block; flex: none; pointer-events: none; }
.cz-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.cz-svg g, .cz-svg path, .cz-svg ellipse { transform-box: fill-box; }
.cz-head { transform-origin: 50% 90%; transition: transform .3s; }
.cz-eye { transform-origin: 50% 50%; animation: czBlink 4.6s infinite; }
@keyframes czBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.cz-ink-raven .cz-head { transform-origin: 80% 80%; animation: czTilt 5s ease-in-out infinite; }
@keyframes czTilt { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 85% { transform: rotate(6deg); } }
.cz-scrap { opacity: 0; transition: opacity .2s; }
.has-scrap .cz-scrap { opacity: 1; }
.cz-comet-fox .cz-tail { transform-origin: 0% 100%; animation: czWag 3s ease-in-out infinite; }
.cz-comet-fox .cz-ear { transform-origin: 50% 100%; animation: czEar 6s ease-in-out infinite; }
@keyframes czWag { 50% { transform: rotate(-9deg); } }
@keyframes czEar { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } }
.cz-gear { transform-origin: 50% 50% !important; animation: czSpin 7s linear infinite; }
@keyframes czSpin { to { transform: rotate(360deg); } }
.cz-lens { filter: drop-shadow(0 0 3px #6fd3ff); }
.cz-pip-cat .cz-body { transform-origin: 50% 100%; animation: czBreathe 3.4s ease-in-out infinite; }
@keyframes czBreathe { 50% { transform: scaleY(1.05); } }
.cz-eye-open { display: none; }
.cz-zz text { fill: #cbd6ff; font: 700 12px var(--font-title); opacity: 0; animation: czZ 3.6s infinite; }
.cz-zz text:nth-child(2) { animation-delay: 1.2s; } .cz-zz text:nth-child(3) { animation-delay: 2.4s; }
@keyframes czZ { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -8px); } }
.cz-morrow-moth .cz-wing-l { transform-origin: 100% 50% !important; animation: czFlap 2.6s ease-in-out infinite; }
.cz-morrow-moth .cz-wing-r { transform-origin: 0% 50% !important; animation: czFlap 2.6s ease-in-out infinite; }
@keyframes czFlap { 50% { transform: scaleX(.78); } }
.cz-morrow-moth { animation: czHover 4s ease-in-out infinite; }
@keyframes czHover { 50% { transform: translateY(-6px); } }
.cz-glow { opacity: .1; transition: opacity 1s; }
.cz-glowing .cz-glow { opacity: 1; animation: czGlow 2.2s ease-in-out infinite; }
.cz-flare .cz-glow { opacity: .8; }
@keyframes czGlow { 50% { opacity: .55; } }
.cz-glowing .cz-svg { filter: drop-shadow(0 0 14px rgba(255,211,110,.9)); }
.cz-lantern-glow { animation: czGlow 2.4s ease-in-out infinite; }
/* colors (apply to any companion) */
.hue-ember .cz-svg { filter: hue-rotate(-28deg) saturate(1.5) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-frost .cz-svg { filter: hue-rotate(185deg) saturate(.8) brightness(1.15) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-verdant .cz-svg { filter: hue-rotate(80deg) saturate(1.2) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-gilded .cz-svg { filter: sepia(1) saturate(3) hue-rotate(-8deg) brightness(1.12) drop-shadow(0 0 8px rgba(242,193,78,.6)); }
.hue-shadow .cz-svg { filter: brightness(.55) contrast(1.25) saturate(.6) drop-shadow(0 0 8px rgba(168,107,255,.6)); }
.hue-lunar .cz-svg { filter: grayscale(1) brightness(1.45) drop-shadow(0 0 8px rgba(220,230,255,.6)); }
.hue-tide .cz-svg { filter: hue-rotate(150deg) saturate(.9) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-ember.cz-ink-raven .cz-svg, .hue-frost.cz-ink-raven .cz-svg, .hue-verdant.cz-ink-raven .cz-svg, .hue-tide.cz-ink-raven .cz-svg { filter: sepia(.5) hue-rotate(var(--rh, 0deg)) saturate(2) brightness(1.5) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-ember.cz-ink-raven { --rh: -40deg; } .hue-frost.cz-ink-raven { --rh: 170deg; } .hue-verdant.cz-ink-raven { --rh: 70deg; } .hue-tide.cz-ink-raven { --rh: 140deg; }
/* poses */
.pose-proud .cz-head { transform: translateY(-4px) rotate(-6deg); }
.pose-proud .cz-svg { transform: scale(1.04); }
.pose-curious .cz-head { transform: rotate(13deg); }
.pose-proud.cz-ink-raven .cz-head, .pose-curious.cz-ink-raven .cz-head { animation: none; }
.pose-sleepy .cz-eye { animation: none; transform: scaleY(.35); }
.pose-sleepy .cz-svg { animation: czBreathe 5s ease-in-out infinite; transform-origin: 50% 100%; }
/* reactions */
.cz-hop { animation: czHop .8s cubic-bezier(.3,1.6,.5,1); }
.cz-cheer { animation: czHop .8s cubic-bezier(.3,1.6,.5,1) 4; }
@keyframes czHop { 30% { transform: translateY(-18px); } 60% { transform: translateY(0); } 75% { transform: translateY(-6px); } }
.cz-sad { filter: saturate(.6) brightness(.85); }
.cz-sad .cz-head { animation: none; transform: rotate(14deg) translateY(4px); }
.cz-look .cz-head { animation: none; transform: rotate(-30deg); }
.cz-look .cz-lens { fill: #b8f3ff; }
.cz-startle { animation: czJump .7s ease-out; }
.cz-startle .cz-body { animation: none; transform: scale(1.08, 1.2); }
.cz-startle .cz-eye-open { display: inline; } .cz-startle .cz-eye-closed, .cz-startle .cz-zz { display: none; }
@keyframes czJump { 20% { transform: translateY(-22px) rotate(-4deg); } 60% { transform: translateY(0); } }
.cz-flinch { animation: czShake .5s; }
@keyframes czShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cz-peck .cz-head { animation: czPeck .5s; }
@keyframes czPeck { 40% { transform: rotate(-30deg) translate(-3px, 4px); } }
.cz-flying .cz-wing { animation: czFlapFast .14s infinite alternate; transform-origin: 30% 30%; }
@keyframes czFlapFast { to { transform: scaleY(-.6); } }
/* the companion on the battle board (stage coordinates inside #board0) */
.czb { position: absolute; width: 112px; height: 112px; z-index: 1; pointer-events: none; }
.czb .cz { width: 112px; height: 112px; }
.czb-comet-fox .cz { transform: translateY(34px); transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.czb-comet-fox .cz.cz-peek { transform: translate(34px, -16px) rotate(6deg); }
.czb-comet-fox .cz.cz-cheer, .czb-comet-fox .cz.cz-sad { transform: translate(34px, -16px); }
.czb-pip-cat { top: 760px !important; }
body.fx-low .cz *, body.fx-low .cz { animation: none !important; }
/* placements */
.cz-hubpet { position: absolute !important; left: 380px; top: 500px; z-index: 6; pointer-events: auto !important; cursor: pointer; }
.cz-overpet { position: absolute !important; left: -80px; bottom: -34px; }
.cz-packpet { position: absolute !important; left: 44px; bottom: 120px; z-index: 5; }
body.mobile .cz-hubpet { width: 150px !important; height: 150px !important; left: 350px; top: 470px; }

/* ================================================================ calling cards & banners */
.cc { position: relative; width: 520px; height: 140px; border-radius: 16px; flex: none; color: #f3ecff; text-align: left; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.cc-sm { width: 390px; height: 100px; border-radius: 12px; }
.cc-lg { width: 660px; height: 180px; border-radius: 20px; }
.bn { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; border: 1px solid rgba(242,193,78,.4); }
.cc-portrait { position: absolute; left: 12px; top: 12px; bottom: 12px; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: 50% 16%; border: 3px solid var(--c, #f2c14e); box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 0 18px var(--c, #a86bff); }
.cc-text { position: absolute; left: 140px; right: 130px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.cc-text b { font: 900 26px var(--font-title); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-title { font: italic 700 17px var(--font-card); color: #ffd98a; }
.cc-text small { font-size: 13px; color: #d8ccef; letter-spacing: .06em; }
.cc-sm .cc-text { left: 96px; right: 90px; } .cc-sm .cc-text b { font-size: 19px; } .cc-sm .cc-title { font-size: 14px; } .cc-sm .cc-text small { font-size: 11px; }
.cc-lg .cc-text { left: 184px; right: 170px; } .cc-lg .cc-text b { font-size: 34px; } .cc-lg .cc-title { font-size: 22px; } .cc-lg .cc-text small { font-size: 16px; }
.cc-art { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #f2c14e; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.2), rgba(20,10,40,.85)); border: 1px solid rgba(242,193,78,.6); }
.cc-art .lcs-icon { width: 30px; height: 30px; }
.cc-lg .cc-art { width: 58px; height: 58px; } .cc-lg .cc-art .lcs-icon { width: 40px; height: 40px; }
.cc > .cz { position: absolute; right: -8px; bottom: -10px; }
/* plain */
.bn-plain { background: linear-gradient(120deg, #2a1552, #140a2a 60%, #231040); }
.bn-plain::after { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 80% 50%, rgba(242,193,78,.05) 0 1px, transparent 1px 22px); }
/* wax seal */
.bn-wax .bn-paper { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, #3b2a1a 0%, #2a1c10 60%, #1a1008 100%); }
.bn-wax .bn-paper::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(232,200,140,.35); border-radius: 12px; background: repeating-linear-gradient(0deg, rgba(232,200,140,.05) 0 1px, transparent 1px 7px); }
.bn-seal { position: absolute; right: 92px; top: 50%; width: 70px; height: 70px; margin-top: -35px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #e0564a, #9a1c16 60%, #6a0e0a); box-shadow: 0 0 0 5px rgba(154,28,22,.55), 0 6px 14px rgba(0,0,0,.6); animation: bnStamp 6s cubic-bezier(.3,1.5,.5,1) infinite; }
.bn-seal svg { width: 100%; height: 100%; }
@keyframes bnStamp { 0%, 70% { transform: scale(1) rotate(0); } 76% { transform: scale(1.5) rotate(-18deg); opacity: .5; } 82% { transform: scale(.94) rotate(4deg); opacity: 1; } 88%, 100% { transform: scale(1); } }
.cc-sm .bn-seal { width: 50px; height: 50px; margin-top: -25px; right: 64px; } .cc-lg .bn-seal { width: 92px; height: 92px; margin-top: -46px; right: 120px; }
/* midnight courier */
.bn-courier { background: linear-gradient(180deg, #070b26, #16163a 70%, #221a30); }
.bn-stars { position: absolute; inset: 0; background: radial-gradient(circle at 12% 20%, #fff 0 1px, transparent 2px), radial-gradient(circle at 34% 12%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 58% 28%, #fff 0 1px, transparent 2px), radial-gradient(circle at 76% 14%, #fff 0 1.4px, transparent 2.4px), radial-gradient(circle at 88% 36%, #fff 0 1px, transparent 2px), radial-gradient(circle at 46% 42%, #fff 0 .8px, transparent 1.6px); animation: bnTwinkle 3s ease-in-out infinite alternate; }
@keyframes bnTwinkle { from { opacity: .5; } to { opacity: 1; } }
.bn-road { position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; }
.bn-lantern { position: absolute; right: 16%; bottom: 20%; width: 18px; height: 18px; border-radius: 50%; background: #ffd36e; box-shadow: 0 0 20px 10px rgba(255,190,90,.55), 0 0 60px 30px rgba(255,160,60,.25); animation: bnLamp 2.6s ease-in-out infinite; }
@keyframes bnLamp { 50% { box-shadow: 0 0 14px 6px rgba(255,190,90,.4), 0 0 44px 20px rgba(255,160,60,.18); } }
/* the inventor */
.bn-inventor { background: #0c2750; }
.bn-grid { position: absolute; inset: -40px; background: repeating-linear-gradient(0deg, rgba(160,210,255,.14) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, rgba(160,210,255,.14) 0 1px, transparent 1px 20px), repeating-linear-gradient(0deg, rgba(160,210,255,.22) 0 1px, transparent 1px 100px); animation: bnGrid 12s linear infinite; }
@keyframes bnGrid { to { transform: translate(40px, 20px); } }
.bn-gear { position: absolute; fill: none; stroke: #e8c06a; stroke-width: 3; opacity: .7; animation: czSpin 12s linear infinite; }
.bn-gear.g1 { right: 90px; top: 50%; width: 110px; height: 110px; margin-top: -55px; }
.bn-gear.g2 { right: 40px; top: 6px; width: 60px; height: 60px; animation-direction: reverse; animation-duration: 7s; }
/* the scholar */
.bn-scholar { background: #1a1020; }
.bn-shelves { position: absolute; inset: 0; opacity: .7; background: repeating-linear-gradient(0deg, #3a2414 0 6px, transparent 6px 46px), repeating-linear-gradient(90deg, #6b2a2a 0 10px, #2a4a6b 10px 18px, #6b5a2a 18px 30px, #2a5a3a 30px 38px, #4a2a6b 38px 50px, transparent 50px 53px); }
.bn-book { position: absolute; right: 70px; top: 50%; width: 110px; height: 70px; margin-top: -35px; perspective: 300px; }
.bn-book i { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: linear-gradient(90deg, #d9c9a2, #efe3c6); border-radius: 4px 0 0 4px; box-shadow: 0 6px 14px rgba(0,0,0,.6); }
.bn-book i::after { content: ""; position: absolute; left: 100%; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #efe3c6, #d9c9a2); border-radius: 0 4px 4px 0; }
.bn-book .bn-page { left: 50%; border-radius: 0 4px 4px 0; transform-origin: 0 50%; background: repeating-linear-gradient(0deg, #efe3c6 0 7px, #d8caa6 7px 8px); animation: bnTurn 5s ease-in-out infinite; box-shadow: none; }
.bn-book .bn-page::after { display: none; }
@keyframes bnTurn { 0%, 55% { transform: rotateY(0); } 80%, 100% { transform: rotateY(-178deg); } }
/* the challenger */
.bn-challenger { background: linear-gradient(135deg, #3d0d14, #1b080d 50%, #2e1418); }
.bn-steel { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%); background-size: 260% 100%; animation: bnSheen 6s ease-in-out infinite; }
@keyframes bnSheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bn-crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.bn-crack path { fill: none; stroke: #ffb38a; stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ff5a3a); animation: bnCrack 3.6s ease-in-out infinite; }
@keyframes bnCrack { 50% { stroke-opacity: .45; } }

/* ================================================================ store & museum pages */
.lcs-wrap { position: absolute; top: 96px; left: 24px; right: 24px; bottom: 112px; display: flex; gap: 18px; }
.lcs-rail { width: 214px; flex: none; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; touch-action: pan-y; padding-bottom: 10px; }
.lcs-rail button { text-align: left; padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; background: rgba(255,255,255,.035); color: #cbb9ee; font: 700 15px var(--font-ui); cursor: pointer; }
.lcs-rail button:hover { background: rgba(168,107,255,.14); color: #fff; }
.lcs-rail button.on { background: linear-gradient(90deg, rgba(168,107,255,.38), rgba(90,40,170,.18)); color: #fff; border-color: var(--line); }
.lcs-rail button.lock { color: #8f82ad; }
.lcs-main { flex: 1; min-width: 0; overflow-y: auto; touch-action: pan-y; padding: 4px 6px 30px; }
.lcs-intro { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 2px 0 14px; max-width: 980px; }
.lcs-small { color: var(--muted); font-size: 13px; }
.lcs-small a, .lcs-how a { color: #ffd98a; }
.lcs-sub { font-family: var(--font-title); letter-spacing: .1em; margin: 22px 0 10px; }
.lcs-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.lcs-sum span { font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #d8ccef; }
.lcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(274px, 1fr)); gap: 16px; }
.lcs-tile { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); cursor: pointer; text-align: left; transition: transform .2s, border-color .2s; min-height: 250px; }
.lcs-tile:hover { transform: translateY(-3px); border-color: rgba(242,193,78,.6); }
.lcs-tile.eq { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.lcs-tile.locked .lcs-prev > * { filter: grayscale(.7) brightness(.55); }
.lcs-prev { height: 150px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, rgba(168,107,255,.2), rgba(10,5,24,.65)); overflow: hidden; position: relative; }
.lcs-prev .cc-sm { transform: scale(.62); }
.lcs-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lcs-meta b { font: 800 16px var(--font-title); letter-spacing: .03em; }
.lcs-rar { font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--r); border: 1px solid var(--r); border-radius: 99px; padding: 2px 8px; }
.lcs-new { font-style: normal; font: 800 10px var(--font-ui); letter-spacing: .12em; background: #ff4a3a; color: #fff; border-radius: 99px; padding: 3px 8px; }
.lcs-kind { color: var(--muted); font-size: 13px; letter-spacing: .08em; margin-left: 6px; }
.lcs-foot { margin-top: auto; }
.lcs-price { display: flex; align-items: center; gap: 8px; }
.lcs-price b { display: inline-flex; align-items: center; gap: 6px; font: 900 17px var(--font-title); }
.lcs-price small { color: var(--muted); }
.lcs-price .coin, .lcs-price .gemicon { width: 18px; height: 18px; }
.lcs-owned { color: #7dffb0; font-weight: 800; font-style: normal; }
.lcs-earn { color: #cbb9ee; font-size: 13px; }
.gemicon { display: inline-block; width: 22px; height: 22px; background: linear-gradient(135deg, #c9f7ff, #4fb3ff 45%, #7a4dff); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); filter: drop-shadow(0 0 6px rgba(111,211,255,.8)); flex: none; }
.lcs-gems { color: #bfefff; }
.lcs-cardwrap .card { position: relative; width: 96px; height: 134px; }
.lcs-plaque { padding: 14px 22px; border-radius: 8px; background: linear-gradient(180deg, #d9b25a, #9a7424); color: #2a1a06; font: 900 18px var(--font-title); letter-spacing: .06em; text-align: center; box-shadow: inset 0 0 0 2px rgba(255,240,200,.5), 0 8px 18px rgba(0,0,0,.5); max-width: 90%; }
.lcs-plaque.small { padding: 8px 14px; font-size: 14px; }
.lcs-record { display: grid; place-items: center; gap: 8px; }
.lcs-record i { display: block; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle, #f2c14e 0 13px, #1a1026 14px 16px, #0b0712 17px, #231a30 30px, #0b0712 32px, #1d1428 44px, #0b0712 46px); box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.lcs-record span { font-size: 12px; color: var(--muted); }
.lcs-rec.spin .lcs-record i { animation: czSpin 3s linear infinite; }
.lcs-bundle { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.lcs-bundle span { font-size: 13px; padding: 4px 10px; border-radius: 99px; background: rgba(242,193,78,.14); border: 1px solid rgba(242,193,78,.4); }
.lcs-icon { width: 48px; height: 48px; color: #f2c14e; }
.lcs-icon.big { width: 96px; height: 96px; filter: drop-shadow(0 0 12px rgba(242,193,78,.45)); }
/* detail sheet */
.lcs-sheet { display: grid; grid-template-columns: minmax(320px, 660px) 1fr; gap: 24px; text-align: left; align-items: start; }
.lcs-sprev .lcs-prev { height: auto; min-height: 300px; padding: 16px; }
.lcs-sinfo .lead { margin: 12px 0 !important; text-align: left; max-width: none !important; }
.lcs-how { color: #e9dcff; font-size: 15px; }
.lcs-list { margin: 8px 0; padding-left: 18px; color: #d8ccef; line-height: 1.6; }
.lcs-list li.got { color: #7dffb0; }
.lcs-actions { justify-content: flex-start !important; flex-wrap: wrap; margin-top: 14px; }
.lcs-prog { position: relative; height: 22px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--line); overflow: hidden; margin: 10px 0; }
.lcs-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #7a4dff, #f2c14e); }
.lcs-prog span { position: relative; display: block; text-align: center; font: 800 12px/22px var(--font-ui); }
.lcs-prog.sm { height: 8px; margin: 6px 0 0; } .lcs-prog.sm span { display: none; }
/* gems */
.lcs-gemrow { display: flex; gap: 20px; flex-wrap: wrap; }
.lcs-gempack { width: 260px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.lcs-gempack b { font: 900 24px var(--font-title); color: #bfefff; }
.lcs-gempack span { color: var(--muted); font-size: 13px; }
.lcs-gempack .btn { min-width: 160px; font-size: 20px; }
.lcs-gemart { height: 90px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.lcs-gemart i { width: 40px; height: 40px; background: linear-gradient(135deg, #c9f7ff, #4fb3ff 45%, #7a4dff); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); filter: drop-shadow(0 0 10px rgba(111,211,255,.8)); }
.lcs-gemart i:nth-child(even) { transform: translateY(12px) scale(.8); }
.lcs-paynote { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: rgba(111,211,255,.08); border: 1px solid rgba(111,211,255,.3); color: #d8f4ff; max-width: 860px; }
.lcs-receipts { margin-top: 18px; max-width: 520px; }
.lcs-receipts h3 { font-family: var(--font-title); letter-spacing: .1em; }
.lcs-receipts div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); color: #d8ccef; }
/* museum: calling card wardrobe */
.lcs-cardtop { display: flex; gap: 26px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.lcs-cardside .lead { text-align: left; }
.lcs-slots { display: flex; flex-direction: column; gap: 12px; }
.lcs-slot h4 { margin: 0 0 6px; font: 800 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lcs-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lcs-chips button { padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); font: 600 14px var(--font-ui); cursor: pointer; }
.lcs-chips button.on { background: rgba(242,193,78,.2); border-color: var(--gold); color: #fff4d6; }
/* grand hall cases */
.lcs-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.lcs-case { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 16px; text-align: center; color: var(--ink); cursor: default;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25)), #1a0e2a; border: 1px solid rgba(242,193,78,.25); }
.lcs-case.own { cursor: pointer; }
.lcs-case.fav { border-color: var(--gold); box-shadow: 0 0 22px rgba(242,193,78,.3); }
.lcs-glass { width: 120px; height: 120px; display: grid; place-items: center; border-radius: 12px 12px 4px 4px; background: radial-gradient(ellipse at 50% 90%, rgba(150,30,50,.55), rgba(40,10,30,.6) 60%), linear-gradient(160deg, rgba(255,255,255,.14), transparent 40%); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 -10px 20px rgba(0,0,0,.5); }
.lcs-glass .lcs-icon { width: 72px; height: 72px; filter: drop-shadow(0 0 10px rgba(242,193,78,.5)); }
.lcs-case.locked .lcs-icon { color: #000; opacity: .55; filter: none; }
.lcs-case b { font: 800 15px var(--font-title); }
.lcs-case span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.lcs-case em { font-style: normal; color: var(--gold); font-weight: 800; font-size: 12px; }
/* scene gallery dioramas */
.lcs-scenehead { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.lcs-frag { display: flex; gap: 10px; align-items: center; color: #d8ccef; }
.lcs-frag b { font: 900 24px var(--font-title); color: #bfefff; }
.lcs-dio { display: grid; grid-template-columns: 560px 1fr; gap: 18px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; }
.lcs-dio.ready { border-color: var(--gold); box-shadow: 0 0 24px rgba(242,193,78,.25); }
.lcs-pano { position: relative; height: 196px; display: flex; gap: 2px; border-radius: 12px; overflow: hidden; background: #0a0616; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.lcs-slice { flex: 1; position: relative; overflow: hidden; }
.lcs-slice img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.lcs-slice.miss img { filter: grayscale(1) brightness(.1); }
.lcs-slice.miss span { position: absolute; inset: 0; display: grid; place-items: center; font: 900 42px var(--font-title); color: rgba(210,190,255,.35); }
.lcs-dust, .lcs-ray { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.lcs-dio.alive .lcs-slice img { animation: dioPan 16s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -3s); }
.lcs-dio.alive .lcs-ray { opacity: 1; background: linear-gradient(105deg, transparent 30%, rgba(255,230,170,.2) 45%, transparent 60%); background-size: 300% 100%; animation: dioRay 8s ease-in-out infinite; mix-blend-mode: screen; }
.lcs-dio.alive .lcs-dust { opacity: .8; background: radial-gradient(circle, rgba(255,240,200,.8) 0 1px, transparent 2px) 0 0 / 40px 50px, radial-gradient(circle, rgba(255,240,200,.5) 0 1px, transparent 2px) 20px 10px / 64px 70px; animation: dioDust 14s linear infinite; }
@keyframes dioPan { from { transform: scale(1.06); } to { transform: scale(1.16) translateY(-4%); } }
@keyframes dioRay { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes dioDust { to { background-position: 20px -500px, 50px -490px; } }
.lcs-dioinfo { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lcs-dioinfo b { font: 900 20px var(--font-title); }
.lcs-dioinfo > span { color: var(--muted); font-size: 13px; letter-spacing: .06em; }
.lcs-dioinfo p { margin: 4px 0; font-family: var(--font-card); font-size: 15.5px; line-height: 1.5; color: #e9dcff; }
/* journals */
.lcs-journals { display: flex; flex-direction: column; gap: 16px; }
.lcs-journal { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c); }
.lcs-jhead { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.lcs-jav { width: 58px; height: 58px; border-radius: 50%; background-size: cover; background-position: 50% 16%; border: 2px solid var(--c); flex: none; }
.lcs-jhead b { display: block; font: 900 20px var(--font-title); }
.lcs-jhead span { color: var(--muted); font-size: 13px; }
.lcs-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lcs-page { padding: 12px 14px; border-radius: 10px; min-height: 120px; }
.lcs-page.open { background: linear-gradient(180deg, #efe3c6, #d9c9a2); color: #2a1a0c; box-shadow: inset 0 0 20px rgba(120,80,30,.3); }
.lcs-page.open h5 { margin: 0 0 6px; font: 900 15px var(--font-title); color: #5a2a10; }
.lcs-page.open p { margin: 0; font: 15px/1.45 var(--font-card); }
.lcs-page.shut { background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px), #140c24; border: 1px dashed var(--line); color: var(--muted); }
.lcs-page.shut h5 { margin: 0 0 6px; font: 800 14px var(--font-title); }
.lcs-page.shut p { margin: 0; font-size: 13px; }
/* music room + titles */
.lcs-records, .lcs-titles { display: flex; flex-direction: column; gap: 10px; }
.lcs-rec, .lcs-trow { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.lcs-rec .lcs-record i { width: 64px; height: 64px; }
.lcs-rec > div:nth-child(2), .lcs-tinfo { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lcs-rec b { font: 800 16px var(--font-title); } .lcs-rec span, .lcs-tinfo span { color: var(--muted); font-size: 13px; }
.lcs-rec.locked, .lcs-trow.locked { opacity: .65; }
.lcs-rec.locked .lcs-record i { filter: grayscale(1) brightness(.4); }
.lcs-trow.on { border-color: var(--gold); }
.lcs-trow.locked .lcs-plaque { filter: grayscale(1) brightness(.5); }
.lcs-trow .lcs-plaque { min-width: 260px; }
/* themed rooms */
.lcs-room { display: grid; grid-template-columns: 420px 1fr; gap: 22px; align-items: start; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.lcs-roomart svg { width: 100%; border-radius: 12px; display: block; }
.lcs-room.shut .lcs-roomart { filter: grayscale(1) brightness(.35); }
.lcs-roominfo h3 { font: 900 26px var(--font-title); margin: 0 0 6px; letter-spacing: .06em; }
.lcs-roominfo p { color: #d8ccef; }
/* starter chooser (hub, non-blocking) */
.lcs-starter { position: absolute; left: 470px; bottom: 128px; width: 610px; z-index: 7; padding: 14px 16px; border-radius: 20px; background: rgba(14,8,32,.95); border: 1px solid rgba(242,193,78,.55); box-shadow: 0 24px 50px rgba(0,0,0,.6); animation: lcsRise .5s cubic-bezier(.2,1.2,.3,1); }
@keyframes lcsRise { from { transform: translateY(30px); opacity: 0; } }
.lcs-sthead { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.lcs-sthead b { display: block; font: 900 20px var(--font-title); color: #fff4d6; }
.lcs-sthead span { font-size: 13px; color: var(--muted); }
.lcs-strow { display: flex; gap: 8px; margin-top: 10px; }
.lcs-strow button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.lcs-strow button:hover { border-color: var(--gold); background: rgba(242,193,78,.1); }
.lcs-strow button b { font: 800 15px var(--font-title); }
.lcs-strow button span { font-size: 11px; color: var(--muted); text-align: center; }
.lcs-strow.big button span { font-size: 13px; line-height: 1.35; padding: 0 6px; }
.lcs-stpet { height: 104px; }
/* VS intro, victory screen, pack opening */
.lcs-vs { position: absolute; inset: 0; z-index: 996; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 26px; background: radial-gradient(ellipse at 50% 50%, rgba(10,5,24,.82), rgba(10,5,24,.45) 70%, transparent); animation: lcsFade .35s ease-out; transition: opacity .6s; }
.lcs-vs.out { opacity: 0; }
.lcs-vs .vs-a { animation: vsL .6s cubic-bezier(.2,1.2,.3,1); }
.lcs-vs .vs-b { animation: vsR .6s cubic-bezier(.2,1.2,.3,1); }
.lcs-vs .vs-mid { font: 900 92px var(--font-title); color: #fff4d6; text-shadow: 0 0 30px #a86bff, 0 6px 14px #000; }
@keyframes vsL { from { transform: translateX(-500px); opacity: 0; } }
@keyframes vsR { from { transform: translateX(500px); opacity: 0; } }
@keyframes lcsFade { from { opacity: 0; } }
.lcs-unlocks { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: -6px 0 16px; }
.lcs-unlocks > span { color: var(--muted); font-size: 14px; }
.lcs-unlocks button { padding: 6px 14px; border-radius: 99px; background: rgba(242,193,78,.16); border: 1px solid var(--gold); color: #fff4d6; font: 700 14px var(--font-ui); cursor: pointer; }
.lcs-unlocks em { font-style: normal; color: #bfefff; font-weight: 700; }
.lcs-overopp { margin: 0 auto 16px; }
.lcs-packdrop { position: absolute; left: 40px; top: 30px; z-index: 5; display: flex; flex-direction: column; gap: 8px; animation: lcsRise .5s 1.2s both; pointer-events: none; }
.lcs-packdrop span { padding: 8px 14px; border-radius: 99px; background: rgba(12,6,28,.85); border: 1px solid rgba(111,211,255,.5); color: #d8f4ff; font: 800 14px var(--font-ui); }
.lcs-cardsheet { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; }

/* ================================================================ card treatments from this lane (season.css styles the Seasons ones) */
.cs-engraving .card .face .art { filter: grayscale(1) contrast(1.3) brightness(1.04) sepia(.28); }
.cs-engraving .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(45deg, rgba(20,34,26,.09) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; box-shadow: inset 0 0 0 1.2cqw rgba(40,60,50,.55); }
.cs-oil-portrait .card .face .art { filter: saturate(1.35) contrast(1.08) brightness(.97); }
.cs-oil-portrait .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(90,60,20,.06) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(90,60,20,.05) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 35%, transparent 58%, rgba(40,20,5,.32));
  box-shadow: inset 0 0 0 1.4cqw #6b4a1a, inset 0 0 0 2.1cqw #c9a24e; }
.cs-newspaper-print .card .face .art { filter: grayscale(1) contrast(1.55) brightness(1.06); }
.cs-newspaper-print .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply;
  background: radial-gradient(circle, rgba(0,0,0,.2) 0 .6px, transparent .9px) 0 0 / 3px 3px, rgba(238,228,200,.14); }

/* ================================================================ phones (landscape, stage scaled down) */
body.mobile .lcs-wrap { top: 108px; bottom: 172px; left: 20px; right: 20px; }
body.mobile .lcs-rail { width: 280px; }
body.mobile .lcs-rail button { font-size: 22px; padding: 20px 20px; }
body.mobile .lcs-intro, body.mobile .lcs-how, body.mobile .lcs-dioinfo p { font-size: 21px; }
body.mobile .lcs-small, body.mobile .lcs-case span, body.mobile .lcs-rec span, body.mobile .lcs-tinfo span, body.mobile .lcs-earn { font-size: 18px; }
body.mobile .lcs-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
body.mobile .lcs-tile { min-height: 320px; padding: 16px; }
body.mobile .lcs-prev { height: 190px; }
body.mobile .lcs-meta b, body.mobile .lcs-case b, body.mobile .lcs-rec b { font-size: 24px; }
body.mobile .lcs-price b { font-size: 26px; } body.mobile .lcs-price .coin, body.mobile .lcs-price .gemicon { width: 26px; height: 26px; }
body.mobile .lcs-rar { font-size: 14px; }
body.mobile .lcs-chips button { font-size: 20px; padding: 16px 22px; }
body.mobile .lcs-slot h4 { font-size: 16px; }
body.mobile .lcs-sum span { font-size: 16px; }
body.mobile .lcs-sheet { grid-template-columns: 520px 1fr; }
body.mobile .lcs-gempack { width: 320px; } body.mobile .lcs-gempack b { font-size: 32px; } body.mobile .lcs-gempack span { font-size: 18px; } body.mobile .lcs-gempack .btn { font-size: 28px; padding: 18px; }
body.mobile .lcs-paynote { font-size: 20px; }
body.mobile .lcs-cases { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
body.mobile .lcs-page.open p, body.mobile .lcs-page.shut p { font-size: 19px; }
body.mobile .lcs-page h5 { font-size: 20px !important; }
body.mobile .lcs-dio { grid-template-columns: 600px 1fr; }
body.mobile .lcs-dioinfo b { font-size: 26px; }
body.mobile .lcs-starter { width: 860px; bottom: 170px; left: 440px; }
body.mobile .lcs-sthead b { font-size: 28px; } body.mobile .lcs-sthead span { font-size: 18px; }
body.mobile .lcs-strow button { padding: 12px 6px; } body.mobile .lcs-strow button b { font-size: 22px; } body.mobile .lcs-strow button span { font-size: 16px; }
body.mobile .lcs-unlocks button, body.mobile .lcs-packdrop span { font-size: 20px; padding: 10px 18px; }
body.mobile .lcs-trow .lcs-plaque { min-width: 320px; }
/* previews: lighter calm overlays so a thumbnail reads at a glance */
.lcb-preview .lcb-lanes { opacity: .35; }
.lcb-preview .lcb::after { opacity: .45; }
.lcb-preview .lcb-crossroads { --dawn: .55; }

/* ================================================================ Arena pass (lane 3): store, museum, calling cards */
/* calling card: long names shrink to fit instead of truncating; medallion portraits */
.cc-text b { font-size: calc(26px * min(1, 12 / var(--nl, 12))); line-height: 1.15; }
.cc-sm .cc-text b { font-size: calc(19px * min(1, 12 / var(--nl, 12))); }
.cc-lg .cc-text b { font-size: calc(34px * min(1, 12 / var(--nl, 12))); }
.cc-portrait.cc-medal { border: 0; background-size: 112%; background-position: 50% 50%; box-shadow: 0 6px 16px rgba(0,0,0,.6), 0 0 18px color-mix(in srgb, var(--c, #a86bff) 45%, transparent); }
.lcs-medals { display: grid; grid-template-columns: repeat(auto-fill, 62px); gap: 10px; margin-top: 10px; max-width: 900px; }
.lcs-medal { appearance: none; width: 62px; height: 62px; padding: 0; border-radius: 50%; border: 0; background: rgba(10,5,24,.6); cursor: pointer; position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.45); transition: transform .25s var(--ease-back, cubic-bezier(.2,.9,.3,1.35)), box-shadow .2s, filter .2s; filter: saturate(.85) brightness(.9); }
.lcs-medal img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.lcs-medal:hover { transform: translateY(-4px) scale(1.06); filter: none; }
.lcs-medal.on { filter: none; transform: scale(1.08); box-shadow: 0 0 0 3px #f6d98a, 0 0 22px rgba(242,193,78,.7), 0 6px 14px rgba(0,0,0,.45); }
.lcs-medal.on::after { content: "\2713"; position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 900 12px var(--font-ui); color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
body.mobile .lcs-medals { grid-template-columns: repeat(auto-fill, 88px); gap: 14px; } body.mobile .lcs-medal { width: 88px; height: 88px; }

/* rails: engraved menu with a gold edge on the active room */
.lcs-rail { gap: 5px; padding-right: 4px; }
.lcs-rail button { position: relative; padding: 13px 16px 13px 20px; border-radius: 12px; border: 1px solid rgba(232,186,90,.14); background: linear-gradient(180deg, rgba(30,17,58,.72), rgba(14,8,28,.78)); color: #cbb9ee;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out, ease-out); }
.lcs-rail button:hover { color: #fff; border-color: rgba(232,186,90,.4); transform: translateX(3px); background: linear-gradient(180deg, rgba(60,34,110,.8), rgba(24,13,48,.85)); }
.lcs-rail button.on { color: #fff4d6; border-color: rgba(232,186,90,.55); background: linear-gradient(90deg, rgba(120,70,210,.6), rgba(60,30,120,.45)); box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 18px rgba(120,60,220,.3); }
.lcs-rail button.on::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #fff0c2, #e2b04a); box-shadow: 0 0 8px rgba(242,193,78,.8); }
.lcs-intro { font-size: 14.5px; color: #cdbfe8; padding-left: 14px; border-left: 2px solid rgba(232,186,90,.45); }
.lcs-sum span { background: linear-gradient(180deg, rgba(10,6,22,.9), rgba(26,14,50,.85)); border-color: rgba(232,186,90,.3); font-weight: 700; letter-spacing: .04em; }

/* store tiles: framed, lifted, with a clear price / owned / equipped state */
.lcs-grid { gap: 18px; }
.lcs-tile { position: relative; overflow: hidden; border-radius: 16px; padding: 12px 12px 14px; border: 1px solid rgba(232,186,90,.26);
  background: linear-gradient(180deg, rgba(34,19,64,.9), rgba(14,8,28,.94)); box-shadow: 0 16px 34px rgba(0,0,0,.5);
  transition: transform .3s var(--ease-back, cubic-bezier(.2,.9,.3,1.35)), border-color .25s, box-shadow .3s; }
.lcs-tile::before { content: ""; position: absolute; inset: 6px; pointer-events: none; border-radius: 12px; z-index: 2; opacity: .75;
  background: linear-gradient(#e2b04a, #e2b04a) left top / 14px 1.5px no-repeat, linear-gradient(#e2b04a, #e2b04a) left top / 1.5px 14px no-repeat,
    linear-gradient(#e2b04a, #e2b04a) right top / 14px 1.5px no-repeat, linear-gradient(#e2b04a, #e2b04a) right top / 1.5px 14px no-repeat,
    linear-gradient(#e2b04a, #e2b04a) left bottom / 14px 1.5px no-repeat, linear-gradient(#e2b04a, #e2b04a) left bottom / 1.5px 14px no-repeat,
    linear-gradient(#e2b04a, #e2b04a) right bottom / 14px 1.5px no-repeat, linear-gradient(#e2b04a, #e2b04a) right bottom / 1.5px 14px no-repeat; }
.lcs-tile:hover { transform: translateY(-6px); border-color: #f6d98a; box-shadow: 0 24px 44px rgba(0,0,0,.6), 0 0 26px rgba(242,193,78,.3); }
.lcs-tile:active { transform: translateY(-2px) scale(.99); }
.lcs-prev { border-radius: 11px; border: 1px solid rgba(255,255,255,.06); background: radial-gradient(ellipse at 50% 30%, rgba(150,95,255,.28), rgba(10,5,24,.85) 75%); }
.lcs-prev > * { transition: transform .4s var(--ease-out, ease-out); }
.lcs-tile:hover .lcs-prev > * { transform: scale(1.04); }
.lcs-meta b { font-size: 16.5px; color: #fff4d6; }
.lcs-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(232,186,90,.14); }
.lcs-price { padding: 6px 14px; border-radius: 99px; background: rgba(8,4,18,.7); border: 1px solid rgba(232,186,90,.35); }
.lcs-owned { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: rgba(93,255,154,.1); border: 1px solid rgba(93,255,154,.4); font-size: 13px; letter-spacing: .06em; }
.lcs-tile.own .lcs-foot::after { content: "Tap to equip"; font: 600 12px var(--font-ui); color: var(--muted); }
.lcs-tile.eq { border-color: #f6d98a; box-shadow: 0 0 0 1px #f6d98a inset, 0 16px 34px rgba(0,0,0,.5), 0 0 24px rgba(242,193,78,.25); }
.lcs-tile.eq .lcs-foot::after { content: "Equipped"; font: 900 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: #2b1600; padding: 5px 11px; border-radius: 99px; background: linear-gradient(180deg, #fff0c2, #e2b04a); }
.lcs-earn { font-style: italic; }
.lcs-gempack { border-color: rgba(232,186,90,.3); background: linear-gradient(180deg, rgba(34,19,64,.9), rgba(14,8,28,.94)); box-shadow: 0 16px 34px rgba(0,0,0,.5); transition: transform .3s var(--ease-back, ease-out), border-color .25s; }
.lcs-gempack:hover { transform: translateY(-5px); border-color: #9fe3ff; }
.lcs-gemart i { animation: gemBob 3.4s ease-in-out infinite; }
.lcs-gemart i:nth-child(2) { animation-delay: -.7s; } .lcs-gemart i:nth-child(3) { animation-delay: -1.4s; } .lcs-gemart i:nth-child(4) { animation-delay: -2.1s; }
@keyframes gemBob { 50% { translate: 0 -5px; } }

/* museum panels share the arena frame */
.lcs-case, .lcs-dio, .lcs-journal, .lcs-rec, .lcs-trow, .lcs-room { border-color: rgba(232,186,90,.24); background: linear-gradient(180deg, rgba(34,19,64,.86), rgba(14,8,28,.92)); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.lcs-journal { border-left: 4px solid var(--c); }
.lcs-case { transition: transform .3s var(--ease-back, ease-out), border-color .25s, box-shadow .3s; }
.lcs-case.own:hover { transform: translateY(-5px); border-color: #f6d98a; box-shadow: 0 22px 40px rgba(0,0,0,.55), 0 0 24px rgba(242,193,78,.3); }
.lcs-case.own .lcs-glass { box-shadow: inset 0 -10px 20px rgba(0,0,0,.5), 0 0 24px rgba(242,193,78,.18); }
.lcs-dio.ready { border-color: #f6d98a; }
.lcs-cardtop { padding: 18px; border-radius: 18px; border: 1px solid rgba(232,186,90,.22); background: radial-gradient(ellipse 60% 90% at 30% 50%, rgba(120,70,210,.25), transparent 70%), rgba(10,5,24,.55); }
.lcs-slot { padding: 12px 14px; border-radius: 14px; background: rgba(10,5,24,.5); border: 1px solid rgba(232,186,90,.12); }
.lcs-slot h4 { color: #e2b04a; }
.lcs-chips button { transition: background .2s, border-color .2s, transform .2s var(--ease-back, ease-out); }
.lcs-chips button:hover { border-color: rgba(232,186,90,.55); transform: translateY(-1px); }
.lcs-chips button.on { background: linear-gradient(180deg, rgba(242,193,78,.3), rgba(160,110,30,.25)); border-color: #f6d98a; box-shadow: 0 0 14px rgba(242,193,78,.25); }
body.theme-midnight .lcs-tile, body.theme-midnight .lcs-case, body.theme-midnight .lcs-dio, body.theme-midnight .lcs-journal, body.theme-midnight .lcs-rec, body.theme-midnight .lcs-trow, body.theme-midnight .lcs-room, body.theme-midnight .lcs-rail button, body.theme-midnight .lcs-gempack { background: rgba(6,6,10,.94); }
body.fx-low .lcs-gemart i { animation: none; }
@media (prefers-reduced-motion: reduce) { .lcs-gemart i { animation: none !important; } .lcs-tile, .lcs-case, .lcs-medal { transition: none !important; } }
/* ================================================================ lane 7: payments (gem checkout, legal notes, purchase history) */
.lcs-gempack .lcs-usd { color: #ffe7a3; font: 800 16px var(--font-ui); letter-spacing: .02em; }
.lcs-gempack .btn.soon { opacity: .75; filter: saturate(.4); cursor: default; }
.lcs-legalbox { max-width: 860px; }
.lcs-legal { margin: 14px 0 0; padding-left: 20px; color: #d8ccef; font-size: 14px; line-height: 1.55; }
.lcs-legal li { margin: 2px 0; }
.lcs-payfoot { margin-top: 14px; }
.lcs-buyhead { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 6px 0 10px; }
.lcs-buyhead > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lcs-buyhead b { font: 900 30px var(--font-title); color: #bfefff; }
.lcs-buyhead span { color: var(--muted); font-size: 14px; }
.lcs-buyhead em { font-style: normal; font: 800 22px var(--font-ui); color: #ffe7a3; }
.lcs-ppbox { width: min(420px, 100%); margin: 12px auto 4px; min-height: 60px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.lcs-ppbox > .btn { align-self: center; }
.lcs-pploading { text-align: center; color: #d8f4ff; padding: 14px; border-radius: 12px; background: rgba(111,211,255,.08); border: 1px solid rgba(111,211,255,.3); }
.lcs-buysheet .actions { flex-wrap: wrap; }
.lcs-thanks { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 10px; }
.lcs-thanks b { font: 900 34px var(--font-title); color: #bfefff; }
.lcs-thanks span { color: #d8ccef; }
.lcs-history { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; margin: 6px 0; text-align: left; }
.lcs-hrow { display: grid; grid-template-columns: 1fr 1.3fr .9fr 1.2fr; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: #e9dcff; font-size: 15px; align-items: center; }
.lcs-hrow em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
.lcs-hhead { color: var(--muted); font: 800 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.lcs-hrow .st-fulfilled { color: #7dffb0; } .lcs-hrow .st-refunded, .lcs-hrow .st-partially_refunded { color: #ffd98a; }
.lcs-hrow .st-failed, .lcs-hrow .st-review { color: #ff9b9b; }
body.mobile .lcs-gempack .lcs-usd { font-size: 22px; }
body.mobile .lcs-legal { font-size: 19px; }
body.mobile .lcs-buyhead b { font-size: 38px; } body.mobile .lcs-buyhead span { font-size: 19px; } body.mobile .lcs-buyhead em { font-size: 28px; }
body.mobile .lcs-pploading { font-size: 20px; }
body.mobile .lcs-hrow { font-size: 20px; } body.mobile .lcs-hrow em { font-size: 16px; } body.mobile .lcs-hhead { font-size: 15px; }
body.portrait #store .lcs-gempack .lcs-usd { font-size: 26px; }
body.portrait #store .lcs-legal { font-size: 23px; line-height: 1.45; }
body.portrait #sheet .lcs-buyhead b { font-size: 44px; } body.portrait #sheet .lcs-buyhead span { font-size: 24px; } body.portrait #sheet .lcs-buyhead em { font-size: 34px; }
body.portrait #sheet .lcs-ppbox { width: 100%; }
body.portrait #sheet .lcs-pploading { font-size: 24px; }
body.portrait #sheet .lcs-hrow { font-size: 22px; grid-template-columns: 1fr 1.2fr 1fr 1.1fr; } body.portrait #sheet .lcs-hrow em { font-size: 18px; }
body.portrait #sheet .lcs-history { max-height: none; overflow: visible; }
body.mobile .lcs-thanks b { font-size: 40px; } body.mobile .lcs-thanks span { font-size: 20px; }
body.portrait #sheet .lcs-thanks b { font-size: 48px; } body.portrait #sheet .lcs-thanks span { font-size: 24px; }
body.portrait #sheet .lcs-buysheet .lcs-small, body.portrait #sheet .lcs-histsheet .lcs-small { font-size: 22px; line-height: 1.4; }
#ppButtons { background: #fff; border-radius: 14px; padding: 10px 12px 2px; }
body.mobile .lcs-ppbox { width: min(760px, 100%); }