/* =============================================================================
   Autumn Event 1.2 — Mini App
   Visual language: "Cozy Autumn Clay World"
   -----------------------------------------------------------------------------
   * ONE living environment (sky, hills, distant forest, ground, drifting leaves)
     instead of a dark dashboard.
   * The Community Tree is the hero gameplay object and stands IN that world.
   * Surfaces are soft "clay": rounded, layered, glossy, with a physical press.
   * The season (data-season) shifts the environment from summer green to deep
     autumn gold as the Community Tree grows.
   * Mobile first: 360x640 is the design target.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- deep ink -------------------------------------------------------- */
  /* Contrast on --clay (#fffaf1): --ink 12.6:1, --ink-2 7.4:1,
     --ink-3 4.6:1, --ink-4 5.5:1. Secondary text stays readable outdoors. */
  --ink: #3d2a17;
  --ink-2: #6b5136;
  --ink-3: #8a6f4d;
  --ink-4: #7a6244;

  /* --- clay surfaces ---------------------------------------------------- */
  --clay: #fffaf1;
  --clay-2: #fdf1de;
  --clay-3: #f6e3c6;
  --clay-edge: rgba(160, 118, 66, 0.22);
  --clay-shadow: rgba(84, 54, 22, 0.22);

  /* --- brand ------------------------------------------------------------ */
  --amber: #e08a1e;
  --amber-deep: #c16a0d;
  --gold: #f6bd3b;
  --gold-pale: #ffe3a3;
  --leaf: #5da34a;
  --leaf-deep: #3c7a33;
  --rust: #d1582a;
  --berry: #c0392b;

  /* --- light theme body ------------------------------------------------- */
  --page: #e9dcc4;

  /* --- world (overridden per season below) ------------------------------ */
  --sky-1: #93b6d6;
  --sky-2: #bcd2e2;
  --sky-3: #dfdcc8;
  --sky-4: #f2e2c2;
  --sun: #fff2c8;
  --hill-far: #9db98f;
  --hill-near: #82a86f;
  --forest-far: #6f9664;
  --forest-near: #55794c;
  --ground-1: #a8c47f;
  --ground-2: #86a95f;
  --ground-3: #d9c294;
  --floor-1: #9cbb74;
  --floor-2: #7fa257;
  --grass-1: #6f9b4d;
  --grass-2: #56813b;

  /* --- geometry ---------------------------------------------------------- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* --- pressable --------------------------------------------------------- */
  --press: 0 4px 0;
  --lift: 0 10px 22px rgba(74, 45, 14, 0.22), 0 2px 6px rgba(74, 45, 14, 0.16);

  --hud-h: 46px;

  /* ------------------------------------------------------------------ */
  /* VIEWPORT — the single canonical height owner.                         */
  /* --app-height is published by app.js updateTelegramViewport() from the */
  /* REAL Telegram viewport (tg.viewportStableHeight) or window.innerHeight. */
  /* We never subtract an assumed Telegram header height: the Telegram     */
  /* WebView is already sized to the area BELOW its native header, so doing */
  /* that would double-count it.                                             */
  /* 100vh is only a pre-JS fallback; 100dvh is better where supported.      */
  --app-height: 100vh;
  /* Telegram's own reported insets (0 unless we run inside Telegram). CSS */
  /* env() already covers the notch / home indicator, so we take the max.   */
  --tg-safe-t: 0px;
  --tg-safe-b: 0px;
  --safe-t: max(env(safe-area-inset-top, 0px), var(--tg-safe-t));
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-b));

  /* --- reusable local vector artwork (inline data URIs, no external files) */
  /* Distant treeline: rendered as a mask so its colour follows the season. */
  --treeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 100' preserveAspectRatio='none'%3E%3Cg fill='black'%3E%3Cpath d='M14 100 L14 66 L21 66 L21 100 Z'/%3E%3Ccircle cx='17' cy='50' r='17'/%3E%3Ccircle cx='3' cy='64' r='12'/%3E%3Ccircle cx='31' cy='64' r='12'/%3E%3Ccircle cx='17' cy='36' r='12'/%3E%3Cpath d='M52 6 L74 46 L62 46 L82 100 L22 100 L42 46 L30 46 Z'/%3E%3Cpath d='M92 100 L92 74 L98 74 L98 100 Z'/%3E%3Ccircle cx='95' cy='60' r='13'/%3E%3Ccircle cx='83' cy='72' r='9'/%3E%3Ccircle cx='104' cy='72' r='9'/%3E%3C/g%3E%3C/svg%3E");
  /* A single clump of grass, used at the base of the tree. */
  --tuft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17' preserveAspectRatio='xMidYMax meet'%3E%3Cg fill='black'%3E%3Cpath d='M1 17 C2 10 3 6 5 1 C5 8 6 13 7 17 Z'/%3E%3Cpath d='M8 17 C8 9 10 4 12 0 C10 7 11 12 11.5 17 Z'/%3E%3Cpath d='M13 17 C14 10 17 5 20 2 C17 7 16 12 16.5 17 Z'/%3E%3Cpath d='M19 17 C20 12 22 9 23 6 C22 11 22 14 22.5 17 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Dynamic viewport units are the correct pre-JS fallback: 100vh on iOS Safari
   / Telegram WebView includes the collapsing toolbar area and would overflow. */
@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

/* --- seasons: the world warms up as the Community Tree grows -------------- */
[data-season="summer"] {
  --sky-1: #8fb6d8;
  --sky-2: #bad3e3;
  --sky-3: #dfe3cb;
  --sky-4: #f1e6c4;
  --hill-far: #9cba8e;
  --hill-near: #7fa86d;
  --forest-far: #6d9763;
  --forest-near: #4f7a4a;
  --ground-1: #a9c881;
  --ground-2: #86aa60;
  --ground-3: #dcc794;
  --floor-1: #9dbc76;
  --floor-2: #7ea458;
  --grass-1: #6d9a4c;
  --grass-2: #547f3a;
}

[data-season="early"] {
  --sky-1: #93b3cf;
  --sky-2: #bed0dc;
  --sky-3: #e4ddc2;
  --sky-4: #f3e2b8;
  --hill-far: #a8b882;
  --hill-near: #8fa765;
  --forest-far: #7b9159;
  --forest-near: #5f7746;
  --ground-1: #b3c079;
  --ground-2: #8fa45b;
  --ground-3: #e0c78d;
  --floor-1: #a6b76e;
  --floor-2: #8b9b52;
  --grass-1: #788f45;
  --grass-2: #5d7333;
}

[data-season="autumn"] {
  --sky-1: #8faec9;
  --sky-2: #c4d3dc;
  --sky-3: #f0e0be;
  --sky-4: #fbe0a6;
  --hill-far: #b7a878;
  --hill-near: #9c8b58;
  --forest-far: #96783f;
  --forest-near: #7a5f32;
  --ground-1: #c59b56;
  --ground-2: #a57d3e;
  --ground-3: #e8c682;
  --floor-1: #b8954e;
  --floor-2: #997437;
  --grass-1: #8f6c31;
  --grass-2: #6f5020;
}

[data-season="late"] {
  --sky-1: #8ca7c1;
  --sky-2: #c8d1d8;
  --sky-3: #edd6a6;
  --sky-4: #f9d588;
  --hill-far: #c39a62;
  --hill-near: #a67f45;
  --forest-far: #9a6231;
  --forest-near: #7c4a24;
  --ground-1: #cb8b3f;
  --ground-2: #a8642a;
  --ground-3: #efc47a;
  --floor-1: #bf7c32;
  --floor-2: #9e5d22;
  --grass-1: #9b5d23;
  --grass-2: #7a4317;
}

/* ------------------------------------------------------------------ base -- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--page);
  color: var(--ink);
  min-height: var(--app-height, 100dvh);
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  font-weight: 600;
}

#app-container {
  position: relative;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  min-height: var(--app-height, 100dvh);
}

.screen {
  display: none;
  position: relative;
  z-index: 1;
  padding: 8px 12px calc(10px + var(--safe-b));
}

.screen.active {
  display: block;
  /* Opacity only: a filling transform would make every screen a containing
     block for the position:fixed world backdrop behind it. */
  animation: screenIn 0.3s ease both;
}

@keyframes screenIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Game screens get their own soft cozy backdrop (no world layers needed). */
.screen-plain {
  min-height: var(--app-height, 100dvh);
  background:
    radial-gradient(120% 60% at 50% 0%, #fdf0d6 0%, rgba(253, 240, 214, 0) 60%),
    linear-gradient(180deg, #dfe6ea 0%, #f0e5cc 62%, #e2d0ab 100%);
}

/* ============================================================ HUB LAYOUT = */
/* The Hub is a fixed-height game screen, not a scrolling page: it is exactly
   one viewport tall and never scrolls (no rubber-band, no accidental drag).
   Vertical space is a flex budget — the tree absorbs whatever is left, so a
   shorter viewport (Telegram's native header eats into it) shrinks the hero
   instead of pushing the primary action below the fold.                    */
.screen-world {
  padding: 6px 12px calc(6px + var(--safe-b));
  overflow: hidden;
  overscroll-behavior: none;
}

.screen-world.active {
  display: flex;
  flex-direction: column;
  height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
}

/* ============================================================== THE WORLD == */
/* Distance layers only. Fixed, so the environment never scrolls away.      */
.world {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--app-height, 100dvh);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.world > * {
  position: absolute;
  left: 0;
  right: 0;
}

/* --- sky --------------------------------------------------------------- */
.world-sky {
  top: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    var(--sky-1) 0%,
    var(--sky-2) 34%,
    var(--sky-3) 55%,
    var(--sky-4) 66%,
    var(--sky-4) 100%
  );
}

/* --- warm sun glow, top right ------------------------------------------ */
.world-sun {
  top: -6vh;
  right: -14vw;
  width: 68vw;
  height: 68vw;
  bottom: auto;
  left: auto;
  background: radial-gradient(
    circle at 50% 50%,
    var(--sun) 0%,
    rgba(255, 240, 200, 0.5) 34%,
    rgba(255, 240, 200, 0) 68%
  );
  opacity: 0.75;
  animation: sunBreath 11s ease-in-out infinite;
}

@keyframes sunBreath {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 0.82; }
}

/* --- soft cartoon clouds -------------------------------------------------
   Soft rounded shapes with subtle multi-puff contours, drifting at soothing
   slow speeds without competing with the Hero Tree. */
.world-cloud {
  position: absolute;
  pointer-events: none;
  border-radius: 50px;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(255, 248, 235, 0.36) 55%,
    rgba(255, 248, 235, 0) 75%
  );
  filter: blur(2.5px);
}

.world-cloud-1 {
  top: 6vh;
  left: -8vw;
  width: 52vw;
  height: 9vh;
  opacity: 0.42;
  animation: cloudDrift1 140s linear infinite;
}

.world-cloud-2 {
  top: 14vh;
  left: 45vw;
  width: 42vw;
  height: 7.5vh;
  opacity: 0.32;
  animation: cloudDrift2 180s linear infinite;
}

.world-cloud-3 {
  top: 10vh;
  left: 16vw;
  width: 36vw;
  height: 6.5vh;
  opacity: 0.28;
  animation: cloudDrift3 160s linear infinite reverse;
}

@keyframes cloudDrift1 {
  from { transform: translateX(-16vw); }
  to { transform: translateX(120vw); }
}

@keyframes cloudDrift2 {
  from { transform: translateX(-22vw); }
  to { transform: translateX(115vw); }
}

@keyframes cloudDrift3 {
  from { transform: translateX(-16vw); }
  to { transform: translateX(120vw); }
}

/* --- hills --------------------------------------------------------------
   Pushed back with blur + reduced opacity: they are scenery, not subject. */
.world-hill {
  bottom: 44vh;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: blur(16px);
  opacity: 0.55;
}

.world-hill-far {
  height: 26vh;
  bottom: 40vh;
  left: -30vw;
  right: -30vw;
  background: radial-gradient(
    52% 100% at 50% 100%,
    var(--hill-far) 0%,
    var(--hill-far) 62%,
    rgba(0, 0, 0, 0) 64%
  );
}

.world-hill-near {
  height: 20vh;
  bottom: 36vh;
  left: -24vw;
  right: -24vw;
  background: radial-gradient(
    48% 100% at 50% 100%,
    var(--hill-near) 0%,
    var(--hill-near) 64%,
    rgba(0, 0, 0, 0) 66%
  );
  opacity: 0.68;
  filter: blur(9px);
}

/* --- distant forest: recolourable SVG mask, so seasons work --------------
   Softened rather than removed: the treeline still gives the valley its
   autumn silhouette, but it now sits clearly behind the hero tree. */
.world-forest {
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  filter: blur(2.6px);
}

.world-forest-far {
  height: 15vh;
  bottom: 41vh;
  background: var(--forest-far);
  opacity: 0.34;
  -webkit-mask-image: var(--treeline);
  mask-image: var(--treeline);
  -webkit-mask-size: 104px 15vh;
  mask-size: 104px 15vh;
}

.world-forest-near {
  height: 12vh;
  bottom: 38vh;
  background: var(--forest-near);
  opacity: 0.5;
  -webkit-mask-image: var(--treeline);
  mask-image: var(--treeline);
  -webkit-mask-size: 78px 12vh;
  mask-size: 78px 12vh;
  filter: blur(1.4px);
}

/* --- the floor of the valley ------------------------------------------- */
.world-ground {
  top: 56vh;
  bottom: 0;
  background: linear-gradient(
    180deg,
    var(--ground-1) 0%,
    var(--ground-2) 14%,
    var(--ground-3) 58%,
    var(--ground-3) 100%
  );
}

/* soft haze right at the horizon = depth of field.
   Kept thin on purpose — a thick band would grey out the tree's trunk. */
.world-mist {
  top: 51vh;
  height: 11vh;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 238, 0) 0%,
    rgba(255, 250, 238, 0.34) 55%,
    rgba(255, 250, 238, 0) 100%
  );
  filter: blur(5px);
}

/* --- ambient drifting leaves (count is driven by data-season) ------------
   Purely ambient, so each one is small, faint and slow. They never drift
   across the face of the tree for long. */
.world-leaves {
  top: 24vh;
  height: 62vh;
}

.world-leaves i {
  position: absolute;
  display: block;
  width: 7px;
  height: 5px;
  border-radius: 70% 30% 65% 35% / 60% 55% 45% 40%;
  background: var(--gold);
  opacity: 0;
  box-shadow: 0 1px 2px rgba(80, 50, 10, 0.22);
  animation: worldLeaf var(--dur, 20s) linear var(--delay, 0s) infinite;
}

.world-leaves i:nth-child(3n) { background: var(--rust); }
.world-leaves i:nth-child(4n) { background: var(--leaf); width: 6px; height: 5px; }

@keyframes worldLeaf {
  0% { transform: translate3d(0, -14vh, 0) rotate(0deg); opacity: 0; }
  14% { opacity: 0.44; }
  85% { opacity: 0.3; }
  100% { transform: translate3d(-16vw, 82vh, 0) rotate(540deg); opacity: 0; }
}

/* Seasonal density. The DOM always holds the same 16 deterministic leaves
   (with negative delays so they start mid-flight); only how many are on
   screen changes. Autumn 1.2 runs "late", and even then only a handful are
   visible — enough to feel alive, few enough to stay out of the way. */
[data-season="summer"] .world-leaves i:nth-child(n + 3) { display: none; }
[data-season="early"] .world-leaves i:nth-child(n + 5) { display: none; }
[data-season="autumn"] .world-leaves i:nth-child(n + 8) { display: none; }
[data-season="late"] .world-leaves i:nth-child(n + 11) { display: none; }

/* ================================================================== HUD === */
/* --- top bar ------------------------------------------------------------- */
/* ================================================================== HUD === */
/* --- compact 1-row game bar ----------------------------------------------- */
.hud-top {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  min-height: 36px;
  padding: 2px 0 4px;
}

.hud-round {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 227, 198, 0.88));
  box-shadow:
    0 2px 0 rgba(122, 88, 44, 0.32),
    0 5px 12px rgba(74, 45, 14, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}

.hud-round:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 rgba(122, 88, 44, 0),
    0 2px 5px rgba(74, 45, 14, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hud-shop-svg {
  display: block;
  margin: auto;
  filter: drop-shadow(0 1px 1.5px rgba(120, 50, 0, 0.35));
}

/* --- player identity: lives in the HUD, never in a bottom profile card --- */
.hud-me {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 6px 0 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 227, 198, 0.85));
  box-shadow:
    0 2px 0 rgba(122, 88, 44, 0.25),
    0 4px 10px rgba(74, 45, 14, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hud-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff8ea;
  background: linear-gradient(180deg, #d9a15e, #a9702f);
  box-shadow: 0 2px 0 rgba(122, 88, 44, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hud-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hud-avatar-img[hidden] { display: none; }

/* Fallback is only painted when there is no usable photo. */
.hud-avatar.has-photo .hud-avatar-fb { display: none; }

.hud-me-text {
  display: flex;
  align-items: center;
  max-width: 70px;
  overflow: hidden;
}

.hud-me-lvl {
  display: none !important;
}

.hud-me-name {
  display: inline-block;
  max-width: 65px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px 0 1px;
}

.hud-day {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: rgba(255, 250, 241, 0.8);
  border: 1px solid var(--clay-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hud-day b { font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.hud-preview-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: #fef08a;
  border: 1px solid #eab308;
  color: #854d0e;
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Merged compact resource pill: [ ⚡ 18.6k | 🍁 10 ] */
.hud-res-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 227, 198, 0.86));
  border: 1px solid var(--clay-edge);
  box-shadow: 0 2px 0 rgba(122, 88, 44, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
}

.res-sub-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.res-ico-micro {
  font-size: 0.72rem;
  line-height: 1;
}

.res-sub-item.res-xp b {
  color: var(--amber-deep);
}

.res-sub-item.res-leaf b {
  color: var(--rust);
}

.res-pill-sep {
  width: 1px;
  height: 12px;
  background: rgba(140, 95, 45, 0.25);
}

.hud-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.hud-brand-ico { font-size: 0.8rem; }
.hud-brand-name {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff8ea;
  text-shadow: 0 1px 2px rgba(70, 40, 10, 0.55);
}

/* Event identity: a small label floating over the sky. It is deliberately NOT
   a 50-60px website-style heading row — it costs the layout zero height. */
.scene-brand {
  position: absolute;
  z-index: 4;
  top: calc(var(--hud-h) + 1px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(74, 46, 18, 0.5), rgba(58, 36, 14, 0.42));
  border: 1px solid rgba(255, 244, 224, 0.32);
  box-shadow: 0 2px 8px rgba(50, 30, 8, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}

/* --- floating side orbs: same shape, same depth, same typography ---------- */
.hud-dock {
  position: absolute;
  z-index: 3;
  top: calc(var(--hud-h) + 28px);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.hud-dock-left { left: 12px; }
.hud-dock-right { right: 12px; align-items: center; }

.hud-orb {
  position: relative;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(243, 221, 189, 0.84));
  box-shadow:
    0 3px 0 rgba(122, 88, 44, 0.3),
    0 6px 14px rgba(74, 45, 14, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.hud-orb-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}

/* Micro-label: instant recognition without turning the orb into a button.
   overflow stays visible so the caption can extend past the 42px circle. */
.hud-orb-cap {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  color: #4a3419;
  text-shadow:
    0 1px 0 rgba(255, 252, 244, 0.9),
    0 0 4px rgba(255, 250, 238, 0.85);
  pointer-events: none;
}

.hud-orb:active {
  transform: translateY(3px) scale(0.96);
  box-shadow: 0 1px 0 rgba(122, 88, 44, 0.3), 0 2px 6px rgba(74, 45, 14, 0.18);
}

.hud-orb-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #e8703a, #c0392b);
  box-shadow: 0 2px 5px rgba(120, 40, 15, 0.4);
}

.hud-orb-badge[hidden] { display: none; }

/* ================================================================ SCENE === */
/* The scene owns all leftover vertical space, so the tree stays the hero on a
   tall phone and gracefully shrinks when Telegram's native header leaves less
   room. It never pushes the primary action below the fold.                 */
.scene {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 2px 0 0;
  padding: 0 10px;
}

/* warm halo behind the crown — sells the "living world" depth */
.scene-sky-glow {
  position: absolute;
  top: 2%;
  left: 50%;
  width: 84%;
  height: 72%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 246, 214, 0.52) 0%,
    rgba(255, 246, 214, 0) 70%
  );
  pointer-events: none;
}

/* --- floating collectible reward marker above the crown ----------------- */
.hero-reward {
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

.reward-token {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rewardFloat 3.6s ease-in-out infinite;
}

.reward-token-svg {
  display: block;
}

.reward-sparkle {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.72rem;
  line-height: 1;
  color: #ffe066;
  animation: sparkleTwinkle 2.2s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255, 224, 102, 0.85);
}

@keyframes rewardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15) rotate(15deg); }
}

/* --- the hero: the Community Tree --------------------------------------- */
.scene-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  /* Dominant hero stage with enlarged tree */
  max-height: 56vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.community-tree {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.community-tree .ct-svg {
  width: min(96vw, 56vh);
  height: auto;
  max-height: 100%;
  overflow: visible;
  filter: drop-shadow(0 8px 16px rgba(60, 38, 12, 0.34));
}

.community-tree .ct-sway {
  transform-origin: 50% 94%;
  animation: ctSway 5.5s ease-in-out infinite;
}

@keyframes ctSway {
  0%, 100% { transform: rotate(-0.7deg); }
  50% { transform: rotate(0.7deg); }
}

.community-tree .ct-falling-leaf {
  animation-name: ctLeafFall;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

@keyframes ctLeafFall {
  0% { transform: translateY(-6px) rotate(0deg); opacity: 0; }
  12% { opacity: 0.85; }
  100% { transform: translateY(74px) rotate(300deg); opacity: 0; }
}

/* --- local floor the tree actually stands on ---------------------------- */
/* Trunk base sits at GROUND_Y = 126 in 138-height viewBox: (138 - 126) / 138 = 8.695% */
.scene-floor {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 8.70%;
  width: min(320px, 98%);
  height: 60px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* contact shadow directly under the trunk */
.scene-shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 74px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(48, 32, 10, 0.42), rgba(48, 32, 10, 0) 72%);
  filter: blur(2px);
}

/* the grassy mound the tree grows out of */
.scene-mound {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 268px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    58% 100% at 50% 34%,
    var(--floor-1) 0%,
    var(--floor-2) 66%,
    rgba(0, 0, 0, 0) 78%
  );
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.24);
}

.scene-grass {
  position: absolute;
  bottom: 0;
  width: 26px;
  height: 17px;
  background: var(--grass-1);
  -webkit-mask-image: var(--tuft);
  mask-image: var(--tuft);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  filter: drop-shadow(0 2px 2px rgba(40, 60, 20, 0.25));
}

.scene-grass-l { left: 46px; transform: scale(0.9) rotate(-6deg); }
.scene-grass-r { right: 52px; transform: scale(1.05) rotate(5deg); background: var(--grass-2); }

.scene-pebble {
  position: absolute;
  bottom: 1px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e0d5bd, #ab9d80);
  box-shadow: 0 1px 2px rgba(60, 45, 20, 0.3);
}

.scene-pebble-1 { left: 26px; width: 11px; height: 7px; }
.scene-pebble-2 { right: 22px; width: 8px; height: 5px; }

/* --- stage plaque: hidden per visual redesign ---------------------------- */
.scene-plaque {
  display: none !important;
}

.plaque-sign {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #7c4f24 0%, #593514 100%);
  border: 1px solid rgba(255, 230, 185, 0.35);
  box-shadow:
    0 2px 0 #3e220a,
    0 5px 12px rgba(40, 20, 5, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: #fff8ea;
  text-shadow: 0 1px 2px rgba(30, 15, 5, 0.6);
}

.plaque-lvl {
  font-size: 0.68rem;
  font-weight: 800;
  color: #ffd27d;
  letter-spacing: 0.04em;
}

.chip-dot {
  font-size: 0.62rem;
  color: #ffd27d;
  opacity: 0.75;
}

.plaque-name {
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff8ea;
}

.scene-stage-name {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 8px rgba(255, 250, 238, 0.7);
}

.scene-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 17px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.3;
  color: #fff8ea;
  background: linear-gradient(180deg, var(--gold), var(--amber));
  box-shadow: 0 2px 0 rgba(122, 88, 44, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.chip-preview {
  color: #fff4f0;
  background: linear-gradient(180deg, #e8703a, #c0392b);
  letter-spacing: 0.08em;
}

/* ================================================================= DECK === */
/* --- progress meter: gameplay, not an info card -------------------------- */
/* Light glass that lets the world show through, sitting directly on the
   tree's ground line so the bar reads as part of the scene.               */
.deck {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clay {
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--clay) 0%, var(--clay-2) 100%);
  border: 1px solid var(--clay-edge);
  box-shadow: var(--lift), inset 0 2px 0 rgba(255, 255, 255, 0.75);
}

.meter {
  padding: 4px 10px 5px;
  border-radius: var(--r-lg);
  /* translucent casual game clay-glass bar */
  background: linear-gradient(
    180deg,
    rgba(255, 251, 243, 0.86) 0%,
    rgba(250, 236, 211, 0.74) 100%
  );
  border: 1px solid var(--clay-edge);
  box-shadow:
    0 4px 12px rgba(74, 45, 14, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.meter.meter-tap {
  cursor: pointer;
  touch-action: manipulation;
}

.meter.meter-tap:active {
  transform: scale(0.994);
  box-shadow: 0 3px 8px rgba(74, 45, 14, 0.14);
}

.meter.meter-tap:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.meter-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meter-label-ico { font-size: 0.82rem; line-height: 1; }

.meter-stats {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.meter-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--amber-deep);
  background: rgba(246, 189, 59, 0.16);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(220, 130, 20, 0.22);
}

.meter-xp-badge b { font-weight: 800; color: var(--amber-deep); }
.meter-xp-badge small { font-size: 0.52rem; font-weight: 800; opacity: 0.85; }

.meter-pct {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--amber-deep);
  letter-spacing: -0.01em;
}

.meter-pct b { font-weight: 800; }
.meter-pct small {
  font-size: 0.64rem;
  font-weight: 800;
  opacity: 0.75;
}

.meter-track-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.meter-track {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  margin: 0 8px 0 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #e4d3b4, #d4be98);
  box-shadow: inset 0 1.5px 3px rgba(97, 68, 30, 0.32);
  overflow: visible;
}

.meter-endpoint-gift {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(122, 60, 10, 0.3));
  animation: giftWiggle 3.5s ease-in-out infinite;
  cursor: pointer;
}

.meter-endpoint-gift.is-celebrating {
  animation: giftCelebrate 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3 alternate;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.85));
}

@keyframes giftCelebrate {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.3) rotate(-12deg); }
  50% { transform: scale(1.35) rotate(12deg); }
  75% { transform: scale(1.25) rotate(-6deg); }
  100% { transform: scale(1.2) rotate(0deg); }
}

@keyframes giftWiggle {
  0%, 86%, 100% { transform: rotate(0deg) scale(1); }
  89% { transform: rotate(-8deg) scale(1.12); }
  93% { transform: rotate(8deg) scale(1.12); }
  97% { transform: rotate(-3deg) scale(1.06); }
}

.meter-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold) 40%, var(--amber) 100%);
  box-shadow:
    inset 0 -1px 0 rgba(150, 85, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 4px rgba(180, 110, 20, 0.35);
  transition: width 900ms cubic-bezier(0.16, 0.8, 0.24, 1);
  overflow: hidden;
  will-change: width;
}

.meter-fill.is-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: meterShimmer 1.1s ease-out forwards;
}

.meter-fill::after {
  content: "";
  position: absolute;
  inset: 1px 2px auto 2px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}

.meter-gloss {
  position: absolute;
  top: 1px;
  left: 2px;
  right: 2px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.meter-marker {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  font-size: 0.78rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(90, 55, 10, 0.4));
  transition: left 900ms cubic-bezier(0.16, 0.8, 0.24, 1);
  pointer-events: none;
  z-index: 3;
}

/* --- milestone gates: progression ON the progress track ------------------ */
.milestone-gates {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ms-gate {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  padding: 0;
  left: calc(100% * var(--ms-pos, 0));
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.52rem;
  line-height: 1;
  background: linear-gradient(180deg, #cdb894, #a58d63);
  box-shadow:
    0 1px 0 rgba(90, 65, 28, 0.45),
    0 2px 4px rgba(74, 45, 14, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.ms-gate-ico {
  filter: grayscale(0.7) brightness(0.72) contrast(0.9);
}

.ms-gate.locked .ms-gate-ico { opacity: 0.85; }

.ms-gate.unlocked {
  background: linear-gradient(180deg, #ffe9a8, #f0ad2a);
  box-shadow:
    0 0 0 1.5px rgba(255, 244, 214, 0.9),
    0 0 8px 2px rgba(240, 173, 42, 0.75),
    0 2px 4px rgba(150, 90, 10, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  animation: msGateGlow 1.7s ease-in-out infinite;
}

.ms-gate.unlocked .ms-gate-ico { filter: none; }

.ms-gate.claimed {
  background: linear-gradient(180deg, #9ed07e, #4f8238);
  box-shadow:
    0 0 0 1.5px rgba(236, 248, 228, 0.9),
    0 1px 0 rgba(60, 110, 40, 0.45),
    0 2px 4px rgba(60, 110, 40, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ms-gate.claimed .ms-gate-ico { filter: none; }

.ms-gate:active { transform: translate(-50%, -50%) scale(0.9); }

/* --- legacy resource capsules fallback (if referenced) ------------------- */
.resources {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.res {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: var(--r-md);
}

.res-ico {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.88rem;
  background: linear-gradient(180deg, #fff2cd, #ffd97a);
  box-shadow: 0 2px 0 rgba(122, 88, 44, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.clay-res-leaf .res-ico {
  background: linear-gradient(180deg, #ffd9b0, #f0a35c);
}

.res-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.res-body b {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ink);
}

.res-body i {
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ============================================================ MAIN CTA === */
/* Exactly ONE dominant action on the Hub: tactile casual game button.       */
.cta {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 44px;
  height: 44px;
  margin-top: 5px;
  padding: 4px 16px 3px;
  border: none;
  border-radius: var(--r-xl);
  cursor: pointer;
  font-family: inherit;
  color: #fff8ea;
  background:
    radial-gradient(90% 130% at 50% -18%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, #f8c452 0%, #f0a52a 30%, #e0811a 62%, #bf6a0c 100%);
  box-shadow:
    0 4px 0 var(--amber-deep),
    0 10px 20px rgba(150, 82, 8, 0.30),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cta:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 var(--amber-deep),
    0 3px 8px rgba(150, 82, 8, 0.28),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
}

.cta-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-gamepad-svg {
  display: block;
  filter: drop-shadow(0 1.5px 2px rgba(120, 60, 0, 0.45));
}

.cta-label {
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(120, 60, 0, 0.45);
}

.cta-sub {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.92;
  color: #fff4dc;
  line-height: 1.1;
}

.cta.is-done {
  background:
    radial-gradient(90% 130% at 50% -18%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, #9ed07e 0%, #6ba24c 52%, #4f8238 100%);
  box-shadow:
    0 4px 0 #457333,
    0 10px 20px rgba(60, 110, 40, 0.28),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
}

/* ============================================================ GAME DOCK == */
/* The three mini-games as a compact horizontal game-mode rail.              */
.dock {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.26fr 1fr;
  align-items: end;
  gap: 5px;
  margin-top: auto;
  padding-top: 5px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 5px 3px;
  border: 1px solid var(--clay-edge);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  background: linear-gradient(180deg, var(--clay) 0%, var(--clay-2) 100%);
  box-shadow: var(--lift), inset 0 1.5px 0 rgba(255, 255, 255, 0.75);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  min-width: 0;
  overflow: hidden;
  height: 60px;
}

.tile:active {
  transform: translateY(2px);
  box-shadow: 0 2px 5px rgba(74, 45, 14, 0.18), inset 0 1.5px 0 rgba(255, 255, 255, 0.75);
}

/* Center Grammar Rush: 15-20% larger vibrant hero card */
.tile.tile-hero {
  height: 72px;
  padding: 6px 3px 5px;
  border-radius: calc(var(--r-md) + 2px);
  background: linear-gradient(180deg, #fffbf0 0%, #ffeed1 45%, #fed7aa 100%);
  border: 1.5px solid rgba(234, 88, 12, 0.45);
  box-shadow: 0 3px 0 rgba(194, 65, 12, 0.38), 0 6px 14px rgba(234, 88, 12, 0.22), inset 0 1.5px 0 #ffffff;
  transform: translateY(-2px);
}

.tile.tile-hero:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(194, 65, 12, 0.38), 0 3px 6px rgba(234, 88, 12, 0.22), inset 0 1.5px 0 #ffffff;
}

.tile.tile-hero .tile-orb {
  width: 22px;
  height: 22px;
  font-size: 0.82rem;
}

.tile.tile-hero .tile-name {
  font-size: 0.62rem;
  font-weight: 900;
  color: #7c2d12;
}

.tile.tile-hero .tile-xp {
  font-size: 0.50rem;
  font-weight: 800;
  color: #c2410c;
}

.tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 2px;
  padding: 0 2px;
}

.tile-orb {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.74rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #7fc4e8, #3f8fc0);
  box-shadow:
    0 1.5px 0 rgba(40, 90, 120, 0.45),
    0 3px 6px rgba(40, 90, 120, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tile-orb-mm {
  background: linear-gradient(180deg, #c3a4e8, #8a63c4);
  box-shadow: 0 1.5px 0 rgba(85, 55, 125, 0.45), 0 3px 6px rgba(85, 55, 125, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tile-orb-gr {
  background: linear-gradient(180deg, #f7cf62, #e79a1c);
  box-shadow: 0 1.5px 0 rgba(140, 85, 10, 0.45), 0 3px 6px rgba(140, 85, 10, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tile-badge {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  font-size: 0.50rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-pale), var(--gold));
  box-shadow: 0 1px 0 var(--amber-deep), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.tile-badge-rush {
  background: linear-gradient(180deg, #ffe1a6, #f39c12);
  color: #5c3505;
}

.tile-name {
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.tile-xp {
  font-size: 0.48rem;
  font-weight: 800;
  color: var(--leaf-deep);
  white-space: nowrap;
}

.tile.is-done {
  background: linear-gradient(180deg, #f2f8ea 0%, #e2eed4 100%);
  border-color: rgba(93, 163, 74, 0.35);
}

.tile.is-done .tile-badge {
  color: #1e4510;
  padding: 1px 5px;
  background: linear-gradient(180deg, #c4eeb0, #8fd96c);
  box-shadow: 0 1px 0 rgba(70, 130, 45, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.tile.is-done .tile-xp {
  color: var(--ink-3);
}

/* ============================================================= CATCH-UP == */
/* A compact one-line HUD notification next to the progress it feeds.      */
.catchup {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 7px;
  padding: 6px 12px;
  border: 1px solid rgba(209, 88, 42, 0.3);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  background: linear-gradient(180deg, #ffe6c6, #ffd0a0);
  box-shadow: 0 3px 0 rgba(180, 100, 30, 0.32), 0 6px 14px rgba(150, 82, 8, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.catchup:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(180, 100, 30, 0.32), 0 3px 8px rgba(150, 82, 8, 0.14); }

.catchup-ico { font-size: 1rem; }

.catchup-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.catchup-text b { font-size: 0.76rem; font-weight: 800; color: #6d3410; }
.catchup-text i { font-size: 0.6rem; font-style: normal; font-weight: 700; color: #8a4d1c; }

.catchup-count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #e8703a, #c0392b);
  box-shadow: 0 2px 5px rgba(120, 40, 15, 0.35);
}

#catch-up-banner.tut-preview {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================ MILESTONE DETAIL (sheet) == */
/* The track already shows WHERE each gate is; this sheet gives the full,
   untruncated detail plus the claim button (App.claimMilestone).          */
.ms-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}

.ms-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(160, 118, 66, 0.2);
  background: linear-gradient(180deg, #f1e6d1, #e6d7ba);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ms-row.unlocked {
  background: linear-gradient(180deg, #ffeec2, #ffdb92);
  border-color: rgba(224, 138, 30, 0.42);
  box-shadow: 0 3px 0 rgba(193, 106, 13, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ms-row.claimed {
  background: linear-gradient(180deg, #e2f2d8, #cfe6c1);
  border-color: rgba(93, 163, 74, 0.42);
}

.ms-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  background: rgba(255, 252, 244, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ms-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ms-body b {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.ms-body i {
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  color: var(--ink-2);
}

.ms-act { flex: 0 0 auto; }

.ms-state {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--ink-2);
  white-space: nowrap;
}

.ms-row.claimed .ms-state { color: #2f6b28; }

.milestone-claim-btn {
  width: 100%;
  padding: 5px 12px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  color: #fff8ea;
  background: linear-gradient(180deg, var(--gold), var(--amber));
  box-shadow: 0 2px 0 var(--amber-deep);
}

.milestone-claim-btn:active { transform: translateY(2px); box-shadow: none; }

/* ============================================================ MENU SHEET == */
/* Sheets are anchored to the REAL viewport bottom and keep their own scroll,
   with the iOS home-indicator inset respected. */
.sheet-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--app-height, 100dvh);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-wrap[hidden] { display: none; }

.sheet-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(46, 28, 10, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadeBg 0.22s ease both;
}

@keyframes fadeBg { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 84%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 16px calc(14px + var(--safe-b));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -12px 34px rgba(60, 38, 12, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.8);
  animation: sheetUp 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.sheet-grip {
  width: 42px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: var(--r-pill);
  background: rgba(160, 118, 66, 0.32);
}

.sheet-title {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.sheet-sub {
  margin: -6px 0 10px;
  text-align: center;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--ink-3);
}

.sheet-rows { display: flex; flex-direction: column; gap: 8px; }

.sheet-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--clay-edge);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  background: linear-gradient(180deg, var(--clay), var(--clay-2));
  box-shadow: 0 3px 0 rgba(122, 88, 44, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.sheet-row:active { transform: translateY(3px); box-shadow: none; }
.sheet-row span { font-size: 1.2rem; }
.sheet-row b { font-size: 0.88rem; font-weight: 800; color: var(--ink); }
.sheet-row i { margin-left: auto; font-size: 0.64rem; font-style: normal; font-weight: 700; color: var(--ink-3); }

/* ------------------------------------------------- test / preview controls */
.test-preview-box {
  margin-top: 14px;
  padding: 10px 12px;
  background: #fefce8;
  border: 1.5px dashed #eab308;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.test-preview-header {
  font-size: 0.7rem;
  font-weight: 800;
  color: #854d0e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.test-preview-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #713f12;
}
.test-select {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #ca8a04;
  background: #ffffff;
  color: #713f12;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
}
.test-reset-btn {
  margin-top: 4px;
  padding: 8px 10px;
  background: #fee2e2;
  border: 1px solid #f87171;
  color: #991b1b;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s, background-color 0.1s;
}
.test-reset-btn:active {
  transform: scale(0.98);
  background: #fecaca;
}

/* ------------------------------------------------- native BackButton ----- */
/* Inside real Telegram the native header owns navigation, so the in-app "‹"
   is hidden to avoid two identical back controls. Outside Telegram the class
   is never set, so local development keeps working.                       */
.tg-native-back .screen-header .hud-round { display: none; }
.tg-native-back .screen-header { gap: 0; }

/* ======================================================= SCREEN CHROME == */
.screen-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.screen-head-text { flex: 1 1 auto; min-width: 0; }

.screen-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.screen-sub {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ink-2);
}

.hint {
  padding: 10px 13px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-2);
  background: rgba(255, 250, 241, 0.8);
  border: 1px solid var(--clay-edge);
}

.field-label {
  margin: 14px 0 7px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  flex: 1 1 auto;
  padding: 13px 18px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff8ea;
  background: linear-gradient(180deg, #f0a52a, #d1760f);
  box-shadow: 0 5px 0 var(--amber-deep), 0 10px 18px rgba(150, 82, 8, 0.26), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--amber-deep), 0 4px 10px rgba(150, 82, 8, 0.22); }

.btn-ghost {
  color: var(--ink-2);
  background: linear-gradient(180deg, #f7ecd9, #eadabd);
  box-shadow: 0 5px 0 rgba(160, 118, 66, 0.45), 0 8px 14px rgba(90, 60, 20, 0.14), inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.btn-wide { width: 100%; margin-top: 16px; }

.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* --- prompt / question surfaces ------------------------------------------ */
.prompt { padding: 14px 16px 16px; }
.prompt-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  margin-bottom: 5px;
}
.prompt-text { font-size: 1.02rem; font-weight: 800; line-height: 1.35; color: var(--ink); }

/* --- sentence builder tokens --------------------------------------------- */
.answer-area {
  min-height: 58px;
  padding: 10px;
  border-radius: var(--r-md);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-content: flex-start;
  background: rgba(255, 250, 241, 0.6);
  border: 2px dashed rgba(160, 118, 66, 0.32);
  box-shadow: inset 0 2px 6px rgba(97, 68, 30, 0.12);
}

.answer-area.has-tokens {
  border-style: solid;
  border-color: rgba(224, 138, 30, 0.5);
  background: rgba(255, 248, 232, 0.85);
}

.word-bank { display: flex; flex-wrap: wrap; gap: 7px; }

.token-chip {
  padding: 8px 13px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, #fffaf1, #f2e3ca);
  border: 1px solid rgba(160, 118, 66, 0.22);
  box-shadow: 0 3px 0 rgba(122, 88, 44, 0.3), 0 5px 10px rgba(90, 60, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 90ms ease, box-shadow 90ms ease, opacity 90ms ease;
  touch-action: manipulation;
}

.token-chip:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

.token-chip.is-source {
  opacity: 0.4;
  transform: scale(0.98);
}

.token-chip.is-dragging {
  opacity: 0.6;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(74, 45, 14, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.token-chip.sb-ghost {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
  max-width: 80vw;
  white-space: nowrap;
  opacity: 0.92;
}

.sb-drop-ind {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--rust));
  box-shadow: 0 2px 6px rgba(122, 88, 44, 0.26);
}

.answer-area.is-dropping,
.word-bank.is-dropping {
  outline: 2px dashed rgba(224, 138, 30, 0.4);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

body.sb-dragging {
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

.token-chip:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

.token-chip.in-answer {
  color: #fff8ea;
  background: linear-gradient(180deg, #7fc4e8, #3f8fc0);
  border-color: rgba(40, 90, 120, 0.3);
  box-shadow: 0 3px 0 rgba(40, 90, 120, 0.5), 0 5px 10px rgba(40, 90, 120, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* --- memory match -------------------------------------------------------- */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.memory-card {
  aspect-ratio: 1 / 1.18;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  background: linear-gradient(180deg, #fffaf1, #f1e2c8);
  border: 1px solid rgba(160, 118, 66, 0.22);
  box-shadow: 0 4px 0 rgba(122, 88, 44, 0.3), 0 7px 14px rgba(90, 60, 20, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
}

.memory-card:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(122, 88, 44, 0.3); }

.memory-card.selected {
  background: linear-gradient(180deg, #ffe6b8, #f9c877);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 18px rgba(190, 120, 20, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.memory-card.matched {
  color: #2f5c26;
  background: linear-gradient(180deg, #dff0d2, #bfe0ac);
  border-color: rgba(93, 163, 74, 0.45);
  box-shadow: 0 3px 0 rgba(79, 130, 56, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: default;
}

/* --- grammar rush -------------------------------------------------------- */
.rush-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.rush-top-text { flex: 1 1 auto; }
.rush-qno { font-size: 0.64rem; font-weight: 700; color: var(--ink-3); }
.rush-name { font-size: 1rem; font-weight: 800; color: var(--ink); }

.rush-timer {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 800;
  color: #fff8ea;
  background: linear-gradient(180deg, #8ec5e8, #4a90c0);
  box-shadow: 0 4px 0 rgba(40, 90, 120, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.rush-timer.danger {
  background: linear-gradient(180deg, #e8703a, #c0392b);
  box-shadow: 0 4px 0 rgba(140, 45, 20, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  animation: tick 1s ease-in-out infinite;
}

@keyframes tick {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.rush-question { padding: 18px 16px 20px; margin-bottom: 14px; }
.rush-topic {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--amber-deep);
  margin-bottom: 7px;
}
.rush-text { font-size: 1.06rem; font-weight: 800; line-height: 1.34; color: var(--ink); }

.rush-options { display: flex; flex-direction: column; gap: 10px; }

.rush-option-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--clay-edge);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, var(--clay), var(--clay-2));
  box-shadow: 0 4px 0 rgba(122, 88, 44, 0.28), 0 8px 14px rgba(90, 60, 20, 0.14), inset 0 2px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.rush-option-btn:active { transform: translateY(4px); box-shadow: none; }

.rush-opt-letter {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff8ea;
  background: linear-gradient(180deg, #f0a52a, #d1760f);
  box-shadow: 0 2px 0 var(--amber-deep);
}

/* --- results ------------------------------------------------------------- */
.result { padding: 22px 18px 20px; text-align: center; }
.result-trophy { font-size: 2.6rem; line-height: 1; }
.result-title { margin-top: 6px; font-size: 1.16rem; font-weight: 800; color: var(--ink); }
.result-label { margin-top: 10px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; color: var(--ink-4); }
.result-score { margin-top: 3px; font-size: 2.2rem; font-weight: 800; color: var(--amber-deep); letter-spacing: -0.02em; }
.result-res { display: flex; gap: 10px; margin-top: 16px; }

/* --- catch-up list -------------------------------------------------------- */
.catchup-list { display: flex; flex-direction: column; gap: 10px; }

.activity-card {
  padding: 12px 14px 13px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--clay), var(--clay-2));
  border: 1px solid var(--clay-edge);
  box-shadow: var(--lift), inset 0 2px 0 rgba(255, 255, 255, 0.75);
}

.activity-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.activity-card-title { font-size: 0.9rem; font-weight: 800; color: var(--ink); }

.activity-reward-badge {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff8ea;
  background: linear-gradient(180deg, #e8703a, #c0392b);
}

.activity-meta { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; font-weight: 700; color: var(--ink-2); margin-bottom: 9px; }

/* --- shop ---------------------------------------------------------------- */
.shop-wallet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #ffe6c6, #ffd0a0);
  border: 1px solid rgba(209, 88, 42, 0.28);
  box-shadow: 0 4px 0 rgba(180, 100, 30, 0.32), 0 10px 20px rgba(150, 82, 8, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.shop-wallet-ico { font-size: 1.6rem; }
.shop-wallet-text { display: flex; flex-direction: column; line-height: 1.15; }
.shop-wallet-text i { font-size: 0.62rem; font-style: normal; font-weight: 700; color: #9a5a24; }
.shop-wallet-text b { font-size: 1.3rem; font-weight: 800; color: #6d3410; }

.shop-items { display: flex; flex-direction: column; gap: 11px; }

.shop-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--clay), var(--clay-2));
  border: 1px solid var(--clay-edge);
  box-shadow: var(--lift), inset 0 2px 0 rgba(255, 255, 255, 0.75);
}

.shop-item-info { flex: 1 1 auto; min-width: 0; }
.shop-item-info h4 { font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.shop-item-info p { font-size: 0.7rem; font-weight: 600; line-height: 1.3; color: var(--ink-3); }

/* The buy button is created by App.renderShop, so it needs its own clay
   pressable — without it the card's action renders as bare grey text. */
.shop-buy-btn {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff8ea;
  background: linear-gradient(180deg, #f0a52a, #d1760f);
  box-shadow: 0 4px 0 var(--amber-deep), 0 8px 14px rgba(150, 82, 8, 0.24), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.shop-buy-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--amber-deep), 0 4px 10px rgba(150, 82, 8, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.shop-buy-btn:disabled {
  cursor: default;
  opacity: 0.62;
}

.tut {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
}

.tut[hidden] {
  display: none;
}

.tut-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 40%, rgba(40, 24, 8, 0.38) 0%, rgba(30, 18, 6, 0.76) 100%);
  pointer-events: auto;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.tut-spot {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0 0 0 200vmax rgba(30, 18, 6, 0.6);
  pointer-events: none;
  transition: top 0.26s ease-out, left 0.26s ease-out, width 0.26s ease-out, height 0.26s ease-out, border-radius 0.26s ease-out;
  will-change: top, left, width, height, border-radius;
}

.tut-card {
  position: fixed;
  z-index: 1000;
  width: min(88vw, 320px);
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 14px 16px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fffaf1, #f3e5c7);
  border: 1px solid rgba(160, 118, 66, 0.24);
  box-shadow: 0 16px 40px rgba(40, 24, 6, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: top 0.26s ease-out;
  will-change: top;
}

.tut-step {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(160, 118, 66, 0.14);
}

.tut-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ink);
}

.tut-text {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.tut-dots {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.tut-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(160, 118, 66, 0.28);
}

.tut-dots i.is-on {
  background: linear-gradient(180deg, var(--gold), var(--rust));
}

.tut-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.tut-skip,
.tut-next {
  border: none;
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.tut-skip {
  color: var(--ink-2);
  background: linear-gradient(180deg, #f7ecd9, #eadabd);
  box-shadow: 0 3px 0 rgba(160, 118, 66, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.tut-next {
  color: #fff8ea;
  background: linear-gradient(180deg, var(--gold), var(--amber));
  box-shadow: 0 3px 0 var(--amber-deep), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.tut-skip:active,
.tut-next:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* ================================================================= TOAST == */
.toast-msg {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 90;
  max-width: 86vw;
  transform: translateX(-50%);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff8ea;
  background: linear-gradient(180deg, rgba(78, 52, 26, 0.96), rgba(52, 33, 14, 0.96));
  box-shadow: 0 10px 26px rgba(40, 24, 6, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  animation: toastUp 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes toastUp {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ======================================================= RESPONSIVE PASS == */
/* The Hub no longer needs per-size tree heights: the tree box is flex-sized
   and absorbs whatever vertical space is left. These rules only tune the
   horizontal rhythm and trim optional chrome on very short screens.        */
@media (max-width: 380px) {
  .scene { padding: 0 16px; }
  .scene-floor { width: 250px; }
  .scene-mound { width: 222px; }
  .scene-grass-l { left: 30px; }
  .scene-grass-r { right: 34px; }
  .meter { padding: 7px 10px 9px; }
  .meter-label { font-size: 0.7rem; }
  .meter-pct { font-size: 1.1rem; }
  .tile { padding: 7px 6px 6px; grid-template-columns: 29px minmax(0, 1fr); }
  .tile-orb { width: 29px; height: 29px; font-size: 0.9rem; }
  .tile-name { font-size: 0.6rem; }
  .tile-meta { font-size: 0.55rem; }
  .tile-cta { font-size: 0.55rem; padding: 2px 7px; }
  .tile-xp { font-size: 0.5rem; }
  .cta-label { font-size: 1rem; }
  .hud-day { padding: 0 8px; font-size: 0.58rem; }
}

@media (min-width: 400px) {
  .scene-floor { width: 320px; }
  .scene-mound { width: 286px; }
}

/* Telegram's native header shrinks the real game viewport below the browser
   window height. These bands trim optional chrome — never readable text —
   before the hero is allowed to shrink further. */
@media (max-height: 720px) {
  .scene-stage { max-height: 46vh; }
  .deck { margin-top: 3px; }
  .cta { margin-top: 4px; }
}

@media (max-height: 640px) {
  .scene { margin-top: 1px; }
  .scene-stage { min-height: 110px; max-height: 44vh; }
  .scene-floor { height: 46px; }
  .scene-mound { height: 34px; }
  .cta-sub { display: none; }
  .cta { min-height: 40px; height: 40px; padding: 3px 14px; }
  .catchup { padding: 4px 10px; }
}

@media (max-height: 585px) {
  .scene-stage { min-height: 96px; max-height: 38vh; }
  .hud-day { display: none; }
  .scene-floor { height: 40px; }
  .scene-mound { height: 28px; }
}

/* ============================== REDUCED MOTION =========================== */
/* Global kill switch. Every decorative animation in the game world stops, and
   every UI transition resolves instantly to its final state (elements still
   appear and disappear — only the movement is removed).                     */
@media (prefers-reduced-motion: reduce) {
  .world-sun,
  .world-cloud,
  .world-leaves i,
  .community-tree .ct-sway,
  .community-tree .ct-falling-leaf,
  .rush-timer.danger,
  .tile.is-pulse,
  .ms-gate.is-unlocking,
  .reward-token,
  .reward-sparkle,
  .meter-endpoint-gift,
  .cta {
    animation: none !important;
  }

  .world-cloud,
  .world-forest,
  .world-hill,
  .world-mist {
    filter: none;
  }

  .meter-fill,
  .ms-gate,
  .cta,
  .tile,
  .hud-orb,
  .hud-round,
  .sheet-row,
  .catchup,
  .ms-row {
    transition: none !important;
  }

  .sb-landed,
  .meter-fill.is-shimmer::after {
    animation: none !important;
  }

  .tut-card,
  .tut-spot {
    transition: none !important;
  }

  /* Drifting leaves are pure decoration — drop them entirely. */
  .world-leaves { display: none; }
}