/* ==========================================================================
   Gamarium · Arcade Bright (direction B, app_design/v5/b): tokens, base, components, app shell
   Warm lilac/cream surfaces, ink-outlined sticker cards, Lilita One display type with outlines,
   chunky glossy game buttons, colourful tags. Brand violet + gold.
   ========================================================================== */

:root {
  --ink: #2A1652; --ink-2: #5C4A86; --ink-3: #8E80AE; --ink-4: #BDB3D3;
  --cream: #FFF7EC; --paper: #FFFFFF; --lilac: #F1EBFF; --lilac-2: #E6DBFF; --sand: #FFF1DE;
  --violet: #7B4DFF; --violet-d: #5A2EE0; --violet-l: #B9A2FF;
  --gold: #FFC531; --gold-d: #F59A0C; --orange: #FF8A1F; --pink: #FF5FA2; --red: #FF4D5E;
  --green: #2ED47A; --green-d: #16A85A; --sky: #38B6FF; --sky-d: #1C86E0; --ton: #0098EA;
  --f-d: 'Lilita One', 'Nunito', system-ui, sans-serif;
  --f-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bw: 2.5px;
  --g-gold: linear-gradient(180deg, #FFD84F, #FFB20C);
  --g-green: linear-gradient(180deg, #53E895, #1FBF67);
  --g-violet: linear-gradient(180deg, #9C78FF, #6A3CF5);
  --g-pink: linear-gradient(180deg, #FF86BC, #F2478E);
  --g-sky: linear-gradient(180deg, #6CC8FF, #2D8DEB);
  --g-orange: linear-gradient(180deg, #FFA65A, #FF6A1F);
  --g-red: linear-gradient(180deg, #FF7A86, #EE3349);

  /* Telegram insets (js/tg.js) */
  --sa-top: 0px; --sa-bottom: 0px; --ca-top: 0px; --ca-bottom: 0px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--sa-top));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--sa-bottom));
  --gutter: 16px; --tabbar-h: 66px; --tab-bottom: max(8px, calc(var(--safe-bottom) - 16px));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #FFF3E4; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { font: 700 14px/1.35 var(--f-ui); color: var(--ink); -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
html.sheet-open body, html.battle-open body { overflow: hidden; }
img { display: block; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: inherit; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
b, strong { font-weight: 900; }
input { font: inherit; color: inherit; }
.tnum, .num { font-variant-numeric: tabular-nums; }
.ic { display: inline-block; flex: none; }
[hidden] { display: none !important; }

/* ---------- type ------------------------------------------------------------ */
.d { font-family: var(--f-d); font-weight: 400; letter-spacing: .01em; }
.o3 { -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.o4 { -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.o5 { -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.sh3 { text-shadow: 0 3px 0 var(--ink); }
.cap { font: 900 10.5px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sub { font: 800 13px/1.4 var(--f-ui); color: var(--ink-2); }
.fine { font: 800 11.5px/1.45 var(--f-ui); color: var(--ink-3); text-align: center; margin-top: 12px; }
.fine svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.gold { color: var(--gold-d); }
.pos { color: var(--green-d); }
/* white glyph with an ink outline (icons on coloured buttons) */
.ink-out { filter: drop-shadow(1.2px 1.2px 0 var(--ink)) drop-shadow(-1.2px -1.2px 0 var(--ink)) drop-shadow(1.2px -1.2px 0 var(--ink)) drop-shadow(-1.2px 1.2px 0 var(--ink)); }

/* ---------- sticker surfaces -------------------------------------------------- */
.stk { position: relative; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink); }
.stk--lilac { background: var(--lilac); }
.stk--cream { background: var(--cream); }
.stk--flat { box-shadow: none; }
.rows > * + * { border-top: 2px dashed #E6DDF5; }

/* ---------- chunky game buttons ---------------------------------------------- */
.cb {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 16px;
  border-radius: 14px; border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); overflow: hidden; white-space: nowrap; flex: none;
  font: 400 17px/1 var(--f-d); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill;
  background: var(--g-violet); transition: transform .08s, box-shadow .08s, filter .2s;
}
.cb::before { content: ""; position: absolute; left: 5px; right: 5px; top: 3px; height: 38%; border-radius: 10px; background: rgba(255, 255, 255, .42); pointer-events: none; }
.cb > * { position: relative; }
.cb svg { position: relative; width: 17px; height: 17px; color: #fff; -webkit-text-stroke: 0; stroke-width: 2.6;
  filter: drop-shadow(1.2px 1.2px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)) drop-shadow(1px -1px 0 var(--ink)) drop-shadow(-1px 1px 0 var(--ink)); }
.cb:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.cb--gold { background: var(--g-gold); }
.cb--green { background: var(--g-green); }
.cb--violet { background: var(--g-violet); }
.cb--pink { background: var(--g-pink); }
.cb--sky { background: var(--g-sky); }
.cb--orange { background: var(--g-orange); }
.cb--red { background: var(--g-red); }
.cb--white { background: #fff; color: var(--ink); -webkit-text-stroke: 0; }
.cb--white::before { display: none; }
.cb--white svg { color: var(--violet); filter: none; }
.cb--lilac { background: var(--lilac); color: var(--ink); -webkit-text-stroke: 0; }
.cb--lilac::before { display: none; }
.cb--lilac svg { color: var(--violet); filter: none; }
.cb--sm { height: 34px; padding: 0 12px; border-radius: 11px; font-size: 14.5px; -webkit-text-stroke-width: 3px; box-shadow: 0 3px 0 var(--ink); }
.cb--sm svg { width: 14px; height: 14px; }
.cb--sm::before { top: 2px; left: 4px; right: 4px; border-radius: 8px; }
.cb--lg { height: 54px; border-radius: 17px; font-size: 21px; padding: 0 22px; -webkit-text-stroke-width: 4px; box-shadow: 0 5px 0 var(--ink); }
.cb--lg svg { width: 20px; height: 20px; }
.cb--block { display: flex; width: 100%; }
.cb[disabled]:not(.is-busy) { background: #E9E2F4; color: var(--ink-3); -webkit-text-stroke: 0; cursor: default; box-shadow: 0 3px 0 #BDB3D3; border-color: #BDB3D3; }
.cb[disabled]:not(.is-busy)::before { display: none; }
.cb[disabled]:not(.is-busy) svg { color: var(--ink-3); filter: none; }
.cb--done[disabled]:not(.is-busy) { background: #DFFBEA; color: var(--green-d); border-color: var(--green-d); box-shadow: 0 3px 0 var(--green-d); }
.cb--done[disabled] svg { color: var(--green-d) !important; }
.cb.is-busy { color: transparent; -webkit-text-stroke-color: transparent; pointer-events: none; }
.cb.is-busy > * { visibility: hidden; }
.cb.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; }
.cb--white.is-busy::after, .cb--lilac.is-busy::after { border-color: rgba(42, 22, 82, .2); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* round play / icon buttons */
.rbtn { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); background: radial-gradient(circle at 50% 30%, #FFE27A, #FFC531 50%, #F59A0C); }
.rbtn::before { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 15px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.rbtn svg { position: relative; width: 22px; height: 22px; color: #fff; filter: drop-shadow(1.5px 1.5px 0 var(--ink)) drop-shadow(-1.2px -1.2px 0 var(--ink)) drop-shadow(1.2px -1.2px 0 var(--ink)) drop-shadow(-1.2px 1.2px 0 var(--ink)); }
.rbtn .ic-play { margin-left: 3px; }
.rbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ibtn { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #fff;
  border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--violet); }
.ibtn svg { width: 20px; height: 20px; stroke-width: 2.4; }
.ibtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.ibtn em, .badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red);
  border: 2px solid var(--ink); font: 400 12px/16px var(--f-d); font-style: normal; color: #fff; text-align: center; z-index: 2; }

/* ---------- pills, tags ------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; border: 2px solid var(--ink); background: #fff;
  font: 900 11px/1 var(--f-ui); color: var(--ink); white-space: nowrap; flex: none; }
.pill svg { width: 12px; height: 12px; stroke-width: 2.6; }
.pill .g { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px rgba(46, 212, 122, .3); }
.pill--red { background: var(--red); color: #fff; }
.pill--gold { background: var(--gold); }
.pill--violet { background: var(--violet); color: #fff; }
.pill--green { background: #DFFBEA; border-color: var(--green-d); color: #0E7A40; }
.pill--lilac { background: var(--lilac); }
.pill--ink { background: var(--ink); color: #fff; }
.pill--pink { background: var(--pink); color: #fff; }
.pill--sky { background: var(--sky); color: #fff; text-shadow: 0 1px 0 rgba(42, 22, 82, .45); }
.t { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 7px; border-radius: 7px; border: 2px solid var(--ink);
  font: 900 10.5px/1 var(--f-ui); color: #fff; text-shadow: 0 1px 0 rgba(42, 22, 82, .45); white-space: nowrap; }
.t svg { width: 11px; height: 11px; }
.t--gold { background: var(--gold); color: var(--ink); text-shadow: none; }
.t--green { background: var(--green); }
.t--violet { background: var(--violet); }
.t--pink { background: var(--pink); }
.t--sky { background: var(--sky); }
.t--orange { background: var(--orange); }
.t--white { background: #fff; color: var(--ink); text-shadow: none; }
.t--grey { background: #EDE7F6; color: var(--ink-2); text-shadow: none; border-color: #CFC5E2; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.live { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; background: #DFFBEA; border: 2px solid var(--green-d);
  font: 900 11.5px/1 var(--f-ui); color: #0E7A40; white-space: nowrap; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2.5px rgba(46, 212, 122, .3); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px rgba(46, 212, 122, .3); }
.dot--gold { background: var(--gold); box-shadow: 0 0 0 2px rgba(255, 197, 49, .35); }

/* the GP coin (a gold star coin) and the $GMRM coin */
.gpc { position: relative; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink);
  background: radial-gradient(circle at 40% 30%, #FFF1B0, #FFC531 55%, #F08C0C); vertical-align: middle; }
.gpc svg { width: 11px; height: 11px; color: #fff; filter: drop-shadow(0 1px 0 #B35A00); }
.gpc--sm { width: 17px; height: 17px; border-width: 1.5px; }
.gpc--sm svg { width: 9px; height: 9px; }
.gpc--lg { width: 30px; height: 30px; border-width: 2.5px; }
.gpc--lg svg { width: 15px; height: 15px; }
.gmc { flex: none; width: 22px; height: 22px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 2px 0 rgba(42, 22, 82, .25)); }
.fly-coin { position: fixed; z-index: 500; pointer-events: none; }

/* ---------- progress bars ----------------------------------------------------- */
.bar { position: relative; height: 14px; border-radius: 8px; background: #fff; border: 2px solid var(--ink); overflow: hidden; }
.bar > i { position: absolute; left: 2px; top: 2px; bottom: 2px; max-width: calc(100% - 4px); border-radius: 5px; background: linear-gradient(180deg, #A07CFF, #6A3CF5);
  transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.bar > i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .28) 0 5px, rgba(255, 255, 255, 0) 5px 10px); }
.bar--gold > i { background: linear-gradient(180deg, #FFE27A, #F5A00C); }
.bar--green > i { background: linear-gradient(180deg, #6BEEA5, #1FBF67); }
.bar--pink > i { background: linear-gradient(180deg, #FF9DCA, #F2478E); }
.bar--sky > i { background: linear-gradient(180deg, #8AD6FF, #2D8DEB); }
.bar--lg { height: 20px; border-radius: 11px; }
.bar--lg > i { border-radius: 8px; }
.bar.is-full > i { background: linear-gradient(180deg, #FFE27A, #F5A00C); }

/* ---------- avatars ------------------------------------------------------------ */
.av { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; border: var(--bw) solid var(--ink);
  font: 400 20px/1 var(--f-d); color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; overflow: hidden; background: var(--g-violet); }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-1 { background: linear-gradient(180deg, #A98BFF, #6A3CF5); }
.av-2 { background: linear-gradient(180deg, #FFA65A, #FF6A1F); }
.av-3 { background: linear-gradient(180deg, #53E895, #1FBF67); }
.av-4 { background: linear-gradient(180deg, #6CC8FF, #2D8DEB); }
.av-5 { background: linear-gradient(180deg, #FF86BC, #F2478E); }
.av-6 { background: linear-gradient(180deg, #FFD84F, #FFB20C); }
.av-7 { background: linear-gradient(180deg, #8E80AE, #5C4A86); }
.av--sm { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; border-width: 2px; -webkit-text-stroke-width: 3px; }
.av--lg { width: 56px; height: 56px; border-radius: 17px; font-size: 27px; -webkit-text-stroke-width: 4.5px; box-shadow: 0 3px 0 var(--ink); }
.av--xl { width: 72px; height: 72px; border-radius: 22px; font-size: 34px; -webkit-text-stroke-width: 5px; box-shadow: 0 4px 0 var(--ink); }

/* the Ambassador title badge (SPEC 16) next to a name */
.amb { position: relative; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 6px; vertical-align: -3px; margin-left: 4px;
  background: linear-gradient(180deg, #FFD84F, #F59A0C); border: 2px solid var(--ink); box-shadow: 0 1.5px 0 var(--ink); }
.amb svg { width: 11px; height: 11px; color: #fff; filter: drop-shadow(0 .8px 0 var(--ink)); }
.amb--lg { width: 24px; height: 24px; border-radius: 8px; }
.amb--lg svg { width: 14px; height: 14px; }
.amb-tag { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 7px 0 3px; border-radius: 8px; border: 2px solid var(--ink);
  background: linear-gradient(180deg, #FFE27A, #FFB20C); font: 400 11.5px/1 var(--f-d); color: var(--ink); letter-spacing: .03em; }
.amb-tag .amb { margin: 0; width: 15px; height: 15px; border-radius: 5px; border-width: 1.5px; box-shadow: none; background: var(--violet); }
.amb-tag .amb svg { width: 9px; height: 9px; }

/* ---------- section heads ------------------------------------------------------ */
.sec { margin-top: 26px; }
.sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sh h2 { display: flex; align-items: center; gap: 8px; font: 400 23px/1 var(--f-d); letter-spacing: .01em; color: var(--ink); min-width: 0; }
.sh h2 .hi { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; border: var(--bw) solid var(--ink); box-shadow: 0 2.5px 0 var(--ink); color: #fff; background: var(--violet); }
.sh h2 .hi svg { width: 16px; height: 16px; stroke-width: 2.6; }
.sh .more { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 6px 0 11px; border-radius: 14px; background: #fff; border: 2px solid var(--ink);
  font: 900 12px/1 var(--f-ui); color: var(--ink); white-space: nowrap; flex: none; }
.sh .more svg { width: 15px; height: 15px; stroke-width: 3; }
.sh .aside { font: 900 12px/1.2 var(--f-ui); color: var(--ink-2); text-align: right; flex: none; }
.hi--pink { background: var(--pink) !important; } .hi--orange { background: var(--orange) !important; } .hi--green { background: var(--green) !important; }
.hi--sky { background: var(--sky) !important; } .hi--gold { background: var(--gold) !important; color: var(--ink) !important; } .hi--violet { background: var(--violet) !important; }

/* ---------- app shell ----------------------------------------------------------- */
.app { position: relative; max-width: 480px; min-height: 100vh; margin: 0 auto; isolation: isolate; overflow-x: clip;
  padding: calc(var(--safe-top) + var(--ca-top) + 8px) var(--gutter) calc(var(--tabbar-h) + var(--tab-bottom) + 40px); }
html:not(.has-band) .app { padding-top: calc(var(--safe-top) + 14px); }
.sky { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle, rgba(123, 77, 255, .09) 1.6px, transparent 2.2px) 0 0 / 20px 20px,
    linear-gradient(180deg, #C9B3FF 0%, #E9CCFF 170px, #FFE3D0 440px, #FFF3E4 780px, #FFF6EA 100%); }
/* the band beside Telegram's own Close / menu controls (fullscreen): the brand lockup in the middle */
.topband { position: absolute; left: 0; right: 0; top: var(--safe-top); height: var(--ca-top); display: none; align-items: center; justify-content: center; pointer-events: none; }
html.has-band .topband { display: flex; }
.topband img { height: 22px; width: auto; }
.view { display: none; }
.view.is-active { display: block; animation: view-in .24s ease-out both; }
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }

/* page heads */
.ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 16px; }
.ph h1 { font: 400 32px/1 var(--f-d); letter-spacing: .01em; color: var(--ink); }
.ph p { margin-top: 6px; font: 800 13px/1.35 var(--f-ui); color: var(--ink-2); max-width: 250px; }
.subhead { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.subhead h1 { flex: 1; min-width: 0; font: 400 28px/1 var(--f-d); letter-spacing: .01em; }
.backbtn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.backbtn svg { width: 20px; height: 20px; stroke-width: 2.8; }
.backbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.lead { margin: -4px 2px 16px; font: 800 13px/1.4 var(--f-ui); color: var(--ink-2); }

/* the GP balance pill */
.cur { display: inline-flex; align-items: center; height: 36px; padding: 0 4px 0 2px; border-radius: 18px; background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); flex: none; }
.cur .gpc { width: 31px; height: 31px; margin-left: -7px; border-width: 2.5px; }
.cur .gpc svg { width: 15px; height: 15px; }
.cur b { padding: 0 8px 0 7px; font: 400 17px/1 var(--f-d); letter-spacing: .02em; font-weight: 400; }
.cur .add { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--green); border: 2px solid var(--ink); color: #fff; }
.cur .add svg { width: 14px; height: 14px; stroke-width: 3.5; }
.cur:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ---------- tab bar: a floating sticker pill, tight to the bottom safe area, the Vault coin in a raised hump ----- */
.tab-fade { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; height: calc(var(--tabbar-h) + var(--tab-bottom) + 26px); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 246, 234, 0), rgba(255, 246, 234, .9) 50%, #FFF6EA); }
.tabbar { position: fixed; z-index: 60; left: 50%; bottom: var(--tab-bottom); width: min(calc(100% - 20px), 460px); height: var(--tabbar-h); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; padding: 0 4px;
  background: #fff; border: var(--bw) solid var(--ink); border-radius: 24px;
  box-shadow: 0 5px 0 var(--ink), 0 16px 26px -12px rgba(42, 22, 82, .5); }
/* the hump: the bar's own outline rises around the Vault coin (a circle drawn above the bar, its lower half masked) */
.tab-hump { position: absolute; z-index: 0; left: 50%; top: -29px; width: 82px; height: 82px; margin-left: -41px; border-radius: 50%; background: #fff; border: var(--bw) solid var(--ink); pointer-events: none; }
.tab-hump::after { content: ""; position: absolute; left: -4px; right: -4px; top: 26.5px; bottom: -4px; background: #fff; }
/* the sliding active sticker */
.tab-pill { position: absolute; z-index: 1; left: 0; top: 7px; width: 48px; height: 36px; border-radius: 13px; background: var(--g-gold); border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  transform: translateX(var(--px, 0px)) scale(var(--ps, 1)); transition: transform .42s cubic-bezier(.3, 1.45, .45, 1), opacity .2s; pointer-events: none; }
.tab-pill::before { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 36%; border-radius: 9px; background: rgba(255, 255, 255, .5); }
.tabbar.no-anim .tab-pill { transition: none; }
.tab { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 7px; font: 900 10.5px/1 var(--f-ui); color: var(--ink-3);
  -webkit-tap-highlight-color: transparent; }
.tab .ti { display: grid; place-items: center; width: 48px; height: 36px; color: var(--ink-3); }
.tab .ti svg { width: 25px; height: 25px; stroke-width: 2.2; --icf: rgba(142, 128, 174, .14); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tab .tl { transition: color .2s; }
.tab.is-active { color: var(--ink); }
.tab.is-active .ti { color: var(--ink); }
.tab.is-active .ti svg { --icf: #fff; transform: translateY(-1px) scale(1.06); }
.tab.is-bump .ti svg { animation: tab-bump .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tab-bump { 0% { transform: scale(.7) rotate(-8deg); } 55% { transform: scale(1.2) rotate(4deg); } 100% { transform: translateY(-1px) scale(1.06); } }
.tab--center { color: var(--ink); justify-content: flex-end; padding: 0 0 5px; }
.tab--center .vb { position: absolute; left: 50%; top: -20px; width: 64px; height: 64px; margin-left: -32px; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); background: radial-gradient(circle at 50% 30%, #B9A2FF, #7B4DFF 50%, #4B1FC9);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tab--center .vb::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--corona-w); opacity: .8; animation: cr-breathe 4.5s ease-in-out infinite; }
.tab--center .vb::after { content: ""; position: absolute; left: 9px; right: 9px; top: 5px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.tab--center .vb img { position: relative; z-index: 1; width: 42px; height: 42px; filter: drop-shadow(0 2px 0 rgba(20, 6, 60, .4)); }
.tab--center.is-active .vb { background: radial-gradient(circle at 50% 30%, #FFE7A0, #FFC531 50%, #F08C0C); }
.tab--center:active .vb { transform: translateY(3px) scale(.94); box-shadow: 0 1px 0 var(--ink); transition-duration: .08s; }
.tab--center.is-bump .vb { animation: vb-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes vb-bump { 0% { transform: scale(.82); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* rewards ready: the Vault coin breathes with a soft gold ring */
.tab--center .vb-ring { position: absolute; left: 50%; top: -20px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; pointer-events: none; }
html.vault-ready .tab--center .vb-ring { animation: vb-ring 2s ease-out infinite; }
html.vault-ready .tab--center:not(.is-active) .vb { animation: vb-breathe 2s ease-in-out infinite; }
@keyframes vb-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes vb-breathe { 50% { transform: scale(1.06); } }
.tab-badge { position: absolute; top: -6px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red);
  border: 2px solid var(--ink); font: 400 12px/16px var(--f-d); font-style: normal; color: #fff; text-align: center; }
@media (max-width: 370px) {
  .tabbar { width: calc(100% - 14px); }
  .tab .ti { width: 44px; }
  .tab-pill { width: 44px; }
}

/* ---------- sheets ---------------------------------------------------------------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 200; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(42, 22, 82, .5); opacity: 0; transition: opacity .3s; }
.sheet { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 480px; max-height: calc(100% - var(--safe-top) - 20px); display: flex; flex-direction: column;
  transform: translate(-50%, 104%); transition: transform .38s cubic-bezier(.2, .85, .25, 1);
  border-radius: 28px 28px 0 0; border: var(--bw) solid var(--ink); border-bottom: 0;
  background: radial-gradient(circle, rgba(123, 77, 255, .07) 1.4px, transparent 2px) 0 0 / 18px 18px, linear-gradient(180deg, #F3ECFF 0%, #FFF7EC 46%); }
.sheet-wrap.is-open .sheet { transform: translate(-50%, 0); }
.sheet-wrap.is-open .sheet-backdrop { opacity: 1; }
.sheet-grab { flex: none; height: 24px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.sheet-grab i { width: 44px; height: 6px; border-radius: 3px; background: var(--ink-4); }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; z-index: 5;
  background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.sheet-x svg { width: 17px; height: 17px; stroke-width: 3; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(var(--safe-bottom) + 20px); -webkit-overflow-scrolling: touch; }
.st-title { font: 400 26px/1.05 var(--f-d); letter-spacing: .01em; color: var(--ink); margin: 4px 52px 6px 2px; }
.st-lead { margin: 0 2px 14px; font: 800 13px/1.4 var(--f-ui); color: var(--ink-2); }

/* ---------- toast, pulse, skeleton, errors ---------------------------------------- */
#toast-root { position: fixed; left: 0; right: 0; top: calc(var(--safe-top) + var(--ca-top) + 8px); z-index: 600; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.toast { display: inline-flex; align-items: center; gap: 9px; max-width: 420px; padding: 10px 15px 10px 11px; border-radius: 16px; background: #fff;
  border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); font: 900 13.5px/1.3 var(--f-ui); color: var(--ink);
  transform: translateY(-14px) scale(.96); opacity: 0; transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), opacity .2s; }
.toast.in { transform: none; opacity: 1; }
.toast > svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; border: 2px solid var(--ink); color: #fff; stroke-width: 3.4; background: var(--violet); }
.toast.good > svg { background: var(--green); }
.toast.bad > svg { background: var(--red); }
.pulse { animation: pulse .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes pulse { 40% { transform: scale(1.1); } }
.skel { border-radius: 22px; border: var(--bw) solid #E4D9F7; background: linear-gradient(100deg, #F6F0FF 30%, #FFFFFF 50%, #F6F0FF 70%); background-size: 300% 100%; animation: skel 1.3s linear infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.err-box { margin-top: 40px; padding: 24px 18px; text-align: center; }
.err-box b { display: block; font: 400 22px/1.1 var(--f-d); }
.err-box p { margin: 6px 0 16px; font: 800 13px/1.4 var(--f-ui); color: var(--ink-2); }
.mini-spin { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid rgba(42, 22, 82, .2); border-top-color: var(--ink); animation: spin .7s linear infinite; }
.empty { padding: 22px 18px; text-align: center; }
.empty b { display: block; font: 400 20px/1.1 var(--f-d); }
.empty p { margin-top: 6px; font: 800 13px/1.45 var(--f-ui); color: var(--ink-2); }

/* small stat grid (3 cells) used in several cards */
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats3 > * { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px 10px 9px; border-radius: 14px; background: var(--lilac); border: 2px solid var(--ink); }
.stats3 b { font: 400 18px/1 var(--f-d); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats3 em { font: 800 11px/1.15 var(--f-ui); font-style: normal; color: var(--ink-2); }

/* info rows (icon tile + text) */
.irow { display: flex; align-items: center; gap: 12px; padding: 12px 12px; }
.itile { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; border: var(--bw) solid var(--ink); color: #fff; background: var(--violet); overflow: hidden; }
.itile svg { width: 21px; height: 21px; stroke-width: 2.4; }
.itile img { width: 100%; height: 100%; object-fit: cover; }
.itile--gold { background: var(--gold); color: var(--ink); } .itile--green { background: var(--green); } .itile--sky { background: var(--sky); }
.itile--pink { background: var(--pink); } .itile--orange { background: var(--orange); } .itile--ink { background: var(--ink); } .itile--ton { background: var(--ton); }
.itile--white { background: #fff; color: var(--violet); }
.irow-main { flex: 1; min-width: 0; }
.irow-main b { display: block; font: 400 17px/1.1 var(--f-d); letter-spacing: .01em; }
.irow-main span { display: block; margin-top: 3px; font: 800 12px/1.35 var(--f-ui); color: var(--ink-2); }
.irow-main em { font-style: normal; color: var(--violet-d); font-weight: 900; }
.irow > svg.ic-chevron-right { flex: none; width: 20px; height: 20px; color: var(--ink-3); stroke-width: 3; }

@media (max-width: 370px) {
  :root { --gutter: 12px; }
  .ph h1 { font-size: 29px; }
  .sh h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.cb--ink { background: linear-gradient(180deg, #3D2A6E, #1A0E38); }
.cb--sky.cb--done, .cb--done { }
.live--off { background: #F1EBFF; border-color: var(--ink-4); color: var(--ink-2); }
.live--off i { background: var(--ink-4); box-shadow: none; animation: none; }
.gmc--lg { width: 30px; height: 30px; }
.cb--white, .cb--lilac { -webkit-text-stroke-width: 0 !important; }
.cb.is-checking[disabled] { background: var(--g-sky); color: #fff; -webkit-text-stroke: 3px var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.cb.is-checking .mini-spin { border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
.cur--sm { height: 32px; padding: 0 12px 0 2px; }
.cur--sm .gpc { width: 27px; height: 27px; margin-left: -6px; }
.cur--sm b { font-size: 15px; padding-right: 0; }

/* ---------- v6 one currency: the $GMRM coin everywhere ------------------------------------- */
.gmc--sm { width: 17px; height: 17px; }
.gmc--lg { width: 32px; height: 32px; }
.cur .gmc { width: 33px; height: 33px; margin-left: -8px; filter: drop-shadow(0 2px 0 rgba(42, 22, 82, .35)); }
.cur--sm .gmc { width: 28px; height: 28px; margin-left: -6px; }
.day-ic .gmc { width: 24px; height: 24px; }
.rw--empty { display: inline-flex; height: 20px; padding: 0 7px; border-radius: 7px; background: #EDE7F6; border: 1.5px dashed var(--ink-3); font: 900 10.5px/17px var(--f-ui) !important; color: var(--ink-2) !important; }
.lrow-v small { font: 900 10px/1 var(--f-ui); color: var(--ink-3); }
.fly-coin.gmc { width: 30px; height: 30px; }