:root{
  --launch-bg:rgba(8,10,13,.92);
  --launch-panel:#0d1015;
  --launch-panel-raised:#13171d;
  --launch-line:rgba(235,224,201,.13);
  --launch-line-gold:rgba(225,180,87,.34);
  --launch-gold:#e1b457;
  --launch-gold-soft:#f1d394;
  --launch-copper:#d97f4d;
  --launch-mint:#64cba0;
  --launch-blue:#6faee8;
  --launch-red:#e66f79;
  --launch-text:#f3efe7;
  --launch-muted:#9299a5;
  --launch-shadow:0 18px 48px rgba(0,0,0,.42);
}

body.ingame::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:inset 0 0 90px rgba(0,0,0,.18);
}

/* The world remains the main visual. Interface elements stay close to edges. */
#hudTop{
  top:14px;
  left:16px;
  right:76px;
  min-height:48px;
  display:flex;
  gap:8px;
  align-items:center;
}

#hudTop .chip{
  min-height:46px;
  padding:0 13px;
  border-color:var(--launch-line)!important;
  background:var(--launch-bg)!important;
  color:var(--launch-text)!important;
  box-shadow:var(--launch-shadow)!important;
}

.game-brand-chip{
  width:202px;
  gap:12px;
  overflow:hidden;
}

.game-brand-chip img{
  width:116px;
  height:auto;
  display:block;
  image-rendering:pixelated;
}

.game-brand-chip span{
  padding-left:11px;
  border-left:1px solid var(--launch-line);
  color:var(--launch-muted);
  font-size:11px;
  font-weight:750;
}

#bagChip{
  min-width:258px;
  justify-content:flex-start;
  gap:7px;
}

#bagChip b{
  min-width:16px;
  color:var(--launch-text)!important;
  font-variant-numeric:tabular-nums;
}

.hud-currency{
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border:1px solid var(--launch-line-gold);
  color:var(--launch-gold-soft);
  font-size:10px;
  font-weight:900;
}

.bag-sep{
  width:1px;
  height:20px;
  margin:0 2px;
  background:var(--launch-line);
  opacity:1;
}

.hp-chip{
  min-width:90px;
  justify-content:center;
}

.hp-mark{
  display:grid;
  width:21px;
  height:21px;
  place-items:center;
  color:var(--launch-red);
  font-size:18px;
  font-weight:500;
}

.online-chip{
  min-width:112px;
  justify-content:center;
}

.online-label{
  color:var(--launch-muted);
  font-size:10px;
  font-weight:700;
}

#utilityDock{
  top:78px;
  right:14px;
  z-index:27;
  display:flex;
  flex-direction:column;
  gap:7px;
  pointer-events:auto;
}

.utility-button{
  width:50px;
  min-height:50px;
  padding:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid var(--launch-line);
  border-radius:6px;
  background:var(--launch-panel);
  color:var(--launch-muted);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  cursor:pointer;
  font:700 8px/1.1 inherit;
  transition:transform .15s ease,border-color .15s ease,color .15s ease,background .15s ease;
}

.utility-button:hover,
.utility-button:focus-visible{
  transform:translateX(-3px);
  border-color:var(--launch-line-gold);
  background:var(--launch-panel-raised);
  color:var(--launch-text);
  outline:0;
}

.utility-glyph{
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  color:var(--launch-gold-soft);
  font:850 10px/1 inherit;
}

#routeHud{
  top:78px;
  left:16px;
  width:326px;
  min-height:92px;
  padding:13px 15px 12px;
  border-color:var(--launch-line-gold)!important;
  background:var(--launch-bg)!important;
  box-shadow:var(--launch-shadow)!important;
}

.route-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
}

.route-k{
  margin:0;
  color:var(--launch-gold)!important;
  font-size:9px;
  letter-spacing:.14em;
}

#routeZoneBadge{
  padding:3px 6px;
  border:1px solid var(--launch-line);
  color:var(--launch-muted);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
}

#routeTitle{
  max-width:285px;
  color:var(--launch-text);
  font-size:14px;
  line-height:1.25;
}

#routeMeta{
  max-width:285px;
  margin-top:4px;
  color:var(--launch-muted);
  font-size:11px;
  line-height:1.35;
}

.route-line{
  height:2px;
  margin-top:10px;
  overflow:hidden;
  background:rgba(255,255,255,.07);
}

.route-line i{
  display:block;
  width:34%;
  height:100%;
  background:var(--launch-gold);
  transform-origin:left;
  animation:routeBreathe 2.8s ease-in-out infinite;
}

@keyframes routeBreathe{
  0%,100%{transform:scaleX(.72);opacity:.62}
  50%{transform:scaleX(1);opacity:1}
}

/* Contracts live beside the route instead of covering the player. */
#campaignHud{
  left:16px;
  top:180px;
  width:326px;
  padding:14px 15px;
  border-color:var(--launch-line)!important;
  border-radius:6px;
  background:var(--launch-bg);
  box-shadow:var(--launch-shadow);
  transform:translateX(-12px);
}

#campaignHud.show{transform:none}
#campaignHud.idle{top:180px;right:auto;bottom:auto;width:326px}

.gv2-run-top span{
  color:var(--launch-gold-soft);
  font-size:11px;
  letter-spacing:.04em;
}

.gv2-run-top strong{
  color:var(--launch-text);
  font-size:18px;
}

.gv2-run-goals{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin:10px 0 8px;
}

.gv2-run-goal{
  width:100%;
  height:28px;
  padding:6px 8px;
  background:#1b2028;
}

.gv2-run-goal>span{
  color:#d7d9dd;
  font-size:9px;
}

.gv2-run-foot{
  min-height:18px;
  font-size:9px;
  letter-spacing:.06em;
}

.gv2-run-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.gv2-run-actions .gv2-btn{
  width:100%;
  min-height:38px;
  padding:0 9px;
  font-size:10px;
}

#skills{
  top:auto;
  right:76px;
  bottom:16px;
  width:184px;
  padding:12px 13px 10px;
  border-color:var(--launch-line)!important;
  background:var(--launch-bg)!important;
  box-shadow:var(--launch-shadow)!important;
}

#skills h3{
  color:var(--launch-muted)!important;
  font-size:9px;
  letter-spacing:.15em;
}

#skills .skill{margin-bottom:7px}
#skills .skill:last-child{margin-bottom:0}
#skills .skill .row{font-size:10px}
#skills .skill .row span{color:#c9cdd3}
#skills .skill .row em{color:var(--launch-gold-soft)}
#skills .bar{height:3px!important}

#minimap{
  right:14px;
  bottom:16px;
  width:50px;
  height:50px;
  border-color:var(--launch-line)!important;
  opacity:.88;
}

#chatWrap{left:16px;bottom:16px;width:min(360px,42vw)}
#chatHint{left:16px;bottom:18px;color:rgba(243,239,231,.55)}

#prompt{
  bottom:26px;
  min-height:42px;
  padding:11px 16px;
  border-color:var(--launch-line-gold)!important;
  color:var(--launch-text);
}

#toast{
  bottom:84px;
  max-width:min(560px,calc(100vw - 36px));
  border-color:var(--launch-line-gold)!important;
  color:var(--launch-text);
  white-space:normal;
  text-align:center;
}

#gameMenuBtn{
  top:14px;
  right:14px;
  width:50px;
  height:48px;
  border-color:var(--launch-line-gold);
  background:var(--launch-panel);
  box-shadow:var(--launch-shadow);
}

#gameMenuBtn span{height:16px;background:var(--launch-gold-soft)}

/* Campaign journal gains chapters and clearer progression. */
.gv2-screen{
  width:min(520px,100vw);
  background:#0b0e12;
}

.gv2-screen-head{
  padding:27px 24px 20px;
  background:#0e1116;
}

.gv2-level-scroll{padding:12px 14px 28px}
.gv2-levels{gap:9px}

.gv2-chapter{
  margin:18px 2px 2px;
  padding:13px 2px 7px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid var(--launch-line);
}

.gv2-chapter:first-child{margin-top:0;border-top:0}
.gv2-chapter b{color:var(--launch-text);font-size:14px}
.gv2-chapter span{color:var(--launch-muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}

.gv2-level{
  min-height:146px;
  border-color:var(--launch-line);
  background:#10141a;
}

.gv2-level:hover:not(:disabled){background:#151a21}
.gv2-level h3{font-size:19px}

.gv2-level.locked::after{
  content:"Закрыто · пройди предыдущий этап";
  max-width:160px;
  text-align:right;
}

/* Launch guide. */
.game-guide{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(5,6,8,.86);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease,visibility .24s;
}

.game-guide.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.game-guide-panel{
  width:min(620px,100%);
  padding:34px;
  border:1px solid var(--launch-line-gold);
  border-radius:7px;
  background:#0e1116;
  box-shadow:0 34px 110px rgba(0,0,0,.68);
  transform:translateY(12px);
  transition:transform .28s ease;
}

.game-guide.show .game-guide-panel{transform:none}
.game-guide h2{margin:8px 0 10px;color:var(--launch-text);font-size:36px;line-height:1.05}
.guide-lead{max-width:520px;color:#b3b8c0;font-size:15px;line-height:1.55}
.guide-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:26px 0}
.guide-steps>div{min-height:132px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;border:1px solid var(--launch-line);background:#12161c}
.guide-steps kbd{min-width:46px;height:36px;padding:0 9px;display:grid;place-items:center;border:1px solid var(--launch-line-gold);border-radius:4px;background:#090b0f;color:var(--launch-gold-soft);font:850 12px inherit;box-shadow:inset 0 -3px 0 rgba(255,255,255,.04)}
.guide-steps span,.guide-steps b,.guide-steps small{display:block}
.guide-steps b{color:var(--launch-text);font-size:14px}
.guide-steps small{margin-top:5px;color:var(--launch-muted);font-size:11px;line-height:1.4}
.guide-actions{display:flex;justify-content:flex-end;gap:9px}
.guide-actions button{min-height:48px;padding:0 18px;border-radius:5px;font-family:inherit;font-weight:800;cursor:pointer}
#guideSkip{border:1px solid var(--launch-line);background:transparent;color:var(--launch-muted)}

.pause-quick{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:16px;
}

.pause-quick button{
  min-height:42px;
  border:1px solid var(--launch-line);
  border-radius:5px;
  background:#15191f;
  color:#cbd0d6;
  font:750 11px inherit;
  cursor:pointer;
}

.pause-quick button:hover{border-color:var(--launch-line-gold);color:var(--launch-text)}

/* Keep the mascot available on the title screen but out of the playfield. */
body.ingame > #gravik-client-host{
  display:none !important;
}

@media (max-width:1100px){
  .game-brand-chip{width:154px}
  .game-brand-chip img{width:100px}
  .game-brand-chip span{display:none}
  #bagChip{min-width:230px}
  #routeHud,#campaignHud,#campaignHud.idle{width:300px}
}

@media (max-width:760px){
  body.touch.ingame::after{box-shadow:none}
  body.touch #hudTop{
    top:calc(env(safe-area-inset-top) + 8px);
    left:8px;
    right:62px;
    gap:5px;
  }
  body.touch #hudTop .chip{min-height:42px;padding:0 9px}
  body.touch #bagChip{flex:1;min-width:0;font-size:10px;gap:4px}
  body.touch #bagChip span:nth-of-type(3),
  body.touch #bagChip span:nth-of-type(4){display:none}
  body.touch .hp-chip{min-width:74px}
  body.touch .online-chip{min-width:48px}
  body.touch .online-label{display:none}
  body.touch #gameMenuBtn{top:calc(env(safe-area-inset-top) + 8px);right:8px;width:48px;height:42px}

  body.touch #routeHud{
    top:calc(env(safe-area-inset-top) + 58px);
    left:8px;
    right:8px;
    width:auto;
    min-height:78px;
    padding:10px 12px;
  }
  body.touch #routeTitle{max-width:calc(100vw - 50px);font-size:12px}
  body.touch #routeMeta{max-width:calc(100vw - 50px);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.touch .route-line{margin-top:7px}

  body.touch #campaignHud,
  body.touch #campaignHud.idle{
    top:auto;
    left:8px;
    right:8px;
    bottom:calc(132px + env(safe-area-inset-bottom));
    width:auto;
    max-height:160px;
    padding:10px 11px;
    transform:translateY(10px);
  }
  body.touch #campaignHud.show{transform:none}
  body.touch .gv2-run-goals{display:flex;overflow:hidden;margin:7px 0}
  body.touch .gv2-run-goal{flex:1 1 0;min-width:80px;height:24px;padding:5px 6px}
  body.touch .gv2-run-foot{display:none}
  body.touch .gv2-run-actions{margin-top:6px;padding-top:6px}
  body.touch .gv2-run-actions .gv2-btn{min-height:34px}

  body.touch #utilityDock{
    top:calc(env(safe-area-inset-top) + 145px);
    right:8px;
    display:grid;
    grid-template-columns:repeat(2,42px);
    gap:5px;
  }
  body.touch .utility-button{width:42px;min-height:42px;padding:3px}
  body.touch .utility-button span:last-child{display:none}
  body.touch .utility-glyph{width:20px;height:20px}
  body.touch #btnEmote{display:none}
  body.touch #skills,body.touch #minimap{display:none}
  body.touch #chatWrap{top:auto;bottom:calc(132px + env(safe-area-inset-bottom));left:8px;width:calc(100vw - 16px)}
  body.touch #chatLog{display:none}
  body.touch #chatInput{left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom));height:48px}

  body.touch #stick{
    left:max(12px,env(safe-area-inset-left));
    bottom:max(12px,env(safe-area-inset-bottom));
    width:108px;
    height:108px;
    border-color:rgba(255,255,255,.18);
    background:rgba(10,12,16,.72);
  }
  body.touch #stickThumb{width:46px;height:46px;margin:-23px 0 0 -23px;background:#d7ae61}
  body.touch #tbtns{right:max(12px,env(safe-area-inset-right));bottom:max(13px,env(safe-area-inset-bottom));gap:8px}
  body.touch .tbtn{width:72px;height:48px;border-radius:6px;background:#11151b;color:#cfd3d8;font-size:10px;flex-direction:column;gap:2px}
  body.touch .tbtn b{font-size:15px;color:#17130b}
  body.touch .tbtn.act{background:var(--launch-gold);border-color:var(--launch-gold);color:#46391d}
  body.touch #btnChat{width:54px;height:38px;margin-left:auto}
  body.touch #prompt{bottom:calc(140px + env(safe-area-inset-bottom));max-width:calc(100vw - 26px);font-size:11px}
  body.touch #toast{bottom:calc(198px + env(safe-area-inset-bottom));font-size:11px}

  .game-guide{align-items:flex-end;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .game-guide-panel{padding:24px 18px 18px}
  .game-guide h2{font-size:28px}
  .guide-lead{font-size:13px}
  .guide-steps{grid-template-columns:1fr;margin:18px 0;gap:6px}
  .guide-steps>div{min-height:0;padding:11px;display:grid;grid-template-columns:54px 1fr;align-items:center;gap:10px}
  .guide-steps kbd{grid-row:1}
  .guide-actions{display:grid;grid-template-columns:1fr 1.4fr}
  .guide-actions button{padding:0 10px;font-size:11px}
}

@media (max-width:430px){
  #title{padding:calc(14px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))}
  .gv2-title-copy{padding:2px 2px 18px}
  .gv2-brand{margin-bottom:30px}
  .gv2-title-copy h1{font-size:58px}
  .gv2-title-copy p{font-size:14px}
  .gv2-feature-row{gap:6px;margin-top:17px}
  .gv2-feature-row span{padding:7px 8px;font-size:8px}
  .gv2-entry-panel{padding:18px 2px 2px}
  .gv2-entry-head{margin-bottom:16px;font-size:19px}
  #title #nameInput{height:48px}
  #title #playBtn.gv2-mode-btn{min-height:64px}
  .gv2-separator{margin:17px 0 12px}
}

@media (prefers-reduced-motion:reduce){
  .route-line i{animation:none;width:82%}
}