/* Shop screen (app.js renderShop): a section of its own in the cartoon skin of cartoon.css.
   Blue cards like the rest of the game; the warm dawn tones of tokens.css mark what sells:
   the starter pack, the "Popular" badge and the pass value. Built to show the whole
   catalogue on a 390 px phone with as little scrolling as possible. */
.store-screen { gap:12px; grid-template-columns:minmax(0,1fr); }  /* a wide child never widens the screen (horizontal scroll) */
.store-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; min-height:44px; }
.store-head h1 { margin:0; color:#fff; font:normal 26px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:-.02em; text-shadow:0 3px 0 #125390,0 5px 8px #0b3367aa; }

/* Way to pay (Mini App): one choice for the whole page instead of three buttons per item. */
.store-rails { display:flex; flex:0 0 auto; gap:2px; padding:3px; border:2px solid var(--line,#8de2ff); border-radius:999px; background:#0a3979; box-shadow:inset 0 2px 4px #00183f88; }
.store-rails button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:44px; min-height:36px; padding:0 10px; border:0; border-radius:999px;
  color:#cfeeff; background:transparent; font:13px/1 DraklyBold,'Trebuchet MS',sans-serif; cursor:pointer; transition:background var(--dur-1,120ms) var(--ease-out,ease-out); }
.store-rails button.is-on { color:#fff; background:linear-gradient(#85e6f6,#238ecb 60%,#0e5da9); box-shadow:inset 0 2px #fff9,0 2px 0 #073b7f; text-shadow:0 1px #0d4e98; }
.store-rails .star-mark { width:16px; height:16px; vertical-align:0; }
.store-rails .rail-coin { width:18px; height:18px; object-fit:contain; }
/* Checkout sheet (Mini App): the ways to pay as big radio rows with their price, the TON wallet, Pay. */
.checkout-sheet .sheet__body { display:grid; gap:10px; }
.checkout-note { margin:0 0 4px; padding:10px 12px; border-radius:12px; background:rgba(255,196,92,.12); border:1px solid rgba(255,196,92,.35); color:#ffe2a8; font:13px/1.35 'Trebuchet MS',sans-serif; }
.checkout-stake { display:flex; align-items:center; gap:8px; margin:0; padding:8px 12px; border-radius:12px; background:rgba(255,211,107,.1); border:1px solid rgba(255,211,107,.3); color:#ffe9b0; font:12px/1.3 'Trebuchet MS',sans-serif; }
.checkout-stake img { flex:0 0 24px; width:24px; height:24px; object-fit:contain; }
.checkout-lead { margin:0; color:#cfeeff; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.checkout-rails { display:grid; gap:8px; }
.checkout-rail { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:60px; padding:8px 12px 8px 10px; border:2px solid #4fa6dd; border-radius:16px;
  color:#fff; background:linear-gradient(160deg,#1a5aa0,#0c3770); box-shadow:inset 0 2px #ffffff26,0 3px 0 #082f5e; text-align:left; cursor:pointer; }
.checkout-rail.is-on { border-color:#9ff0ff; background:linear-gradient(160deg,#2a86cf,#11519a); box-shadow:inset 0 2px #ffffff55,0 3px 0 #073b7f,0 0 0 3px #8be9ff40; }
.checkout-rail__art { display:grid; place-items:center; width:40px; height:40px; }
.checkout-rail__art .rail-coin,.checkout-rail__art .star-mark { width:36px; height:36px; object-fit:contain; vertical-align:0; }
.checkout-rail__art .icon { width:26px; height:26px; }
.checkout-rail__name { display:grid; gap:2px; min-width:0; }
.checkout-rail__name b { font:normal 16px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; }
.checkout-rail__name small { color:#cfeeff; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.checkout-rail__price { display:inline-flex; align-items:center; gap:4px; font:normal 18px/1 DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; text-shadow:0 2px 0 #0a3d78; }
.checkout-rail__price .star-mark,.checkout-pay .star-mark { width:18px; height:18px; vertical-align:-3px; }
.checkout-rail:focus-visible { outline:3px solid #f9ffff; outline-offset:2px; }
.checkout-sheet .store-wallet { margin:0; }
.checkout-pay { min-height:52px; font-size:18px; }

.store { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:14px; }
.store-sec { display:grid; gap:8px; }
.store-sec__title { margin:0; color:#fff; font:normal 17px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #125390; }

/* Price buttons: the cartoon primary button, the price as its label. */
.store .btn.store-buy { display:inline-flex; align-items:center; justify-content:center; gap:5px; width:100%; min-height:42px; padding:0 8px;
  font-size:17px; line-height:1; font-variant-numeric:var(--num,lining-nums tabular-nums); white-space:nowrap; }
.store .btn.store-buy .star-mark { flex:0 0 auto; width:18px; height:18px; vertical-align:0; filter:drop-shadow(0 1px 0 #0755a0); }
.store .btn.store-buy[aria-busy="true"] { opacity:.6; cursor:progress; }

/* Starter pack: the one warm card. */
.store-hero { position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px 10px; padding:12px 12px 14px;
  border:3px solid var(--c-dawn-3,#ffd27a); border-radius:22px; color:#fff;
  background:radial-gradient(90% 80% at 0% 0%,#fff3 0,transparent 60%),linear-gradient(155deg,var(--c-dawn-3,#ffd27a) -10%,var(--c-dawn-2,#ff8a6b) 45%,#d9487c 100%);
  box-shadow:inset 0 2px #fff8,0 5px 0 #a3325f,0 10px 18px #3a0f4a66; }
.store-hero__art { width:72px; height:72px; align-self:center; object-fit:contain; filter:drop-shadow(0 6px 6px #7a1f4a88); }
.store-hero__body { display:grid; gap:6px; min-width:0; }
.store-hero__top { display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; }
.store-flag { padding:3px 9px; border-radius:999px; color:#c2405f; background:#fff; font:11px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.store-timer { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; background:#5a12345c; font:13px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.store-timer b { font-weight:normal; font-variant-numeric:var(--num,lining-nums tabular-nums); }
.store-timer .icon { width:14px; height:14px; }
.store-hero h2 { margin:0; color:#fff; font:normal 23px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:-.02em; text-shadow:0 2px 0 #a3325f,0 4px 6px #6d1d4488; }
.store-chips { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:0; padding:0; list-style:none; }
.store-chips li { display:flex; align-items:center; gap:4px; min-width:0; min-height:28px; padding:3px 5px; border:1px solid #fff7; border-radius:10px; background:#ffffff2e;
  font:11.5px/1.1 DraklyBold,'Trebuchet MS',sans-serif; text-shadow:0 1px 0 #a3325f; }
.store-chips li > span:last-child { min-width:0; overflow-wrap:anywhere; line-height:1.15; }
.store-chips .ui-icon { flex:0 0 18px; width:18px; height:18px; }
.store-chips .store-chip__ico { flex:0 0 16px; width:16px; height:16px; margin:0 1px; color:#fff; }
.store-hero .store-hero__buy { grid-column:1 / -1; min-height:48px; font-size:20px; }

/* Value anchors: what a pack is worth at the shop's own single prices (economy.anchor_usd). */
.store-hero__value { justify-self:start; padding:2px 8px; border-radius:999px; background:#5a12345c; color:#fff3c4; text-shadow:0 1px 0 #7a1f4a; }
.store .store-row .store-value { display:block; margin-top:2px; }
.store-left { display:block; margin-top:2px; color:#ffe2b8; font:11px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }

/* A slow light sweep over the hero offers: the starter pack and the month card. */
.store-hero,.store-gacha.is-featured { isolation:isolate; }
.store-hero::after,.store-gacha.is-featured::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,#ffffff3d 47%,transparent 59%) no-repeat; background-size:260% 100%;
  animation:store-shine 5.5s ease-in-out 1.2s infinite; }
@keyframes store-shine { 0%,62% { background-position:160% 0; } 100% { background-position:-60% 0; } }
@media (prefers-reduced-motion:reduce) { .store-hero::after,.store-gacha.is-featured::after { animation:none; display:none; } }

/* Gacha rows: badges like the packs ("−10%", "Хит", "Выгоднее всего"). */
.store-row.store-gacha { position:relative; }
.store-gacha .store-badge { left:auto; right:12px; transform:none; }
.store-gacha.is-popular { border-color:var(--c-dawn-3,#ffd27a); }
.store-gacha.is-best { border-color:#c9f9ff; }
.store-gacha.is-best .store-badge { color:#0d5797; background:linear-gradient(#e9fdff,#9eefff); box-shadow:0 2px 0 #1469b3; }
/* The month card: the best value of the shop, a gold card of its own. */
.store-gacha.is-featured { border-color:var(--c-dawn-3,#ffd27a); background:radial-gradient(90% 90% at 0% 0%,#ffd27a33 0,transparent 60%),linear-gradient(145deg,#2b7dbf,#124f92 55%,#0a3979);
  box-shadow:inset 0 2px #fff6,0 4px 0 #7a4a12,0 0 0 2px #ffd27a33,0 10px 20px #3a2a0a55; }
.store-gacha.is-featured .store-badge { color:#5a2a10; background:linear-gradient(#fff3c4,var(--c-dawn-3,#ffd27a)); box-shadow:0 2px 0 #a86a1c; }
.store-gacha.is-featured .store-row__art { width:60px; height:60px; filter:drop-shadow(0 4px 6px #ff8a3c88); }

/* First money order: x2 credits (ops flag first_purchase_x2). */
.store-x2-note { margin-left:8px; padding:2px 8px; border-radius:999px; vertical-align:2px; color:#0c4a2c; background:linear-gradient(#d8ffe6,#7fe3a6);
  font:12px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:none; }
.store-x2 { position:absolute; top:6px; right:6px; padding:1px 6px; border-radius:8px; color:#0c4a2c; background:linear-gradient(#d8ffe6,#7fe3a6);
  box-shadow:0 2px 0 #2a8a55; font:12px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; transform:rotate(8deg); }

/* Founder packs: the only dark-gold cards of the game, before season 1 only. */
.store-founders__sub { margin:-2px 0 0; color:#ffe9b8; font:12.5px/1.35 DraklyBold,'Trebuchet MS',sans-serif; }
.store-founders__sub b { display:inline-block; margin-left:4px; padding:1px 8px; border-radius:999px; color:#3a1d05; background:linear-gradient(#fff3c4,#ffc53d); font-weight:normal; }
.store-founders__fund { display:grid; gap:4px; }
.store-founders__fund small { color:#ffe9b8; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.store-founder { position:relative; display:grid; gap:9px; padding:12px; border:3px solid #ffc53d; border-radius:22px; color:#fff; isolation:isolate;
  background:radial-gradient(80% 70% at 100% 0%,#ffc53d40 0,transparent 60%),linear-gradient(155deg,#5a2a10,#2c1240 55%,#160a2a);
  box-shadow:inset 0 2px #ffe9b866,0 5px 0 #7a4a12,0 0 0 2px #ffc53d33,0 12px 22px #1a082b88; }
.store-founder.is-xl { border-color:#fff1b8; box-shadow:inset 0 2px #fff6,0 5px 0 #a86a1c,0 0 0 3px #ffc53d55,0 0 26px #ffb02e66,0 12px 22px #1a082b88; }
.store-founder::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,#ffe9b844 47%,transparent 59%) no-repeat; background-size:260% 100%;
  animation:store-shine 4.5s ease-in-out .6s infinite; }
@media (prefers-reduced-motion:reduce) { .store-founder::after { animation:none; display:none; } }
.store-founder__top { display:flex; align-items:center; gap:10px; }
.store-founder h3 { margin:0; color:#fff3c4; font:normal 19px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #5a2a10; }
.store-founder .store-value { display:block; margin-top:3px; }
.store-founder .store-chips li { border-color:#ffd27a66; background:#ffffff1a; text-shadow:0 1px 0 #3a1d05; }
.store-chip__img { flex:0 0 18px; width:18px; height:18px; object-fit:contain; }
.store-founder__art { flex:0 0 78px; width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 6px 8px #ff9a3c66); }
.store-founder.is-xl .store-founder__art { flex-basis:88px; width:88px; height:88px; }
.store-chip__frame.avatar { flex:0 0 20px; width:20px; height:20px; padding:2px; box-shadow:0 0 6px var(--glow); }
.spark-img { width:16px; height:16px; margin-right:3px; vertical-align:-3px; object-fit:contain; filter:drop-shadow(0 0 3px #ffb02e99); }
.store-founder__legend { display:flex; align-items:center; gap:2px; }
.store-founder__legend { margin:0; color:#ffe9b8; font:12.5px/1.3 DraklyBold,'Trebuchet MS',sans-serif; }
.store-founder__legend.is-on { color:#7fe3a6; }
.store-founder .store-founder__buy { min-height:48px; font-size:19px; }
.store-founders .lp-fund-bar { height:8px; }

/* Sparks before the season 1 banner: the meter and why they matter. */
.spark-meter--pitch small { flex:1 1 100%; color:#ffe9b8; font:12px/1.3 DraklyBold,'Trebuchet MS',sans-serif; }

/* Credit packs: three in a row, more coins on the bigger ones. */
.store-packs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-top:8px; }
.store-pack { position:relative; display:grid; justify-items:center; align-content:start; gap:2px; padding:14px 6px 8px; text-align:center;
  border:3px solid #87dff9; border-radius:18px; color:#fff; background:linear-gradient(160deg,#2f8ad0,#125499 55%,#0b3c7f);
  box-shadow:inset 0 2px #e6fbff6b,0 4px 0 #094d9c,0 8px 14px #092d6266; }
.store-pack.is-popular { border-color:var(--c-dawn-3,#ffd27a); }
.store-pack.is-best { border-color:#c9f9ff; }
.store-pack.is-fit { border-color:#7fe3a6; }
.store-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); padding:3px 9px; border-radius:999px; white-space:nowrap;
  color:#fff; background:linear-gradient(var(--c-dawn-2,#ff8a6b),#e0507a); box-shadow:0 2px 0 #a3325f; font:11px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:.03em; text-transform:uppercase; }
.store-pack.is-best .store-badge { color:#0d5797; background:linear-gradient(#e9fdff,#9eefff); box-shadow:0 2px 0 #1469b3; }
.store-pack.is-fit .store-badge { color:#0c4a2c; background:linear-gradient(#d8ffe6,#7fe3a6); box-shadow:0 2px 0 #2a8a55; }
.store-coins { display:flex; justify-content:center; height:42px; padding-left:16px; }
.store-coins img { width:42px; height:42px; margin-left:-16px; object-fit:contain; filter:drop-shadow(0 3px 2px #06234a99); }
.store-coins[data-n="2"] img:first-child,.store-coins[data-n="3"] img:not(:last-child) { transform:translateY(4px) scale(.9); }
.store-pack__amount { color:#fff; font:normal 26px/1 DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:var(--num,lining-nums tabular-nums); text-shadow:0 2px #0c4b92; }
.store-pack__bonus { min-height:15px; margin-bottom:5px; color:#b7f4ff; font:12px/1.25 DraklyBold,'Trebuchet MS',sans-serif; }
.store-pack.is-popular .store-pack__bonus,.store-pack.is-best .store-pack__bonus { color:var(--c-dawn-3,#ffd27a); }

/* Season pass: compact cards, the value of the rewards in gold. */
.store-passes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.store-pass { display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-areas:"art title" "line line" "note note" "early early" "long long" "buy buy"; grid-template-rows:auto auto auto auto auto 1fr; align-items:center; gap:4px 8px; padding:10px; border:3px solid #87dff9; border-radius:18px; color:#fff;
  background:linear-gradient(145deg,#287fc2,#104d90 50%,#0a3979); box-shadow:inset 0 2px #e6fbff6b,0 4px 0 #094d9c,0 8px 14px #092d6266; }
.store-pass:not(.is-lite) { border-color:var(--c-dawn-3,#ffd27a); }
.store-pass__art { grid-area:art; width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 4px 3px #06234a99); }
.store-pass__body { display:contents; }
/* The value and the note are two rows: in one grid area they were drawn on top of each other. */
.store-pass__body > .store-value { grid-area:line; }
.store-pass__body > .store-pass__note { grid-area:note; }
.store-pass__body > .store-early { grid-area:early; }
.store-pass__body > .store-long { grid-area:long; }
.store-pass h3 { grid-area:title; margin:0; color:#fff; font:normal 18px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #125390; }
.store-value { color:var(--c-dawn-3,#ffd27a); font:13px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 1px 0 #5a2a10; }
.store-pass__note { color:#d6f2ff; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.store-early { color:#ffe2b8; font:11px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
/* Quiet mode ("Долгий сезон"): the full pass bought now lasts 28 days. */
.store-long { justify-self:start; padding:2px 7px; border-radius:999px; color:#0c4a2c; background:linear-gradient(#d8ffe6,#7fe3a6); font:11px/1.25 DraklyBold,'Trebuchet MS',sans-serif; }
.store-pass .store-buy { grid-area:buy; align-self:end; margin-top:4px; }
.store-passes.is-single { grid-template-columns:1fr; }
.store-passes.is-single .store-pass { grid-template-columns:52px minmax(0,1fr) minmax(108px,auto); grid-template-rows:auto; grid-template-areas:"art title buy" "art line buy" "art note buy" "art early buy" "art long buy"; }
.store-passes.is-single .store-pass__art { width:52px; height:52px; }
.store-passes.is-single .store-buy { margin-top:0; }

/* Seasonal egg: one row. */
.store-row { display:grid; grid-template-columns:52px minmax(0,1fr) minmax(96px,auto); align-items:center; gap:10px; padding:8px 10px; border:3px solid #87dff9; border-radius:18px;
  color:#fff; background:linear-gradient(145deg,#287fc2,#104d90 50%,#0a3979); box-shadow:inset 0 2px #e6fbff6b,0 4px 0 #094d9c; }
.store-row__art { width:52px; height:52px; object-fit:contain; }
.store-row strong { display:block; font:normal 16px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; }
.store-row small { color:#d6f2ff; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }

/* Fine print: one line each, never above the goods. */
.store-foot { display:grid; gap:8px; justify-items:center; }
.store-fine { display:flex; align-items:center; justify-content:center; gap:5px; margin:0; color:#cfeeff; font:12px/1.3 DraklyBold,'Trebuchet MS',sans-serif; text-align:center; }
.store-fine .icon { flex:0 0 13px; width:13px; height:13px; }
.store-fine a { color:#fff; }
.store-sec > .store-fine { justify-content:flex-start; text-align:left; }
.store-web { min-height:44px; padding:8px 14px; border:2px solid #82cef5; border-radius:14px; color:#e9faff; background:#0b4e98; font:13px/1.2 DraklyBold,'Trebuchet MS',sans-serif; cursor:pointer; }
.store-web.is-on { border-color:#fff; background:#1b78af; }
.store-debt { margin:0; padding:8px 12px; border:2px solid #ffd0ce; border-radius:14px; background:#ac426488; color:#fff; font:13px/1.3 DraklyBold,'Trebuchet MS',sans-serif; }
.store-empty { margin:0; padding:16px; border:2px dashed #a7e6f5; border-radius:15px; color:#e8f7ff; background:#0b4a85; text-align:center; }

/* The item a "Top up" or an offer pointed at. */
.store [data-shop-sku].is-target,.store-pack.is-target,.store-pass.is-target { animation:store-target 1.2s var(--ease-out,ease-out) 2; }
@keyframes store-target { 0%,100% { box-shadow:0 0 0 0 #fff0; } 40% { box-shadow:0 0 0 4px #fff,0 0 22px #8ce8ff; } }
.store-wallet { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; margin:10px 0 2px; padding:8px 10px; border:2px solid #82cef5; border-radius:16px;
  color:#fff; background:#0b4e98; box-shadow:inset 0 2px #e6fbff40; }
.store-wallet.is-on { border-color:#8ef0b6; }
.store-wallet__art { width:44px; height:44px; object-fit:contain; }
.store-wallet__art.is-app { border-radius:12px; }
.store-wallet strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:normal 15px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; }
.store-wallet small { color:#d6f2ff; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.store-wallet .btn { min-height:40px; padding:6px 12px; font-size:13px; }
.store-wallet__ops { display:flex; gap:6px; }
@media (max-width:430px) { .store-wallet.is-on { grid-template-columns:44px minmax(0,1fr); } .store-wallet__ops { grid-column:1 / -1; } .store-wallet__ops .btn { flex:1; } }
.store-rails button:focus-visible,.store-web:focus-visible { outline:3px solid #f9ffff; outline-offset:2px; }

@media (max-width:379px) {
  .store-hero { grid-template-columns:56px minmax(0,1fr); }
  .store-hero__art { width:56px; height:56px; }
}
@media (max-width:359px) {
  .store-head { flex-wrap:wrap; }
  .store-passes { grid-template-columns:1fr; }
  .store-chips li { font-size:11px; }
  .store-pack__amount { font-size:22px; }
  .store .btn.store-buy { font-size:15px; padding:0 4px; }
}
@media (prefers-reduced-motion: reduce) { .store [data-shop-sku].is-target { animation:none; box-shadow:0 0 0 4px #fff; } }

/* "For credits": the second layer, eggs and the hatch boost bought with the credits balance. */
.store-sec__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.store-balance { display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 4px; border:2px solid #82dfff; border-radius:999px; background:#0a3979; color:#fff;
  font:14px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:var(--num,lining-nums tabular-nums); }
.store-balance .ui-icon { width:22px; height:22px; }
.store-egg { padding-top:8px; }
.store-egg__art { width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 4px 4px #06234a99); }
.store-egg__name { color:#fff; font:normal 15px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #0c4b92; }
.store-egg .store-pack__bonus { display:inline-flex; align-items:center; gap:3px; }
.store-egg .store-pack__bonus .icon { width:12px; height:12px; }
.store-egg.is-off { opacity:.72; }
.store-pack__why { display:grid; place-items:center; width:100%; min-height:42px; color:#d6f2ff; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.store .btn.store-buy .ui-icon { flex:0 0 20px; width:20px; height:20px; }
.store .btn.store-short { opacity:.85; }
.store-row__ico { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:#ffffff22; }
.store-row__ico .icon { width:26px; height:26px; color:#fff; }
.store-credits-shop .store-row { margin-top:8px; }
/* Playtest bug 5: fire egg odds and pity on the shop card, under the item line. */
.store-row .store-odds { display:block; margin-top:3px; color:#bfe6f5; font-size:11px; line-height:1.25; }
.store-balance small { margin-left:4px; opacity:.85; font-size:11px; }

/* Fire eggs stay visible; the longer card and bundle catalogue opens on demand. */
.store-gacha-sec { gap:7px; }
.store-fire-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.store-fire-grid .store-gacha { grid-template-columns:40px minmax(0,1fr); gap:4px 6px; min-width:0; padding:7px; }
.store-fire-grid .store-row__art { width:40px; height:40px; }
.store-fire-grid .store-gacha > div { min-width:0; }
.store-fire-grid .store-gacha strong { font-size:13px; overflow-wrap:anywhere; }
.store-fire-grid .store-gacha > div > small { display:none; }
.store-fire-grid .store-gacha .store-buy { grid-column:1/-1; }
.store-gacha-odds { margin:0; color:#d6f2ff; font:11px/1.3 DraklyBold,'Trebuchet MS',sans-serif; }
.store-gacha-more { min-width:0; border:2px solid #87dff9; border-radius:13px; background:#0d4787; }
.store-gacha-more > summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:8px 12px; color:#fff; cursor:pointer; font:13px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.store-gacha-more > summary span { display:grid; place-items:center; min-width:23px; height:23px; border-radius:50%; background:#2389c4; color:#fff; font-size:11px; }
.store-gacha-more > summary:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.store-gacha-list { display:grid; gap:6px; padding:0 6px 7px; }
.store-gacha-list .store-row { grid-template-columns:40px minmax(0,1fr); gap:4px 8px; padding:7px; border-width:2px; }
.store-gacha-list .store-row__art { width:40px; height:40px; }
.store-gacha-list .store-row > div { min-width:0; }
.store-gacha-list .store-row strong { font-size:13px; }
.store-gacha-list .store-row small { font-size:11px; }
.store-gacha-list .store-row .btn.store-buy { grid-column:2; justify-self:start; width:min(100%,135px); min-height:36px; font-size:14px; }
.store-energy .store-row__ico { color:#ffd77d; background:#7750139c; }
.store-energy .store-row__ico .icon { color:#ffd77d; }
.store-energy .store-row small b { color:#fff1ba; font-variant-numeric:tabular-nums; }
@media (max-width:380px) { .store-energy .store-row { grid-template-columns:36px minmax(0,1fr); gap:6px; padding:7px; } .store-energy .store-row__ico { width:36px; height:36px; } .store-energy .store-row__ico .icon { width:22px; height:22px; } .store-energy .store-buy, .store-energy .store-pack__why { grid-column:2; justify-self:start; min-height:36px; } }
.store-founders .lp-fund-bar i { background:linear-gradient(90deg,#ffc53d,#fff1b8); }

/* Section anchors: one long page, a tap to any part of it; sticky under the HUD. */
.store-nav { position:sticky; top:calc(var(--safe-top,0px) + var(--hud-h,56px) + 4px); z-index:3; display:flex; gap:4px; margin:0 -2px; padding:4px;
  overflow-x:auto; scrollbar-width:none; border:2px solid #8ddcf8; border-radius:999px; background:#0b3f7b; box-shadow:0 4px 0 #0a4c91,0 6px 12px #00163d55; }
.store-nav::-webkit-scrollbar { display:none; }
.store-nav button { flex:1 0 auto; min-height:36px; padding:0 12px; border:0; border-radius:999px; color:#e9faff; background:transparent;
  font:13px/1 DraklyBold,'Trebuchet MS',sans-serif; white-space:nowrap; cursor:pointer; }
.store-nav button:active { background:#1b78af; }
.store-nav button:focus-visible { outline:3px solid #f9ffff; outline-offset:1px; }
.store-offers,.store [id^="shop-"] { scroll-margin-top:calc(var(--safe-top,0px) + var(--hud-h,56px) + 60px); }
.store-offers { display:grid; gap:14px; }

/* Founder packs: one card, the tier picked above it. */
.store-tier { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border:2px solid #ffc53d; border-radius:16px; background:#2c1240; }
.store-tier button { display:grid; gap:2px; justify-items:center; min-height:46px; padding:4px; border:0; border-radius:12px; color:#ffe9b8; background:transparent;
  font:13px/1.1 DraklyBold,'Trebuchet MS',sans-serif; cursor:pointer; }
.store-tier button b { font:normal 16px/1 DraklyBlack,'Trebuchet MS',sans-serif; color:#fff3c4; }
.store-tier button.is-on { color:#3a1d05; background:linear-gradient(#fff3c4,#ffc53d); box-shadow:inset 0 2px #fff8,0 2px 0 #a86a1c; }
.store-tier button.is-on b { color:#3a1d05; }
.store-tier button:focus-visible { outline:3px solid #fff; outline-offset:1px; }

/* The active month card: one line, not a sales card. */
.store-line { display:flex; align-items:center; gap:10px; padding:8px 10px; border:2px solid #ffd27a88; border-radius:16px; color:#fff;
  background:linear-gradient(145deg,#1f6aa8,#0d4384); }
.store-line img { flex:0 0 40px; width:40px; height:40px; object-fit:contain; }
.store-line span { display:grid; flex:1 1 auto; min-width:0; }
.store-line b { font:normal 15px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; }
.store-line small { color:#d6f2ff; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.store-line em { color:#7fe3a6; font:normal 13px/1 DraklyBold,'Trebuchet MS',sans-serif; }
.store-line .btn { min-height:38px; padding:0 14px; }

/* Economy v2 (spec 2026-10-21): sparks for $DRAKLY, the owner's purchase matching, prize payments. */
.store-sparks { display:grid; gap:8px; }
.store-sparks .store-line img { flex-basis:64px; width:64px; height:64px; filter:drop-shadow(0 0 6px #ffb02e88); }
.store-sparks__buy { display:flex; flex-wrap:wrap; gap:8px; }
.store-sparks__buy .btn { flex:1 1 90px; min-width:0; padding-inline:6px; white-space:nowrap; font-size:13px; }
.spark-img.is-inline { width:18px; height:18px; margin-right:4px; }
.store-match { display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:8px 12px; border-radius:14px;
  background:linear-gradient(90deg,#3b1f6acc,#1d4a6acc); border:2px solid #ffd27a99; color:#fff3c9;
  font:13px/1.25 DraklyBold,'Trebuchet MS',sans-serif; }
.store-match img { flex:0 0 24px; width:24px; height:24px; object-fit:contain; }
.store-match small { display:block; margin-top:3px; color:#ffe9b0cc; font:12px/1.25 'Trebuchet MS',sans-serif; }
.tower-pool__match { display:block; color:#7fe3a6; font:normal 9px/1.1 DraklyBold,'Trebuchet MS',sans-serif; text-transform:uppercase; }

/* VIP (owner 2026-10-22): the golden door by the tower to the day cards, and its sheet. The gold of the
   season fund marks it among the blue shortcuts; it breathes until a card is held. */
body.game-mode .tower-shortcuts .shortcut-vip, .tower-shortcuts .shortcut-vip { border-color:#ffe08a; background:linear-gradient(#f6c04a,#d0821c 60%,#9a4f12); box-shadow:inset 0 2px #fff4c68f,0 3px 0 #6e3a0c,0 7px 12px #3a1d0688; text-shadow:0 1px #7a3e0b; }
.tower-shortcuts .shortcut-vip.is-nudge::after { content:""; position:absolute; inset:-4px; border-radius:16px; border:2px solid #ffe08a; opacity:0; animation:vip-ring 2.4s ease-out infinite; pointer-events:none; }
.tower-shortcuts .shortcut-vip__x { position:absolute; top:-7px; right:-9px; padding:1px 5px; border-radius:999px; color:#5a2a10; background:linear-gradient(#fffbe0,#ffd24a); box-shadow:0 2px 0 #a86a1c; font:normal 10px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; font-style:normal; text-shadow:none; }
.tower-shortcuts .shortcut-starter span { font-variant-numeric:tabular-nums; }
@keyframes vip-ring { 0% { opacity:.9; transform:scale(.92); } 70%,100% { opacity:0; transform:scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .tower-shortcuts .shortcut-vip.is-nudge::after { animation:none; opacity:.6; transform:none; } }

.vip-sheet .sheet__body { display:grid; gap:12px; }
.vip-lead { margin:0; color:#e6f7ff; font:14px/1.35 DraklyBold,'Trebuchet MS',sans-serif; }
.vip-cards { display:grid; gap:10px; }
.vip-card { position:relative; display:grid; gap:8px; padding:12px; border:2px solid #4fa6dd; border-radius:18px; color:#fff; background:linear-gradient(160deg,#1a5aa0,#0c3770); box-shadow:inset 0 2px #ffffff26,0 3px 0 #082f5e; }
.vip-card.is-best { border-color:#ffe08a; background:linear-gradient(160deg,#2a6fb8,#123f7c); box-shadow:inset 0 2px #ffffff33,0 3px 0 #082f5e,0 0 0 3px #ffd24a40; }
.vip-card__flag { position:absolute; top:-10px; right:12px; padding:2px 9px; border-radius:999px; color:#5a2a10; background:linear-gradient(#fff3c4,#ffd27a); box-shadow:0 2px 0 #a86a1c; font:normal 11px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; }
.vip-card__head { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:10px; }
.vip-card__head img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 3px 4px #00183f88); }
.vip-card__head h3 { margin:0; font:normal 18px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #0a3d78; }
.vip-card__head small { color:#cfeeff; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.vip-card__value { display:block; margin-top:3px; color:#ffe7a0; font:13px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.vip-card__value em { color:#5a2a10; padding:0 5px; border-radius:6px; background:#ffd24a; font-style:normal; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.vip-card__perks { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.vip-card__perks li { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:start; gap:6px; font:13px/1.3 DraklyBold,'Trebuchet MS',sans-serif; }
.vip-card__perks .icon { width:16px; height:16px; margin-top:1px; color:#9ff0a0; }
.vip-card__on { display:flex; align-items:center; gap:6px; margin:0; color:#9ff0a0; font:13px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.vip-card__on .icon { width:16px; height:16px; }
.vip-card .btn.wide { min-height:46px; font-size:17px; }
.vip-card .btn .star-mark { width:18px; height:18px; vertical-align:-3px; }
.vip-fine { margin:0; color:#a9d6f2; font:11px/1.35 DraklyBold,'Trebuchet MS',sans-serif; }
.tower-shortcuts .shortcut-left { color:#fff; background:linear-gradient(#ff8a5c,#d8401c); box-shadow:0 2px 0 #7a1f08; }

/* Owner 2026-10-26: the starter as the entry ticket of the window money race (app.js raceTicket). */
.race-ticket { display:flex; align-items:center; gap:8px; margin:8px 0 0; padding:7px 10px; border-radius:12px; background:rgba(255,211,107,.12); border:1px solid rgba(255,211,107,.4); color:#ffe9b0; font:12px/1.3 'Trebuchet MS',sans-serif; }
.race-ticket img { flex:0 0 22px; width:22px; height:22px; object-fit:contain; }
.race-ticket b { color:#fff; font-variant-numeric:tabular-nums; }
