: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;

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

  --font-pixel: "Pixelify Sans", ui-monospace, "Courier New", monospace;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{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:
    radial-gradient(120% 90% at 50% 0%, #1B2F52 0%, #0C1830 55%, #060E1C 100%);
  font-family:var(--font-ui);
  color:var(--white);
  overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;
}
.hidden{display:none!important}

/* игровой кадр: на телефоне во весь экран, на компьютере — вертикальная полоса по центру */
#cv{
  position:fixed;left:50%;top:0;transform:translateX(-50%);
  width:var(--frame-w);height:var(--app-h);display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;
  box-shadow:0 0 0 2px #081428, 0 24px 60px rgba(0,0,0,.55);
}

/* ─────────── пиксельная панель ─────────── */
.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:50%;transform:translateX(-50%);top:0;
  width:var(--frame-w);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:600 calc(var(--px) * 5)/1 var(--font-ui);letter-spacing:.1em;
  color:#8FA8D4;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-family:var(--font-pixel);font-size:calc(var(--px) * 11);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-family:var(--font-pixel);font-size:calc(var(--px) * 9.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:700 calc(var(--px) * 6.4)/1 var(--font-ui);letter-spacing:.06em;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:500 calc(var(--px) * 5.6)/1 var(--font-ui);color:#8FA8D4;white-space:nowrap}
.st-item b{color:var(--white);font-family:var(--font-pixel);font-size:calc(var(--px) * 8)}
.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:500 calc(var(--px) * 5.6)/1 var(--font-ui);color:#8FA8D4;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:600 calc(var(--px) * 6.2)/1.2 var(--font-ui);letter-spacing:.02em;text-align:center;
  background:rgba(8,20,40,.85);border:2px solid var(--navy-l);
  padding:calc(var(--px) * 2) 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:700 calc(var(--px) * 6.2)/1 var(--font-ui);letter-spacing:.02em;
  padding:calc(var(--px) * 2) 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:calc(var(--frame-w) - var(--px) * 10);
  background:rgba(8,20,40,.88);border:2px solid var(--navy-l);
  color:#CBDCF6;font:500 calc(var(--px) * 6.2)/1.35 var(--font-ui);
  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:50%;transform:translateX(-50%);top:0;
  width:var(--frame-w);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,.76) 0 2px,rgba(8,20,40,.66) 2px 4px);
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
}
.dialog{
  width:100%;max-width:min(360px, calc(var(--frame-w) - 20px));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:calc(var(--px) * 8) calc(var(--px) * 7);
}

.logo{margin:2px 0 6px;line-height:.94;font-family:var(--font-pixel)}
.logo-1,.logo-2{font-size:calc(var(--px) * 19);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:calc(var(--px)*4) 0 calc(var(--px)*7);
  font:500 calc(var(--px) * 6.6)/1.5 var(--font-ui);color:#A8C0E4}

.routes{display:flex;gap:6px;justify-content:center;margin-bottom:calc(var(--px)*7);flex-wrap:wrap}
.route{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 1 84px;max-width:104px}
.route svg{width:100%;max-width:56px;height:auto;image-rendering:pixelated}
.route span{font:600 calc(var(--px) * 6)/1.2 var(--font-ui);color:#A8C0E4}

.how{display:flex;flex-direction:column;gap:calc(var(--px)*3);margin-bottom:calc(var(--px)*8);text-align:left}
.how div{display:flex;gap:calc(var(--px)*4);align-items:center;background:#0C1E3C;
  border:2px solid var(--navy-l);padding:calc(var(--px)*3.4) calc(var(--px)*4)}
.how b{flex:0 0 calc(var(--px)*10);height:calc(var(--px)*10);display:flex;align-items:center;justify-content:center;
  background:var(--yel);color:var(--navy);font:700 calc(var(--px)*6)/1 var(--font-ui)}
.how span{font:500 calc(var(--px) * 7)/1.42 var(--font-ui);color:#DCE8F8}
.how span b{display:inline;background:none;color:var(--yel-l);height:auto;flex:none;
  font-size:inherit;font-weight:700}

h2{margin:0 0 calc(var(--px)*6);font:700 calc(var(--px) * 10)/1.1 var(--font-pixel);
  letter-spacing:.08em;color:var(--cream)}
.big{display:flex;align-items:center;justify-content:center;gap:8px;margin:calc(var(--px)*4) 0 calc(var(--px)*7)}
.big b{font-family:var(--font-pixel);font-size:calc(var(--px) * 23);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:calc(var(--px)*3);margin-bottom:calc(var(--px)*6)}
.stats>div{flex:1;min-width:0;background:#0C1E3C;border:2px solid var(--navy-l);padding:calc(var(--px)*4) calc(var(--px)*2)}
.stats b{display:block;font:700 calc(var(--px) * 11)/1.1 var(--font-pixel);color:var(--white)}
.stats span{font:500 calc(var(--px) * 5.4)/1.25 var(--font-ui);color:#8FA8D4}
.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:700 calc(var(--px) * 6.2)/1 var(--font-ui);letter-spacing:.08em;
  padding:calc(var(--px)*2.6) calc(var(--px)*6);margin-bottom:calc(var(--px)*5);
}
.extra{font:500 calc(var(--px) * 5.8)/1.45 var(--font-ui);color:#9CB4DE;margin:0 0 calc(var(--px)*5);min-height:11px}

/* ─────────── звание ─────────── */
.rank{
  background:#0C1E3C;border:2px solid var(--navy-l);
  padding:calc(var(--px)*4) calc(var(--px)*4.5);
  margin:0 0 calc(var(--px)*6);text-align:left;
}
.rank.compact{margin:calc(var(--px)*6) 0 calc(var(--px)*3)}
.rank-head{display:flex;align-items:center;gap:calc(var(--px)*3);margin-bottom:calc(var(--px)*3)}
.rank-lvl{
  flex:0 0 auto;background:var(--yel);color:var(--navy);
  font:700 calc(var(--px)*5.4)/1 var(--font-ui);letter-spacing:.02em;
  padding:calc(var(--px)*1.8) calc(var(--px)*2.6);
}
.rank-name{
  font:700 calc(var(--px)*7.4)/1.15 var(--font-ui);color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rank-bar{
  height:calc(var(--px)*5);background:#08182E;
  box-shadow:inset 0 0 0 1px var(--navy-l);overflow:hidden;
}
.rank-bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--teal),var(--yel));
  transition:width .5s cubic-bezier(.2,.9,.3,1);
}
.rank-next{
  display:block;margin-top:calc(var(--px)*2.4);
  font:500 calc(var(--px)*5.4)/1.35 var(--font-ui);color:#8FA8D4;
}

.promo{
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--px)*1.6);
  background:linear-gradient(180deg,var(--yel-l),var(--yel));color:var(--navy);
  border:2px solid var(--yel-d);box-shadow:0 0 0 2px var(--navy-d),0 0 20px rgba(246,185,59,.45);
  padding:calc(var(--px)*3.4) calc(var(--px)*5);margin-bottom:calc(var(--px)*5);
  animation:promoIn .45s cubic-bezier(.2,.9,.3,1.4);
}
.promo-cap{font:700 calc(var(--px)*5)/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.promo b{font:700 calc(var(--px)*8.6)/1.15 var(--font-ui);letter-spacing:.01em}
@keyframes promoIn{from{opacity:0;transform:scale(.82) translateY(-6px)}}
.save{font:500 calc(var(--px) * 5.8)/1.4 var(--font-ui);color:#8FA8D4;min-height:12px;margin-bottom:calc(var(--px)*5)}
.save.ok{color:var(--teal)}

.btn{
  display:block;width:100%;font-family:var(--font-pixel);
  font-size:calc(var(--px) * 9);letter-spacing:.06em;
  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:calc(var(--px) * 6);cursor:pointer;margin-top:4px;
  touch-action:manipulation;min-height:46px;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--yel-d),0 1px 0 3px var(--navy-d)}
.btn.small{font:600 calc(var(--px) * 5.8)/1.15 var(--font-ui);letter-spacing:.04em;
  padding:calc(var(--px)*4) calc(var(--px)*2);background:var(--navy-l);color:var(--white);
  box-shadow:0 4px 0 0 #12294C,0 4px 0 3px var(--navy-d);min-height:42px}
.btn.small:active{box-shadow:0 1px 0 0 #12294C,0 1px 0 3px var(--navy-d)}
.btn.tiny{width:auto;font:700 calc(var(--px)*7)/1 var(--font-pixel);padding:8px 12px;flex:0 0 auto;min-height:40px}
.row{display:flex;gap:calc(var(--px)*3);margin-top:calc(var(--px)*4)}
.row .btn{margin-top:0}
.foot{margin-top:calc(var(--px)*6);font:500 calc(var(--px) * 5.8)/1.4 var(--font-ui);color:#8FA8D4;min-height:11px}
.linkbtn{
  display:block;margin:calc(var(--px)*5) auto 0;background:none;border:0;cursor:pointer;
  font:600 calc(var(--px) * 6)/1 var(--font-ui);letter-spacing:.04em;
  color:#8FA8D4;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:calc(var(--px)*7)}
.bank b{font-family:var(--font-pixel);font-size:calc(var(--px) * 14);color:var(--cream)}
.up{display:flex;align-items:center;gap:calc(var(--px)*4);background:#0C1E3C;
  border:2px solid var(--navy-l);padding:calc(var(--px)*4);text-align:left;margin-bottom:calc(var(--px)*6)}
.up-txt{flex:1;min-width:0}
.up-txt b{display:block;font:700 calc(var(--px) * 7)/1.2 var(--font-ui);color:var(--white);margin-bottom:3px}
.up-txt span{font:500 calc(var(--px) * 5.8)/1.4 var(--font-ui);color:#9CB4DE}
.up-ic{width:calc(var(--px)*14);height:calc(var(--px)*14);flex:0 0 auto;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:500 calc(var(--px) * 5.8)/1.5 var(--font-ui);color:#7E96C6;margin:0 0 calc(var(--px)*7)}

/* совсем узкие экраны: убираем лишнее из шапки */
@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}
}