/* ЗМЕЙ · Roguelike — оформление */

:root{
  --bg:        #05070f;
  --bg-2:      #0a0e1c;
  --line:      #182238;
  --ink:       #e8eefc;
  --ink-dim:   #8b9ac4;
  --accent:    #34e0a1;
  --accent-2:  #38bdf8;
  --gold:      #ffcf5c;
  --danger:    #ff5d6c;
  --violet:    #a98bff;
  --panel:     rgba(11,16,30,.94);
  --stroke:    rgba(130,160,220,.16);
  --radius:    14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:
    radial-gradient(1200px 700px at 50% -10%, #101a33 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Inter, Roboto, system-ui, sans-serif;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#app{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 12px 12px;
  gap:10px;
}

/* ─────────────── HUD ─────────────── */

#hud{
  width:100%;
  max-width:var(--field-w, 860px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 14px;
  background:linear-gradient(180deg, rgba(20,28,50,.85), rgba(11,16,30,.7));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  backdrop-filter: blur(6px);
}

.hud-left,.hud-right{ display:flex; align-items:center; gap:16px; }
.hud-center{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }

.hud-block{ display:flex; flex-direction:column; line-height:1.05; }
.hud-label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.hud-value{ font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; }

.hearts{ display:flex; gap:5px; }
.heart{
  width:15px; height:15px;
  background:var(--danger);
  clip-path: path("M7.5 14C7.5 14 0 9.3 0 4.6 0 2 2 .4 4 .4c1.5 0 2.7 1 3.5 2 .8-1 2-2 3.5-2 2 0 4 1.6 4 4.2C15 9.3 7.5 14 7.5 14z");
  box-shadow:0 0 10px rgba(255,93,108,.6);
  transition: transform .12s ease, opacity .2s ease;
}
.heart.empty{ background:#2c3550; opacity:.35; box-shadow:none; }
.heart.shield{ background:var(--accent-2); box-shadow:0 0 10px rgba(56,189,248,.7); }

.objective{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.objective strong{ color:var(--gold); }
.objective.ready{ color:var(--violet); animation:pulse 1.2s infinite; }
@keyframes pulse{ 50%{ opacity:.45; } }

.dash-gauge{
  position:relative;
  width:92px; height:26px;
  border:1px solid var(--stroke);
  border-radius:8px;
  overflow:hidden;
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.dash-fill{
  position:absolute; inset:0 100% 0 0;
  background:linear-gradient(90deg, rgba(52,224,161,.45), rgba(56,189,248,.55));
  transition:right .08s linear;
}
.dash-text{
  position:relative;
  font-size:10px; font-weight:700; letter-spacing:.16em;
  color:var(--ink-dim);
}
.dash-gauge.ready .dash-text{ color:var(--accent); text-shadow:0 0 8px rgba(52,224,161,.8); }

.icon-btn{
  font-family:inherit;
  width:30px; height:30px;
  border:1px solid var(--stroke);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  color:var(--ink-dim);
  font-size:13px; font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.icon-btn:hover{ color:var(--ink); border-color:rgba(130,160,220,.4); }
.icon-btn.off{ opacity:.35; }

/* ─────────────── Сцена ─────────────── */

#stage{
  position:relative;
  flex:1;
  width:100%;
  max-width:1320px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

#canvas{
  display:block;
  max-width:100%;
  max-height:100%;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 24px 70px rgba(0,0,0,.6),
    inset 0 0 90px rgba(6,10,24,.9);
  background:var(--bg-2);
  touch-action:none;
}

/* Панель реликвий поверх сцены */
.relics{
  position:absolute;
  top:calc(var(--pad-y, 0px) + 8px);
  left:calc(var(--pad-x, 0px) + 8px);
  display:flex; flex-direction:column; gap:5px;
  pointer-events:none;
  max-width:190px;
}
.relic-chip{
  display:flex; align-items:center; gap:6px;
  padding:3px 8px 3px 5px;
  font-size:11px;
  background:rgba(8,12,24,.78);
  border:1px solid var(--stroke);
  border-radius:20px;
  color:var(--ink-dim);
  backdrop-filter:blur(4px);
  animation:chipIn .3s ease;
}
@keyframes chipIn{ from{ opacity:0; transform:translateX(-10px);} }
.relic-chip .ico{ font-size:13px; }
.relic-chip .lvl{ color:var(--gold); font-weight:700; }

/* Баннер этажа */
.banner{
  position:absolute;
  left:50%; top:38%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  z-index:5;
}
.banner span{
  display:inline-block;
  font-size:34px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 0 30px rgba(52,224,161,.6), 0 6px 24px rgba(0,0,0,.9);
  animation:bannerIn 1.9s ease forwards;
}
@keyframes bannerIn{
  0%   { opacity:0; transform:scale(.8) translateY(14px); letter-spacing:.4em; }
  18%  { opacity:1; transform:scale(1) translateY(0); }
  72%  { opacity:1; }
  100% { opacity:0; transform:scale(1.05) translateY(-10px); }
}
.banner.danger span{ color:var(--danger); text-shadow:0 0 34px rgba(255,93,108,.7); }

/* ─────────────── Отсчёт перед этажом ─────────────── */

/* Чуть выше центра: змей стартует посередине, цифра не должна его закрывать. */
.countdown{
  position:absolute; inset:0 0 22% 0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  z-index:6;
}
.countdown span{
  display:inline-block;
  font-size:120px; font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  text-shadow:0 0 70px rgba(52,224,161,.5), 0 10px 40px rgba(0,0,0,.95);
  animation:countPop .95s ease-out both;
}
.countdown.go span{
  font-size:52px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
  animation:goPop .5s ease-out both;
}
@keyframes countPop{
  0%   { opacity:0; transform:scale(1.55); }
  20%  { opacity:1; transform:scale(1); }
  100% { opacity:.8;  transform:scale(.94); }
}
@keyframes goPop{
  0%   { opacity:0; transform:scale(.7); letter-spacing:.5em; }
  30%  { opacity:1; transform:scale(1); letter-spacing:.22em; }
  100% { opacity:0; transform:scale(1.1); }
}

/* ─────────────── Экраны ─────────────── */

.screen{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,7,16,.82);
  backdrop-filter:blur(7px);
  border-radius:var(--radius);
  z-index:10;
  animation:fade .22s ease;
  overflow-y:auto;
  padding:16px;
}
@keyframes fade{ from{opacity:0} }
.hidden{ display:none !important; }

.panel{
  width:100%; max-width:380px;
  padding:26px 24px;
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  text-align:center;
  display:flex; flex-direction:column; gap:14px;
  margin:auto;
}
.panel.wide{ max-width:660px; }

.logo{
  font-size:52px; font-weight:900; letter-spacing:.1em;
  line-height:.9;
  background:linear-gradient(180deg, #fff, var(--accent) 60%, #16a37b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(52,224,161,.35));
}
.logo em{
  display:block;
  font-size:13px; font-style:normal; font-weight:600;
  letter-spacing:.55em; text-indent:.55em;
  color:var(--ink-dim);
  -webkit-text-fill-color:var(--ink-dim);
  margin-top:8px;
}
.tagline{ color:var(--ink-dim); font-size:13px; }

.screen-title{ font-size:24px; font-weight:800; letter-spacing:.04em; }
.screen-title.death{ color:var(--danger); text-shadow:0 0 24px rgba(255,93,108,.4); }
.screen-sub{ color:var(--ink-dim); font-size:13px; margin-top:-8px; }

.btn{
  font-family:inherit;
  padding:12px 18px;
  border:1px solid var(--stroke);
  border-radius:11px;
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-size:14px; font-weight:700; letter-spacing:.06em;
  cursor:pointer;
  transition:.15s;
}
.btn:hover{ background:rgba(255,255,255,.09); transform:translateY(-1px); }
.btn.primary{
  background:linear-gradient(180deg, var(--accent), #14a37a);
  border-color:transparent;
  color:#04120c;
  box-shadow:0 10px 30px rgba(52,224,161,.25);
}
.btn.primary:hover{ box-shadow:0 14px 40px rgba(52,224,161,.4); }
.btn.big{ padding:16px; font-size:16px; letter-spacing:.12em; }
.btn.ghost{ background:transparent; color:var(--ink-dim); font-weight:600; }
.btn.ghost:hover{ color:var(--ink); }

/* Карточки улучшений */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.card{
  position:relative;
  padding:18px 14px 16px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(28,38,66,.7), rgba(12,18,34,.7));
  cursor:pointer;
  /* button не наследует цвет и шрифт — задаём явно */
  color:var(--ink);
  font-family:inherit;
  text-align:center;
  display:flex; flex-direction:column; gap:8px;
  transition:.16s;
  overflow:hidden;
  animation:cardIn .3s ease backwards;
}
.card:nth-child(2){ animation-delay:.06s; }
.card:nth-child(3){ animation-delay:.12s; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(16px);} }
.card:hover{ transform:translateY(-4px); border-color:var(--c,#7aa); box-shadow:0 14px 40px rgba(0,0,0,.5); }
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c,#7aa);
}
.card .c-ico{ font-size:30px; line-height:1; }
.card .c-name{ font-size:14px; font-weight:800; letter-spacing:.03em; }
.card .c-desc{ font-size:11.5px; color:var(--ink-dim); line-height:1.45; }
.card .c-rar{
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c,#7aa); font-weight:700;
}
.card .c-lvl{
  position:absolute; top:8px; right:10px;
  font-size:10px; color:var(--gold); font-weight:700;
}

/* Списки и статистика */
.records{
  display:flex; justify-content:center; gap:26px;
  padding:12px 0;
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.rec{ display:flex; flex-direction:column; gap:2px; }
.rec b{ font-size:22px; font-variant-numeric:tabular-nums; }
.rec span{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }

.stats{ display:flex; flex-direction:column; gap:6px; font-size:13px; }
.stats .row{ display:flex; justify-content:space-between; color:var(--ink-dim); }
.stats .row b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.stats .row.total{ border-top:1px solid var(--stroke); padding-top:8px; margin-top:4px; font-size:15px; }
.stats .row.total b{ color:var(--gold); }

.new-record{
  padding:8px;
  border-radius:9px;
  background:rgba(255,207,92,.12);
  border:1px solid rgba(255,207,92,.4);
  color:var(--gold);
  font-weight:800; letter-spacing:.2em; font-size:12px;
  animation:pulse 1s infinite;
}

/* Выбор возвышения на титуле */
.asc-pick{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
}
.asc-body{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.asc-title{ font-size:14px; font-weight:800; letter-spacing:.04em; color:var(--gold); }
.asc-line{ font-size:11px; line-height:1.45; color:var(--ink-dim); }
.asc-arrow{
  flex:none; width:34px; height:34px;
  border-radius:9px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--ink); font-size:18px; line-height:1;
  cursor:pointer;
}
.asc-arrow:hover:not(:disabled){ background:rgba(255,255,255,.1); }
/* Закрытые ступени гасим цветом: кнопка остаётся на месте, макет не прыгает. */
.asc-arrow:disabled{ color:rgba(255,255,255,.14); border-color:rgba(255,255,255,.06); cursor:default; }

/* Экран победы */
.screen-title.win{ color:var(--gold); text-shadow:0 0 26px rgba(255,207,92,.35); }
.win-kicker{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
}
.win-text{ display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:1.6; color:var(--ink-dim); }
.win-actions{ display:flex; flex-direction:column; gap:8px; }
.asc-unlock{
  display:flex; flex-direction:column; gap:4px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,207,92,.1);
  border:1px solid rgba(255,207,92,.34);
}
.asc-unlock b{ color:var(--gold); font-size:13px; letter-spacing:.06em; }
.asc-unlock span{ font-size:11px; color:var(--ink-dim); }

.relic-list{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.relic-list:empty::after{ content:"Улучшений пока нет"; color:var(--ink-dim); font-size:12px; }

.controls-hint{
  display:flex; flex-direction:column; gap:6px;
  font-size:11.5px; color:var(--ink-dim);
}
kbd{
  display:inline-block;
  min-width:20px; padding:2px 5px;
  border:1px solid var(--stroke);
  border-bottom-width:2px;
  border-radius:5px;
  background:rgba(255,255,255,.05);
  font-family:inherit; font-size:11px;
  color:var(--ink);
}

/* ─────────────── Вступление к региону ─────────────── */

.interlude{ max-width:470px; gap:10px; }
.act-label{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim);
}
.region-name{
  font-size:30px; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 0 30px rgba(52,224,161,.25);
}
.region-intro{
  display:flex; flex-direction:column; gap:8px;
  margin:10px 0 6px;
  font-size:14px; line-height:1.65; color:var(--ink-dim);
}

/* ─────────────── Карта круга ─────────────── */

.map-panel{ max-width:680px; }
.map{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(5, 1fr);
  height:min(56vh, 440px);
  border-radius:16px;
  /* Ствол колодца: сверху ещё виден свет, ко дну он кончается. */
  background:
    radial-gradient(130% 60% at 50% -6%, rgba(96,132,200,.22) 0%, transparent 64%),
    linear-gradient(180deg, rgba(20,30,54,.7) 0%, rgba(3,5,12,.9) 100%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(150,180,240,.07);
}

/* Рёбра рисуются в координатах той же сетки, поэтому попадают точно в узлы. */
.map-edges{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.map-edges path{
  fill:none;
  stroke:rgba(140,170,225,.32);
  stroke-width:1.4;
  stroke-dasharray:3 6;
  stroke-linecap:round;
}
.map-edges path.past{
  stroke:rgba(52,224,161,.5);
  stroke-width:1.6;
  stroke-dasharray:none;
}
.map-edges path.live{
  stroke:var(--accent);
  stroke-width:1.8;
  stroke-dasharray:5 9;
  animation:flow 1.2s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-14; } }

.mnode{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; padding:0;
  font-family:inherit;
  cursor:pointer;
}
.mnode .mdot{
  position:relative;
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--stroke);
  border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #131c33 0%, #070b16 78%);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.mnode .mi{ font-size:21px; line-height:1; color:var(--ink-dim); transition:color .18s; }
.mnode.t-boss .mdot{ width:66px; height:66px; }
.mnode.t-boss .mi{ font-size:27px; }

/* Гасим цветом, а не прозрачностью: сквозь полупрозрачный круг просвечивают ходы. */
.mnode.locked{ cursor:default; }
.mnode.locked .mdot{ border-color:rgba(130,160,220,.13); }
.mnode.locked .mi{ color:rgba(139,154,196,.45); }
.mnode.locked:hover .mdot{ border-color:rgba(130,160,220,.3); }
.mnode.locked:hover .mi{ color:rgba(139,154,196,.7); }
/* Логово видно с самого верха: спуск должен знать, куда он ведёт. */
.mnode.locked.t-boss .mdot{ border-color:rgba(255,138,61,.4); }
.mnode.locked.t-boss .mi{ color:rgba(255,138,61,.7); }

/* Пройденное гасим, чтобы оно не спорило с доступным ходом. */
.mnode.done .mdot{ border-color:rgba(52,224,161,.24); background:radial-gradient(circle at 50% 34%, #0e1a1c 0%, #070b16 78%); }
.mnode.done .mi{ color:rgba(52,224,161,.45); }

.mnode.open .mdot{
  border-color:var(--c);
  box-shadow:0 0 22px -4px var(--c);
}
.mnode.open .mi{ color:var(--c); }
/* Дышащий ореол: видно, куда можно шагнуть, без подписей на всю карту. */
.mnode.open .mdot::after{
  content:'';
  position:absolute; inset:-5px;
  border-radius:50%;
  border:1px solid var(--c);
  animation:halo 2.4s ease-out infinite;
}
@keyframes halo{
  0%   { transform:scale(.92); opacity:.5; }
  70%  { transform:scale(1.3);  opacity:0; }
  100% { opacity:0; }
}
.mnode.open:hover .mdot,
.mnode.open:focus-visible .mdot{ transform:scale(1.12); }

/* Где змей стоит прямо сейчас. */
.mnode.cur .mdot{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(52,224,161,.12), 0 0 20px -4px var(--accent);
}
.mnode.cur .mi{ color:var(--accent); }

.t-battle  { --c:#7dd3fc; }
.t-elite   { --c:#ff5d6c; }
.t-treasure{ --c:#ffcf5c; }
.t-event   { --c:#a98bff; }
.t-rest    { --c:#34e0a1; }
.t-boss    { --c:#ff8a3d; }

.map-hint{ min-height:34px; line-height:1.35; }
.mh-title{
  display:block;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
}
.mh-line{ display:block; font-size:12px; color:var(--ink-dim); }

/* ─────────────── Сцены ─────────────── */

.event-panel{ text-align:left; max-width:540px; }
.event-panel .screen-title{ text-align:center; }
.event-text{
  display:flex; flex-direction:column; gap:6px;
  font-size:14px; line-height:1.65; color:var(--ink-dim);
}
.event-choices{ display:flex; flex-direction:column; gap:8px; }
.choice{
  font-family:inherit;
  color:var(--ink);
  text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 14px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:.15s;
}
.choice:hover:not(:disabled){
  background:rgba(255,255,255,.08);
  border-color:rgba(130,160,220,.42);
  transform:translateX(3px);
}
.choice:disabled{ opacity:.32; cursor:default; }
.ch-label{ font-size:14px; font-weight:700; }
.ch-detail{ font-size:11px; color:var(--ink-dim); text-align:right; letter-spacing:.03em; }
.event-result{
  padding:12px 14px;
  border-left:2px solid var(--accent);
  border-radius:0 10px 10px 0;
  background:rgba(52,224,161,.07);
  font-size:13.5px; line-height:1.65;
  animation:fade .3s ease;
}

.epitaph{
  font-size:13px; font-style:italic; line-height:1.5;
  color:var(--violet);
  margin-top:-8px;
}

/* Заметка бестиария */
.toast{
  position:absolute;
  left:50%; bottom:calc(var(--pad-y, 0px) + 14px);
  transform:translateX(-50%);
  max-width:min(420px, 86%);
  display:flex; flex-direction:column; gap:3px;
  padding:10px 14px;
  background:rgba(8,12,24,.92);
  border:1px solid var(--stroke);
  border-left:2px solid var(--violet);
  border-radius:10px;
  backdrop-filter:blur(4px);
  pointer-events:none;
  z-index:6;
  animation:toastIn .3s ease;
}
.toast b{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); }
.toast span{ font-size:12.5px; line-height:1.5; color:var(--ink-dim); }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,12px); } }

/* ─────────────── Мобильное управление ─────────────── */

.touch{
  position:absolute;
  inset:auto 0 0 0;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:14px;
  pointer-events:none;
  z-index:6;
}
.touch button{
  pointer-events:auto;
  background:rgba(20,28,50,.6);
  border:1px solid var(--stroke);
  color:var(--ink);
  border-radius:12px;
  font-size:18px;
  backdrop-filter:blur(4px);
}
.touch button:active{ background:rgba(52,224,161,.3); }
.dpad{
  display:grid;
  grid-template-columns:repeat(3,46px);
  grid-template-rows:repeat(2,46px);
  gap:6px;
}
.dpad button[data-dir="up"]   { grid-area:1/2; }
.dpad button[data-dir="left"] { grid-area:2/1; }
.dpad button[data-dir="down"] { grid-area:2/2; }
.dpad button[data-dir="right"]{ grid-area:2/3; }
.touch-dash{ width:74px; height:74px; border-radius:50%!important; font-size:11px!important; font-weight:800; letter-spacing:.06em; }

/* ─────────────── Адаптив ─────────────── */

@media (max-width: 720px){
  .hud-block:nth-child(3){ display:none; }
  .logo{ font-size:40px; }
  .cards{ grid-template-columns:1fr; }
  .card{ flex-direction:row; text-align:left; align-items:center; gap:12px; padding:12px; }
  .card .c-ico{ font-size:24px; }
  .relics{ display:none; }
  .map{ height:min(52vh, 320px); }
  .mnode .mdot{ width:34px; height:34px; }
  .mnode .mi{ font-size:14px; }
  .mnode.t-boss .mdot{ width:42px; height:42px; }
  .mnode.t-boss .mi{ font-size:18px; }
  .choice{ flex-direction:column; align-items:flex-start; gap:3px; }
  .ch-detail{ text-align:left; }
  .region-name{ font-size:24px; }
  .toast{ bottom:calc(var(--pad-y, 0px) + 92px); }
}
@media (max-height: 560px){
  .controls-hint{ display:none; }
}