/* Pickaxe Empire — game skin, layered over styles.css.
   Stone cave background, wooden plank panels with nailed frames, parchment insets, chunky 3D buttons
   (Kenney UI Pack 9-slices) and a wooden toolbar. Textures and kit images come from art-assets.css (--kit-*). */
:root {
  --f: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fd: "Lilita One", "Nunito", system-ui, sans-serif;           /* display: titles, numbers, buttons */
  --text: #fff4dc;
  --text-2: #f0dcb4;
  --mute: #d2b688;
  --gold: #ffd451;
  --gold-2: #f2a61c;
  --gold-soft: rgba(255,212,81,.16);
  --gold-line: rgba(255,212,81,.55);
  --green: #6ef08f;
  --red: #ff7a6b;
  --wood-dark: #2a170a;
  --wood-edge: #b9803f;
  --ink: #3a2410;                                                /* text on parchment */
  --wood: linear-gradient(rgba(58,32,12,.62), rgba(38,20,7,.78)), var(--kit-wood-tile);
  --wood-light: linear-gradient(rgba(120,72,30,.45), rgba(70,40,14,.6)), var(--kit-wood-tile);
  --frame: inset 0 0 0 2px var(--wood-edge), inset 0 0 0 4px rgba(42,23,10,.9), inset 0 6px 14px rgba(255,220,150,.08),
           0 4px 0 #160b03, 0 10px 22px rgba(0,0,0,.45);
  --nails: radial-gradient(circle at 11px 11px, #e8c27a 0 2px, #6b4a22 2.5px 3.5px, transparent 4px),
           radial-gradient(circle at calc(100% - 11px) 11px, #e8c27a 0 2px, #6b4a22 2.5px 3.5px, transparent 4px),
           radial-gradient(circle at 11px calc(100% - 11px), #e8c27a 0 2px, #6b4a22 2.5px 3.5px, transparent 4px),
           radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #e8c27a 0 2px, #6b4a22 2.5px 3.5px, transparent 4px);
  --r: 16px;
  --nav-h: 76px;
}

/* ---------- world ---------- */
body { font: 700 14px/1.45 var(--f); color: var(--text); background: #15100c; }
/* The cave wall sits on its own fixed layer: it never repaints while scrolling (background-attachment: fixed does). */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(255,170,60,.18), transparent 60%),
    linear-gradient(rgba(12,8,5,.45), rgba(12,8,5,.7)), var(--kit-rock-tile);
  background-size: auto, auto, 320px; }
body::before { background: #1a120b; }
h1, h2, h3, .display, .gold-title { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; }
.panel h2, .card h2, .card-head h2, .map-head h2 { font-size: 20px; color: var(--text); text-shadow: 0 2px 0 #2a170a, 0 0 1px #000; }
.label { font-family: var(--fd); font-weight: 400; letter-spacing: .8px; color: var(--mute); font-size: 11.5px; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.num b, b.num, .big, .tile b, .split b, .stat .v, .perk b, .mined-now, .li .amt, .ck-amt { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; }
.muted { color: var(--mute); } .gold-txt { color: var(--gold); } .mint { color: var(--green); }

/* page titles hang on a ribbon */
.page-head { text-align: center; padding: 6px 0 0; }
.page-head h1 { display: inline-block; font-size: 24px; color: #fff; padding: 10px 46px 18px; text-shadow: 0 2px 0 #7a2418;
  border-style: solid; border-width: 0 40px; border-image: var(--kit-ribbon) 0 110 fill / 0 40px stretch; background: none; }
.page-head p { color: var(--text-2); font-weight: 700; }

/* ---------- wooden panels ---------- */
.card, .panel, .box-wood, .tile, .quick button, .callout, .seg, .lvs, .demo, .sheet, .pop-in {
  background: var(--nails), var(--wood); background-size: auto, auto, 280px;
  border: 3px solid var(--wood-dark); box-shadow: var(--frame); border-radius: var(--r); color: var(--text); }
.card, .panel { padding: 18px 16px 16px; }
.hero-card { background: var(--nails), radial-gradient(120% 80% at 100% 0%, rgba(255,200,80,.22), transparent 55%), var(--wood); background-size: auto, auto, auto, 280px; border-color: #3a1f08; }
.hero-card::after { display: none; }
.hero-card .big { font-size: 44px; color: #ffe27a; text-shadow: 0 3px 0 #6b3a06, 0 0 12px rgba(255,200,80,.35); letter-spacing: 0; }
.hero-card .big em { font-family: var(--fd); color: var(--text-2); text-shadow: 0 2px 0 #2a170a; }

/* parchment insets for stat rows */
.split, .site-facts, .lvs-stats, .stats, .hold-box {
  background: linear-gradient(rgba(255,240,200,.08), rgba(0,0,0,.05)), #e9d3a3; color: var(--ink);
  border: 2px solid #8a5a2b; border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(120,70,20,.25), 0 2px 0 #1e1005; }
.split .label, .site-facts .label, .lvs-stats .label, .stats .label { color: #8a5f2e; text-shadow: none; }
.split b, .site-facts b, .lvs-stats b, .stats b { color: var(--ink); }
.split > div + div, .lvs-stats > div + div { border-left: 2px dashed rgba(138,90,43,.35); }
.lvs-stats em { color: #8a5f2e; }

/* progress bars: carved groove with a glossy fill */
.bar { height: 14px; border-radius: 999px; background: #1b0f05; box-shadow: inset 0 2px 3px rgba(0,0,0,.7), 0 1px 0 rgba(255,220,150,.18); padding: 2px; }
.bar > i { background: linear-gradient(#ffe68a, #f7b21f 55%, #d88a0e); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(120,60,0,.35); }
.bar.full > i { background: linear-gradient(#a6ff9a, #3fd162 55%, #20a046); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,80,20,.35); }

/* chips become little wooden tags */
.chip { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; background: #2a170a; border: 2px solid #8a5a2b; color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255,220,150,.15), 0 2px 0 #120902; }
.chip.gold { background: linear-gradient(#5a3410, #3a1f08); border-color: #e0a43a; color: var(--gold); }
.chip.mint { background: #123a1c; border-color: #3fd162; color: var(--green); }

/* ---------- buttons: Kenney 9-slice game buttons ---------- */
.btn { font-family: var(--fd); font-weight: 400; font-size: 18px; letter-spacing: .4px; border-radius: 0; background: none; box-shadow: none;
  border-style: solid; border-width: 9px 9px 13px; border-image: var(--kit-btn-brown) 27 27 39 27 fill / 9px 9px 13px; padding: 6px 12px 4px;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform .06s, filter .15s; }
.btn:active { transform: translateY(3px); border-image-source: var(--kit-btn-brown-pressed); }
.btn-gold { border-image-source: var(--kit-btn-gold); color: #5a2e00; text-shadow: 0 1px 0 rgba(255,255,255,.6); box-shadow: none; }
.btn-gold:active { border-image-source: var(--kit-btn-gold-pressed); }
.btn-green { border-image-source: var(--kit-btn-green); color: #fff; text-shadow: 0 2px 0 #0d6a2c; }
.btn-green:active { border-image-source: var(--kit-btn-green-pressed); }
.btn-plum, .btn-soft { border-image-source: var(--kit-btn-blue); color: #fff; text-shadow: 0 2px 0 #0b4f86; border-color: transparent; }
.btn-plum:active, .btn-soft:active { border-image-source: var(--kit-btn-blue-pressed); }
.btn-ghost { border-image-source: var(--kit-btn-brown); color: #fff4dc; border-color: transparent; }
.btn-red { border-image-source: var(--kit-btn-red); color: #fff; text-shadow: 0 2px 0 #8a1020; }
.btn-sm { font-size: 15px; padding: 3px 10px 1px; border-width: 7px 7px 10px; border-image-width: 7px 7px 10px; }
.btn[disabled] { filter: grayscale(.85) brightness(.8); opacity: .8; }
.btn svg:not(.coin) { width: 20px; height: 20px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.claim-btn { font-size: 22px; min-width: 132px; }
.claim-btn { position: relative; }
/* glow pulse: only the opacity of a pre-painted halo animates (composited), never a filter */
.claim-btn::after { content: ""; position: absolute; inset: -14px -12px -10px; z-index: -1; border-radius: 22px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,214,90,.75), rgba(255,190,40,.35) 55%, transparent); }
.claim-btn:not([disabled])::after { animation: claimglow 1.8s ease-in-out infinite; }
@keyframes claimglow { 50% { opacity: 1; } }

/* round icon badges */
.tile .ti, .quick .qi, .callout .ic, .task .ic, .li .ic {
  background: var(--kit-icon-badge) center / contain no-repeat; color: #7a4a12; border-radius: 50%; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.tile .ti { width: 42px; height: 42px; } .tile .ti svg { width: 20px; height: 20px; }
.quick .qi { width: 48px; height: 48px; } .quick .qi svg { width: 22px; height: 22px; }
.callout .ic, .task .ic { width: 44px; height: 44px; }
.li .ic { width: 38px; height: 38px; }

/* stat tiles and quick actions */
.tile { padding: 12px; grid-template-columns: 42px minmax(0,1fr); }
.tile b { font-size: 20px; color: #ffe9b0; text-shadow: 0 2px 0 #2a170a; }
.tile b em { font-family: var(--f); font-weight: 800; color: var(--mute); }
.quick button { font-family: var(--fd); font-weight: 400; font-size: 13.5px; letter-spacing: .3px; padding: 12px 4px 10px; color: var(--text); }
.quick button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--wood-edge), inset 0 0 0 4px rgba(42,23,10,.9), 0 2px 0 #160b03; }

/* callouts glow like a quest marker */
.callout { background: var(--nails), radial-gradient(80% 120% at 0% 50%, rgba(255,210,80,.28), transparent 60%), var(--wood); background-size: auto, auto, auto, 280px; border-color: #5a3410; }
.callout b { font-family: var(--fd); font-weight: 400; font-size: 16px; color: var(--gold); letter-spacing: .3px; }
.callout span { color: var(--text-2); }

/* ---------- Mine scene: framed like a stage, bushes at the foot ---------- */
.mine-card { padding: 0; overflow: visible; position: relative; }
.mine-card .scene { border-radius: 12px 12px 0 0; overflow: hidden; margin: 4px 4px 0; }
.mine-card .mine-foot { padding: 14px 16px 16px; position: relative; }
.scene-tag, .scene-lv { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; background: rgba(42,23,10,.82); border: 2px solid #8a5a2b; }
.mined-now { font-size: 30px; color: #ffe27a; text-shadow: 0 2px 0 #6b3a06; }
.deco { position: absolute; pointer-events: none; z-index: 2; }

/* ---------- crew ---------- */
.mc { background: radial-gradient(circle at 50% 75%, rgba(255,210,80,.2), transparent 70%), linear-gradient(#3e2410, #24140a);
  border: 2px solid #8a5a2b; box-shadow: inset 0 1px 0 rgba(255,220,150,.18), 0 3px 0 #120902; border-radius: 12px; }
.mc b { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; }
.mc.new { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), 0 3px 0 #120902; }

/* ---------- lists, tasks, check-in ---------- */
.task, .li { border-top: 2px dashed rgba(185,128,63,.28); }
.task b, .li b { font-weight: 800; }
.task small { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; }
.day { background: linear-gradient(#3e2410, #24140a); border: 2px solid #6b4a22; color: var(--mute); box-shadow: 0 2px 0 #120902; }
.day b { font-family: var(--fd); font-weight: 400; color: var(--text); }
.day.done { background: linear-gradient(#1f5a2c, #123a1c); border-color: #3fd162; }
.day.today { background: linear-gradient(#6b4010, #3a1f08); border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), 0 2px 0 #120902; }
.perk { background: linear-gradient(rgba(255,240,200,.08), rgba(0,0,0,.05)), #e9d3a3; border: 2px solid #8a5a2b; color: var(--ink); box-shadow: 0 2px 0 #1e1005; }
.perk b { color: #9a5a00; } .perk span { color: #6b4a22; }
.field, .addr { background: #1b0f05; border: 2px solid #6b4a22; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.field .all { font-family: var(--fd); font-weight: 400; background: #3a1f08; border: 2px solid #8a5a2b; }

/* segmented controls, tabs, filters: wooden toggles */
.seg { padding: 5px; }
.seg button { font-family: var(--fd); font-weight: 400; font-size: 15px; letter-spacing: .3px; color: var(--mute); border-radius: 10px; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: linear-gradient(#ffd451, #f2a61c); color: #5a2e00; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 #8a4a00; }
.seg button[aria-pressed="true"] svg { color: #5a2e00; }
.tab, .filters button { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; background: #2a170a; border: 2px solid #6b4a22; color: var(--mute); box-shadow: 0 2px 0 #120902; }
.tab.sel, .filters button[aria-pressed="true"] { background: linear-gradient(#ffd451, #f2a61c); border-color: #8a4a00; color: #5a2e00; }

/* ---------- level & site cards ---------- */
.lvs { border-radius: 18px; overflow: hidden; }
.lvs-art::after, .site-art::after { background: linear-gradient(transparent, rgba(38,20,7,.92)); }
.lvs-lv, .site-num, .site-state, .zone-pill { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; background: rgba(42,23,10,.85); border: 2px solid #8a5a2b; }
.lvs.current { border-color: var(--gold); }
.site-card { padding: 0; overflow: hidden; }
.site-card .site-body { padding: 14px 16px 16px; }
.map-card { padding: 0; overflow: hidden; }
.map-box { box-shadow: inset 0 3px 8px rgba(0,0,0,.5); }

/* ---------- header: wooden beam with a currency counter ---------- */
.hdr { background: linear-gradient(rgba(70,40,14,.55), rgba(40,22,8,.8)), var(--kit-wood-tile); background-size: auto, 260px;
  border-bottom: 3px solid var(--wood-dark); box-shadow: inset 0 -2px 0 var(--wood-edge), 0 4px 10px rgba(0,0,0,.45); backdrop-filter: none; -webkit-backdrop-filter: none; }
.who b { font-family: var(--fd); font-weight: 400; font-size: 17px; letter-spacing: .3px; text-shadow: 0 2px 0 #2a170a; }
.who small { font-weight: 800; }
.ava { box-shadow: 0 0 0 3px #f2a61c, 0 0 0 5px #5a3410, 0 3px 0 5px #1a0e05; font-family: var(--fd); font-weight: 400; }
.bal-pill { font-family: var(--fd); font-weight: 400; font-size: 18px; letter-spacing: .3px; background: #1b0f05; border: 2px solid #e0a43a; color: #ffe27a;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 2px 0 #120902; padding: 4px 14px 4px 6px; }
.bal-pill .coin { width: 26px; height: 26px; }

/* ---------- bottom toolbar: wooden plank with badge buttons ---------- */
.nav { background: linear-gradient(rgba(70,40,14,.5), rgba(34,18,6,.85)), var(--kit-wood-tile); background-size: auto, 260px;
  border-top: 3px solid var(--wood-dark); box-shadow: inset 0 2px 0 var(--wood-edge), 0 -6px 16px rgba(0,0,0,.45); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav button { font-family: var(--fd); font-weight: 400; font-size: 12.5px; letter-spacing: .4px; color: var(--mute); text-shadow: 0 2px 0 #1a0e05; gap: 2px; }
.nav button::before { display: none; }
.nav .ni { width: 48px; height: 48px; border-radius: 50%; background: var(--kit-icon-badge) center / contain no-repeat; color: #7a4a12; box-shadow: 0 3px 0 rgba(0,0,0,.4); transition: transform .15s; }
.nav .ni svg { width: 24px; height: 24px; }
.nav button[aria-current="page"] { color: var(--gold); }
.nav button[aria-current="page"] .ni { background: radial-gradient(circle, #ffe68a 0 52%, transparent 53%), var(--kit-icon-frame-gold) center / contain no-repeat; color: #6b3a06; transform: translateY(-8px) scale(1.12);
  box-shadow: 0 0 0 3px rgba(255,212,81,.25), 0 6px 0 rgba(0,0,0,.35); }
.nav .dot { top: 4px; left: calc(50% + 12px); width: 12px; height: 12px; box-shadow: 0 0 0 2px #2a170a; }

/* ---------- sheets, pop-ups, toasts ---------- */
.sheet { border-radius: 22px 22px 0 0; border-bottom: 0; }
.sheet-head h2 { font-size: 24px; text-shadow: 0 2px 0 #2a170a; }
.pop-in { padding: 22px 18px 18px; }
.pop-in .gold-title, .gold-title { color: #ffe27a; font-size: 30px; text-shadow: 0 3px 0 #6b3a06, 0 0 14px rgba(255,200,80,.4); }
.toast { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; background: linear-gradient(#5a3410, #2a170a); border: 2px solid #e0a43a; color: #ffe9b0; box-shadow: 0 4px 0 #120902, 0 10px 22px rgba(0,0,0,.5); }

/* ---------- decorations (bushes, grass) — only shown when the kit has them ---------- */
.grass-edge { position: relative; }
.grass-edge::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -14px; height: 34px; pointer-events: none; z-index: 2;
  background: var(--kit-grass-strip) bottom / auto 100% repeat-x; }
.nav::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 26px; pointer-events: none;
  background: var(--kit-grass-strip) bottom / auto 100% repeat-x; }

/* the "Open in Telegram" gate */
.tg-gate h1 { font-size: 34px; color: #ffe27a; text-shadow: 0 3px 0 #6b3a06; }
.tg-gate-art { border: 3px solid var(--wood-dark); box-shadow: var(--frame); }

@media (prefers-reduced-motion: reduce) { .claim-btn:not([disabled])::after { animation: none; } }

/* ---------- remaining components ---------- */
.tasks, .idcard, .tier, .eq, .hold-box, .zone, .grid .card, .checkin {
  background: var(--nails), var(--wood); background-size: auto, auto, 280px; border: 3px solid var(--wood-dark); box-shadow: var(--frame); border-radius: var(--r); }
.idcard { background: var(--nails), radial-gradient(120% 80% at 100% 0%, rgba(255,200,80,.2), transparent 55%), var(--wood); background-size: auto, auto, auto, 280px; }
.idcard .uid b { font-family: var(--fd); font-weight: 400; font-size: 21px; letter-spacing: .3px; text-shadow: 0 2px 0 #2a170a; }
.rankline { background: #1b0f05; border: 2px solid #6b4a22; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); font-weight: 800; }
.mini-lines { font-family: var(--fd); font-weight: 400; color: var(--mute); }
.mini-lines b { font-family: var(--fd); font-weight: 400; font-size: 18px; color: #ffe9b0; }
.group-title { font-family: var(--fd); font-weight: 400; font-size: 15px; letter-spacing: .6px; color: var(--gold); text-shadow: 0 2px 0 #1a0e05; margin: 10px 4px -2px; }
.tbtn { font-family: var(--fd); font-weight: 400; font-size: 15px; letter-spacing: .3px; border-radius: 0; padding: 2px 10px 0; color: #fff; text-shadow: 0 2px 0 #0b4f86;
  border-style: solid; border-width: 7px 7px 10px; border-image: var(--kit-btn-blue) 27 27 39 27 fill / 7px 7px 10px; background: none; }
.tbtn:active { transform: translateY(2px); border-image-source: var(--kit-btn-blue-pressed); }
.tbtn.claim { border-image-source: var(--kit-btn-gold); color: #5a2e00; text-shadow: 0 1px 0 rgba(255,255,255,.6); background: none; }
.tbtn.claim:active { border-image-source: var(--kit-btn-gold-pressed); }
.tbtn.wait { border: 2px solid #6b4a22; border-image: none; border-radius: 10px; background: #1b0f05; color: var(--mute); text-shadow: none; padding: 6px 10px; }
.tdone { color: var(--green); }
.eq-row { background: transparent; border-top: 2px dashed rgba(185,128,63,.28); }
.eq-row.eq-total { background: linear-gradient(90deg, rgba(255,212,81,.22), transparent); }
.eq-row .v, .eq-op { font-family: var(--fd); font-weight: 400; }
.eq-row b, .hold-row b { font-weight: 800; }
.tier.next { box-shadow: 0 0 0 3px var(--gold-soft), var(--frame); border-color: #5a3410; }
.tier .ic { background: var(--kit-icon-badge) center / contain no-repeat; color: #7a4a12; border-radius: 50%; }
.tier b { font-family: var(--fd); font-weight: 400; font-size: 17px; letter-spacing: .3px; }
.zone::after { background: linear-gradient(90deg, rgba(38,20,7,.88), rgba(38,20,7,.1) 80%); }
.zone .zt b { font-family: var(--fd); font-weight: 400; text-shadow: 0 2px 0 #2a170a; }
.status { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; border: 2px solid currentColor; }
.unlocked { background: linear-gradient(#1f5a2c, #123a1c); border: 2px solid #3fd162; font-family: var(--fd); font-weight: 400; }
.need-line { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; }
.rules b { font-weight: 900; color: var(--gold); }
.empty { font-weight: 800; }
.linkish { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.pill-btn { font-family: var(--fd); font-weight: 400; }
.demo { border-style: dashed; }
.demo-actions button { font-family: var(--fd); font-weight: 400; background: #1b0f05; border: 2px solid #6b4a22; }
.note { color: var(--text-2); font-weight: 700; }

/* site facts on parchment (cells inherit it) */
.site-facts { gap: 0; }
.site-facts > div { background: transparent; border-right: 2px dashed rgba(138,90,43,.3); border-bottom: 2px dashed rgba(138,90,43,.3); }
.site-facts b { font-weight: 900; }

/* round wooden arrow buttons */
.lvc-btn { background: var(--kit-icon-badge) center / contain no-repeat; border: 0; color: #7a4a12; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.lvc-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.lvc-btn:disabled { filter: grayscale(1) brightness(.6); }

/* daily check-in: carved ring and coin trail */
.ring-bg { stroke: #1b0f05; stroke-width: 9; }
.ring-fg { stroke: #ffd451; stroke-width: 9; filter: drop-shadow(0 0 5px rgba(255,212,81,.6)); }
.ring-in b { font-family: var(--fd); font-weight: 400; font-size: 30px; color: #ffe27a; text-shadow: 0 2px 0 #6b3a06; }
.ring-in small { font-family: var(--fd); font-weight: 400; }
.ck-info h2 { font-size: 20px; }
.ck-amt { font-family: var(--fd); font-weight: 400; color: #ffe27a; text-shadow: 0 2px 0 #6b3a06; }
.trail::before { background: repeating-linear-gradient(90deg, #6b4a22 0 6px, transparent 6px 10px); height: 4px; }
.stop .node { background: #1b0f05; border: 3px solid #6b4a22; box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 2px 0 #120902; }
.stop.done .node { background: linear-gradient(#ffe68a, #f2a61c); border-color: #8a4a00; color: #5a2e00; }
.stop.now .node { background: #3a1f08; border-color: var(--gold); }
.stop b { font-family: var(--fd); font-weight: 400; }
.stop.chest .node { background: radial-gradient(circle, rgba(255,212,81,.35), #1b0f05 70%); border-color: #e0a43a; }

.site-art img.star, .lvs-art img.star, .hero img.star, .zone img.star { position: static; width: 1em; height: 1em; object-fit: contain; }

/* ---------- foliage around the panels ---------- */
.hero-card, .mine-card, .home-map, .checkin, .idcard { overflow: visible; position: relative; }
.hero-card::before, .mine-card::before, .mine-card::after, .home-map::after, .checkin::after, .idcard::after {
  content: ""; position: absolute; pointer-events: none; z-index: 3; background: center bottom / contain no-repeat; }
.hero-card::before { width: 84px; height: 36px; right: -12px; bottom: -24px; background-image: var(--kit-bush-4-tulips); }
.mine-card::before { width: 104px; height: 44px; left: -14px; bottom: -16px; background-image: var(--kit-bush-1); }
.mine-card::after { width: 92px; height: 44px; right: -12px; bottom: -16px; background-image: var(--kit-bush-3); }
.home-map::after { display: none; }
.checkin::after { width: 100px; height: 46px; left: -12px; bottom: -16px; background-image: var(--kit-bush-2); }
.idcard::after { width: 96px; height: 42px; right: -10px; bottom: -14px; background-image: var(--kit-bush-3); }
.mine-card .scene { position: relative; }
.mine-card .scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 22px; pointer-events: none; z-index: 2;
  background: var(--kit-grass-strip) bottom / auto 100% repeat-x; }
.nav::before { top: -18px; height: 22px; }
.wrap { gap: 16px; }

/* "Open in Telegram" title on a wooden sign */
.tg-gate h1 { width: min(100%, 320px); aspect-ratio: 512 / 335; display: grid; place-items: center; padding-bottom: 34%; margin-top: -10px;
  background: var(--kit-sign-board) center / contain no-repeat; color: #4a2a0e; text-shadow: 0 1px 0 rgba(255,240,200,.6); font-size: 30px; }
.x { background: var(--kit-icon-badge) center / contain no-repeat !important; color: #7a4a12 !important; border: 0 !important; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.x:active { transform: translateY(2px); }

/* ---------- components from the Profile hub, Mine shortcuts, journey strip ---------- */
.pf-head, .fund-card, .go-card, .ref-card, .friends-card, .quick2 button, .callout-plain, .adm-box {
  background: var(--nails), var(--wood); background-size: auto, auto, 280px; border: 3px solid var(--wood-dark); box-shadow: var(--frame); border-radius: var(--r); color: var(--text); }
.ref-card, .fund-card, .friends-card { background: var(--nails), radial-gradient(120% 80% at 100% 0%, rgba(255,200,80,.2), transparent 55%), var(--wood); background-size: auto, auto, auto, 280px; }
.pf-name, .pf-head b { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; }
.pf-name { font-size: 21px; text-shadow: 0 2px 0 #2a170a; }
.pf-rank { background: #1b0f05; border: 2px solid #6b4a22; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); border-radius: 10px; }
.pf-stats, .ref-stats, .fee-tiers, .pf-split > div, .adm-tile, .ref-claim {
  background: linear-gradient(rgba(255,240,200,.08), rgba(0,0,0,.05)), #e9d3a3; color: var(--ink); border: 2px solid #8a5a2b; border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(120,70,20,.25), 0 2px 0 #1e1005; }
.pf-stats > div, .ref-stats > div, .fee-tiers > div { background: transparent; }
.pf-stats > div + div, .ref-stats > div + div, .fee-tiers > div + div { border-left: 2px dashed rgba(138,90,43,.35); }
.pf-stats b, .ref-stats b, .fee-tiers b, .pf-split b, .adm-tile b, .ref-claim b { font-family: var(--fd); font-weight: 400; color: var(--ink); letter-spacing: .3px; }
.pf-stats span, .ref-stats span, .fee-tiers span, .pf-split small, .adm-tile span, .adm-tile small, .ref-claim small, .pf-split .label { color: #8a5f2e; text-shadow: none; }
.ref-claim b { color: #9a5a00; font-size: 26px; }
.pf-invite { border-top: 2px dashed rgba(185,128,63,.35); }
.pf-friends { border-top: 2px solid rgba(185,128,63,.5); background: rgba(0,0,0,.18); }
.pf-friends b, .go-card b, .friends-card b { font-family: var(--fd); font-weight: 400; font-size: 16px; letter-spacing: .3px; }
.go-pill, .ck-btn { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; }
.ck-btn { border-radius: 0; background: none; box-shadow: none; color: #5a2e00; padding: 2px 12px 0; border-style: solid; border-width: 8px 8px 11px;
  border-image: var(--kit-btn-gold) 27 27 39 27 fill / 8px 8px 11px; }
.ck-btn:active { border-image-source: var(--kit-btn-gold-pressed); }
.quick2 .qi, .ph-ic { background: var(--kit-icon-badge) center / contain no-repeat; color: #7a4a12; border-radius: 50%; box-shadow: 0 3px 0 rgba(0,0,0,.35); width: 42px; height: 42px; }
.quick2 b { font-family: var(--fd); font-weight: 400; font-size: 16px; letter-spacing: .3px; color: var(--text); }
.quick2 button:active { transform: translateY(2px); }
.set-link { border-top: 2px dashed rgba(185,128,63,.28); font-weight: 800; }
.set-link svg:first-child { color: var(--gold); }
.back-btn { background: var(--kit-icon-badge) center / contain no-repeat; border: 0; color: #7a4a12; border-radius: 50%; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.more-btn { font-family: var(--fd); font-weight: 400; letter-spacing: .3px; }
.notice { background: linear-gradient(rgba(255,240,200,.08), rgba(0,0,0,.05)), #e9d3a3; border: 2px solid #8a5a2b; color: var(--ink); font-weight: 800; box-shadow: 0 3px 0 #1e1005; }
.notice > svg { color: #9a5a00; }
.notice .x { width: 26px !important; height: 26px !important; }
.vprog-bars > div::before { height: 8px; background: #1b0f05; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.vprog-bars i { height: 8px; background: linear-gradient(#ffe68a, #f2a61c); }
.vprog-bars .ok i { background: linear-gradient(#a6ff9a, #3fd162); }
.app-ver { font-family: var(--fd); font-weight: 400; color: var(--mute); }

/* level slider: a groove with a gold knob */
.lvslide { background: #1b0f05; border: 2px solid #6b4a22; box-shadow: inset 0 2px 5px rgba(0,0,0,.7); }
.lvslide-knob { background: linear-gradient(#ffe68a, #f2a61c); color: #5a2e00; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 3px 0 #8a4a00; }
.lvslide-knob b { font-family: var(--fd); font-weight: 400; }

/* journey strip over the map: wooden tokens */
.map-top h2 { font-size: 21px; text-shadow: 0 2px 0 #1a0e05, 0 0 8px rgba(0,0,0,.7); }
.map-top .chip { background: linear-gradient(#5a3410, #3a1f08); border-color: #e0a43a; }
.jdot { background: var(--kit-icon-badge) center / contain no-repeat; border: 0; color: #7a4a12; font-family: var(--fd); font-weight: 400; width: 32px; height: 32px; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.jst small { font-family: var(--fd); font-weight: 400; letter-spacing: .2px; }
.jst.done .jdot { background: linear-gradient(#ffe68a, #f2a61c); color: #5a2e00; border-radius: 50%; }
.jst.here .jdot { background: radial-gradient(circle, #ffe68a 0 55%, transparent 56%), var(--kit-icon-frame-gold) center / contain no-repeat; color: #5a2e00; }
.home-map .map-box { height: 250px; }
.home-map .map-foot { background: linear-gradient(rgba(0,0,0,.25), transparent); border-top: 3px solid var(--wood-dark); }

/* ---------- daylight (light theme): honey planks, ink text, sunlit stone ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --text: #3a2410; --text-2: #5a3a1a; --mute: #80603a;
  --gold: #b86e00; --gold-2: #d98a00; --gold-soft: rgba(217,138,0,.14); --gold-line: rgba(184,110,0,.5);
  --green: #1d8a3c; --red: #c0392b;
  --wood-dark: #6b4220; --wood-edge: #f3cf8e;
  --wood: linear-gradient(rgba(255,232,185,.68), rgba(240,204,140,.66)), var(--kit-wood-tile);
  --frame: inset 0 0 0 2px var(--wood-edge), inset 0 0 0 4px rgba(107,66,32,.55), inset 0 6px 14px rgba(255,255,255,.25),
           0 4px 0 #8a5a2b, 0 10px 20px rgba(90,50,10,.25);
}
:root[data-theme="light"] body { background: #cdb48a; }
:root[data-theme="light"] body::after {
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(255,240,190,.7), transparent 60%),
    linear-gradient(rgba(240,220,180,.55), rgba(220,190,140,.6)), var(--kit-rock-tile);
  background-size: auto, auto, 320px; }
:root[data-theme="light"] body::before { background: #e8d2a6; }
:root[data-theme="light"] .hdr, :root[data-theme="light"] .nav {
  background: linear-gradient(rgba(255,226,170,.55), rgba(220,176,110,.65)), var(--kit-wood-tile); background-size: auto, 260px; }
:root[data-theme="light"] .hdr { border-bottom-color: #6b4220; box-shadow: inset 0 -2px 0 #f3cf8e, 0 4px 10px rgba(90,50,10,.25); }
:root[data-theme="light"] .nav { border-top-color: #6b4220; box-shadow: inset 0 2px 0 #f3cf8e, 0 -6px 16px rgba(90,50,10,.2); }
:root[data-theme="light"] .nav button { color: #5a3a1a; text-shadow: 0 1px 0 rgba(255,240,200,.7); }
:root[data-theme="light"] .nav button[aria-current="page"] { color: #8a3a00; }
:root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3,
:root[data-theme="light"] .who b, :root[data-theme="light"] .tile b, :root[data-theme="light"] .label,
:root[data-theme="light"] .group-title, :root[data-theme="light"] .idcard .uid b, :root[data-theme="light"] .pf-name,
:root[data-theme="light"] .mini-lines b { text-shadow: 0 1px 0 rgba(255,240,200,.75); }
:root[data-theme="light"] .tile b, :root[data-theme="light"] .mini-lines b { color: #3a2410; }
:root[data-theme="light"] .page-head h1 { color: #fff; text-shadow: 0 2px 0 #7a2418; }
:root[data-theme="light"] .hero-card .big, :root[data-theme="light"] .mined-now, :root[data-theme="light"] .ring-in b,
:root[data-theme="light"] .ck-amt, :root[data-theme="light"] .gold-title { color: #ffd451; text-shadow: 0 2px 0 #7a3a00, 0 0 2px #7a3a00; }
:root[data-theme="light"] .callout b { color: #8a3a00; }
:root[data-theme="light"] .chip { background: #fff1d0; border-color: #b9803f; color: #5a3a1a; box-shadow: 0 2px 0 #8a5a2b; }
:root[data-theme="light"] .chip.gold { background: linear-gradient(#ffe68a, #f2b21c); border-color: #8a4a00; color: #5a2e00; }
:root[data-theme="light"] .mc { background: radial-gradient(circle at 50% 75%, rgba(255,210,80,.35), transparent 70%), linear-gradient(#f6dca8, #e2bd7c); border-color: #8a5a2b; box-shadow: 0 3px 0 #8a5a2b; }
:root[data-theme="light"] .day, :root[data-theme="light"] .stop .node, :root[data-theme="light"] .tab,
:root[data-theme="light"] .filters button, :root[data-theme="light"] .tbtn.wait, :root[data-theme="light"] .rankline,
:root[data-theme="light"] .pf-rank, :root[data-theme="light"] .field, :root[data-theme="light"] .addr,
:root[data-theme="light"] .lvslide, :root[data-theme="light"] .demo-actions button {
  background: #fff1d0; border-color: #b9803f; color: #5a3a1a; box-shadow: inset 0 2px 3px rgba(120,70,20,.2), 0 2px 0 #8a5a2b; }
:root[data-theme="light"] .day b, :root[data-theme="light"] .field input { color: #3a2410; }
:root[data-theme="light"] .day.done { background: linear-gradient(#c8f5c8, #8ee39a); border-color: #1d8a3c; color: #14602a; }
:root[data-theme="light"] .day.today { background: linear-gradient(#ffe68a, #f2b21c); border-color: #8a4a00; color: #5a2e00; }
:root[data-theme="light"] .bar, :root[data-theme="light"] .vprog-bars > div::before { background: #7a5230; }
:root[data-theme="light"] .scene-tag, :root[data-theme="light"] .scene-lv, :root[data-theme="light"] .lvs-lv,
:root[data-theme="light"] .site-num, :root[data-theme="light"] .site-state, :root[data-theme="light"] .zone-pill { color: #fff4dc; }
:root[data-theme="light"] .lvs-art::after, :root[data-theme="light"] .site-art::after { background: linear-gradient(transparent, rgba(240,204,140,.95)); }
:root[data-theme="light"] .toast { background: linear-gradient(#fff1d0, #f0cc8c); color: #3a2410; border-color: #8a5a2b; }
:root[data-theme="light"] .pf-friends { background: rgba(255,255,255,.2); }
:root[data-theme="light"] .ring-bg { stroke: #7a5230; }
:root[data-theme="light"] .group-title { color: #8a3a00; }
:root[data-theme="light"] .home-map .map-foot { background: transparent; border-top-color: #6b4220; }
:root[data-theme="light"] .who small { color: #8a3a00; }

/* ---------- performance: keep work off the main thread ---------- */
.scene-tag, .scene-lv, .map-top .chip, .seg3, .hdr, .nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#storBar > i { width: 100% !important; transform-origin: 0 50%; transition: transform .4s ease; }
.lvs { content-visibility: auto; contain-intrinsic-size: auto 340px; }        /* 100 level cards: only nearby ones render */
.wrap > section, .wrap > .tiles, .wrap > .quick2 { contain: layout style; }    /* not paint: panel foliage overflows */
.hdr, .nav { transform: translateZ(0); }                                    /* own layers: scroll never repaints them */
/* page change: a quick rise-in on the GPU (opacity + transform only) */
#page.enter > * { animation: pgin .32s cubic-bezier(.2,.8,.2,1) both; }
#page.enter > *:nth-child(2) { animation-delay: .04s; } #page.enter > *:nth-child(3) { animation-delay: .08s; }
#page.enter > *:nth-child(4) { animation-delay: .12s; } #page.enter > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes pgin { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { #page.enter > * { animation: none; } }
.lvs.ph { min-height: 360px; }
:root[data-theme="light"] .home-map .map-foot { color: #5a3a1a; }