/* 1.5.3: one material vocabulary, using the existing HUD artwork.
   The reviewed backpack and item sheet retain their dedicated styles.
   Crystal resource frames: dialog shells and major hero panels only.
   Plain metal action frames: cards, buttons and smaller controls. */
:root {
  --metal-frame:url('/assets/ui-mmorpg/action-frame.webp');
  --mounted-crystal:url('/assets/ui-mmorpg/crystal-mounted.webp');
  --theme-surface:linear-gradient(180deg,#164052,#103040);
  --theme-recess:linear-gradient(180deg,#092332,#0b2b3c);
}
/* Keep the shell stationary while its content scrolls, including short screens. */
#sheet:not([data-type="bag"]) {
  isolation:isolate;overflow:hidden;border:1px solid transparent;border-radius:12px;
  background:none;padding:19px 18px 23px;max-height:85dvh;
  box-shadow:0 20px 65px #000b;
}
#sheet:not([data-type="bag"])[open] { display:flex;flex-direction:column; }
#sheet:not([data-type="bag"])>.shared-metal-frame { display:grid;--frame-unit:26px;z-index:-1; }
#sheet:not([data-type="bag"])>.sheethead {
  position:relative;flex:none;z-index:1;min-height:36px;margin:0 0 13px;padding:0 0 11px;
  border-bottom:1px solid #81bdd22b;background:transparent;align-items:center;
}
#sheet:not([data-type="bag"])>.sheethead h2 { font-size:21px;color:#e4f3fa;min-width:0; }
#sheet:not([data-type="bag"])>#sheetBody {
  position:relative;z-index:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#597e91 #0b2432;
  padding:0 3px 5px 0;
}
#sheet:not([data-type="bag"]) .sheethead #closeSheet {
  box-sizing:border-box;flex:none;width:32px;height:32px;min-width:32px;min-height:32px;
  padding:0;display:grid;place-items:center;aspect-ratio:1;border:0;border-radius:0;
  background:var(--metal-frame) center/100% 100% no-repeat;box-shadow:none;
  color:#c5d6df;font-size:0;line-height:1;transform:none;
}
#sheet:not([data-type="bag"]) #closeSheet>.ui-icon { display:none; }
#sheet:not([data-type="bag"]) #closeSheet::after {
  content:'';width:15px;height:15px;
  background:linear-gradient(150deg,#f4f7f8 5%,#c4d2d9 35%,#82939f 49%,#dde7eb 60%,#a2b3bf 100%);
  clip-path:polygon(12% 0,50% 38%,88% 0,100% 12%,62% 50%,100% 88%,88% 100%,50% 62%,12% 100%,0 88%,38% 50%,0 12%);
}
/* Large highlights share the undistorted corner crystals with the backpack. */
:is(#pageView,#sheet:not([data-type="bag"])) .hero {
  isolation:isolate;background:none;border:1px solid transparent;border-radius:10px;
  padding:20px;box-shadow:0 3px 12px #0005;
}
:is(#pageView,#sheet:not([data-type="bag"])) .hero>.shared-metal-frame { --frame-unit:22px;z-index:-1; }
:is(#pageView,#sheet:not([data-type="bag"])) .hero p,
:is(#pageView,#sheet:not([data-type="bag"])) .hero small { color:#b4cad6; }
/* Plain frames repeat the metal without putting five jewels on every row. */
:is(#pageView,#sheet:not([data-type="bag"])) :is(.card,.row,.craft-card,.city-building,.settings-row,.balance-summary,.route-card,.kit-option,.statgrid>div,.run-stats) {
  border:1px solid transparent;border-image:var(--metal-frame) 64 / 9px / 0 stretch;
  border-radius:0;background:var(--theme-surface);box-shadow:0 2px 5px #0003;
}
:is(#pageView,#sheet:not([data-type="bag"])) :is(.card,.craft-card,.route-card) { border-image-width:11px; }
:is(#pageView,#sheet:not([data-type="bag"])) .kit-option.selected {
  background:var(--theme-recess);box-shadow:inset 0 3px 8px #00121dbb;
}
:is(#pageView,#sheet:not([data-type="bag"])) :is(.goldbutton,.secondary,.action-button:not(.linkbutton),.tabs button,.gender-buttons button) {
  border:1px solid transparent;border-image:var(--metal-frame) 64 / 8px / 0 stretch;
  border-radius:0;background:var(--theme-surface);color:#e0eff7;
  box-shadow:inset 0 1px #e4f7ff0e,0 2px 4px #0003;text-shadow:0 1px 1px #00111b;
}
:is(#pageView,#sheet:not([data-type="bag"])) .goldbutton.action-button {
  background:radial-gradient(ellipse at 50% 0,#b68e4b44,transparent 80%),linear-gradient(180deg,#644d2d,#42341f);
  color:#ffedce;
}
:is(#pageView,#sheet:not([data-type="bag"])) .linkbutton { color:#a2d9e7; }
:is(#pageView,#sheet:not([data-type="bag"])) .tabs button.active {
  background:var(--theme-recess);color:#f3faff;box-shadow:inset 0 3px 8px #00121dbb;
}
:is(#pageView,#sheet:not([data-type="bag"])) :is(input:not([type="range"]):not([type="checkbox"]),textarea,select) {
  border:1px solid transparent;border-image:var(--metal-frame) 64 / 7px / 0 stretch;
  border-radius:0;background:#0a2433;color:#e3f2f9;
}
:is(#pageView,#sheet:not([data-type="bag"])) .sectiontitle { gap:10px; }
:is(#pageView,#sheet:not([data-type="bag"])) .sectiontitle h2 { display:flex;align-items:center;gap:5px; }
:is(#pageView,#sheet:not([data-type="bag"])) .sectiontitle h2::before {
  content:'';display:block;flex:0 0 17px;width:17px;height:17px;background:var(--mounted-crystal) center/contain no-repeat;
}
/* Floating mine controls and city labels retain their positions and hit areas. */
#mapButton,.adventure-entry.adventure-shortcut,.adventure-controls,.air-balance,#adventureCargo:not(:has(.air-balance)),#questTeaser {
  border:1px solid transparent;border-image:var(--metal-frame) 64 / 8px / 0 stretch;
  border-radius:0;background:linear-gradient(180deg,#16394aee,#0b2738ee);box-shadow:0 3px 8px #0005;
}
.adventure-controls :is(.adventure-status,.goldbutton,.secondary) { border:1px solid transparent;border-image:var(--metal-frame) 64 / 7px / 0 stretch;border-radius:0; }
.air-balance.low-air { background:#3c2529ee;color:#ffb7a5; }
.city-service::before { filter:none; }
.city-service { background:linear-gradient(180deg,#164052e6,#0b2738dd); }
/* 1.5.6: the bottom navigation is back to the darker edge-to-edge 1.4.0-UI2
   look from redesign.css — no metal frame, no lighter theme surface. */
#toast,#findBanner { border:1px solid transparent;border-image:var(--metal-frame) 64 / 8px / 0 stretch;border-radius:0; }
@media(max-width:350px) {
  #sheet:not([data-type="bag"]) { padding:17px 13px 21px; }
  #sheet:not([data-type="bag"])>.shared-metal-frame { --frame-unit:23px; }
  #sheet:not([data-type="bag"])>.sheethead h2 { font-size:19px; }
  :is(#pageView,#sheet:not([data-type="bag"])) .hero { padding:17px; }
}
@media(prefers-reduced-motion:reduce) {
  #nav button,:is(#pageView,#sheet:not([data-type="bag"])) .tabs button { transition:none; }
}

/* Keep illustrated banners inside the original corner crystals. */
#pageView .shop-hero .shop-scene { width:calc(100% + 16px);margin:-8px -8px 17px;border-radius:4px; }

/* 1.5.6 — Tasks screen: three text tabs, calm recessed rows, one clear
   bronze "Забрать", finished tasks folded. Matches the backpack styling. */
#pageView .quest-title { margin:2px 2px 12px; font:700 24px/1.2 "Dig Digits","Kopai Serif",Georgia,"Times New Roman",serif; color:#eef7fb; }
#pageView .quest-tabs { display:flex; margin:0 0 12px; border-bottom:1px solid #8cc3d61f; }
#pageView .quest-tabs button {
  position:relative; flex:1; min-height:36px; padding:4px 2px 10px; border:0; border-radius:0; border-image:none;
  background:none; box-shadow:none; color:#6f8d9b; font-size:13px; font-weight:600; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
#pageView .quest-tabs button.is-active { color:#f1fbff; text-shadow:0 0 8px #56e6ff88; }
#pageView .quest-tabs button.is-active::after {
  content:''; position:absolute; left:14%; right:14%; bottom:-1px; height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,transparent,#4fe6f7 20%,#c9fbff 50%,#4fe6f7 80%,transparent); box-shadow:0 0 10px #3fe3f5cc;
}
#pageView .quest-badge { min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#c9953f; color:#1d1206; font-size:11px; line-height:17px; box-sizing:border-box; }
#pageView .quest-note { margin:0 2px 10px; color:#7f9eae; font-size:12px; }
#pageView .quest-item {
  display:flex; align-items:center; gap:12px; margin:0 0 8px; padding:11px 12px;
  border:1px solid #0a1a22; border-radius:10px;
  background:radial-gradient(ellipse at 30% 40%,#0f3342 0%,#081d27 80%);
  box-shadow:inset 0 3px 7px #000c,inset 0 -1px 0 #ffffff10,0 1px 0 #7fc6dc22;
}
#pageView .quest-item.is-ready { border-color:#6e5429; box-shadow:inset 0 3px 7px #000c,0 0 0 1px #c9953f33,0 0 12px #c9953f22; }
#pageView .quest-item.is-done { opacity:.55; }
#pageView .quest-main { flex:1; min-width:0; }
#pageView .quest-main h3 { margin:0 0 5px; font-size:15px; line-height:1.2; color:#eaf5fa; }
#pageView .quest-rewards { display:flex; flex-wrap:wrap; gap:6px 12px; margin-bottom:7px; }
#pageView .quest-reward { display:inline-flex; align-items:center; gap:4px; color:#ffd177; font-size:13px; font-weight:700; }
#pageView .quest-reward .ui-icon { width:16px; height:16px; }
#pageView .quest-xp { color:#b99bff; }
#pageView .quest-bar { height:5px; border-radius:5px; background:#03111a; box-shadow:inset 0 1px 2px #000a; overflow:hidden; }
#pageView .quest-bar i { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#1fb8d0,#6ff0ff); }
#pageView .quest-item.is-ready .quest-bar i { background:linear-gradient(90deg,#c9953f,#f3d48f); }
#pageView .quest-count { flex:none; color:#8fb0bf; font-size:13px; font-variant-numeric:tabular-nums; }
#pageView .quest-done-mark { flex:none; width:26px; text-align:center; color:#6fe3c9; font-size:18px; }
#pageView .quest-claim {
  flex:none; min-height:36px; padding:6px 14px; border:1px solid #d9b26a; border-radius:8px; border-image:none;
  background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22); color:#fff4dc; font:700 14px/1 "Dig Digits","Kopai Serif",Georgia,serif;
  box-shadow:inset 0 1px 0 #ffe3a866,inset 0 -2px 0 #0003,0 2px 6px #0007; text-shadow:0 1px 1px #3a2408;
}
#pageView .quest-claim .ui-icon { display:none; }
#pageView .quest-claim-all { display:block; width:100%; margin:0 0 12px; min-height:40px; }
#pageView .quest-empty { margin:18px 0; text-align:center; color:#7f9eae; }
#pageView .quest-done-toggle {
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:6px 0 8px; padding:8px;
  border:0; border-image:none; background:none; box-shadow:none; color:#7f9eae; font-size:13px;
}
#pageView .quest-claim.action-button,#pageView .quest-claim {
  border:1px solid #d9b26a !important; border-image:none !important;
  background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22) !important; color:#fff4dc !important;
}
#pageView .quest-claim > .shared-metal-frame { display:none !important; }
#pageView .quest-claim::before,#pageView .quest-claim::after { content:none !important; }
/* Rounded claim buttons and a calm "Готово" pill for finished tasks. */
#pageView .quest-claim,#pageView .quest-claim.action-button { border-radius:18px !important; padding:6px 16px; }
#pageView .quest-claim-all,#pageView .quest-claim-all.action-button { border-radius:20px !important; }
#pageView .quest-item.is-done { opacity:1; }
#pageView .quest-item.is-done .quest-main h3 { color:#9fb6c1; }
#pageView .quest-item.is-done .quest-reward { color:#8a7a55; }
#pageView .quest-item.is-done .quest-xp { color:#7d6fa3; }
#pageView .quest-done-pill {
  flex:none; display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:4px 12px 4px 9px;
  border:1px solid #2e6b60; border-radius:18px; background:#0a2a2799; color:#7fe6cf; font-size:13px; font-weight:600;
}
#pageView .quest-done-pill svg { width:16px; height:16px; }
/* Same corner radius as the backpack buttons (8px). */
#pageView .quest-claim,#pageView .quest-claim.action-button,#pageView .quest-claim-all,#pageView .quest-claim-all.action-button { border-radius:8px !important; }
#pageView .quest-done-pill { border-radius:8px; }
/* Ready tasks: only a thin muted bronze edge, no glow. */
#pageView .quest-item.is-ready { border-color:#4d3b1c; box-shadow:inset 0 3px 7px #000c,inset 0 -1px 0 #ffffff10,0 1px 0 #7fc6dc22; }
#pageView .quest-tabs { margin-top:2px; }
/* Daily reset countdown: centred, with a small clock. */
#pageView .quest-timer { display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 12px; text-align:center; color:#8fb0bf; font-size:13px; }
#pageView .quest-timer svg { width:15px; height:15px; color:#6fcfe0; }
#pageView .quest-timer b { color:#dceef5; font-weight:600; font-variant-numeric:tabular-nums; }
/* Finished tasks: flat, faded, grey — clearly behind the active ones. */
#pageView .quest-item.is-done {
  background:transparent; border:1px dashed #1f3a46; box-shadow:none; opacity:.6; padding-top:9px; padding-bottom:9px;
}
#pageView .quest-item.is-done .quest-main h3 { color:#8aa2ad; font-weight:600; }
#pageView .quest-item.is-done .quest-reward,#pageView .quest-item.is-done .quest-xp { color:#6f8791; font-weight:600; }
#pageView .quest-item.is-done .quest-reward .ui-icon { filter:grayscale(1) opacity(.7); }
#pageView .quest-item.is-done .quest-rewards { margin-bottom:0; }
#pageView .quest-item.is-done .quest-done-pill { border-color:#2a4550; background:transparent; color:#8aa2ad; }

/* 1.5.6 — Dungeon Chest: first card of the daily tab, gold button, reveal. */
#pageView .dchest {
  display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:10px 12px 10px 6px;
  border:1px solid #5a4520; border-radius:10px;
  background:radial-gradient(ellipse at 18% 50%,#5a43205c 0%,transparent 55%),radial-gradient(ellipse at 50% 40%,#0f3342 0%,#081d27 80%);
  box-shadow:inset 0 3px 7px #000c,0 0 0 1px #e8b84a1f,0 0 16px #e8b84a1a;
}
#pageView .dchest-art { width:92px; height:92px; flex:none; object-fit:contain; filter:drop-shadow(0 6px 6px #000a); }
#pageView .dchest:not(.is-opened) .dchest-art { animation:dchest-idle 2.8s ease-in-out infinite; }
#pageView .dchest-main { flex:1; min-width:0; }
#pageView .dchest-main h3 { margin:0 0 3px; font:700 17px/1.2 "Dig Digits","Kopai Serif",Georgia,"Times New Roman",serif; color:#ffe6ae; text-shadow:0 1px 2px #000; }
#pageView .dchest-main p { margin:0 0 9px; color:#9fb6c1; font-size:12px; }
#pageView .dchest-open,#pageView .dchest-open.action-button {
  display:block; width:100%; min-height:38px; padding:6px 12px; border:1px solid #ffe29a !important; border-radius:8px !important; border-image:none !important;
  background:linear-gradient(180deg,#ffe08a,#e2ab3c 50%,#b77a1c) !important; color:#3a2204 !important;
  font:700 15px/1 "Dig Digits","Kopai Serif",Georgia,serif; text-shadow:0 1px 0 #fff3c466;
  box-shadow:inset 0 1px 0 #fff7d6aa,inset 0 -2px 0 #7a4f1266,0 0 12px #f0c46a55,0 2px 6px #0008 !important;
}
#pageView .dchest-open > .shared-metal-frame,#pageView .dchest-open .ui-icon { display:none !important; }
#pageView .dchest-open:disabled { opacity:.75; }
#pageView .dchest.is-opened { border-color:#1f3a46; box-shadow:inset 0 3px 7px #000c,0 1px 0 #7fc6dc22; background:radial-gradient(ellipse at 50% 40%,#0f3342 0%,#081d27 80%); }
#pageView .dchest.is-opened .dchest-art { opacity:.8; }
#pageView .dchest.is-opened .dchest-main h3 { color:#c9d9e0; }
#pageView .dchest.is-opened .dchest-main p { margin-bottom:5px; }
#pageView .dchest-got { display:inline-flex; align-items:center; gap:6px; color:#eaf5fa; font-size:14px; font-weight:700; }
#pageView .dchest-got .ui-icon { width:26px; height:26px; }
@keyframes dchest-idle { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-3px) rotate(-1.5deg); } }

#sheet[data-type="daily-chest"] .dchest-reveal { text-align:center; padding:4px 0 2px; }
.dchest-stage { position:relative; width:220px; height:200px; margin:0 auto 6px; }
.dchest-reveal-chest { position:absolute; left:0; right:0; bottom:0; width:220px; height:220px; object-fit:contain; animation:dchest-pop .45s cubic-bezier(.2,1.4,.4,1) both; filter:drop-shadow(0 10px 10px #000a); }
.dchest-glow { position:absolute; left:50%; top:46%; width:170px; height:170px; margin:-85px 0 0 -85px; border-radius:50%;
  background:radial-gradient(circle,#ffe7a0cc 0%,#f0c46a55 35%,transparent 70%); animation:dchest-glow 1.1s ease-out .15s both; pointer-events:none; }
.dchest-prize { position:absolute; left:50%; top:40%; width:86px; height:86px; margin:-43px 0 0 -43px; animation:dchest-rise .7s cubic-bezier(.2,1.2,.4,1) .25s both; filter:drop-shadow(0 0 12px #ffe7a0) drop-shadow(0 6px 6px #000a); }
.dchest-prize .ui-icon,.dchest-prize img { width:86px !important; height:86px !important; }
.dchest-name { margin:4px 0 2px; font:700 22px/1.2 "Dig Digits","Kopai Serif",Georgia,"Times New Roman",serif; color:#fff0cf; text-shadow:0 2px 2px #000; animation:dchest-fade .4s ease-out .6s both; }
.dchest-name b { color:#ffd177; }
.dchest-sub { margin:0 0 14px; color:#9fb6c1; font-size:13px; animation:dchest-fade .4s ease-out .7s both; }
#sheet .dchest-ok,#sheet .dchest-ok.action-button {
  display:block; width:100%; min-height:40px; border:1px solid #d9b26a !important; border-radius:8px !important; border-image:none !important;
  background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22) !important; color:#fff4dc !important; font:700 15px/1 "Dig Digits","Kopai Serif",Georgia,serif;
}
#sheet .dchest-ok > .shared-metal-frame,#sheet .dchest-ok .ui-icon { display:none !important; }
@keyframes dchest-pop { 0% { transform:scale(.7); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes dchest-glow { 0% { transform:scale(.3); opacity:0; } 40% { opacity:1; } 100% { transform:scale(1.15); opacity:.55; } }
@keyframes dchest-rise { 0% { transform:translateY(60px) scale(.3); opacity:0; } 100% { transform:translateY(-6px) scale(1); opacity:1; } }
@keyframes dchest-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { #pageView .dchest-art,.dchest-reveal-chest,.dchest-glow,.dchest-prize,.dchest-name,.dchest-sub { animation:none !important; } }
/* Prize floats above the opened chest. */
.dchest-stage { height:250px; }
.dchest-reveal-chest { width:200px; height:200px; left:10px; }
.dchest-glow { top:24%; }
.dchest-prize { top:22%; width:92px; height:92px; margin:-46px 0 0 -46px; }
.dchest-prize .ui-icon,.dchest-prize img { width:92px !important; height:92px !important; }
/* Prize sits just above the chest rim, closer to the chest. */
.dchest-stage { height:230px; }
.dchest-glow { top:40%; }
.dchest-prize { top:37%; }
@keyframes dchest-rise { 0% { transform:translateY(40px) scale(.3); opacity:0; } 100% { transform:translateY(0) scale(1); opacity:1; } }
/* 1.5.6 — close button of every sheet as the same small recessed well used in
   the backpack and item card. */
#sheet:not([data-type="bag"]) .sheethead #closeSheet {
  width:30px; height:30px; min-width:30px; min-height:30px; padding:0; display:grid; place-items:center;
  background:#081d27; border:1px solid #0a1a22; border-radius:8px; border-image:none;
  box-shadow:inset 0 3px 6px #000c,0 1px 0 #7fc6dc22;
}
#sheet:not([data-type="bag"]) .sheethead #closeSheet > .shared-metal-frame { display:none !important; }
#sheet:not([data-type="bag"]) .sheethead #closeSheet:hover { border-color:#2f6474; }
#sheet:not([data-type="bag"]) .sheethead #closeSheet::after { width:12px; height:12px; }
/* Dungeon chest window: chest icon before the title, title centred on the close button. */
#sheet[data-type="daily-chest"] > .sheethead { display:flex; align-items:center; }
#sheet[data-type="daily-chest"] > .sheethead h2 { display:flex; align-items:center; gap:8px; margin:0; line-height:1.2; }
#sheet[data-type="daily-chest"] > .sheethead h2::before {
  content:""; flex:none; width:34px; height:34px;
  background:url('/assets/ui-v156/dungeon-chest-closed.webp') center/contain no-repeat; filter:drop-shadow(0 2px 3px #0009);
}
/* Title icon: tight-cropped chest, sized and centred on the text line. */
#sheet[data-type="daily-chest"] > .sheethead h2::before {
  width:34px; height:30px; background-image:url('/assets/ui-v156/dungeon-chest-icon.webp'); background-position:center; background-size:contain;
}
#sheet[data-type="daily-chest"] > .sheethead h2::before { width:40px; height:28px; }

/* 1.5.6 — depth pill: a small translucent tab stuck to the left edge of the
   mine (variant A), down-arrow + depth. No metal frame. */
#mapButton.depthpill {
  top:10px; left:0; right:auto; min-width:0; min-height:30px; height:30px;
  padding:0 11px 0 9px; gap:4px; align-items:center;
  border:1px solid #5fc3d433; border-left:0; border-image:none !important; border-radius:0 10px 10px 0;
  background:linear-gradient(180deg,#0b3442ee,#05202bf2);
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 3px 10px #0007; filter:none;
}
#mapButton.depthpill > .shared-metal-frame { display:none !important; }
#mapButton .depth-arrow { width:12px; height:12px; flex:none; color:#8fd9e6; }
#mapButton.depthpill b { font-size:14px; color:#fff; }
#mapButton.depthpill span { font-size:8px; color:#8fb9c9; }

/* 1.5.6 — bottom sheets float: 8px from the screen sides and the bottom, plus
   the iPhone home-indicator area, so the frame never touches the edges and the
   last button stays clear of the gesture bar. */
#sheet:not([data-type="bag"]) {
  width:calc(100% - 16px); max-width:520px;
  bottom:calc(8px + env(safe-area-inset-bottom)); margin:0 auto;
  max-height:calc(85dvh - env(safe-area-inset-bottom));
}

/* 1.5.6 — craftsman portrait before the «Ремесленник» title (like the chest). */
#sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"]) > .sheethead { display:flex; align-items:center; }
#sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"]) > .sheethead h2 { display:flex; align-items:center; gap:8px; margin:0; line-height:1.2; }
#sheet[data-type="artisan"] > .sheethead h2::before {
  content:""; flex:none; width:40px; height:40px; margin:-4px 0;
  background:url('/assets/ui-v156/artisan-icon.webp') center/contain no-repeat; filter:drop-shadow(0 2px 3px #0009);
}

/* 1.5.6 — craftsman tabs: plain text tabs like the backpack, active one glows
   with a light underline; a small gold dot marks a piece that can be upgraded. */
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="expeditions"]) .artisan-tabs {
  display:flex; margin:0 4px 12px; padding:0; position:relative; border-bottom:1px solid #8cc3d61f;
}
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="expeditions"]) .artisan-tab {
  position:relative; flex:1; min-height:34px; padding:4px 2px 9px; border:0; border-radius:0; border-image:none;
  background:none; box-shadow:none; color:#6f8d9b; font-size:13px; font-weight:600; letter-spacing:.3px; cursor:pointer;
}
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="expeditions"]) .artisan-tab > .shared-metal-frame { display:none !important; }
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="expeditions"]) .artisan-tab:hover { color:#cfe6ef; }
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="expeditions"]) .artisan-tab.is-active { color:#f1fbff; text-shadow:0 0 8px #56e6ff88; }
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="expeditions"]) .artisan-tab.is-active::after {
  content:''; position:absolute; left:14%; right:14%; bottom:-1px; height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,transparent,#4fe6f7 20%,#c9fbff 50%,#4fe6f7 80%,transparent); box-shadow:0 0 10px #3fe3f5cc;
}
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="expeditions"]) .artisan-ready {
  position:absolute; top:4px; right:calc(50% - 30px); width:6px; height:6px; border-radius:50%;
  background:#f0c46a; box-shadow:0 0 6px #f0c46aaa;
}
@media(max-width:350px) { :is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="expeditions"]) .artisan-tab { font-size:12px; } }
/* Same card height on every craftsman tab: the effect line reserves two lines. */
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"]) .craft-heading p { min-height:2.9em; }
/* Coin row keeps its height with or without the "Не хватает" line. */
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"]) .recipe-coins .recipe-ingredient { min-height:42px; }

/* 1.5.6 — craftsman "Улучшить": the same solid bronze button as «Продать»
   (no metal frame, no icon), with the success state. */
.artisan-go {
  position:relative; display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  min-height:40px; margin-top:4px; padding:0 12px; overflow:hidden; isolation:isolate; cursor:pointer;
  border:1px solid #d9b26a; border-radius:8px; border-image:none;
  background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22);
  box-shadow:inset 0 1px 0 #ffe3a866,inset 0 -2px 0 #0003,0 2px 6px #0007;
  color:#fff4dc; font:700 16px/1 "Dig Digits","Kopai Serif",Georgia,serif; text-shadow:0 1px 1px #3a2408;
}
.artisan-go > .shared-metal-frame { display:none !important; }
.artisan-go:disabled { opacity:.5; cursor:default; }
.artisan-go.is-success,.artisan-go.is-success:disabled {
  opacity:1; border-color:#f3d48f; background:linear-gradient(180deg,#c99a55,#9a6f37 55%,#7a5427);
  box-shadow:inset 0 1px 0 #fff0c888,0 0 14px #f0c46a66,0 2px 6px #0007; animation:item-success-pop .32s ease-out;
}
.artisan-go.is-success::after {
  content:''; position:absolute; top:-20%; bottom:-20%; left:0; width:38%; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff6dd00 10%,#fff6ddaa 50%,#fff6dd00 90%,transparent);
  transform:translateX(-130%) skewX(-20deg); animation:item-success-sheen .45s ease-out .05s both;
}
.artisan-go > * { position:relative; z-index:1; }
.artisan-check { width:20px; height:20px; flex:none; }
@media(prefers-reduced-motion:reduce) { .artisan-go.is-success,.artisan-go.is-success::after { animation:none; } }

/* 1.5.6 — craftsman card: a recessed panel (like backpack slots) instead of a
   second metal frame inside the window frame. */
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="pirate"]) .craft-card {
  border:1px solid #0a1a22 !important; border-image:none !important; border-radius:10px !important;
  background:#081d27 !important; box-shadow:inset 0 3px 8px #000b,0 1px 0 #7fc6dc22 !important;
  padding:14px !important; margin:0 !important;
}
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"],#sheet[data-type="pirate"]) .craft-card > .shared-metal-frame { display:none !important; }

/* 1.5.6 — craftsman's line under the title. */
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"]) .artisan-intro { margin:-2px 4px 12px; color:#8fa9b6; font-size:13px; line-height:1.4; }
/* Source buttons (Добыть / Создать / От N м): turquoise pill with the usual
   8px corner radius, no metal frame; locked ones are grey with a padlock. */
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"]) .recipe-ingredient .resource-find {
  min-height:30px; padding:0 12px; border:1px solid #4fe0ee88 !important; border-image:none !important; border-radius:8px !important;
  background:#4fe0ee14 !important; box-shadow:none !important; filter:none; color:#8fe9f5; font:600 12px/1 "Dig Digits",system-ui,sans-serif;
}
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"]) .recipe-ingredient .resource-find > .shared-metal-frame { display:none !important; }
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"]) .recipe-ingredient .resource-find:disabled { opacity:1; color:#6f8d9b; background:transparent !important; border-color:#8cc3d633 !important; }
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"]) .recipe-ingredient .resource-find:disabled::before {
  content:""; display:inline-block; width:11px; height:11px; margin-right:5px; vertical-align:-1px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 1.5.6 — "?" help button beside the close button and its popover. */
#sheet:not([data-type="bag"]) .sheethead { gap:8px; }
#sheet .sheethead .sheet-help {
  flex:none; margin-left:auto; width:30px; height:30px; min-width:30px; min-height:30px; padding:0; display:grid; place-items:center;
  background:#081d27; border:1px solid #0a1a22; border-radius:8px; border-image:none;
  box-shadow:inset 0 3px 6px #000c,0 1px 0 #7fc6dc22; color:#8fd9e6; font:700 16px/1 "Dig Digits","Kopai Serif",Georgia,serif; cursor:pointer;
}
#sheet .sheethead .sheet-help > .shared-metal-frame { display:none !important; }
#sheet .sheethead .sheet-help[aria-expanded="true"],#sheet .sheethead .sheet-help:hover { border-color:#2f6474; color:#c9fbff; }
#sheet .sheet-help-pop {
  position:absolute; z-index:5; top:62px; right:14px; left:14px; max-width:360px; margin-left:auto;
  padding:14px 16px; border:1px solid #5fc3d440; border-radius:10px;
  background:linear-gradient(180deg,#0e3040f5,#07202bf7); box-shadow:0 10px 30px #000c;
  color:#d7ebf3; font-size:13px; line-height:1.45; animation:sheet-help-in .16s ease-out;
}
#sheet .sheet-help-pop h3 { margin:0 0 6px; font-size:15px; color:#fff; }
#sheet .sheet-help-pop p { margin:0 0 8px; }
#sheet .sheet-help-pop ul { margin:0 0 8px; padding-left:18px; }
#sheet .sheet-help-pop li { margin:3px 0; }
#sheet .sheet-help-pop li b { color:#fff4dc; }
#sheet .sheet-help-pop .muted { margin:0; color:#8fa9b6; font-size:12px; }
@keyframes sheet-help-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { #sheet .sheet-help-pop { animation:none; } }

/* 1.5.6 — alchemist: portrait before the title; four ingredient rows reserved
   so switching elixir tabs never changes the window height. */
#sheet[data-type="alchemy"] > .sheethead h2::before {
  content:""; flex:none; width:40px; height:40px; margin:-4px 0;
  background:url('/assets/ui-v156/alchemist-icon.webp') center/contain no-repeat; filter:drop-shadow(0 2px 3px #0009);
}
#sheet[data-type="alchemy"] .craft-card .recipe-ingredients { min-height:calc(4 * 30px + 3 * 5px); align-content:start; }
/* "В рюкзаке: N шт." bottom-left above the button; «Смотреть» opens the elixir card. */
#sheet:is([data-type="alchemy"],[data-type="pirate"]) .alchemy-owned-row { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; margin:6px 0 12px; color:#8fa9b6; font-size:12px; }
#sheet[data-type="alchemy"] .alchemy-view {
  min-height:30px; padding:0 12px; border:1px solid #4fe0ee88; border-image:none; border-radius:8px;
  background:#4fe0ee14; box-shadow:none; filter:none; color:#8fe9f5; font:600 12px/1 "Dig Digits",system-ui,sans-serif; cursor:pointer;
}
#sheet[data-type="alchemy"] .alchemy-view > .shared-metal-frame { display:none !important; }
#sheet[data-type="alchemy"] .active-boost { margin:0 4px 10px; }

/* 1.5.6 — windows with tabs (craftsman, alchemist): no divider under the
   title; the tab line alone separates the header. */
#sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"]) > .sheethead { border-bottom:0; padding-bottom:4px; margin-bottom:10px; }

/* 1.5.6 — «Старый пират»: 777 slot. Three recessed reels in a brass frame;
   the result line keeps its height so the window never jumps. */
#sheet[data-type="pirate"] > .sheethead h2::before {
  content:""; flex:none; width:40px; height:40px; margin:-4px 0;
  background:url('/assets/pirate-v156/old-pirate.webp') center/contain no-repeat; filter:drop-shadow(0 2px 3px #0009);
}
/* Brass panel (slot-panel-reels) lies on top; the reels sit under its three
   windows. Positions are the transparent windows of the artwork, in %. */
#sheet[data-type="pirate"] .pirate-machine { position:relative; aspect-ratio:1630/965; margin:0 -4px; }
#sheet[data-type="pirate"] .pirate-machine::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url('/assets/pirate-v156/slot-panel-reels.webp') center/100% 100% no-repeat; filter:drop-shadow(0 2px 5px #000a);
}
#sheet[data-type="pirate"] .pirate-reels { position:absolute; inset:0; }
#sheet[data-type="pirate"] .pirate-reel {
  position:absolute; top:11%; height:76.2%; overflow:hidden;
  background:linear-gradient(180deg,#02090d,#0b2230 30%,#0b2230 70%,#02090d); box-shadow:inset 0 3px 10px #000d,inset 0 -3px 10px #000d;
}
#sheet[data-type="pirate"] .pirate-reel:nth-child(1) { left:5.9%; width:28.6%; }
#sheet[data-type="pirate"] .pirate-reel:nth-child(2) { left:36.1%; width:27.7%; }
#sheet[data-type="pirate"] .pirate-reel:nth-child(3) { left:65.5%; width:28.6%; }
/* Reel curvature: the symbols above and below the win line are cut off by
   the window and fade into the dark, like a drum in a real machine. */
#sheet[data-type="pirate"] .pirate-reel::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,#000b 0%,#0005 12%,transparent 26%,transparent 74%,#0005 88%,#000b 100%);
}
/* A symbol is 50% of the window: the win line in the middle, a quarter of
   each neighbour visible above and below; pictures fill their cells, so a
   reel is never empty. The strip is translated in % of the
   window height (strip height = window height). */
#sheet[data-type="pirate"] .reel-strip { display:flex; flex-direction:column; height:100%; transform:translateY(-25%); }
#sheet[data-type="pirate"] .reel-sym { display:flex; align-items:center; justify-content:center; height:50%; flex:none; min-height:0; }
#sheet[data-type="pirate"] .reel-sym .ui-icon { width:auto; max-width:100%; height:100%; aspect-ratio:1; filter:drop-shadow(0 3px 4px #000b); }
#sheet[data-type="pirate"] .reel-coins { width:auto; max-width:112%; height:112%; object-fit:contain; aspect-ratio:1; filter:drop-shadow(0 3px 4px #000b); }
#sheet[data-type="pirate"] .pirate-reel.is-landing .reel-strip { animation:reel-land .3s ease-out; }
#sheet[data-type="pirate"] .pirate-reel.is-spinning .reel-strip { animation:reel-spin var(--reel-speed,.5s) linear infinite; animation-delay:var(--reel-delay,0s); filter:blur(1.2px); }
#sheet[data-type="pirate"] .pirate-reel.is-win { box-shadow:inset 0 0 18px #ffc24a88,inset 0 3px 10px #000d; }
#sheet[data-type="pirate"] .pirate-win { color:#ffd978; font-weight:700; }
#sheet[data-type="pirate"] .pirate-lose,#sheet[data-type="pirate"] .pirate-hint { color:#8fa9b6; }
/* Message plate: a separate dark translucent plate under the machine, white
   text; one line of fixed height, so the window never jumps. */
#sheet[data-type="pirate"] .pirate-caption {
  display:flex; align-items:center; justify-content:center; height:34px; margin:12px 0 0; padding:0 12px;
  border:1px solid #ffffff14; border-radius:8px; background:#02080ccc; box-shadow:inset 0 1px 3px #000a;
  color:#fff; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden;
}
#sheet[data-type="pirate"] .pirate-caption > span { overflow:hidden; text-overflow:ellipsis; }
/* Names on the left, sums with a coin on the right. */
#sheet[data-type="pirate"] .pirate-sums { margin:14px 4px 14px; display:grid; gap:6px; font-size:13px; color:#8fa9b6; }
#sheet[data-type="pirate"] .pirate-sums > div { display:flex; align-items:center; justify-content:space-between; gap:10px; white-space:nowrap; }
#sheet[data-type="pirate"] .pirate-sum { display:inline-flex; align-items:center; gap:6px; }
#sheet[data-type="pirate"] .pirate-sum b { color:#fff4dc; font-weight:700; font-variant-numeric:tabular-nums; }
#sheet[data-type="pirate"] .pirate-sum img { width:18px; height:18px; }
#sheet[data-type="pirate"] .sheet-help-pop { max-height:calc(100% - 76px); overflow:auto; }
#sheet .sheet-help-pop .pirate-odds { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(6,auto); grid-auto-flow:column; column-gap:14px; list-style:none; padding:0; font-size:12px; }
#sheet .sheet-help-pop .pirate-odds li { display:flex; justify-content:space-between; gap:6px; margin:0; padding:2px 0; border-bottom:1px solid #8cc3d614; white-space:nowrap; }
/* Symbols run downwards; the strip repeats its first 3 symbols at the end,
   so 10 symbols (500%) later the picture is identical — a seamless loop. */
@keyframes reel-spin { from { transform:translateY(-525%); } to { transform:translateY(-25%); } }
@keyframes reel-land { 0% { transform:translateY(-36%); } 70% { transform:translateY(-22%); } 100% { transform:translateY(-25%); } }
@media(prefers-reduced-motion:reduce) { #sheet[data-type="pirate"] .reel-strip { animation:none !important; } }
#sheet[data-type="pirate"] > .sheethead h2 { white-space:nowrap; }
/* Prize over the reels (like the daily chest reveal). */
#sheet[data-type="pirate"] .pirate-prize {
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:radial-gradient(ellipse at 50% 50%,#02080cb3 0%,#02080c8c 75%); cursor:pointer;
}
#sheet[data-type="pirate"] .pirate-prize-glow {
  position:absolute; left:50%; top:40%; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,#ffe7a0aa 0%,#f0c46a44 35%,transparent 70%); opacity:.55;
}
#sheet[data-type="pirate"] .pirate-prize-icon {
  position:relative; z-index:1; width:86px; height:86px;
  filter:drop-shadow(0 0 12px #ffe7a0) drop-shadow(0 6px 6px #000a);
}
#sheet[data-type="pirate"] .pirate-prize-icon .ui-icon,#sheet[data-type="pirate"] .pirate-prize-icon img { width:86px !important; height:86px !important; }
#sheet[data-type="pirate"] .pirate-prize-plate {
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:5px 14px 6px; border-radius:8px;
  background:#030b12eb; border:1px solid #ffd17755; box-shadow:0 4px 12px #0009; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  white-space:nowrap;
}
#sheet[data-type="pirate"] .pirate-prize-plate b { font:700 18px/1.15 "Dig Digits","Kopai Serif",Georgia,serif; color:#ffd978; text-shadow:0 2px 2px #000; }
#sheet[data-type="pirate"] .pirate-prize-plate span { color:#fff4dc; font-size:12px; line-height:1.3; }
/* Animated only on the reveal render (.is-new), not on later redraws. */
#sheet[data-type="pirate"] .pirate-prize.is-new { animation:dchest-fade .25s ease-out both; }
#sheet[data-type="pirate"] .pirate-prize.is-new .pirate-prize-glow { animation:dchest-glow 1.1s ease-out both; }
#sheet[data-type="pirate"] .pirate-prize.is-new .pirate-prize-icon { animation:dchest-rise .6s cubic-bezier(.2,1.2,.4,1) .1s both; }
#sheet[data-type="pirate"] .pirate-prize.is-new .pirate-prize-plate { animation:dchest-fade .3s ease-out .15s both; }
@media(prefers-reduced-motion:reduce) { #sheet[data-type="pirate"] .pirate-prize,#sheet[data-type="pirate"] .pirate-prize > * { animation:none !important; } }
/* Anticipation: the first two reels match — the last one glows and spins on. */
#sheet[data-type="pirate"] .pirate-reel.is-tense { animation:reel-tense .6s ease-in-out infinite alternate; }
@keyframes reel-tense { from { box-shadow:inset 0 0 6px #ffc24a44,inset 0 3px 10px #000d; } to { box-shadow:inset 0 0 22px #ffc24acc,inset 0 0 0 2px #ffd36e99; } }
/* Big win (x25+): coins burst from the middle of the machine. */
#sheet[data-type="pirate"] .pirate-burst { position:absolute; left:50%; top:45%; z-index:0; width:0; height:0; pointer-events:none; }
#sheet[data-type="pirate"] .pirate-burst img {
  position:absolute; left:-10px; top:-10px; height:auto; filter:drop-shadow(0 2px 2px #000a); opacity:0;
  animation:pirate-coin 1.3s cubic-bezier(.15,.7,.4,1) both;
}
@keyframes pirate-coin {
  0% { transform:translate(0,0) scale(.4) rotate(0); opacity:0; }
  12% { opacity:1; }
  70% { opacity:1; }
  100% { transform:translate(var(--dx),calc(var(--dy) + 60px)) scale(1) rotate(var(--rot)); opacity:0; }
}
@media(prefers-reduced-motion:reduce) { #sheet[data-type="pirate"] .pirate-reel.is-tense { animation:none; box-shadow:inset 0 0 18px #ffc24a99; } #sheet[data-type="pirate"] .pirate-burst { display:none; } }
@media(max-width:350px) { #sheet[data-type="pirate"] .pirate-caption { font-size:12.5px; } }

/* 1.5.6 — town v156: tap zones and name plates live in a layer with exactly
   the picture's box, so they stay on the masters whatever the screen shape. */
/* The town scrolls vertically inside the scene; the layer keeps 2:3, its size
   is set by layoutCity(). */
/* Fixed view: no user scrolling; layoutCity() sets the offset in code. */
.city-scene .city-scroll { position:absolute; inset:0; overflow:hidden; }
.city-scene .city-scroll::-webkit-scrollbar { display:none; }
.city-scene .city-layer { position:relative; width:100%; aspect-ratio:1080/1920; }
.city-scene .city-layer .city-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; z-index:0; }
.city-scene::before { z-index:2; }
.city-scene .city-zone { position:absolute; z-index:1; padding:0; margin:0; border:0; border-radius:40% 40% 12px 12px; background:transparent; box-shadow:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.city-scene .city-zone > .shared-metal-frame, .city-scene .city-zone::before, .city-scene .city-zone::after { display:none !important; }
.city-scene::before { background:linear-gradient(#05131c77,transparent 16%,transparent 90%,#05131c99); }
/* Name plate: small, in the colours of the picture — a dark translucent plate,
   gold text, thin gold rim (like the pirate prize plate). */
.city-scene .city-layer .city-service {
  z-index:3; top:var(--city-y); transform:translateX(-50%); width:auto; max-width:none; min-width:0; min-height:0;
  padding:4px 10px 5px; white-space:nowrap; border-radius:8px; isolation:auto;
}
.city-scene .city-layer .city-service::before, .city-scene .city-layer .city-service::after, .city-scene .city-layer .city-service > .shared-metal-frame { display:none !important; }
.city-scene .city-layer .city-service:active:not(:disabled) { transform:translateX(-50%) translateY(1px); }
.city-scene .city-layer .city-service b { font:700 12.5px/1.2 "Dig Digits","Kopai Serif",Georgia,serif; letter-spacing:.2px; }
.city-scene .city-layer .city-service { background:#0a0d10b8; border:1px solid #d9a44a99; box-shadow:0 2px 6px #000a; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.city-scene .city-layer .city-service b { color:#ffdc8f; text-shadow:0 1px 2px #000; }
/* Tap glow around the master. */
.city-scene .city-glow { position:absolute; z-index:2; width:34%; aspect-ratio:1/1.6; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse,#ffe7a0aa 0%,#ffcf6a44 40%,transparent 70%); mix-blend-mode:screen; animation:city-glow .5s ease-out both; }
@keyframes city-glow { 0% { opacity:0; transform:translate(-50%,-50%) scale(.6); } 35% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.15); } }
@media(max-width:350px) { .city-scene .city-layer .city-service { padding:3px 8px 4px; } .city-scene .city-layer .city-service b { font-size:11.5px; } }

/* 1.5.6 — shop tabs: plain text tabs with a glowing underline (as the craftsman). */
#pageView .shop-tabbar { display:flex; margin:4px 4px 14px; border-bottom:1px solid #8cc3d61f; }
#pageView .shop-tab {
  position:relative; flex:1; min-height:40px; padding:6px 2px 10px; border:0; border-radius:0; border-image:none;
  background:none; box-shadow:none; color:#6f8d9b; font-size:15px; font-weight:600; letter-spacing:.3px; cursor:pointer;
}
#pageView .shop-tab > .shared-metal-frame { display:none !important; }
#pageView .shop-tab.is-active { color:#f1fbff; text-shadow:0 0 8px #56e6ff88; }
#pageView .shop-tab.is-active::after {
  content:''; position:absolute; left:14%; right:14%; bottom:-1px; height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,transparent,#4fe6f7 20%,#c9fbff 50%,#4fe6f7 80%,transparent); box-shadow:0 0 10px #3fe3f5cc;
}

/* 1.5.6 — character showcase in the shop. */
#pageView .showcase { text-align:center; padding:0 4px; }
#pageView .showcase-stage {
  position:relative; height:clamp(170px, calc(100dvh - var(--header-height) - var(--nav-height) - 234px), 500px);
  margin:-4px -12px 0; overflow:hidden; touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
#pageView .showcase-glow { position:absolute; left:50%; top:50%; height:100%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side,#2f86a866 0%,#15475a33 55%,transparent 100%); pointer-events:none; }
#pageView .showcase-floor { position:absolute; left:50%; bottom:3%; width:58%; height:11%; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse,#7ff0ff88 0%,#2b8aa044 45%,transparent 72%); pointer-events:none; }
#pageView .showcase-main { position:absolute; left:50%; bottom:4%; height:97%; transform:translateX(-50%); object-fit:contain;
  filter:drop-shadow(0 10px 14px #000b); pointer-events:none; }
#pageView .showcase-side { position:absolute; bottom:8%; height:66%; object-fit:contain; opacity:.55; filter:brightness(.6) saturate(.8); pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent); mask-image:linear-gradient(90deg,#000 55%,transparent); }
#pageView .showcase-side.is-left { left:50%; transform:translateX(-138%); -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%); mask-image:linear-gradient(90deg,transparent 0%,#000 45%); }
#pageView .showcase-side.is-right { left:50%; transform:translateX(38%); -webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 45%); mask-image:linear-gradient(270deg,transparent 0%,#000 45%); }
/* Arrows: bare gold chevrons with a soft glow, vertically centred on the
   figure (portrait spans 6%…100% of the stage from the bottom → middle 47%). */
#pageView .showcase-arrow {
  position:absolute; top:47%; z-index:2; display:grid; place-items:center; width:44px; height:64px; margin-top:-32px; padding:0;
  border:0; border-image:none; border-radius:0; background:none; box-shadow:none; cursor:pointer; color:#e8c36a;
}
#pageView .showcase-arrow > .shared-metal-frame { display:none !important; }
#pageView .showcase-arrow svg { width:30px; height:44px; filter:drop-shadow(0 0 6px #e8c36aaa) drop-shadow(0 2px 2px #000); }
#pageView .showcase-arrow.is-left { left:6px; }
#pageView .showcase-arrow.is-right { right:6px; }
#pageView .showcase-arrow:active svg { transform:scale(.9); filter:drop-shadow(0 0 10px #ffd76acc) drop-shadow(0 2px 2px #000); }
#pageView .showcase-level { position:absolute; top:8px; right:22px; padding:3px 9px; border-radius:10px; background:#04121acc; border:1px solid #4fe0ee44;
  color:#8fe9f5; font:700 13px/1.2 "Dig Digits",system-ui; }
#pageView .showcase-level small { color:#5f8897; font-weight:600; }
#pageView .showcase-name { margin:6px 0 2px; color:#fff4dc; font:700 22px/1.2 "Dig Digits","Kopai Serif",Georgia,serif; text-shadow:0 2px 3px #000; }
#pageView .showcase-bonus { display:flex; align-items:center; justify-content:center; gap:5px; margin:0; color:#c9c9c9; font-size:14px; }
#pageView .showcase-bonus b { color:#ffd978; font-weight:800; text-shadow:0 0 8px #ffc24a55; }
#pageView .showcase-star { width:17px; height:17px; }
#pageView .showcase-dots { display:flex; justify-content:center; gap:8px; margin:12px 0 14px; }
#pageView .showcase-dot { width:8px; height:8px; min-height:0; padding:0; border:0; border-image:none; border-radius:50%; background:#3a3222; box-shadow:inset 0 0 0 1px #e8c36a22; cursor:pointer; }
#pageView .showcase-dot > .shared-metal-frame { display:none !important; }
#pageView .showcase-dot.is-on { background:#f0cd74; box-shadow:0 0 8px #e8c36acc; transform:scale(1.25); }
#pageView .showcase-cta {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; padding:0 16px;
  border:1px solid #d9b26a; border-image:none; border-radius:8px; background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22);
  box-shadow:inset 0 1px 0 #ffe0a055,0 3px 8px #0009; color:#fff4dc; font:700 17px/1 "Dig Digits","Kopai Serif",Georgia,serif; cursor:pointer;
}
#pageView .showcase-cta > .shared-metal-frame { display:none !important; }
#pageView .showcase-cta img { width:22px; height:22px; }
#pageView .showcase-cta svg { width:20px; height:20px; }
/* Stars: dark glossy — deep night-blue with a glass highlight and a gold rim. */
#pageView .showcase-cta.is-stars {
  position:relative; overflow:hidden; border-color:transparent;
  background:linear-gradient(180deg,#131c2e 0%,#0a1120 48%,#04070e 52%,#080d18 100%) padding-box;
  box-shadow:inset 0 1px 0 #ffffff26,0 0 16px #e8c36a55,0 0 4px #e8c36a66,0 4px 12px #000a;
  color:#ffffff; text-shadow:0 1px 2px #000;
}
#pageView .showcase-cta.is-stars::before { content:""; position:absolute; left:0; right:0; top:0; height:50%; border-radius:8px 8px 40% 40% / 8px 8px 12px 12px;
  background:linear-gradient(180deg,#ffffff1c,#ffffff04); pointer-events:none; }
#pageView .showcase-cta.is-stars::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,#ffffff22,transparent); animation:stars-gloss 3.2s ease-in-out infinite; pointer-events:none; }
#pageView .showcase-cta.is-stars > * { position:relative; z-index:1; }
#pageView .showcase-cta.is-stars img { width:24px; height:24px; filter:drop-shadow(0 0 5px #ffd76a99); }
@keyframes stars-gloss { 0%,60% { left:-40%; } 100% { left:130%; } }
@media(prefers-reduced-motion:reduce) { #pageView .showcase-cta.is-stars::after { animation:none; display:none; } }
/* «Выбран»: inactive, in the style of the pirate's message plate — a dark
   translucent plate with a thin light edge and a soft inner shadow. */
#pageView .showcase-cta.is-owned, #pageView .showcase-cta.is-owned:disabled {
  position:relative; opacity:1; cursor:default; transform:none;
  border:1px solid #ffffff14; background:#02080ccc; box-shadow:inset 0 1px 3px #000a;
  color:#a9a59c; text-shadow:none;
}
#pageView .showcase-cta.is-owned svg { color:inherit; }
/* «Выбрать» (bought, not active): dark gloss with the gold glow. */
#pageView .showcase-cta.is-pick {
  position:relative; overflow:hidden; border-color:transparent; color:#fff; text-shadow:0 1px 2px #000;
  background:linear-gradient(180deg,#131c2e 0%,#0a1120 48%,#04070e 52%,#080d18 100%) padding-box;
  box-shadow:inset 0 1px 0 #ffffff26,0 0 16px #e8c36a55,0 0 4px #e8c36a66,0 4px 12px #000a;
}
#pageView .showcase-cta:disabled:not(.is-owned) { opacity:.55; }
#pageView .showcase-cta:active:not(:disabled) { transform:translateY(1px); }
#pageView .showcase-note { min-height:16px; margin:6px 0 0; color:#7d7a74; font-size:12px; }
#pageView .showcase.slide-next .showcase-main { animation:showcase-in-right .32s cubic-bezier(.2,.8,.3,1); }
#pageView .showcase.slide-prev .showcase-main { animation:showcase-in-left .32s cubic-bezier(.2,.8,.3,1); }
#pageView .showcase.slide-next .showcase-name, #pageView .showcase.slide-prev .showcase-name { animation:showcase-fade .3s ease-out; }
@keyframes showcase-in-right { from { opacity:0; transform:translateX(-10%) scale(.94); } to { opacity:1; transform:translateX(-50%); } }
@keyframes showcase-in-left { from { opacity:0; transform:translateX(-90%) scale(.94); } to { opacity:1; transform:translateX(-50%); } }
@keyframes showcase-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { #pageView .showcase *, #pageView .showcase { animation:none !important; } }
/* Purchases / rules sit below the first screen (scroll down), so the
   character gets the space. */
#pageView .shop-links { margin-top:28px; }
@media(max-height:620px) { #pageView .showcase-note { display:none; } #pageView .showcase-dots { margin:6px 0 8px; } #pageView .showcase-name { font-size:18px; margin-top:2px; } #pageView .showcase-stage { height:calc(100dvh - var(--header-height) - var(--nav-height) - 196px); min-height:130px; } #pageView .showcase-cta { min-height:42px; } #pageView .shop-tabbar { margin-bottom:8px; } }
/* Shop — a darker, premium backdrop: near-black with a faint cool vignette. */
#pageView.is-shop { padding-top:8px; background:radial-gradient(ellipse 120% 70% at 50% 30%,#0b1a24 0%,#050c12 60%,#03070b 100%); }
#pageView.is-shop .showcase-glow { background:radial-gradient(closest-side,#2f86a855 0%,#12404f2b 55%,transparent 100%); }
/* Coins: the same dark gloss as Stars, with a warm bronze glow and rim light. */
#pageView .showcase-cta.is-coins {
  position:relative; overflow:hidden; border-color:transparent;
  background:linear-gradient(180deg,#2a1d12 0%,#170f08 48%,#0b0704 52%,#140d07 100%) padding-box;
  box-shadow:inset 0 1px 0 #ffffff22,0 0 16px #c98a4a55,0 0 4px #d9a15f66,0 4px 12px #000a;
  color:#ffffff; text-shadow:0 1px 2px #000;
}
#pageView .showcase-cta.is-coins::before { content:""; position:absolute; left:0; right:0; top:0; height:50%; border-radius:8px 8px 40% 40% / 8px 8px 12px 12px;
  background:linear-gradient(180deg,#ffffff1c,#ffffff04); pointer-events:none; }
#pageView .showcase-cta.is-coins > * { position:relative; z-index:1; }
#pageView .showcase-cta.is-coins img { width:24px; height:24px; filter:drop-shadow(0 0 5px #ffb45a88); }
/* Pickaxe showcase: tools are wider than tall — smaller, tilted, no floor. */
#pageView .showcase.is-pickaxe .showcase-main { bottom:10%; height:82%; filter:drop-shadow(0 10px 14px #000c) drop-shadow(0 0 18px #ffffff14); }
#pageView .showcase.is-pickaxe .showcase-side { bottom:20%; height:46%; }
#pageView .showcase.is-pickaxe .showcase-floor { bottom:6%; width:44%; }

/* 1.5.6 — active boost cards: a small tab on the right edge of the mine,
   mirroring the depth pill; tap lists the cards with their timers. */
#cardsBadge.cards-badge {
  position:absolute; top:8px; right:0; z-index:2; display:flex; align-items:center; gap:5px;
  height:40px; padding:0 9px 0 10px; border:1px solid #e9c36a38; border-right:0; border-radius:12px 0 0 12px;
  background:linear-gradient(180deg,#0a0c10d0,#000000de);
  box-shadow:0 4px 14px #000a, inset 0 1px #ffe3a01f;
}
#cardsBadge.cards-badge[hidden] { display:none; }
#cardsBadge img { width:21px; height:31px; object-fit:contain; filter:drop-shadow(0 0 4px #ffcf6a55) drop-shadow(0 2px 2px #000c); }
#sheet[data-type="cards"] .card-row { align-items:center; }
#sheet[data-type="cards"] .card-row-art { width:44px; height:66px; object-fit:contain; flex:none; filter:drop-shadow(0 2px 4px #000a); }

/* 1.5.6 — less GPU work while playing (phones were heating up): no blur
   behind the bottom menu, no endless shimmer on the XP/energy bars. */
nav { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.status-meter .bar i::after { animation:none !important; display:none; }

/* 1.5.6 — header, variant B: level ring (XP), large energy, home / friends /
   settings, then three plates: coins, Stars, backpack. Numbers scale with the
   screen and never leave their plate (hudFit in app.js). */
:root { --header-height:116px !important; }
.game-header.hud2 {
  display:block; height:var(--header-height); padding:9px 10px 0; overflow:hidden;
  background:linear-gradient(180deg,#0f1f28,#071118); border:0; border-bottom:1px solid #2a4250;
  border-radius:0 0 16px 16px; box-shadow:0 6px 16px #0008; border-image:none;
  --hud-num:16px; --hud-energy:22px; --hud-icon:32px;
}
.hud2-row { display:flex; align-items:center; gap:7px; height:48px; }
.hud2-level { position:relative; flex:none; width:48px; height:48px; padding:5px; border-radius:50%; background:none; }
.hud2-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.hud2-ring circle { fill:none; stroke-width:4; }
.hud2-ring-track { stroke:#253845; }
.hud2-level.is-empty .hud2-ring-xp { opacity:0; }
.hud2-ring-xp { stroke:#a57cff; stroke-linecap:round; stroke-dasharray:var(--xpn,0) 100; transition:stroke-dasharray .4s; filter:drop-shadow(0 0 2px #a57cff88); }
.hud2-level b { position:relative; display:grid; place-items:center; width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#233847,#0b1720); font:800 18px/1 "Dig Digits",system-ui,sans-serif; color:#fff; box-shadow:0 1px 3px #0009; }
.hud2-level.is-long b { font-size:14px; }
.hud2-energy { flex:1; min-width:0; height:48px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 2px; background:none; text-align:left; }
.hud2-energy-top { display:flex; align-items:center; gap:4px; min-width:0; white-space:nowrap; overflow:hidden; line-height:1; }
.hud2-energy-top svg { flex:none; width:15px; height:18px; fill:#5fd4ec; margin-top:1px; }
.hud2-energy-value { display:flex; align-items:baseline; min-width:0; }
.hud2-energy-value b { font:800 var(--hud-energy)/1 "Dig Digits",system-ui,sans-serif; color:#fff; }
.hud2-energy-value small { margin-left:1px; font:700 12px/1 "Dig Digits",system-ui,sans-serif; color:#8fb9c9; }
.hud2-bar { position:relative; display:block; height:11px; border-radius:6px; background:#08131a; border:1px solid #2b4452; overflow:hidden; }
.hud2-bar i { position:absolute; inset:0 auto 0 0; border-radius:6px; background:linear-gradient(180deg,#5fd4ec,#2a8fb0); transition:width .3s; }
.hud2-bar i.low-air { background:linear-gradient(180deg,#ff8a6a,#c0482d); }
.hud2-icon { flex:none; width:42px; height:42px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#1d3a4a 0,#0f2330 55%,#0a1720 100%); box-shadow:inset 0 0 0 1px #ffffff0d,0 1px 5px #0007; }
/* the gear fills its whole picture edge to edge: a bit smaller so the round plate frames it evenly */
#settingsButton.hud2-icon img { width:31px; height:31px; }
.hud2-icon img { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 1px 2px #000a); }
.hud2-chips { display:flex; gap:6px; margin-top:8px; }
/* resource plates are recessed wells, like the backpack slots */
.hud2-chip { flex:1 1 0; min-width:0; height:42px; display:flex; align-items:center; justify-content:flex-start; gap:6px; padding:0 8px 0 5px;
  border:1px solid #0a1a22; border-radius:9px; background:radial-gradient(ellipse at 50% 45%,#0f3342 0%,#081d27 70%);
  box-shadow:inset 0 3px 7px #000c,inset 0 -1px 0 #ffffff10,0 1px 0 #7fc6dc22; color:#f3f7f9; }
/* widths follow the numbers: app.js sets flex-grow by text length (hudText) */
.hud2-chip img { flex:none; width:var(--hud-icon); height:var(--hud-icon); margin:-2px 0; object-fit:contain; filter:drop-shadow(0 1px 2px #000a); }
.hud2-fit { min-width:0; overflow:hidden; white-space:nowrap; font:700 var(--hud-num)/1 "Dig Digits",system-ui,sans-serif; font-variant-numeric:tabular-nums;
  position:relative; top:.1em; } /* digits have no descenders: nudge them to the optical middle of the well */
@media (max-width:392px) { .game-header.hud2 { --hud-num:14px; --hud-energy:20px; --hud-icon:28px; } .hud2-chip { gap:5px; padding:0 6px 0 4px; } }
@media (max-width:359px) {
  .game-header.hud2 { --hud-num:13px; --hud-energy:18px; --hud-icon:26px; padding-left:8px; padding-right:8px; }
  .hud2-row { gap:5px; } .hud2-chips { gap:5px; } .hud2-chip { gap:4px; padding:0 5px 0 3px; }
  .hud2-icon { width:38px; height:38px; } .hud2-icon img { width:32px; height:32px; } #settingsButton.hud2-icon img { width:28px; height:28px; }
  .hud2-level { width:44px; height:44px; }
}

/* 1.5.6 — «Мой дом» as a full page, in the shop showcase style: the room
   picture, gold chevrons, name, energy rate, gold dots, one button. */
#pageView.is-home { padding-top:8px; min-height:calc(100dvh - var(--header-height) - var(--nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); background:radial-gradient(ellipse 120% 70% at 50% 30%,#0b1a24 0%,#050c12 60%,#03070b 100%); }
#pageView.is-home .shop-tab { cursor:default; display:block; text-align:center; }
#pageView .home-stage {
  position:relative; margin:2px 0 0; border-radius:14px; overflow:hidden; touch-action:pan-y; -webkit-user-select:none; user-select:none;
  height:min(calc((min(100vw, 520px) - 16px) * .8), calc(100dvh - var(--header-height) - var(--nav-height) - 250px)); min-height:150px;
  box-shadow:0 10px 24px #000c, 0 0 0 1px #ffffff12;
}
#pageView .home-stage-art { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
#pageView .home-stage::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg,#000a 0%,transparent 16%,transparent 84%,#000a 100%); }
#pageView .home-stage .showcase-arrow { top:50%; z-index:2; }
#pageView .home-stage .showcase-arrow.is-left { left:2px; }
#pageView .home-stage .showcase-arrow.is-right { right:2px; }
#pageView .home-stage-badge { position:absolute; top:10px; left:10px; z-index:2; padding:4px 10px; border-radius:10px;
  background:#02080ccc; border:1px solid #ffffff1f; color:#ffe7a8; font:700 12px/1.2 "Dig Digits",system-ui,sans-serif; letter-spacing:.3px; }
#pageView .showcase.is-home .showcase-name { margin-top:14px; }
#pageView .showcase.is-home .showcase-dots { margin:14px 0 16px; }
#pageView .showcase.slide-next .home-stage-art { animation:home-in-right .32s cubic-bezier(.2,.8,.3,1); }
#pageView .showcase.slide-prev .home-stage-art { animation:home-in-left .32s cubic-bezier(.2,.8,.3,1); }
#pageView .showcase.home-upgraded .home-stage-art { animation:home-upgrade-reveal 1.1s ease-out; }
@keyframes home-in-right { from { opacity:0; transform:translateX(8%) scale(1.03); } to { opacity:1; transform:none; } }
@keyframes home-in-left { from { opacity:0; transform:translateX(-8%) scale(1.03); } to { opacity:1; transform:none; } }
@media(max-height:620px) { #pageView .showcase.is-home .showcase-name { margin-top:8px; } #pageView .showcase.is-home .showcase-dots { margin:8px 0 10px; } }
/* the header house button shows that its page is open */
.hud2-icon.is-active { box-shadow:inset 0 0 0 1.5px #e8c36a99, 0 0 10px #e8c36a55; }

/* 1.5.6 — every digit in the game uses Dig Sans: this face covers only
   0–9, %, +, /, × and is put first in every font stack, so numbers inside
   any text switch while the letters keep their font. */
@font-face { font-family:"Dig Digits"; src:url("/assets/fonts/dig-sans-light.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0030-0039, U+0025, U+002B, U+002F, U+00D7; }
@font-face { font-family:"Dig Sans"; src:url("/assets/fonts/dig-sans-light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:block; } /* Dig Sans Light: derived from the OFL font by J. Montoreano, SIL OFL 1.1, assets/fonts/dig-sans-OFL.txt */
/* 1.5.6 — loading screen: the Dig Down artwork (portrait 9:16) always fills
   the height; on narrow phones its sides are cropped, on wide screens a
   blurred copy fills the sides. The gold ring sits under the logo. */
#loading.boot { display:block; padding:0; overflow:hidden; background:#05070d; z-index:1000; }
#loading.boot[hidden] { display:none; }
/* the picture always covers the whole screen (no side bars): the 9:16 stage is
   as large as needed to cover, centred; on squarer screens top and bottom are cropped */
.boot-stage { position:absolute; left:50%; top:50%; width:max(100vw, calc(100dvh * 9 / 16)); aspect-ratio:9/16; transform:translate(-50%,-50%); }
.boot-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-select:none; user-select:none; pointer-events:none; }
/* under the logo (67 % of the picture), but never below the screen edge */
.boot-panel { position:absolute; left:0; right:0; top:min(calc(50dvh + .17 * max(177.78vw, 100dvh)), calc(100dvh - 150px - env(safe-area-inset-bottom))); display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 24px; text-align:center; }
.boot-ring { position:relative; width:clamp(68px, 19vw, 88px); height:clamp(68px, 19vw, 88px); border:0; border-radius:50%; animation:none; background:none; margin:0; }
.boot-ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); filter:drop-shadow(0 0 10px #000c); }
.boot-ring circle { fill:#0a0d12cc; stroke-width:6; }
.boot-ring-track { stroke:#3b2a12; }
.boot-ring-fill { fill:none !important; stroke:url(#bootGold); stroke-width:5 !important; stroke-linecap:round; stroke-dasharray:0 100; } /* colours of the DIG DOWN letters: gold face shading to orange and brown */
.boot-ring-rim { fill:none !important; stroke:#5e2c0c; stroke-width:8 !important; stroke-linecap:round; stroke-dasharray:0 100; filter:drop-shadow(0 0 5px #f7b12c88); } /* dark brown edge like the letters' rims */
.boot-ring b { position:absolute; inset:0; display:grid; place-items:center; color:#ffd23f; font:300 clamp(17px, 5vw, 21px)/1 "Dig Digits","Dig Sans","Kopai Serif",sans-serif; font-synthesis:none; letter-spacing:0; text-shadow:0 1px 0 #8a4312, 0 0 1px #5e2c0c, 0 2px 4px #000c; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.boot-ring .boot-pct { display:inline-block; line-height:1; }
.boot-ring .boot-baseline { display:inline-block; width:0; height:0; vertical-align:baseline; } /* exact centring of the ink is done in app.js (bootCenter) for any phone font */
.boot-ring[hidden] { display:none; }
#loading.boot #loadText:empty { display:none; }
#loading.boot #loadText { margin:0; color:#ffe6a6; font:300 17px/1.35 "Dig Digits","Dig Sans",system-ui,sans-serif; font-synthesis:none; letter-spacing:.6px; text-shadow:0 1px 4px #000, 0 0 12px #000; max-width:320px; }
#loading.boot #retryLogin { min-height:44px; padding:0 22px; border-radius:10px; border:1px solid #d9b26a; background:linear-gradient(180deg,#b8894a,#6d4b22); color:#fff4dc; font:700 15px/1 "Dig Digits",system-ui,sans-serif; }
#loading.boot #retryLogin[hidden] { display:none; }
#loading.boot .boot-terms { position:fixed; left:0; right:0; bottom:calc(10px + env(safe-area-inset-bottom)); text-align:center; color:#d6c7a2aa; font-size:11px; text-shadow:0 1px 3px #000; }

/* «Loading game...»: the three dots light up one after another */
.boot-dots i { font-style:normal; opacity:.15; animation:boot-dot 1.2s infinite; }
.boot-dots i:nth-child(2) { animation-delay:.2s; }
.boot-dots i:nth-child(3) { animation-delay:.4s; }
@keyframes boot-dot { 0%, 20% { opacity:.15; } 40%, 70% { opacity:1; } 100% { opacity:.15; } }
@media(prefers-reduced-motion:reduce) { .boot-dots i { animation:none; opacity:1; } }
#pageView .showcase.is-home .home-max { margin:10px 0 14px; }

/* 1.5.6 — Dig Sans Light (the logo's letter style) for headings, names,
   header numbers, big buttons, tabs and the city plates. Long and small text
   (descriptions, notes, the bottom menu labels) keeps the regular fonts. */
.game-header.hud2 .hud2-level b, .hud2-energy-value b, .hud2-energy-value small, .hud2-fit,
#pageView .showcase-name, #pageView .showcase-cta, #pageView .shop-tab, #pageView .quest-tabs button,
#sheet .artisan-tab, #sheet > .sheethead h2, .goldbutton, .goldbutton span, .artisan-go, .artisan-go span, .dchest-open, .dchest-open span, #pageView .dchest h3, .city-scene .city-layer .city-service b, #pageView .home-stage-badge, #mapButton.depthpill b, #pageView .showcase-bonus b, #pageView .quest-timer b {
  font-family:"Dig Digits","Dig Sans","Kopai Serif",sans-serif !important; font-weight:300 !important; font-synthesis:none; letter-spacing:.3px;
}
#pageView .showcase-name { font-size:24px; }
/* «Открыть сундук» in the tasks: white text on the gold button */
#pageView .dchest .dchest-open, #pageView .dchest .dchest-open span { color:#fff !important; text-shadow:0 1px 2px #7a4a0c, 0 0 1px #5e3a08; }
#pageView .showcase-bonus b { font-size:1.08em; }
/* 1.5.6 — all headings in Dig Sans (the logo's letter style) */
h1, h2, h3, h4, .sectiontitle, #itemTitle {
  font-family:"Dig Digits","Dig Sans","Kopai Serif",sans-serif !important; font-weight:300 !important; font-synthesis:none; letter-spacing:.3px;
}

/* 1.5.6 — «Атлас глубин» page: the layers as a vertical shaft. A line runs
   down the left with a node per layer (the layer's colour when open, a lock
   when closed); the current layer glows; open layers are tappable. */
#pageView.is-atlas { padding-top:8px; min-height:calc(100dvh - var(--header-height) - var(--nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); background:radial-gradient(ellipse 120% 70% at 50% 20%,#0b1a24 0%,#050c12 60%,#03070b 100%); }
#pageView.is-atlas .shop-tab { cursor:default; display:block; text-align:center; }
.atlas-stats { display:flex; justify-content:center; gap:8px; margin:0 0 14px; flex-wrap:wrap; }
.atlas-stats span { padding:6px 10px; border-radius:9px; background:radial-gradient(ellipse at 50% 45%,#0f3342 0%,#081d27 70%); border:1px solid #0a1a22; box-shadow:inset 0 3px 7px #000c,0 1px 0 #7fc6dc22; color:#9fb9c6; font-size:12px; white-space:nowrap; }
.atlas-stats b { margin-left:3px; color:#ffd978; font-size:14px; }
.atlas-shaft { position:relative; display:flex; flex-direction:column; gap:8px; padding-left:34px; }
.atlas-shaft::before { content:""; position:absolute; left:14px; top:18px; bottom:18px; width:4px; border-radius:2px; background:#1c2b35; }
.atlas-shaft::after { content:""; position:absolute; left:14px; top:18px; width:4px; height:var(--fill); max-height:calc(100% - 36px); border-radius:2px; background:linear-gradient(180deg,#b87c4d,#789baf,#70e1d2,#ff8860,#e2b96c,#aa8ee8); box-shadow:0 0 8px #70e1d255; }
.atlas-layer { position:relative; display:flex; align-items:center; gap:10px; width:100%; min-height:62px; padding:9px 12px; border-radius:12px; text-align:left; color:inherit; font:inherit;
  background:linear-gradient(180deg,#0f212b,#0a1820); border:1px solid #1f3542; box-shadow:0 2px 6px #0006; }
.atlas-layer > .shared-metal-frame { display:none !important; }
.atlas-node { position:absolute; left:-27px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%; display:grid; place-items:center;
  background:var(--c); box-shadow:0 0 0 3px #050c12, 0 0 10px var(--c); }
.atlas-layer.is-locked .atlas-node { background:#223440; box-shadow:0 0 0 3px #050c12; color:#6d8591; }
.atlas-node svg { width:10px; height:10px; }
.atlas-layer.is-here .atlas-node { width:22px; height:22px; margin-top:-11px; left:-30px; box-shadow:0 0 0 3px #050c12, 0 0 0 5px var(--c), 0 0 16px var(--c); }
.atlas-card { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.atlas-top { display:flex; align-items:baseline; gap:8px; }
.atlas-name { color:#fff4dc; font:300 17px/1.15 "Dig Digits","Dig Sans","Kopai Serif",sans-serif; font-synthesis:none; letter-spacing:.3px; }
.atlas-depth { margin-left:auto; font-style:normal; color:var(--c); font:300 14px/1 "Dig Digits","Dig Sans",sans-serif; white-space:nowrap; }
.atlas-story { color:#8ea8b4; font-size:12px; line-height:1.3; }
.atlas-go { flex:none; min-height:36px; padding:0 13px; border-radius:9px; border:1px solid #e8c36a99; background:linear-gradient(180deg,#1b2a31,#0c1419); box-shadow:inset 0 1px 0 #ffe0a022,0 0 10px #e8c36a33,0 2px 5px #0008; color:#ffe7a8; font:300 14px/1 "Dig Digits","Dig Sans",sans-serif; font-synthesis:none; letter-spacing:.3px; cursor:pointer; }
.atlas-go > .shared-metal-frame { display:none !important; }
.atlas-go:active { transform:translateY(1px); filter:brightness(1.2); }
.atlas-lock svg { width:100%; height:100%; }
.atlas-lock { flex:none; width:16px; height:16px; color:#4e6470; }
.atlas-layer.is-locked { background:#0a151c; border-color:#16242d; box-shadow:none; }
.atlas-layer.is-locked .atlas-name { color:#6f8591; }
.atlas-layer.is-locked .atlas-depth { color:#5d7581; }
.atlas-layer.is-locked .atlas-story { color:#51666f; }
.atlas-layer.is-here { border-color:var(--c); background:linear-gradient(180deg,#123040,#0b1c26); box-shadow:0 0 0 1px var(--c) inset, 0 0 14px #0009; }
.atlas-layer.is-here { box-shadow:0 0 0 1px var(--c) inset, 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.atlas-here { flex:none; padding:4px 8px; border-radius:9px; background:#02080ccc; border:1px solid var(--c); color:#fff; font:300 12px/1 "Dig Digits","Dig Sans",sans-serif; white-space:nowrap; }
.atlas-layer.is-here .atlas-depth { display:none; }
.atlas-note { margin:14px 4px 6px; color:#6f8591; font-size:12px; text-align:center; }
@media (max-width:359px) { .atlas-stats { gap:5px; flex-wrap:nowrap; } .atlas-stats span { padding:5px 6px; font-size:11px; } .atlas-stats b { font-size:12px; margin-left:2px; } .atlas-name { font-size:16px; } }
.atlas-here i { font-style:normal; }
@media (max-width:359px) { .atlas-here i { display:none; } }
@media (max-width:359px) { .atlas-go { padding:0 9px; font-size:13px; min-height:34px; } }
/* atlas stats: always one row of equal tiles — label on top, number below */
.atlas-stats { display:flex !important; flex-wrap:nowrap !important; gap:6px !important; }
.atlas-stats span { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px !important; white-space:nowrap; }
.atlas-stats small { color:#9fb9c6; font-size:11px; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.atlas-stats b { margin:0 !important; font-size:15px !important; }
@media (max-width:359px) { .atlas-stats small { font-size:10px; } .atlas-stats b { font-size:13px !important; } }

/* 1.5.6 — layer travel «teleport»: the screen closes in the new layer's
   colour, two rings pulse out, the name and depth flash, then it opens. */
.layer-warp { position:fixed; inset:0; z-index:900; display:grid; place-items:center; pointer-events:all; opacity:0; overflow:hidden;
  background:radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 14%, color-mix(in srgb, var(--c) 35%, #02060a) 38%, #02060a 72%);
  transition:opacity .38s ease; }
@supports not (background:color-mix(in srgb, red, blue)) { .layer-warp { background:radial-gradient(circle at 50% 48%, #fff 0%, var(--c) 16%, #02060a 70%); } }
.layer-warp[hidden] { display:none; }
.layer-warp.is-in { opacity:1; }
.layer-warp.is-out { opacity:0; }
.layer-warp .warp-ring { position:absolute; left:50%; top:48%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
  border:3px solid var(--c); box-shadow:0 0 18px var(--c), inset 0 0 12px var(--c); opacity:0; }
.layer-warp.is-in .warp-ring { animation:warp-ring 1s ease-out infinite; }
.layer-warp.is-in .warp-ring.r2 { animation-delay:.33s; }
@keyframes warp-ring { 0% { transform:scale(.4); opacity:.95; } 100% { transform:scale(9); opacity:0; } }
.layer-warp .warp-title { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0; transform:scale(.92); transition:opacity .25s ease, transform .35s cubic-bezier(.2,.8,.3,1); }
.layer-warp.show-title .warp-title { opacity:1; transform:none; }
.layer-warp .warp-title b { color:#fff; font:300 30px/1.1 "Dig Digits","Dig Sans","Kopai Serif",sans-serif; font-synthesis:none; letter-spacing:.5px; text-align:center; padding:0 20px;
  text-shadow:0 2px 0 #0008, 0 0 18px var(--c), 0 0 40px var(--c); }
.layer-warp .warp-title span { padding:4px 12px; border-radius:10px; background:#02080ccc; border:1px solid var(--c); color:#fff; font:300 16px/1 "Dig Digits","Dig Sans",sans-serif; box-shadow:0 0 12px var(--c); }
.layer-warp.is-quick, .layer-warp.is-quick .warp-title { transition-duration:.15s; }
.layer-warp.is-quick .warp-ring { display:none; }
/* atlas stats: darker wells than the header plates so they do not merge with the balance above */
.atlas-stats span { background:radial-gradient(ellipse at 50% 40%,#08161d 0%,#03090d 75%) !important; border-color:#050d12 !important; box-shadow:inset 0 3px 8px #000e, 0 1px 0 #7fc6dc18 !important; }

/* 1.5.6 — «Рейтинг»: podium for the top 3, compact rows, your place pinned. */
#pageView.is-rank { padding-top:8px; padding-bottom:70px; min-height:calc(100dvh - var(--header-height) - var(--nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); background:radial-gradient(ellipse 120% 70% at 50% 20%,#0b1a24 0%,#050c12 60%,#03070b 100%); }
.rank-note { margin:0 4px 12px; color:#7f98a4; font-size:12px; text-align:center; }
.podium { display:grid; grid-template-columns:1fr 1.12fr 1fr; align-items:end; gap:6px; margin:4px 0 14px; }
.podium-slot { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; padding:0; border:0; background:none; color:inherit; cursor:pointer; }
.podium-slot > .shared-metal-frame { display:none !important; }
.podium-slot.is-empty { visibility:hidden; }
.podium-slot:active { filter:brightness(1.12); }
.podium-medal { width:58px; height:58px; object-fit:contain; margin-bottom:2px; filter:drop-shadow(0 4px 6px #000a); pointer-events:none; }
.podium-slot.p1 .podium-medal { width:76px; height:76px; filter:drop-shadow(0 0 12px #ffc84a66) drop-shadow(0 4px 6px #000a); }
.podium-name { max-width:100%; padding:0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff4dc; font:300 15px/1.2 "Dig Digits","Dig Sans",sans-serif; text-shadow:0 1px 2px #000; }
.podium-slot.p1 .podium-name { font-size:16px; }
.podium-score { color:#ffd978; font:300 15px/1 "Dig Digits","Dig Sans",sans-serif; white-space:nowrap; margin-bottom:6px; }
.podium-score small, .rank-score small { color:#8ea8b4; font-size:.78em; }
.podium-step { display:block; width:100%; height:auto; object-fit:contain; pointer-events:none; filter:drop-shadow(0 6px 8px #000c); }
.podium-slot.is-me .podium-name { color:#7ff0ff; }
.rank-list { display:flex; flex-direction:column; gap:6px; }
.rank-row { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 12px; border-radius:10px; text-align:left; color:inherit; font:inherit;
  background:linear-gradient(180deg,#0f212b,#0a1820); border:1px solid #1a2e3a; }
button.rank-row { cursor:pointer; }
button.rank-row:active { filter:brightness(1.15); }
.rank-row > .shared-metal-frame { display:none !important; }
.rank-num { flex:none; width:28px; color:#8ea8b4; font:300 15px/1 "Dig Digits","Dig Sans",sans-serif; text-align:center; }
.rank-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e8f1f5; font:300 15px/1.2 "Dig Digits","Dig Sans",sans-serif; }
.rank-score { flex:none; color:#ffd978; font:300 15px/1 "Dig Digits","Dig Sans",sans-serif; white-space:nowrap; }
.rank-you { margin-left:6px; padding:2px 6px; border-radius:6px; background:#0e4a55; color:#9ff4ff; font:300 11px/1 "Dig Sans",sans-serif; font-style:normal; vertical-align:2px; }
.rank-row.is-me { border-color:#3fb7c7; background:linear-gradient(180deg,#0f3340,#0a2029); box-shadow:0 0 12px #3fe3f533; }
.rank-pin { position:sticky; bottom:calc(var(--nav-height) + 8px + env(safe-area-inset-bottom)); z-index:3; margin-top:10px; box-shadow:0 -6px 16px #000c, 0 0 12px #3fe3f544; }
/* friends */
.friend-find { display:flex; gap:8px; margin:0 0 8px; }
.friend-find input { flex:1; min-width:0; height:44px; padding:0 12px; border-radius:10px; border:1px solid #0a1a22; color:#e8f1f5; font-size:15px;
  background:radial-gradient(ellipse at 50% 45%,#0f3342 0%,#081d27 70%); box-shadow:inset 0 3px 7px #000c; outline:none; }
.friend-find input:focus { border-color:#3fb7c7; }
.friend-find-go, .friend-open, .friend-accept { flex:none; min-height:40px; padding:0 14px; border-radius:9px; border:1px solid #e8c36a99; background:linear-gradient(180deg,#1b2a31,#0c1419);
  color:#ffe7a8; font:300 14px/1 "Dig Sans",sans-serif; box-shadow:inset 0 1px 0 #ffe0a022,0 2px 5px #0008; cursor:pointer; }
.friend-find-go { min-height:44px; }
.friend-accept { color:#fff; background:linear-gradient(180deg,#b8894a,#6d4b22); border-color:#d9b26a; }
.friend-find-go > .shared-metal-frame, .friend-open > .shared-metal-frame, .friend-accept > .shared-metal-frame, .friend-invite > .shared-metal-frame { display:none !important; }
.friend-invite { margin:0 0 14px; }
.friend-row { min-height:56px; }
.friend-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.friend-info small { color:#7f98a4; font-size:12px; }
.friend-dot { flex:none; width:10px; height:10px; border-radius:50%; background:#2a3d48; }
.friend-dot.is-on { background:#5fe08a; box-shadow:0 0 8px #5fe08a88; }
.rank-pin.is-hidden { visibility:hidden; }
.rank-more { display:flex; justify-content:center; gap:6px; padding:14px 0 4px; }
.rank-more span { width:7px; height:7px; border-radius:50%; background:#3fb7c7; opacity:.3; animation:boot-dot 1.2s infinite; }
.rank-more span:nth-child(2) { animation-delay:.2s; } .rank-more span:nth-child(3) { animation-delay:.4s; }
.rank-updated { margin:12px 0 0; color:#546b76; font-size:11px; text-align:center; }
/* podium stage: the three steps stand on one shared lit floor, so they read as part of the page, not stickers */
.podium { position:relative; isolation:isolate; margin-bottom:30px; gap:4px; }
/* backlight: a soft teal/gold glow behind the winners, fading into the page */
.podium::before { content:""; position:absolute; left:-8%; right:-8%; top:-6%; bottom:-30px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 50% 38%, #ffc84a1f 0%, #ffc84a00 70%),
             radial-gradient(ellipse 70% 55% at 50% 78%, #2fb6c826 0%, #2fb6c800 75%); }
/* the floor: one wide pool of light + a faint horizon line right at the base of the steps */
.podium::after { content:""; position:absolute; left:-4%; right:-4%; top:calc(100% - 4px); height:36px; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, #6fd8e800, #6fd8e855 30%, #ffe0a066 50%, #6fd8e855 70%, #6fd8e800) top/100% 1px no-repeat,
             radial-gradient(ellipse 50% 100% at 50% 0%, #1d4a5acc 0%, #0e263000 100%); }
.podium-base { position:relative; display:block; width:100%; z-index:1; }
.podium-base .podium-step { position:relative; z-index:2; filter:drop-shadow(0 2px 3px #0008); }
/* contact shadow where each step touches the floor */
.podium-base::before { content:""; position:absolute; left:4%; right:4%; bottom:-3px; height:8px; z-index:1; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, #000b 0%, #0000 70%); pointer-events:none; }
/* reflection: dim, blurred, tinted into the floor colour and fading out fast */
.podium-mirror { position:absolute; left:3%; top:100%; width:94%; height:auto; transform:scaleY(-1); opacity:.55; pointer-events:none; z-index:1;
  mix-blend-mode:screen; filter:blur(3.5px) brightness(.6) saturate(.7);
  -webkit-mask-image:linear-gradient(to top, #000 0%, #0006 35%, transparent 70%); mask-image:linear-gradient(to top, #000 0%, #0006 35%, transparent 70%); }
/* 1.5.6 — player profile: bottom sheet with a round portrait and a level badge */
#sheet:is([data-type="profile"],[data-type="gift"],[data-type="energy"]) { position:fixed; inset:auto 0 0 0; margin:0 auto; width:100%; max-width:480px; max-height:88dvh; box-sizing:border-box;
  padding:10px 16px calc(30px + env(safe-area-inset-bottom)); border:0; border-top:1px solid #6fd8e83a; border-radius:22px 22px 0 0;
  background:radial-gradient(ellipse 80% 38% at 50% 0%, #1d4a5a 0%, #10293400 100%), linear-gradient(#0e222c, #07141b 70%);
  box-shadow:0 -12px 40px #000c; animation:pf-up .26s cubic-bezier(.2,.8,.25,1); transition:transform .18s; touch-action:pan-y; }
#sheet:is([data-type="profile"],[data-type="gift"],[data-type="energy"])::backdrop { background:#020b12b8; }
#sheet:is([data-type="profile"],[data-type="gift"],[data-type="energy"]) > .shared-metal-frame { display:none !important; }
#sheet:is([data-type="profile"],[data-type="gift"],[data-type="energy"]) > .sheethead { position:absolute; top:12px; right:14px; margin:0; padding:0; border:0; min-height:0; z-index:3; }
#sheet:is([data-type="profile"],[data-type="gift"],[data-type="energy"]) > .sheethead h2 { display:none; }
#sheet:is([data-type="profile"],[data-type="gift"],[data-type="energy"]) > #sheetBody { padding:0; }
@keyframes pf-up { from { transform:translateY(100%); } to { transform:none; } }
.pf { display:flex; flex-direction:column; align-items:center; text-align:center; }
.pf-grab { width:42px; height:5px; border-radius:3px; background:#8fb4c255; margin:0 0 14px; }
.pf-avatar { --ring:#3fb7c7; --ring2:#1b5968; position:relative; width:128px; height:128px; flex:none; border-radius:50%; padding:4px;
  background:conic-gradient(from 200deg, var(--ring), var(--ring2), var(--ring), var(--ring2), var(--ring)); box-shadow:0 0 22px color-mix(in srgb, var(--ring) 35%, transparent), 0 8px 18px #000a; }
.pf-avatar.is-gold { --ring:#ffd66b; --ring2:#9a6414; }
.pf-avatar.is-silver { --ring:#e6eef3; --ring2:#6e8290; }
.pf-avatar.is-bronze { --ring:#f0a66a; --ring2:#7a3d1a; }
.pf-photo { display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; position:relative;
  background:radial-gradient(circle at 50% 42%, #0b1a20 0%, #03090c 62%, #000 100%); }
/* recessed well: the inner shadow sits above the portrait so it reads as a hole, like the header cells */
.pf-photo::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:1;
  box-shadow:inset 0 6px 14px #000, inset 0 0 0 2px #000, inset 0 -1px 0 #ffffff12; }
/* head + shoulders of the 512×768 shop portrait (crop 106..406 × 24..324) */
.pf-photo img { position:absolute; width:170.7%; height:auto; left:-35.3%; top:-8%; max-width:none; }
.pf-level { position:absolute; z-index:3; right:-2px; bottom:4px; min-width:38px; height:38px; padding:0 6px; box-sizing:border-box; border-radius:19px; display:grid; place-items:center;
  background:radial-gradient(circle at 40% 30%, #2b5a6b, #0b2029 75%); border:2px solid var(--ring); box-shadow:0 0 0 3px #07141b, 0 3px 6px #000a;
  color:#fff4dc; font:300 18px/1 "Dig Digits","Dig Sans",sans-serif; }
.pf-name { margin:12px 0 2px; color:#fff4dc; font:300 24px/1.15 "Dig Sans",sans-serif; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 2px 2px #000; }
.pf-place { display:inline-flex; align-items:center; gap:6px; margin:2px 0 0; color:#fff; font-size:14px; }
.pf-place img { width:22px; height:22px; object-fit:contain; }
.pf-place b { color:#ffd978; font:300 15px/1 "Dig Digits","Dig Sans",sans-serif; }
/* stats and gear sit in the same dark recessed cells as the header balance */
.pf { --pf-cell:radial-gradient(ellipse at 50% 40%, #0a2631 0%, #051319 72%); --pf-cell-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d, 0 1px 0 #7fc6dc1c; }
.pf-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; width:100%; margin:16px 0 0; }
.pf-stats > div { display:flex; flex-direction:column; align-items:center; gap:11px; min-width:0; }
.pf-stats b { display:block; text-align:center; line-height:42px !important; width:100%; height:44px; box-sizing:border-box; padding:0 4px; border:1px solid #030c11; border-radius:11px;
  background:var(--pf-cell); box-shadow:var(--pf-cell-shadow);
  color:#ffd978; font-family:"Dig Digits","Dig Sans",sans-serif; font-weight:300; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-stats b small { color:#8ea8b4; font-size:.72em; }
.pf-stats span { color:#8ea8b4; font-size:11px; }
.pf-gear { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; width:100%; margin:20px 0 4px; }
.pf-gear .pf-cell { gap:14px; }
.pf-cell { display:flex; flex-direction:column; align-items:center; gap:11px; min-width:0; }
.pf-slot { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; box-sizing:border-box; border:1px solid #030c11; border-radius:12px;
  background:var(--pf-cell); box-shadow:var(--pf-cell-shadow); }
.pf-slot .ui-icon { width:62%; height:62%; filter:drop-shadow(0 3px 3px #000a); }
.pf-slot b { position:absolute; right:6px; bottom:4px; color:#ffd978; font:300 16px/1 "Dig Digits","Dig Sans",sans-serif; text-shadow:0 1px 2px #000, 0 0 3px #000; }
.pf-cell small { color:#8ea8b4; font-size:11px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-actions { width:100%; margin:32px 0 0; display:flex; flex-direction:column; gap:8px; }
.pf-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pf-note { color:#7ff0ff; font-size:14px; }
/* profile buttons: dark plates with a thin rim, gold rim for the main one (same family as «Перейти» in the atlas) */
.pf-btn { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; padding:0 12px; box-sizing:border-box;
  border:1px solid #3c6a7a; border-radius:12px; background:linear-gradient(180deg, #16272f, #0a151a); box-shadow:inset 0 1px 0 #ffffff14, 0 3px 8px #0009;
  color:#e8f3f7; font:300 15px/1.1 "Dig Sans",sans-serif; font-synthesis:none; letter-spacing:.2px; cursor:pointer; overflow:hidden; }
.pf-btn > .shared-metal-frame { display:none !important; }
.pf-btn:active { transform:translateY(1px); filter:brightness(1.2); }
.pf-btn.is-main { border-color:#5fe3f0aa; background:linear-gradient(180deg, #14505c, #0a2a33); box-shadow:inset 0 1px 0 #9ff4ff33, 0 0 14px #3fd8e833, 0 3px 8px #0009; color:#eafcff; font-size:16px; }
.pf-btn span { min-width:0; }
.pf-btn-icon { flex:none; display:grid; place-items:center; width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 2px 2px #000a); }
.pf-btn-icon .ui-icon { width:30px; height:30px; }
.pf-row .pf-btn { font-size:14px; gap:4px; padding:0 8px; }
/* head + shoulders, same crop as the profile portrait, no ring; fades out at the bottom */
.pf-btn-char { position:relative; flex:none; width:36px; height:36px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
.pf-btn-char img { position:absolute; width:170.7%; height:auto; left:-35.3%; top:-8%; max-width:none; filter:drop-shadow(0 2px 2px #000a); }
@media (max-width:359px) { .pf-btn { font-size:13px; gap:5px; padding:0 8px; } .pf-btn.is-main { font-size:15px; } }
/* 1.5.6 — gift sheet: same bottom sheet as the profile */
.gift { display:flex; flex-direction:column; align-items:center; }
.gift-title { display:flex; align-items:center; gap:8px; margin:0 0 12px; color:#e8f3f7; font:300 19px/1.2 "Dig Sans",sans-serif; }
.gift-title b { color:#fff4dc; font-weight:300; }
.gift-title .gift-icon { width:24px; height:24px; }
.gift-tabs { display:flex; justify-content:center; gap:4px; width:100%; margin:0 0 12px; border-bottom:1px solid #81bdd22b; }
.gift-tab { flex:1; padding:9px 4px 10px; border:0; background:none; color:#7f9ca8; font:300 15px/1 "Dig Sans",sans-serif; cursor:pointer; position:relative; }
.gift-tab.is-active { color:#fff; }
.gift-tab.is-active::after { content:""; position:absolute; left:22%; right:22%; bottom:-1px; height:3px; border-radius:2px; background:#3fb7c7; box-shadow:0 0 8px #3fb7c7; }
.gift-tab > .shared-metal-frame { display:none !important; }
.gift-list { display:flex; flex-direction:column; gap:8px; width:100%; }
/* each card is a dark recessed cell, like the backpack / profile cells */
.gift-item { display:flex; align-items:center; gap:12px; min-height:88px; padding:7px 10px 7px 8px; box-sizing:border-box; border-radius:12px;
  border:1px solid #01070a; background:radial-gradient(ellipse at 50% 40%, #051820 0%, #020a0e 75%); box-shadow:inset 0 4px 12px #000, inset 0 0 0 1px #0006, inset 0 -1px 0 #ffffff0a, 0 1px 0 #7fc6dc1a; }
.gift-item.is-blocked { opacity:.55; }
.gift-art { flex:none; position:relative; width:50px; height:75px; display:grid; place-items:center; background:none; }
.gift-art img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px #000c); }
.gift-art-character img { position:absolute; width:170.7%; height:auto; left:-35.3%; top:-8%; max-width:none; filter:none; }
.gift-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left; }
.gift-info > b { color:#fff4dc; font:300 16px/1.15 "Dig Sans",sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gift-info small { color:#8ea8b4; font-size:11.5px; line-height:1.25; overflow-wrap:normal; word-break:normal; hyphens:none; }
.gift-info small b { color:#ffd978; font-weight:400; }
.gift-info .showcase-star { width:13px; height:13px; vertical-align:-2px; }
/* Stars price: the shop's premium dark-glass button — night-blue, glass highlight, gold glow */
.gift-buy { position:relative; overflow:hidden; flex:none; display:flex; align-items:center; gap:5px; min-height:40px; padding:0 13px; border-radius:9px; border:1px solid #e8c36a99;
  background:linear-gradient(180deg,#131c2e 0%,#0a1120 48%,#04070e 52%,#080d18 100%) padding-box;
  box-shadow:inset 0 1px 0 #ffffff26, 0 0 12px #e8c36a55, 0 0 3px #e8c36a66, 0 3px 8px #000a;
  color:#fff; text-shadow:0 1px 2px #000; font:300 16px/1 "Dig Digits","Dig Sans",sans-serif; cursor:pointer; }
.gift-buy::before { content:""; position:absolute; left:0; right:0; top:0; height:50%; border-radius:8px 8px 40% 40% / 8px 8px 10px 10px;
  background:linear-gradient(180deg,#ffffff1c,#ffffff04); pointer-events:none; }
.gift-buy > * { position:relative; z-index:1; }
.gift-buy .gift-star { filter:drop-shadow(0 0 4px #ffd76a99); }
.gift-buy > .shared-metal-frame { display:none !important; }
.gift-buy:active { transform:translateY(1px); filter:brightness(1.2); }
.gift-star { width:18px; height:18px; object-fit:contain; }
.gift-owned { flex:none; color:#7f9ca8; font-size:12px; }
.gift-note { margin:12px 0 0; color:#546b76; font-size:11px; text-align:center; }
.gift-hero { margin:4px 0 6px; }
.gift-hero .gift-icon { width:60px; height:60px; filter:drop-shadow(0 0 16px #3fd8e866); }
.gift-inbox .pf-btn { margin-top:14px; }
.gift-from { color:#7ff0ff !important; }
.pf-btn .gift-icon { width:24px; height:24px; }
/* 1.5.6: card description is two lines — effect · x2 / Длительность · 24 часа */
.card-line { display:block; }
.item-purpose { white-space:pre-line; }
#pageView .showcase-bonus:has(.card-line) { flex-direction:column; gap:2px; }
@media (max-width:359px) { .gift-item { gap:8px; padding:6px 7px 6px 6px; } .gift-art { width:42px; height:63px; } .gift-info > b { font-size:15px; } .gift-info small { font-size:10.5px; } .gift-buy { padding:0 8px; gap:4px; font-size:15px; min-height:36px; } .gift-star { width:15px; height:15px; } }
/* 1.5.6: rating subtitle under the tabs */
.rank-title { margin:2px 4px 14px; color:#cfe3ea; font:300 16px/1.2 "Dig Sans",sans-serif; text-align:center; letter-spacing:.2px; }
/* profile / gift: the top part (grab bar → portrait) is the drag handle for closing */
.pf-grab, .pf-avatar, .gift .pf-grab, .gift-to { touch-action:none; }
#sheet:is([data-type="profile"],[data-type="gift"]) { touch-action:auto; }
.pf-grab { position:relative; }
.pf-grab::before { content:""; position:absolute; left:-60px; right:-60px; top:-12px; bottom:-10px; }
/* gift sheet heading: «Получатель подарка» + name */
.gift-to { display:flex; flex-direction:column; align-items:center; gap:4px; margin:6px 0 18px; }
.gift-to-label { display:inline-flex; align-items:center; gap:6px; color:#8ea8b4; font:300 14px/1.2 "Dig Sans",sans-serif; }
.gift-to-label .gift-icon { width:22px; height:22px; }
.gift-to-name { color:#fff4dc; font:300 22px/1.15 "Dig Sans",sans-serif; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 2px 2px #000; }
.gift > .gift-note { margin:18px 0 10px; }
/* the same moving gloss as the shop's Stars buttons (staggered so three don't flash together) */
.gift-buy::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, #ffffff22, transparent); animation:stars-gloss 3.2s ease-in-out infinite; pointer-events:none; }
.gift-item:nth-child(2) .gift-buy::after { animation-delay:.5s; }
.gift-item:nth-child(3) .gift-buy::after { animation-delay:1s; }
@media (prefers-reduced-motion:reduce) { .gift-buy::after { animation:none; display:none; } }
/* profile section labels: grey, close to their block */
.pf-section { align-self:stretch; margin:30px 2px 10px; color:#6f8a96; font:300 13px/1.2 "Dig Sans",sans-serif; text-align:center; letter-spacing:.2px; }
.pf-place + .pf-section { margin-top:30px; }
/* the upper half of the profile / gift sheet is the drag handle */
#sheet:is([data-type="profile"],[data-type="gift"]) #sheetBody { touch-action:pan-y; }
.pf-avatar, .pf-name, .pf-place, .pf-section, .pf-stats, .gift-to { touch-action:none; }
/* ===== 1.5.6 — frameless windows, step 1: the backpack is a bottom sheet ===== */
html #sheet[data-type="bag"] {
  --bag-width:min(480px, 100vw);
  --bag-slot:calc((var(--bag-width) - 56px) / 4);
  position:fixed; inset:auto 0 0 0; top:auto !important; bottom:0 !important; transform:none; margin:0 auto; width:100%; max-width:480px; height:auto; max-height:92dvh; box-sizing:border-box;
  padding:26px 16px calc(22px + env(safe-area-inset-bottom)); border:0; border-top:1px solid #6fd8e83a; border-radius:22px 22px 0 0;
  background:radial-gradient(ellipse 80% 30% at 50% 0%, #1d4a5a 0%, #10293400 100%), linear-gradient(#0e222c, #07141b 70%);
  box-shadow:0 -12px 40px #000c; animation:pf-up .26s cubic-bezier(.2,.8,.25,1); transition:transform .18s;
}
html #sheet[data-type="bag"]::before { content:""; position:absolute; top:10px; left:calc(50% - 21px); width:42px; height:5px; border-radius:3px; background:#8fb4c255; }
html #sheet[data-type="bag"]::backdrop { background:#020b12b8; backdrop-filter:none; }
html #sheet[data-type="bag"] > .shared-metal-frame, #sheet[data-type="bag"] .bag-frame-corners { display:none !important; }
/* heading: backpack art + «Рюкзак», round close like the profile */
html #sheet[data-type="bag"] .sheethead { min-height:46px; margin:0 2px 8px; touch-action:none; }
html #sheet[data-type="bag"] .sheethead h2 { font:300 26px/1 "Dig Sans",sans-serif; color:#fff4dc; gap:8px; }
html #sheet[data-type="bag"] .sheethead h2::before { width:40px; height:44px; }
html #sheet[data-type="bag"] .sheethead button { width:32px; height:32px; border:0; border-radius:50%; background:#0b1c24; box-shadow:inset 0 0 0 1px #3c6a7a66; }
/* capacity: thin bar under the heading */
html #sheet[data-type="bag"] .bag-capacity { margin:0 2px 12px; touch-action:none; }
html #sheet[data-type="bag"] .bag-capacity-track { height:7px; border:0; background:#020a0e; box-shadow:inset 0 1px 3px #000; }
/* tabs: text with an underline, like the shop / rating */
html #sheet[data-type="bag"] .bag-tabs { border:0; border-bottom:1px solid #81bdd22b; border-radius:0; padding:0; margin:0 0 12px; background:none; box-shadow:none; touch-action:none; }
html #sheet[data-type="bag"] .bag-tab { position:relative; min-height:38px; border:0; border-radius:0; background:none; color:#7f9ca8; font:300 14px/1 "Dig Sans",sans-serif; box-shadow:none; text-shadow:none; }
html #sheet[data-type="bag"] .bag-tab svg { fill:#6f8a96; filter:none; }
html #sheet[data-type="bag"] .bag-tab.is-active { color:#fff; background:none; border:0; box-shadow:none; }
html #sheet[data-type="bag"] .bag-tab.is-active svg { fill:#79f7ff; }
html #sheet[data-type="bag"] .bag-tab.is-active::after { content:""; position:absolute; left:22%; right:22%; bottom:-1px; height:3px; border-radius:2px; background:#3fb7c7; box-shadow:0 0 8px #3fb7c7; }
/* slots: dark recessed cells, no metal corners */
html #sheet[data-type="bag"] .bag-slot { border:1px solid #01070a; border-radius:12px; background:radial-gradient(ellipse at 50% 40%, #0a2631 0%, #051319 72%);
  box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d, 0 1px 0 #7fc6dc1c; }
html #sheet[data-type="bag"] .bag-slot::before, html #sheet[data-type="bag"] .bag-slot::after,
html #sheet[data-type="bag"] .bag-slot-corners::before, html #sheet[data-type="bag"] .bag-slot-corners::after { display:none; }
html #sheet[data-type="bag"] .bag-slot:hover { background-color:transparent; border-color:#3fb7c766; }
html #sheet[data-type="bag"] .bag-slot--empty { background:radial-gradient(ellipse at 50% 40%, #071d26 0%, #030d12 72%); box-shadow:inset 0 3px 9px #000c; }
html #sheet[data-type="bag"] .bag-slot--empty:hover { border-color:#01070a; }
html #sheet[data-type="bag"] .bag-count { font:300 17px/1 "Dig Digits","Dig Sans",sans-serif; color:#fff; }
html #sheet[data-type="bag"] .bag-slot.is-selected { border-color:#3fd8e8; box-shadow:inset 0 3px 9px #000, 0 0 0 1px #3fd8e8, 0 0 10px #3fd8e866; }
/* footer hint without the diamond ornament */
html #sheet[data-type="bag"] #sheetBody > .bag-footer { margin:12px 2px 0; padding:12px 0 0; border-top:1px solid #81bdd21f; color:#6f8a96; }
html #sheet[data-type="bag"] .bag-footer::before { display:none; }
/* bag heading: the capacity bar sits on the title's centre line (its old bottom margin pushed it up) */
html #sheet[data-type="bag"] .sheethead .bag-capacity { margin-bottom:0; margin-top:0; }
/* swipe-to-close: the sheet owns every touch (so the browser never cancels the drag);
   the item grid and sheets taller than the screen keep native vertical scrolling */
html #sheet:is([data-type="profile"],[data-type="gift"],[data-type="bag"],[data-type="energy"]),
html #sheet:is([data-type="profile"],[data-type="gift"],[data-type="bag"],[data-type="energy"]) #sheetBody { touch-action:none; }
html #sheet[data-type="bag"] .bag-grid-scroll { touch-action:pan-y; }
html #sheet.sheet-scrolls:is([data-type="profile"],[data-type="gift"]) #sheetBody { touch-action:pan-y; }
/* ===== 1.5.6 — frameless windows, step 2: the item card is a bottom sheet over the backpack ===== */
html #itemSheet {
  position:fixed; inset:auto 0 0 0; top:auto !important; bottom:0 !important; transform:none; margin:0 auto; width:100%; max-width:480px; height:auto; max-height:88dvh;
  box-sizing:border-box; padding:28px 18px calc(24px + env(safe-area-inset-bottom)); overflow:auto; overscroll-behavior:contain;
  border:0; border-top:1px solid #6fd8e83a; border-radius:22px 22px 0 0;
  background:radial-gradient(ellipse 80% 30% at 50% 0%, #1d4a5a 0%, #10293400 100%), linear-gradient(#0e222c, #07141b 70%);
  box-shadow:0 -12px 40px #000c; animation:pf-up .26s cubic-bezier(.2,.8,.25,1); transition:transform .18s; isolation:isolate;
}
html #itemSheet::before { content:""; position:absolute; top:10px; left:calc(50% - 21px); width:42px; height:5px; border-radius:3px; background:#8fb4c255; }
html #itemSheet::backdrop { background:#020b12b8; backdrop-filter:none; }
html #itemSheet .shared-metal-frame, html #itemSheet .item-card-corners { display:none !important; }
html #itemSheet #itemTitle { font:300 25px/1.15 "Dig Sans",sans-serif; color:#fff4dc; margin:0 40px 14px; text-shadow:0 2px 2px #000; }
html #itemSheet .item-close { top:18px; right:16px; width:32px; height:32px; border:0; border-radius:50%; background:#0b1c24; box-shadow:inset 0 0 0 1px #3c6a7a66; border-image:none; }
/* the item itself in a dark recessed cell */
html #itemSheet .item-display { width:112px; height:112px; margin:0 auto 12px; border:1px solid #01070a; border-radius:16px; border-image:none;
  background:radial-gradient(ellipse at 50% 40%, #0a2631 0%, #051319 72%); box-shadow:inset 0 4px 12px #000, inset 0 -1px 0 #ffffff0d, 0 1px 0 #7fc6dc1c; }
html #itemSheet .item-display > img, html #itemSheet .item-display > svg { width:88px; height:88px; max-width:88px; max-height:88px; }
html #itemSheet .item-owned { font:300 16px/1.35 "Dig Sans",sans-serif; color:#cfe3ea; }
html #itemSheet .item-owned b { color:#ffd978; font-family:"Dig Digits","Dig Sans",sans-serif; }
html #itemSheet .item-purpose { color:#8ea8b4; }
/* sale block: thin divider, dark cells for the stepper and presets */
html #itemSheet :is(.item-sale,.item-use) { border-top:1px solid #81bdd21f; padding-top:14px; }
html #itemSheet .item-sale::before { display:none; }
html #itemSheet .item-quantity-label { font:300 14px/1.2 "Dig Sans",sans-serif; color:#6f8a96; }
html #itemSheet :is(.item-quantity-stepper button, #itemQuantity, .item-presets button) {
  border:1px solid #01070a; border-image:none; border-radius:10px; outline:0;
  background:radial-gradient(ellipse at 50% 40%, #0a2631 0%, #051319 72%); box-shadow:inset 0 3px 8px #000, inset 0 -1px 0 #ffffff0d; filter:none; }
html #itemSheet .item-quantity-stepper button { color:#cfe3ea; font:300 26px/1 "Dig Sans",sans-serif; }
html #itemSheet #itemQuantity { color:#fff; font:300 22px/1.2 "Dig Digits","Dig Sans",sans-serif; }
html #itemSheet .item-presets button { color:#cfe3ea; font:300 15px/1 "Dig Digits","Dig Sans",sans-serif; }
html #itemSheet .item-presets button[aria-pressed="true"] { border-color:#3fd8e8; color:#fff; box-shadow:inset 0 3px 8px #000, 0 0 8px #3fd8e855; filter:none; outline:0; }
html #itemSheet .item-range-row { font:300 13px "Dig Digits","Dig Sans",sans-serif; color:#8ea8b4; }
html #itemSheet #itemQuantityRange { height:8px; border:0; background:linear-gradient(to right,#22c8dc var(--quantity-progress),#020a0e var(--quantity-progress)); box-shadow:inset 0 1px 3px #000; }
html #itemSheet .item-price { color:#8ea8b4; }
html #itemSheet .item-price b { font:300 18px/1.4 "Dig Digits","Dig Sans",sans-serif; }
/* main action: flat bronze, rounded like the other new buttons */
html #itemSheet .item-primary { min-height:50px; border:1px solid #d9b26a; border-image:none; border-radius:12px; filter:none;
  background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22); box-shadow:inset 0 1px 0 #ffe0a055, 0 3px 8px #0009;
  color:#fff4dc; font:300 18px/1.2 "Dig Sans",sans-serif; text-shadow:0 1px 2px #0008; }
html #itemSheet .item-action-note { color:#8ea8b4; }
html #itemSheet { touch-action:none; }
html #itemSheet :is(.item-sale,.item-use) { touch-action:manipulation; }
html #itemSheet.sheet-scrolls { touch-action:pan-y; }
/* stepper − / +: drawn bars, so they sit exactly in the cell centre whatever the font */
html #itemSheet .item-quantity-stepper button { position:relative; font-size:0; color:transparent; }
html #itemSheet .item-quantity-stepper button::before, html #itemSheet .item-quantity-stepper button::after {
  content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; border-radius:1px; background:#cfe3ea; }
html #itemSheet .item-quantity-stepper button[data-item-command="minus"]::after { display:none; }
html #itemSheet .item-quantity-stepper button[data-item-command="plus"]::after { width:2px; height:14px; margin:-7px 0 0 -1px; }
/* ===== 1.5.6 — frameless windows, step 3: craftsman, alchemist and the old pirate are bottom sheets ===== */
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) {
  position:fixed; inset:auto 0 0 0; top:auto !important; bottom:0 !important; transform:none; margin:0 auto; width:100%; max-width:480px; height:auto; max-height:92dvh;
  box-sizing:border-box; padding:26px 16px calc(24px + env(safe-area-inset-bottom)); border:0; border-top:1px solid #6fd8e83a; border-radius:22px 22px 0 0;
  background:radial-gradient(ellipse 80% 30% at 50% 0%, #1d4a5a 0%, #10293400 100%), linear-gradient(#0e222c, #07141b 70%);
  box-shadow:0 -12px 40px #000c; animation:pf-up .26s cubic-bezier(.2,.8,.25,1); transition:transform .18s; overflow:hidden;
}
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"])::before { content:""; position:absolute; top:10px; left:calc(50% - 21px); width:42px; height:5px; border-radius:3px; background:#8fb4c255; z-index:2; }
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"])::backdrop { background:#020b12b8; }
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) > .shared-metal-frame { display:none !important; }
/* heading: portrait + title in Dig Sans, round «?» and close like the backpack */
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) > .sheethead { margin:0 0 10px; padding:0; border:0; min-height:44px; }
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) > .sheethead h2 { font:300 24px/1.1 "Dig Sans",sans-serif; color:#fff4dc; text-shadow:0 2px 2px #000; }
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) .sheethead :is(#closeSheet,.sheet-help) {
  width:32px; height:32px; min-width:32px; min-height:32px; border:0; border-image:none; border-radius:50%;
  background:#0b1c24; box-shadow:inset 0 0 0 1px #3c6a7a66; }
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) .sheethead .sheet-help { color:#cfe3ea; font:300 16px/1 "Dig Sans",sans-serif; }
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) .sheethead :is(#closeSheet,.sheet-help) > .shared-metal-frame { display:none !important; }
/* the recipe / slot panel: the same dark recessed cell as the backpack */
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) .craft-card {
  border:1px solid #01070a !important; border-radius:14px !important;
  background:radial-gradient(ellipse at 50% 30%, #0a2631 0%, #051319 75%) !important; box-shadow:inset 0 4px 12px #000, inset 0 -1px 0 #ffffff0d, 0 1px 0 #7fc6dc1c !important; }
/* main buttons (Улучшить / Создать / Крутить): flat bronze, rounded like the other new buttons */
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) .artisan-go { min-height:48px; border-radius:12px; font:300 18px/1 "Dig Sans",sans-serif; }
/* the whole sheet takes touches for the swipe; only a sheet taller than the screen scrolls */
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]),
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) #sheetBody { touch-action:none; }
html #sheet.sheet-scrolls:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"],[data-type="energy"]) #sheetBody { touch-action:pan-y; }
/* «?» hint: a small card over the window content, inside the window (it never grows the window) */
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) { overflow:hidden; }
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) .sheet-help-pop {
  top:76px; bottom:auto; left:12px; right:12px; max-width:none; max-height:calc(100% - 92px); overflow-y:auto; cursor:pointer;
  padding:12px 14px; font-size:12px; line-height:1.4; border-radius:12px; background:linear-gradient(180deg,#0e2a36fa,#07161dfb); border-color:#6fd8e83a; }
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) .sheet-help-pop h3 { font-size:14px; }
html #sheet:is([data-type="artisan"],[data-type="alchemy"],[data-type="pirate"],[data-type="refinery"],[data-type="expeditions"]) .sheet-help-pop .muted { font-size:11px; }
/* recipe heading: the icon lines up with the name and the effect line, not with the
   reserved empty second line below them (it keeps the card height equal on every tab) */
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"]) .craft-heading { align-items:flex-start; }
:is(#sheet[data-type="artisan"],#sheet[data-type="alchemy"]) .craft-heading > :is(.ui-icon,img) { margin-top:-3px; }
/* the arrow glyph sits below the digits' middle in the game fonts: lift it to the centre line */
.arr { display:inline-block; width:.95em; height:.6em; vertical-align:.05em; margin:0 .08em; overflow:visible; }
html #sheet .sheet-help-pop { touch-action:pan-y; }
/* ===== 1.5.6 — «Мои друзья» page: friends with round portraits ===== */
.fr-page { padding:4px 0 24px; }
.fr-list { display:flex; flex-direction:column; gap:8px; }
.fr-row { position:relative; display:flex; align-items:center; gap:10px; min-height:68px; padding:0 12px 0 0; box-sizing:border-box; border-radius:14px;
  border:1px solid #01070a; background:radial-gradient(ellipse at 30% 40%, #0a2631 0%, #051319 75%); box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d, 0 1px 0 #7fc6dc1c; }
.fr-open { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:8px 0 8px 10px; border:0; border-image:none; background:none; box-shadow:none; color:inherit; text-align:left; cursor:pointer; }
.fr-open > .shared-metal-frame { display:none !important; }
.fr-open:active { filter:brightness(1.15); }
.fr-photo { position:relative; flex:none; width:52px; height:52px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, #0b1a20 0%, #03090c 62%, #000 100%); box-shadow:0 0 0 2px #3fb7c7, 0 0 10px #3fb7c744; }
.fr-photo::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 4px 8px #000c; }
.fr-photo img { position:absolute; width:170.7%; height:auto; left:-35.3%; top:-8%; max-width:none; }
.fr-info { min-width:0; display:flex; flex-direction:column; gap:3px; }
.fr-info b { color:#fff4dc; font:300 17px/1.15 "Dig Sans",sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-info small { color:#8ea8b4; font-size:12px; }
.fr-go { flex:none; width:9px; height:9px; margin-right:4px; border:solid #5f8594; border-width:2px 2px 0 0; transform:rotate(45deg); }
.fr-wait { flex:none; color:#6f8a96; font-size:12px; }
.fr-accept { flex:none; min-height:34px; padding:0 14px; border-radius:10px; border:1px solid #5fe3f0aa; border-image:none;
  background:linear-gradient(180deg, #14505c, #0a2a33); box-shadow:inset 0 1px 0 #9ff4ff33, 0 0 10px #3fd8e833; color:#eafcff; font:300 14px/1 "Dig Sans",sans-serif; cursor:pointer; }
.fr-accept > .shared-metal-frame { display:none !important; }
.fr-empty { margin:40px 12px; color:#8ea8b4; font-size:14px; line-height:1.5; text-align:center; }
.fr-page > .pf-btn { max-width:240px; margin:0 auto; }

/* «Мои друзья» page frame: same as the atlas */
#pageView.is-friends { padding-top:8px; min-height:calc(100dvh - var(--header-height) - var(--nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); background:radial-gradient(ellipse 120% 70% at 50% 20%,#0b1a24 0%,#050c12 60%,#03070b 100%); }
#pageView.is-friends .shop-tab { cursor:default; display:block; text-align:center; }
.pf-link { display:inline; min-height:0; padding:0; border:0; border-image:none; background:none; box-shadow:none; color:#8fd9e6; font:inherit; text-decoration:underline; cursor:pointer; }
.pf-link > .shared-metal-frame { display:none !important; }
/* «Мои друзья» = referral program */
.fr-lead { margin:6px 4px 20px; color:#cfe3ea; font:300 15px/1.45 "Dig Sans",sans-serif; text-align:center; }
.fr-lead b { color:#ffd978; font-weight:300; }
.fr-star { width:16px; height:16px; object-fit:contain; vertical-align:-3px; }
.fr-label { margin:0 4px 8px; color:#6f8a96; font:300 13px/1.2 "Dig Sans",sans-serif; text-align:center; }
.fr-link { display:flex; align-items:center; gap:8px; min-height:48px; padding:0 6px 0 14px; box-sizing:border-box; border-radius:12px;
  border:1px solid #01070a; background:radial-gradient(ellipse at 50% 40%, #0a2631 0%, #051319 75%); box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d; }
.fr-url { flex:1; min-width:0; color:#cfe3ea; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; user-select:all; -webkit-user-select:all; }
.fr-copy { flex:none; display:grid; place-items:center; width:38px; height:38px; min-height:0; padding:0; border:0; border-image:none; border-radius:10px;
  background:#0b1c24; box-shadow:inset 0 0 0 1px #3c6a7a66; color:#8fd9e6; cursor:pointer; }
.fr-copy > .shared-metal-frame { display:none !important; }
.fr-copy svg { width:18px; height:18px; }
.fr-copy:active { filter:brightness(1.3); }
.fr-page > .fr-invite { margin:12px 0 0; max-width:none; }
.fr-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:28px 0 0; }
.fr-stats > div { display:flex; flex-direction:column; align-items:center; gap:8px; }
.fr-stats b { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; height:48px; box-sizing:border-box; border-radius:12px;
  border:1px solid #01070a; background:radial-gradient(ellipse at 50% 40%, #0a2631 0%, #051319 75%); box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d;
  color:#ffd978; font:300 20px/1 "Dig Digits","Dig Sans",sans-serif; }
.fr-stats b .fr-star { width:18px; height:18px; vertical-align:0; }
.fr-stats span { color:#8ea8b4; font-size:12px; }
.fr-list-title { margin-top:28px; }
.fr-earned { flex:none; display:flex; align-items:center; gap:4px; color:#ffd978; font:300 15px/1 "Dig Digits","Dig Sans",sans-serif; }
.fr-page .fr-empty { margin:18px 12px; font-size:13px; }
/* friend portrait with a small level badge, like the profile */
.fr-ava { position:relative; display:block; flex:none; width:52px; height:52px; }
.fr-ava .fr-photo { display:block; }
.fr-level { position:absolute; right:-5px; bottom:-3px; min-width:22px; height:22px; padding:0 4px; box-sizing:border-box; border-radius:11px; display:grid; place-items:center;
  background:radial-gradient(circle at 40% 30%, #2b5a6b, #0b2029 75%); border:1.5px solid #3fb7c7; box-shadow:0 0 0 2px #051319, 0 2px 4px #000a;
  color:#fff4dc; font:300 12px/1 "Dig Digits","Dig Sans",sans-serif; }
/* friend activity: green dot on the portrait when in the game, grey «был … назад» otherwise */
.fr-online { position:absolute; left:1px; top:1px; width:12px; height:12px; border-radius:50%; background:#3ee07a; box-shadow:0 0 0 2px #051319, 0 0 8px #3ee07aaa; }
.fr-seen { color:#6f8a96; }
.fr-seen.is-online { color:#5fe89a; }
/* 1.5.6 — every notice («Ссылка скопирована», errors, finds, level-up) is the same
   dark translucent plate as the chest rewards: no metal frame. The energy notice keeps its own look. */
html #toast:not(.energy-toast), html #findBanner {
  border:1px solid rgba(255,255,255,.16); border-image:none; border-radius:12px;
  background:rgba(0,0,0,.78); color:#fff; box-shadow:0 5px 20px rgba(0,0,0,.32);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:13px; font-weight:600; line-height:1.3; text-align:center; padding:9px 14px;
}
html #toast:not(.energy-toast):not(.reward-toast) { width:max-content; max-width:min(320px, calc(100vw - 32px)); box-sizing:border-box; }
html #toast:not(.energy-toast) > .shared-metal-frame, html #findBanner > .shared-metal-frame { display:none !important; }
html #toast.error:not(.energy-toast) { border-color:rgba(255,120,110,.4); color:#ffd0c7; }
html #findBanner.stars-reward { border-color:rgba(255,215,120,.45); color:#ffe6a5; background:rgba(0,0,0,.78); }
html #findBanner.level-up { border-color:rgba(190,150,255,.45); color:#e9d9ff; background:rgba(0,0,0,.78); }
.rank-invite { padding-top:6px; }
/* ===== 1.5.6 — «Уровень и энергия»: one bottom sheet for the level ring, XP bar and energy meter ===== */
.lvlpage { display:flex; flex-direction:column; }
.hero-cells { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 6px; }
.hero-cell { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 10px 10px; border-radius:14px; min-width:0;
  border:1px solid #01070a; background:radial-gradient(ellipse at 50% 35%, #0a2631 0%, #051319 75%); box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d; }
.hero-cap { color:#6f8a96; font:300 12px/1 "Dig Sans",sans-serif; }
.hero-big { color:#fff4dc; font:300 26px/1 "Dig Digits","Dig Sans",sans-serif; white-space:nowrap; }
.hero-bar { display:block; width:100%; height:7px; border-radius:4px; background:#020a0e; box-shadow:inset 0 1px 3px #000; overflow:hidden; }
.hero-bar i { display:block; height:100%; border-radius:4px; }
.hero-bar.is-xp i { background:linear-gradient(90deg,#8b5cf6,#c4a1ff); box-shadow:0 0 8px #a78bfa88; }
.hero-bar.is-energy i { background:linear-gradient(90deg,#1aa6c0,#6ff0ff); box-shadow:0 0 8px #3fd8e888; }
.hero-cell small { color:#8ea8b4; font-size:11px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.hero-label { margin:18px 2px 6px; color:#6f8a96; font:300 13px/1.2 "Dig Sans",sans-serif; text-align:center; }
.hero-line { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 2px; border-bottom:1px solid #81bdd214; }
.hero-line span { color:#a9c0ca; font-size:13px; }
.hero-line b { color:#ffd978; font:300 14px/1.2 "Dig Digits","Dig Sans",sans-serif; text-align:right; }
.hero-boost { margin:8px 2px 0; color:#7ff0ff; font-size:12px; text-align:center; }
.hero-note { margin:10px 2px 0; color:#6f8a96; font-size:11.5px; line-height:1.45; text-align:center; }
.lvlpage .pf-btn { margin-top:18px; }
.lvlpage .pf-btn:disabled { opacity:.5; }

/* «Уровень и энергия» page frame: same as the atlas / friends */
#pageView.is-hero { padding-top:8px; min-height:calc(100dvh - var(--header-height) - var(--nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); background:radial-gradient(ellipse 120% 70% at 50% 20%,#0b1a24 0%,#050c12 60%,#03070b 100%); }
#pageView.is-hero .shop-tab { cursor:default; display:block; text-align:center; }
#pageView.is-hero .lvlpage { padding:6px 0 24px; }
.hero-cell small { white-space:pre-line; line-height:1.35; }
/* the lines below the two cells sit in one dark recessed panel, like the other new pages */
.lvlpage .hero-group { padding:2px 14px; border-radius:14px; border:1px solid #01070a;
  background:radial-gradient(ellipse at 50% 30%, #0a2631 0%, #051319 75%); box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d; }
.lvlpage .hero-group .hero-line:last-child { border-bottom:0; }
.lvlpage .hero-label { margin:20px 2px 8px; }
/* «Полезно знать» — a framed hint card at the bottom of «Уровень и энергия» */
.hero-tips { margin:22px 0 0; padding:14px 16px 12px; border-radius:14px; border:1px solid #3fb7c744;
  background:linear-gradient(180deg, #0d2833cc, #071820cc); box-shadow:inset 0 1px 0 #9ff4ff14, 0 0 14px #3fd8e814; }
.hero-tips-title { display:flex; align-items:center; gap:8px; margin:0 0 8px; color:#cfe3ea; font:300 14px/1.2 "Dig Sans",sans-serif; }
.hero-tips-title i { flex:none; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1px solid #6fd8e8aa; color:#8fe9f5; font:600 11px/1 Georgia,serif; font-style:normal; }
.hero-tips ul { margin:0; padding:0 0 0 16px; }
.hero-tips li { margin:5px 0; color:#8ea8b4; font-size:12px; line-height:1.45; }
.hero-tips li::marker { color:#3fb7c7; }
.hero-tips b { color:#ffd978; font-weight:400; }
.lvlpage .hero-home { margin-top:20px; }
/* ===== 1.5.6 — «Мастерская» in the craftsman / alchemist style ===== */
#sheet[data-type="refinery"] > .sheethead { display:flex; align-items:center; }
#sheet[data-type="refinery"] > .sheethead h2 { display:flex; align-items:center; gap:8px; margin:0; line-height:1.2; }
#sheet[data-type="refinery"] > .sheethead h2::before { content:""; flex:none; width:40px; height:40px; margin:-4px 0;
  background:url('/assets/ui-v156/workshop-icon.webp') center/contain no-repeat; filter:drop-shadow(0 2px 3px #0009); }
#sheet[data-type="refinery"] .craft-card { border:1px solid #01070a !important; border-image:none !important; border-radius:14px !important; padding:14px !important;
  background:radial-gradient(ellipse at 50% 30%, #0a2631 0%, #051319 75%) !important; box-shadow:inset 0 4px 12px #000, inset 0 -1px 0 #ffffff0d !important; }
#sheet[data-type="refinery"] .craft-card > .shared-metal-frame { display:none !important; }
#sheet[data-type="refinery"] .craft-heading { align-items:center; }
#sheet[data-type="refinery"] .craft-heading h3 { font:300 17px/1.2 "Dig Sans",sans-serif; color:#fff4dc; }
#sheet[data-type="refinery"] .craft-heading p { color:#8ea8b4; font-size:12.5px; margin:4px 0 0; }
#sheet[data-type="refinery"] .ws-job .artisan-go { margin-top:12px; }
.ws-list { display:flex; flex-direction:column; gap:8px; max-height:46dvh; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
.ws-item { display:flex; align-items:center; gap:10px; min-height:64px; padding:6px 10px 6px 8px; box-sizing:border-box; border-radius:12px;
  border:1px solid #01070a; background:radial-gradient(ellipse at 30% 40%, #0a2631 0%, #051319 75%); box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d; }
.ws-art { flex:none; width:44px; height:44px; display:grid; place-items:center; }
.ws-art .ui-icon { width:40px; height:40px; }
.ws-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ws-info b { color:#fff4dc; font:300 16px/1.15 "Dig Sans",sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-info small { color:#8ea8b4; font-size:11.5px; display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; }
.ws-coin { width:14px; height:14px; object-fit:contain; }
.ws-go { flex:none; min-height:36px; padding:0 12px; border-radius:10px; border:1px solid #d9b26a; border-image:none;
  background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22); box-shadow:inset 0 1px 0 #ffe0a055, 0 2px 6px #0008; color:#fff4dc; font:300 14px/1 "Dig Sans",sans-serif; cursor:pointer; }
.ws-go > .shared-metal-frame { display:none !important; }
.ws-go:disabled { opacity:.5; }
.ws-empty { margin:10px 8px 4px; color:#8ea8b4; font-size:13px; line-height:1.45; text-align:center; }
.ws-label { margin:18px 2px 8px; color:#6f8a96; font:300 13px/1.2 "Dig Sans",sans-serif; text-align:center; }
.ws-level-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 2px 12px; }
.ws-level-head b { color:#fff4dc; font:300 18px/1 "Dig Digits","Dig Sans",sans-serif; }
.ws-level-head span { color:#8ea8b4; font-size:12.5px; text-align:right; }
#sheet[data-type="refinery"] .artisan-go .ws-coin { width:18px; height:18px; }
@media (max-width:359px) { .ws-go { padding:0 9px; font-size:13px; } .ws-info b { font-size:15px; } }
@media (max-width:359px) { .ws-art { width:36px; height:36px; } .ws-art .ui-icon { width:34px; height:34px; } .ws-info small { font-size:10.5px; } }
.ws-info small:first-of-type { gap:0; }
@media (max-width:359px) { .ws-long { display:none; } }
/* «Переплавить» — the same turquoise pill as «Добыть» at the craftsman */
.ws-go { border:1px solid #4fe0ee88; background:#4fe0ee14; box-shadow:none; color:#8fe9f5; font:600 12px/1 "Dig Digits",system-ui,sans-serif; min-height:32px; border-radius:8px; }
.ws-progress { display:block; height:8px; margin:12px 0 0; border-radius:4px; background:#020a0e; box-shadow:inset 0 1px 3px #000; overflow:hidden; }
.ws-progress i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#c98a2c,#ffd978); box-shadow:0 0 8px #ffc85788; transition:width 1s linear; }
/* the notice shown inside an open window sits above its bottom edge */
dialog > #toast:not(.energy-toast) { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); top:auto; z-index:10; }
/* workshop timer: large yellow digits */
.ws-job .craft-heading p b[data-timer] { color:#ffd978; font:300 14px/1 "Dig Digits","Dig Sans",sans-serif; margin-left:2px; }
/* ===== 1.5.6 — «Экспедитор» in the same style ===== */
#sheet[data-type="expeditions"] > .sheethead { display:flex; align-items:center; }
#sheet[data-type="expeditions"] > .sheethead h2 { display:flex; align-items:center; gap:8px; margin:0; line-height:1.2; }
#sheet[data-type="expeditions"] .craft-card { border:1px solid #01070a !important; border-image:none !important; border-radius:14px !important; padding:14px !important;
  background:radial-gradient(ellipse at 50% 30%, #0a2631 0%, #051319 75%) !important; box-shadow:inset 0 4px 12px #000, inset 0 -1px 0 #ffffff0d !important; }
#sheet[data-type="expeditions"] .craft-card > .shared-metal-frame { display:none !important; }
#sheet[data-type="expeditions"] .craft-heading { align-items:center; }
#sheet[data-type="expeditions"] .craft-heading h3 { font:300 17px/1.2 "Dig Sans",sans-serif; color:#fff4dc; }
#sheet[data-type="expeditions"] .craft-heading p { color:#8ea8b4; font-size:12.5px; margin:4px 0 0; }
#sheet[data-type="expeditions"] .ws-job .artisan-go { margin-top:12px; }
#sheet[data-type="expeditions"] .artisan-go .ws-coin { width:18px; height:18px; }
#sheet[data-type="expeditions"] .ws-label.ex-first { margin-top:2px; }
#sheet[data-type="expeditions"] .craft-heading > .ui-icon { width:40px; height:40px; }
.ex-list .ws-art .ui-icon { width:36px; height:36px; }
.ex-lock { flex:none; display:inline-flex; align-items:center; gap:5px; color:#6f8d9b; font:600 12px/1 "Dig Digits",system-ui,sans-serif; }
.ex-lock::before { content:""; width:11px; height:11px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ex-camp h3 { margin:0 0 6px; color:#fff4dc; font:300 18px/1.2 "Dig Sans",sans-serif; }
.ex-camp > p { margin:0 0 12px; color:#8ea8b4; font-size:12.5px; line-height:1.45; }
.ex-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px; }
.ex-stats span { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border-radius:10px; background:#020a0e88; color:#8ea8b4; font-size:11px; text-align:center; }
.ex-stats b { display:inline-flex; align-items:center; color:#ffd978; font:300 17px/1 "Dig Digits","Dig Sans",sans-serif; }
.ex-stats span:last-child { flex-direction:column; }
.ex-list { max-height:none; }
#sheet[data-type="expeditions"] > .sheethead h2::before { content:""; flex:none; width:40px; height:40px; margin:-4px 0;
  background:url('/assets/ui-v156/expedition-icon.webp') center/contain no-repeat; filter:drop-shadow(0 2px 3px #0009); }
#sheet[data-type="expeditions"] .craft-card.ex-camp > p { margin:0 0 12px; color:#8ea8b4; font-size:12.5px; line-height:1.45; }
#sheet[data-type="expeditions"] .craft-card.ex-camp > h3 { margin:0 0 6px; color:#fff4dc; font:300 18px/1.2 "Dig Sans",sans-serif; }
#sheet[data-type="expeditions"] .ex-camp .ex-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px; }
#sheet[data-type="expeditions"] .ex-camp .ex-stats > span { display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; border-radius:10px;
  background:#020a0e99; box-shadow:inset 0 2px 6px #000a; color:#8ea8b4; font-size:11px; line-height:1.2; text-align:center; }
#sheet[data-type="expeditions"] .ex-camp .ex-stats b { display:inline-flex; align-items:center; gap:4px; color:#ffd978; font:300 17px/1 "Dig Digits","Dig Sans",sans-serif; }
@media (max-width:359px) { .ex-list .ws-info b { white-space:normal; line-height:1.1; } }
/* ===== 1.5.6 — «Экспедитор» page (like «Мой дом») ===== */
#pageView.is-expedition .home-stage.exp-stage { height:auto; min-height:0; aspect-ratio:960/420; }
#pageView .showcase.is-exp .showcase-name { margin-top:14px; }
#pageView .showcase.is-exp .showcase-dots { margin:12px 0 14px; }
#pageView .showcase.slide-next .exp-stage .home-stage-art { animation:home-in-right .32s cubic-bezier(.2,.8,.3,1); }
#pageView .showcase.slide-prev .exp-stage .home-stage-art { animation:home-in-left .32s cubic-bezier(.2,.8,.3,1); }
.exp-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin:10px 0 0; }
.exp-facts > span { display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; border-radius:12px; border:1px solid #01070a;
  background:radial-gradient(ellipse at 50% 40%, #0a2631 0%, #051319 75%); box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d; }
.exp-facts small { color:#6f8a96; font-size:11px; }
.exp-facts b { display:inline-flex; align-items:center; gap:5px; color:#ffd978; font:300 18px/1 "Dig Digits","Dig Sans",sans-serif; }
.exp-facts b img { width:18px; height:18px; }
.exp-status { margin:4px 0 8px; color:#a9c0ca; font-size:13px; text-align:center; }
.exp-status b { color:#ffd978; font:300 14px/1 "Dig Digits","Dig Sans",sans-serif; }
.exp-progress { width:100%; margin:0 0 12px; }
.exp-cancel { display:block; margin:10px auto 0; min-height:0; padding:4px 8px; border:0; border-image:none; background:none; box-shadow:none; color:#6f8a96; font-size:12px; text-decoration:underline; cursor:pointer; }
.exp-cancel > .shared-metal-frame { display:none !important; }
.showcase .exp-note { margin-top:8px; }
.exp-team { margin:0 0 20px; padding:14px; border-radius:14px; border:1px solid #01070a;
  background:radial-gradient(ellipse at 50% 30%, #0a2631 0%, #051319 75%); box-shadow:inset 0 4px 12px #000, inset 0 -1px 0 #ffffff0d; }
.exp-team-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 2px 12px; }
.exp-team-head b { color:#fff4dc; font:300 18px/1 "Dig Digits","Dig Sans",sans-serif; }
.exp-team-head b small { color:#6f8a96; font-size:.75em; }
.exp-team-head span { color:#8ea8b4; font-size:12.5px; }
.exp-team .artisan-go .ws-coin { width:18px; height:18px; }
/* the mine while the hero is away */
.exp-lock { position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:16px; box-sizing:border-box;
  background:radial-gradient(ellipse at 50% 40%, #0b1a24ee 0%, #03070bf7 75%); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); touch-action:none; }
.exp-lock-card { width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.exp-lock-art { width:100%; aspect-ratio:960/420; object-fit:cover; border-radius:14px; box-shadow:0 10px 24px #000c, 0 0 0 1px #ffffff12; }
.exp-lock-card h2 { margin:16px 0 2px; color:#fff4dc; font:300 24px/1.1 "Dig Sans",sans-serif; }
.exp-lock-loc { margin:0 0 10px; color:#8ea8b4; font-size:13px; }
.exp-lock-card .showcase-cta { width:100%; }

/* the mine lock card reuses the showcase button */
.exp-lock .showcase-cta {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; padding:0 16px;
  border:1px solid #d9b26a; border-image:none; border-radius:8px; background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22);
  box-shadow:inset 0 1px 0 #ffe0a055,0 3px 8px #0009; color:#fff4dc; font:700 17px/1 "Dig Digits","Kopai Serif",Georgia,serif; cursor:pointer;
}
.exp-lock .showcase-cta > .shared-metal-frame { display:none !important; }
.exp-lock .showcase-cta img { width:22px; height:22px; }
.exp-lock .showcase-cta:disabled:not(.is-owned) { opacity:.55; }
.exp-lock .showcase-cta.is-coins {
  position:relative; overflow:hidden; border-color:transparent;
  background:linear-gradient(180deg,#2a1d12 0%,#170f08 48%,#0b0704 52%,#140d07 100%) padding-box;
  box-shadow:inset 0 1px 0 #ffffff22,0 0 16px #c98a4a55,0 0 4px #d9a15f66,0 4px 12px #000a;
  color:#ffffff; text-shadow:0 1px 2px #000;
}
.exp-lock .showcase-cta.is-coins::before { content:""; position:absolute; left:0; right:0; top:0; height:50%; border-radius:8px 8px 40% 40% / 8px 8px 12px 12px;
  background:linear-gradient(180deg,#ffffff1c,#ffffff04); pointer-events:none; }
.exp-lock .showcase-cta.is-coins > * { position:relative; z-index:1; }
.exp-lock .showcase-cta.is-coins img { width:24px; height:24px; filter:drop-shadow(0 0 5px #ffb45a88); }
/* ===== 1.5.6 — «Экспедитор» as a bottom sheet (like the craftsman / alchemist) ===== */
#sheet[data-type="expeditions"] .exp-card { position:relative; }
.exp-card-art { display:block; width:100%; height:auto; aspect-ratio:960/420; object-fit:cover; border-radius:10px; box-shadow:0 3px 10px #000a; }
.exp-card-badge { position:absolute; top:22px; left:22px; padding:5px 9px; border-radius:8px; background:#020a0ecc; color:#ffd978; font:600 11px/1 "Dig Digits",system-ui,sans-serif; }
#sheet[data-type="expeditions"] .exp-card-name { margin:12px 0 0; color:#fff4dc; font:300 18px/1.2 "Dig Sans",sans-serif; text-align:center; }
#sheet[data-type="expeditions"] .exp-card .exp-facts > span { background:#020a0e99; box-shadow:inset 0 2px 6px #000a; }
#sheet[data-type="expeditions"] .exp-card .artisan-go { margin-top:12px; }
.exp-card-status { margin:10px 0 0; color:#8ea8b4; font-size:13px; text-align:center; }
.exp-card-status b[data-timer] { color:#ffd978; font:300 15px/1 "Dig Digits","Dig Sans",sans-serif; margin-left:2px; }
.exp-card-note { margin:10px 4px 0; color:#6f8a96; font-size:12px; line-height:1.4; text-align:center; }
#sheet[data-type="expeditions"] .artisan-tab { white-space:nowrap; min-width:0; }
@media (max-width:359px) { #sheet[data-type="expeditions"] .artisan-tab { font-size:11.5px; letter-spacing:0; } }
/* «Отправиться» — the same turquoise as «Добыть» */
html #sheet[data-type="expeditions"] .artisan-go.exp-go { border:1px solid #4fe0ee88 !important; border-image:none !important; background:#4fe0ee14 !important;
  box-shadow:none !important; color:#8fe9f5; text-shadow:none; }
html #sheet[data-type="expeditions"] .artisan-go.exp-go:disabled { opacity:.5; }
/* compact: the window fits a phone screen */
#sheet[data-type="expeditions"] .exp-card-name { margin-top:10px; font-size:17px; }
#sheet[data-type="expeditions"] .exp-card .exp-facts { margin-top:8px; }
#sheet[data-type="expeditions"] .exp-card .exp-facts > span { padding:7px 4px; gap:4px; }
#sheet[data-type="expeditions"] .exp-card .exp-facts b { font-size:16px; }
#sheet[data-type="expeditions"] .exp-card .artisan-go { margin-top:10px; }
#sheet[data-type="expeditions"] .exp-card-note { margin-top:8px; }
#sheet[data-type="expeditions"] .exp-team-card { margin-top:10px; }
#sheet[data-type="expeditions"] .exp-team-card .ws-level-head { margin-bottom:10px; }
#sheet[data-type="expeditions"] .exp-team-card .ws-level-head b { font-size:16px; }
#sheet[data-type="expeditions"] .exp-team-card .ws-level-head > * { white-space:nowrap; }
@media (max-width:359px) { #sheet[data-type="expeditions"] .exp-team-card .ws-level-head b { font-size:15px; } #sheet[data-type="expeditions"] .exp-team-card .ws-level-head span { font-size:11px; } }
/* «Вернуться досрочно» — a small outlined red pill */
html #sheet[data-type="expeditions"] .exp-cancel, html .exp-cancel { display:block; width:auto; margin:12px auto 0; min-height:30px; padding:0 14px;
  border:1px solid #ff6b6b88 !important; border-image:none !important; border-radius:999px; background:#ff5a5a14 !important; box-shadow:none !important;
  color:#ff8a8a; font:600 12px/28px system-ui,sans-serif; text-decoration:none; text-shadow:none; }
html .exp-cancel:active { background:#ff5a5a2e !important; }
html .exp-cancel { width:fit-content; max-width:100%; white-space:nowrap; }
@media (max-width:359px) { html #sheet[data-type="expeditions"] .exp-cancel { padding:0 10px; font-size:11px; letter-spacing:0; } }
html #sheet[data-type="expeditions"] .exp-cancel { border-radius:8px; min-height:28px; padding:0 12px; font-family:inherit; font-size:11px; font-weight:400; line-height:26px; }
@media (max-width:359px) { html #sheet[data-type="expeditions"] .exp-cancel { padding:0 10px; font-size:10.5px; } }
/* in transit: «Отменить экспедицию» (red) → «Точно? Награда сгорит» */
html #sheet[data-type="expeditions"] .artisan-go.exp-stop { border:1px solid #ff6b6b88 !important; border-image:none !important; background:#ff5a5a14 !important;
  box-shadow:none !important; color:#ff8a8a; text-shadow:none; transition:background .15s, color .15s, border-color .15s; }
html #sheet[data-type="expeditions"] .artisan-go.exp-stop.is-confirm { border-color:#ff6b6b !important; background:#ff4d4d33 !important; color:#ffd0d0;
  animation:exp-stop-pulse .9s ease-in-out infinite alternate; }
@keyframes exp-stop-pulse { to { box-shadow:0 0 14px #ff4d4d66 !important; } }
@media(prefers-reduced-motion:reduce) { html #sheet[data-type="expeditions"] .artisan-go.exp-stop.is-confirm { animation:none; } }
.exp-card-badge b[data-timer] { color:#ffd978; font:300 12px/1 "Dig Digits","Dig Sans",sans-serif; margin-left:1px; }
#sheet[data-type="expeditions"] .exp-card-progress { margin-top:12px; }
/* mine lock: the same turquoise «Забрать» and red «Отменить экспедицию» as in the window */
html .exp-lock .showcase-cta.exp-go, html .exp-lock .showcase-cta.exp-stop { border-radius:12px; font:300 18px/1 "Dig Sans",sans-serif; text-shadow:none; overflow:visible; }
html .exp-lock .showcase-cta.exp-go { border:1px solid #4fe0ee88; background:#4fe0ee14; box-shadow:none; color:#8fe9f5; }
html .exp-lock .showcase-cta.exp-go::before, html .exp-lock .showcase-cta.exp-go::after { display:none; }
html .exp-lock .showcase-cta.exp-stop { border:1px solid #ff6b6b88; background:#ff5a5a14; box-shadow:none; color:#ff8a8a; transition:background .15s, color .15s, border-color .15s; }
html .exp-lock .showcase-cta.exp-stop.is-confirm { border-color:#ff6b6b; background:#ff4d4d33; color:#ffd0d0; animation:exp-stop-pulse .9s ease-in-out infinite alternate; }
/* «Отменить экспедицию?» — a small window over the Expeditor window / the mine */
.exp-confirm { position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:16px; box-sizing:border-box;
  background:#020b12c4; border-radius:inherit; animation:exp-confirm-in .16s ease-out; }
.exp-confirm.is-page { position:fixed; z-index:1000; border-radius:0; }
.exp-confirm-card { width:100%; max-width:320px; box-sizing:border-box; padding:18px 16px 14px; border-radius:14px; border:1px solid #01070a;
  background:radial-gradient(ellipse at 50% 20%, #0f2e3a 0%, #071820 75%); box-shadow:0 12px 40px #000c, inset 0 -1px 0 #ffffff0d; text-align:center; }
.exp-confirm-card h3 { margin:0 0 8px; color:#fff4dc; font:300 19px/1.2 "Dig Sans",sans-serif; }
.exp-confirm-card p { margin:0 0 14px; color:#9db4bf; font-size:13px; line-height:1.45; }
.exp-confirm-card p b { display:inline-flex; align-items:center; gap:4px; color:#ffd978; font:300 15px/1 "Dig Digits","Dig Sans",sans-serif; vertical-align:-1px; }
.exp-confirm-card p b img { width:16px; height:16px; }
.exp-confirm-card button { display:block; width:100%; min-height:44px; margin:0; border-radius:12px; border-image:none !important; box-shadow:none !important;
  font:300 17px/1 "Dig Sans",sans-serif; text-shadow:none; cursor:pointer; }
.exp-confirm-card button > .shared-metal-frame { display:none !important; }
.exp-confirm-yes { border:1px solid #ff6b6b99 !important; background:#ff5a5a1f !important; color:#ff9a9a; }
.exp-confirm-no { margin-top:8px !important; border:1px solid #4fe0ee88 !important; background:#4fe0ee14 !important; color:#8fe9f5; }
@keyframes exp-confirm-in { from { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .exp-confirm { animation:none; } }
html .exp-lock .exp-status + .showcase-cta { margin-top:12px; }
/* all notices: at the bottom, where the coin rewards show */
body > #toast { top:auto !important; bottom:calc(90px + env(safe-area-inset-bottom)) !important; }
@media(min-width:700px) { body > #toast { bottom:calc(108px + env(safe-area-inset-bottom)) !important; } }
body > #toast:not(.show) { transform:translate(-50%, 14px); }
/* ===== 1.5.6 — «Монеты»: a page like «Мой дом» / «Уровень и энергия» ===== */
.coins-page .coins-total { margin:0 0 8px; padding:16px 10px 14px; }
.coins-page .coins-total .hero-big { display:inline-flex; align-items:center; gap:8px; font-size:32px; }
.coins-page .coins-total .coins-ico { width:30px; height:30px; }
.coins-ico { width:18px; height:18px; object-fit:contain; filter:drop-shadow(0 1px 2px #000a); }
.coins-mid { display:inline-flex; align-items:center; gap:5px; color:#ffd978; font:300 18px/1 "Dig Digits","Dig Sans",sans-serif; white-space:nowrap; }
.coins-page .hero-cell small { white-space:nowrap; }
.coins-page .coins-sell { margin-top:14px; }
.coins-list { display:flex; flex-direction:column; border-radius:14px; border:1px solid #01070a; overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, #0a2631 0%, #051319 75%); box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d; }
.coins-row { display:flex; align-items:center; gap:12px; width:100%; min-height:60px; margin:0; padding:8px 14px 8px 10px; box-sizing:border-box;
  border:0; border-bottom:1px solid #81bdd214; border-image:none; border-radius:0; background:none; box-shadow:none; color:inherit; text-align:left; cursor:pointer; }
.coins-row:last-child { border-bottom:0; }
.coins-row:active { background:#ffffff08; }
.coins-row > .shared-metal-frame { display:none !important; }
.coins-row > img { flex:none; width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 2px 3px #0009); }
.coins-row > span { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.coins-row b { color:#fff4dc; font:300 15.5px/1.15 "Dig Sans",sans-serif; }
.coins-row small { color:#8ea8b4; font-size:11.5px; line-height:1.3; }
.coins-row .arr { flex:none; width:16px; height:10px; color:#6f8a96; }
@media (max-width:359px) { .coins-page .coins-total .hero-big { font-size:27px; } .coins-mid { font-size:16px; } .coins-row { gap:10px; padding-right:10px; } .coins-row > img { width:34px; height:34px; } }
/* ===== 1.5.6 — «Настройки»: a page like «Мой дом» / «Монеты» ===== */
.set-me { display:flex; align-items:center; gap:14px; width:100%; margin:0; padding:12px 14px 12px 12px; box-sizing:border-box; border-radius:14px;
  border:1px solid #01070a; border-image:none; background:radial-gradient(ellipse at 30% 40%, #0a2631 0%, #051319 75%);
  box-shadow:inset 0 3px 9px #000, inset 0 -1px 0 #ffffff0d; color:inherit; text-align:left; cursor:pointer; }
.set-me > .shared-metal-frame { display:none !important; }
.set-me-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.set-me-info b { color:#fff4dc; font:300 19px/1.15 "Dig Sans",sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.set-me-info small { color:#8ea8b4; font-size:12px; }
.set-me .arr { flex:none; width:16px; height:10px; color:#6f8a96; }
a.coins-row { text-decoration:none; }
.coins-row.is-static { cursor:default; }
.coins-row.is-static:active { background:none; }
.set-row { display:flex; align-items:center; gap:12px; width:100%; min-height:60px; margin:0; padding:8px 14px; box-sizing:border-box;
  border:0; border-bottom:1px solid #81bdd214; border-image:none; border-radius:0; background:none; box-shadow:none; color:inherit; text-align:left; cursor:pointer; }
.set-row:last-child { border-bottom:0; }
.set-row > .shared-metal-frame { display:none !important; }
.set-row > span { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.set-row b { color:#fff4dc; font:300 15.5px/1.15 "Dig Sans",sans-serif; }
.set-row small { color:#8ea8b4; font-size:11.5px; line-height:1.3; }
.set-switch { position:relative; flex:none; width:46px; height:26px; border-radius:13px; background:#020a0e; box-shadow:inset 0 1px 3px #000, 0 0 0 1px #81bdd22b; transition:background .18s, box-shadow .18s; }
.set-switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#6f8a96; box-shadow:0 1px 3px #000a; transition:transform .18s, background .18s; }
.set-switch.is-on { background:#4fe0ee2e; box-shadow:inset 0 1px 3px #0008, 0 0 0 1px #4fe0ee88; }
.set-switch.is-on::after { transform:translateX(20px); background:#8fe9f5; }
.set-version { margin:22px 0 0; color:#4f6873; font-size:11px; text-align:center; }
#pageView.is-settings .set-me .fr-ava { flex:none; }
/* ===== 1.5.6 — «Telegram Stars»: a page like «Монеты» ===== */
.st-cells { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.st-cells .hero-cell { padding:10px 4px 11px; }
.st-cells .hero-cap { font-size:11.5px; white-space:nowrap; }
.coins-total small { color:#8ea8b4; font-size:11.5px; }
.st-page .st-shop { margin-top:12px; }
.st-amt { flex:none; color:#ffd978; font:300 16px/1 "Dig Digits","Dig Sans",sans-serif; font-style:normal; }
.st-amt.is-minus { color:#8ea8b4; }
.st-empty { margin:4px 8px; color:#8ea8b4; font-size:13px; line-height:1.45; text-align:center; }
@media (max-width:359px) { .st-cells .hero-cap { font-size:10.5px; } }
.st-amt { display:inline-flex; align-items:center; gap:4px; } .st-amt .coins-ico { width:15px; height:15px; } .st-amt.is-minus .coins-ico { opacity:.6; filter:grayscale(.4); }
.hero-line.st-odds { flex-direction:column; align-items:stretch; gap:8px; }
.st-odds-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.st-odds-grid > span { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; border-radius:9px; background:#020a0e99; box-shadow:inset 0 2px 5px #000a; color:#8ea8b4; font:300 12px/1 "Dig Digits","Dig Sans",sans-serif; }
.st-odds-grid > span b { display:inline-flex; align-items:center; gap:2px; color:#ffd978; font-size:14px; }
.st-odds-grid > span b::after { content:""; width:11px; height:11px; background:url('/assets/ui-v130/stars.webp') center/contain no-repeat; }
/* the masters' tap zones stay invisible in every state (iOS drew them on tap / focus) */
html .city-scene .city-zone, html .city-scene .city-zone:active, html .city-scene .city-zone:focus, html .city-scene .city-zone:focus-visible, html .city-scene .city-zone:hover {
  -webkit-appearance:none; appearance:none; background:none !important; border:0 !important; border-image:none !important; box-shadow:none !important;
  outline:0 !important; filter:none !important; transform:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  -webkit-tap-highlight-color:transparent !important; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; opacity:1; color:transparent; }
/* 1.5.6 Settings → Language: five rows, the current one is lit with a check */
.set-langs .set-lang { min-height:50px; padding-left:16px; }
.set-langs .set-lang b { font-size:15.5px; }
.set-langs .set-lang.is-on b { color:#8fe9f5; }
.set-check { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#4fe0ee22; box-shadow:0 0 0 1px #4fe0ee88; color:#8fe9f5; }
.set-check .ui-icon { width:15px; height:15px; }