/* Turf Rush — candy toy UI on top of the 3D arena. Titan One for display, Baloo 2 for body. */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --ink: #24324a; --gold: #ffc93c; --purple: #9b6bff; --blue: #3d8bff; --line: #c9d3e0; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #cfdcec; font-family: 'Baloo 2', 'Trebuchet MS', sans-serif; color: var(--ink); touch-action: none; }
img { -webkit-user-drag: none; }
#app { position: relative; width: 100%; max-width: 480px; height: 100dvh; margin: 0 auto; overflow: hidden; background: #cfdcec; }
#stage { position: absolute; inset: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#names { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nm { position: absolute; left: 0; top: 0; font: 400 14px 'Titan One', sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(30,40,60,.55), 0 0 4px rgba(30,40,60,.45); white-space: nowrap; will-change: transform; }
.nm.me { font-size: 15px; }
.nm.boss { font-size: 17px; color: #ffe27a; }
#floats { position: absolute; left: 0; right: 0; top: 34%; height: 0; pointer-events: none; z-index: 12; }
.fl { position: absolute; left: 50%; top: 0; transform: translate(calc(-50% + var(--dx)), 0); font: 400 26px 'Titan One', sans-serif; color: #fff; white-space: nowrap;
  text-shadow: 0 3px 0 rgba(36,50,74,.6); animation: flup 1.25s ease-out forwards; }
.fl.gain { color: #fff; font-size: 30px; }
.fl.praise { color: var(--gold); font-size: 32px; top: -50px; }
.fl.kill { color: #ff5a7a; font-size: 26px; top: 40px; }
@keyframes flup { 0% { opacity: 0; transform: translate(calc(-50% + var(--dx)), 20px) scale(.7); } 15% { opacity: 1; transform: translate(calc(-50% + var(--dx)), 0) scale(1.08); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -70px) scale(1); } }
#joy { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 4px solid rgba(255,255,255,.75); background: rgba(36,50,74,.12); display: none; pointer-events: none; z-index: 11; }
#joy i { position: absolute; left: 26px; top: 26px; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(36,50,74,.3); }

/* ---------- UI layer ---------- */
#ui { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#ui > * { pointer-events: auto; }
.svgi { display: inline-grid; place-items: center; }
.svgi svg { width: 100%; height: 100%; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 18px;
  font: 400 22px 'Titan One', sans-serif; color: #fff; background: linear-gradient(#5aa2ff, #3d8bff); box-shadow: 0 5px 0 #2563c9, 0 8px 14px rgba(36,50,74,.18); cursor: pointer; transition: transform .08s; white-space: nowrap; }
.btn::before { content: ''; position: absolute; left: 10px; right: 10px; top: 5px; height: 34%; border-radius: 12px; background: rgba(255,255,255,.22); pointer-events: none; }
.btn.pressed { transform: translateY(3px) scale(.96); box-shadow: 0 2px 0 #2563c9; }
.btn.disabled { filter: grayscale(.7); opacity: .6; }
.btn .bi, .btn .svgi { width: 28px; height: 28px; }
.btn .vid { width: 30px; height: 28px; }
.btn.primary { background: linear-gradient(#6fe08a, #3fc265); box-shadow: 0 5px 0 #2a9a4c, 0 8px 14px rgba(36,50,74,.18); }
.btn.primary.pressed { box-shadow: 0 2px 0 #2a9a4c; }
.btn.big { min-height: 72px; font-size: 30px; padding: 0 34px; border-radius: 24px; }
.btn.big .bi, .btn.big .svgi { width: 34px; height: 34px; }
.btn.video { background: linear-gradient(#b48cff, var(--purple)); box-shadow: 0 5px 0 #6d43c9, 0 8px 14px rgba(36,50,74,.18); }
.btn.video.pressed { box-shadow: 0 2px 0 #6d43c9; }
.btn.nav { background: #fff; color: var(--ink); box-shadow: 0 5px 0 var(--line), 0 8px 14px rgba(36,50,74,.12); }
.btn.nav .svgi svg { stroke: var(--ink); }
.btn.nav .svgi svg path[fill="#fff"], .btn.nav .svgi svg rect[fill="#fff"] { fill: var(--ink); }
.btn.nav.locked { color: #8a96a8; }
.btn.nav.pressed { box-shadow: 0 2px 0 var(--line); }
.btn.quiet { background: none; box-shadow: none; color: #6b7a90; font-size: 18px; min-height: 44px; }
.btn.quiet::before { display: none; }
.btn.late { opacity: 0; pointer-events: none; transition: opacity .3s; }
.btn.late.show { opacity: 1; pointer-events: auto; }
.btn.round { width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 0 var(--line); }
.btn.round::before { display: none; }
.btn.round .svgi svg { stroke: var(--ink); }
.btn.round .svgi svg path[fill="#fff"] { fill: var(--ink); }
.btn.small { width: 48px; height: 48px; }
.btn.sq { width: 60px; padding: 0; }
.btn.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.badge { position: absolute; right: -6px; top: -8px; min-width: 24px; height: 24px; border-radius: 12px; background: #ff4f5e; color: #fff; font: 400 14px 'Titan One'; display: grid; place-items: center; padding: 0 5px; box-shadow: 0 2px 0 #c22f3d; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px 0 8px; border-radius: 23px; background: rgba(255,255,255,.94); box-shadow: 0 4px 0 var(--line); font: 400 22px 'Titan One'; cursor: pointer; }
.chip .coin { width: 32px; height: 32px; display: inline-grid; }
.chip.bump { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.15); } }
svg.mini { width: 18px; height: 18px; vertical-align: -3px; margin-right: 2px; }

/* ---------- home ---------- */
#ui.home { background: linear-gradient(rgba(207,220,236,.0) 30%, rgba(207,220,236,.55) 70%, rgba(207,220,236,.9)); }
.topbar { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 12px); display: flex; justify-content: space-between; padding: 0 16px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.title { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 84px); text-align: center; font: 400 64px/0.95 'Titan One', sans-serif; color: #fff; pointer-events: none;
  text-shadow: 0 6px 0 #2563c9, 0 10px 18px rgba(36,50,74,.3); letter-spacing: 2px; }
.title span { display: block; }
.title span:last-child { color: var(--gold); text-shadow: 0 6px 0 #d98a12, 0 10px 18px rgba(36,50,74,.3); }
.hero { position: absolute; left: 50%; top: calc(var(--sat) + 236px); width: 150px; height: 150px; margin-left: -75px; display: grid; place-items: center; cursor: pointer; animation: hover 2.2s ease-in-out infinite; }
.hero .heroImg { width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(36,50,74,.25)); }
@keyframes hover { 50% { transform: translateY(-8px); } }
.homeBottom { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 26px); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 16px; }
.homeRow { display: flex; gap: 12px; }
.homeRow .btn { font-size: 20px; padding: 0 16px; }
.bestLine { font: 700 16px 'Baloo 2'; color: #4a5a72; }
.boosts { display: flex; gap: 10px; }
.boost { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px 0 8px; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 var(--line); cursor: pointer; border: 3px solid transparent; }
.boost.on { border-color: #3fc265; background: #eafff0; }
.boost .bi { width: 30px; height: 30px; }
.boost .bn { font: 700 16px 'Baloo 2'; }
.boost .bc { font: 400 15px 'Titan One'; color: #4a5a72; }

/* ---------- HUD ---------- */
#ui.hud { pointer-events: none; }
#ui.hud > :not(#pauseBtn) { pointer-events: none; }
#ui.home { pointer-events: none; }
#ui.hud #pauseBtn { position: absolute; left: 12px; top: calc(var(--sat) + 12px); }
.goal { position: absolute; left: 72px; right: 128px; top: calc(var(--sat) + 10px); background: rgba(255,255,255,.95); border-radius: 16px; box-shadow: 0 4px 0 var(--line); padding: 4px 12px 6px; pointer-events: none; }
.goal .gt { font: 400 15px 'Titan One'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal .gbar { height: 10px; background: #e3e9f2; border-radius: 6px; overflow: hidden; margin-top: 2px; }
.goal .gbar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .25s; }
.goal .gv { font: 700 14px 'Baloo 2'; color: #4a5a72; line-height: 1.2; white-space: nowrap; }
.killChip { position: absolute; right: 12px; top: calc(var(--sat) + 12px); height: 40px; min-width: 104px; padding: 0 12px; border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 4px 0 var(--line);
  display: flex; align-items: center; gap: 6px; font: 400 20px 'Titan One'; pointer-events: none; }
.killChip .svgi { width: 24px; height: 24px; }
.killChip .svgi svg { stroke: #ff4f5e; }
.lb { position: absolute; right: 12px; top: calc(var(--sat) + 62px); display: flex; flex-direction: column; gap: 3px; pointer-events: none; width: 116px; }
.lb .r { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px 0 2px; border-radius: 11px; color: var(--ink); background: rgba(255,255,255,.88); font: 700 12px 'Baloo 2'; }
.lb .r.me { background: #fff; box-shadow: 0 2px 0 var(--line); font-weight: 800; }
.lb .r b { width: 18px; height: 18px; border-radius: 50%; color: #fff; font: 400 11px 'Titan One'; display: grid; place-items: center; flex: none; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.lb .r i { font-style: normal; }
.lb .r span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- modals ---------- */
#modals { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#modals > * { pointer-events: auto; }
.dim { position: absolute; inset: 0; background: rgba(36,50,74,.45); animation: fadein .2s; }
.dim.out, .modal.out { opacity: 0; transition: opacity .2s; }
@keyframes fadein { from { opacity: 0; } }
.modal { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 26px; padding: 22px 18px 20px; text-align: center;
  box-shadow: 0 8px 0 var(--line), 0 20px 40px rgba(36,50,74,.3); animation: mpop .28s cubic-bezier(.3,1.5,.6,1); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
@keyframes mpop { from { transform: translateY(-50%) scale(.8); opacity: 0; } }
.mtitle { font: 400 32px 'Titan One'; color: var(--ink); margin-bottom: 8px; }
.modal.win .mtitle, .modal.perfect .mtitle { color: #3fc265; text-shadow: 0 3px 0 #c9f0d4; }
.modal.perfect .mtitle { color: #e8a21c; text-shadow: 0 3px 0 #fff0c2; }
.mart { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 6px; display: block; }
.mart.small { width: 72px; height: 72px; }
.mbody { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; }
.msub { font: 700 19px 'Baloo 2'; }
.msub.dim { color: #6b7a90; background: none; position: static; animation: none; }
.msub.gold { color: #d98a12; }
.mbtns { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
.mclose { position: absolute; right: 8px; top: 8px; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; }
.mclose .xi { width: 24px; height: 24px; }
.mclose .xi svg { stroke: #8a96a8; }
.stats { display: flex; gap: 10px; justify-content: center; }
.st { background: #f1f5fa; border-radius: 14px; padding: 6px 14px; min-width: 84px; }
.st b { display: block; font: 400 24px 'Titan One'; }
.st span { font: 700 14px 'Baloo 2'; color: #6b7a90; }
.reward { display: flex; align-items: center; gap: 8px; font: 400 34px 'Titan One'; color: #e8a21c; }
.reward .coin { width: 40px; height: 40px; display: inline-grid; }
.newbest { font: 400 22px 'Titan One'; color: #ff4f7a; animation: pulse 1s infinite; }
.nudge { margin-top: 12px; font: 700 16px 'Baloo 2'; color: #6d43c9; display: flex; align-items: center; justify-content: center; gap: 6px; }
.nudge .svgi { width: 22px; height: 22px; }
.nudge .svgi svg { stroke: #6d43c9; }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.day { background: #f1f5fa; border-radius: 14px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; font: 400 15px 'Titan One'; }
.day:last-child { grid-column: span 2; }
.day .dn { font: 700 12px 'Baloo 2'; color: #6b7a90; }
.day .di { width: 34px; height: 34px; }
.day.got { opacity: .45; }
.day.now { background: #fff5d6; outline: 3px solid var(--gold); }
.setts { align-items: stretch; width: 100%; }
.set { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px; background: #f1f5fa; border-radius: 16px; font: 700 20px 'Baloo 2'; cursor: pointer; }
.set .bi { width: 28px; height: 28px; }
.set .bi svg { stroke: var(--ink); }
.set .bi svg path[fill="#fff"], .set .bi svg circle[fill="#fff"] { fill: var(--ink); }
.set span { flex: 1; text-align: left; }
.set .sw { width: 52px; height: 30px; border-radius: 15px; background: #c9d3e0; position: relative; transition: background .2s; }
.set .sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .2s; }
.set.on .sw { background: #3fc265; }
.set.on .sw::after { left: 25px; }
.ver { font: 600 13px 'Baloo 2'; color: #8a96a8; }

/* ---------- shop ---------- */
.modal.shopModal { top: calc(var(--sat) + 16px); bottom: calc(var(--sab) + 16px); transform: none; animation: fadein .2s; padding: 18px 12px 12px; }
.shop { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
.shopModal .mbody { flex: 1; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 2px 2px 10px; }
.tab { flex: none; height: 40px; padding: 0 12px; border-radius: 14px; background: #f1f5fa; font: 400 16px 'Titan One'; display: grid; place-items: center; cursor: pointer; color: #6b7a90; }
.tab.on { background: var(--blue); color: #fff; box-shadow: 0 3px 0 #2563c9; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow-y: auto; padding: 4px 2px 8px; min-height: 0; }
.card { position: relative; background: color-mix(in srgb, var(--c) 18%, #fff); border-radius: 18px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; cursor: pointer; box-shadow: 0 4px 0 var(--line); border: 3px solid transparent; }
.card.sel { border-color: #3fc265; }
.card .sk { width: 72px; height: 72px; object-fit: contain; }
.card .sk.sil { filter: brightness(0) opacity(.35); }
.card .nm2 { font: 700 14px/1.1 'Baloo 2'; text-align: center; min-height: 30px; display: grid; place-items: center; }
.card .ft { font: 400 15px 'Titan One'; }
.card .ft .eq { color: #3fc265; }
.card .ft .use { color: var(--blue); }
.card .ft .pr.no { color: #a7b1c0; }
.card .ft .pv { display: inline-flex; align-items: center; gap: 4px; color: #6d43c9; }
.card .ft .pv .vid { width: 22px; height: 20px; }
.card .ft .lk { color: #8a96a8; font-size: 13px; }
.newdot { position: absolute; right: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #ff4f5e; }

/* ---------- toast / coach / fx (from the Boogie kit, recoloured) ---------- */
.toast { position: absolute; left: 50%; top: calc(var(--sat) + 120px); transform: translateX(-50%) translateY(-10px); opacity: 0; pointer-events: none; z-index: 30;
  display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border: 3px solid #24324a; border-left: 8px solid var(--blue); border-radius: 16px;
  box-shadow: 0 5px 0 #24324a; padding: 8px 16px 8px 10px; font: 700 18px 'Baloo 2'; transition: opacity .2s, transform .2s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.problem { border-left-color: #ff4f5e; }
.toast.reward { border-left-color: var(--gold); }
.toast .ti { width: 30px; height: 30px; object-fit: contain; }
.toast .ti svg { stroke: var(--ink); }
.toast .ti svg path[fill="#fff"], .toast .ti svg rect[fill="#fff"] { fill: var(--ink); }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.conf { position: absolute; top: -12px; width: 9px; height: 15px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
.flycoin { position: fixed; width: 30px; height: 30px; z-index: 40; pointer-events: none; transition: transform .6s cubic-bezier(.5,0,.8,.6), opacity .6s; }
#coach { position: absolute; inset: 0; z-index: 15; display: none; pointer-events: none; }
#coach.on { display: block; }
#coach * { pointer-events: none; }
#coach .hole { display: none; } /* v1.5: no yellow box around tutorial targets, the pointing hand is enough (Yash) */
@keyframes hpulse { 50% { transform: scale(1.05); } }
#coach .cbox { position: absolute; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border: 3px solid #24324a;
  border-left: 8px solid var(--gold); border-radius: 16px; box-shadow: 0 5px 0 #24324a; padding: 10px 14px 10px 10px; font: 700 20px 'Baloo 2'; animation: tipin .25s; }
#coach .cbox .ti { width: 34px; height: 34px; }
#coach .cbox .ti svg { stroke: var(--ink); }
#coach .cbox .ti svg path[fill="#fff"] { fill: var(--ink); }
#coach .cbox::after { content: ''; position: absolute; left: calc(var(--ax, 50%) - 16px - 10px); width: 18px; height: 18px; background: #fff; border: 3px solid #24324a; transform: rotate(45deg); }
#coach .cbox.up::after { top: -12px; border-right: none; border-bottom: none; }
#coach .cbox.down::after { bottom: -12px; border-left: none; border-top: none; }
#coach .cbox:not(.up):not(.down)::after { display: none; }
#coach .hand { position: absolute; width: 56px; height: 64px; margin: -6px 0 0 -14px; filter: drop-shadow(0 4px 2px rgba(36,50,74,.4)); }
#coach .hand svg { width: 100%; height: 100%; }
#coach .hand svg path { fill: #fff; stroke: #24324a; stroke-width: 2.5; }
#coach .hand.tap { animation: htap 1s infinite; }
#coach .hand.drag { animation: hdrag 1.6s ease-in-out infinite; }
@keyframes htap { 50% { transform: translateY(10px) scale(.9); } }
@keyframes hdrag { 0% { transform: translate(-50px, 0); } 50% { transform: translate(50px, -20px); } 100% { transform: translate(-50px, 0); } }
#coach.fade { opacity: 0; transition: opacity .2s; }
@keyframes tipin { from { opacity: 0; transform: translateY(8px); } }

#boot { position: absolute; inset: 0; z-index: 50; background: #cfdcec; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; transition: opacity .35s; }
#boot .t { font: 400 52px 'Titan One', sans-serif; color: #3d8bff; }
#boot .bar { width: 180px; height: 12px; border-radius: 6px; background: #fff; overflow: hidden; }
#boot .bar i { display: block; height: 100%; width: 40%; background: #3d8bff; border-radius: 6px; animation: load 1s ease-in-out infinite alternate; }
@keyframes load { to { transform: translateX(150%); } }
#boot.off { opacity: 0; pointer-events: none; }

/* =====================================================================
   v1.1 bright restyle (Yash's reference look): saturated blue backdrops, chunky white text with a navy outline,
   navy currency pill, yellow round PLAY, white bottom tab bar, deep-blue panels, glossy painted icons.
   ===================================================================== */
:root { --navy: #1b2a6b; --blue1: #1a6cf0; --blue2: #2fb6ff; --deep: #1d47c9; --deep2: #163aa8; --yel: #ffd31f; --yel2: #f29a00; --grn: #61dd3c; --grn2: #2f9e1e; --cyan: #3fe3ff; --cyan2: #12a5d6; }
.ol { color: #fff; text-shadow: -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy), 2px 2px 0 var(--navy), 0 -2px 0 var(--navy), 0 2px 0 var(--navy), -2px 0 0 var(--navy), 2px 0 0 var(--navy), 0 4px 0 var(--navy); }
#ui.menu { pointer-events: auto; background: radial-gradient(120% 70% at 50% 42%, #7fe1ff 0%, #33b5ff 38%, #1a76f2 100%); overflow: hidden; }
#ui.menu::before { content: ''; position: absolute; inset: 0; opacity: .14; pointer-events: none;
  background-image: radial-gradient(circle at 20px 20px, #fff 9px, transparent 10px), radial-gradient(circle at 70px 60px, #fff 14px, transparent 15px);
  background-size: 110px 110px; }
#ui.menu.skins, #ui.menu.missions { background: linear-gradient(#2a6af0, #1d4fd8); }
.topbar { z-index: 3; }
.pill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 30px 0 0; margin-left: 30px; border-radius: 20px; background: rgba(27, 42, 107, .82); position: relative; cursor: pointer; }
.pill .coin { width: 50px; height: 50px; margin-left: -26px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.pill b { font: 400 21px 'Titan One'; color: #fff; }
.pill .plus { position: absolute; left: 4px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--grn); color: #fff; font: 400 18px/20px 'Titan One'; text-align: center; font-style: normal; box-shadow: 0 2px 0 var(--grn2); border: 2px solid #fff; }
.btn.round { background: #fff; box-shadow: 0 4px 0 #a9c4f2; }
.btn.round .svgi svg { stroke: var(--deep); }
.alert { position: absolute; right: -4px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: #ff2d3d; border: 3px solid #fff; color: #fff; font: 400 16px/20px 'Titan One'; text-align: center; font-style: normal; box-shadow: 0 2px 0 #b3101d; z-index: 2; }

/* screen body between the coin bar and the tab bar */
.mbodyScreen { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 66px); bottom: calc(var(--sab) + 84px); }
.mbodyScreen.scroll { overflow-y: auto; padding: 4px 12px 30px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

/* bottom tab bar + yellow PLAY / home circle */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--sab) + 76px); padding-bottom: var(--sab); background: linear-gradient(#ffffff, #d9ecff); border-top: 3px solid #fff;
  box-shadow: 0 -4px 0 rgba(27,42,107,.18); display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr; align-items: center; z-index: 4; }
.tab2 { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.tab2 .ti2 { width: 50px; height: 50px; object-fit: contain; transition: transform .15s; }
.tab2.on { background: linear-gradient(#2a64e8, #1d47c9); border-radius: 16px 16px 0 0; margin-top: -10px; height: calc(100% + 10px); }
.tab2.on .ti2 { width: 60px; height: 60px; transform: translateY(-14px); }
.tab2 .tl { position: absolute; bottom: 8px; font: 400 14px 'Titan One'; color: #fff; }
.tab2.locked .ti2 { filter: grayscale(.8) brightness(1.1); opacity: .7; }
.tab2 .alert { right: 8px; top: 2px; }
.homeBtn { justify-self: center; width: 96px; height: 96px; margin-top: -34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, #fff3a0 0%, var(--yel) 45%, #ffbf00 100%); border: 5px solid #fff; box-shadow: 0 6px 0 var(--yel2), 0 10px 18px rgba(27,42,107,.3); transition: transform .08s; }
.homeBtn svg { width: 58%; height: 58%; }
.homeBtn.play svg { width: 62%; height: 62%; margin-left: 8%; }
.homeBtn.pressed { transform: translateY(3px) scale(.95); }

/* home */
.lvlBanner { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); text-align: center; width: 260px; }
.lvT { font: 400 34px 'Titan One'; }
.lvBar { margin-top: 6px; background: rgba(27,42,107,.82); border: 3px solid #fff; border-radius: 16px; padding: 6px 10px 5px; }
.pips { display: flex; gap: 4px; justify-content: center; }
.pips i { width: 18px; height: 12px; border-radius: 6px; background: #3a4f9e; }
.pips i.done { background: var(--grn); }
.pips i.cur { background: var(--yel); box-shadow: 0 0 0 2px #fff; }
.pips i.boss { width: 24px; background: #ff4f8a; }
.pips i.boss.done { background: var(--grn); }
.lvG { display: block; font: 700 15px 'Baloo 2'; color: #fff; margin-top: 2px; }
.stage2 { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 240px; height: 240px; cursor: pointer; }
.podium { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 220px; height: 66px; border-radius: 50%; background: radial-gradient(#ffffff, #d8f3ff 60%, #8fdcff 100%); box-shadow: 0 8px 0 #4aa8f0, 0 0 40px rgba(255,255,255,.9); }
.podium i { position: absolute; inset: 10px 26px; border-radius: 50%; border: 3px solid rgba(47,182,255,.45); }
.hero2 { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: 170px; height: 170px; display: grid; place-items: center; animation: hover 2.2s ease-in-out infinite; }
.hero2 .heroImg { width: 170px; height: 170px; object-fit: contain; filter: drop-shadow(0 10px 6px rgba(27,42,107,.28)); }
.sideCard { position: absolute; bottom: 104px; width: 100px; height: 104px; border-radius: 22px; border: 4px solid #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 5px 0 rgba(27,42,107,.35); }
.sideCard.left { left: 10px; background: linear-gradient(#ffc3e4, #ff8ec9); }
.sideCard.right { right: 10px; background: linear-gradient(#b8f7a0, #63d94a); }
.sideCard.on { box-shadow: 0 0 0 4px var(--yel), 0 5px 0 rgba(27,42,107,.35); }
.sideCard.locked { filter: saturate(.4); }
.sideCard .sci { width: 48px; height: 48px; }
.sideCard .scn { font: 400 15px 'Titan One'; margin-top: 2px; white-space: nowrap; }
.sideCard .scf { font: 400 15px 'Titan One'; color: var(--navy); display: flex; align-items: center; gap: 2px; }
.sideCard .scf .coin { width: 22px; height: 22px; }
.bubble { position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%); width: 108px; padding: 6px 4px 8px; border-radius: 20px; border: 4px solid #fff; background: linear-gradient(#9cf07a, var(--grn));
  text-align: center; cursor: pointer; box-shadow: 0 5px 0 var(--grn2); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -14px; margin-left: -10px; border: 10px solid transparent; border-top-color: #fff; }
.bubble span { font: 400 15px 'Titan One'; color: var(--navy); }
.bubble b { font: 400 34px 'Titan One'; margin: 2px 0; }
.bubble em { position: absolute; right: -14px; top: -14px; font-style: normal; }
.bubble em.tv .vid { width: 36px; height: 34px; }
.bubble em.ok { background: #fff; color: var(--grn2); font: 400 13px 'Titan One'; padding: 4px 8px; border-radius: 10px; }
.bubble.on { background: linear-gradient(#fff6a8, var(--yel)); box-shadow: 0 5px 0 var(--yel2); }

/* buttons in the new palette (fire on release as before) */
.btn.yellow { background: linear-gradient(#ffe65a, var(--yel)); color: #fff; box-shadow: 0 5px 0 var(--yel2), 0 8px 14px rgba(27,42,107,.2); border: 3px solid #fff; }
.btn.cyan { background: linear-gradient(#8ff2ff, var(--cyan)); box-shadow: 0 5px 0 var(--cyan2), 0 8px 14px rgba(27,42,107,.2); border: 3px solid #fff; }
.btn.primary { background: linear-gradient(#9cf07a, var(--grn)); box-shadow: 0 5px 0 var(--grn2), 0 8px 14px rgba(27,42,107,.2); border: 3px solid #fff; }
.btn.video { background: linear-gradient(#9cf07a, var(--grn)); box-shadow: 0 5px 0 var(--grn2), 0 8px 14px rgba(27,42,107,.2); border: 3px solid #fff; }
.btn.video.pressed, .btn.primary.pressed { box-shadow: 0 2px 0 var(--grn2); }
.btn.yellow .bl, .btn.cyan .bl, .btn.primary .bl, .btn.video .bl { color: #fff; text-shadow: -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy), 2px 2px 0 var(--navy), 0 3px 0 var(--navy); }
.btn .bi { object-fit: contain; }
.btn.nav { border: 3px solid #fff; background: linear-gradient(#ffffff, #e2efff); color: var(--deep); box-shadow: 0 5px 0 #a9c4f2; }

/* skins screen */
.ribbon { position: relative; display: flex; align-items: center; gap: 8px; height: 46px; margin: 14px 2px 10px; padding: 0 16px 0 6px; border-radius: 12px; border: 3px solid #fff;
  background: linear-gradient(90deg, #8fe3ff, #e6f8ff); box-shadow: 0 4px 0 rgba(27,42,107,.35); }
.ribbon .ri { width: 50px; height: 50px; object-fit: contain; margin-top: -10px; }
.ribbon .rt { font: 400 21px 'Titan One'; flex: 1; }
.ribbon .rc { font: 400 18px 'Titan One'; color: var(--navy); }
.ribbon.r_animals { background: linear-gradient(90deg, #ffd27a, #fff3d6); }
.ribbon.r_food { background: linear-gradient(90deg, #ff9fb8, #ffe6ee); }
.ribbon.r_sweets { background: linear-gradient(90deg, #e7a6ff, #f8e6ff); }
.ribbon.r_rides { background: linear-gradient(90deg, #9ff07f, #e8ffe0); }
.ribbon.r_toys { background: linear-gradient(90deg, #ffb07a, #fff0e3); }
.ribbon.r_space { background: linear-gradient(90deg, #a7b4ff, #e8ebff); }
.ribbon.r_secret { background: linear-gradient(90deg, #ffd31f, #fff7c6); }
.grid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card2 { position: relative; aspect-ratio: .82; border-radius: 18px; border: 3px solid #6fa0ff; background: linear-gradient(#3a6df0, #2350d6); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 0 #13339a; overflow: visible; }
.card2.own { background: linear-gradient(#bff0ff, #6fd2ff); border-color: #fff; box-shadow: 0 5px 0 #2b86d6; }
.card2.sel { border-color: var(--yel); box-shadow: 0 0 0 3px var(--yel), 0 5px 0 #2b86d6; }
.card2 .sk { width: 78%; height: 62%; object-fit: contain; }
.card2.lock .sk { filter: brightness(.55) saturate(.55); opacity: .75; }
.card2 .sk.sil { filter: brightness(0) opacity(.45) !important; }
.card2 .lk2 { position: absolute; top: 26%; left: 50%; width: 46px; height: 46px; transform: translateX(-50%); }
.card2 .ft2 { font: 400 14px 'Titan One'; color: #fff; text-shadow: 0 2px 0 var(--navy); display: flex; align-items: center; gap: 3px; white-space: nowrap; max-width: 96%; overflow: hidden; }
.card2.own .ft2 { color: var(--navy); text-shadow: none; }
.card2 .ft2.no { opacity: .65; }
.card2 .ft2 .coin { width: 20px; height: 20px; }
.card2 .ft2 .vid { width: 22px; height: 20px; }
.card2 .alert { right: -6px; top: -8px; }

/* skin preview overlay */
.preview { position: absolute; inset: 0; z-index: 22; display: flex; flex-direction: column; align-items: center; }
.pvbg { position: absolute; inset: 0; background: linear-gradient(#7fe1ff 0%, #33b5ff 45%, #1a76f2 100%); }
.pvName { position: relative; margin-top: calc(var(--sat) + 70px); min-width: 230px; text-align: center; padding: 8px 24px; border-radius: 14px; border: 3px solid #fff; background: linear-gradient(90deg, #8fe3ff, #e6f8ff); font: 400 30px 'Titan One'; box-shadow: 0 4px 0 rgba(27,42,107,.35); }
.stage2.pv { top: 46%; }
.turfChip { position: absolute; top: 66%; display: flex; align-items: center; gap: 10px; font: 700 17px 'Baloo 2'; color: #fff; text-shadow: 0 2px 0 var(--navy); }
.turfChip i { width: 46px; height: 26px; border-radius: 8px; border: 3px solid #fff; }
.pvBtns { position: absolute; bottom: calc(var(--sab) + 34px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pvBtns .btn.big { min-width: 230px; }
.xBtn { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 #a9c4f2; cursor: pointer; border: 3px solid #d5e6ff; }
.xBtn svg { width: 30px; height: 30px; }

/* missions */
.misHead { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 24px 0 4px; border-radius: 18px; background: rgba(27,42,107,.82); border: 3px solid #6fa0ff; }
.misHead .mhI { width: 60px; height: 60px; margin-top: -8px; }
.misHead .mhP { font: 400 24px 'Titan One'; }
.panel { position: absolute; left: 12px; right: 12px; top: 78px; bottom: 8px; overflow-y: auto; border-radius: 26px; border: 4px solid #4f86ff; background: linear-gradient(#1f4fd8, #1a3fb8); padding: 10px 10px 14px; box-shadow: inset 0 3px 0 rgba(255,255,255,.15); }
.toggle { display: flex; background: #1a3596; border-radius: 22px; padding: 4px; gap: 4px; }
.tg { position: relative; flex: 1; height: 46px; border-radius: 19px; display: grid; place-items: center; font: 400 21px 'Titan One'; cursor: pointer; }
.tg.on { background: linear-gradient(#fff6a8, var(--yel)); box-shadow: 0 4px 0 var(--yel2); }
.tg .alert { right: 4px; top: -6px; }
.timer { margin: 10px 0 6px; padding: 6px; border-radius: 12px; background: #1a3596; font: 700 15px 'Baloo 2'; color: #8fd6ff; text-align: center; }
.timer b { color: #fff; }
.mis { position: relative; display: flex; align-items: center; gap: 10px; min-height: 86px; margin-top: 10px; padding: 8px 10px; border-radius: 20px; border: 3px solid #6fa0ff; background: linear-gradient(#3566ea, #2a52d0); box-shadow: 0 5px 0 #132f8f; }
.mis.ready { cursor: pointer; border-color: #fff; background: linear-gradient(100deg, #b6f55a, #5fd93a); box-shadow: 0 5px 0 var(--grn2); animation: pulse 1.2s ease-in-out infinite; }
.mis.claimed { opacity: .55; }
.mis .mi { width: 48px; height: 48px; flex: none; }
.mis .mt { flex: 1; min-width: 0; }
.mis .mh { font: 400 20px 'Titan One'; }
.mis .md { font: 700 15px/1.15 'Baloo 2'; color: #cfe4ff; }
.mis.ready .md { color: var(--navy); }
.mbar { margin-top: 5px; height: 12px; border-radius: 6px; background: #142c7e; overflow: hidden; }
.mbar i { display: block; height: 100%; background: linear-gradient(#ffe65a, var(--yel)); border-radius: 6px; }
.mis .mr { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; }
.mis .mrI { width: 52px; height: 44px; object-fit: contain; }
.mis .mr b { font: 400 19px 'Titan One'; margin-top: -10px; }

/* classic + gift tabs */
.bigTitle { text-align: center; font: 400 40px 'Titan One'; margin-top: 14px; }
.classicArt { display: grid; place-items: center; margin-top: 8px; }
.classicArt .caI { width: 230px; height: 230px; animation: hover 2.6s ease-in-out infinite; filter: drop-shadow(0 12px 8px rgba(27,42,107,.3)); }
.csub { text-align: center; font: 700 18px 'Baloo 2'; color: #fff; text-shadow: 0 2px 0 var(--navy); margin: 6px 20px; }
.statsRow { display: flex; justify-content: center; gap: 10px; margin: 14px 0 18px; }
.statsRow .sb { width: 102px; padding: 6px 0; border-radius: 16px; background: rgba(27,42,107,.8); border: 3px solid #6fa0ff; text-align: center; }
.statsRow .sb b { display: block; font: 400 24px 'Titan One'; }
.statsRow .sb span { font: 700 13px 'Baloo 2'; color: #9fd0ff; }
#classicPlay { display: flex; margin: 0 auto; min-width: 210px; }
.menu.gift .panel { top: 76px; bottom: auto; }
.days { gap: 8px; }
.day { background: linear-gradient(#3566ea, #2a52d0); border: 3px solid #6fa0ff; border-radius: 16px; padding: 6px 2px 8px; box-shadow: 0 4px 0 #132f8f; }
.day .dn { font: 400 13px 'Titan One'; color: #fff; }
.day .di { width: 46px; height: 46px; object-fit: contain; }
.day b { font: 400 15px 'Titan One'; }
.day.now { background: linear-gradient(#fff6a8, var(--yel)); border-color: #fff; outline: none; box-shadow: 0 4px 0 var(--yel2); animation: pulse 1.2s ease-in-out infinite; }
.day.got { opacity: .45; }
.giftBtns { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 16px; }
.giftBtns .btn { min-width: 210px; }

/* modals in the new look: deep blue panel, white outlined titles */
.modal { background: linear-gradient(#2a64e8, #1d47c9); border: 4px solid #6fa0ff; box-shadow: 0 8px 0 #13339a, 0 20px 40px rgba(27,42,107,.4); color: #fff; }
.mtitle, .modal.win .mtitle, .modal.perfect .mtitle { color: #fff; text-shadow: -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy), 2px 2px 0 var(--navy), 0 4px 0 var(--navy); }
.modal.win .mtitle { color: #c8ff6a; }
.modal.perfect .mtitle { color: var(--yel); }
.msub { color: #fff; }
.msub.dim { color: #9fd0ff; }
.msub.gold { color: var(--yel); }
.st { background: rgba(27,42,107,.75); }
.st b { color: #fff; }
.st span { color: #9fd0ff; }
.reward { color: var(--yel); text-shadow: 0 3px 0 var(--navy); }
.reward .coin { width: 46px; height: 46px; }
.mclose .xi svg { stroke: #fff; }
.nudge { color: #fff; }
.nudge .ni { width: 32px; height: 32px; }
.set { background: rgba(27,42,107,.7); color: #fff; }
.set .bi svg { stroke: #fff; }
.set .bi svg path[fill="#fff"], .set .bi svg circle[fill="#fff"] { fill: #fff; }
.ver { color: #9fd0ff; }
.btn.quiet { color: #cfe4ff; }

/* in-game HUD in the new palette */
.goal { background: rgba(27,42,107,.85); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(27,42,107,.3); }
.goal .gt { color: #fff; }
.goal .gv { color: #9fd0ff; }
.goal .gbar { background: #142c7e; }
.killChip { background: rgba(27,42,107,.85); border: 3px solid #fff; color: #fff; }
.lb .r { background: rgba(27,42,107,.78); color: #fff; }
.lb .r.me { background: #fff; color: var(--navy); }
#ui.hud #pauseBtn { background: #fff; }
.fl { text-shadow: -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy), 2px 2px 0 var(--navy), 0 4px 0 var(--navy); }
.fl.praise { color: var(--yel); }
.fl.kill { color: #ff6b8a; }
#boot { background: linear-gradient(#33b5ff, #1a76f2); }
#boot .t { color: #fff; text-shadow: 0 5px 0 var(--navy); }

/* v1.1.1 tab bar: rounded raised bar, white cradle around the yellow button, pop-up active tab, labels under every icon */
.tabbar { left: 6px; right: 6px; bottom: 6px; height: calc(var(--sab) + 74px); border: none; border-radius: 26px;
  background: linear-gradient(#ffffff 0%, #eef6ff 55%, #cfe3ff 100%); box-shadow: 0 0 0 3px #fff, 0 6px 0 #2a5bd0, 0 10px 18px rgba(27,42,107,.35); }
.tabbar::before { content: ''; position: absolute; left: 14px; right: 14px; top: 5px; height: 10px; border-radius: 8px; background: rgba(255,255,255,.9); }
.cradle { position: absolute; left: 50%; top: -30px; width: 124px; height: 70px; margin-left: -62px; border-radius: 62px 62px 0 0; background: #fff; z-index: 0;
  box-shadow: 0 -3px 0 rgba(42,91,208,.25); }
.homeBtn { position: relative; z-index: 1; width: 98px; height: 98px; margin-top: -44px; border: 5px solid #fff;
  background: radial-gradient(circle at 50% 28%, #fffbd1 0%, #ffe14a 34%, #ffc400 72%, #ffad00 100%);
  box-shadow: inset 0 -7px 0 #f29a00, inset 0 4px 0 rgba(255,255,255,.7), 0 6px 0 #d98500, 0 12px 18px rgba(27,42,107,.35); }
.homeBtn::after { content: ''; position: absolute; left: 18px; top: 12px; width: 26px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.7); transform: rotate(-24deg); }
.homeBtn svg { width: 62%; height: 62%; filter: drop-shadow(0 1px 0 rgba(0,0,0,.08)); }
.homeBtn.play svg { width: 66%; height: 66%; margin-left: 9%; }
.tab2 { z-index: 1; padding-bottom: 6px; }
.tab2 .ti2 { width: 44px; height: 44px; margin-top: -2px; filter: drop-shadow(0 3px 0 rgba(27,42,107,.18)); }
.tab2 .tl { position: static; margin-top: 1px; font: 400 12px 'Titan One'; color: #4a6bb8; text-shadow: none; }
.tab2.on { margin: -16px 3px 0; height: calc(100% + 10px); border-radius: 20px; background: linear-gradient(#3b7bff, #1d47c9); border: 3px solid #fff;
  box-shadow: 0 5px 0 #13339a; }
.tab2.on .ti2 { width: 52px; height: 52px; transform: translateY(-12px) scale(1.08); }
.tab2.on .tl { color: #fff; margin-top: -10px; text-shadow: -1.5px -1.5px 0 var(--navy), 1.5px -1.5px 0 var(--navy), -1.5px 1.5px 0 var(--navy), 1.5px 1.5px 0 var(--navy), 0 2px 0 var(--navy); }
.tab2 .alert { right: 4px; top: -4px; width: 24px; height: 24px; font-size: 14px; line-height: 18px; }
.mbodyScreen { bottom: calc(var(--sab) + 92px); }

/* v1.2 skins move on home / preview with their in-game motion type (squash/stretch from the feet) */
.hero2 { animation: none; }
.hero2 .heroImg { transform-origin: 50% 96%; }
.hero2.mv_waddle .heroImg { animation: hwad .66s ease-in-out infinite; }
@keyframes hwad { 0%, 100% { transform: rotate(-8deg) scale(1.04, .96); } 25% { transform: translateY(-8px) rotate(0) scale(.98, 1.03); } 50% { transform: rotate(8deg) scale(1.04, .96); } 75% { transform: translateY(-8px) rotate(0) scale(.98, 1.03); } }
.hero2.mv_jelly .heroImg { animation: hjel .84s ease-in-out infinite; }
@keyframes hjel { 0%, 100% { transform: scale(1.1, .88); } 30% { transform: scale(.9, 1.12) translateY(-6px); } 55% { transform: scale(1.05, .95); } 75% { transform: scale(.97, 1.04); } }
.hero2.mv_flip .heroImg, .hero2.mv_hop .heroImg { animation: hhop .58s cubic-bezier(.3,0,.7,1) infinite; }
@keyframes hhop { 0%, 100% { transform: translateY(0) scale(1.14, .84); } 15% { transform: translateY(-4px) scale(.9, 1.1); } 50% { transform: translateY(-30px) scale(.97, 1.04) rotate(-4deg); } 85% { transform: translateY(-4px) scale(.95, 1.06); } }
.hero2.mv_roll .heroImg { animation: hroll .16s ease-in-out infinite; }
@keyframes hroll { 50% { transform: translateY(-3px) scale(1.01, .99); } }
.hero2.mv_fly { animation: hover 1.6s ease-in-out infinite; bottom: 70px; }
.hero2.mv_fly .heroImg { animation: hsway 2.4s ease-in-out infinite; }
@keyframes hsway { 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .hero2 *, .hero2 { animation: none !important; } }

/* v1.4 live 3D hero + rarity tiers */
.hero2 .heroGL { position: absolute; left: 50%; bottom: -28px; width: 230px; height: 250px; transform: translateX(-50%); pointer-events: none; }
.hero2.hasGL { animation: none !important; }
.hero2.hasGL .heroImg { visibility: hidden; }
.tier2 { position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: 9px; font: 800 11px/16px 'Baloo 2', sans-serif; color: #fff; letter-spacing: .02em; box-shadow: 0 2px 0 rgba(0,0,0,.18); pointer-events: none; }
.t1 { background: #2f9bff; } .t2 { background: #9b5cff; } .t3 { background: linear-gradient(180deg, #ffd23f, #ff9a1f); color: #5a3200; }
.pvTier { margin: -6px auto 0; width: max-content; padding: 2px 12px; border-radius: 12px; font: 800 14px/22px 'Baloo 2', sans-serif; color: #fff; position: relative; z-index: 2; }

/* ---------- v1.6 UI pass: match reference layout ---------- */
/* top bar: currency pill centred, gear pinned right */
.topbar { justify-content: center; }
.topbar #gearBtn { position: absolute; right: 16px; top: 0; }
/* tab bar: flush full-width strip, icon-only tabs, solid blue slot for the active tab */
.tabbar { left: 0; right: 0; bottom: 0; height: calc(var(--sab) + 70px); border-radius: 0; border-top: 2px solid #fff;
  background: linear-gradient(#f7fbff 0%, #e4f0ff 60%, #cfe2fb 100%); box-shadow: 0 -3px 0 rgba(27,42,107,.14), 0 -8px 16px rgba(27,42,107,.12); }
.tabbar::before, .cradle { display: none; }
.homeBtn { width: 92px; height: 92px; margin-top: -40px; border: 4px solid #fff;
  box-shadow: inset 0 -6px 0 #f29a00, inset 0 4px 0 rgba(255,255,255,.7), 0 0 0 3px #f2b400, 0 7px 0 #c97c00, 0 12px 18px rgba(27,42,107,.3); }
.tab2 { padding-bottom: 0; }
.tab2 .ti2 { width: 46px; height: 46px; margin-top: -8px; }
.tab2 .tl { display: none; }
.tab2::after { content: ''; position: absolute; bottom: calc(var(--sab) + 9px); left: 50%; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: rgba(74,107,184,.35); }
.tab2.on { margin: 0; height: 100%; border: none; border-radius: 0; background: linear-gradient(#3f80ff, #2352d8 70%, #1d45c2);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.28), inset 2px 0 0 rgba(0,0,0,.08), inset -2px 0 0 rgba(0,0,0,.08); }
.tab2.on::after { display: none; }
.tab2.on .ti2 { width: 58px; height: 58px; margin-top: 0; transform: translateY(-22px) scale(1.05); }
.tab2.on .tl { display: block; position: absolute; bottom: calc(var(--sab) + 6px); margin: 0; font: 400 14px 'Titan One'; color: #fff;
  text-shadow: -1.5px -1.5px 0 var(--navy), 1.5px -1.5px 0 var(--navy), -1.5px 1.5px 0 var(--navy), 1.5px 1.5px 0 var(--navy), 0 2px 0 var(--navy); }
.tab2 .alert { right: 6px; top: 2px; }
.mbodyScreen { bottom: calc(var(--sab) + 84px); }

/* category headers: slanted ribbon flag, count on the white tail */
.ribbon { --rg: #8fe3ff; --rg2: #d8f5ff; isolation: isolate; background: none; border: none; box-shadow: none; border-radius: 0; height: 42px; margin: 18px 7px 12px; padding: 0 18px 0 4px; }
.ribbon::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-14deg); border-radius: 9px; border: 3px solid #fff;
  background: linear-gradient(90deg, var(--rg) 0%, var(--rg2) 72%, #fff 72.5%); box-shadow: 0 4px 0 rgba(27,42,107,.38); }
.ribbon .ri { width: 48px; height: 48px; margin: -12px 0 0 -2px; }
.ribbon .rt { font-size: 20px; }
.ribbon .rc { font-size: 18px; min-width: 52px; text-align: center; }
.ribbon.r_animals { --rg: #ffbe4a; --rg2: #ffe7b0; background: none; }
.ribbon.r_food { --rg: #ff7fa3; --rg2: #ffd2df; background: none; }
.ribbon.r_sweets { --rg: #d98cff; --rg2: #f2d6ff; background: none; }
.ribbon.r_rides { --rg: #7fe05a; --rg2: #d6f8c8; background: none; }
.ribbon.r_toys { --rg: #ff9a52; --rg2: #ffdcc2; background: none; }
.ribbon.r_space { --rg: #8d9cff; --rg2: #dadfff; background: none; }
.ribbon.r_secret { --rg: #ffc81f; --rg2: #fff0a8; background: none; }
.ribbon.r_colours, .ribbon.r_colors { --rg: #5fd0ff; --rg2: #cdf1ff; background: none; }
/* locked cards: deeper navy slab, like the reference */
.card2.lock { background: linear-gradient(#2c51cf, #1f3aa8); border-color: #3e66e0; box-shadow: inset 0 3px 0 rgba(255,255,255,.12), 0 5px 0 #142a80; }
.card2.lock .sk { filter: brightness(.42) saturate(.35) hue-rotate(10deg); opacity: .7; }

/* preview: sky + perspective grid floor, slanted name flag, side arrows */
.pvbg { background: linear-gradient(#5ec8ff 0%, #2f9cff 34%, #8fe6ff 45.8%, #e9fbff 47%, #5fd2ff 48.3%, #2a9cff 100%); overflow: hidden; }
.pvbg::after { content: ''; position: absolute; left: -60%; right: -60%; top: 47.2%; height: 90%; transform-origin: 50% 0; transform: perspective(260px) rotateX(58deg);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 3px, transparent 3px 58px), repeating-linear-gradient(180deg, transparent 0 120px, rgba(255,255,255,.3) 120px 123px); }
.pvbg::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%; opacity: .14;
  background: radial-gradient(circle at 20% 30%, #fff 0 34px, transparent 35px), radial-gradient(circle at 80% 18%, #fff 0 46px, transparent 47px), radial-gradient(circle at 70% 44%, #fff 0 26px, transparent 27px); }
.pvName { isolation: isolate; background: none; border: none; box-shadow: none; padding: 6px 34px; font-size: 30px; }
.pvName::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-14deg); border-radius: 10px; border: 3px solid #fff;
  background: linear-gradient(90deg, #8fe3ff, #d8f5ff 78%, #fff 78.5%); box-shadow: 0 4px 0 rgba(27,42,107,.38); }
.pvArrow { position: absolute; top: calc(42% - 27px); width: 38px; height: 54px; display: grid; place-items: center; cursor: pointer; z-index: 3; filter: drop-shadow(0 3px 0 rgba(27,42,107,.45)); }
.pvArrow.l { left: 10px; } .pvArrow.r { right: 10px; }
.pvArrow svg { width: 22px; height: 36px; }
.pvArrow:active { transform: scale(.9); }
.card2.lock { justify-content: flex-end; padding-bottom: 9px; }
.card2.lock .sk { position: absolute; top: 9%; left: 11%; filter: brightness(0) !important; opacity: .16; }
.card2.lock .lk2 { top: 28%; width: 50px; height: 50px; filter: drop-shadow(0 3px 0 rgba(10,24,90,.5)); }
.card2.lock .ft2 { font-size: 16px; color: #dfe9ff; }

/* alignment pass: one footer baseline for every card, side cards level with the x3 bubble, centred stacks */
.topbar #gearBtn { top: -3px; }
.sideCard { bottom: 115px; }
.card2 { justify-content: flex-end; padding-bottom: 9px; }
.card2 .sk { position: absolute; top: 9%; left: 11%; }
.card2 .tier2 { z-index: 1; }
.pvName { margin-top: calc(var(--sat) + 58px); }
.stage2.pv { top: 42%; }
.turfChip { top: 57%; }
.day { text-align: center; justify-content: flex-start; }
.day b, .day .dn { line-height: 1.1; }
#classicPlay { width: 326px; max-width: calc(100% - 32px); min-width: 0; justify-content: center; }
/* flat tab icons + reworked centre button */
.tab2 .ti2.flat { display: block; width: 46px; height: 46px; filter: drop-shadow(0 2px 0 rgba(27,42,107,.18)); }
.tab2 .ti2.flat svg { width: 100%; height: 100%; display: block; }
.tab2.on .ti2.flat { width: 52px; height: 52px; filter: drop-shadow(0 3px 0 rgba(10,24,90,.45)); }
.tab2.locked .ti2.flat { filter: grayscale(.85); opacity: .6; }
.homeBtn { width: 90px; height: 90px; margin-top: -38px; border: none;
  background: radial-gradient(circle at 50% 38%, #ffe866 0%, #ffd21a 52%, #ffbe00 100%);
  box-shadow: inset 0 0 0 5px #ffe773, inset 0 0 0 7px #f2ad00, inset 0 -7px 0 7px rgba(214,128,0,.35), 0 0 0 4px #fff, 0 6px 0 4px #d7e6fa, 0 10px 16px rgba(27,42,107,.28); }
.homeBtn::after { left: 20px; top: 13px; width: 24px; height: 11px; background: rgba(255,255,255,.75); }
.homeBtn svg { width: 56%; height: 56%; margin-top: -2px; }
.homeBtn.play svg { width: 60%; height: 60%; margin-left: 6%; }
.bubble::after { display: none; }
.homeBtn.play svg { margin-left: 0; margin-top: 0; }

/* v1.6.2 uniformity pass: one close button, one bubble border, coin buys always yellow */
.mclose { right: -12px; top: -12px; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 3px solid #d5e6ff; box-shadow: 0 4px 0 #a9c4f2, 0 6px 10px rgba(27,42,107,.25); z-index: 2; }
.mclose .xi { width: 22px; height: 22px; }
.mclose .xi svg { stroke: #1b4fd6 !important; stroke-width: 4.5; }
.toast, #coach .cbox { border-color: var(--navy); box-shadow: 0 5px 0 var(--navy), 0 8px 16px rgba(27,42,107,.25); }
#coach .cbox::after { border-color: var(--navy); }
.toast { top: 42%; }
/* v1.6.3: in-match messages stay out of the play view */
#coach .cbox.mini { top: auto; bottom: calc(var(--sab) + 18px); left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px);
  padding: 6px 14px 6px 8px; gap: 8px; font-size: 15px; opacity: .92; border-width: 2px; box-shadow: 0 3px 0 var(--navy); border-radius: 14px; }
#coach .cbox.mini .ti { width: 24px; height: 24px; }
#coach .cbox.mini::after { display: none; }
#floats { top: auto; bottom: calc(var(--sab) + 120px); }
.fl { font-size: 20px; }
.fl.gain { font-size: 22px; top: 0; }
.fl.praise { font-size: 24px; top: -34px; }
.fl.kill { font-size: 19px; top: 30px; }
.turfChip { flex-direction: column; gap: 6px; }
.turfChip .tsw { width: 120px; height: 70px; border-radius: 12px; border: 3px solid #fff; object-fit: cover; display: block; }
#boot .logo { width: min(78vw, 340px); height: auto; filter: drop-shadow(0 8px 14px rgba(10,24,90,.35)); animation: bootPop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes bootPop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
/* v1.8 timed levels: the goal pill pulses red in the last 10 s */
.goal.hurry { border-color: #ff5a6e; animation: hurry .5s ease-in-out infinite alternate; }
.goal.hurry .gv { color: #ffd0d6; }
@keyframes hurry { to { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(255,90,110,.45), 0 4px 0 rgba(27,42,107,.3); } }
.zarrow { position: absolute; width: 46px; height: 46px; display: none; pointer-events: none; z-index: 3; filter: drop-shadow(0 3px 0 rgba(27,42,107,.35)); animation: zpulse .7s ease-in-out infinite alternate; }
.zarrow svg { width: 100%; height: 100%; }
@keyframes zpulse { to { opacity: .65; } }
/* settings: How to play */
.set.howRow .hq { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #ffd23f; color: var(--navy); display: grid; place-items: center; font: 400 18px 'Titan One'; box-shadow: 0 2px 0 #c98a00; }
.set.howRow .chev { margin-left: auto; font: 400 26px 'Titan One'; color: #9fd0ff; font-style: normal; }
.mbody.howto { display: flex; flex-direction: column; gap: 8px; max-height: min(56vh, 460px); overflow-y: auto; padding-right: 2px; touch-action: pan-y; }
.howCard { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; background: rgba(27,42,107,.55); border: 2px solid rgba(111,160,255,.6); text-align: left; }
.howCard .hpic { flex: 0 0 72px; height: 54px; border-radius: 12px; background: #e9f4ff; display: grid; place-items: center; }
.howCard .hpic svg { width: 66px; height: 50px; }
.howCard .htx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.howCard .htx b { font: 400 16px 'Titan One'; color: #fff; }
.howCard .htx span { font: 600 13px/1.25 'Baloo 2'; color: #cfe3ff; }
/* v1.8.4 kill feed: top centre under the goal bar, left of the leaderboard */
.kfeed { position: absolute; left: 12px; right: 136px; top: calc(var(--sat) + 70px); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; z-index: 2; }
.kf { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 6px; border-radius: 14px; background: rgba(27,42,107,.86); border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 0 rgba(27,42,107,.3); font: 700 13px/1 'Baloo 2'; color: #fff; animation: kfIn .28s cubic-bezier(.3,1.5,.5,1) both; transition: opacity .3s, transform .3s; }
.kf.out { opacity: 0; transform: translateX(-12px); }
.kf.mine { background: linear-gradient(#ffcf2e, #ffaa00); border-color: #fff; color: var(--navy); }
.kf.mine .ki svg path { stroke: var(--navy); }
.kf.died { background: linear-gradient(#ff6b81, #e8344f); border-color: #fff; }
.kf .kn { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf .kn i { flex: 0 0 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; }
.kf .kn.me { font-weight: 800; }
.kf .ki { flex: 0 0 18px; height: 18px; display: grid; place-items: center; }
.kf .ki svg { width: 18px; height: 18px; }
.kf .kw { opacity: .85; font-weight: 600; white-space: nowrap; }
@keyframes kfIn { from { opacity: 0; transform: translateY(-8px) scale(.9); } to { opacity: 1; transform: none; } }
/* v1.9 active power-up chips (bottom centre) */
.pfx { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 64px); display: flex; justify-content: center; gap: 10px; pointer-events: none; z-index: 2; }
.pchip { position: relative; width: 48px; height: 48px; border-radius: 50%; background: rgba(27,42,107,.85); border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(27,42,107,.3); animation: kfIn .25s cubic-bezier(.3,1.5,.5,1) both; }
.pchip img { width: 34px; height: 34px; }
.pchip i { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(#ffd23f calc(var(--f, 1) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 27px, #000 28px); mask: radial-gradient(circle, transparent 27px, #000 28px); }
.pchip.frozen i { background: conic-gradient(#8fdcff calc(var(--f, 1) * 360deg), transparent 0); }
/* v2.0 results: next-skin progress with card flip */
.nextSkin { display: flex; align-items: center; gap: 12px; margin: 10px auto 0; padding: 8px 12px; width: min(300px, 100%); border-radius: 16px; background: rgba(27,42,107,.55); border: 2px solid rgba(111,160,255,.6); }
.nextSkin.ready { border-color: #ffd23f; box-shadow: 0 0 0 3px rgba(255,210,63,.35); }
.nsCard { position: relative; flex: 0 0 64px; height: 64px; perspective: 400px; }
.nsFace { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; transition: transform .6s cubic-bezier(.3,1.4,.5,1); display: grid; place-items: center; }
.nsFace.back { background: linear-gradient(#2c51cf, #1f3aa8); border: 2px solid #3e66e0; }
.nsFace.back span { font: 400 30px 'Titan One'; color: #9fc0ff; }
.nsFace.front { background: #e9f4ff; transform: rotateY(180deg); }
.nsCard.flip .back { transform: rotateY(180deg); }
.nsCard.flip .front { transform: rotateY(360deg); }
.nsFace .nsImg { width: 56px; height: 56px; }
.nsCard:not(.flip) .front .nsImg { filter: brightness(0); opacity: .25; }
.nsInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.nsT { font: 400 15px 'Titan One'; color: #fff; }
.nsBar { position: relative; height: 18px; border-radius: 9px; background: #14286e; overflow: hidden; border: 2px solid rgba(255,255,255,.6); }
.nsBar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 9px; background: linear-gradient(#ffe066, #ffb800); transition: width 1s cubic-bezier(.3,.9,.4,1); }
.nsBar b { position: relative; display: block; text-align: center; font: 800 12px/14px 'Baloo 2'; color: #fff; text-shadow: 0 1px 0 #1b2a6b; }
.nsBuy { padding: 4px 12px !important; min-height: 0 !important; font-size: 16px !important; align-self: flex-start; }
.nsOwned { font: 400 15px 'Titan One'; color: #7cf0a0; }
.nsBuy { display: inline-flex !important; align-items: center; gap: 6px; height: 34px; width: auto !important; }
.nsBuy .coin { width: 22px !important; height: 22px !important; }
.nsBuy b { font: 400 17px 'Titan One'; }
/* v2.0 revive ring + near-miss */
.rvRing { position: relative; width: 84px; height: 84px; margin: 6px auto 2px; }
.rvRing svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rvRing circle { fill: none; stroke-width: 8; }
.rvRing .rvBg { stroke: #14286e; }
.rvRing .rvFg { stroke: #ffd23f; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.rvRing b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 34px 'Titan One'; color: #fff; }
.msub .gold, .gold { color: #ffd23f; }
.nearMiss { width: min(300px, 100%); margin: 6px auto 4px; display: flex; flex-direction: column; gap: 6px; }
.nmT { font: 400 22px 'Titan One'; color: #9fc0ff; text-align: center; }
.nearMiss.close .nmT { color: #ffd23f; animation: nmPulse 1s ease-in-out infinite; }
@keyframes nmPulse { 50% { transform: scale(1.08); } }
.nmBar { position: relative; height: 24px; border-radius: 12px; background: #14286e; border: 2px solid rgba(255,255,255,.6); overflow: hidden; }
.nmBar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 12px; background: linear-gradient(#ff9a7a, #ff5a5a); transition: width .9s cubic-bezier(.3,.9,.4,1); }
.nearMiss.close .nmBar i { background: linear-gradient(#ffe066, #ffb800); }
.nmBar b { position: relative; display: block; text-align: center; font: 800 14px/20px 'Baloo 2'; color: #fff; text-shadow: 0 1px 0 #1b2a6b; }
.fl.praise.mega { font-size: 34px; color: #ffd23f; animation-duration: 1.3s; letter-spacing: .5px; }
/* v2.0 settings: sensitivity range + segmented pickers */
.setts { gap: 8px !important; }
.setts .set { height: 50px; }
.set .bi.glyph { color: #fff; display: grid; place-items: center; }
.set .bi.glyph svg { width: 28px; height: 28px; }
.set.range, .set.seg { cursor: default; }
.set.range span, .set.seg > span { flex: 0 0 auto; }
.set .rg { flex: 1; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.set .rg em { font: 700 13px 'Baloo 2'; font-style: normal; color: #6b7a99; }
.set input[type=range] { -webkit-appearance: none; appearance: none; width: 110px; height: 10px; border-radius: 5px; background: #c9d3e0; outline: none; }
.set input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #3d8bff; border: 3px solid #fff; box-shadow: 0 2px 0 #1b2a6b; }
.set input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #3d8bff; border: 3px solid #fff; }
.set .sg { flex: 1; display: flex; justify-content: flex-end; gap: 4px; }
.set .sg b { padding: 4px 9px; border-radius: 10px; background: #dfe7f2; font: 700 15px 'Baloo 2'; color: #50607f; cursor: pointer; }
.set .sg b.on { background: #3d8bff; color: #fff; box-shadow: 0 2px 0 #1b2a6b; }
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
.setts .set { font-size: 18px; }
.setts .set > .bi + span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v2.0 skin trial */
.trialBox { align-items: center; }
.trCard { width: 150px; height: 150px; border-radius: 24px; display: grid; place-items: center; margin: 4px auto 2px; background: radial-gradient(circle at 50% 40%, #6fa8ff, #2c51cf 70%); border: 3px solid #9fc0ff; overflow: hidden; }
.trCard.t2 { background: radial-gradient(circle at 50% 40%, #c49bff, #6a3fd6 70%); border-color: #d9c2ff; }
.trCard > * { max-width: 130px; max-height: 130px; }
.trName { font: 400 24px 'Titan One'; color: #fff; }
.trTier { display: inline-block; padding: 2px 12px; border-radius: 10px; font: 800 13px 'Baloo 2'; color: #fff; background: #3d8bff; text-transform: uppercase; letter-spacing: .6px; }
.trTier.r_epic { background: #8a5cff; }
.trialKeep .nsFace.back { background: none; border: 0; }
/* v2.0 lucky spin */
.spinBox { align-items: center; }
.wheelWrap { position: relative; width: 260px; height: 260px; margin: 4px auto 0; max-width: 100%; }
.wheel { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 0 #1b2a6b); }
.wheel .wv { font: 400 18px 'Titan One'; fill: #fff; stroke: #1b2a6b; stroke-width: 4px; paint-order: stroke; }
.wPin { position: absolute; left: 50%; top: -8px; width: 0; height: 0; transform: translateX(-50%); border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #fff; filter: drop-shadow(0 2px 0 #1b2a6b) drop-shadow(0 -2px 0 #1b2a6b); }
.spinRes { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 400 22px 'Titan One'; color: #ffd23f; }
.spinRes .coin { width: 28px; height: 28px; }
.spinRes.pop { animation: nmPulse .4s ease-out; }
.spinBox .mbtns { width: 100%; }
.trCard .trImg { width: 124px; height: 124px; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.wheel { position: relative; }
.wheel svg { width: 100%; height: 100%; display: block; }
.wIc { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; }
.nsBuy { height: 44px; padding: 4px 16px !important; }
/* ===== v2.0.1 restyle: new v2 screens match the home/shop look (Yash) ===== */
:root { --olt: -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy), 2px 2px 0 var(--navy), 0 3px 0 var(--navy); }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes shine { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }
/* shared glossy bar */
.nsBar, .nmBar { height: 26px; border-radius: 13px; background: #132f8f; border: 3px solid #fff; box-shadow: 0 3px 0 var(--navy); }
.nsBar i, .nmBar i { border-radius: 10px; background: linear-gradient(#9cf06a, var(--grn) 55%, var(--grn2)); box-shadow: inset 0 3px 0 rgba(255,255,255,.45); }
.nmBar i { background: linear-gradient(#ffb08a, #ff6b4a 55%, #e0442a); }
.nearMiss.close .nmBar i, .nextSkin.ready .nsBar i { background: linear-gradient(#fff6a8, var(--yel) 55%, #ffb800); }
.nsBar b, .nmBar b { font: 400 14px/20px 'Titan One'; color: #fff; text-shadow: var(--olt); }
/* next-skin / keep card: a gift-day style tile */
.nextSkin { background: linear-gradient(#3566ea, #2a52d0); border: 3px solid #6fa0ff; border-radius: 18px; box-shadow: 0 5px 0 #132f8f; padding: 10px 12px; }
.nextSkin.ready { background: linear-gradient(#4b7cf5, #2f5bdc); border-color: #fff; box-shadow: 0 5px 0 #132f8f, 0 0 0 4px rgba(255,211,31,.55), 0 0 22px rgba(255,211,31,.6); }
.nsT { font: 400 18px 'Titan One'; color: #fff; text-shadow: var(--olt); }
.nsCard { flex-basis: 70px; height: 70px; }
.nsFace { border-radius: 14px; border: 3px solid #fff; box-shadow: 0 3px 0 var(--navy); overflow: hidden; }
.nsFace.back { background: radial-gradient(circle at 50% 35%, #c49bff, #7c4dff 70%); border-color: #fff; }
.nsFace.back span { color: #fff; font-size: 36px; text-shadow: var(--olt); }
.nsFace.front { background: radial-gradient(circle at 50% 35%, #fff6a8, var(--yel) 70%); }
.nsCard:not(.flip) .front .nsImg { filter: brightness(0) invert(1); opacity: .35; }
.nsFace.front::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; background: rgba(255,255,255,.55); animation: shine 2.4s ease-in-out infinite; }
.nsOwned { font: 400 18px 'Titan One'; color: var(--grn); text-shadow: var(--olt); }
.trialKeep .nsFace.back { background: none; border: 0; box-shadow: none; }
/* near-miss */
.nmT { font: 400 30px 'Titan One'; color: #fff; text-shadow: var(--olt); transform: rotate(-3deg); }
.nearMiss.close .nmT { color: var(--yel); }
/* revive ring: a glossy coin-style dial */
.rvRing { width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #4b7cf5, #2a52d0 70%); border: 4px solid #fff; box-shadow: 0 5px 0 var(--navy); }
.rvRing svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.rvRing .rvBg { stroke: #132f8f; stroke-width: 9; }
.rvRing .rvFg { stroke: var(--yel); stroke-width: 9; filter: drop-shadow(0 0 3px rgba(255,211,31,.8)); }
.rvRing b { font-size: 40px; text-shadow: var(--olt); }
.msub .gold { color: var(--yel); text-shadow: var(--olt); font-family: 'Titan One'; }
/* skin trial: shop-card hero with sun rays */
.trCard { position: relative; width: 170px; height: 170px; border-radius: 26px; border: 4px solid #fff; box-shadow: 0 6px 0 var(--navy); background: radial-gradient(circle at 50% 40%, #6fd0ff, #2f8cf0 70%); }
.trCard.t2 { background: radial-gradient(circle at 50% 40%, #d9a8ff, #8a4dff 70%); border-color: #fff; }
.trCard::before { content: ''; position: absolute; inset: -40%; background: repeating-conic-gradient(rgba(255,255,255,.22) 0 12deg, transparent 12deg 30deg); animation: rays 14s linear infinite; }
.trCard .trImg { position: relative; width: 140px; height: 140px; }
.trName { font-size: 28px; color: #fff; text-shadow: var(--olt); }
.trTier { border: 3px solid #fff; box-shadow: 0 3px 0 var(--navy); font: 400 14px 'Titan One'; padding: 2px 14px; background: #2fb6ff; }
.trTier.r_epic { background: var(--purple); }
.trialBox .msub.dim { color: #cfe0ff; }
/* lucky spin: gold rim, bulbs, sun rays, chunky pointer */
.wheelWrap { width: 280px; height: 280px; margin-top: 22px; }
.wheelWrap::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.18) 0 10deg, transparent 10deg 24deg); animation: rays 18s linear infinite; -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%); }
.wheel { border-radius: 50%; border: 10px solid var(--yel); box-shadow: 0 0 0 4px #fff, 0 6px 0 4px var(--navy); background: var(--yel); filter: none; }
.wheel .wv { font: 400 18px 'Titan One'; fill: #fff; stroke: #1b2a6b; stroke-width: 4px; paint-order: stroke; }
.wPin { position: absolute; left: 50%; top: -8px; width: 0; height: 0; transform: translateX(-50%); border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #fff; filter: drop-shadow(0 2px 0 #1b2a6b) drop-shadow(0 -2px 0 #1b2a6b); }
.spinRes { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 400 22px 'Titan One'; color: #ffd23f; }
.spinRes .coin { width: 28px; height: 28px; }
.spinRes.pop { animation: nmPulse .4s ease-out; }
.spinBox .mbtns { width: 100%; }
.trCard .trImg { width: 124px; height: 124px; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.wheel { position: relative; }
.wheel svg { width: 100%; height: 100%; display: block; }
.wIc { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; }
.nsBuy { height: 44px; padding: 4px 16px !important; }
/* ===== v2.0.1 restyle: new v2 screens match the home/shop look (Yash) ===== */
:root { --olt: -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy), 2px 2px 0 var(--navy), 0 3px 0 var(--navy); }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes shine { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }
/* shared glossy bar */
.nsBar, .nmBar { height: 26px; border-radius: 13px; background: #132f8f; border: 3px solid #fff; box-shadow: 0 3px 0 var(--navy); }
.nsBar i, .nmBar i { border-radius: 10px; background: linear-gradient(#9cf06a, var(--grn) 55%, var(--grn2)); box-shadow: inset 0 3px 0 rgba(255,255,255,.45); }
.nmBar i { background: linear-gradient(#ffb08a, #ff6b4a 55%, #e0442a); }
.nearMiss.close .nmBar i, .nextSkin.ready .nsBar i { background: linear-gradient(#fff6a8, var(--yel) 55%, #ffb800); }
.nsBar b, .nmBar b { font: 400 14px/20px 'Titan One'; color: #fff; text-shadow: var(--olt); }
/* next-skin / keep card: a gift-day style tile */
.nextSkin { background: linear-gradient(#3566ea, #2a52d0); border: 3px solid #6fa0ff; border-radius: 18px; box-shadow: 0 5px 0 #132f8f; padding: 10px 12px; }
.nextSkin.ready { background: linear-gradient(#4b7cf5, #2f5bdc); border-color: #fff; box-shadow: 0 5px 0 #132f8f, 0 0 0 4px rgba(255,211,31,.55), 0 0 22px rgba(255,211,31,.6); }
.nsT { font: 400 18px 'Titan One'; color: #fff; text-shadow: var(--olt); }
.nsCard { flex-basis: 70px; height: 70px; }
.nsFace { border-radius: 14px; border: 3px solid #fff; box-shadow: 0 3px 0 var(--navy); overflow: hidden; }
.nsFace.back { background: radial-gradient(circle at 50% 35%, #c49bff, #7c4dff 70%); border-color: #fff; }
.nsFace.back span { color: #fff; font-size: 36px; text-shadow: var(--olt); }
.nsFace.front { background: radial-gradient(circle at 50% 35%, #fff6a8, var(--yel) 70%); }
.nsCard:not(.flip) .front .nsImg { filter: brightness(0) invert(1); opacity: .35; }
.nsFace.front::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; background: rgba(255,255,255,.55); animation: shine 2.4s ease-in-out infinite; }
.nsOwned { font: 400 18px 'Titan One'; color: var(--grn); text-shadow: var(--olt); }
.trialKeep .nsFace.back { background: none; border: 0; box-shadow: none; }
/* near-miss */
.nmT { font: 400 30px 'Titan One'; color: #fff; text-shadow: var(--olt); transform: rotate(-3deg); }
.nearMiss.close .nmT { color: var(--yel); }
/* revive ring: a glossy coin-style dial */
.rvRing { width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #4b7cf5, #2a52d0 70%); border: 4px solid #fff; box-shadow: 0 5px 0 var(--navy); }
.rvRing svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.rvRing .rvBg { stroke: #132f8f; stroke-width: 9; }
.rvRing .rvFg { stroke: var(--yel); stroke-width: 9; filter: drop-shadow(0 0 3px rgba(255,211,31,.8)); }
.rvRing b { font-size: 40px; text-shadow: var(--olt); }
.msub .gold { color: var(--yel); text-shadow: var(--olt); font-family: 'Titan One'; }
/* skin trial: shop-card hero with sun rays */
.trCard { position: relative; width: 170px; height: 170px; border-radius: 26px; border: 4px solid #fff; box-shadow: 0 6px 0 var(--navy); background: radial-gradient(circle at 50% 40%, #6fd0ff, #2f8cf0 70%); }
.trCard.t2 { background: radial-gradient(circle at 50% 40%, #d9a8ff, #8a4dff 70%); border-color: #fff; }
.trCard::before { content: ''; position: absolute; inset: -40%; background: repeating-conic-gradient(rgba(255,255,255,.22) 0 12deg, transparent 12deg 30deg); animation: rays 14s linear infinite; }
.trCard .trImg { position: relative; width: 140px; height: 140px; }
.trName { font-size: 28px; color: #fff; text-shadow: var(--olt); }
.trTier { border: 3px solid #fff; box-shadow: 0 3px 0 var(--navy); font: 400 14px 'Titan One'; padding: 2px 14px; background: #2fb6ff; }
.trTier.r_epic { background: var(--purple); }
.trialBox .msub.dim { color: #cfe0ff; }
/* lucky spin: gold rim, bulbs, sun rays, chunky pointer */
.wheelWrap { width: 280px; height: 280px; margin-top: 22px; }
.wheelWrap::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.18) 0 10deg, transparent 10deg 24deg); animation: rays 18s linear infinite; -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%); }
.wheel { border-radius: 50%; border: 10px solid var(--yel); box-shadow: 0 0 0 4px #fff, 0 6px 0 4px var(--navy); background: var(--yel); filter: none; }
.wheel::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 3px, transparent 4px) 0 0 / 100% 100%; pointer-events: none;
  -webkit-mask: none; background-image: repeating-conic-gradient(from 11.25deg, transparent 0 20deg, transparent 20deg 22.5deg); }
.wheel .wv { font-size: 20px; stroke-width: 5px; }
.wIc { width: 34px; height: 34px; filter: drop-shadow(0 2px 0 rgba(27,42,107,.6)); }
.wPin { top: -14px; border-left-width: 18px; border-right-width: 18px; border-top: 36px solid #ff4d6d; filter: drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 3px 0 var(--navy)); z-index: 2; }
.spinRes { font-size: 26px; color: var(--yel); text-shadow: var(--olt); }
/* settings: yellow active chips, yellow slider thumb, matching row tiles */
.set .sg b { background: #2a52d0; color: #fff; border: 2px solid #6fa0ff; font: 400 14px 'Titan One'; padding: 3px 10px; }
.set .sg b.on { background: linear-gradient(#fff6a8, var(--yel)); color: var(--navy); border-color: #fff; box-shadow: 0 3px 0 var(--yel2); }
.set input[type=range] { background: #132f8f; border: 2px solid #6fa0ff; height: 12px; }
.set input[type=range]::-webkit-slider-thumb { background: linear-gradient(#fff6a8, var(--yel)); border: 3px solid #fff; box-shadow: 0 3px 0 var(--yel2); }
.set .rg em { font: 400 13px 'Titan One'; color: #cfe0ff; }
.setts .set > .bi + span { flex: 1; min-width: 0; }
.setts .set.calmRow > .bi + span { font-size: 15px; text-overflow: clip; }
/* v2.0.2 kill cam: cinematic bars while the slow-mo replay runs */
.kcBar { position: absolute; left: 0; right: 0; height: 0; background: #0b1440; z-index: 4; pointer-events: none; transition: height .25s ease-out; }
.kcBar.t { top: 0; } .kcBar.b { bottom: 0; }
#app.kcam .kcBar { height: 8%; }
/* v2.2.5 kill replay tag: red rec dot + REPLAY in the top letterbox bar */
.kcBar .rpTag { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: none; align-items: center; gap: 7px; font: 400 15px 'Titan One', 'Baloo 2', sans-serif; letter-spacing: 3px; color: #fff; opacity: .92; }
.kcBar .rpTag i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; animation: rpBlink 1s steps(2) infinite; }
#app.replay .kcBar .rpTag { display: flex; }
#app .hud > * { transition: opacity .2s; } #app.replay .hud > * { opacity: 0 !important; visibility: hidden; pointer-events: none; }
@keyframes rpBlink { 50% { opacity: .15; } }
/* ===== v2.0.3 slim in-match HUD (Yash picked mockup B): one top band, top 3 + you, one kill row ===== */
#ui.hud #pauseBtn { width: 40px; height: 40px; min-height: 0; left: 10px; top: calc(var(--sat) + 10px); }
#ui.hud .goal { left: 60px; right: 60px; padding: 3px 10px 5px; border-width: 2px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
#ui.hud .goal .gt { font-size: 14px; }
#ui.hud .goal .gv { font-size: 12px; grid-row: 1; grid-column: 2; }
#ui.hud .goal .gbar { grid-column: 1 / 3; height: 8px; }
#ui.hud .killChip { min-width: 0; width: 44px; height: 40px; padding: 0 4px; right: 10px; justify-content: center; gap: 2px; border-width: 2px; }
#ui.hud .killChip .svgi { width: 18px; height: 18px; }
#ui.hud .killChip b { font-size: 16px; }
#ui.hud .lb { top: calc(var(--sat) + 60px); right: 10px; width: 100px; gap: 2px; opacity: .94; }
#ui.hud .lb .r { height: 20px; font-size: 11px; }
#ui.hud .lb .r b { width: 16px; height: 16px; font-size: 9px; }
#ui.hud .kfeed { left: 10px; right: auto; top: calc(var(--sat) + 60px); max-width: calc(100% - 128px); }
#ui.hud .kfeed .kf { transform: scale(.9); transform-origin: left center; }
.nm:not(.me):not(.boss) { font-size: 11px; opacity: .78; }
/* v2.1.1: no native scrollbars (desktop browsers showed a grey OS bar in the skins list); touch/wheel scrolling still works */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* v2.1.1 popup titles as slanted ribbons (same shape as the skin category headers) */
.modal .mtitle { position: relative; isolation: isolate; display: block; width: max-content; max-width: 94%; margin: -40px auto 12px; padding: 6px 30px 9px; font-size: 29px; line-height: 1.05; }
.modal .mtitle::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 12px; border: 3px solid #fff;
  background: linear-gradient(90deg, var(--tg, #2f9bff), var(--tg2, #8fe3ff)); box-shadow: 0 5px 0 rgba(20,32,90,.45); }
.modal .mtitle[data-tone=win] { --tg: #3fcf3a; --tg2: #b5f59a; }
.modal .mtitle[data-tone=lose] { --tg: #ff5d6c; --tg2: #ffb3a8; }
.modal .mtitle[data-tone=gold] { --tg: #ffb800; --tg2: #ffe98a; }
.modal { overflow: visible !important; }

/* v2.2.6 kill / death ribbon (slanted, matches the popup ribbon titles) */
.kRib { position: absolute; left: 0; right: 0; top: 36%; z-index: 6; pointer-events: none; animation: kRibIn .28s cubic-bezier(.2,1.4,.4,1) both; }
.kRib.out { animation: kRibOut .25s ease-in both; }
.kRib .kb { margin: 0 -12px; transform: rotate(-6deg); border-top: 4px solid #fff; border-bottom: 4px solid #fff; text-align: center; padding: 9px 0 5px; box-shadow: 0 8px 0 rgba(11,20,64,.25); background: linear-gradient(90deg, #3d8bff, #7a5cff); }
.kRib .kb b { font: 400 38px 'Titan One', 'Baloo 2', sans-serif; color: #fff; letter-spacing: 1px; text-shadow: 0 4px 0 #1b2a6b; }
.kRib.dead .kb { background: linear-gradient(90deg, #ff3b5c, #ff7a45); } .kRib.dead .kb b { text-shadow: 0 4px 0 #9a1030; }
.kRib .ks { text-align: center; margin-top: 10px; }
.kRib .ks span { display: inline-flex; align-items: center; gap: 8px; max-width: 86%; background: #fff; border: 3px solid #1b2a6b; border-radius: 30px; padding: 3px 14px; font: 700 17px 'Baloo 2', sans-serif; color: #1b2a6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kRib .ks i { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid #1b2a6b; }
@keyframes kRibIn { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
@keyframes kRibOut { to { opacity: 0; transform: scale(.85); } }