:root{
  --navy:#10264A; --navy-d:#081428; --navy-l:#1E3C6E;
  --yel:#F6B93B; --yel-d:#B87A18; --yel-l:#FFD873;
  --teal:#20C7C4; --coral:#FF685B; --purp:#A56BFF;
  --cream:#FFE6A3; --white:#FFF8E7;

  /* один пиксель игровой сцены в CSS-пикселях: интерфейс масштабируется вместе с графикой */
  --px: min(calc(100vw / 216), 2.6px);
  /* высота окна: в Telegram её задаёт viewportStableHeight, вне — dvh */
  --app-h: 100dvh;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;width:100%;height:var(--app-h);overflow:hidden;
  background:var(--navy-d);
  font-family:"Pixelify Sans",ui-monospace,"Courier New",monospace;
  color:var(--white);
  overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-font-smoothing:none;
}
.hidden{display:none!important}

#cv{
  position:fixed;left:0;top:0;width:100vw;height:var(--app-h);display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;
}

/* ─────────── пиксельная панель ─────────── */
.panel{
  background:var(--navy);
  border:2px solid var(--yel-d);
  box-shadow:0 0 0 2px var(--navy-d), inset 0 0 0 2px var(--navy-l);
  padding:calc(var(--px) * 3) calc(var(--px) * 4);
}

/* ─────────── HUD ─────────── */
#hud{
  position:fixed;left:0;right:0;top:0;z-index:5;pointer-events:none;
  padding:calc(var(--safe-t) + var(--px) * 5) calc(var(--px) * 4.5) 0;
  display:flex;flex-direction:column;gap:calc(var(--px) * 3.5);
}
.hud-top{display:flex;gap:calc(var(--px) * 3.5);align-items:stretch}
.cap{
  display:block;font-size:calc(var(--px) * 4.4);line-height:1;letter-spacing:.14em;
  color:#7E96C6;text-transform:uppercase;margin-bottom:calc(var(--px) * 2);
}
.coins{display:flex;align-items:center;gap:calc(var(--px) * 3.5);min-width:calc(var(--px) * 42)}
.coins b{font-size:calc(var(--px) * 10);line-height:1;color:var(--cream)}
.coin-ic{
  width:calc(var(--px) * 8);height:calc(var(--px) * 8);flex:0 0 auto;
  background:var(--yel);border:2px solid var(--yel-d);
  box-shadow:inset 2px 2px 0 var(--yel-l);
}
.big-ic{width:calc(var(--px) * 12);height:calc(var(--px) * 12)}

.orders{flex:1;min-width:0}
.order-row{display:flex;gap:calc(var(--px) * 3);justify-content:center;align-items:flex-end}
.order-row svg{display:block;image-rendering:pixelated;width:calc(var(--px) * 22);height:auto}
.order-row .slot{opacity:.28}
.ord{position:relative;line-height:0}
.ord.urg{box-shadow:0 0 0 2px var(--cream);animation:blink .4s steps(2,end) infinite}
.ord u{
  position:absolute;right:calc(var(--px) * -1.5);bottom:calc(var(--px) * -2.5);
  text-decoration:none;background:var(--coral);color:#2A0C08;
  font-size:calc(var(--px) * 5);line-height:1;padding:1px 2px;border:1px solid #7A2018;
}

.series{min-width:calc(var(--px) * 44);text-align:right}
.pips{display:flex;gap:calc(var(--px) * 1.5);justify-content:flex-end;margin-bottom:calc(var(--px) * 1.5)}
.pip{width:calc(var(--px) * 5);height:calc(var(--px) * 5);background:#1C355E;box-shadow:inset 0 0 0 1px #0C1C38}
.pip.on{background:var(--yel);box-shadow:inset -2px -2px 0 var(--yel-d),0 0 6px rgba(246,185,59,.8)}
.series b{font-size:calc(var(--px) * 8.5);line-height:1;color:var(--yel-l)}

.timebar{
  position:relative;height:calc(var(--px) * 9);background:var(--navy);
  border:2px solid var(--navy-d);box-shadow:inset 0 0 0 1px var(--navy-l);
}
.timebar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--coral),var(--yel) 45%,var(--teal));
  transition:width .12s linear;
}
.timebar span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--px) * 6);letter-spacing:.1em;color:#08182E;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.timebar.low i{animation:blink .4s steps(2,end) infinite}
.timebar.gain{box-shadow:inset 0 0 0 1px var(--teal),0 0 10px rgba(32,199,196,.8)}

/* строка состояния смены */
.status{display:flex;align-items:center;gap:calc(var(--px) * 4);padding:calc(var(--px) * 2.5) calc(var(--px) * 4)}
.st-item{font-size:calc(var(--px) * 5);color:#7E96C6;letter-spacing:.06em;white-space:nowrap}
.st-item b{color:var(--white);font-size:calc(var(--px) * 7)}
.st-load{display:flex;gap:calc(var(--px) * 1.2);flex:1;justify-content:center}
.st-load i{width:calc(var(--px) * 4);height:calc(var(--px) * 5.5);background:#1C355E;box-shadow:inset 0 0 0 1px #0C1C38}
.st-load i.on{background:var(--teal);box-shadow:inset -1px -1px 0 #12807F}
.st-cargo{
  font-size:calc(var(--px) * 5);letter-spacing:.04em;color:#7E96C6;white-space:nowrap;
  display:flex;align-items:center;gap:calc(var(--px) * 2);
}
.st-cargo.full{color:var(--cream)}
.st-cargo .sw{width:calc(var(--px) * 5);height:calc(var(--px) * 5);box-shadow:inset -2px -2px 0 rgba(0,0,0,.35)}

.say{
  align-self:center;max-width:100%;
  font-size:calc(var(--px) * 5.6);letter-spacing:.06em;text-align:center;
  background:rgba(8,20,40,.82);border:2px solid var(--navy-l);
  padding:calc(var(--px) * 1.5) calc(var(--px) * 5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.flow{
  align-self:center;background:var(--purp);color:#1A0B33;
  border:2px solid #6236B5;box-shadow:0 0 0 2px var(--navy-d);
  font-size:calc(var(--px) * 5.6);letter-spacing:.06em;
  padding:calc(var(--px) * 1.5) calc(var(--px) * 5);
  animation:blink .5s steps(2,end) infinite;
}
@keyframes blink{50%{filter:brightness(1.5)}}

.hint{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--safe-b) + var(--px) * 6);z-index:5;max-width:92vw;
  background:rgba(8,20,40,.86);border:2px solid var(--navy-l);
  color:#BFD2F0;font-size:calc(var(--px) * 5.6);
  padding:calc(var(--px) * 3) calc(var(--px) * 6);text-align:center;
  pointer-events:none;animation:fade .6s ease 5s forwards;
}
@keyframes fade{to{opacity:0}}

/* ─────────── экраны ─────────── */
.screen{
  position:fixed;left:0;top:0;width:100vw;height:var(--app-h);z-index:10;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--safe-t) + 12px) 12px calc(var(--safe-b) + 12px);
  background:repeating-linear-gradient(0deg,rgba(8,20,40,.74) 0 2px,rgba(8,20,40,.64) 2px 4px);
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
}
.dialog{
  width:100%;max-width:min(340px, 92vw);margin:auto;text-align:center;
  background:var(--navy);
  border:3px solid var(--yel);
  box-shadow:0 0 0 3px var(--navy-d), inset 0 0 0 3px var(--navy-l), 0 10px 0 3px rgba(0,0,0,.35);
  padding:clamp(12px, 4.2vw, 18px) clamp(11px, 4vw, 16px);
}

.logo{margin:2px 0 6px;line-height:.94}
.logo-1,.logo-2{font-size:clamp(26px, 9vw, 34px);font-weight:700}
.logo-1{color:var(--cream);letter-spacing:.12em;text-shadow:3px 3px 0 var(--yel-d),6px 6px 0 var(--navy-d)}
.logo-2{color:var(--yel);letter-spacing:.06em;text-shadow:3px 3px 0 #8A5A12,6px 6px 0 var(--navy-d)}
.slogan{margin:6px 0 12px;font-size:clamp(10px, 3vw, 11.5px);color:#9CB4DE;line-height:1.5}

.routes{display:flex;gap:6px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.route{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1 1 84px;max-width:100px}
.route svg{width:100%;max-width:52px;height:auto;image-rendering:pixelated}
.route span{font-size:clamp(8px, 2.6vw, 9.5px);color:#9CB4DE;letter-spacing:.04em}

.how{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;text-align:left}
.how div{display:flex;gap:7px;align-items:center;background:#0C1E3C;border:2px solid var(--navy-l);padding:5px 7px}
.how b{flex:0 0 16px;height:16px;display:flex;align-items:center;justify-content:center;
  background:var(--yel);color:var(--navy);font-size:10px}
.how span{font-size:clamp(9px, 2.8vw, 10.5px);line-height:1.35;color:#CBDCF6}
.how span b{display:inline;background:none;color:var(--yel-l);height:auto;flex:none;font-size:inherit}

h2{margin:0 0 10px;font-size:clamp(15px, 5vw, 18px);letter-spacing:.08em;color:var(--cream)}
.big{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 12px}
.big b{font-size:clamp(30px, 11vw, 40px);line-height:1;color:var(--yel-l);
  text-shadow:3px 3px 0 var(--yel-d),5px 5px 0 var(--navy-d)}
.stats{display:flex;gap:5px;margin-bottom:10px}
.stats>div{flex:1;min-width:0;background:#0C1E3C;border:2px solid var(--navy-l);padding:6px 3px}
.stats b{display:block;font-size:clamp(14px, 5vw, 18px);color:var(--white)}
.stats span{font-size:clamp(7px, 2.3vw, 8.5px);color:#7E96C6;letter-spacing:.04em}
.seal{
  display:inline-block;background:var(--yel);color:var(--navy);
  border:2px solid var(--yel-d);box-shadow:0 0 0 2px var(--navy-d);
  font-size:clamp(9px, 3vw, 11px);letter-spacing:.1em;padding:4px 10px;margin-bottom:8px;
}
.extra{font-size:clamp(8px, 2.6vw, 9.5px);color:#8FA8D4;margin:0 0 8px;min-height:11px;line-height:1.4}
.save{font-size:clamp(8px, 2.6vw, 9.5px);color:#7E96C6;min-height:12px;margin-bottom:8px}
.save.ok{color:var(--teal)}

.btn{
  display:block;width:100%;font-family:inherit;
  font-size:clamp(13px, 4.4vw, 15px);letter-spacing:.08em;
  color:var(--navy);background:var(--yel);border:0;
  box-shadow:0 4px 0 0 var(--yel-d),0 4px 0 3px var(--navy-d);
  padding:clamp(10px, 3.4vw, 13px);cursor:pointer;margin-top:4px;
  touch-action:manipulation;min-height:44px;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--yel-d),0 1px 0 3px var(--navy-d)}
.btn.small{font-size:clamp(10px, 3.2vw, 11.5px);padding:9px 5px;background:var(--navy-l);color:var(--white);
  box-shadow:0 4px 0 0 #12294C,0 4px 0 3px var(--navy-d)}
.btn.small:active{box-shadow:0 1px 0 0 #12294C,0 1px 0 3px var(--navy-d)}
.btn.tiny{width:auto;font-size:12px;padding:8px 12px;flex:0 0 auto;min-height:40px}
.row{display:flex;gap:7px;margin-top:8px}
.row .btn{margin-top:0}
.foot{margin-top:10px;font-size:clamp(8px, 2.6vw, 9.5px);color:#7E96C6;min-height:11px}
.linkbtn{
  display:block;margin:10px auto 0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:clamp(9px, 3vw, 10.5px);letter-spacing:.1em;
  color:#7E96C6;text-decoration:underline;padding:8px 10px;touch-action:manipulation;
}
.linkbtn:active{color:var(--cream)}

.bank{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:12px}
.bank b{font-size:clamp(19px, 7vw, 24px);color:var(--cream)}
.up{display:flex;align-items:center;gap:8px;background:#0C1E3C;
  border:2px solid var(--navy-l);padding:8px;text-align:left;margin-bottom:10px}
.up-txt{flex:1;min-width:0}
.up-txt b{display:block;font-size:clamp(10px, 3.4vw, 12px);color:var(--white);margin-bottom:3px}
.up-txt span{font-size:clamp(8px, 2.6vw, 9.5px);color:#8FA8D4;line-height:1.35}
.up-ic{width:24px;height:24px;flex:0 0 24px;background:var(--yel);
  box-shadow:inset -3px -3px 0 var(--yel-d),inset 3px 3px 0 var(--yel-l)}
.up.max{opacity:.55}
.note{font-size:clamp(8px, 2.6vw, 9.5px);color:#6E86B4;line-height:1.5;margin:0 0 12px}

/* совсем узкие экраны: убираем лишнее из шапки */
@media (max-width: 340px){
  .st-item{font-size:calc(var(--px) * 4.6)}
  .st-cargo{font-size:calc(var(--px) * 4.6)}
}
/* низкие экраны в альбомной ориентации: даём диалогу прокрутку без центрирования */
@media (max-height: 480px){
  .screen{align-items:flex-start}
  .how div{padding:4px 6px}
}