/* MEME ROYALE — night trading terminal x die-cut meme stickers (art/mockups/NOTES.md). Mobile first, portrait. */
@font-face { font-family: 'Lilita One'; src: url(../../assets/fonts/lilita.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Rubik'; src: url(../../assets/fonts/rubik.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
:root {
  --ink: #0B0C10; --panel: #10151F; --panel2: #161B26; --panel3: #1F2636; --paper: #F2EEDF;
  --bull: #7CFF6B; --bull-a: #ACF360; --bull-b: #80E03C; --bull-lip: #4FB52A;
  --bear: #FF4D6D; --bear-glow: #FF3355;
  --cop: #B250F6; --cop-hi: #D9A6FF; --cop-lo: #6230A0; --cop-empty: #1F1C3C; --cop-a: #7B3FE4; --cop-b: #A35BFF;
  --cash: #FFC84A; --cash-d: #E09A1A; --rare: #4CC9F0; --epic: #C77DFF; --common: #AEB6C2;
  --disp: 'Lilita One', 'Arial Black', sans-serif; --num: 'Rubik', system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --col: min(100vw, 62vh);   /* the portrait column the UI lives in, on any screen */
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--paper); font-family: var(--num); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; touch-action: none; }
canvas#gl, canvas#ov { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#ov { pointer-events: none; z-index: 2; }
#ui { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#ui > * { pointer-events: auto; }
/* overlays that only show something must never eat touches (the first match's tutorial blocked every drag on phones) */
#ui > .tut, #ui > .banner, #ui > .toast, #ui > .bubble, #ui > .flyw, #ui > .flycard, #ui > .dragcard, #ui .tut * { pointer-events: none !important; }
#ui .col { position: absolute; left: 50%; transform: translateX(-50%); width: calc(var(--col) - 12px); }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }

/* ---------- type */
.disp { font-family: var(--disp); text-transform: uppercase; letter-spacing: .5px; }
.stroke { color: var(--paper); text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 0 4px 0 var(--ink); }
.stroke-s { text-shadow: -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink), 0 2.5px 0 var(--ink); }
.num { font-family: var(--num); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- panels (terminal glass with a neon rim and corner brackets) */
.panel { position: relative; background: rgba(16, 21, 31, .93); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(124, 255, 107, .42), 0 0 8px rgba(124, 255, 107, .2), 0 4px 0 var(--ink);
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 12px 12px; }
.panel.red { box-shadow: inset 0 0 0 2px rgba(255, 77, 109, .5), 0 0 10px rgba(255, 51, 85, .25), 0 4px 0 var(--ink); }
.panel.plain { box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 4px 0 var(--ink); }
.brk::before, .brk::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--bull); pointer-events: none; }
.brk::before { left: 5px; top: 5px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.brk::after { right: 5px; bottom: 5px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: rgba(11, 12, 16, .6); border: 2px solid var(--ink); }

/* ---------- buttons: fat glossy vinyl stickers */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  font-family: var(--disp); font-size: 22px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink);
  background: linear-gradient(var(--bull-a), var(--bull-b)); border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: inset 0 -5px 0 var(--bull-lip), 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink), 0 5px 0 5.5px var(--ink);
  text-shadow: -1.5px -1.5px 0 var(--paper), 1.5px -1.5px 0 var(--paper), -1.5px 1.5px 0 var(--paper), 1.5px 1.5px 0 var(--paper);
  transition: transform .08s, box-shadow .08s; }
.btn::after { content: ''; position: absolute; left: 8px; right: 8px; top: 4px; height: 34%; border-radius: 10px; background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.15)); pointer-events: none; }
.btn:active, .btn.press { transform: translateY(4px); box-shadow: inset 0 -3px 0 var(--bull-lip), 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink), 0 1px 0 5.5px var(--ink); }
.btn.yellow { background: linear-gradient(#FFE07A, var(--cash)); box-shadow: inset 0 -5px 0 var(--cash-d), 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink), 0 5px 0 5.5px var(--ink); }
.btn.red { background: linear-gradient(#FF8098, var(--bear)); color: var(--paper); text-shadow: 0 2px 0 var(--ink), -1.5px 0 0 var(--ink), 1.5px 0 0 var(--ink), 0 -1.5px 0 var(--ink); box-shadow: inset 0 -5px 0 #C0213F, 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink), 0 5px 0 5.5px var(--ink); }
.btn.dark { background: linear-gradient(#2a3346, #1a2030); color: var(--paper); text-shadow: 0 2px 0 var(--ink); box-shadow: inset 0 -5px 0 #0f131c, 0 0 0 3px #3a4560, 0 0 0 5.5px var(--ink), 0 5px 0 5.5px var(--ink); }
.btn.purple { background: linear-gradient(#C08CFF, var(--cop)); color: var(--paper); text-shadow: 0 2px 0 var(--ink), -1.5px 0 0 var(--ink), 1.5px 0 0 var(--ink), 0 -1.5px 0 var(--ink); box-shadow: inset 0 -5px 0 #6a2db8, 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink), 0 5px 0 5.5px var(--ink); }
.btn.small { min-height: 38px; font-size: 16px; padding: 0 14px; border-radius: 12px; }
.btn[disabled] { filter: grayscale(.85) brightness(.75); pointer-events: none; }
.icon-btn { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(#232b3d, #151a26); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 4px 0 var(--ink); }
.icon-btn img { width: 32px; height: 32px; object-fit: contain; }
.icon-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 1px 0 var(--ink); }

/* ---------- boot */
#boot { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 22px; background: radial-gradient(ellipse at 50% 40%, #16231a, var(--ink) 70%); transition: opacity .5s; }
#boot.out { opacity: 0; pointer-events: none; }
.boot-logo { font-family: var(--disp); font-size: 54px; letter-spacing: 1px; color: var(--paper); text-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(124,255,107,.35); }
.boot-logo b { color: var(--bull); font-weight: 400; }
.boot-img { width: min(84vw, 420px); filter: drop-shadow(0 6px 0 var(--ink)) drop-shadow(0 0 30px rgba(124,255,107,.25)); animation: slap .5s; }
.boot-img + .boot-logo { display: none; }
#boot { background: linear-gradient(rgba(11,12,16,.35), rgba(11,12,16,.85)), url(../../assets/ui/bg_loading.webp) center / cover, radial-gradient(ellipse at 50% 40%, #16231a, var(--ink) 70%); }
#boot .play { font-family: var(--disp); font-size: 22px; letter-spacing: 1px; animation: blink .9s infinite alternate; text-shadow: 0 3px 0 var(--ink); margin-top: 6px; }
#boot.ready .boot-bar, #boot.ready .boot-tip { display: none; }
.boot-bar { width: 220px; height: 16px; border-radius: 99px; border: 3px solid var(--ink); background: var(--cop-empty); overflow: hidden; box-shadow: 0 0 0 2px rgba(178, 80, 246, .4); }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cop-a), var(--cop-hi)); transition: width .25s; }
.boot-tip { font-size: 13px; opacity: .7; font-weight: 600; }

/* =================== BATTLE HUD =================== */
.hud-top { top: calc(var(--sat) + 6px); display: flex; align-items: center; gap: 8px; padding: 7px 9px; height: 64px; }
.hud-top .ava { width: 46px; height: 46px; border-radius: 11px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4.5px var(--ink); flex: none; background: #2a1820; }
.hud-top .ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hud-top .who { min-width: 0; flex: 1; display: grid; gap: 3px; }
.hud-top .name { font-family: var(--disp); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-pill { display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 19px; padding: 0 8px 0 3px; border-radius: 99px; background: #4b2a86; border: 2px solid var(--ink); font-family: var(--disp); font-size: 11px; color: #e7d4ff; }
.lg-pill img { width: 18px; height: 18px; margin: -3px 0; }
.timer { flex: none; display: grid; justify-items: center; padding: 3px 12px 2px; min-width: 86px; border-radius: 12px; background: #120609; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255,51,85,.55), 0 0 12px rgba(255,51,85,.3); }
.timer .t { font-family: var(--num); font-weight: 800; font-size: 25px; line-height: 1; color: #ff5470; text-shadow: 0 0 10px rgba(255,51,85,.8); font-variant-numeric: tabular-nums; }
.timer .lbl { font-family: var(--disp); font-size: 9px; color: #ff9aac; letter-spacing: 1px; height: 11px; }
.timer.od .t { color: #d9a6ff; text-shadow: 0 0 10px rgba(178,80,246,.9); } .timer.od { box-shadow: inset 0 0 0 2px rgba(178,80,246,.7), 0 0 14px rgba(178,80,246,.45); }
.timer.ot .t { color: var(--cash); text-shadow: 0 0 10px rgba(255,200,74,.8); }
.wbox { display: flex; gap: 6px; align-items: center; }
.wbox .w { display: flex; align-items: center; gap: 2px; font-family: var(--num); font-weight: 900; font-size: 22px; }
.wbox img { width: 32px; height: 32px; filter: drop-shadow(0 2px 0 var(--ink)); }
.wbox .w.pop { animation: slap .4s; }

.tray { bottom: calc(var(--sab) + 6px); padding: 9px 9px 8px; display: grid; grid-template-columns: 17% 1fr; grid-template-rows: auto auto; gap: 7px 8px; }
.tray .next { display: grid; justify-items: center; align-content: center; gap: 2px; }
.tray .next .lbl { font-family: var(--disp); font-size: 12px; }
.hand { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.copium { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; }
.copium .can { position: relative; width: 44px; height: 44px; flex: none; }
.copium .can img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 var(--ink)); }
.copium .count { font-family: var(--num); font-weight: 900; font-size: 30px; width: 34px; text-align: center; line-height: 1; }
.copium .bar { flex: 1; position: relative; height: 30px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; padding: 4px; border-radius: 10px; background: #0d0b1a; border: 3px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(178,80,246,.35); }
.copium .lbl { position: absolute; left: 4px; top: -15px; font-family: var(--disp); font-size: 11px; color: var(--cop-hi); }
.seg { position: relative; border-radius: 5px; background: var(--cop-empty); overflow: hidden; }
.seg i { position: absolute; inset: 0; width: 0; background: linear-gradient(var(--cop-b), var(--cop-a)); opacity: .55; }
.seg.on { background: linear-gradient(#C98BFF, var(--cop)); box-shadow: inset 0 0 0 1.5px var(--cop-hi), 0 0 8px rgba(178,80,246,.6); }
.seg.on::after { content: ''; position: absolute; left: 2px; right: 2px; top: 2px; height: 35%; border-radius: 3px; background: rgba(255,255,255,.35); }
.seg.on i { display: none; }
.copium.od .seg.on { animation: odpulse .6s infinite alternate; }
@keyframes odpulse { to { box-shadow: inset 0 0 0 1.5px #fff, 0 0 14px rgba(217,166,255,.9); } }
.copium.flash .bar { animation: deny .32s; }
@keyframes deny { 25% { transform: translateX(-5px); box-shadow: 0 0 0 2px var(--bear); } 75% { transform: translateX(5px); } }

/* ---------- cards */
.card { position: relative; aspect-ratio: 4 / 5; border-radius: 9px; border: 3px solid var(--ink); background: #1a2030 center / cover no-repeat;
  box-shadow: inset 0 0 0 3px var(--rc, var(--paper)), 0 4px 0 var(--ink); transition: transform .14s cubic-bezier(.3,1.6,.5,1), filter .2s, box-shadow .14s; touch-action: none; }
.card .art { position: absolute; inset: 3px; border-radius: 5px; background: center 18% / cover no-repeat; }
.card .art::after { content: ''; position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(transparent 55%, rgba(11,12,16,.85)); }
.card .cost { position: absolute; left: -7px; top: -8px; width: 27px; height: 30px; display: grid; place-items: center; font-family: var(--num); font-weight: 900; font-size: 16px; color: var(--paper);
  background: linear-gradient(var(--cop-b), var(--cop-a)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: 2; text-shadow: 0 1.5px 0 var(--ink); }
.card .cost::before { content: ''; position: absolute; inset: 0; z-index: -1; }
.card .costw { position: absolute; left: -9px; top: -10px; width: 31px; height: 34px; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: 1; }
.card .nm { position: absolute; left: 3px; right: 3px; bottom: 3px; padding: 2px 3px 3px; font-family: var(--disp); font-size: 10px; text-align: center; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--paper); text-shadow: 0 1.5px 0 var(--ink); }
.card .lvl { position: absolute; right: 4px; top: 4px; font-family: var(--disp); font-size: 9px; padding: 1px 4px; border-radius: 4px; background: rgba(11,12,16,.75); color: var(--paper); }
.card.rare { --rc: var(--rare); } .card.epic { --rc: var(--epic); } .card.legendary { --rc: var(--cash); } .card.common { --rc: var(--paper); }
.card.rare .art { box-shadow: inset 0 0 18px rgba(76,201,240,.35); } .card.epic .art { box-shadow: inset 0 0 18px rgba(199,125,255,.4); } .card.legendary .art { box-shadow: inset 0 0 20px rgba(255,200,74,.45); }
.hand .card.poor { filter: grayscale(.65) brightness(.72); }
.hand .card.sel { transform: translateY(-14px); box-shadow: inset 0 0 0 3px var(--bull), 0 0 0 3px var(--bull), 0 0 18px rgba(124,255,107,.75), 0 4px 0 var(--ink); }
.hand .card.drag { opacity: .35; }
.hand .card.enter { animation: cardin .32s cubic-bezier(.3,1.5,.5,1); }
@keyframes cardin { from { transform: translateY(40px) scale(.6) rotate(-6deg); opacity: 0; } }
.next .card { width: 72%; }
.card .fill { position: absolute; left: 3px; right: 3px; bottom: 3px; border-radius: 0 0 5px 5px; background: rgba(178,80,246,.0); }
.dragcard { position: fixed; z-index: 20; pointer-events: none; width: 74px; transform: translate(-50%, -60%) scale(1.05) rotate(-4deg); transition: opacity .12s, transform .12s; }
.dragcard.over { opacity: 0; transform: translate(-50%, -60%) scale(.5); }

/* ---------- emotes and banners */
.emote-btn { position: absolute; right: 8px; width: 46px; height: 46px; }
.emote-menu { position: absolute; right: 8px; display: grid; grid-template-columns: repeat(3, 64px); gap: 6px; padding: 8px; transform-origin: bottom right; animation: slap .22s; }
.emote-menu button { width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,.04); }
.emote-menu img { width: 100%; height: 100%; object-fit: contain; }
.bubble { position: absolute; width: 120px; pointer-events: none; animation: bubble 2.4s forwards; filter: drop-shadow(0 4px 0 var(--ink)); }
@keyframes bubble { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 10% { transform: scale(1.15) rotate(4deg); opacity: 1; } 18% { transform: scale(.95) rotate(-2deg); } 24%, 86% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(.8) translateY(-14px); opacity: 0; } }
.banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; white-space: nowrap; }
.banner { max-width: 94vw; white-space: normal; }
.banner .big { font-family: var(--disp); font-size: clamp(30px, 10.5vw, 64px); line-height: .95; }
.banner.red .big { color: #ffb3c1; } .banner.purple .big { color: #e3c2ff; }
.banner.red .big, .banner.purple .big { text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 4px 0 var(--ink), 0 0 22px currentColor; }
.banner .sub { font-family: var(--disp); font-size: 18px; margin-top: 6px; }
.banner.in { animation: bannerin 2.2s forwards; }
@keyframes bannerin { 0% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(.92); opacity: 1; } 18% { transform: translate(-50%, -50%) scale(1.04); } 24%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } }
.count3 .big { font-size: 110px; }
.toast { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--sat) + 80px); padding: 8px 16px; font-family: var(--disp); font-size: 16px; animation: toast 1.6s forwards; pointer-events: none; white-space: nowrap; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.flyw { position: absolute; width: 80px; height: 80px; z-index: 9; pointer-events: none; filter: drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 0 14px rgba(255,255,255,.5)); transition: transform 1s cubic-bezier(.5,-0.3,.4,1); animation: slap .35s; }
@keyframes slap { 0% { transform: scale(1.3); } 55% { transform: scale(.92); } 100% { transform: scale(1); } }

.tut { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.tut-dot { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255,255,255,.55) 31% 45%, rgba(124,255,107,.0) 46%); box-shadow: 0 0 0 3px rgba(124,255,107,.8), 0 0 18px rgba(124,255,107,.7); animation: tutmove 2.2s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes tutmove { 0% { transform: translate(var(--x0), var(--y0)) scale(1.3); opacity: 0; } 12% { transform: translate(var(--x0), var(--y0)) scale(.9); opacity: 1; } 70% { transform: translate(var(--x1), var(--y1)) scale(.9); opacity: 1; } 85% { transform: translate(var(--x1), var(--y1)) scale(1.4); opacity: 0; } 100% { opacity: 0; } }
.tut-txt { position: absolute; left: 50%; top: 52%; transform: translateX(-50%); padding: 10px 16px; font-family: var(--disp); font-size: 17px; white-space: nowrap; animation: slap .4s; }
.tut-txt b { color: var(--bull); font-weight: 400; }

/* =================== RESULTS =================== */
.results { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 20px 16px calc(var(--sab) + 24px); background: radial-gradient(ellipse at 50% 35%, rgba(11,12,16,.35), rgba(11,12,16,.92) 75%); animation: fadein .5s; }
@keyframes fadein { from { opacity: 0; } }
.ribbon { position: relative; width: min(92vw, 420px); aspect-ratio: 3.4; display: grid; place-items: center; background: center / contain no-repeat; animation: slap .5s .1s backwards; }
.ribbon span { font-family: var(--disp); font-size: clamp(40px, 13vw, 62px); transform: rotate(-3deg) translateY(-4px); }
.score { display: flex; gap: 28px; align-items: center; animation: slap .5s .35s backwards; }
.score .side { display: grid; justify-items: center; gap: 4px; }
.score .side .n { font-family: var(--disp); font-size: 15px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score .ws { display: flex; gap: 2px; }
.score .ws img { width: 38px; height: 38px; filter: drop-shadow(0 3px 0 var(--ink)); }
.score .ws img.off { filter: grayscale(1) brightness(.35); }
.score .vs { font-family: var(--disp); font-size: 22px; opacity: .6; }
.rewards { width: min(92vw, 420px); padding: 14px 12px 12px; display: grid; gap: 10px; animation: fadein .4s .6s backwards; }
.rewards h3 { margin: -4px 0 0; font-family: var(--disp); font-weight: 400; font-size: 15px; color: var(--bull); text-align: center; letter-spacing: 1px; }
.rw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rw > div { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 12px; background: rgba(255,255,255,.04); border: 2px solid var(--ink); }
.rw img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 0 var(--ink)); }
.rw .v { font-family: var(--num); font-weight: 900; font-size: 19px; }
.rw .k { font-family: var(--disp); font-size: 10px; opacity: .75; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: 11px; opacity: .85; }
.stats b { display: block; font-family: var(--num); font-weight: 800; font-size: 16px; }
.results .row { display: flex; gap: 14px; animation: fadein .4s .9s backwards; }

/* =================== HUB / MENUS =================== */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; animation: fadein .25s; }
.hub-top { display: flex; gap: 6px; margin: calc(var(--sat) + 8px) 8px 0; }
.prof { flex: 1; display: flex; align-items: center; gap: 9px; padding: 7px; min-width: 0; }
.prof .ava { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4.5px var(--ink); flex: none; background: #1d2a20; }
.prof .ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.prof .nm { font-family: var(--disp); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof .row { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.pill img { width: 18px; height: 18px; object-fit: contain; }
.pill .num { font-size: 14px; color: var(--cash); }
.money { display: flex; align-items: center; gap: 6px; padding: 7px 9px; }
.money img { width: 30px; height: 30px; }
.money .num { font-size: 18px; color: var(--cash); }
.ticker { margin: 8px 10px 0; height: 28px; overflow: hidden; border-radius: 99px; background: rgba(11,12,16,.75); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(124,255,107,.35); white-space: nowrap; display: flex; align-items: center; }
.ticker .run { display: inline-flex; gap: 22px; padding-left: 100%; animation: tick 24s linear infinite; font-family: var(--disp); font-size: 13px; }
.ticker .up { color: var(--bull); } .ticker .dn { color: var(--bear); }
@keyframes tick { to { transform: translateX(-100%); } }
.hub-mid { flex: 1; position: relative; }
.arena-tag { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: grid; justify-items: center; }
.arena-tag img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 0 var(--ink)); }
.arena-tag .disp { font-size: 15px; margin-top: -6px; }
.arena-tag .arena-nm { font-family: var(--disp); font-size: 13px; margin-top: -4px; letter-spacing: .5px; }
.bigbadge img { width: var(--bw, 150px); filter: drop-shadow(0 4px 0 var(--ink)); }
.prog { width: 200px; height: 14px; margin-top: 5px; border-radius: 99px; background: var(--panel); border: 2.5px solid var(--ink); overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--cash-d), var(--cash)); }
.prog-t { font-family: var(--num); font-weight: 700; font-size: 11px; opacity: .8; margin-top: 2px; }
.battle-btn { margin: 0 auto 12px; width: min(84%, 360px); min-height: 78px; font-size: 40px; border-radius: 22px; }
.battle-btn::after { border-radius: 16px; }
.battle-btn img { width: 46px; height: 46px; filter: drop-shadow(0 2px 0 var(--ink)); }
.bags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 0 8px 10px; }
.bag { position: relative; aspect-ratio: 1 / 1.08; display: grid; justify-items: center; align-content: end; padding: 4px 4px 5px; border-radius: 14px; }
.bag img { position: absolute; left: 6%; right: 6%; top: 2%; width: 88%; height: 70%; object-fit: contain; filter: drop-shadow(0 3px 0 var(--ink)); }
.bag .tag { position: relative; z-index: 1; height: 22px; padding: 0 8px; min-width: 76%; display: grid; place-items: center; border-radius: 99px; border: 2px solid var(--ink); font-family: var(--disp); font-size: 12px; }
.bag .tag.open { background: linear-gradient(var(--bull-a), var(--bull-b)); color: var(--ink); animation: odpulse2 .8s infinite alternate; }
@keyframes odpulse2 { to { box-shadow: 0 0 10px rgba(124,255,107,.8); } }
.bag .tag.wait { background: #4b2a86; color: #e7d4ff; } .bag .tag.idle { background: #3a4150; }
.bag.empty { border: 2.5px dashed rgba(242,238,223,.35); background: rgba(11,12,16,.4); box-shadow: none; }
.bag.empty::before { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--disp); font-size: 34px; opacity: .35; }
.tabs { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; margin: 0 6px calc(var(--sab) + 6px); padding: 5px 4px; min-height: 68px; border-radius: 18px; overflow: visible; }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 2px 0; font-family: var(--disp); font-size: 10.5px; line-height: 1; color: var(--paper); text-shadow: 0 1.5px 0 var(--ink); border-radius: 13px; transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.tab img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 0 var(--ink)); pointer-events: none; }
.tab span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; letter-spacing: .3px; }
.tab:active { transform: scale(.94); }
.tab.on { z-index: 2; transform: translateY(-12px); margin: 0 2px; padding: 6px 0 5px; background: linear-gradient(var(--bull-a), var(--bull-b)); color: var(--ink); text-shadow: -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper), 1px 1px 0 var(--paper);
  border: 3px solid var(--ink); box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4.5px var(--ink), 0 5px 0 4.5px var(--ink); animation: tabpop .3s; }
.tab.on img { width: 36px; height: 36px; }
.tab .dot { position: absolute; top: 0; right: 14%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--bear); border: 2px solid var(--ink); font-family: var(--num); font-weight: 900; font-size: 9px; line-height: 12px; color: #fff; text-shadow: none; }
@keyframes tabpop { 0% { transform: translateY(-4px) scale(.9); } 60% { transform: translateY(-15px) scale(1.06); } 100% { transform: translateY(-12px) scale(1); } }
.page { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 16px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.page h2 { margin: 6px 4px 10px; font-family: var(--disp); font-weight: 400; font-size: 22px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.page h2 small { font-family: var(--num); font-size: 13px; font-weight: 700; opacity: .75; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; padding: 12px 10px; }
.deckcard { display: grid; gap: 4px; }
.deckcard .card { width: 100%; }
.deckcard .bar { height: 12px; border-radius: 99px; background: var(--panel); border: 2px solid var(--ink); overflow: hidden; position: relative; }
.deckcard .bar i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #3aa0ff, var(--rare)); }
.deckcard .bar.full i { background: linear-gradient(90deg, var(--bull-b), var(--bull-a)); }
.deckcard .bar span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--num); font-weight: 800; font-size: 8.5px; text-shadow: 0 1px 0 var(--ink); }
.deckcard.locked .card { filter: grayscale(1) brightness(.4); }
.deckcard.locked .card::after { content: ''; position: absolute; inset: 20%; background: url(../../assets/ui/icon_lock.webp) center / contain no-repeat; }
.deckcard .card.picked { box-shadow: inset 0 0 0 3px var(--bull), 0 0 0 3px var(--bull), 0 0 14px rgba(124,255,107,.7); }
.deck-info { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; margin: 0 0 10px; }
.deck-info .avg { display: flex; align-items: center; gap: 6px; font-family: var(--disp); font-size: 15px; }
.deck-info .avg img { width: 26px; height: 26px; }
.sheet { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(5,6,10,.72); padding: 16px; animation: fadein .2s; }
.sheet .box { width: min(92vw, 400px); max-height: 88vh; overflow-y: auto; padding: 18px 16px 18px; display: grid; gap: 12px; animation: slap .25s; }
.sheet .head { display: flex; gap: 14px; align-items: center; }
.sheet .head .card { width: 108px; flex: none; }
.sheet h3 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 24px; }
.sheet .rar { font-family: var(--disp); font-size: 13px; }
.sheet p { margin: 4px 0 0; font-size: 14px; line-height: 1.35; opacity: .9; font-weight: 500; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.statgrid > div { padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.05); border: 2px solid var(--ink); }
.statgrid .k { font-family: var(--disp); font-size: 10px; opacity: .7; }
.statgrid .v { font-family: var(--num); font-weight: 800; font-size: 16px; }
.statgrid .v em { font-style: normal; color: var(--bull); font-size: 12px; }
.sheet .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding-top: 4px; }
.lg-list { display: grid; gap: 10px; }
.lg-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.lg-row img { width: 64px; height: 64px; object-fit: contain; }
.lg-row .t { flex: 1; }
.lg-row .t b { display: block; font-family: var(--disp); font-weight: 400; font-size: 20px; }
.lg-row .t span { font-size: 12px; opacity: .75; }
.lg-row .un { display: flex; gap: 4px; margin-top: 5px; }
.lg-row .un .card { width: 34px; border-width: 2px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--rc, var(--paper)); }
.lg-row.locked { opacity: .5; }
.lg-row.cur { box-shadow: inset 0 0 0 2px var(--cash), 0 0 12px rgba(255,200,74,.4), 0 4px 0 var(--ink); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-family: var(--disp); font-size: 17px; }
.seg3 { display: flex; gap: 4px; }
.seg3 button { padding: 6px 10px; border-radius: 10px; font-family: var(--disp); font-size: 13px; background: var(--panel3); border: 2px solid var(--ink); }
.seg3 button.on { background: var(--bull); color: var(--ink); }
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.offer { display: grid; justify-items: center; gap: 6px; padding: 12px 8px 12px; }
.offer img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 3px 0 var(--ink)); }
.offer .t { font-family: var(--disp); font-size: 15px; text-align: center; }

/* =================== BAG OPENING =================== */
.bagopen { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; overflow: hidden; background: var(--ink); }
.rays { position: absolute; width: 220vmax; height: 220vmax; left: 50%; top: 45%; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, var(--ray, rgba(76,201,240,.22)) 0 7deg, transparent 7deg 18deg); animation: spin 18s linear infinite; mask-image: radial-gradient(circle, #000 10%, transparent 60%); -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 60%); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bagopen .bagimg { position: relative; width: min(64vw, 300px); filter: drop-shadow(0 8px 0 var(--ink)); }
.bagopen .bagimg.shake { animation: bshake .5s infinite; }
@keyframes bshake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg) scale(1.03); } 75% { transform: rotate(7deg) scale(1.03); } }
.bagopen .reveal { position: relative; display: grid; justify-items: center; gap: 10px; }
.bagopen .reveal .card { width: min(46vw, 210px); transform: rotate(-4deg); animation: flyout .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes flyout { from { transform: translateY(160px) scale(.3) rotate(20deg); opacity: 0; } }
.bagopen .rtag { font-family: var(--disp); font-size: 18px; padding: 4px 14px; border-radius: 99px; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.bagopen .xn { position: absolute; right: -26px; top: 40%; font-family: var(--disp); font-size: 38px; transform: rotate(8deg); animation: slap .4s .3s backwards; }
.bagopen .newtag { position: absolute; left: -16px; top: -12px; padding: 3px 10px; border-radius: 8px; background: var(--bull); color: var(--ink); font-family: var(--disp); font-size: 18px; border: 3px solid var(--ink); transform: rotate(-10deg); box-shadow: 0 3px 0 var(--ink); z-index: 3; }
.bagopen .tap { position: absolute; bottom: calc(var(--sab) + 40px); left: 0; right: 0; text-align: center; font-family: var(--disp); font-size: 18px; animation: blink 1s infinite alternate; }
.bagopen .left { position: absolute; top: calc(var(--sat) + 20px); right: 18px; font-family: var(--disp); font-size: 16px; }
@keyframes blink { from { opacity: .35; } }
.bagopen .cashwin { display: flex; align-items: center; gap: 10px; font-family: var(--num); font-weight: 900; font-size: 46px; color: var(--cash); animation: slap .4s; }
.bagopen .cashwin img { width: 70px; }

/* desktop: a portrait column with the plaza either side */
@media (min-aspect-ratio: 3/4) {
  .screen, .results { left: 50%; width: var(--col); transform: translateX(-50%); }
  .bagopen { left: 50%; width: var(--col); transform: translateX(-50%); }
}
@media (max-height: 640px) { .battle-btn { min-height: 62px; font-size: 32px; } .tabs { min-height: 58px; } .tab img { width: 26px; height: 26px; } }

/* =================== round 2: wallet, level, W bag, road, shop =================== */
.ico { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; filter: drop-shadow(0 1.5px 0 var(--ink)); }
.gemi { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; background: linear-gradient(135deg, #f0c8ff, #a35bff 55%, #4cc9f0); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); }
.hub-top .wallet { display: grid; gap: 5px; }
.hub-top .money { padding: 4px 8px 4px 6px; min-width: 104px; justify-content: space-between; }
.hub-top .money .ico, .hub-top .money img { width: 24px; height: 24px; }
.hub-top .money .num { font-size: 15px; }
.money.gems .num { color: #e3b6ff; }
.money .plus { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; background: var(--bull); color: var(--ink); font-family: var(--disp); font-size: 15px; border: 2px solid var(--ink); line-height: 1; }
.prof { text-align: left; }
.prof .ava { position: relative; overflow: visible; }
.prof .ava img { border-radius: 9px; }
.lvl-badge { position: absolute; right: -8px; bottom: -8px; min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(#5ab8ff, #2a6aff); border: 2.5px solid var(--ink); font-family: var(--num); font-weight: 900; font-size: 12px; color: #fff; text-shadow: 0 1.5px 0 var(--ink); }
.xpbar { position: relative; height: 11px; margin-top: 4px; border-radius: 99px; background: #0d1830; border: 2px solid var(--ink); overflow: hidden; }
.xpbar i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #2a6aff, #5ab8ff); }
.xpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--num); font-weight: 800; font-size: 7.5px; text-shadow: 0 1px 0 var(--ink); }
.arena-tag { background: none; }
.claim-dot { margin-top: 4px; padding: 2px 10px; border-radius: 99px; background: var(--bear); border: 2px solid var(--ink); font-family: var(--disp); font-size: 11px; animation: blink .7s infinite alternate; }
.wstrip { display: flex; align-items: center; gap: 8px; margin: 0 8px 8px; padding: 5px 10px 5px 6px; text-align: left; }
.wstrip img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 0 var(--ink)); }
.wstrip .wtxt { flex: 1; display: grid; gap: 4px; }
.wstrip b { font-family: var(--disp); font-weight: 400; font-size: 13px; }
.wstrip .num { font-size: 16px; color: var(--bull); }
.wpips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.wpips i { height: 8px; border-radius: 3px; background: #1d2a20; border: 1.5px solid var(--ink); }
.wpips i.on { background: linear-gradient(var(--bull-a), var(--bull-b)); }
.wstrip.ready { box-shadow: inset 0 0 0 2px var(--bull), 0 0 14px rgba(124,255,107,.6), 0 4px 0 var(--ink); animation: odpulse2 .8s infinite alternate; }
.decktabs { display: flex; gap: 4px; }
.decktabs button { padding: 6px 10px; border-radius: 10px; font-family: var(--disp); font-size: 13px; background: var(--panel3); border: 2px solid var(--ink); }
.decktabs button.on { background: var(--bull); color: var(--ink); }
.deckcard { position: relative; }
.deckcard .upgr { position: absolute; right: -4px; top: -6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--bull); color: var(--ink); border: 2px solid var(--ink); font-size: 11px; animation: blink .6s infinite alternate; }
.lvl-big { font-family: var(--disp); font-size: 80px; color: #8fd0ff; }
/* the shop */
.shoppage h2 { margin-top: 16px; }
.offer-wide { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 10px; min-height: 120px; margin-bottom: 10px; padding: 12px; background-size: cover; background-position: center; }
.offer-wide.legend { box-shadow: inset 0 0 0 2px var(--cash), 0 0 16px rgba(255,200,74,.45), 0 4px 0 var(--ink); }
.offer-wide .ot { grid-column: 1 / 3; font-family: var(--disp); font-size: 22px; }
.offer-wide .oi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--num); font-weight: 800; font-size: 15px; }
.offer-wide .oi .card { width: 52px; }
.offer-wide .otime { position: absolute; right: 12px; top: 12px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(11,12,16,.7); }
.deals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.deal { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 10px 6px; text-align: center; }
.deal .dcard { width: 74%; }
.deal .dimg { width: 70%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 3px 0 var(--ink)); }
.deal .dn { font-family: var(--disp); font-size: 11.5px; line-height: 1.1; min-height: 26px; display: grid; place-items: center; }
.deal .dn b { color: var(--cash); font-weight: 400; }
.deal .btn.small { min-height: 32px; font-size: 13px; padding: 0 8px; }
.deal.free { box-shadow: inset 0 0 0 2px var(--bull), 0 0 10px rgba(124,255,107,.35), 0 4px 0 var(--ink); }
.sold { filter: saturate(.3) brightness(.7); }
.shop-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shop-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.offer { position: relative; }
.offer img { width: 72px; height: 72px; }
.offer .t { font-size: 13px; }
.offer .btn.small { min-height: 32px; font-size: 13px; padding: 0 8px; }
.gemoffer .otag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 99px; background: var(--bear); border: 2px solid var(--ink); font-family: var(--disp); font-size: 10px; white-space: nowrap; }
.xpline { display: flex; justify-content: space-around; font-family: var(--disp); font-size: 13px; color: #8fd0ff; }

.flycard { position: fixed; z-index: 15; pointer-events: none; transition: transform .38s cubic-bezier(.5,0,.6,1), opacity .38s ease-in; transform-origin: 50% 50%; }

.spin { width: 38px; height: 38px; margin: 6px auto; border-radius: 50%; border: 5px solid rgba(242,238,223,.2); border-top-color: var(--bull); animation: spin2 .8s linear infinite; }
@keyframes spin2 { to { transform: rotate(360deg); } }
.fcode { font-family: var(--num); font-weight: 900; font-size: 40px; letter-spacing: 6px; color: var(--bull); }

/* the battle tab, CR style: my arena (the 3D scene) in the middle, its name over it, the climb to the next arena under it;
   a tap anywhere on it opens the Trophy Road */
.hub-mid { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 0 10px; cursor: pointer; }
.arena-name { display: flex; align-items: center; gap: 8px; padding: 3px 26px 3px 18px; text-align: left; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(11,12,16,.72) 16%, rgba(11,12,16,.72) 84%, transparent); }
.arena-name img { width: 50px; height: 50px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 0 var(--ink)); }
.arena-name .an { display: block; font-family: var(--disp); font-size: 12px; letter-spacing: .5px; color: var(--bull); text-shadow: 0 1.5px 0 var(--ink); }
.arena-name b { display: block; font-family: var(--disp); font-weight: 400; font-size: 24px; line-height: 1; white-space: nowrap; }
.arena-prog { position: relative; display: flex; align-items: center; gap: 8px; width: min(80%, 310px); padding: 5px 12px 5px 6px; border-radius: 99px; }
.arena-prog > img { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 0 var(--ink)); }
.arena-prog .prog { position: relative; flex: 1; width: auto; height: 22px; margin: 0; }
.arena-prog .prog span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; color: #fff; text-shadow: 0 1.5px 0 var(--ink); }
.arena-prog .go { font-family: var(--disp); font-size: 14px; color: var(--cash); text-shadow: 0 1.5px 0 var(--ink); white-space: nowrap; }
.arena-prog .dot { position: absolute; right: -6px; top: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--bear); border: 2px solid var(--ink); font-family: var(--num); font-weight: 900; font-size: 11px; line-height: 16px; text-align: center; color: #fff; animation: blink .7s infinite alternate; }
.hub-mid:active .arena-prog { transform: translateY(2px); }

/* the Trophy Road (CR's arena scroll): an overlay from the hub's arena, and the ROAD tab */
.roadview { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; animation: rvup .32s cubic-bezier(.2,1,.4,1);
  background: radial-gradient(ellipse at 50% 22%, rgba(40,58,96,.55), transparent 62%), linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 14px 14px, #0c111c; }
@keyframes rvup { from { transform: translateY(100%); } }
body.desk .roadview { animation-name: fadein; }
.rv-head { display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 12px) 14px 10px; border-bottom: 3px solid var(--ink); background: linear-gradient(#1a2234, #121827); box-shadow: 0 3px 0 rgba(124,255,107,.25); }
.rv-head > b { flex: 1; font-family: var(--disp); font-weight: 400; font-size: 26px; }
.rv-head .pill img { width: 20px; height: 20px; }
.rv-x { width: 40px; height: 40px; flex: none; } .rv-x img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 var(--ink)); }
.rv-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rv-scroll::-webkit-scrollbar { display: none; }
.rv-foot { display: grid; place-items: center; padding: 10px 0 calc(var(--sab) + 14px); background: linear-gradient(transparent, rgba(8,10,16,.9) 40%); margin-top: -40px; position: relative; pointer-events: none; }
.rv-ok { width: 150px; pointer-events: auto; }
.rv-track { position: relative; display: grid; gap: 10px; padding: 26px 14px 70px 66px; }
.roadpage .rv-track { padding-bottom: 24px; }
.rv-rail { position: absolute; left: 28px; top: 0; bottom: 0; width: 12px; border-radius: 99px; background: #070a11; border: 2.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(242,238,223,.08); }
.rv-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--cash-d), var(--cash) 60%, #ffe9a6); box-shadow: 0 0 10px rgba(255,200,74,.45); }
.rv-at { position: absolute; left: 50%; transform: translate(-50%, -50%); min-width: 44px; padding: 2px 6px; border-radius: 99px; background: #1b2232; border: 2.5px solid var(--ink); font-size: 11.5px; text-align: center; color: rgba(242,238,223,.75); z-index: 1; }
.rv-at.on { background: linear-gradient(#ffe07a, var(--cash)); color: var(--ink); }
.rv-you { position: absolute; left: 34px; transform: translate(-50%, -50%); z-index: 3; display: grid; justify-items: center; pointer-events: none; }
.rv-you .ava { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 0 0 2.5px var(--bull), 0 0 14px rgba(124,255,107,.6), 0 3px 0 3px var(--ink); background: #1b2232; }
.rv-you .ava img { width: 100%; height: 100%; object-fit: cover; }
.rv-you .num { margin-top: -6px; padding: 1px 7px; border-radius: 99px; background: var(--bull); color: var(--ink); border: 2px solid var(--ink); font-size: 12px; }
.rv-tile { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; }
.rv-tile.big { min-height: 84px; }
.rv-gift { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--disp); font-size: 16px; }
.rv-gift b { font-weight: 400; } .rv-gift b.num { font-family: var(--num); font-weight: 900; font-size: 18px; }
.rv-gift span { font-size: 12px; opacity: .7; }
.rv-gift .ico { width: 30px; height: 30px; } .rv-gift .gemi { width: 26px; height: 26px; }
.rv-tile.big .rv-gift img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 0 var(--ink)); }
.rv-tile .rv-ok { width: 28px; height: 28px; } .rv-tile .rv-lock { width: 26px; height: 26px; opacity: .8; }
.rv-tile.got { opacity: .5; }
.rv-tile.locked { filter: saturate(.3) brightness(.72); }
.rv-tile.can { cursor: pointer; box-shadow: inset 0 0 0 2.5px var(--cash), 0 0 16px rgba(255,200,74,.45), 0 4px 0 var(--ink); }
.rv-claim { pointer-events: none; animation: blink .7s infinite alternate; }
.rv-arena { display: grid; justify-items: center; padding: 6px 0 12px; }
.rv-dio { position: relative; width: min(100%, 290px); aspect-ratio: 1; }
.rv-dio > img:first-child { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); }
/* the arenas ahead stay in colour (something to climb for); their cards are what's locked */
.rv-arena.locked .rv-dio > img:first-child { filter: saturate(.7) brightness(.82) drop-shadow(0 12px 14px rgba(0,0,0,.55)); }
.rv-dio .rv-lock { position: absolute; right: 8%; top: 10%; width: 44px; height: 44px; filter: drop-shadow(0 3px 0 var(--ink)); }
.rv-here { position: absolute; left: 50%; top: 2px; transform: translateX(-50%) rotate(-3deg); padding: 3px 12px; border-radius: 10px; background: linear-gradient(#ffe07a, var(--cash)); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-family: var(--disp); font-size: 15px; white-space: nowrap; animation: blink .9s infinite alternate; }
.rv-plate { display: flex; align-items: center; gap: 8px; margin-top: -30px; padding: 6px 14px 6px 8px; min-width: 76%; }
.rv-plate > img { width: 46px; height: 46px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 0 var(--ink)); }
.rv-plate > div { flex: 1; min-width: 0; }
.rv-plate .an { display: block; font-family: var(--disp); font-size: 11px; color: var(--bull); }
.rv-plate b { display: block; font-family: var(--disp); font-weight: 400; font-size: 19px; line-height: 1.05; }
.rv-plate .need { display: flex; align-items: center; gap: 3px; font-family: var(--num); font-weight: 900; font-size: 14px; color: var(--cash); text-shadow: 0 1.5px 0 var(--ink); }
.rv-plate .need img { width: 20px; height: 20px; }
.rv-arena.here .rv-plate { box-shadow: inset 0 0 0 2.5px var(--cash), 0 0 16px rgba(255,200,74,.45), 0 4px 0 var(--ink); }
.rv-arena.locked .rv-plate { filter: saturate(.4) brightness(.8); }
.rv-unl { display: grid; justify-items: center; gap: 4px; margin-top: 8px; }
.rv-unl > span { font-family: var(--disp); font-size: 12px; letter-spacing: .5px; opacity: .75; }
.rv-unl > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.rv-unl .card { width: 44px; border-width: 2px; border-radius: 7px; cursor: pointer; }
.rv-arena.locked .rv-unl .card { filter: grayscale(.8) brightness(.6); }

/* swipeable shop rows (offers, bags, gems, coins, cosmetics) */
.hrow { display: flex; gap: 10px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; padding: 10px 4px 12px; margin: -6px -10px 0; padding-left: 10px; padding-right: 10px; scrollbar-width: none; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.hrow::-webkit-scrollbar { display: none; }
.hrow > * { flex: 0 0 auto; scroll-snap-align: start; }
.hrow.offers > .offer-wide { width: 88%; margin-bottom: 0; }
.hrow.tiles > .offer { width: calc((100% - 20px) / 3.2); min-width: 104px; }
.page { overscroll-behavior: contain; }
.deals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deal .dn { overflow-wrap: anywhere; }

/* ---------- the ticker row with the settings gear */
.tickrow { display: flex; align-items: center; gap: 6px; margin: 8px 10px 0; }
.tickrow .ticker { flex: 1; min-width: 0; margin: 0; }
.gear { flex: none; width: 34px; height: 34px; padding: 3px; border-radius: 50%; background: rgba(11,12,16,.8); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(124,255,107,.35); display: grid; place-items: center; }
.gear img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 1.5px 0 var(--ink)); }
.gear:active { transform: scale(.9) rotate(30deg); }

/* ---------- SOCIAL: the leaderboard */
.lb-head { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 4px 8px; }
.lb-head h3 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 22px; }
.lb-list { display: grid; gap: 6px; padding-bottom: 12px; }
.lb-row { display: grid; grid-template-columns: 34px 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; }
.lb-row .rk { font-family: var(--num); font-weight: 900; font-size: 16px; text-align: center; color: var(--paper); text-shadow: 0 2px 0 var(--ink); }
.lb-row .rk img { width: 34px; height: 34px; object-fit: contain; display: block; filter: drop-shadow(0 2px 0 var(--ink)); }
.lb-row .ab img { width: 38px; height: 38px; object-fit: contain; display: block; }
.lb-row .who { display: grid; min-width: 0; }
.lb-row .who b { font-family: var(--disp); font-weight: 400; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .who .prog-t { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .cl { display: flex; align-items: center; gap: 4px; font-size: 16px; color: var(--cash); }
.lb-row .cl img { width: 20px; height: 20px; }
.lb-row.top1 { box-shadow: inset 0 0 0 2px rgba(255,200,74,.75), 0 0 12px rgba(255,200,74,.3), 0 4px 0 var(--ink); }
.lb-row.top2 { box-shadow: inset 0 0 0 2px rgba(210,220,235,.6), 0 4px 0 var(--ink); }
.lb-row.top3 { box-shadow: inset 0 0 0 2px rgba(222,140,80,.6), 0 4px 0 var(--ink); }
.lb-row.me { background: rgba(34, 64, 30, .95); box-shadow: inset 0 0 0 2.5px var(--bull), 0 0 14px rgba(124,255,107,.35), 0 4px 0 var(--ink); }
.lb-gap { text-align: center; opacity: .5; font-size: 12px; letter-spacing: 4px; }
.lb-empty { padding: 18px 14px; text-align: center; font-size: 14px; line-height: 1.4; opacity: .9; }
.acct-cta { display: grid; gap: 6px; justify-items: center; text-align: center; margin-top: 10px; padding: 14px; }
.acct-cta b { font-family: var(--disp); font-weight: 400; font-size: 18px; color: var(--cash); }

/* ---------- the account screen (create / log in) */
.acct-gate { position: absolute; inset: 0; z-index: 30; display: grid; align-content: center; justify-items: center; gap: 10px; padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); overflow-y: auto;
  background: linear-gradient(rgba(11,12,16,.45), rgba(11,12,16,.9)), url(../../assets/ui/bg_loading.webp) center / cover, var(--ink); animation: fadein .25s; transition: opacity .35s; }
.acct-gate.out { opacity: 0; pointer-events: none; }
.acct-logo { width: min(70vw, 300px); filter: drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 0 24px rgba(124,255,107,.25)); animation: slap .45s; }
.acct-box { position: relative; width: min(92vw, 380px); display: grid; gap: 10px; padding: 18px 16px 14px; text-align: center; animation: slap .3s; }
.acct-box h3, .acct-pass h3 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 24px; }
.acct-box p { margin: 0 4px 2px; font-size: 13px; line-height: 1.35; }
.acct-box input, .acct-pass input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border-radius: 12px; border: 3px solid var(--ink); background: #0b0f17; color: var(--paper);
  font-family: var(--disp); font-size: 18px; letter-spacing: .5px; outline: none; box-shadow: inset 0 0 0 1.5px rgba(124,255,107,.3); user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.acct-box input:focus, .acct-pass input:focus { box-shadow: inset 0 0 0 2px var(--bull), 0 0 10px rgba(124,255,107,.35); }
.acct-box input::placeholder, .acct-pass input::placeholder { color: rgba(242,238,223,.35); }
.acct-box .btn { min-height: 54px; font-size: 24px; }
.acct-err { min-height: 16px; font-size: 13px; font-weight: 700; color: var(--bear); }
.acct-switch { font-size: 13px; padding: 6px; color: rgba(242,238,223,.8); }
.acct-switch b { color: var(--bull); font-family: var(--disp); font-weight: 400; letter-spacing: .5px; }
.acct-x { position: absolute; top: -12px; right: -10px; width: 38px; height: 38px; padding: 0; }
.acct-x img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 var(--ink)); }
.acct-pass { display: grid; gap: 10px; text-align: center; }
.spin.sm { display: inline-block; width: 22px; height: 22px; margin: 0; border-width: 4px; vertical-align: middle; }
.ribbon.draw { filter: saturate(.15) brightness(1.05) drop-shadow(0 0 14px rgba(178,80,246,.5)); }
/* price buttons: the coin/gem icon stays icon-sized inside any tile (the tile's art rule must not blow it up) */
#ui .btn .ico, #ui .btn img.ico { width: 18px; height: 18px; flex: none; margin: 0 2px 0 0; vertical-align: -3px; }
#ui .offer .btn.small, #ui .deal .btn.small { max-width: 100%; white-space: nowrap; gap: 4px; }

/* =================== PC / wide screens (body.desk, src/main.js) ===================
   The menus are the phone layout, unchanged: a 400 px column scaled (--z) to the screen's height and centred, with the hub's
   3D world either side under a vignette. The battle keeps its own wide layout (below). */
body.desk { --col: min(100vw, 66vh); }
body.desk .screen, body.desk .results, body.desk .bagopen, body.desk .roadview, body.desk .acct-gate { left: 0; right: 0; width: 400px; margin: 0 auto; transform: none; zoom: var(--z, 1); }
body.desk .sheet .box { zoom: var(--z, 1); max-height: calc(88vh / var(--z, 1)); }
body.desk .toast { zoom: var(--z, 1); }
body.desk #ui:has(> .screen)::before { content: ''; position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,7,12,.9), rgba(5,7,12,.45) calc(50% - 200px * var(--z, 1) - 1px), transparent calc(50% - 200px * var(--z, 1)), transparent calc(50% + 200px * var(--z, 1)), rgba(5,7,12,.45) calc(50% + 200px * var(--z, 1) + 1px), rgba(5,7,12,.9)); }
body.desk .screen { box-shadow: 0 0 0 2px rgba(124,255,107,.18), 0 0 40px rgba(0,0,0,.6); }
body.desk .page::-webkit-scrollbar { width: 8px; } body.desk .page::-webkit-scrollbar-thumb { background: rgba(124,255,107,.35); border-radius: 99px; }
/* battle on a PC: key numbers on the hand, a key guide, the emote button beside the tray */
body.desk .hand > div { position: relative; }
body.desk .hand > div::after { content: attr(data-key); position: absolute; right: -5px; bottom: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--ink); border: 2px solid rgba(242,238,223,.5); font-family: var(--num); font-weight: 900; font-size: 11px; line-height: 16px; text-align: center; color: var(--paper); pointer-events: none; }
.keys { display: none; }
body.desk .keys { display: grid; gap: 7px; position: absolute; right: 22px; bottom: 22px; width: 250px; padding: 14px 16px; font-size: 13px; font-weight: 700; line-height: 1.2; }
body.desk .keys b { font-family: var(--disp); font-weight: 400; font-size: 16px; }
body.desk .keys kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin-right: 4px; border-radius: 6px; background: var(--panel3); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font-family: var(--num); font-weight: 900; font-size: 12px; text-align: center; }
body.desk .opp-side { display: grid; }