/* Chrome v2: a fullscreen-aware slim HUD, a tile rail for the map tools and Pezeshklander
   as a slide-out drawer.  Loaded after every component sheet and before the skins.
   Colours come only from the semantic variables and existing --sk tokens, so «فیروزه»,
   «کویر» and «کلاسیک» all restyle it.  The look is written once for both layouts
   (html[data-layout], the same weight as the portrait selectors); placement is per layout:
   portrait (html:not([data-layout=landscape])) here, the landscape atlas at the end. */

:root {
  /* status bar / notch, and Telegram's own floating Close + menu band below it */
  --sys-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --tg-bar: var(--tg-content-safe-area-inset-top, 0px);
  /* room kept clear for each of Telegram's corner pills in that band */
  --tg-corner: 104px;
  --hud-row: 36px;
  --band-h: min(32px, calc(var(--tg-bar) - 8px));
  --chrome-face: var(--map-chrome-face, var(--glass-face));
  --chrome-rim: rgba(var(--sk-ffd68c, 255, 214, 140), 0.34);
  --chrome-hi: rgba(var(--sk-eef2fa, 238, 242, 250), 0.2);
  --chrome-shadow: 0 6px 18px rgba(var(--sk-000000, 0, 0, 0), 0.32);
  --tile-face: linear-gradient(160deg, rgba(var(--sk-3f6f7a, 63, 111, 122), 0.95), rgba(var(--sk-173740, 23, 55, 64), 0.95));
  --accent-soft: rgba(var(--sk-91e2cb, 145, 226, 203), 0.14);
  --accent-line: rgba(var(--sk-91e2cb, 145, 226, 203), 0.4);
}
html:not([data-layout=landscape]) { --hud-h: calc(var(--safe-top) + 48px); }
/* Screens under a band HUD start right below Telegram's buttons. */
html.hud-band:not([data-layout=landscape]) #app.app-screen-open:not([data-guide-focus]) { --hud-h: calc(var(--safe-top) + 4px); }

/* Sheets never slide under the status bar or Telegram's Close button. */
.sheet { max-height: min(88%, calc(100% - var(--safe-top) - 12px)); }

/* Status bar legibility over a bright map in fullscreen. */
html.tg-fullscreen .map-shade::before {
  content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--safe-top) + 34px); pointer-events: none;
  background: linear-gradient(rgba(var(--sk-07171d, 7, 23, 29), 0.62), rgba(var(--sk-07171d, 7, 23, 29), 0));
}

/* ================================================================== HUD */
html:not([data-layout=landscape]) .hud {
  padding: calc(var(--safe-top) + 6px) calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left));
  gap: 6px; align-items: center;
}
/* the inbox bell (it lives in #fab) shares the row on the map */
html:not([data-layout=landscape]) #app:not(.app-screen-open) .hud { padding-left: calc(12px + var(--safe-left) + var(--hud-row) + 6px); }

/* --seal is the landscape row height (36px, or the band's height); portrait keeps --hud-row */
html[data-layout] #hud .badge {
  width: var(--seal, var(--hud-row)); height: var(--seal, var(--hud-row)); font-size: 19px; border: 1px solid var(--chrome-rim);
  background: var(--chrome-face);
  box-shadow: 0 0 0 2px var(--nation, var(--gold)), 0 0 0 3.5px rgba(var(--sk-000000, 0, 0, 0), 0.5), var(--chrome-shadow);
}
html[data-layout] #hud .badge::before { content: ""; position: absolute; inset: -5px; }
html[data-layout] #hud .badge .rank { bottom: -6px; height: 15px; min-width: 22px; padding: 0 4px; font-size: 9.5px; line-height: 15px; }

/* the capsule: one slim glass line of icon + value cells */
html[data-layout] .hud .stats {
  display: flex; align-items: stretch; height: var(--seal, var(--hud-row)); min-width: 0;
  padding: 0 4px; gap: 0; border-radius: 999px; overflow: hidden;
  background: var(--chrome-face); border: 1px solid var(--chrome-rim);
  box-shadow: inset 0 1px var(--chrome-hi), var(--chrome-shadow);
}
html:not([data-layout=landscape]) .hud .stats { flex: 1 1 auto; }
html[data-layout] .hud .stat {
  flex: 1 0 auto; min-width: auto; justify-content: center; align-items: center; gap: 4px; height: auto; min-height: 0;
  padding: 0 6px; border: 0; border-radius: 0; background: none; box-shadow: none; position: relative; overflow: visible;
  transition: transform 0.15s var(--ease-out);
}
html[data-layout] .hud .stat + .stat { border: 0; }
html[data-layout] .hud .stat + .stat::before {
  content: ""; display: block; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px; width: 1px;
  border-radius: 1px; background: var(--edge-2);
}
html[data-layout] .hud .stat::after { display: none; }
html[data-layout] .hud .stat > .ic { display: block; flex: none; width: 16px; height: 16px; }
html[data-layout] .hud .stat .v { flex-direction: row; align-items: baseline; gap: 3px; line-height: 1.1; text-align: start; }
html[data-layout] .hud .stat .v b { font-size: 12.5px; font-weight: 800; color: var(--text); }
html[data-layout] .hud .stat .v small { font-size: 10px; font-weight: 700; }
html[data-layout] .hud .stat.power .v b::before { content: none; }
html[data-layout] .hud .stat.power .v b.pos { color: var(--green); }
html[data-layout] .hud .stat.power .v b.neg { color: var(--red); }
html[data-layout] .hud .stat.treasury:active { transform: scale(0.95); }
html[data-layout] .hud .stat.treasury .per { display: none; }
/* labels the icons already say, kept for screen readers only */
html[data-layout] .hud .stat.pop .v small,
html[data-layout] .hud .stat.power .v small {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* season: a stacked mini calendar, «فصل» over «روز» */
html[data-layout] .hud .stat.season { flex: 0 0 auto; padding-inline: 8px 10px; }
html[data-layout] .hud .stat.season .v { flex-direction: column; align-items: center; gap: 1px; line-height: 1.05; }
html[data-layout] .hud .stat.season .v b { font-size: 9px; font-weight: 700; color: var(--text-3); }
html[data-layout] .hud .stat.season .v small { font-size: 12px; font-weight: 800; color: var(--gold-hi); }
/* a narrow phone or a big treasury: first the income goes to the tap sheet, then a steady
   grid shows as a glowing green bolt (a shortage always keeps its word) */
html:is(.hud-tight, .hud-tighter)[data-layout] .hud .stat { padding: 0 5px; }
html:is(.hud-tight, .hud-tighter)[data-layout] .hud .stat.treasury .v small,
html.hud-tighter[data-layout] .hud .stat.power:not(.low) .v {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html.hud-tighter[data-layout] .hud .stat.power:not(.low) > .ic { color: var(--green); filter: drop-shadow(0 0 4px rgba(var(--sk-91e2cb, 145, 226, 203), 0.55)); }

/* the none-country header keeps the same slim height */
html[data-layout] .hud-title { height: var(--seal, var(--hud-row)); padding: 0 14px; border-radius: 999px; }
html[data-layout] .hud-title b { font-size: 12.5px; }
html[data-layout] .hud-title small { font-size: 10px; }
html[data-layout] .hud > .btn.sm { min-height: var(--seal, var(--hud-row)); height: var(--seal, var(--hud-row)); border-radius: 999px; padding-inline: 14px; }

/* season + power tag beside the flag: only used while the capsule rides the band */
.hud-status { display: none; }
html.hud-band:not([data-layout=landscape]) .hud .hud-status {
  display: flex; align-items: center; gap: 0; height: 30px; padding: 0 2px; border-radius: 999px;
  background: var(--chrome-face); border: 1px solid var(--chrome-rim); box-shadow: inset 0 1px var(--chrome-hi), var(--chrome-shadow);
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.hud-status > span { display: flex; align-items: center; gap: 4px; padding: 0 9px; height: 100%; }
.hud-status > span + span { border-inline-start: 1px solid var(--edge-2); height: 60%; padding-block: 0; }
.hud-status .hs-season b { color: var(--gold-hi); }
.hud-status .hs-season small { font-size: 11.5px; color: var(--text-2); }
.hud-status .hs-season small::before { content: "·"; margin-inline-end: 4px; color: var(--text-3); }
.hud-status .ic { width: 15px; height: 15px; }
.hud-status .pos { color: var(--green); }
.hud-status .neg { color: var(--red); }

/* ----------------------------------------------- the band between Telegram's buttons */
html.hud-band:not([data-layout=landscape]) .hud .stats {
  position: absolute; z-index: 1; top: calc(var(--sys-top) + (var(--tg-bar) - var(--band-h)) / 2); left: 50%; right: auto;
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--tg-corner)); height: var(--band-h); flex: none;
}
html.hud-band:not([data-layout=landscape]) .hud .stat { flex: 0 0 auto; padding: 0 7px; gap: 3px; }
html.hud-band:not([data-layout=landscape]) .hud .stat.treasury .v small { display: none; }
html.hud-band:not([data-layout=landscape]) .hud .stat .v b { overflow: visible; }
html.hud-band:not([data-layout=landscape]) .hud .stat.power,
html.hud-band:not([data-layout=landscape]) .hud .stat.season {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%);
}
/* on a screen the band carries the economy alone; the flag lives on «کشور» */
html.hud-band:not([data-layout=landscape]) #app.app-screen-open .hud > :not(.stats) { display: none; }

/* ================================================================== map tools */
html[data-layout] #fab {
  position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; max-width: none;
  display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  pointer-events: none;
}
/* inbox: a round seal at the row's left end, the unread count pinned on it */
html[data-layout] #fab .fab-notices {
  position: absolute; right: auto;
  width: var(--seal, var(--hud-row)); height: var(--seal, var(--hud-row)); min-width: 0; min-height: 0; padding: 0; gap: 0;
  align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--chrome-rim);
  background: var(--chrome-face); box-shadow: inset 0 1px var(--chrome-hi), var(--chrome-shadow); pointer-events: auto;
}
html:not([data-layout=landscape]) #fab .fab-notices { top: calc(var(--safe-top) + 6px); left: calc(12px + var(--safe-left)); }
html[data-layout] #fab .fab-notices::before { content: ""; position: absolute; inset: -5px; }
html[data-layout] #fab .fab-notices .ic { width: 23px; height: 23px; }
html[data-layout] #fab .fab-notices > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-layout] #fab .fab-notices > b {
  position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  font-size: 10px; font-weight: 900; line-height: 18px; text-align: center;
  background: var(--red); color: var(--bg0); box-shadow: 0 0 0 2px var(--bg0);
  animation: chrome-pop 0.45s var(--ease-spring) backwards;
}

/* the rail: four glazed medallions stacked by the left thumb, the torch on top */
html:not([data-layout=landscape]) #fab .map-dock {
  position: absolute; left: calc(10px + var(--safe-left)); bottom: calc(var(--tab-h) + 74px); right: auto; top: auto;
  flex-direction: column-reverse; align-items: center;
}
html[data-layout] #fab .map-dock {
  gap: 2px; padding: 6px 3px; border-radius: 32px;
  background: var(--fz-girih, none) 0 0 / 48px 48px, var(--chrome-face);
  border: 1px solid var(--chrome-rim); box-shadow: inset 0 1px var(--chrome-hi), var(--chrome-shadow);
  transition: bottom 0.3s var(--ease-out);
}
html[data-layout] #fab .map-dock .dock-btn {
  min-width: 52px; padding: 4px 2px 3px; gap: 2px; border-radius: 24px;
  transition: transform 0.25s var(--ease-spring);
}
html[data-layout] #fab .map-dock .dock-ic {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--gold-lo), inset 0 1px var(--chrome-hi), inset 0 -3px rgba(var(--sk-000000, 0, 0, 0), 0.28),
    0 3px 0 rgba(var(--sk-000000, 0, 0, 0), 0.35), 0 6px 12px rgba(var(--sk-000000, 0, 0, 0), 0.3);
}
html[data-layout] #fab .map-dock .dock-ic::after {
  /* a glaze highlight, like light on a tile */
  content: ""; position: absolute; inset: 3px 7px auto; height: 40%; border-radius: 50% 50% 45% 45%; pointer-events: none;
  background: linear-gradient(rgba(var(--sk-eef2fa, 238, 242, 250), 0.3), rgba(var(--sk-eef2fa, 238, 242, 250), 0));
}
html[data-layout] #fab .map-dock .dock-ic .ic { width: 26px; height: 26px; position: relative; }
html[data-layout] #fab .map-dock .dock-label { font-size: 10px; font-weight: 800; color: var(--text); }
html[data-layout] #fab .map-dock .dock-btn:active { transform: scale(0.88); }
html[data-layout] #fab .map-dock .dock-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
html[data-layout] #fab .map-dock .dock-torch .dock-ic { box-shadow: 0 0 0 1.5px var(--gold), inset 0 1px var(--chrome-hi), 0 3px 0 rgba(var(--sk-000000, 0, 0, 0), 0.35), 0 0 16px rgba(var(--sk-ff9628, 255, 150, 40), 0.35); }
@media (max-height: 720px) {
  html[data-layout] #fab .map-dock { padding: 4px 2px; gap: 0; }
  html[data-layout] #fab .map-dock .dock-btn { min-width: 48px; padding: 3px 2px 2px; }
  html[data-layout] #fab .map-dock .dock-ic { width: 36px; height: 36px; }
  html[data-layout] #fab .map-dock .dock-ic .ic { width: 23px; height: 23px; }
  html[data-layout] #fab .map-dock .dock-label { font-size: 9px; }
  html[data-layout] .troop-control { min-height: 44px; }
  html[data-layout] .troop-control > .ic { width: 34px; height: 34px; }
  html:not([data-layout=landscape]) #fab .map-dock { bottom: calc(var(--tab-h) + 66px); }
}
/* each arrival on the map, the medallions pop in one after another */
@keyframes chrome-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes chrome-slide { from { opacity: 0; transform: translateX(-18px) scale(0.8); } }
html[data-layout] #app:not(.app-screen-open) #fab .map-dock .dock-btn { animation: chrome-slide 0.5s var(--ease-spring) backwards; }
html[data-layout] #app:not(.app-screen-open) #fab .map-dock .dock-btn:nth-last-child(2) { animation-delay: 0.05s; }
html[data-layout] #app:not(.app-screen-open) #fab .map-dock .dock-btn:nth-last-child(3) { animation-delay: 0.1s; }
html[data-layout] #app:not(.app-screen-open) #fab .map-dock .dock-btn:nth-last-child(4) { animation-delay: 0.15s; }

/* «نیروهای من»: a chunky command pill in the bottom-left corner, under the rail */
html:not([data-layout=landscape]) .troop-control { top: auto; bottom: calc(var(--tab-h) + 14px); left: calc(10px + var(--safe-left)); right: auto; }
html[data-layout] .troop-control {
  min-height: 48px; padding: 4px 6px 4px 14px; gap: 8px; border-radius: 26px; border: 1px solid var(--chrome-rim);
  background: var(--chrome-face); box-shadow: inset 0 1px var(--chrome-hi), var(--chrome-shadow);
  font: 800 12.5px Vazirmatn, Tahoma, sans-serif; color: var(--text);
  transition: transform 0.25s var(--ease-spring), bottom 0.3s var(--ease-out);
}
html[data-layout] .troop-control > .ic {
  width: 38px; height: 38px; padding: 6px; border-radius: 50%; background: var(--tile-face);
  box-shadow: 0 0 0 1.5px var(--gold-lo), inset 0 1px var(--chrome-hi), 0 2px 0 rgba(var(--sk-000000, 0, 0, 0), 0.35);
}
html[data-layout] .troop-control:active { transform: scale(0.94); }
html[data-layout] .troop-control[data-offline] { border-color: var(--gold); }
html:not([data-layout=landscape]) .troop-move-hud { top: calc(var(--hud-h) + 8px); }
/* route planning brings its own bar along the bottom: lift the corner out of its way */
html:not([data-layout=landscape]) #app.route-on #fab .map-dock { bottom: calc(var(--tab-h) + 168px); }
html:not([data-layout=landscape]) #app.route-on .troop-control { bottom: calc(var(--tab-h) + 108px); }

/* the guided tour keeps showing only the control it teaches, near the top */
html[data-layout] #app[data-guide-focus] #fab { top: calc(var(--safe-top) + 10px); bottom: 0; }
html[data-layout] #app[data-guide-focus] #fab .map-dock { top: 0; bottom: auto; flex-direction: row; padding: 4px; }
html[data-layout] #app[data-guide-focus] #fab .fab-notices { top: 0; }
html[data-layout] #app[data-guide-focus=map] #fab :is([data-fab=newspaper], [data-fab=donate]) { display: none; }
html[data-layout] #app[data-guide-focus=map] #fab [data-fab=home] { flex-direction: row; min-width: 0; padding: 4px 6px 4px 14px; }
html[data-layout] #app[data-guide-focus=map] #fab [data-fab=home] .dock-label { display: none; }
html[data-layout] #app[data-guide-focus] #fab .dock-btn { animation: none; }

/* ================================================================== guide drawer */
/* With no tour card the old bottom bar is gone: the root is only a hook for the
   handle and the floating drawer (landscape's own display rules still apply). */
#app #commander-guide.guide-root:not(.expanded) {
  position: absolute; inset: auto; width: 0; height: 0; max-width: none; margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none; overflow: visible;
}
.guide-tour { flex: 1 1 auto; min-width: 0; }
.guide-tour:empty { display: none; }
.guide-layer { position: absolute; width: 0; height: 0; }
.guide-root.expanded .guide-layer, .guide-root.expanded > .guide-handle { display: none; }

.guide-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: rgba(var(--sk-030f14, 3, 15, 20), 0.5); transition: opacity 0.32s ease;
}
.guide-root.open .guide-scrim { opacity: 1; pointer-events: auto; }

.guide-handle {
  position: fixed; z-index: 2; right: 0; bottom: calc(var(--tab-h) + 16px);
  display: grid; place-items: center; width: 46px; height: 60px; padding: 0 0 0 3px; margin: 0;
  border: 1px solid var(--chrome-rim); border-right: 0; border-radius: 22px 0 0 22px;
  background: var(--chrome-face); color: var(--text);
  box-shadow: inset 0 1px var(--chrome-hi), -4px 6px 18px rgba(var(--sk-000000, 0, 0, 0), 0.3);
  cursor: pointer; transition: transform 0.38s var(--ease-out), opacity 0.25s ease;
}
.guide-handle::after {
  /* a grip line: this tab pulls out */
  content: ""; position: absolute; left: 5px; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 2px;
  background: var(--chrome-rim);
}
.guide-handle .commander { width: 36px; height: 36px; border-radius: 50%; margin-left: 6px; box-shadow: 0 0 0 1.5px var(--gold-lo); }
.guide-handle .commander img { width: 190%; height: 190%; max-width: none; inset: 0 auto auto -45%; }
.guide-handle:active { transform: translateX(3px); }
.guide-handle:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.guide-handle-dot {
  position: absolute; top: 6px; left: 8px; width: 10px; height: 10px; border-radius: 50%; display: none;
  background: var(--gold); box-shadow: 0 0 0 2px var(--bg1);
}
.guide-handle.has-news .guide-handle-dot { display: block; }
.guide-handle.has-news .guide-handle-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--gold);
  animation: gd-ping 1.8s ease-out infinite;
}
@keyframes gd-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
.guide-root.open > .guide-handle { transform: translateX(110%); opacity: 0; pointer-events: none; }
/* over a reading screen only a sliver peeks out, inside the cards' outer margin */
#app.app-screen-open .guide-handle { width: 30px; height: 48px; padding: 0; border-radius: 16px 0 0 16px; }
#app.app-screen-open .guide-handle .commander { width: 25px; height: 25px; margin: 0 0 0 3px; }
#app.app-screen-open .guide-handle::after { display: none; }
#app.app-screen-open .guide-handle-dot { top: 3px; left: 3px; width: 8px; height: 8px; }

.guide-drawer {
  position: fixed; z-index: 3; right: 0; bottom: calc(var(--tab-h) + 10px);
  display: flex; flex-direction: column; width: min(348px, calc(100vw - 26px));
  max-height: calc(100% - var(--hud-h) - var(--tab-h) - 18px);
  border: 1px solid var(--chrome-rim); border-right: 0; border-radius: 28px 0 0 28px; overflow: hidden;
  background: var(--fz-girih, none) 0 0 / 64px 64px, var(--sheet-face);
  box-shadow: inset 0 1px var(--chrome-hi), -10px 14px 40px rgba(var(--sk-000000, 0, 0, 0), 0.45);
  transform: translateX(calc(100% + 30px)); visibility: hidden;
  transition: transform 0.38s var(--ease-out), visibility 0s linear 0.38s;
}
.guide-root.open .guide-drawer { transform: none; visibility: visible; transition: transform 0.5s var(--ease-out), visibility 0s; }
.guide-drawer-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 16px 14px; }

/* the folded advisor */
.gd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gd-head .commander { width: 66px; height: 66px; border-radius: 22px; box-shadow: 0 0 0 1.5px var(--gold-lo), inset 0 1px var(--chrome-hi); }
.gd-head .grow { flex: 1; min-width: 0; }
.gd-head small { display: block; color: var(--gold); font-size: 11px; font-weight: 700; }
.gd-head h2 { margin: 2px 0 0; font-size: 18px; line-height: 1.5; font-family: var(--fz-display, var(--kv-display, "Vazirmatn", Tahoma, sans-serif)); font-weight: 700; color: var(--text); }
.gd-head h2:focus { outline: none; }
.gd-close {
  align-self: flex-start; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--edge); border-radius: 50%; background: var(--accent-soft); color: var(--text-2); cursor: pointer;
}
.gd-close .ic { width: 18px; height: 18px; }
.gd-next {
  display: block; width: 100%; padding: 14px 14px 12px; margin: 0; text-align: start; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--accent-line); border-radius: 22px;
  background: radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 70%), rgba(var(--sk-0c252b, 12, 37, 43), 0.45);
  box-shadow: inset 0 1px var(--chrome-hi);
  transition: transform 0.2s var(--ease-out);
}
.gd-next:active { transform: scale(0.98); }
.gd-next.urgent { border-color: var(--red); }
.gd-next small { display: block; font-size: 11px; font-weight: 800; color: var(--gold); }
.gd-next.urgent small { color: var(--red); }
.gd-next strong { display: block; margin-top: 4px; font-size: 16px; font-weight: 900; line-height: 1.6; }
.gd-why { display: block; margin-top: 4px; font-size: 12px; line-height: 1.85; color: var(--text-2); }
.gd-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--gold); color: var(--bg0); font-size: 12.5px; font-weight: 900;
}
.gd-go i { font-style: normal; font-size: 16px; line-height: 1; }
.gd-links { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gd-links button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 12px; margin: 0;
  text-align: start; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--edge-2); border-radius: 18px; background: rgba(var(--sk-0c252b, 12, 37, 43), 0.4);
}
.gd-links button::after {
  /* a chevron drawn, not typed: bidi would mirror a ‹ glyph */
  content: ""; flex: none; width: 8px; height: 8px; margin-inline: auto 4px; border: solid var(--text-3); border-width: 0 0 2px 2px; transform: rotate(45deg);
}
.gd-links .ic { flex: none; width: 26px; height: 26px; }
.gd-links span { display: flex; flex-direction: column; min-width: 0; }
.gd-links b { font-size: 13px; font-weight: 800; }
.gd-links small { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-links button:active { transform: scale(0.98); }
.guide-drawer :is(.gd-next, .gd-links button, .gd-close):focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

/* the welcome and «از نو شروع کن» cards sit inside the drawer as its content */
.guide-drawer .guide-card {
  width: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.guide-drawer .guide-heading { align-items: center; }
.guide-drawer .guide-heading .commander { width: 72px; height: 72px; border-radius: 22px; }
.guide-drawer .guide-actions { flex-wrap: wrap; }
.guide-drawer .guide-actions .btn { flex: 1 1 130px; min-height: 46px; }

/* a little life when it opens */
@keyframes gd-wave { 0% { transform: rotate(-8deg) scale(0.85); } 60% { transform: rotate(4deg) scale(1.04); } 100% { transform: none; } }
@keyframes gd-rise { from { opacity: 0; transform: translateY(10px); } }
.guide-root.open .gd-head .commander { animation: gd-wave 0.7s var(--ease-spring) 0.12s backwards; }
.guide-root.open .gd-next { animation: gd-rise 0.45s var(--ease-out) 0.16s backwards; }
.guide-root.open .gd-links button { animation: gd-rise 0.45s var(--ease-out) 0.22s backwards; }
.guide-root.open .gd-links button + button { animation-delay: 0.27s; }
.guide-root.open .gd-links button + button + button { animation-delay: 0.32s; }

/* screens leave a lane for the handle above the tab bar */
html:not([data-layout=landscape]) #app.app-screen-open:not([data-guide-focus]) .screen,
html:not([data-layout=landscape]) #app.guided-home:not([data-guide-focus]) .screen[data-screen=home] {
  padding-bottom: calc(var(--tab-h) + 86px); scroll-padding-bottom: calc(var(--tab-h) + 86px);
}
/* modes with their own bottom bars or a moving unit hide the help tab */
.troop-moving .guide-root { visibility: hidden; }
html.guide-drawer-open .torch-bubble { display: none; }

/* ================================================================== landscape atlas
   Wide and short, so height is what counts: one slim row on top (inside Telegram's band
   when fullscreen, where it costs the map nothing), the medallion rail by the left thumb,
   the tab dock by the right one, and the advisor pulling out from the left edge.  Every
   control stays inside the notch insets on both sides. */
html[data-layout=landscape] {
  --seal: var(--hud-row); --seal-gap: 6px;
  /* the row: tools at its left end, the capsule in the middle, the flag over the tab dock */
  --hud-t: calc(var(--safe-top) + 6px); --hud-l: calc(var(--safe-left) + 12px);
  --hud-r: calc(var(--safe-right) + 10px + (var(--dock-w) - var(--seal)) / 2);
  --hud-h: calc(var(--safe-top) + 50px);
  /* the left column: rail above the advisor's handle; the map lives between the columns */
  --rail-l: calc(var(--safe-left) + 8px); --handle-h: 60px;
  --rail-b: calc(var(--safe-bottom) + var(--handle-h) + 26px);
  --mid-l: calc(var(--rail-l) + 72px); --mid-r: calc(var(--safe-right) + var(--dock-w) + 22px);
}
/* fullscreen: the whole row moves into the band between Telegram's corner buttons */
html.hud-band[data-layout=landscape] {
  --seal: var(--band-h); --hud-t: calc(var(--sys-top) + (var(--tg-bar) - var(--band-h)) / 2);
  --hud-l: calc(var(--safe-left) + var(--tg-corner)); --hud-r: calc(var(--safe-right) + var(--tg-corner));
  --hud-h: calc(var(--safe-top) + 6px);
}
@media (max-height: 559px) {
  html[data-layout=landscape] { --handle-h: 52px; --rail-b: calc(var(--safe-bottom) + var(--handle-h) + 22px); }
}

html[data-layout=landscape] .hud {
  top: var(--hud-t); left: var(--hud-l); right: var(--hud-r); width: auto; max-width: none; height: var(--seal); margin: 0;
  padding: 0 0 0 calc(3 * var(--seal) + 2 * var(--seal-gap) + 12px); gap: 8px; align-items: center;
}
/* all four readouts fit side by side; centred in what the tools and the flag leave */
html[data-layout=landscape] .hud .stats { flex: 0 1 auto; margin-inline: auto; }
html[data-layout=landscape] .hud-title { flex: 0 1 auto; margin-inline: auto; }

/* tools and the inbox: round seals at the row's left end */
html[data-layout=landscape] #app .landscape-tools {
  position: absolute; z-index: 22; display: flex; direction: ltr; align-items: center; gap: var(--seal-gap);
  left: var(--hud-l); top: var(--hud-t); height: var(--seal);
}
html[data-layout=landscape] .landscape-tools button {
  position: relative; display: grid; place-items: center; width: var(--seal); height: var(--seal); padding: 0;
  border: 1px solid var(--chrome-rim); border-radius: 50%; background: var(--chrome-face); color: var(--text);
  box-shadow: inset 0 1px var(--chrome-hi), var(--chrome-shadow); font: 900 16px Vazirmatn, Tahoma, sans-serif;
  cursor: pointer; transition: transform 0.15s var(--ease-out);
}
/* a 44px-tall target even at the band's 32px, meeting its neighbours half way */
html[data-layout=landscape] .landscape-tools button::before { content: ""; position: absolute; inset: -6px -3px; }
html[data-layout=landscape] .landscape-tools button:active { transform: scale(0.9); }
html[data-layout=landscape] .landscape-tools .ic { width: 20px; height: 20px; }
html[data-layout=landscape] .landscape-tools [aria-expanded=true] { border-color: var(--gold); background: var(--tile-face); }
/* on the map the advisor has its own handle, so the inbox takes the «؟» seat */
html[data-layout=landscape] #app:not(.app-screen-open) .landscape-tools [data-landscape-help] { display: none; }
html[data-layout=landscape] #fab .fab-notices { top: var(--hud-t); left: calc(var(--hud-l) + 2 * (var(--seal) + var(--seal-gap))); }

/* the rail by the left thumb, above the advisor's handle */
html[data-layout=landscape] #fab .map-dock {
  position: absolute; left: var(--rail-l); bottom: var(--rail-b); right: auto; top: auto;
  flex-direction: column-reverse; align-items: center;
}
@media (max-height: 340px) {
  html[data-layout=landscape] #app:not([data-guide-focus]) #fab .map-dock .dock-label { display: none; }
}
/* the tour card takes the left half: the control it teaches waits top right */
html[data-layout=landscape] #app[data-guide-focus] #fab :is(.map-dock, .fab-notices) { left: auto; right: calc(var(--safe-right) + 12px); }
@media (max-height: 500px) and (min-width: 600px) {
  /* card and screen share the width inside the notch insets, 12px apart */
  html[data-layout=landscape] #app[data-guide-focus] { --focus-w: calc(100% - var(--safe-left) - var(--safe-right) - 36px); }
  html[data-layout=landscape] #app[data-guide-focus] .guide-root { inset-inline: auto calc(var(--safe-left) + 12px); width: calc(var(--focus-w) * 0.52); }
  html[data-layout=landscape] #app[data-guide-focus] .screen.on { inset-inline: calc(var(--safe-right) + 12px) auto; width: calc(var(--focus-w) * 0.48); }
}

/* «نیروهای من» by the right thumb, beside the tab dock */
html[data-layout=landscape] .troop-control { top: auto; left: auto; right: var(--mid-r); bottom: calc(var(--safe-bottom) + 12px); }
html[data-layout=landscape] #app.route-on .troop-control { bottom: calc(var(--safe-bottom) + 104px); }
/* bars of the map modes sit between the columns, never over the rail or the dock */
html[data-layout=landscape] :is(.ar-routebar, .ar-shud, .troop-move-hud) { left: var(--mid-l); right: var(--mid-r); max-width: 540px; margin-inline: auto; }
html[data-layout=landscape] .ar-routebar { bottom: calc(var(--safe-bottom) + 12px); }
html[data-layout=landscape] .troop-move-hud { top: calc(var(--hud-h) + 10px); }
.route-on .landscape-rail, .strike-on .landscape-rail { visibility: hidden; }

/* the advisor pulls out from the left edge (the tab dock owns the right one), its tab and
   panel painted under the notch but their contents kept clear of it */
html[data-layout=landscape] .guide-handle {
  right: auto; left: 0; bottom: calc(var(--safe-bottom) + 12px); width: calc(46px + var(--safe-left)); height: var(--handle-h);
  padding: 0 3px 0 var(--safe-left); border-right: 1px solid var(--chrome-rim); border-left: 0; border-radius: 0 22px 22px 0;
}
html[data-layout=landscape] .guide-handle::after { left: auto; right: 5px; }
html[data-layout=landscape] .guide-handle .commander { margin: 0 6px 0 0; }
html[data-layout=landscape] .guide-handle-dot { left: auto; right: 8px; }
html[data-layout=landscape] .guide-root.open > .guide-handle { transform: translateX(-110%); }
/* over a screen the «؟» seal in the row opens it instead */
html[data-layout=landscape] #app.app-screen-open .guide-handle { display: none; }
html[data-layout=landscape] .guide-drawer {
  right: auto; left: 0; bottom: calc(var(--safe-bottom) + 10px); width: calc(min(348px, 100vw - 26px) + var(--safe-left));
  max-height: calc(100% - var(--hud-h) - var(--safe-bottom) - 16px); padding-left: var(--safe-left);
  border-right: 1px solid var(--chrome-rim); border-left: 0; border-radius: 0 28px 28px 0;
  transform: translateX(calc(-100% - 30px));
}
html[data-layout=landscape] .guide-root.open .guide-drawer { transform: none; }
@media (max-height: 459px) {
  /* a short screen: the next step and its button show without scrolling */
  html[data-layout=landscape] .guide-drawer-body { padding: 12px 14px 12px 12px; }
  html[data-layout=landscape] .gd-head { gap: 10px; margin-bottom: 10px; }
  html[data-layout=landscape] .gd-head .commander { width: 50px; height: 50px; border-radius: 17px; }
  html[data-layout=landscape] .gd-head h2 { font-size: 16px; }
  html[data-layout=landscape] .gd-close { width: 36px; height: 36px; }
  html[data-layout=landscape] .gd-next { padding: 10px 12px; }
  html[data-layout=landscape] .gd-next strong { font-size: 14.5px; line-height: 1.5; }
  html[data-layout=landscape] .gd-why { line-height: 1.7; }
  html[data-layout=landscape] .gd-go { margin-top: 6px; }
  html[data-layout=landscape] .gd-links button { min-height: 46px; }
  html[data-layout=landscape] .guide-drawer .guide-heading .commander { width: 56px; height: 56px; border-radius: 18px; }
}

/* the torch's nudge speaks beside the rail (torch-nudge.js adds .side), tail on its left */
.torch-bubble.side::after {
  left: -6px; top: var(--tail, 50%); bottom: auto; transform: translateY(-50%) rotate(45deg);
  border-right: 0; border-left: 1px solid rgba(var(--sk-ffaa46, 255, 170, 70), .45);
}

/* sheets: a panel beside the tab dock, so the map stays in view on the left */
html[data-layout=landscape] .sheet:not(.war-council) {
  left: auto; right: 0; width: min(440px, calc(50vw + 40px)); margin: 0;
  padding-left: 16px; border-radius: 26px 0 0 0; border-left: 1px solid var(--chrome-rim);
}
html[data-layout=landscape] .sheet:not(.war-council) .x { left: 12px; }

@media (prefers-reduced-motion: reduce) {
  .guide-handle.has-news .guide-handle-dot::after { animation: none; display: none; }
}
.reduce-motion .guide-handle.has-news .guide-handle-dot::after { display: none; }