/* The app's own layout: the shell, the floating top bar (title, mode switch, level chips), the screens, the docks at the bottom, the settings sheet.
   The map and what sits on it are in map.css. No colour or effect is chosen here: tokens and the glass material (base.css) only. */

/* The shell is as tall as the VISIBLE area (--app-h) and starts where it starts (--app-top). js/viewport.js writes both from innerHeight and
   visualViewport, not from Telegram's --tg-viewport-height: on iOS the keyboard shrinks the window or overlays it, and this follows either.
   The screens are layers over each other: the map fills the whole shell and the glass bar floats over it. */
#app { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100%); overflow: hidden; background: var(--bg); }
#view { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; overflow: hidden; }
/* A screen arriving. animation-fill-mode is "backwards" on purpose: a finished animation of transform kept by "forwards"/"both" would stay the containing
   block of position: fixed children (verified in Chrome and WebKit). The screens only fade. */
.screen.push, .screen.fade { animation: fade var(--d2) var(--ease) backwards; }
@keyframes fade { from { opacity: 0; } }

/* ---- the floating bar: one pane of glass over the map, below the notch or Telegram's own buttons */
.topbar { position: absolute; z-index: 20; top: calc(var(--sat) + var(--s2)); left: calc(var(--sal) + var(--s3)); right: calc(var(--sar) + var(--s3)); max-width: var(--column); margin: 0 auto;
  display: grid; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-xl); }
.topbar-row { display: flex; align-items: center; gap: var(--s2); min-height: var(--hit); }
.topbar-title { flex: 1; min-width: 0; display: grid; gap: 1px; padding-left: var(--s1); }
.topbar-title h1 { font-size: 17px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title .sub { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--t-cap); color: var(--muted); line-height: 1.3; }
.topbar-title .sub span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .seg > button { min-height: 34px; font-size: 13.5px; padding: 0 var(--s3); }
.topbar .icon-btn.back { margin-left: calc(var(--s1) * -1); }

/* the five level indicators: the name, and four tiny segments (one per region of the level, in the colour of the level, lit when the region is done) */
.levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.levels .chip { flex-direction: column; gap: 5px; min-height: 46px; padding: 7px 2px 8px; font-size: 13px; }
.chip-top { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars { display: flex; gap: 3px; }
.bars i { width: 11px; height: 4px; border-radius: 2px; background: var(--lv); opacity: .3; transition: opacity var(--d2) var(--ease); }
.bars i.on { opacity: 1; box-shadow: 0 0 0 .5px var(--glass-edge-lo); }
.chip[data-reached="false"] { color: var(--muted); }
.chip[data-reached="false"] .bars i { opacity: .16; }

/* ---- the docks: what floats at the bottom of a map (the zoom buttons, the Continue button, an info card) */
.dock { position: absolute; z-index: 10; left: calc(var(--sal) + var(--s3)); right: calc(var(--sar) + var(--s3)); bottom: calc(var(--sab) + var(--s4)); display: flex; align-items: flex-end; justify-content: center;
  gap: var(--s3); pointer-events: none; }
.dock > * { pointer-events: auto; }
.dock.center { justify-content: center; }
.dock.right { justify-content: flex-end; }
.dock.wide .card { width: 100%; max-width: 440px; }
.dock.top { top: calc(var(--bar-bottom, 74px) + var(--s2)); bottom: auto; align-items: flex-start; }
.dock.top .card { width: 100%; max-width: var(--column); }
.info-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.info-title { display: grid; gap: 1px; min-width: 0; }
.card.info { display: grid; gap: var(--s2); }
.card.info .meter { margin: var(--s1) 0; }
.row-line { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.char-text { flex: 1; }
.card.char .meter { margin-top: var(--s1); }
.ctl { display: grid; border-radius: var(--r-xl); padding: 2px; }
.ctl button { width: var(--hit); height: var(--hit); display: grid; place-items: center; border-radius: var(--r-pill); color: var(--text); transition: transform var(--d2) var(--ease), background var(--d1); }
.ctl button + button { box-shadow: inset 0 1px 0 var(--line); border-radius: var(--r-pill); }
.ctl button:active { transform: scale(.9); }
.ctl button[disabled] { opacity: .4; pointer-events: none; }
/* the same buttons in a row (inside the card of a region, so that they never cover the map) */
.ctl.row { display: flex; padding: 2px; }
.ctl.row button { width: 38px; height: 38px; }
.ctl.row button + button { box-shadow: inset 1px 0 0 var(--line); }
.card { border-radius: var(--r-xl); padding: var(--s4); color: var(--text); }
.card .title { font-size: var(--t-title); font-weight: 700; line-height: 1.2; }
.card .meta { font-size: var(--t-sm); color: var(--muted); }

/* ---- the progress of a region or a city: a row of small capsules, one per city or mission */
.meter { display: flex; gap: 4px; }
.meter i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.meter i.on { background: var(--ok); }

/* ---- settings sheet */
.kv { display: grid; gap: var(--s2); margin: 0; font-size: var(--t-sm); }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.kv dt { color: var(--muted); flex: none; }
.kv dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.section-label { font-size: var(--t-meta); font-weight: 600; color: var(--muted); }
.credit { font-size: var(--t-cap); color: var(--muted); line-height: 1.4; }
.empty, .notice { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s7) var(--s4); }
.empty h2, .notice h2 { font-size: var(--t-title); line-height: 1.25; }
.empty p, .notice p { color: var(--muted); max-width: 340px; overflow-wrap: anywhere; }
.scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(var(--sat) + var(--s8) + var(--s6)) calc(var(--sar) + var(--s4)) calc(var(--sab) + var(--s6)) calc(var(--sal) + var(--s4)); }
html[data-kb] .dock { display: none; }      /* data-kb is set while a keyboard is up (viewport.js): with it there is room only for the field and its buttons */

/* ---- narrow phones (320 to 359 px): the same layout with smaller type, so that nothing is cut and nothing touches */
@media (max-width: 359.98px) {
  .topbar { padding: var(--s2) var(--s2); left: calc(var(--sal) + var(--s2)); right: calc(var(--sar) + var(--s2)); }
  .topbar-title h1 { font-size: 16px; }
  .topbar .seg > button { font-size: 12px; padding: 0 var(--s2); min-height: 32px; }
  .levels { gap: 4px; }
  .levels .chip { font-size: 11.5px; padding: 7px 0 8px; }
  .bars { gap: 2px; }
  .bars i { width: 8px; }
}
@media (max-width: 379.98px) {
  .dock.right:not(.up) { bottom: calc(var(--sab) + var(--s4) + 62px); }       /* above the Continue button, which is wide here */
}