/* ============================================================================
 * MINER BOSS — presentation, v5.2 "Cevher" (tema: A · Fener Işığı),
 * dashboard v5.3 "Kuyu".
 *
 * Design tokens first, components second. The shell is v5.1 "Vitrin"'s: top
 * bar, named left rail, centred content column; below 901 px the rail folds
 * away and the bottom tab bar comes back. v5.3 rebuilt what sits INSIDE that
 * column: the mine is a shaft, so it gets the column's full height and the
 * dashboard stands beside it (see "L-03 · the dashboard is built around a
 * SHAFT" below).
 *
 * What v5.2 changes is the LIGHT. The shell is no longer a cold navy admin
 * panel around a warm mine — it is the mine's own world: sooty coal darks,
 * lantern amber falling from above, brass edges, paper ink. Rules that keep
 * it coherent:
 *   - money is GOLD, always; the primary action is ember ORANGE — never mix.
 *   - glow lives in exactly three places: the primary CTA, the active rail
 *     door, and the live payout moment. Everything else is matte.
 *   - depth is systematic: three elevation levels, each a shadow + inner
 *     bevel pair (--e1/--e2/--e3), not ad-hoc box-shadows.
 * ========================================================================== */

/* The display face: Jersey 10 (SIL OFL 1.1, file lives in the repo —
 * assets/MANIFEST.md carries the licence). No runtime CDN: the game plays
 * offline. Tall condensed pixel caps; single 400 weight, hierarchy comes
 * from size and colour. (Pixelify Sans was tried first and rejected: its Z
 * reads as "2" — MAĞAZA/KAZAN/SEZON cannot afford that.) */
@font-face {
  font-family: 'Jersey 10';
  src: url('../assets/fonts/Jersey10.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---- ground ramp: sooty coal, warm — never navy ----------------------- */
  --bg0: #16100e;              /* page                                   */
  --bg1: #0f0a09;              /* wells: the stage, inputs, tracks       */
  --bg2: #1c1512;              /* raised ground zones                    */
  /* ---- surface ramp ------------------------------------------------------ */
  --panel: #251b15;            /* sheet, modal, cards                    */
  --panel-hi: #2f221a;         /* raised strips (headers, active seg)    */
  --panel-2: #1c1410;          /* inner card, one tone darker            */
  --card: rgba(255, 200, 140, 0.055);
  --card-line: rgba(255, 190, 120, 0.17);
  --line: #3d2c21;             /* strong borders                         */
  --brass: #c9955c;            /* fittings: crest rims, header edges     */

  /* ---- ink: warm paper --------------------------------------------------- */
  --ink: #f6eddd;              /* primary text                           */
  --ink-dim: #d9c9b2;          /* secondary text                         */
  --muted: #b3a084;            /* labels — 6.6:1 on --panel              */

  /* ---- accents ----------------------------------------------------------- */
  --accent: #ff8f3a;           /* primary action, active door: ember     */
  --accent-hi: #ffb46b;
  --accent-deep: #c25d1d;
  --on-accent: #2b1404;        /* text on an accent fill — 7.5:1         */
  --accent-2: #ff6392;         /* the second voice: events, season       */
  --warn: #ff6255;             /* fuse capsules, badges, danger          */

  /* ---- money keeps its own colour: gold is COIN and only COIN ------------ */
  --gold: #f6c453;
  --gold-hi: #ffdf8e;
  --gold-deep: #b98f2e;
  --on-gold: #3a2708;
  --mine-t: #5fd9d0;           /* $MINE: mineral cyan                    */
  --good: #6fd08c;
  --bad: #ff7261;
  --info: #7aaeff;

  /* ---- button chrome ------------------------------------------------------ */
  --btn-bg: linear-gradient(#33261d, #241a14);
  --btn-line: #4a3626;
  --btn-danger: linear-gradient(#5c221c, #451713);
  --btn-danger-line: #a03f33;

  /* type scale (12 px floor — nothing in the UI renders smaller) */
  --fs0: 12px; --fs1: 13.5px; --fs2: 15px; --fs3: 18px; --fs4: 24px; --fs5: 32px;
  --r-s: 10px; --r-m: 14px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  /* elevation system: each level = outer shadow + top-light/bottom-dark bevel.
     e1 card · e2 panel/header strip · e3 overlay. Depth is these three and
     nothing else — a surface picks a level, it does not invent one. */
  --bevel: inset 0 1px 0 rgba(255, 214, 160, 0.07);
  --e1: inset 0 1px 0 rgba(255, 214, 160, 0.07), 0 2px 6px rgba(0, 0, 0, 0.38);
  --e2: inset 0 1px 0 rgba(255, 214, 160, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.45);
  --e3: inset 0 1px 0 rgba(255, 214, 160, 0.12), 0 12px 40px rgba(0, 0, 0, 0.6);
  /* the one sanctioned glow, parameterised by colour */
  --glow-accent: 0 0 16px rgba(255, 143, 58, 0.3);
  --glow-gold: 0 0 16px rgba(246, 196, 83, 0.32);

  /* ---- shell geometry ----------------------------------------------------- */
  --hud-h: calc(76px + env(safe-area-inset-top));   /* the top bar         */
  --rail-w: 190px;             /* named doors, not pictograms             */
  --col-w: 1240px;             /* content column                         */
  --side-w: clamp(258px, 21vw, 295px);  /* dashboard left column          */
  --gap: 14px;

  --display: 'Jersey 10', "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  /* soot grain: one static SVG noise tile, multiplied over the ground.
     Cheap (no animation, one paint) and it kills the "flat vinyl" look. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .84 0 0 0 0 .62 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font: var(--fs2)/1.4 -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
  /* the ground: lantern light from above, soot settling below, fine grain.
     Static gradients only — the ground never animates. */
  background:
    var(--grain),
    radial-gradient(120% 80% at 50% -12%, rgba(255, 150, 60, 0.075), transparent 55%),
    radial-gradient(150% 100% at 50% 118%, rgba(0, 0, 0, 0.55), transparent 58%),
    var(--bg0);
}
/* One display voice, used by the headings that carry the layout. Small caps
   labels (kickers, segment tabs) stay in the body sans: a pixel face below
   ~14 px is noise, and readability outranks flavour (§2.4). */
.display, .sh-title, .bb-name, .free-cta b, .m-title {
  font-family: var(--display);
  letter-spacing: .035em; text-transform: uppercase;
  font-weight: 400;
}
.pp-lab, .cc-kick, .qp-tab { letter-spacing: .07em; text-transform: uppercase; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
input { font: inherit; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(255, 143, 58, .4); }
#content::-webkit-scrollbar, #rail::-webkit-scrollbar { width: 9px; }
#content::-webkit-scrollbar-thumb { background: var(--panel-hi); border: 2px solid var(--bg0); border-radius: 6px; }
#content::-webkit-scrollbar-thumb:hover { background: var(--line); }

#app {
  width: 100%; height: 100dvh;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}

/* ---------- the coin puck (still the shape money has here) ------------------ */
.coin-ico {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), #f2b632 60%, var(--gold-deep));
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35), 0 0 6px rgba(242, 182, 50, 0.4);
  display: inline-block; flex: none;
}
.coin-ico.small { width: 15px; height: 15px; }
.xpbar { flex: 1; height: 8px; background: var(--bg1); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5a8fd0, var(--info)); border-radius: 4px; transition: width .3s; }

/* ---------- banner: an OVERLAY now — it never reflows the scene ------------ */
.banner {
  position: absolute; left: 10px; right: 10px; top: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 13px; font-size: var(--fs1); z-index: 25;
  border-radius: var(--r-s);
  box-shadow: var(--shadow);
  animation: slideDown .25s ease;
}
.banner.danger { background: #47182f; border: 1px solid var(--btn-danger-line); }
.banner.warn { background: #3d3320; border: 1px solid var(--gold-deep); }
.banner.info { background: #232f45; border: 1px solid #46608c; }
.banner .btn.small { margin-left: auto; }
@keyframes slideDown { from { transform: translateY(-120%); } to { transform: none; } }

/* ---------- stage ----------------------------------------------------------- */
#stage { position: relative; overflow: hidden; }
#scene { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#scene:active { cursor: grabbing; }
#depthChip {
  position: absolute; top: 10px; left: 10px; z-index: 22;
  background: rgba(26, 18, 12, 0.88) url(../assets/img/ui/px/icon-peak.png?v=6.9.0) 8px center / 16px 16px no-repeat;
  border: 1px solid #6b4f36;
  border-radius: 14px; padding: 5px 12px 5px 30px;
  font-size: var(--fs0); font-weight: 700; color: var(--ink-dim);
  pointer-events: none; font-variant-numeric: tabular-nums;
  transition: top .2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
#stage.with-banner #depthChip { top: 60px; }
/* v6.5 · asansör çipi: yalnız kabin çalışırken, sahnenin üst ortasında; dokununca
   Asansör penceresi. Depo doluyken kırmızıya döner. */
.elev-chip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 22;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(26, 18, 12, 0.88); border: 1px solid #6b4f36; border-radius: 14px;
  padding: 5px 12px; font-size: var(--fs0); font-weight: 700; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  transition: top .2s ease; cursor: pointer;
}
.elev-chip.stalled { border-color: #a4343f; color: #ffb3ba; }
#stage.with-banner .elev-chip { top: 60px; }
/* telefon: üst şerit derinlik çipi + Yüzey düğmesiyle dolu; çip alt-ortaya,
   Tümünü Topla / Kat N düğmelerinin bir sıra üstüne iner */
@media (max-width: 699px) {
  .elev-chip, #stage.with-banner .elev-chip { top: auto; bottom: 64px; }
}
/* Asansör penceresi · canlı satırlar (kabin durumu + rampa sırası) */
.el-live { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.el-line { display: flex; align-items: center; gap: 6px; font-size: var(--fs0); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.el-line.stalled { color: #ffb3ba; }
.el-line.queue { color: var(--muted); }
/* the banner pushes the depth chip down into the goals card's slot —
   shift the card below the chip while a banner strip is showing */
#stage:has(#banner:not(.hidden)) #goalsCard { top: 92px; }

/* goals card — the "what next" pinned quietly under the depth chip */
#goalsCard {
  position: absolute; top: 44px; left: 10px; z-index: 19;
  width: min(250px, 62vw);
  background: rgba(30, 22, 15, 0.92); border: 1px solid var(--card-line);
  border-radius: var(--r-s); padding: 8px 10px;
  font-size: var(--fs0); box-shadow: var(--shadow);
}
#goalsCard .gc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; cursor: pointer; }
#goalsCard .gc-head b { flex: 1; font-size: var(--fs0); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
#goalsCard .gc-chev { color: var(--muted); font-size: 10px; transition: transform .15s ease; }
#goalsCard .gc-count { color: var(--muted); font-size: var(--fs0); font-variant-numeric: tabular-nums; }
#goalsCard .gc-x { color: var(--muted); padding: 2px 6px; font-size: var(--fs0); }
#goalsCard.collapsed { padding-bottom: 6px; }
#goalsCard.collapsed .gc-head { margin-bottom: 0; }
#goalsCard.collapsed .gc-chev { transform: rotate(-90deg); }
#goalsCard.collapsed .gc-body { display: none; }
#goalsCard .gc-row { display: flex; gap: 7px; align-items: baseline; padding: 3px 0; color: var(--ink-dim); }
#goalsCard .gc-row i { font-style: normal; color: var(--muted); }
/* basamak metni tek bir flex öğesidir; içindeki <b> araya gap almasın */
#goalsCard .gc-txt { flex: 1; }
#goalsCard .gc-row.done { color: var(--muted); text-decoration: line-through; }
#goalsCard .gc-row.done i { color: var(--good); }
/* Patron Yolu: koşulu sağlanan basamak "talep et"e döner — kart o an bir
   bildirim değil, bir DÜĞMEDİR, o yüzden sıradaki basamaktan görsel olarak
   ayrılır (altın kenar + dolu düğme). */
#goalsCard .gc-row.ready { color: var(--ink); }
#goalsCard .gc-row.ready i { color: var(--gold); }
#goalsCard .gc-reward { margin-top: 5px; color: var(--muted); font-size: var(--fs0); }
#goalsCard .gc-claim {
  display: block; width: 100%; margin-top: 7px; padding: 6px 8px;
  background: var(--gold); color: #241a0c; border-radius: var(--r-s);
  font-size: var(--fs0); font-weight: 800; letter-spacing: .02em;
  animation: glowPulse 1.4s infinite alternate;
}
#goalsCard .gc-claim:active { transform: translateY(1px); }

/* level-up celebration */
.levelup {
  position: absolute; left: 50%; top: 34%;
  transform: translate(-50%, -50%);
  font-size: clamp(28px, 7vw, 44px); font-weight: 800; letter-spacing: .04em;
  color: var(--gold-hi);
  text-shadow: 0 0 22px rgba(246, 196, 83, 0.75), 0 3px 0 rgba(58, 39, 8, 0.9);
  animation: lvlPop 1.8s cubic-bezier(.2, 1.5, .4, 1) forwards;
  pointer-events: none;
}
@keyframes lvlPop {
  0% { transform: translate(-50%, -30%) scale(.4); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(1); opacity: 0; }
}

/* zoom controls */
.zoom-ctl {
  position: absolute; right: 12px; bottom: 66px; z-index: 27;
  display: flex; flex-direction: column; gap: 6px;
}
.zoom-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(#33261d, #201712); border: 1px solid #6b4f36;
  color: var(--ink-dim); font-size: 20px; font-weight: 700; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .14), 0 2px 6px rgba(0, 0, 0, .5);
}
.zoom-btn .ui-ico { width: 18px; height: 18px; }
.zoom-btn:active { transform: scale(.92); }

/* ---------- chips ----------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 999px; padding: 3px 10px;
  font-size: var(--fs0); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chip b { font-size: var(--fs1); font-variant-numeric: tabular-nums; }
.chip i { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip em { font-style: normal; font-variant-numeric: tabular-nums; }
.chip.missing { color: var(--bad); border-color: rgba(255, 119, 103, 0.5); }
.chip.ok { color: var(--good); border-color: rgba(88, 214, 142, 0.5); }
.chip.bad { color: var(--bad); border-color: rgba(255, 119, 103, 0.6); background: rgba(255, 119, 103, 0.12); }
.chip.warn { color: var(--gold); border-color: rgba(246, 196, 83, 0.5); }
.chip.fee { color: var(--ink-dim); }
.chip.countdown { font-variant-numeric: tabular-nums; }
/* v6.10 "Kapak": the first-stage scope label. Muted on purpose — a door held
   back is not a warning and not an error, so it must not compete with the
   claimable green or the expiring gold for the eye. */
.chip.soon {
  color: var(--ink-dim); border-color: var(--card-line);
  background: rgba(255, 255, 255, 0.04);
  text-transform: uppercase; letter-spacing: .04em; font-size: 10px; font-weight: 800;
}
.ore-ico { flex: none; image-rendering: pixelated; }
.ui-ico { vertical-align: middle; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
/* v6.2.1 PixelLab PNG ikonları: 32 px piksel sanatı 13–16 px'e küçülünce koyu siluetler
 * koyu panelde kayboluyordu — 1 px'lik ince açık hale zeminden ayırır (ölçüm: hale
 * testi, out/pixellab-icons/small3.html). SVG ikonlar dokunulmadan kalır. */
.ui-ico[src*="/px/"] { filter: drop-shadow(0 0 1px rgba(255, 214, 160, 0.45)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.missing-ico { display: inline-block; background: rgba(255, 255, 255, 0.1); border-radius: 4px; }

/* ---------- buttons: ONE family, three voices ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-line);
  border-radius: 12px; padding: 10px 16px;
  font-size: var(--fs2); font-weight: 700; color: var(--ink);
  min-height: 46px;
  transition: transform .08s, filter .15s;
  flex-wrap: wrap;
  box-shadow: var(--bevel), 0 2px 5px rgba(0, 0, 0, 0.35);
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.primary {
  background: linear-gradient(var(--accent-hi), var(--accent) 48%, var(--accent-deep));
  border-color: var(--accent-deep); color: var(--on-accent); font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 240, 220, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.btn.danger { background: var(--btn-danger); border-color: var(--btn-danger-line); color: #ffdcea; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { padding: 7px 12px; min-height: 38px; font-size: var(--fs1); border-radius: 10px; }
.btn .coin-chip { background: none; border: none; padding: 0; }
.btn.can { box-shadow: var(--bevel), 0 0 10px rgba(255, 143, 58, 0.3); }
.btn.can.primary, .btn.can.glow { animation: canPulse 1.6s ease-in-out infinite; }
@keyframes canPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.55), 0 0 6px rgba(255, 143, 58, 0.35); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.55), 0 0 18px rgba(255, 143, 58, 0.6); }
}
.ibtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--card); border: 1px solid var(--card-line);
  box-shadow: var(--bevel);
}
.ibtn:active { transform: scale(.92); }

/* ---------- bottom tabs: the phone's rail ----------------------------------- */
/* ≥901 px the icon rail takes this job and the bar is gone; below it, five
   slots and "More" holds whatever the rail had that does not fit. */
#tabs {
  display: flex; justify-content: center; flex: none;
  position: relative; z-index: 30;
  background: linear-gradient(var(--panel), var(--panel-2));
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1 1 0; max-width: 132px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 8px; font-size: var(--fs0); font-weight: 700; color: var(--muted);
  min-height: 56px;
}
.tab .t-ico { display: inline-flex; padding: 3px 15px; border-radius: 14px; transition: background .15s; filter: grayscale(1) opacity(.72); }
.tab .t-ico .ui-ico { width: 25px; height: 25px; }
.tab.active { color: var(--accent); }
.tab.active .t-ico {
  filter: none;
  background: rgba(255, 143, 58, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 143, 58, 0.45);
}

/* ---------- sheet: bottom sheet ↔ right drawer ------------------------------ */
#sheetWrap { position: fixed; inset: 0; z-index: 40; }
#sheetWrap.hidden { display: none; }
#sheetBack { position: absolute; inset: 0; background: rgba(8, 5, 3, 0.62); animation: fade .2s; }
#sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 84%;
  background: var(--panel);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  animation: sheetUp .25s ease;
  overflow: hidden;
  box-shadow: var(--e3);
}
@keyframes sheetUp { from { transform: translateY(40%); opacity: .4; } }
@keyframes fade { from { opacity: 0; } }
.sh-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 11px;
  background: linear-gradient(var(--panel-hi), var(--panel));
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--line); flex: none;
}
.sh-tw { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sh-tw > .ui-ico { width: 30px; height: 30px; }
.sh-title { font-size: 22px; font-weight: 400; }
.sh-hacts { display: flex; align-items: center; gap: 6px; }
.sh-close { font-size: 17px; color: var(--muted); padding: 8px 12px; border-radius: 10px; }
.sh-body { overflow-y: auto; padding: 14px 14px calc(22px + env(safe-area-inset-bottom)); }
.sh-body::-webkit-scrollbar { width: 8px; }
.sh-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.fl-num { font-size: 19px; color: var(--gold-hi); font-style: normal; }

/* ---------- stat tiles: icon + number + NAME -------------------------------- */
.statrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.stat {
  flex: 1 1 96px; background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--r-s);
  padding: 8px; text-align: center;
}
.stat.istat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px 9px; box-shadow: var(--bevel); }
.stat.istat > .ui-ico { width: 28px; height: 28px; }
.stat.istat b { font-size: 17px; font-variant-numeric: tabular-nums; }
.stat.istat b i { font-style: normal; font-size: var(--fs0); color: var(--muted); }
.stat.istat .st-l { font-size: var(--fs0); color: var(--muted); line-height: 1.15; }
.stat.istat.ringstat { flex-direction: row; gap: 10px; }
.stat.istat.ringstat .rs-col { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }

/* ---------- upgrade rows: icon + NAME + pips + delta + cost ----------------- */
.uprow {
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--r-m);
  padding: 12px; margin-bottom: 8px;
  box-shadow: var(--bevel);
}
.up-ico { flex: none; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); }
.up-ico .ui-ico { width: 32px; height: 32px; }
.up-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.up-name { font-size: var(--fs1); font-weight: 700; color: var(--ink); }
.up-pips { display: flex; }
.up-eff { display: flex; align-items: center; gap: 5px; font-size: var(--fs1); color: var(--ink-dim); flex-wrap: wrap; }
.up-eff .ui-ico { width: 17px; height: 17px; }
.uprow.iup .btn { max-width: 46%; }
.mk-acts { display: flex; gap: 5px; flex-wrap: wrap; }

/* pips & level bars */
.pips2 { display: inline-flex; gap: 4px; align-items: center; }
.pips2 i { width: 13px; height: 13px; border-radius: 4px; background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 220, 170, 0.12); }
.pips2 i.on { background: linear-gradient(var(--gold-hi), #f2b632); border-color: var(--gold); box-shadow: 0 0 5px rgba(242, 182, 50, 0.5); }
.lvlbar { display: inline-flex; align-items: center; gap: 6px; min-width: 110px; }
.lvlbar b { font-size: 16px; color: var(--gold-hi); }
.lvlbar .lb-t { flex: 1; height: 8px; min-width: 46px; background: rgba(0, 0, 0, 0.5); border-radius: 4px; overflow: hidden; }
.lvlbar .lb-t i { display: block; height: 100%; background: linear-gradient(90deg, #f2b632, var(--gold-hi)); }
.lvlbar .lb-m { font-size: var(--fs0); color: var(--muted); font-style: normal; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; font-size: var(--fs1); }
.delta em { color: var(--muted); font-style: normal; }
.delta b { color: var(--good); font-size: 14px; }

/* rings */
.ring { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ring svg { display: block; }
.ring-t { position: absolute; font-size: var(--fs0); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }

/* section titles / hints / empty states */
.dl-title, .sectitle {
  font-size: var(--fs0); color: var(--muted); letter-spacing: .09em; text-transform: uppercase;
  margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; font-weight: 700;
}
.sectitle .ui-ico { width: 18px; height: 18px; }
.droplist { margin-top: 12px; }
.dropchips { display: flex; flex-wrap: wrap; gap: 5px; }
.drop-chip { border-top: 2px solid var(--ore, #666); margin: 0; }
.dropchips .drop-chip .ore-ico { width: 22px; height: 22px; }
.hint { font-size: var(--fs0); color: var(--muted); margin: 8px 0; line-height: 1.45; }
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: var(--fs1); color: var(--ink-dim); padding: 20px 12px; text-align: center;
}
.empty.small { padding: 10px; }
.prop-img { image-rendering: pixelated; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4)); }
.empty .w { max-width: 340px; line-height: 1.45; }
.chips { margin: 8px 0; display: flex; gap: 5px; flex-wrap: wrap; }
.warnrow { display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border-radius: var(--r-s); margin-bottom: 8px; font-size: var(--fs1);
  background: rgba(246, 196, 83, 0.1); border: 1px solid rgba(246, 196, 83, 0.4); }
.warnrow .st-full { color: var(--gold); letter-spacing: 1px; }
.warnrow .ui-ico, .warnrow img { width: 22px; height: 22px; }
.lockrow { display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px; border: 1px dashed rgba(255, 220, 170, 0.22); border-radius: var(--r-s);
  margin: 8px 0; opacity: .85; }
.lockrow .ui-ico { width: 22px; height: 22px; }
.lockrow.big { padding: 18px; }
.lockrow.big .ui-ico { width: 30px; height: 30px; }
.lockedrow { display: flex; flex-wrap: wrap; gap: 6px; }
.lockedrow .chip { color: var(--muted); }
.verline { margin-top: 18px; font-size: var(--fs0); color: var(--muted); text-align: center; }
.goals { margin: 8px 0 0 18px; font-size: var(--fs1); }
.goals li { margin-bottom: 6px; }

/* help card (More → Yardım) */
.help-card {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-m);
  padding: 13px 14px; box-shadow: var(--bevel);
}
.help-card b { display: block; margin-bottom: 4px; }
.help-card p { font-size: var(--fs1); color: var(--ink-dim); margin: 0 0 10px; }

/* ---------- forge ----------------------------------------------------------- */
.pickpanel { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-m); padding: 13px; margin-bottom: 10px; box-shadow: var(--bevel); }
.pp-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pp-hmain { min-width: 0; }
.pp-name { font-size: var(--fs3); display: block; font-weight: 800; }
.pp-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.pp-stats { display: flex; gap: 7px; margin-bottom: 9px; }
.pp-stats .stat { padding: 9px 4px 7px; }
.durbar { height: 13px; background: rgba(0, 0, 0, 0.5); border-radius: 8px; overflow: hidden; margin-bottom: 7px; border: 1px solid rgba(0,0,0,.4); }
.durbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bad), var(--gold) 40%, var(--good)); transition: width .3s; }
.pips { display: flex; gap: 4px; }
.pip { width: 15px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.13); }
.pip.used { background: var(--bad); }
.pickinv { margin-bottom: 6px; }
.inv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 12px; margin-bottom: 5px;
  background: var(--card); border: 1px solid transparent;
  flex-wrap: wrap;
}
.inv-row.equipped { border-color: rgba(246, 196, 83, 0.4); background: rgba(246, 196, 83, 0.07); }
.inv-main { flex: 1; min-width: 130px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-name { font-size: var(--fs1); font-weight: 700; }
.inv-row .chip { font-size: var(--fs0); }
.inv-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.inv-acts .btn .ui-ico { width: 22px; height: 22px; }
.minibar { display: inline-block; width: 56px; height: 7px; border-radius: 3px; background: rgba(0, 0, 0, 0.5); overflow: hidden; vertical-align: middle; }
.minibar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bad), var(--gold) 40%, var(--good)); }
.bad { color: var(--bad); font-style: normal; }
.cr-legend { display: flex; align-items: center; gap: 5px; font-size: var(--fs0); color: var(--muted); margin: -2px 0 8px; }
.cr-legend .ui-ico { width: 15px; height: 15px; }
.craft-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--r-m); margin-bottom: 7px;
  background: var(--card); border: 1px solid var(--card-line);
  box-shadow: var(--bevel);
}
.craft-row.locked { opacity: .5; filter: saturate(.4); }
.craft-row.can { border-color: rgba(246, 196, 83, 0.45); }
.cr-info { flex: 1; min-width: 0; }
.craft-row .cr-name { font-size: var(--fs2); font-weight: 700; }
.craft-row .cr-stats { display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-size: var(--fs1); color: var(--ink-dim); margin: 4px 0 6px; }
.cr-cost { display: flex; flex-wrap: wrap; gap: 5px; }
[data-craft].btn .ui-ico { width: 26px; height: 26px; }
.lockchip { padding: 7px 11px; font-size: 14px; }
.chip.hn { font-size: var(--fs1); padding: 4px 10px; }
.chip.hn b { color: inherit; font-size: 14px; }
.chip.hn i { font-size: var(--fs0); }
.chip.hn.ok2 { color: #d6ecdc; }
.chip.hn.missing b { color: var(--bad); }
.forge-flash { animation: forgeFlash .55s ease; }
@keyframes forgeFlash {
  0% { box-shadow: inset 0 0 0 rgba(255, 200, 80, 0); }
  30% { box-shadow: inset 0 0 26px rgba(255, 180, 60, 0.55), 0 0 18px rgba(255, 180, 60, 0.5); background: rgba(255, 170, 60, 0.12); }
  100% { box-shadow: none; }
}
.pickimg { position: relative; display: inline-block; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.pickimg .pk-l { position: absolute; inset: 0; width: 100%; height: 100%; }
.pickimg .pk-head { -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ---------- market ---------------------------------------------------------- */
.subtabs { display: flex; gap: 7px; margin-bottom: 12px; }
.stab {
  flex: 1; padding: 11px 6px; border-radius: 12px; font-size: var(--fs1); font-weight: 700;
  background: var(--card); border: 1px solid var(--card-line); color: var(--ink-dim);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: var(--bevel);
}
.stab > .ui-ico { width: 22px; height: 22px; }
.stab.active {
  background: rgba(246, 196, 83, 0.14); border-color: rgba(246, 196, 83, 0.55); color: var(--gold-hi);
  box-shadow: inset 0 1px 0 rgba(255, 232, 160, 0.25), 0 0 10px rgba(246, 196, 83, 0.2);
}
.oregrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 9px; margin-bottom: 10px; }
.ore-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 6px 9px; border-radius: var(--r-m);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--ore, #888);
  transition: transform .1s, box-shadow .15s;
  box-shadow: var(--bevel), 0 2px 5px rgba(0, 0, 0, 0.25);
}
.ore-card > .ore-ico { width: 40px; height: 40px; }
.oc-name { font-size: var(--fs0); font-weight: 700; color: var(--ink-dim); line-height: 1.1; }
.ore-card b.oc-n { font-size: 18px; font-variant-numeric: tabular-nums; }
.ore-card .oc-p { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs0); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.ore-card.sel {
  background: color-mix(in srgb, var(--ore, #888) 16%, rgba(255, 255, 255, 0.05));
  border-color: var(--ore, var(--gold));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ore, var(--gold)) 45%, transparent);
  transform: translateY(-1px);
}
.ore-card:active { transform: scale(.95); }
.trade-box { background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-m); padding: 14px; margin-bottom: 10px; box-shadow: var(--bevel); }
.tb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tb-lab { font-size: var(--fs0); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tb-qty { display: inline-flex; align-items: center; gap: 5px; min-width: 84px; justify-content: flex-end; }
.tb-qty .ore-ico { width: 24px; height: 24px; }
.tb-qty b { font-size: 19px; font-variant-numeric: tabular-nums; }
.tb-row2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qchips { display: flex; gap: 5px; }
.qchip { cursor: pointer; padding: 8px 12px; font-size: var(--fs1); font-weight: 700; border-radius: 12px; }
.qchip:active { transform: scale(.94); }
.big-act { flex: 1; max-width: 230px; min-height: 54px; font-size: 16px; border-radius: var(--r-m); gap: 7px; }
.big-act > .ui-ico { width: 26px; height: 26px; }
.big-act .ba-total { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800; }
.big-act.sellb.can { background: linear-gradient(#3f9b5c, #2b7040); border-color: var(--good); color: #eafff2; animation: none; }
.big-act.buyb.can { background: linear-gradient(#3a5f96, #2b4770); border-color: var(--info); color: #eaf4ff; animation: none; }

/* range slider */
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 30px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 9px; border-radius: 5px;
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-hi), #f2b632 60%, var(--gold-deep));
  border: 2px solid #241b12; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer; }
input[type=range]::-moz-range-track { height: 9px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line); }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), #f2b632 60%, var(--gold-deep)); border: 2px solid #241b12; }
input[type=range]:disabled { opacity: .4; }

/* shared form rows (account, wallet, item shelf, bonus deposit) */
.postform { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.postform label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs0); color: var(--muted); flex: 1; min-width: 96px; }
.pf-lab { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs0); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.postform input {
  background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 10px; color: var(--ink); width: 100%; min-height: 46px; font-size: 16px;
}
.license-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(122, 174, 255, 0.07); border: 1px solid rgba(122, 174, 255, 0.35);
  border-radius: var(--r-m); padding: 20px 14px; text-align: center; margin-bottom: 10px;
}
.license-card.owned { flex-direction: row; justify-content: center; padding: 12px; }
.license-card b { font-size: 16px; }
.license-card p { font-size: var(--fs0); color: var(--ink-dim); }
.lc-ico { font-size: 0; }
.lc-ico .ui-ico { width: 54px; height: 54px; }
.lc-reqs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* ---------- market v6.4 "Tezgâh": a shop board ------------------------------ */
/* Three things on every tab: a LIST of ores with their unit price, ONE trade
   panel where the amount is typed, and a RECEIPT that says what the button
   will do. ≥700 px the list stands left of the panel; below, it becomes a
   horizontal strip above it so the panel stays above the fold on a phone.
   No corridor band, no slider (js/ui.js · buildMarketSheet). */
.mkt-tabs .stab { white-space: nowrap; }
.mkt-split { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 12px; align-items: start; }
.mkt-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mkt-item {
  display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0;
  padding: 9px 10px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--card-line); border-left: 4px solid var(--ore, #888);
  box-shadow: var(--bevel); transition: transform .08s, background .15s, box-shadow .15s;
}
.mkt-item > .ore-ico { width: 30px; height: 30px; }
.mi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mi-name { font-size: var(--fs1); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-sub { font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi-sub em { font-style: normal; color: var(--ink-dim); font-weight: 700; }
.mi-price { display: inline-flex; align-items: baseline; gap: 3px; font-size: var(--fs2); font-weight: 800; color: var(--gold-hi); font-variant-numeric: tabular-nums; flex: none; }
.mi-price .coin-ico { align-self: center; }
.mi-price em { font-style: normal; }
.mi-price i { font-style: normal; font-size: var(--fs0); font-weight: 600; color: var(--muted); }
.mkt-item.sel {
  background: color-mix(in srgb, var(--ore, #888) 16%, rgba(255, 255, 255, 0.05));
  border-color: var(--ore, var(--gold));
  box-shadow: 0 0 10px color-mix(in srgb, var(--ore, var(--gold)) 35%, transparent);
}
.mkt-item:active { transform: scale(.98); }

/* the trade panel */
.mkt-trade {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-m);
  padding: 14px; box-shadow: var(--bevel);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  position: sticky; top: 0;
}
.mt-head { display: flex; align-items: center; gap: 10px; }
.mt-head > .ore-ico { width: 42px; height: 42px; }
.mt-ht { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mt-title { font-size: 18px; line-height: 1.15; }
.mt-sub { font-size: var(--fs0); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.mt-sub > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mt-sub em { font-style: normal; color: var(--ink-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-lab { font-size: var(--fs0); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 2px 0 -4px; }
.mt-qty { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qstep {
  width: 44px; height: 46px; border-radius: 11px; flex: none;
  background: var(--btn-bg); border: 1.5px solid var(--btn-line);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--bevel), 0 2px 5px rgba(0, 0, 0, 0.35);
}
.qstep .ui-ico { width: 18px; height: 18px; }
.qstep:active { transform: scale(.94); }
.mt-qty .mkt-num { flex: 1 1 96px; max-width: 150px; text-align: center; font-size: 21px; }
.mt-quick { display: flex; gap: 5px; margin-left: auto; }
.mt-cap { display: flex; align-items: center; gap: 5px; font-size: var(--fs0); color: var(--muted); min-height: 16px; flex-wrap: wrap; }
.mt-cap i { font-style: normal; opacity: .6; }
.mt-cap .ui-ico { width: 15px; height: 15px; }
.mt-receipt { border-top: 1px dashed var(--card-line); padding-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.mt-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs1); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.mt-line b { font-weight: 800; color: var(--ink); }
.mt-line.total { font-size: var(--fs2); color: var(--ink); }
.mt-line.total > b { font-size: 22px; }
.mt-line.dim { font-size: var(--fs0); color: var(--muted); justify-content: flex-start; flex-wrap: wrap; gap: 4px; }
.mt-line.dim i { font-style: normal; opacity: .6; }
.mt-act { width: 100%; max-width: none; min-height: 54px; justify-content: center; }
.mt-act .ba-total { margin-left: 4px; }

/* one number field for the whole board: dark well, big tabular digits, the
   browser's tiny spin arrows removed (the board has its own − / + keys) */
.mkt-num {
  width: 100%; min-height: 46px; padding: 8px 10px;
  background: var(--bg1); border: 1.5px solid var(--btn-line); border-radius: 11px;
  color: var(--ink); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.mkt-num::-webkit-outer-spin-button, .mkt-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mkt-num:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.18); }
.mkt-num:disabled { opacity: .45; }

/* exact coin figure: icon + grouped digits ("2 480") */
.coin-n { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin-n.plus::before { content: '+'; }
.coin-n.minus::before { content: '−'; }

/* bazaar: ore strip, rows that NAME the ore, one form per action */
.mkt-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; scrollbar-width: none; }
.mkt-strip::-webkit-scrollbar { display: none; }
.mkt-strip .mkt-item { flex: none; padding: 7px 12px 7px 9px; gap: 7px; border-left-width: 1px; border-top: 3px solid var(--ore, #666); }
.mkt-strip .mkt-item > .ore-ico { width: 24px; height: 24px; }
.mkt-note { display: flex; align-items: center; gap: 6px; font-size: var(--fs0); color: var(--muted); margin: 6px 0 2px; }
.mkt-note b { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.mkt-note b em { font-style: normal; }
.mkt-note .ui-ico { width: 16px; height: 16px; }
.mkt-rows { display: flex; flex-direction: column; gap: 6px; }
.mkt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--card-line); border-left: 4px solid var(--ore, transparent);
  box-shadow: var(--bevel); font-size: var(--fs1);
}
.mkt-row.mine { border-color: rgba(246, 196, 83, 0.4); border-left-color: var(--ore, var(--gold)); }
.mkt-row > .ore-ico { width: 26px; height: 26px; }
.mr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mr-main > b { font-size: var(--fs2); }
.mr-tag { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs0); color: var(--gold); }
.mr-sub { font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.mr-sub i { font-style: normal; opacity: .6; }
.mr-acts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.mr-acts .coin-n { color: inherit; }
.mkt-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-m);
  padding: 12px; box-shadow: var(--bevel); margin-bottom: 6px;
}
.mkt-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mf-lab { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs0); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mf-lab .ore-ico { width: 16px; height: 16px; }
.mf-hint { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums; }
.mf-hint em { font-style: normal; color: var(--ink-dim); font-weight: 700; }
.mf-hint i { font-style: normal; opacity: .6; }
.mf-sum {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  font-size: var(--fs1); color: var(--ink-dim); font-variant-numeric: tabular-nums;
  border-top: 1px dashed var(--card-line); padding-top: 8px;
}
.mf-sum > span { display: inline-flex; align-items: center; gap: 4px; }
.mf-net { margin-left: auto; }
.mf-net b { font-size: 17px; }
.mf-btn { grid-column: 1 / -1; min-height: 48px; }
.mkt-lock {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin-bottom: 8px;
  border-radius: var(--r-m); background: var(--card); border: 1px dashed var(--card-line);
  color: var(--muted); font-size: var(--fs1);
}
.mkt-lock .ui-ico { width: 20px; height: 20px; }
.license-card p.lc-hint { color: var(--muted); }

@media (max-width: 699px) {
  .mkt-split { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }  /* the base rule says start: without stretch the strip keeps its content width and the sheet scrolls sideways */
  .mkt-list { flex-direction: row; overflow-x: auto; gap: 6px; padding: 2px 2px 6px; scrollbar-width: none; }
  .mkt-list::-webkit-scrollbar { display: none; }
  .mkt-list .mkt-item {
    flex: none; width: 118px; flex-direction: column; align-items: center; text-align: center;
    padding: 9px 6px 8px; gap: 4px;
    border-left: 1px solid var(--card-line); border-top: 4px solid var(--ore, #888);
  }
  .mkt-list .mkt-item.sel { border-left-color: var(--ore, var(--gold)); }
  .mkt-list .mi-main { align-items: center; }
  .mkt-list .mi-sub { font-size: 11.5px; }
  .mkt-list .mi-price { font-size: var(--fs1); }
  .mkt-trade { position: static; }
  .mt-quick { margin-left: 0; }
  .mkt-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .stab { padding: 10px 4px; font-size: var(--fs0); gap: 4px; }
  .stab > .ui-ico { width: 19px; height: 19px; }
  .mr-acts { flex-direction: column; align-items: stretch; }
}

/* ---------- warehouse ------------------------------------------------------- */
.oregrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ore-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 13px; padding: 12px 4px 9px; border-top: 3px solid var(--ore, transparent);
}
.oregrid .ore-cell > .ore-ico { width: 38px; height: 38px; }
.ore-cell b { font-size: 17px; }
.ore-cell span { font-size: var(--fs0); color: var(--muted); }

/* ---------- modal ----------------------------------------------------------- */
#modalWrap { position: absolute; inset: 0; z-index: 85; background: rgba(8, 5, 3, 0.66); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .2s; }
#modal {
  width: 100%; max-width: 400px; max-height: 82%;
  overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 18px 16px;
  animation: popIn .22s ease;
  box-shadow: var(--e3);
}
@keyframes popIn { from { transform: scale(.9); opacity: 0; } }
.m-title { font-size: 21px; font-weight: 400; margin-bottom: 10px; }
.m-body { font-size: 14px; color: var(--ink-dim); line-height: 1.5; }
.m-body p { margin-bottom: 8px; }
.m-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; flex-wrap: wrap; }
.off-big { font-family: var(--display); font-size: 30px; font-weight: 400; color: var(--gold); margin-bottom: 6px; }

/* ---------- toasts & fx ----------------------------------------------------- */
#toasts { position: absolute; top: calc(var(--hud-h) + 10px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 90; pointer-events: none; }
/* while a banner strip is showing, toasts land below it instead of on it */
#app:has(#banner:not(.hidden)) #toasts { top: calc(var(--hud-h) + 54px); }
.toast {
  max-width: 88%; padding: 9px 15px; border-radius: 20px; font-size: var(--fs1);
  background: rgba(40, 30, 20, 0.96); border: 1px solid #63492f;
  animation: toastIn .25s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.toast.good { border-color: rgba(88, 214, 142, 0.6); }
.toast.warn { border-color: rgba(246, 196, 83, 0.6); }
.toast.out { opacity: 0; transition: opacity .4s; }
@keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 65; }
.fly {
  position: fixed; transform: translate(-50%, 0);
  font-size: 16px; font-weight: 800; color: var(--gold-hi);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  animation: flyUp .9s ease-out forwards;
}
.fly.good { color: #9fe8a0; }
.fly.coin { color: var(--gold); }
@keyframes flyUp { to { transform: translate(-50%, -70px); opacity: 0; } }
.spark {
  position: fixed; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  animation: sparkFly .6s ease-out forwards;
}
@keyframes sparkFly { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* ---------- floating buttons ------------------------------------------------ */
.float-btn {
  position: absolute; right: 12px; bottom: 16px; z-index: 28;
  background: rgba(28, 20, 15, 0.95); border: 1px solid var(--btn-line);
  border-radius: 22px; padding: 10px 15px;
  font-size: var(--fs0); font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow);
}
.float-btn.ca {
  right: auto; left: 12px;
  background: linear-gradient(var(--accent-deep), #10826f); border-color: var(--accent);
  color: var(--on-accent); font-weight: 800;
}
.float-btn.up {
  top: 10px; right: 10px; bottom: auto;
  background: linear-gradient(#3a4c72, #283349); border-color: #55688f;
}
.float-btn:active { transform: scale(.95); }

/* ---------- minigame -------------------------------------------------------- */
#minigame {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 35;
  background: linear-gradient(rgba(38, 28, 21, 0.97), rgba(22, 15, 11, 0.97));
  border: 2px solid var(--gold); border-radius: var(--r-m);
  padding: 10px 14px 16px; cursor: pointer;
  animation: mgIn .22s cubic-bezier(.2, 1.6, .4, 1);
  box-shadow: 0 6px 24px rgba(246, 196, 83, 0.3);
}
@keyframes mgIn { from { transform: translateY(24px) scale(.92); opacity: 0; } }
.mg-label { text-align: center; font-size: var(--fs0); font-weight: 800; letter-spacing: 2px; color: var(--gold-hi); margin-bottom: 9px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.mg-track {
  position: relative; height: 16px; border-radius: 9px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 14px),
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.45));
  border: 1px solid var(--line);
}
.mg-track::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2px;
  background: var(--muted); border-radius: 1px;
}
.mg-zone {
  position: absolute; left: 38%; width: 24%; top: 0; bottom: 0;
  background: linear-gradient(rgba(88, 214, 142, 0.55), rgba(88, 214, 142, 0.3));
  border-radius: 8px; box-shadow: inset 0 0 8px rgba(88, 214, 142, 0.6);
}
.mg-cursor {
  position: absolute; top: -4px; bottom: -4px; width: 5px; margin-left: -2.5px;
  background: linear-gradient(#fff, var(--gold-hi)); border-radius: 3px;
  box-shadow: 0 0 10px var(--gold-hi);
}

/* ---------- tutorial -------------------------------------------------------- */
#tutGhost {
  position: fixed; z-index: 44; pointer-events: none;
  border-radius: 14px;
  animation: glowPulse 1s infinite alternate;
}
#tutTip {
  position: absolute; left: 12px; right: 12px; bottom: 78px; z-index: 45;
  max-width: 420px; margin-inline: auto;
  background: rgba(36, 26, 19, 0.97); border: 1px solid rgba(255, 180, 107, 0.55); border-radius: var(--r-m);
  padding: 12px 14px; font-size: 14px; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  animation: popIn .25s ease;
}
#tutTip.top { bottom: auto; top: calc(var(--hud-h) + 12px); }
#tutTip.anchored { right: auto; bottom: auto; margin-inline: 0; }
/* Hedefi bir panelin İÇİNDE olan adımlar (madenci/seviye/sandık) balonu panelin
   üstünde tutar. #tutTip zaten 45'te, #sheetWrap 40'ta — bu kural o ilişkiyi
   niyet olarak sabitler ki ileride panelin katmanı yükseltilirse balon sessizce
   altında kaybolmasın. */
#tutTip.over-sheet { z-index: 61; }
/* kurulum aşamasında demirhanedeki ücretsiz ahşap kazma satırı */
.craft-row .chip.free { background: rgba(120, 190, 130, 0.18); color: var(--good); font-weight: 800; }
.tt-skip { margin-top: 8px; font-size: var(--fs0); color: var(--muted); text-decoration: underline; padding: 4px 0; }
.tut-glow { animation: glowPulse 1s infinite alternate; position: relative; z-index: 36; }
@keyframes glowPulse {
  from { box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.7), 0 0 12px rgba(246, 196, 83, 0.5); }
  to { box-shadow: 0 0 0 4px rgba(246, 196, 83, 0.9), 0 0 22px rgba(246, 196, 83, 0.8); }
}

/* ---------- Layer-2 tooltip ------------------------------------------------- */
#uiTip {
  position: absolute; z-index: 95; max-width: 290px;
  background: rgba(36, 27, 18, 0.97); border: 1px solid #63492f; border-radius: var(--r-s);
  padding: 9px 12px; font-size: var(--fs1); line-height: 1.4; color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); pointer-events: none;
  animation: popIn .15s ease;
}

/* Layer-3 info modal */
.i3 { display: flex; flex-direction: column; gap: 4px; }
.i3-sec { margin: 6px 0 2px; }
.i3-sec > b { display: block; font-size: var(--fs0); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.i3-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: var(--fs1); color: var(--ink-dim); line-height: 1.45; }
.i3-row .ui-ico { width: 21px; height: 21px; margin-top: 1px; }
.i3-drop { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--fs1); }
.i3-drop span { flex: 1; }
.i3-drop b { font-variant-numeric: tabular-nums; }

/* ---------- zero-language test mode ---------------------------------------- */
body.zerolang .w,
body.zerolang .toast,
body.zerolang #banner,
body.zerolang #tutTip,
body.zerolang #tutGhost,
body.zerolang #goalsCard,
body.zerolang .hint,
body.zerolang .bc-meta { display: none !important; }

/* ---------- debug (developer-only, unchanged look) -------------------------- */
#debugPanel {
  position: absolute; inset: 40px 8px 70px; z-index: 80;
  background: rgba(10, 8, 16, 0.97); border: 1px solid #3ecf8e66; border-radius: 14px;
  overflow-y: auto; padding: 12px; font-size: 12px;
}
.dbg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dbg-head .btn { margin-left: auto; }
.dbg-sec { margin-bottom: 12px; }
.dbg-sec > b { display: block; color: #3ecf8e; font-size: 11px; letter-spacing: 1px; margin-bottom: 6px; }
.dbg-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.dbg-btns .btn { min-height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.dbg-kv { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; }
.kv em { font-style: normal; color: #887f75; margin-right: 4px; }
.kv b { font-variant-numeric: tabular-nums; }
.dbg-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.dbg-table caption { text-align: left; color: #887f75; font-size: 10px; margin-bottom: 2px; }
.dbg-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 2px 4px; font-variant-numeric: tabular-nums; }
.dbg-table td:last-child { text-align: right; }
.dbg-io { width: 100%; height: 120px; background: rgba(0, 0, 0, 0.5); color: #cfc; border: 1px solid #444; border-radius: 8px; font-size: 10px; padding: 6px; }
.dbg-note { font-size: 10px; color: #887f75; line-height: 1.5; }

/* ============================================================================
 * STORE
 * ========================================================================== */
.store-safety { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.store-safety:empty { display: none; }
.store-safety .chip { padding: 6px 11px; font-size: var(--fs1); }
.sandbox-chip { color: #8ecafc; border-color: rgba(100, 170, 255, 0.5); background: rgba(74, 163, 255, 0.1); }
.store-tabs { flex-wrap: wrap; }
.store-tabs .stab { flex: 1 1 30%; }
.agehint { display: flex; align-items: center; gap: 8px; border: 1px dashed rgba(246, 196, 83, 0.5);
  border-radius: var(--r-s); padding: 10px 12px; margin-bottom: 8px; font-size: 14px; }
.agehint .ui-ico { width: 24px; height: 24px; }

/* crate cards */
.crate-card {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-m);
  padding: 12px; margin-bottom: 8px;
  box-shadow: var(--bevel), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.crate-card.freeready { border-color: rgba(88, 214, 142, 0.55); box-shadow: 0 0 14px rgba(88, 214, 142, 0.25); }
.crate-card .cc-art { flex: none; width: 68px; height: 48px; display: flex; align-items: center; justify-content: center; }

/* ---------- treasure chests ---------------------------------------------------
 * One sheet (assets/img/chests.png — the "Animated Chests" pack, the plain set,
 * not the snow one) holds four chests in 48x32 cells, five to a row. Each chest
 * owns TWO rows = 10 frames: 0-4 closed (squash & stretch anticipation), 5-6 the
 * lid swings up, 7-9 open and settled. Only the open lid reaches the right-hand
 * and upper part of the cell, so closed-only views crop to the chest itself
 * (33x22, sitting at the cell's bottom-left) and just the ceremony draws it whole.
 *   --cs        pixel scale (integers stay crisp)
 *   --col       frame column 0-4
 *   --rowoff    0 = closed half of the pair, 1 = open half
 *   --chest-row which chest (inherited from the .tier-* class)
 * --------------------------------------------------------------------------- */
.chest-spr {
  --cs: 1; --col: 0; --rowoff: 0;
  display: inline-block; flex: none;
  width: calc(48px * var(--cs)); height: calc(32px * var(--cs));
  background: url(../assets/img/chests.png) no-repeat;
  background-size: calc(240px * var(--cs)) calc(256px * var(--cs));
  background-position:
    calc(-48px * var(--cs) * var(--col))
    calc(-32px * var(--cs) * (var(--chest-row, 0) + var(--rowoff)));
  image-rendering: pixelated;
}
.chest-spr.shut {
  width: calc(33px * var(--cs)); height: calc(22px * var(--cs));
  background-position-y: calc(-32px * var(--cs) * (var(--chest-row, 0) + var(--rowoff)) - 10px * var(--cs));
}
/* tier -> chest. Four chests for six tiers: soft rides along with bronze (wood)
   and seasonal with gold — the --tier glow already keeps each pair apart. */
.tier-bronze { --tier: #cd8b4f; --chest-row: 0; }    /* wood + steel bands */
.tier-silver { --tier: #c9d2dd; --chest-row: 6; }    /* ice + pale silver  */
.tier-gold { --tier: #ffd75e; --chest-row: 4; }      /* crimson + gold     */
.tier-void { --tier: #b06fff; --chest-row: 2; }      /* obsidian + antique */
.tier-soft { --tier: #7fb2ff; --chest-row: 0; }
.tier-seasonal { --tier: #ff8c4a; --chest-row: 4; }
.cc-box { --cs: 2; }
.crate-card .cc-info { flex: 1; min-width: 0; overflow: hidden; }
.crate-card .cc-info b { display: block; font-size: 16px; }
.cc-sub { font-size: var(--fs0); color: var(--ink-dim); display: block; margin-top: 2px; }
.crate-card .cc-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.crate-card .cc-acts .btn { white-space: nowrap; min-height: 40px; font-size: 14px; }
.cc-acts .btn .ui-ico { width: 22px; height: 22px; }
.cc2-pool { display: inline-flex; gap: 4px; align-items: center; margin-top: 5px;
  padding: 4px 8px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); }
.cc2-pool .ui-ico { width: 17px; height: 17px; }
/* full-width footer row of the crate card (flex-wrap sends it to its own
   line), so the pity text never competes with the button column */
.cc-pity { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; min-width: 0; }
.pity-chip { font-size: var(--fs0); max-width: 100%; min-width: 0; }
.pity-chip .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pityr { display: inline-flex; }
/* inline chest chip: below 1:1 the nearest-neighbour scaler eats pixels, so
   this one downsamples smoothly and leans on the tier glow to stay readable */
.mini-crate { --cs: .75; vertical-align: middle; image-rendering: auto;
  filter: drop-shadow(0 0 4px var(--tier, var(--gold))); }
.closedloop { display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px; margin: 6px 0; border-radius: var(--r-s); opacity: .8;
  border: 1px dashed rgba(255, 220, 170, 0.25); font-size: var(--fs0); color: var(--ink-dim); }
.closedloop .ui-ico { width: 16px; height: 16px; }

/* odds modal */
.odds-box { max-height: 55vh; overflow-y: auto; }
.odds-cls { border-left: 4px solid; padding: 7px 10px; margin-bottom: 6px; background: var(--card); border-radius: 0 10px 10px 0; }
.odds-head { display: flex; justify-content: space-between; font-size: var(--fs2); }
.odds-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs1); color: var(--ink-dim); padding: 3px 0 3px 8px; }
.odds-item .oi-l { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.odds-item .oi-w { white-space: normal; overflow-wrap: anywhere; }
.odds-item b { font-variant-numeric: tabular-nums; }
.odds-pity { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* buy confirm */
.buy-confirm { text-align: center; }
.bc-price { font-family: var(--display); font-size: 30px; font-weight: 400; margin: 6px 0; color: var(--good); }
.bc-meta { font-size: var(--fs0); color: var(--ink-dim); margin-top: 4px; }
.rename-input { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); color: inherit; margin-top: 6px; }

/* offers / season / vip */
.firstbuy {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, rgba(255, 158, 74, 0.18), rgba(242, 182, 50, 0.16));
  border: 1px solid rgba(255, 178, 110, 0.45); border-radius: var(--r-s);
  padding: 11px 12px; margin-bottom: 10px; font-size: 14px;
}
.firstbuy b { color: var(--gold-hi); font-size: 17px; }
.firstbuy .ui-ico { width: 24px; height: 24px; }
.offer-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-m); padding: 12px; margin-bottom: 8px; box-shadow: var(--bevel); }
.offer-card.sold { opacity: .55; }
.oc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.oc-head b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs2); }
.oc-head .ui-ico { width: 20px; height: 20px; }
.oc-items { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.oc-buy { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.oc-ref { text-decoration: line-through; color: var(--muted); font-size: var(--fs0); }
.bchip { padding: 5px 9px; }
.pname { color: var(--gold-hi); }
.days { font-size: 16px; color: var(--gold-hi); }
.season-card.soon { opacity: .78; }
.season-card.soon .sc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.season-card, .vip-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-m); padding: 12px; margin-bottom: 8px; box-shadow: var(--bevel); }
.sc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sc-head b { display: inline-flex; align-items: center; gap: 6px; }
.sc-track { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sc-track .durbar { flex: 1; margin: 0; }
.sc-buys { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.vip-card .durbar { margin: 6px 0; }

/* threshold / usage bars */
.threshold { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(102, 180, 255, 0.35); border-radius: var(--r-s); padding: 8px 10px; margin-bottom: 10px; }
.threshold.clipped { border-color: rgba(246, 196, 83, 0.6); color: var(--gold); }
.th-bar { flex: 1; height: 11px; min-width: 60px; border-radius: 7px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.th-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4aa3ff, #7fd0ff); }
.threshold.clipped .th-bar i { background: linear-gradient(90deg, #f2b632, var(--gold)); }
.threshold .chip { font-size: var(--fs1); }
.clipw { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-size: var(--fs0); }

/* consumables */
.consgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; margin-bottom: 8px; }
.cons-card { display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-m); padding: 14px 8px 12px; text-align: center;
  box-shadow: var(--bevel); }
.cons-card > .ui-ico { width: 40px; height: 40px; }
.cons-name { font-size: var(--fs1); font-weight: 700; }
.cons-eff { font-size: var(--fs0); color: var(--muted); line-height: 1.3; }
.cons-card .chip { font-size: var(--fs1); }
.cons-acts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }

/* wishlist (compact coming-soon row) */
.wishrow { display: flex; flex-wrap: wrap; gap: 6px; }
.wish-chip { cursor: pointer; padding: 8px 12px; }
.wishon { background: rgba(255, 119, 103, 0.16); border-color: rgba(255, 119, 103, 0.6); }
.cs-banner {
  background: rgba(181, 133, 255, 0.11); border: 1px dashed rgba(181, 133, 255, 0.45);
  border-radius: var(--r-s); padding: 9px 11px; margin-bottom: 10px; font-size: var(--fs1);
  display: flex; align-items: center; gap: 8px;
}
.cs-card {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-m);
  padding: 16px 10px; margin-bottom: 8px; text-align: center;
}
.cs-card.locked { filter: saturate(.75); }
.cs-card b { font-size: 14px; }
.cs-card .cs-ico { font-size: 26px; margin-bottom: 4px; }
.cs-card .cs-ico .ui-ico { width: 40px; height: 40px; }
.cs-card p { font-size: var(--fs0); color: var(--ink-dim); margin: 4px 0 8px; }
.csgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.csgrid .cs-card { margin-bottom: 0; }

/* safety modal */
.safety-box label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: var(--fs1); }
.safety-box input { width: 110px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); color: inherit; }
.safety-box .sectitle { margin-top: 10px; }

/* ---------- crate opening ceremony ------------------------------------------ */
.crate-ov {
  position: absolute; inset: 0; z-index: 75;
  background: rgba(10, 6, 3, 0.88); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.cr-stage { text-align: center; width: min(92%, 380px); }
/* the box is the CLOSED chest's footprint (33x22 at --cs 3); the sprite itself
   is the whole 48x32 cell, bottom-anchored, so the lid has room to swing up and
   over to the right without shifting the chest under it */
.cr-box { position: relative; width: 99px; height: 66px; margin: 34px auto 20px; animation: crShake .55s ease-in-out infinite; }
.cr-chest {
  --cs: 3; position: absolute; left: 50%; bottom: 0; z-index: 1;
  margin-left: calc(-16.5px * var(--cs));
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}
.cr-glow {
  position: absolute; inset: -26px -34px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, var(--tier, var(--gold)) 0%, transparent 65%);
  opacity: .22; transition: opacity .3s;
}
.crate-ov.tier-bronze .cr-glow { --tier: #cd8b4f; } .crate-ov.tier-silver .cr-glow { --tier: #c9d2dd; }
.crate-ov.tier-gold .cr-glow { --tier: #ffd75e; } .crate-ov.tier-void .cr-glow { --tier: #b06fff; }
.crate-ov.tier-soft .cr-glow { --tier: #7fb2ff; } .crate-ov.tier-seasonal .cr-glow { --tier: #ff8c4a; }
.cr-box.burst { animation: none; }
.cr-box.burst .cr-glow { opacity: .75; animation: crPulse .5s ease-out; }
.cr-tapline { color: var(--gold); font-size: var(--fs2); animation: crBlink 1s ease-in-out infinite; margin-bottom: 12px; }
.cr-results { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.cr-card {
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--rar, #666);
  border-radius: 12px; padding: 10px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--rar, #666) 35%, transparent);
  animation: crCardIn .4s cubic-bezier(.2, 1.4, .5, 1) backwards;
}
.cr-rar { font-weight: 700; margin-bottom: 6px; letter-spacing: .4px; }
.cr-items { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.cr-pity { font-size: var(--fs0); color: var(--ink-dim); margin-top: 10px; }
.cr-acts { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
@keyframes crShake { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-3deg) translateY(-2px) } 75% { transform: rotate(3deg) } }
@keyframes crBlink { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes crPulse { 0% { transform: scale(.6); opacity: .9 } 100% { transform: scale(1.5); opacity: .5 } }
@keyframes crCardIn { from { transform: translateY(18px) scale(.85); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- dokunma hedefleri: ≥44px vuruş alanı (§9) ----------------------
   Küçük görünen kontroller görünmez bir vuruş yastığı taşır: görsel ritim
   bozulmaz, parmak hedefi büyür. ::after kullanır — bu seçicilerin süs
   pseudo'su yoktur (olanlar listeye alınmaz). */
.car-arrow, .car-dot, .qp-tab, .qp-more, .pp-rate, .pp-chev,
#goalsCard .gc-x, .ibtn, .sh-close, .fchip, .btn.small, .pp-bolt { position: relative; }
.car-arrow::after, .car-dot::after, .qp-tab::after, .qp-more::after,
.pp-rate::after, .pp-chev::after, #goalsCard .gc-x::after, .ibtn::after,
.sh-close::after, .fchip::after, .btn.small::after, .pp-bolt::after {
  content: ''; position: absolute; inset: -10px;
}
/* bitişik kümelerde yastık komşuya taşmasın: kontrol başına ölçü */
.car-dot::after { inset: -16px -7px; }
.pp-rate::after { inset: -12px -6px; }
#goalsCard .gc-x::after { inset: -12px; }
.qp-tab::after { inset: -4px 0; }
.qp-more::after { inset: -5px 0; }
.ibtn::after, .btn.small::after { inset: -3px 0; }
.sh-close::after { inset: -2px; }
.fchip::after { inset: -4px; }
.pp-bolt::after { inset: -8px -4px; }
/* input'a pseudo konmaz: kaydırıcının kendisi 44'e çıkar */
input[type=range] { height: 44px; }

/* pointer affordances */
@media (hover: hover) {
  .btn:not(:disabled):hover { filter: brightness(1.12); }
  .rail-btn:not(.on):not(.locked):hover { background: var(--panel-hi); color: var(--ink); }
  .tab:hover { color: var(--ink-dim); }
  .mkt-item:hover, .stab:hover { border-color: rgba(255, 220, 170, 0.3); }
  .sh-close:hover { color: #fff; }
  .float-btn:hover, .zoom-btn:hover { filter: brightness(1.15); }
  .ore-card:hover, .crate-card:hover, .craft-row:not(.locked):hover, .cons-card:hover { filter: brightness(1.08); }
}

/* ---------- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===========================================================================
   v4 — profile identity, the More hub, and the shared panel states.

   Frames and titles were being awarded and then never drawn; an invisible
   reward reads as a fake one. The frames are pure CSS rather than art so a
   new one costs a gradient, not a sprite pipeline run.
   ========================================================================= */

.profile-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-m);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--bevel);
}
.pc-top { display: flex; align-items: center; gap: 12px; }
.pc-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-name { font-size: var(--fs3); line-height: 1.15; }
.pc-meta { font-size: var(--fs0); color: var(--muted); display: flex; align-items: center; gap: 5px; }
.pc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-lbl { font-size: var(--fs0); color: var(--muted); min-width: 62px; }
.pc-chips { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 auto; }

.pavatar {
  width: 58px; height: 58px; flex: 0 0 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--panel-hi);
}

/* A frame is a ring, so the same rule dresses the 58px avatar and the 26px
   picker chip without either needing its own artwork. */
.pframe { border: 3px solid transparent; box-sizing: border-box; }
.pframe.none    { border-color: var(--line); }
.pframe.copper  { border-color: #c87137; box-shadow: 0 0 0 1px #8a4a20, inset 0 0 8px rgba(224,160,106,.35); }
.pframe.silver  { border-color: #b9c2cc; box-shadow: 0 0 0 1px #7c858f, inset 0 0 8px rgba(216,222,229,.35); }
.pframe.gold    { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-deep), inset 0 0 10px rgba(255,223,142,.4); }
.pframe.void    { border-color: #a05fd0; box-shadow: 0 0 0 1px #6a2f96, inset 0 0 10px rgba(208,142,245,.4); }
.pframe.season  { border-color: #45c9a0; box-shadow: 0 0 0 1px #23806a, inset 0 0 8px rgba(69,201,160,.35); }
.pframe.miner   { border-color: #b98456; box-shadow: 0 0 0 1px #7d5330, inset 0 0 8px rgba(185,132,86,.3); }
.pframe.forge   { border-color: #e07a3c; box-shadow: 0 0 0 1px #9c4a17, inset 0 0 10px rgba(224,122,60,.4); }

.fchip {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel-hi);
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
  transition: transform .12s ease;
}
.fchip.on { transform: scale(1.16); }
.fchip.locked { opacity: .38; cursor: not-allowed; }
@media (hover: hover) { .fchip:not(.locked):hover { transform: scale(1.1); } }

.ptitle {
  display: inline-block; align-self: flex-start;
  font-size: var(--fs0); font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(246, 196, 83, .15);
  color: var(--gold-hi);
  border: 1px solid rgba(246, 196, 83, .3);
}
.ptitle.t-boss { background: rgba(224,122,60,.16); color: #ffb27a; border-color: rgba(224,122,60,.34); }
.ptitle.t-vip6 { background: rgba(160,95,208,.16); color: #d9a8f5; border-color: rgba(160,95,208,.34); }

.btn.locked { opacity: .4; }

/* ---- the More hub -------------------------------------------------------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 4px 0 2px;
}
.hub-cell {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-s);
  padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; color: var(--ink);
  min-height: 74px;
}
.hub-name { font-size: var(--fs0); }
@media (hover: hover) { .hub-cell:hover { background: rgba(255, 220, 170, 0.1); } }
.hub-cell.wip { opacity: .72; }
.hub-cell.wip .chip.soon { padding: 1px 6px; }

/* ---- shared async panel states ------------------------------------------ */
.panel-host {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 14px calc(16px + env(safe-area-inset-bottom));
  /* THE SCROLLER. #sheet is a column flexbox with overflow:hidden, so a panel
     taller than the sheet was simply CLIPPED and the rest was unreachable —
     .sh-body (ui.js, store.js) has always scrolled, .panel-host (every async
     cloud panel) never did. It only became visible when the Salon grew to
     seventeen cabinets, but it was cutting off the long ladder, event and
     market panels too. `min-height: 0` is the half that makes it work: without
     it a flex item refuses to shrink below its content and never overflows. */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.panel-loading, .panel-error, .panel-empty {
  padding: 26px 16px; text-align: center; color: var(--muted); font-size: var(--fs1);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Boş ve kırık durumlar TASARLANIR (T-08): küçük sahne parçası + tek satır. */
.panel-empty::before, .panel-error::before, .qp-empty::before, .panel-loading::before {
  content: ''; width: 96px; height: 72px; flex: none;
  background: center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4));
}
.panel-empty::before { background-image: url(../assets/img/px/prop/prop-kanarya.png?v=6.9.0); }
.panel-error::before { background-image: url(../assets/img/px/prop/prop-fener.png?v=6.9.0); }
.qp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qp-empty::before { width: 72px; height: 54px; background-image: url(../assets/img/px/prop/prop-kanarya.png?v=6.9.0); }
.panel-error { color: var(--ink-dim); }
.panel-loading { animation: panelPulse 1.4s ease-in-out infinite; }
.panel-loading::before { background-image: url(../assets/img/px/prop/prop-vagon.png?v=6.9.0); }
@keyframes panelPulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .panel-loading { animation: none; } }

/* ---- v4 panel components ------------------------------------------------- */

.panel-note { font-size: var(--fs0); color: var(--muted); margin: 0; line-height: 1.45; }
.panel-note.warn { color: var(--gold-hi); background: rgba(246,196,83,.1);
  border: 1px solid rgba(246,196,83,.25); border-radius: var(--r-s); padding: 9px 11px; }

.sec-note { font-weight: 400; color: var(--muted); font-size: var(--fs0); }

.chiprow { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.chiprow .chip { cursor: default; }
.chiprow button.chip { cursor: pointer; }
.chip.on { background: rgba(246,196,83,.16); border-color: rgba(246,196,83,.36); color: var(--gold-hi); }

/* A progress bar reads faster than a fraction, but the fraction is what a
   player quotes to a friend — so both, always together. */
.pbar { position: relative; flex: 1 1 auto; height: 7px; border-radius: 999px;
  background: rgba(0,0,0,.32); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.pbar i { position: absolute; inset: 0 auto 0 0; background: var(--gold); border-radius: 999px;
  transition: width .35s ease; }
@media (prefers-reduced-motion: reduce) { .pbar i { transition: none; } }

/* ---- quest / achievement card ------------------------------------------- */
.qcard { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s);
  padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.qcard.done { border-color: rgba(88,214,142,.4); background: rgba(88,214,142,.07); }
.qcard.claimed { opacity: .55; }
.q-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.q-title { font-size: var(--fs1); line-height: 1.3; }
.q-reward { font-size: var(--fs0); color: var(--gold-hi); white-space: nowrap;
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; }
.q-mid { display: flex; align-items: center; gap: 9px; }
.q-count { font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 62px; text-align: right; }
.q-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.q-acts:empty { display: none; }
.q-tag { font-size: var(--fs0); color: var(--good); display: inline-flex; align-items: center; gap: 4px; }

/* ---- streak -------------------------------------------------------------- */
.streak-card { background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-s); padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.sc-top { display: flex; justify-content: space-between; align-items: baseline; }
.sc-count { font-size: var(--fs0); color: var(--muted); }
.sc-dots { display: flex; gap: 6px; }
.sdot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.28); color: var(--muted); font-size: var(--fs0);
  font-variant-numeric: tabular-nums; }
.sdot.on { background: var(--gold); color: var(--on-gold); }
.sdot.now { outline: 2px solid var(--gold-hi); outline-offset: 1px; }

/* ---- arcade · v5.4 "Salon" -------------------------------------------------
   One hall, two bookkeepers (js/panels.js · js/minigames/salon.js). The hall
   says three things in order: what a win is worth, when the next round opens
   (ONE clock — the wait is per account), and the cabinets. A cabinet is an
   art tile: the game's accent glows under its icon, the name is set in the
   display face, the prize row shows the rung and its pips, and the foot is the
   PLAY plate or the countdown. The round runs in a "cabinet" frame and ends on
   a result card over the canvas that names everything it granted. */
.arc-mode { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; padding: 10px 12px;
  background: rgba(246, 196, 83, .07); border: 1px dashed var(--line); border-radius: var(--r-s);
  font-size: var(--fs0); color: var(--ink-dim); }
.arc-mode > span { flex: 1 1 auto; line-height: 1.4; }
.arc-mode > .ui-ico, .arc-mode > .btn { flex: none; }
.arc-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 12px; }
.ah { display: flex; align-items: center; gap: 9px; padding: 9px 11px; min-width: 0;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s); }
.ah > .ui-ico { flex: none; }
.ah > div { min-width: 0; }
.ah b { display: block; font-size: var(--fs1); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah b em { font-style: normal; color: var(--muted); font-size: var(--fs0); font-weight: 600; }
.ah span { display: block; font-size: var(--fs0); color: var(--muted); line-height: 1.3; }
/* `font-weight: 400` is not decoration on any display rule in this file: Jersey
   10 ships a single weight, so a <b> (700 by UA default) makes the browser
   SYNTHESISE bold by dilating the glyph — a pixel font's 1 px stems turn into
   a white halo and the name stops being readable. Pin it wherever the display
   face lands on a bold-by-default element. */
.ah.clock b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .5px; color: var(--gold-hi); }
.ah b > span { display: inline; font: inherit; color: inherit; }   /* the clock's own span must not fall back to the label size */
.ah.clock.ready b { color: var(--good); }
.arc-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.arc-fl { padding: 6px 12px; border-radius: 999px; font-size: var(--fs0); font-weight: 700; cursor: pointer;
  background: rgba(0, 0, 0, .24); border: 1px solid var(--line); color: var(--ink-dim); }
.arc-fl.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.arcade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.agame { --ag-accent: var(--gold); position: relative; overflow: hidden; padding: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: stretch; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s); color: var(--ink);
  transition: transform .12s ease, border-color .12s ease; }
.agame:not(:disabled):active { transform: scale(.985); }
@media (hover: hover) { .agame:not(:disabled):hover { border-color: var(--ag-accent); background: var(--card); } }
.ag-art { position: relative; height: 68px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .22));
  border-bottom: 1px solid var(--card-line); }
.ag-art::before { content: ''; position: absolute; inset: 0; opacity: .32;
  background: radial-gradient(ellipse at 50% 120%, var(--ag-accent), transparent 66%); }
.ag-art .ui-ico { position: relative; width: 40px; height: 40px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.ag-body { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px 10px; flex: 1 1 auto; }
.ag-name { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .3px; line-height: 1; color: var(--ink); }
.ag-meta { display: flex; gap: 8px; font-size: var(--fs0); color: var(--muted); }
.ag-meta em { font-style: normal; }
.ag-kind { color: var(--ag-accent); font-weight: 700; }
.ag-goal { font-size: var(--fs0); color: var(--ink-dim); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-prize { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: var(--fs0);
  color: var(--gold-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-prize em { font-style: normal; color: var(--muted); font-weight: 600; }
.ag-pips { display: inline-flex; gap: 3px; margin-left: 2px; }
.ag-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.ag-pips i.on { background: var(--gold); }
.ag-best { font-size: var(--fs0); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.ag-best.dim { color: var(--muted); }
.ag-play { margin-top: auto; padding: 7px 8px 6px; border-radius: 8px; text-align: center;
  font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 1px; line-height: 1;
  background: var(--gold); color: var(--on-gold); font-variant-numeric: tabular-nums; }
.agame.cooling { cursor: default; }
.agame.cooling .ag-play { background: rgba(255, 255, 255, .08); color: var(--muted); }
.agame.cooling .ag-art { filter: saturate(.4); }
.arcade-stage { display: flex; flex-direction: column; gap: 9px; }
.arc-cab { --ag-accent: var(--gold); position: relative; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--bg0); box-shadow: var(--e2); }
.arc-cab-head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; min-height: 46px;
  background: linear-gradient(var(--panel-hi), var(--panel)); border-bottom: 1px solid var(--line); }
.arc-cab-head .ui-ico { flex: none; }
.arc-cab-head b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.arc-cab-head em { font-style: normal; font-size: var(--fs0); color: var(--ag-accent); font-weight: 700; white-space: nowrap; }
.arc-cab-head em.ac-best { color: var(--muted); }
.arc-cab-head .grow { flex: 1 1 auto; }
.arcade-canvas { width: 100%; height: clamp(340px, 62vh, 620px); display: block; background: var(--bg0); touch-action: none; }
.arc-result { position: absolute; inset: 46px 0 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 18px; overflow: auto; background: rgba(12, 8, 5, .88);
  text-align: center; animation: fade .2s ease; }
.arc-result.hidden { display: none; }
.ar-title { font-family: var(--display); font-weight: 400; font-size: 40px; letter-spacing: 1px; line-height: 1; }
.ar-title.won { color: var(--good); text-shadow: 0 0 18px rgba(88, 214, 142, .45); }
.ar-title.lost { color: var(--bad); }
.ar-score { font-size: var(--fs2); font-variant-numeric: tabular-nums; }
.ar-score em { font-style: normal; color: var(--gold-hi); font-weight: 800; }
.ar-list { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px;
  max-width: 360px; width: 100%; }
.ar-list li { display: flex; align-items: center; gap: 8px; padding: 8px 11px; text-align: left; font-size: var(--fs1);
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s); }
.ar-list li .ui-ico { flex: none; }
.ar-list li.warn { border-color: var(--bad); }
.ar-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ar-again { min-width: 150px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .agame, .arc-result { transition: none; animation: none; } }

/* ---- crew ---------------------------------------------------------------- */
.slotrow { display: flex; gap: 8px; flex-wrap: wrap; }
.slot { width: 46px; height: 46px; border-radius: var(--r-s); display: grid; place-items: center;
  background: rgba(0,0,0,.24); border: 1px dashed var(--line); cursor: pointer; }
.slot.filled { border-style: solid; background: var(--card); }
.mc-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }
.mlist { display: flex; flex-direction: column; gap: 6px; }
.mchip { display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s);
  cursor: pointer; }
.mchip.picked { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.mc-name { font-size: var(--fs1); flex: 1 1 auto; }
.mc-tier { color: var(--gold-hi); }
.mc-where { font-size: var(--fs0); color: var(--muted); }

/* ---- ladder -------------------------------------------------------------- */
.lrow, .lbrow { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-bottom: 1px solid var(--card-line); font-variant-numeric: tabular-nums; }
.lrow.mine, .lbrow.you { background: rgba(246,196,83,.1); border-radius: var(--r-s); }
.l-name, .lb-name { flex: 1 1 auto; font-size: var(--fs1); }
.l-req, .l-pop, .lb-val { font-size: var(--fs0); color: var(--muted); }
.lb-rank { min-width: 28px; color: var(--muted); font-size: var(--fs0); }
.lb-val { color: var(--ink-dim); }

/* ---- wallet -------------------------------------------------------------- */
.wal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.wal-cell { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s);
  padding: 11px; display: flex; flex-direction: column; gap: 3px; }
.wal-cell span { font-size: var(--fs0); color: var(--muted); }
.wal-cell b { font-size: var(--fs2); font-variant-numeric: tabular-nums; }
.ref-card { display: flex; align-items: center; gap: 9px; background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--r-s); padding: 11px; }
.ref-link { flex: 1 1 auto; font-size: var(--fs0); color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-meta { font-size: var(--fs0); color: var(--muted); white-space: nowrap; }
/* Each arcade cabinet carries its own accent, set from the game module. */
.agame { --ag-accent: var(--gold); }
.agame .ag-ico { color: var(--ag-accent); }
.agame:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; }


/* ---- v5 · Ocak Gücü ve sonraki vardiya (HUD) -----------------------------
   Ekranın en üstünde, kelimesiz okunabilecek iki sayı: güç ve geri sayım.
   Sıfır-dil modunda da anlamlı kalması için birim ve sayı ayrı elemanlarda. */
/* The v3 HUD pill is gone; its numbers live in the power panel (L-03c, at the
   bottom of this file). What survives here is the payout flash, which is a
   property of the panel rather than of any one number. */
.power-panel.paying { animation: ocakPay 900ms ease-out; }
#hudPower.bump { display: inline-block; animation: numBump .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes numBump { 40% { transform: scale(1.16); color: var(--gold-hi); } }
@media (prefers-reduced-motion: reduce) { #hudPower.bump { animation: none; } }
@keyframes ocakPay {
  0% { box-shadow: 0 0 0 0 rgba(246, 196, 83, .55); }
  100% { box-shadow: 0 0 0 16px rgba(246, 196, 83, 0); }
}
@media (prefers-reduced-motion: reduce) { .power-panel.paying { animation: none; } }

/* Ocak paneli (v6) — kazı gücü, beklenen COIN/gün, cevher yığını, takas */
.ocak-hero { display: flex; align-items: flex-end; gap: 10px; margin: 4px 0 10px; }
.ocak-hero .sh-big { font-family: var(--display); font-size: 34px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ocak-hero .sh-unit { color: var(--ink-dim); padding-bottom: 4px; }
.ocak-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ocak-row:last-child { border-bottom: 0; }
.ocak-row b { font-variant-numeric: tabular-nums; }
.ocak-pile { display: flex; flex-direction: column; gap: 2px; }
.ocak-pile .op-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs0); padding: 3px 0; }
.ocak-pile .op-item .op-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.ocak-pile .op-item em { color: var(--ink-dim); font-style: normal; }
.ocak-rate { font-size: var(--fs0); color: var(--ink-dim); margin: 2px 0 6px; }
.ocak-feed { display: flex; flex-direction: column; gap: 4px; }
.ocak-feed .sf-item { display: flex; justify-content: space-between; font-size: var(--fs0); color: var(--ink-dim); }
.ocak-feed .sf-item b { color: var(--good); }
.gc-note { font-size: var(--fs0); color: var(--ink-dim); margin-top: 4px; }

/* ---- Bugün (v5 · F-200) --------------------------------------------------- */
/* Satır bir düğmedir ve DURUM taşır: yapılacak bir şeyi olan satır tam parlak,
   bugün bitmiş olan soluk, acil olan kenarından işaretli. Bir bakışta okunmalı;
   metni okumadan önce hangisine dokunacağını bilmelisin. */
.today-row { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; margin: 0 0 8px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s);
  color: inherit; font: inherit; }
.today-row:disabled { cursor: default; }
.today-row .tr-ico { flex: 0 0 auto; display: flex; opacity: 0.9; }
.today-row .tr-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.today-row .tr-body b { font-size: var(--fs1); }
.today-row .tr-body em { font-style: normal; font-size: var(--fs0); color: var(--muted); }
.today-row .tr-tag { flex: 0 0 auto; }
.today-row .tr-count { font-style: normal; font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums; }
.today-row.done { opacity: 0.62; }
.today-row.done .tr-ico { opacity: 0.55; }
.today-row.urgent { border-color: rgba(246, 196, 83, 0.45); background: rgba(246, 196, 83, 0.07); }
.today-row:not(:disabled):active { transform: translateY(1px); }

/* ---- event ---------------------------------------------------------------- */
.ev-bar { margin: 2px 0 10px; }
/* Yakım kutusu pazarın parçalarını ödünç alır (.oregrid2 / .trade-box /
   .qchips) — kendi görsel dili yok, çünkü olmamalı. */
.burn-box { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }

/* ---- event basamak merdiveni --------------------------------------------- */
/* Sekiz basamak sekiz kart olsaydı panel bir duvar olurdu. Satır: numara,
   ödül, eşik, ve yalnız hak edilmişse bir düğme. */
.ev-bar { display: flex; margin: 2px 0 10px; }
.tier-list { display: flex; flex-direction: column; gap: 4px; }
.tier-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s);
  font-size: var(--fs0); }
.tier-row .tl-n { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  font-weight: 700; color: var(--ink-dim); white-space: nowrap; }
.tier-row .tl-rw { flex: 1 1 auto; justify-content: flex-end; display: inline-flex; align-items: center; gap: 3px;
  color: var(--gold-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tier-row .tl-rw em { font-style: normal; color: var(--muted); }
.tier-row .tl-need { flex: 0 0 auto; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.tier-row.ready .tl-need { display: none; }
.tier-row .tl-act:empty { display: none; }
.tier-row.ready { border-color: rgba(246, 196, 83, .45); background: rgba(246, 196, 83, .08); }
.tier-row.claimed { opacity: .5; }
.tier-row.locked .tl-rw { color: var(--ink-dim); opacity: .8; }
/* 375 px'te de eşik kalır: kilitli bir basamakta okunacak tek sayı odur.
   Sıkışma olursa ödül sütunu daralır, eşik değil. */
@media (max-width: 380px) {
  .tier-row { gap: 6px; padding: 7px 8px; }
  .tier-row .tl-rw { min-width: 0; overflow: hidden; }
}

/* ---- parça çekmecesi ------------------------------------------------------ */
.partgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 6px; }
.pchip { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s); }
.pchip b { font-size: var(--fs2); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.pchip span { font-size: var(--fs0); color: var(--muted); line-height: 1.25; }
/* Takas edilemeyen parça (düdük) kendini söyler: pazarda arayan bulamasın. */
.pchip.bound { border-style: dashed; }

/* ---- eşya pazarı ---------------------------------------------------------- */
.item-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 5px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s);
  border-left-width: 3px; border-left-color: var(--card-line); }
.item-row.r-uncommon { border-left-color: #4aa3ff; }
.item-row.r-rare     { border-left-color: #a97bff; }
.item-row.r-epic     { border-left-color: #ff9d4a; }
.item-row.r-unreal   { border-left-color: var(--gold); }
.item-row.feat { background: rgba(246, 196, 83, .08); }
.item-row .ir-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 5px; }
.item-row .ir-name b { font-size: var(--fs1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row .ir-name em { font-style: normal; font-size: var(--fs0); color: var(--muted); }
.item-row .ir-price { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs0); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.item-row .ir-price em { font-style: normal; color: var(--muted); }
.item-row .ir-act { flex: 0 0 auto; }
.chip.qchip.on { background: rgba(246, 196, 83, .18); border-color: rgba(246, 196, 83, .5); color: var(--gold-hi); }
.item-row .ir-price.short { color: var(--muted); }

/* ---- cüzdan: kambiyo + defter --------------------------------------------- */
.swap-box { padding: 10px 11px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s); }
.sw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.sw-head b { font-size: var(--fs1); }
.sw-rate { font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums; }
.swap-box .postform { margin-top: 6px; }
.sw-out { min-height: 18px; font-size: var(--fs1); color: var(--gold-hi);
  display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.sw-out b { font-size: var(--fs2); }

.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--line); }
.hist-row:last-child { border-bottom: 0; }
.hr-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-what b { font-size: var(--fs1); }
.hr-what em { font-style: normal; font-size: var(--fs0); color: var(--muted); }
.hr-amt { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: var(--fs1); color: var(--ink-dim); }
.hr-amt em { font-style: normal; font-size: var(--fs0); color: var(--muted); }
.hist-row.up .hr-amt { color: var(--good); }
.hist-row.down .hr-amt { color: var(--ink-dim); }
.qcard.sel { border-color: rgba(246, 196, 83, .55); background: rgba(246, 196, 83, .07); }
.chip.qchip em { font-style: normal; color: var(--muted); font-size: var(--fs0); }

/* ---- salon kartı: v5 ödülü ve beklemesi ----------------------------------- */
.agame .ag-prize { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px;
  font-size: var(--fs0); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.agame .ag-prize em { font-style: normal; color: var(--muted); }
.agame .ag-wait { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px;
  font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Bekleyen kart tıklanamaz ve bunu SÖYLER: soluk ama okunur kalır, çünkü
   oyuncunun bilmesi gereken şey "ne zaman" — kartın kaybolması cevap değil. */
.agame.cooling { opacity: .55; cursor: default; }

/* ============================================================================
 * v5.1 "VİTRİN" — THE SHELL
 *
 * L-01 top bar · L-02 icon rail · L-03 dashboard · L-05 page slot · L-06 breaks.
 * Written phone-first: everything below is the ≤900 px layout, and the media
 * queries at the end add the rail (901), the two-column (1024) and the
 * three-column (1280) dashboard back — v5.3 "Kuyu".
 * ========================================================================== */

/* ---------- L-01 · top bar --------------------------------------------------- */
#topbar {
  display: flex; align-items: center; gap: 10px; flex: none;
  min-height: var(--hud-h);
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  /* `position` is not decoration here: without it the z-index is inert and the
     balance/profile menus drop behind an open page. */
  position: relative; z-index: 30;
}
.tb-gap { flex: 1 1 auto; }
.tb-logo {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px;
  height: 46px; padding: 0 10px 0 4px; border-radius: 12px; flex: none;
}
.tb-logo .ui-ico { width: 36px; height: 36px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.tb-word {
  font-family: var(--display); font-size: 23px; font-weight: 400; letter-spacing: .04em;
  color: var(--gold);
  text-shadow: 0 1px 0 var(--gold-deep), 0 3px 6px rgba(0, 0, 0, .5);
  white-space: nowrap;
}
@media (max-width: 700px) { .tb-word { display: none; } }
.tb-wallet {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-dim);
}
.tb-wallet:active, .tb-logo:active { transform: scale(.94); }

/* v6.7 "Vitrin" — the DEMO badge. It sits next to the logo rather than in a
   corner because it is the answer to "whose mine am I looking at", and that
   question is asked at the top left. Amber, not red: this is not an error, it
   is a sandbox. The dot pulses so the badge reads as live rather than as a
   sticker printed on the page. */
.demo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 3px 9px 3px 7px;
  border: 1px solid var(--gold-deep); border-radius: 999px;
  background: rgba(246, 196, 83, .14); color: var(--gold);
  font-size: var(--fs0); font-weight: 700; letter-spacing: .10em;
  cursor: pointer; white-space: nowrap;
}
.demo-chip:hover { background: rgba(246, 196, 83, .24); }
.demo-chip:active { transform: scale(.95); }
.demo-chip i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); animation: demoPulse 2.4s ease-in-out infinite;
}
@keyframes demoPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .demo-chip i { animation: none; } }

/* The card behind the badge: three plain lines about what a sandbox is. */
.i3-list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.i3-list li { font-size: var(--fs1); color: var(--ink-dim); line-height: 1.45; }


/* the balance capsule: one purse in the bar, all of them one tap away */
.tb-bal { position: relative; flex: none; }
.bal-cap {
  display: flex; align-items: center; gap: 8px;
  min-width: 150px; height: 44px; padding: 0 10px 0 12px;
  border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums;
}
.bal-cap b { flex: 1 1 auto; text-align: left; font-size: var(--fs2); }
.bal-cap .bal-chev { font-style: normal; color: var(--muted); font-size: 11px; }
.bal-cap.pulse .ui-ico { animation: coinPulse .45s ease; }
.bal-cap.pulse b { animation: coinPop .45s ease; }
@keyframes coinPulse { 40% { transform: scale(1.3); } }
@keyframes coinPop { 40% { transform: scale(1.15); color: var(--gold-hi); } }
.bal-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 250px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s);
  box-shadow: var(--shadow);
}
.bal-head { padding: 6px 8px 8px; font-size: var(--fs0); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.bal-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 8px; border-radius: 8px; color: var(--ink-dim); min-height: 44px;
}
.bal-row .bal-name { flex: 1 1 auto; text-align: left; font-size: var(--fs1); }
.bal-row b { font-variant-numeric: tabular-nums; color: var(--ink); }
.bal-row i { font-style: normal; color: var(--muted); }
.bal-row.on { background: rgba(255, 143, 58, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 143, 58, .35); }
.bal-row.link { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; color: var(--accent); }

/* profile block: avatar, name, and where the player stands */
.tb-prof { position: relative; flex: none; }
.prof-btn { display: flex; align-items: center; gap: 10px; padding: 3px; border-radius: 12px; }
.pf-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 11px; flex: none;
  background: linear-gradient(#2c211a, var(--panel-2)); border: 2px solid #6b4f36;
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .12);
}
.pf-id { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.pf-name { font-size: var(--fs2); font-weight: 800; color: var(--ink); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-rank { display: flex; align-items: center; gap: 4px; font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-rank i { font-style: normal; }
.pf-rank .rk-up { color: var(--good); }
.pf-rank .rk-down { color: var(--warn); }
.prof-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 250px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s);
  box-shadow: var(--shadow);
}
.pm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pm-head b { flex: 1 1 100%; font-size: var(--fs2); }
.pm-head .pm-lv { font-size: var(--fs0); color: var(--accent); font-weight: 700; }
.pm-head .xpbar { flex: 1 1 60px; }
.pm-head .pm-day { flex: 1 1 100%; font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums; }
.pm-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 8px; border-radius: 8px; color: var(--ink-dim); min-height: 44px; }
.pm-row span { flex: 1 1 auto; text-align: left; font-size: var(--fs1); }
.pm-row i { font-style: normal; color: var(--muted); }
.pm-row.locked { opacity: .5; }
.pm-foot { padding: 8px; border-top: 1px solid var(--line); margin-top: 4px; font-size: var(--fs0); color: var(--muted); text-align: right; }

/* ---------- L-02 · the named rail -------------------------------------------- */
#rail { display: none; }
.rail-btn {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 10px; border-radius: var(--r-s);
  background: transparent; border: 1px solid transparent; color: var(--ink-dim);
  transition: background .14s, box-shadow .14s, color .14s;
}
.rail-btn .ui-ico { opacity: .85; transition: opacity .14s; }
.rail-ico { display: inline-flex; flex: none; }
.rail-name {
  flex: 1 1 auto; min-width: 0; text-align: left;
  font-size: var(--fs1); font-weight: 700; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-lock { flex: none; display: inline-flex; opacity: .8; }
.rail-btn.on {
  background: linear-gradient(100deg, #4a2c14, #33200f);
  border-color: var(--accent-deep); color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px rgba(255, 143, 58, .3), inset 0 1px 0 rgba(255, 200, 140, .18), 0 0 14px rgba(255, 143, 58, .22);
}
.rail-btn.on::before {
  /* the lantern edge: a thin lit rim on the corridor side of the door */
  content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px; background: linear-gradient(var(--accent-hi), var(--accent-deep));
  box-shadow: 0 0 8px rgba(255, 143, 58, .7);
}
.rail-btn.on .ui-ico { filter: drop-shadow(0 0 4px rgba(255, 143, 58, .55)); }
/* A door closed by the v6.10 scope gate reads brighter than a door closed by a
   missing account: the feature is coming, and the rail should say so rather
   than look broken. */
.rail-btn.locked { opacity: .5; }
.rail-btn.locked.wip { opacity: .72; }
.rail-soon {
  flex: none; padding: 2px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-line);
  color: var(--ink-dim); font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.rail-btn:active { transform: scale(.98); }
.rail-badge {
  flex: none; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
  border-radius: 999px; background: var(--warn); color: #fff;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---------- shell body + content column -------------------------------------- */
#shellBody { flex: 1; min-height: 0; display: flex; }
/* `scrollbar-gutter: stable` is load-bearing, not polish: without it the
   scrollbar appearing changes the column width, which resizes the stage, which
   resizes the canvas — a genuine ResizeObserver feedback loop. */
#content { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; display: flex; scrollbar-gutter: stable; }
#contentWrap {
  width: min(var(--col-w), 100%); margin-inline: auto; min-height: 100%;
  display: flex; flex-direction: column; padding: 10px 12px 16px;
}

/* ---------- L-03 · the dashboard is built around a SHAFT (v5.3 "Kuyu") ------- */
/* The mine grows DOWN, not sideways: its world is at most 611 px wide but as
   deep as the player has dug. So the stage is the tall centre of the page and
   everything else stands beside it, never above it. Phone-first: below
   1024 px the wrappers are flattened with `display: contents`, the six regions
   become siblings of #dash and `order` sequences them — the mine SECOND,
   right under the power strip, because the mine is the game. The wide
   layouts at the end of the file turn the wrappers back into columns. */
#dash { flex: 1; display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
#dashGrid, #dashLeft, #dashMain, #dashRight { display: contents; }
#powerStrip { order: 1; }
#stage      { order: 2; }
#carousel   { order: 3; }
#btnEvents  { order: 4; }
#btnExped   { order: 5; }
#questPanel { order: 6; }
/* Sahne çerçevesi: "galeri ağzından madene bakış". Kenarlarda pirinç iç
   çizgi + ahşap dış hat; üstten fener taşması, alttan is düşüşü. Vinyet
   z-21'de yaşar: kanvasın üstünde, çip/rozet katmanlarının altında. */
/* The first screen of a phone is exactly: top bar · power strip · MINE · tab
   bar. The strip and the tab bar report their heights as --strip-h/--tabs-h
   (js/shell.js, a frame-deferred ResizeObserver) because the strip wraps
   differently per mode and folds, and CSS cannot measure it; the fallbacks
   only cover the first frame before the observer reports. 24 px is the
   column's top padding plus one gap; the floor keeps a landscape phone
   playable. */
#stage { border-radius: 14px; border: 1px solid #553518; flex: none;
  height: max(300px, calc(100dvh - var(--hud-h) - var(--tabs-h, 67px) - var(--strip-h, 100px) - 24px));
  /* kanvas her kare transparan silinir; dünyanın çizmediği yer BU zemindir.
     Kazılmamış derinlik: katman derzli, aşağı karardıkça sıkışan kaya. */
  background:
    var(--grain),
    repeating-linear-gradient(0deg, rgba(255, 190, 120, .028) 0 1px, transparent 1px 34px),
    linear-gradient(#2a1c14 0%, #1e140e 42%, #130d0a 100%);
  box-shadow: var(--e2); }
#stage::before {
  content: ''; position: absolute; inset: 0; z-index: 21; pointer-events: none;
  border-radius: 13px;
  box-shadow:
    inset 0 0 0 1px rgba(201, 149, 92, .28),
    inset 0 20px 34px -16px rgba(255, 150, 60, .16),
    inset 0 -34px 48px -20px rgba(0, 0, 0, .72),
    inset 22px 0 34px -24px rgba(0, 0, 0, .5),
    inset -22px 0 34px -24px rgba(0, 0, 0, .5);
}
/* Sahnenin çizmediği/karanlığa bıraktığı alt bölge: çerçeveden sızan sıcak
   ortam ışığı simsiyahı "kaya karanlığına" çevirir; katman derzleri belli
   belirsiz devam eder. Oyun alanının üstünde yaşar ama %so düşüktür. */
#stage::after {
  content: ''; position: absolute; inset: 0; z-index: 21; pointer-events: none;
  border-radius: 13px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 190, 120, .02) 0 1px, transparent 1px 34px) bottom / 100% 34% no-repeat,
    linear-gradient(180deg, transparent 58%, rgba(58, 38, 26, .34) 86%, rgba(70, 46, 30, .5) 100%);
}

/* ---------- L-03a · announcement carousel ------------------------------------ */
#carousel { flex: none; display: flex; flex-direction: column; gap: 8px; }
.car-viewport { overflow: hidden; }
.car-track { display: flex; gap: 10px; transition: transform .28s ease; }
/* Kart anatomisi (§5.5): illüstrasyon zemin + tür etiketi + başlık + süre
   kapsülü. Sanat tools/make-card-art.mjs'ten gelir; yazı, alt kenardaki is
   perdesinin üstünde oturur ki hiçbir illüstrasyon okunurluğu yemesin. */
.car-card {
  position: relative; flex: 0 0 calc(50% - 5px); height: 124px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 10px 12px 8px; text-align: left; overflow: hidden;
  border-radius: 10px; border: 1px solid #52351f;
  background: var(--panel-2);
  background-size: auto 100%; background-position: right center; background-repeat: no-repeat;
  color: var(--ink);
  box-shadow: var(--e1);
}
/* sol taraf: yazı bölgesi — sanatın zemin rengiyle dikişsiz birleşir,
   altta is perdesi başlık/saat okunurluğunu garanti eder */
.car-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--cardbg, var(--panel-2)) 30%, transparent 62%),
    linear-gradient(rgba(10, 6, 4, 0) 45%, rgba(10, 6, 4, .72) 92%);
}
.car-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .18), inset 0 -1px 0 rgba(0, 0, 0, .4);
}
.car-card.ev     { --cardbg: #2b1230; background-color: #2b1230; background-image: url(../assets/img/px/card/card-ev.png?v=6.9.0); }
.car-card.season { --cardbg: #1f3348; background-color: #1f3348; background-image: url(../assets/img/px/card/card-season.png?v=6.9.0); }
.car-card.offer  { --cardbg: #4a3210; background-color: #4a3210; background-image: url(../assets/img/px/card/card-offer.png?v=6.9.0); }
.car-card.crate  { --cardbg: #252e14; background-color: #252e14; background-image: url(../assets/img/px/card/card-crate.png?v=6.9.0); }
.car-card.exped  { --cardbg: #221c3c; background-color: #221c3c; background-image: url(../assets/img/px/card/card-exped.png?v=6.9.0); }
.car-card .cc-kick {
  position: absolute; left: 10px; top: 10px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 800; color: #1d0f06;
  background: linear-gradient(var(--accent-hi), var(--accent));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
.car-card.season .cc-kick { background: linear-gradient(#a8e0ff, #77c9ff); }
.car-card.offer .cc-kick, .car-card.crate .cc-kick { background: linear-gradient(var(--gold-hi), var(--gold)); }
.car-card.ev .cc-kick { background: linear-gradient(#ff8fb0, var(--accent-2)); }
.car-card .cc-title {
  position: relative; font-family: var(--display); font-size: 19px; font-weight: 400;
  letter-spacing: .03em; line-height: 1.05;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
.car-card .cc-clock {
  position: relative; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: 999px; background: rgba(12, 7, 4, .8); border: 1px solid rgba(255, 190, 120, .3);
  font-size: 11px; color: var(--gold-hi); font-variant-numeric: tabular-nums;
}
.car-card .cc-clock em { font-style: normal; }
.car-card:active { transform: scale(.985); }
.car-ctl { display: flex; align-items: center; justify-content: center; gap: 10px; }
.car-arrow { color: var(--muted); font-size: 18px; padding: 2px 8px; line-height: 1; }
.car-dots { display: flex; align-items: center; gap: 5px; }
.car-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--line); transition: width .18s, background .18s; }
.car-dot.on { width: 26px; background: var(--accent); }

/* ---------- L-03b/f · the event + expedition doors, the quest panel ---------- */
.big-banner {
  position: relative; display: flex; align-items: center; justify-content: flex-start;
  min-height: 54px; padding: 7px 14px; border-radius: var(--r-s);
  border: 1px solid #52351f; color: var(--ink);
  overflow: hidden;
  background-size: auto 100%; background-position: right center; background-repeat: no-repeat;
  box-shadow: var(--e1);
}
.big-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--cardbg, var(--panel-2)) 26%, transparent 64%);
}
.big-banner .bb-name {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 400; text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
.big-banner.ev { --cardbg: #2b1230; background-image: url(../assets/img/px/banner/banner-ev.png?v=6.9.0); background-color: #2b1230; }
.big-banner.ex { --cardbg: #221c3c; background-image: url(../assets/img/px/banner/banner-ex.png?v=6.9.0); background-color: #221c3c; }
.big-banner.locked { opacity: .55; }
.big-banner.locked.wip { opacity: .72; cursor: pointer; }
.big-banner:active { transform: scale(.985); }
.bb-badge {
  position: absolute; top: 5px; right: 8px; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  border-radius: 999px; background: var(--warn); color: #fff;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}

.quest-panel {
  display: flex; flex-direction: column; gap: 7px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--e2);
}
.qp-seg { display: flex; gap: 4px; padding: 3px; background: var(--panel-2); border-radius: 999px; }
.qp-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 6px; border-radius: 999px; min-height: 36px;
  font-size: var(--fs0); font-weight: 700; color: var(--muted);
}
.qp-tab i { font-style: normal; font-variant-numeric: tabular-nums; }
.qp-tab.active { background: var(--panel-hi); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.qp-clock {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px; border-radius: var(--r-s);
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: var(--fs0); color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.qp-clock em { font-style: normal; }
.qp-list { display: flex; flex-direction: column; gap: 6px; }
.qp-empty { padding: 18px 10px; text-align: center; color: var(--muted); font-size: var(--fs0); line-height: 1.5; }
.qp-more {
  align-self: center; padding: 6px 10px; min-height: 34px;
  color: var(--accent); font-size: var(--fs0); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.qp-more i { font-style: normal; }

.q-row {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 9px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s);
  box-shadow: var(--bevel);
  transition: border-color .15s;
}
@media (hover: hover) { .q-row:hover { border-color: #55402e; } }
.q-row.done { border-color: rgba(111, 208, 140, .45); }
.q-row.claimed { opacity: .55; }
.q-head { display: flex; align-items: flex-start; gap: 8px; }
.q-rw { display: flex; flex-direction: column; gap: 4px; flex: none; }
.rw-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 42px; padding: 3px 6px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--card-line);
  font-size: var(--fs0); font-weight: 800; font-variant-numeric: tabular-nums;
}
.rw-chip em { font-style: normal; font-size: 10px; color: var(--muted); }
.rw-chip.xp { color: var(--info); }
.rw-chip.coin { color: var(--gold-hi); }
.rw-chip.ore { color: var(--good); }   /* v6: rewards are ore, priced in COIN */
.q-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs1); line-height: 1.3; }
.q-prog { display: flex; align-items: center; gap: 8px; }
.q-prog .pbar { flex: 1 1 auto; }
.q-count { flex: none; font-size: var(--fs0); color: var(--muted); font-variant-numeric: tabular-nums; }
.q-foot { display: flex; align-items: center; gap: 6px; }
.q-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.q-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 5px 8px;
  border-radius: 8px; background: var(--card); border: 1px solid var(--card-line);
  font-size: var(--fs0); color: var(--ink-dim); font-variant-numeric: tabular-nums;
  min-height: 30px;
}
.q-go {
  flex: none; min-width: 70px; min-height: 36px; padding: 6px 12px; border-radius: 9px;
  background: var(--panel-hi); border: 1px solid var(--line);
  color: var(--ink); font-size: var(--fs0); font-weight: 800;
}
.q-go.can {
  background: linear-gradient(var(--accent-hi), var(--accent));
  border-color: var(--accent-deep); color: var(--on-accent);
  animation: canPulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .q-go.can { animation: none; } }
.q-go.done { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; }

/* ---------- L-03c/d · the power plate + the free call to action -------------- */
/* One anatomy at every width (v5.3): row one is the crest beside the label,
   the big number and the bonus; row two — rations, arcade bolt, timer and the
   next-shift ring — is a SIBLING of the body that wraps under both and takes
   the plate's full width. In the side column the plate stands upright; on a
   phone it is the short strip above the mine. */
#powerStrip { flex: none; display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.power-panel {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 8px 32px 8px 10px; border-radius: 12px;
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(255, 170, 80, .1), transparent 55%),
    linear-gradient(100deg, #2c211a, var(--panel-2));
  border: 1px solid rgba(201, 149, 92, .5);
  box-shadow: var(--e2);
}
/* köşe perçinleri: plaka hissi, dört nokta — süs bütçesi bu kadar */
.power-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  background:
    radial-gradient(circle at 7px 7px, rgba(255, 214, 160, .5) 1.5px, rgba(0,0,0,.5) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 7px) 7px, rgba(255, 214, 160, .5) 1.5px, rgba(0,0,0,.5) 2px, transparent 3px),
    radial-gradient(circle at 7px calc(100% - 7px), rgba(255, 214, 160, .5) 1.5px, rgba(0,0,0,.5) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), rgba(255, 214, 160, .5) 1.5px, rgba(0,0,0,.5) 2px, transparent 3px);
}
.pp-crest {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 56px; border-radius: 12px;
  background: linear-gradient(#33261d, #1c1410);
  border: 2px solid var(--brass);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 214, 160, .2);
}
.pp-crest img { width: 32px; height: 40px; image-rendering: pixelated; }   /* v6.2.1: px/crest 32×40, 1:1 */
.pp-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-open { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; text-align: left; width: 100%; }
.pp-lab { font-style: normal; font-size: var(--fs0); color: var(--brass); flex: 1 1 100%; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pp-lab .pp-lig { font-style: normal; color: var(--gold-hi); }
.pp-tot, .pp-bon { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.pp-tot i, .pp-bon i { font-style: normal; font-size: var(--fs0); color: var(--muted); }
.pp-tot b { font-family: var(--display); font-size: 27px; font-weight: 400; line-height: .9; color: var(--ink); }
.pp-tot em { font-style: normal; font-size: var(--fs0); color: var(--ink-dim); }
.pp-bon b { font-size: var(--fs2); font-weight: 800; color: var(--accent); }
.pp-r2 { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.pp-rations {
  display: flex; align-items: center; gap: 6px; min-width: 110px; flex: 1 1 110px;
  padding: 3px 4px; color: var(--ink-dim); font-size: var(--fs0);
}
.pp-rations em { font-style: normal; }
.pp-rations .hs-ico { width: 14px; height: 14px; border-radius: 3px; background: var(--gold) url(../assets/img/ui/icon-timer.svg) center / 0 no-repeat; flex: none; box-shadow: inset 0 -2px 0 var(--gold-deep); }
.pp-rations .hs-bar {
  position: relative; height: 8px; border-radius: 999px; flex: 1 1 auto; min-width: 40px;
  background: var(--bg1); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
.pp-rations .hs-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, var(--brass), var(--gold)); border-radius: 999px; transition: width .4s linear; }
.pp-rations[data-level="low"]   .hs-bar i { background: var(--gold); }
.pp-rations[data-level="empty"] .hs-bar i { background: var(--bad); opacity: .5; }
.pp-rations[data-level="empty"] .hs-ico  { background: var(--bad); }
.pp-bolt {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255, 143, 58, .16); border: 1px solid rgba(255, 143, 58, .5);
}
.pp-timer {
  flex: none; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 90, 90, .55); color: var(--ink-dim);
  font-size: var(--fs0); font-variant-numeric: tabular-nums;
}
.pp-timer.empty { color: var(--warn); border-color: var(--warn); }
/* v6: the rate button — "≈ N COIN a day" — opens the Ocak panel. */
.pp-rate { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--ink-dim); padding: 4px; }
.pp-rate em { font-style: normal; font-size: var(--fs0); font-variant-numeric: tabular-nums; font-weight: 700; }
.pp-chev { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; color: var(--muted); line-height: 1; }
.power-panel.folded .pp-r2 { display: none; }
.power-panel.folded .pp-chev { transform: rotate(180deg); }

.free-cta {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 150px; padding: 8px; border-radius: 12px;
  background: linear-gradient(var(--accent-hi), var(--accent) 55%, var(--accent-deep));
  border: 1px solid var(--accent-deep); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 240, 220, .5), inset 0 -2px 0 rgba(0, 0, 0, .18), var(--glow-accent);
  overflow: hidden;
  animation: ctaGlow 2.2s ease-in-out infinite;
}
/* fener süpürmesi: ~6 sn'de bir kartın üstünden geçen ışık şeridi */
.free-cta::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 245, 225, .5), transparent);
  transform: skewX(-18deg) translateX(0);
  animation: ctaSheen 5.6s ease-in-out infinite;
}
@keyframes ctaSheen { 0%, 74% { transform: skewX(-18deg) translateX(-40px); } 92%, 100% { transform: skewX(-18deg) translateX(520px); } }
@media (prefers-reduced-motion: reduce) { .free-cta::after { animation: none; opacity: 0; } }
.free-cta b { font-size: 17px; font-weight: 400; }
.free-cta.crate  { background: linear-gradient(var(--gold-hi), var(--gold) 55%, var(--gold-deep)); border-color: var(--gold-deep); color: var(--on-gold); box-shadow: inset 0 1px 0 rgba(255, 245, 220, .6), inset 0 -2px 0 rgba(0, 0, 0, .15), var(--glow-gold); }
.free-cta.season { background: linear-gradient(#ff8fd4, var(--accent-2) 55%, #c33f92); border-color: #c33f92; color: #2b0a20; box-shadow: 0 0 16px rgba(255, 99, 193, .3); }
@keyframes ctaGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .free-cta { animation: none; } }

/* ---------- L-05 · the page slot --------------------------------------------- */
/* On a phone an inner page is still a bottom sheet over the mine. On a desktop
   it takes the content column and the dashboard steps aside — same builders,
   same DOM, one layout switch. */

/* ---------- L-06 · ≤1023 px: one column, and the order is a decision --------- */
/* Nothing to declare here: the wrappers are `display: contents` in the base
   rules, so the six regions are siblings of #dash and the `order` values up
   there apply — power strip → MINE → notice cards → event door → expedition
   door → quests. The mine is second at every narrow width: the reference puts
   its banner strip there, but on a 375 px screen that pushes the game itself
   below the fold, and the mine is the game. */

/* ---------- L-06 · 901–1023 px: rail back, dashboard still one column -------- */
@media (min-width: 901px) {
  /* Twelve doors have to fit a laptop without a scrollbar, and the buttons may
     not shrink below a 44 px target — so the SPACING gives, not the buttons. */
  #rail {
    display: flex; flex-direction: column; align-items: stretch;
    gap: clamp(3px, .9vh, 10px);
    width: var(--rail-w); flex: none; padding: 6px 8px 12px;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none;
  }
  #rail::-webkit-scrollbar { width: 0; }
  #tabs { display: none; }
  #contentWrap { padding: 12px 16px 20px; }
  .car-card { flex: 0 0 calc(33.333% - 7px); }
  /* no tab bar here; 26 px = the column's top padding + one gap */
  #stage { height: max(320px, calc(100dvh - var(--hud-h) - var(--strip-h, 100px) - 26px)); }
}

/* ---------- L-06 · ≥1024 px: two columns — "me" beside the mine -------------- */
@media (min-width: 1024px) {
  #dashGrid {
    display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr; grid-template-areas: "left stage" "right stage";
    gap: var(--gap); align-items: start;
  }
  #dashLeft  { grid-area: left;  display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  #dashRight { grid-area: right; display: flex; flex-direction: column; gap: 8px;  min-width: 0; }
  /* The mine: the column's full height, and it STAYS while the side columns
     scroll past — a viewport, not a panel. Its height is the scrollport minus
     the column padding (12 + 20); the floor keeps a short laptop playable.
     `top` equals that padding, so the box never visibly moves: it only
     refuses to leave with the scroll. */
  #dashMain {
    grid-area: stage; display: flex; flex-direction: column; min-width: 0;
    position: sticky; top: 12px; align-self: start;
    height: max(320px, calc(100dvh - var(--hud-h) - 32px));
  }
  #stage { flex: 1; min-height: 0; height: auto; }
  /* in a side column the track pages one card at a time */
  .car-card { flex: 0 0 100%; }
  /* the plate stands upright; the crest hangs a little over the column edge */
  #powerStrip { flex-direction: column; gap: 10px; }
  .pp-crest { margin-left: -12px; }
  .free-cta { width: auto; flex-direction: row; gap: 10px; min-height: 50px; padding: 8px 12px; }

  /* the page slot: static in the column, no backdrop, no bottom sheet */
  #sheetWrap:not(.pop) { position: static; display: flex; flex: 1; min-height: 0; }
  #sheetWrap:not(.pop) #sheetBack { display: none; }
  #sheetWrap:not(.pop) #sheet {
    position: static; width: 100%; max-height: none; flex: 1;
    border: 1px solid var(--line); border-radius: 12px;
    animation: pageIn .2s ease;
  }
  @keyframes pageIn { from { transform: translateY(10px); opacity: .5; } }
  body.sheet-open:not(.sheet-pop) #dash { display: none; }

  /* v6.3 "Pencere" · the POPUP. A building's controls float over the mine
     they belong to (js/ui.js · POPUP decides which kinds). The wrap keeps the
     phone's viewport-covering rule, the backdrop dims the dashboard instead
     of replacing it, and the sheet is a centred dialog that hugs its rows up
     to most of the viewport. The backdrop is made a scroll container with no
     overflow only so `overscroll-behavior: contain` applies to it: a wheel
     over the dim — or past the end of the dialog's own scroller — must not
     scroll the column behind. */
  #sheetWrap.pop { display: flex; align-items: center; justify-content: center; padding: 28px 24px; }
  #sheetWrap.pop #sheetBack { overflow: auto; overscroll-behavior: contain; }
  #sheetWrap.pop #sheet {
    position: relative; flex: none;
    width: min(720px, 100%); max-height: min(88vh, 900px);
    border: 1px solid var(--line); border-radius: 16px;
    animation: popIn .22s ease;
  }
  #sheetWrap.pop .sh-body { overscroll-behavior: contain; }

  /* A page is 1240 px wide; a READING COLUMN is not. Rows stretched to the full
     width put the label and its number a hand's width apart, so the body keeps
     a measure and centres inside the page. Both panel families are covered:
     .sh-body (ui.js, store.js) and .panel-host (the async cloud panels). */
  #sheet .sh-body, #sheet .panel-host { padding-inline: max(14px, calc((100% - 920px) / 2)); }

  #modal { max-width: 460px; }
  #debugPanel { position: absolute; inset: auto; left: auto; right: 16px; top: calc(var(--hud-h) + 12px); bottom: 16px; width: 560px; }
}

/* ---------- L-06 · ≥1280 px: three columns — me · mine · world --------------- */
/* Width the mine cannot use (its world stops growing at 611 px) goes to a
   third column instead of becoming rock gutters: the doors and the notice
   board move there, every card visible at once, no paging. */
@media (min-width: 1280px) {
  #dashGrid {
    --side-w: clamp(240px, 18.5vw, 280px);
    grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w);
    grid-template-rows: 1fr; grid-template-areas: "left stage right";
  }
  #carousel { gap: 0; }
  .car-viewport { overflow: visible; }
  /* js/shell.js reads this direction to switch paging off; the !important
     only guarantees that a stale inline translate from the paged layout
     cannot survive a window resize */
  .car-track { flex-direction: column; gap: 8px; transform: none !important; }
  .car-card { flex: none; width: 100%; }
  .car-ctl { display: none; }
}

/* ---------- phones: the top bar has to fit ---------------------------------- */
@media (max-width: 560px) {
  #topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  /* the strip above the mine is short: crest 42, one line of number, and
     row two folds under both — every pixel it gives up goes to the mine */
  .pp-crest { width: 42px; height: 46px; }
  .pp-crest img { width: 32px; height: 40px; }   /* v6.2.1: piksel arma tam kat */
  .power-panel { padding: 7px 28px 7px 8px; gap: 4px 8px; }
  .pp-open { gap: 1px 8px; }
  .pp-tot b { font-size: 20px; }
  /* "Total:" and "Bonus:" are the words the number already says; on a 157 px
     body they would push the bonus to a third line */
  .pp-tot i, .pp-bon i { display: none; }
  .pp-r2 { gap: 4px 8px; }
  .pp-rations { min-width: 84px; flex: 1 1 84px; gap: 4px; padding: 2px; }
  .pp-rations .hs-bar { min-width: 26px; }
  .pp-rations em { display: none; }
  .pp-rate { padding: 2px; }
  .pp-bolt { width: 28px; height: 28px; }
  .pp-timer { padding: 3px 7px; }
  .car-card { height: 104px; padding-bottom: 24px; }
  .tb-wallet { display: none; }        /* the wallet keeps its door in the balance menu */
  /* The badge keeps its WORD on a phone. It is four characters and the bar has
     the room the hidden wallet button just freed; a lone amber dot is a
     decoration, and this one has something to say. */
  .demo-chip { margin-left: 6px; padding: 3px 8px; letter-spacing: .06em; font-size: 11px; }
  .bal-cap { min-width: 110px; padding: 0 8px; }
  .pf-name { max-width: 84px; }
  .pf-av { width: 40px; height: 40px; }
  .car-card { flex: 0 0 calc(100% - 0px); }
  .free-cta { width: 92px; }
  .free-cta b { font-size: var(--fs0); }
}
@media (max-width: 380px) {
  .pf-id { display: none; }
  .bal-cap { min-width: 96px; }
}

/* ---------- zero-language: the new chrome has to survive it ------------------ */
body.zerolang .qp-empty,
body.zerolang .cc-kick { display: none; }
/* With the names stripped the rail has nothing to be wide for. */
body.zerolang #rail { width: 64px; }
body.zerolang .rail-btn { justify-content: center; padding: 0; }

/* ---- v6.1 · Davet (invite page) ------------------------------------------------
   One campaign, two screens (js/davet.js). The invite page opens on the number
   the player came for — what is waiting — and the Collect button beside it; the
   link box and the share row follow, because the second thing the page is for
   is being passed on. Everything below is the programme explaining itself. */
.ref-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--e1); }
.ref-hero.has { background: linear-gradient(120deg, rgba(246, 196, 83, .16), rgba(246, 196, 83, .04) 60%);
  border-color: rgba(246, 196, 83, .45); box-shadow: var(--e1), var(--glow-gold); }
.rh-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rh-left em { font-style: normal; font-size: var(--fs0); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.rh-big { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 400; font-size: 36px;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold-hi); }
.ref-hero:not(.has) .rh-big { color: var(--ink-dim); }
.rh-sub { font-size: var(--fs0); color: var(--muted); }
.rh-act .btn { white-space: nowrap; }
.ref-welcome { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-s);
  background: rgba(111, 208, 140, .1); border: 1px solid rgba(111, 208, 140, .45); font-size: var(--fs1); line-height: 1.35; }
.ref-welcome > span { flex: 1 1 auto; }
.ref-welcome.done { opacity: .7; }
.ref-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-s);
  background: var(--panel-2); border: 1px solid var(--line); }
.rb-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rb-lab { flex: none; width: 64px; font-size: var(--fs0); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.rb-code { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: .12em; color: var(--gold-hi); line-height: 1; }
.rb-link { flex: 1 1 auto; min-width: 0; font-size: var(--fs0); color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-copy { flex: none; }
.rb-share { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.rb-share .btn { text-decoration: none; }
.ref-how { display: flex; flex-direction: column; gap: 6px; }
.rh-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: var(--r-s);
  background: var(--card); border: 1px solid var(--card-line); font-size: var(--fs1); line-height: 1.4; }
.rh-row > .ui-ico { flex: none; margin-top: 1px; }
.ref-tier { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-s);
  background: var(--card); border: 1px solid var(--card-line); margin-top: 10px; }
.rt-top { display: flex; align-items: center; gap: 10px; }
.rt-top > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rt-top em { font-style: normal; font-size: var(--fs0); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.rt-top b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.05; color: var(--gold-hi); }
.rt-rate { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-weight: 800; font-size: var(--fs0); }
.rt-bar { display: flex; }
.rt-next { font-size: var(--fs0); color: var(--muted); }
.rt-stats { display: flex; gap: 8px; }
.rt-stats > span { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px;
  border-radius: var(--r-s); background: rgba(0, 0, 0, .22); font-size: var(--fs0); color: var(--muted); }
.rt-stats b { font-size: var(--fs2); color: var(--ink); font-variant-numeric: tabular-nums; }
.ref-ms .lrow, .ref-tiers .lrow { padding: 8px 11px; }
.ref-ms .q-reward { font-size: var(--fs1); }
.ref-friend { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--card-line); }
.ref-friend:last-child { border-bottom: 0; }
.rf-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.ref-friend.active .rf-av { border-color: rgba(111, 208, 140, .6); box-shadow: 0 0 8px rgba(111, 208, 140, .25); }
.rf-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rf-body b { font-size: var(--fs1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-body > span { font-size: var(--fs0); color: var(--muted); }
.rf-earn { flex: none; }
.ref-pips { display: inline-flex; gap: 3px; }
.ref-pips i { width: 12px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.ref-pips i.on { background: var(--gold); box-shadow: 0 0 5px rgba(246, 196, 83, .5); }

/* ---- v6.1 · Sosyal Görevler (the wall) ------------------------------------------
   Cards grouped by network; the network icon carries the colour so the wall
   reads as six doors, not sixty words. The button is the card's only verb. */
.soc-card { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-s);
  background: var(--card); border: 1px solid var(--card-line); }
.soc-card.done { opacity: .6; }
.sc-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.soc-card.net-x .sc-ico { border-color: #4a4a4f; }
.soc-card.net-telegram .sc-ico { border-color: rgba(74, 163, 255, .5); }
.soc-card.net-discord .sc-ico { border-color: rgba(176, 111, 255, .5); }
.soc-card.net-youtube .sc-ico { border-color: rgba(242, 92, 105, .5); }
.soc-card.net-instagram .sc-ico { border-color: rgba(255, 99, 146, .5); }
.soc-card.net-tiktok .sc-ico { border-color: rgba(207, 214, 223, .4); }
.sc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-title { font-size: var(--fs1); line-height: 1.3; }
.sc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.q-tag.muted { color: var(--muted); }
.sc-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sc-right .q-reward { font-size: var(--fs1); }
.sc-act { display: flex; gap: 6px; align-items: center; }
.sc-act .btn.small { min-height: 34px; padding: 6px 11px; }
.soc-input { width: 100%; margin-top: 10px; padding: 11px 12px; border-radius: var(--r-s); font-size: var(--fs2);
  background: var(--bg1); border: 1px solid var(--line); color: var(--ink); outline: none; }
.soc-input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(246, 196, 83, .25); }
.soc-ads { align-self: flex-start; }
@media (max-width: 520px) {
  .ref-hero { flex-direction: column; align-items: stretch; }
  .rh-act .btn { width: 100%; }
  .rb-lab { width: 52px; }
  .soc-card { flex-wrap: wrap; }
  .sc-right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

/* the carousel's invite card (art: tools/make-card-art.mjs · cardInvite) */
.car-card.invite { --cardbg: #1e3a2e; background-color: #1e3a2e; background-image: url(../assets/img/px/card/card-invite.png?v=6.9.0); }
.car-card.invite .cc-kick { background: linear-gradient(#a8f0c4, var(--good)); }

/* ---- v6.2 · Bonuslar (the bonus page) --------------------------------------
   One page, read top-down: the multiplier (hero), what it is made of (chips),
   one card per source with its next step and its door, the timed effects, then
   the deposit procedure (address → signature → verify), the two ladders and
   the deposit history. The deposit card is the biggest source and wears the
   gold; every other tone is borrowed from the door it leads to. */
.bn-hero { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-m);
  background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--e1); }
.bn-hero.has { background: linear-gradient(120deg, rgba(246, 196, 83, .18), rgba(255, 143, 58, .06) 55%, rgba(246, 196, 83, .03));
  border-color: rgba(246, 196, 83, .45); box-shadow: var(--e1), var(--glow-gold); }
.bh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bh-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bh-left em { font-style: normal; font-size: var(--fs0); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.bh-big { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 400; font-size: 44px;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.bn-hero:not(.has) .bh-big { color: var(--ink-dim); text-shadow: none; }
.bh-sub { font-size: var(--fs0); color: var(--muted); }
.bh-right { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 100%; }
.bn-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; padding: 5px 9px;
  border-radius: var(--r-s); background: rgba(0, 0, 0, .26); border: 1px solid var(--line); }
.bn-chip i { font-style: normal; font-size: 10px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.bn-chip b { font-size: var(--fs1); font-variant-numeric: tabular-nums; color: var(--ink); }
.bn-chip.power b { color: var(--accent-hi); }
.bn-chip.deposit b { color: var(--gold-hi); }
.bn-chip.referral b { color: var(--good); }
.bn-chip.prestige b { color: #b39dfa; }
.bn-chip.live b { color: #7fe3f7; }
.bn-chip.bad b { color: var(--bad); }
.bn-chip.none { min-width: 0; }
.bh-note { font-size: var(--fs0); color: var(--ink-dim); line-height: 1.45; }

.bn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-bottom: 6px; }
.bn-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-m);
  background: var(--card); border: 1px solid var(--card-line); border-left: 4px solid var(--tone, var(--card-line)); box-shadow: var(--e1); }
.bn-card.tone-deposit  { --tone: var(--gold); grid-column: 1 / -1;
  background: linear-gradient(110deg, rgba(246, 196, 83, .14), var(--card) 60%); border-color: rgba(246, 196, 83, .4); }
.bn-card.tone-referral { --tone: var(--good); }
.bn-card.tone-power    { --tone: var(--accent); }
.bn-card.tone-temp     { --tone: #4aa3ff; }
.bn-card.tone-prestige { --tone: #b39dfa; }
.bc-top { display: flex; align-items: center; gap: 10px; }
.bc-top > .ui-ico { flex: none; }
.bc-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bc-name em { font-style: normal; font-size: 10px; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.bc-name b { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.05; }
.bc-pill { flex: none; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line);
  color: var(--ink-dim); font-weight: 800; font-size: var(--fs1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bn-card.has .bc-pill { background: var(--tone); color: #1d0f06; border-color: transparent; box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.bc-rank { font-size: var(--fs1); }
.bc-rank > span { color: var(--muted); }
.bc-rank b { color: var(--gold-hi); }
.bc-dim { color: var(--muted); font-size: var(--fs0); }
.bc-bar { display: flex; }
.bc-bar .pbar i { background: var(--tone, var(--gold)); }
.bc-next { font-size: var(--fs0); color: var(--ink-dim); line-height: 1.4; }
.bc-rule { margin: 0; font-size: var(--fs0); color: var(--muted); line-height: 1.45; }
.bc-act { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 2px; }

.bn-live { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-s);
  background: var(--card); border: 1px solid var(--card-line); margin-bottom: 6px; }
.bl-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.bn-live.on .bl-ico { border-color: rgba(127, 227, 247, .55); box-shadow: 0 0 8px rgba(127, 227, 247, .25); }
.bn-live.bad .bl-ico { border-color: rgba(242, 92, 105, .55); }
.bl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bl-body b { font-size: var(--fs1); }
.bl-body span { font-size: var(--fs0); color: var(--muted); line-height: 1.35; }
.bl-val { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: #7fe3f7; }
.bn-live.bad .bl-val { color: var(--bad); }

.bn-dep { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-s);
  background: var(--panel-2); border: 1px solid var(--line); }
.bd-step { display: flex; gap: 10px; align-items: flex-start; }
.bd-step > i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold); font-style: normal; font-weight: 800; font-size: var(--fs0); }
.bd-step > div { flex: 1 1 auto; min-width: 0; }
.bd-step p { margin: 2px 0 8px; font-size: var(--fs1); line-height: 1.4; }
.bd-addr { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.bd-lab { flex: none; font-size: var(--fs0); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.bd-code { flex: 1 1 160px; min-width: 0; padding: 7px 9px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line);
  font-size: var(--fs0); color: var(--gold-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-copy { flex: none; }
.bn-ladder .lrow { padding: 8px 11px; }
.bn-ladder .lrow.done .l-name { color: var(--ink); }
.bn-ladder .lrow:not(.done) .l-name { color: var(--ink-dim); }
.bn-ladder .l-pop { color: var(--gold-hi); font-weight: 800; font-variant-numeric: tabular-nums; }
.bn-hist .ocak-row b { display: inline-flex; align-items: center; gap: 4px; }

/* the HUD pill (index.html #ppBoost, painted by panels.js · paintOcak) */
.pp-boost { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line); color: var(--ink-dim);
  font-size: var(--fs0); font-weight: 800; font-variant-numeric: tabular-nums; position: relative; }
.pp-boost::after { content: ''; position: absolute; inset: -8px -4px; }
.pp-boost.up { background: linear-gradient(var(--gold-hi), var(--gold)); border-color: var(--gold-deep); color: var(--on-gold);
  box-shadow: 0 0 10px rgba(246, 196, 83, .35); }
.pp-boost.up .ui-ico { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .3)); }

/* the carousel's bonus card (art: tools/make-card-art.mjs · cardBonus) */
.car-card.bonus { --cardbg: #4a2a10; background-color: #4a2a10; background-image: url(../assets/img/px/card/card-bonus.png?v=6.9.0); }
.car-card.bonus .cc-kick { background: linear-gradient(var(--gold-hi), var(--gold)); }