/* ГРАВИУМ: Кузница — Forge Update 3.0
   Финальный визуальный слой поверх v2 / launch / polish. */

:root{
  --fatal-amber:#ffb84d;
  --fatal-gold:#f2c66d;
  --fatal-cream:#fff1ca;
  --fatal-ink:#07090c;
  --fatal-panel:rgba(10,12,16,.88);
  --fatal-line:rgba(242,198,109,.25);
  --fatal-ease:cubic-bezier(.2,.8,.2,1);
}

html{background:#050608}
body{background:#050608}
#game{filter:saturate(1.08) contrast(1.035)}

/* Ambient layer: depth without hiding the pixel world. */
#worldAtmosphere{
  position:fixed;
  inset:0;
  z-index:4;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .7s ease;
  mix-blend-mode:screen;
}
body.ingame #worldAtmosphere{opacity:1}
#worldAtmosphere::before{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(circle at 18% 82%,rgba(255,142,45,.08),transparent 24%),
    radial-gradient(circle at 82% 14%,rgba(80,145,255,.045),transparent 30%);
  animation:fatalAmbient 13s ease-in-out infinite alternate;
}
#worldAtmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(4,6,10,.08),transparent 25%,transparent 70%,rgba(1,2,4,.34)),
    radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.34) 100%);
}
#worldAtmosphere i{
  position:absolute;
  left:var(--x,50%);
  bottom:-12px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#ffce77;
  box-shadow:0 0 10px #ff9b3d;
  opacity:0;
  animation:fatalEmber var(--d,7s) linear infinite;
}
#worldAtmosphere i:nth-child(1){--x:13%;--d:8.6s;animation-delay:-2s}
#worldAtmosphere i:nth-child(2){--x:51%;--d:6.4s;animation-delay:-5s}
#worldAtmosphere i:nth-child(3){--x:87%;--d:9.2s;animation-delay:-3s}
@keyframes fatalAmbient{to{transform:translate3d(2%,1%,0) scale(1.04)}}
@keyframes fatalEmber{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  12%{opacity:.5}
  76%{opacity:.18}
  100%{transform:translate3d(34px,-74vh,0) scale(.15);opacity:0}
}

/* Zone reveal gives every transition a premium game feel. */
#zoneReveal{
  position:fixed;
  z-index:29;
  left:50%;
  top:22%;
  width:min(520px,calc(100vw - 40px));
  padding:20px 28px;
  border-block:1px solid transparent;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,14px);
  background:linear-gradient(90deg,transparent,rgba(6,8,12,.8) 20%,rgba(6,8,12,.8) 80%,transparent);
}
#zoneReveal.show{animation:fatalZone 3.1s var(--fatal-ease) both}
#zoneReveal span,#zoneReveal strong,#zoneReveal small{display:block}
#zoneReveal span{
  color:var(--fatal-gold);
  font-size:9px;
  font-weight:900;
  letter-spacing:.3em;
  text-transform:uppercase;
}
#zoneReveal strong{
  margin:7px 0 5px;
  color:#fff7e8;
  font-size:clamp(27px,5vw,44px);
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 8px 30px #000;
}
#zoneReveal small{color:rgba(255,255,255,.55);font-size:11px;font-weight:700;letter-spacing:.08em}
@keyframes fatalZone{
  0%{opacity:0;transform:translate(-50%,18px);border-color:transparent}
  13%,68%{opacity:1;transform:translate(-50%,0);border-color:var(--fatal-line)}
  100%{opacity:0;transform:translate(-50%,-12px);border-color:transparent}
}

/* Cinematic title screen. */
#title{isolation:isolate;background-position:center 42%;animation:fatalBg 22s ease-in-out infinite alternate}
#title::before{
  background:
    linear-gradient(90deg,rgba(4,5,8,.93) 0%,rgba(4,5,8,.72) 47%,rgba(4,5,8,.62) 100%),
    linear-gradient(180deg,rgba(3,4,6,.22),rgba(3,4,6,.74));
}
#title::after{
  border:0;
  background:
    radial-gradient(circle at 76% 67%,rgba(255,153,49,.15),transparent 17%),
    linear-gradient(180deg,transparent 62%,rgba(0,0,0,.4));
  box-shadow:inset 0 0 160px rgba(0,0,0,.56);
  animation:fatalGlow 5s ease-in-out infinite alternate;
}
@keyframes fatalBg{to{background-position:52% 46%;background-size:106% auto}}
@keyframes fatalGlow{to{opacity:.72}}

.gv2-title-wrap{perspective:1200px}
.gv2-title-copy{animation:fatalCopyIn .85s var(--fatal-ease) both}
.gv2-entry-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(242,198,109,.2);
  border-left:3px solid var(--fatal-gold);
  border-radius:3px;
  background:linear-gradient(150deg,rgba(15,17,21,.96),rgba(7,9,12,.91));
  box-shadow:-30px 26px 90px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.04);
  animation:fatalPanelIn .9s .12s var(--fatal-ease) both;
}
.gv2-entry-panel::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-90px;
  top:-90px;
  border:1px solid rgba(242,198,109,.15);
  transform:rotate(45deg);
  box-shadow:0 0 0 22px rgba(242,198,109,.018),0 0 0 44px rgba(242,198,109,.012);
  pointer-events:none;
}
@keyframes fatalCopyIn{from{opacity:0;transform:translateX(-24px)}}
@keyframes fatalPanelIn{from{opacity:0;transform:translateX(32px) rotateY(-3deg)}}

.fatal-release{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  padding:5px 7px 5px 10px;
  border:1px solid rgba(242,198,109,.24);
  background:rgba(8,10,13,.66);
  color:#c6c9cf;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}
.fatal-release b{color:var(--fatal-cream);font-size:11px}
.fatal-release i{
  padding:3px 5px;
  background:#4dcc8b;
  color:#06140d;
  font-size:8px;
  font-style:normal;
  letter-spacing:.08em;
}
.gv2-title-copy h1{
  position:relative;
  margin-left:-5px;
  color:#f8f3ea;
  text-shadow:0 2px 0 #7f6030,0 14px 45px rgba(0,0,0,.82);
}
.gv2-title-copy h1::after{
  content:"";
  display:block;
  width:84px;
  height:3px;
  margin:26px 0 0 5px;
  background:linear-gradient(90deg,var(--fatal-gold),transparent);
  box-shadow:0 0 18px rgba(242,198,109,.35);
}
.gv2-feature-row span{
  position:relative;
  padding-left:22px;
  border-color:rgba(255,255,255,.1);
  background:rgba(5,7,10,.62);
}
.gv2-feature-row span::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:4px;
  height:4px;
  background:var(--fatal-gold);
  transform:translateY(-50%) rotate(45deg);
}
.fatal-world-line{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:17px;
  color:rgba(255,255,255,.5);
  font-size:11px;
  font-weight:700;
}
.fatal-world-line i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#58d69b;
  box-shadow:0 0 0 4px rgba(88,214,155,.1),0 0 12px rgba(88,214,155,.5);
  animation:fatalOnline 1.8s ease-in-out infinite;
}
@keyframes fatalOnline{50%{box-shadow:0 0 0 7px rgba(88,214,155,0),0 0 15px rgba(88,214,155,.75)}}
.fatal-tip{
  margin-top:18px;
  padding:13px 14px;
  border-left:2px solid rgba(242,198,109,.48);
  background:rgba(255,255,255,.025);
}
.fatal-tip span{color:var(--fatal-gold);font-size:8px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.fatal-tip p{min-height:30px;margin:5px 0 0;color:#8f96a3;font-size:11px;line-height:1.4;transition:opacity .18s}

#title #playBtn.gv2-mode-btn.primary{
  overflow:hidden;
  background:linear-gradient(135deg,#f7d889,#dca845);
  box-shadow:0 14px 32px rgba(220,168,69,.16);
}
#title #playBtn.gv2-mode-btn.primary::before{
  content:"";
  position:absolute;
  inset:-80% auto -80% -30%;
  width:25%;
  background:rgba(255,255,255,.42);
  transform:skewX(-18deg);
  transition:left .55s ease;
}
#title #playBtn.gv2-mode-btn.primary:hover::before{left:120%}

/* HUD: stronger hierarchy and feedback. */
body.ingame #hudTop{animation:fatalHudIn .55s var(--fatal-ease) both}
@keyframes fatalHudIn{from{opacity:0;transform:translateY(-12px)}}
#hudTop .chip,#routeHud,#campaignHud,#skills,#minimap{
  border-color:rgba(242,198,109,.18)!important;
  background:linear-gradient(155deg,rgba(16,18,23,.93),rgba(7,9,12,.86))!important;
  box-shadow:0 15px 44px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#hudTop .chip{position:relative;overflow:hidden}
#hudTop .chip::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,198,109,.38),transparent);
}
#goldVal,#hpVal{font-variant-numeric:tabular-nums}
#goldVal.fatal-bump,#hpVal.fatal-bump{animation:fatalBump .42s var(--fatal-ease)}
@keyframes fatalBump{45%{color:#fff!important;transform:scale(1.28);text-shadow:0 0 12px var(--fatal-gold)}}
.utility-button{
  position:relative;
  overflow:hidden;
  border-color:rgba(242,198,109,.16);
  background:linear-gradient(145deg,#11151b,#090b0f);
}
.utility-button::after{
  content:"";
  position:absolute;
  inset:auto 8px 0;
  height:1px;
  background:var(--fatal-gold);
  opacity:0;
  transform:scaleX(.2);
  transition:.18s ease;
}
.utility-button:hover::after,.utility-button:focus-visible::after{opacity:1;transform:none}
#routeHud::before{
  content:"";
  position:absolute;
  left:-1px;
  top:15px;
  bottom:15px;
  width:2px;
  background:var(--fatal-gold);
  box-shadow:0 0 12px rgba(242,198,109,.42);
}
.route-line i{box-shadow:0 0 10px rgba(242,198,109,.45)}
#minimap{outline:1px solid rgba(0,0,0,.6);outline-offset:3px}

body.fatal-focus #routeHud,
body.fatal-focus #campaignHud,
body.fatal-focus #skills,
body.fatal-focus #utilityDock,
body.fatal-focus #chatHint{opacity:.12!important;transition:opacity .2s}
body.fatal-focus #routeHud:hover,
body.fatal-focus #campaignHud:hover,
body.fatal-focus #utilityDock:hover{opacity:1!important}

/* Damage and contract feedback driven by the patch script. */
body.fatal-hurt::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:26;
  pointer-events:none;
  box-shadow:inset 0 0 120px rgba(218,49,58,.5);
  animation:fatalHurt .48s ease-out both;
}
body.game-contract-complete #worldAtmosphere{
  filter:brightness(1.8) saturate(1.3);
  transition:filter .16s;
}
@keyframes fatalHurt{from{opacity:1}to{opacity:0}}

/* Mobile keeps the world clear and buttons comfortably tappable. */
@media (max-width:900px){
  #title{animation:none;background-size:cover}
  .gv2-entry-panel{border-left:1px solid rgba(242,198,109,.2);border-top:2px solid var(--fatal-gold)}
  .fatal-release{margin-bottom:13px}
  .gv2-title-copy h1::after{margin-top:18px}
  .fatal-tip{display:none}
}
@media (max-width:600px){
  #title::before{background:linear-gradient(180deg,rgba(4,5,8,.62),rgba(4,5,8,.94) 49%,#08090c 100%)}
  .gv2-title-copy{padding-bottom:17px}
  .gv2-title-copy p{max-width:34em}
  .gv2-feature-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .gv2-feature-row span{padding:7px 8px 7px 19px;font-size:8px}
  .gv2-feature-row span::before{left:8px}
  .fatal-world-line{display:none}
  #zoneReveal{top:18%;padding-inline:14px}
  #zoneReveal strong{font-size:28px}
  #worldAtmosphere i:nth-child(n+3){display:none}
}

/* Graceful performance mode. */
body.fatal-lite #worldAtmosphere i,
body.fatal-lite #title,
body.fatal-lite #title::after{animation:none!important}
body.fatal-lite #worldAtmosphere{mix-blend-mode:normal;opacity:.45}
@media (prefers-reduced-motion:reduce){
  #worldAtmosphere,#worldAtmosphere *,#zoneReveal.show,.fatal-world-line i{animation:none!important}
  #zoneReveal.show{opacity:1;transform:translate(-50%,0)}
}

/* Night expansion: atlas and living master profile. */
.night-panel{
  position:fixed;
  inset:0 0 0 auto;
  z-index:49;
  width:min(760px,100vw);
  display:flex;
  flex-direction:column;
  overflow:auto;
  color:#f4f1e9;
  border-left:1px solid var(--fatal-line);
  background:
    radial-gradient(circle at 90% 10%,rgba(242,198,109,.07),transparent 24%),
    linear-gradient(150deg,#101319,#080a0e 72%);
  box-shadow:-38px 0 110px rgba(0,0,0,.65);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(100%);
  transition:opacity .24s,transform .38s var(--fatal-ease),visibility .24s;
}
.night-panel.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.night-panel-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  padding:30px 30px 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.night-panel-head h2{margin:7px 0 8px;font-size:clamp(32px,6vw,50px);line-height:.95}
.night-panel-head p{margin:0;color:#8f96a3;font-size:13px}
.world-map-grid{
  flex:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:20px 30px 30px;
}
.world-card{
  position:relative;
  min-height:154px;
  overflow:hidden;
  padding:20px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:6px;
  background:
    linear-gradient(140deg,color-mix(in srgb,var(--zone-color) 10%,#11151b),#0b0e12 70%);
  color:#f4f1e9;
  text-align:left;
  cursor:pointer;
  transition:transform .2s var(--fatal-ease),border-color .2s,background .2s;
}
.world-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--zone-color);
  box-shadow:0 0 20px color-mix(in srgb,var(--zone-color) 65%,transparent);
}
.world-card::after{
  content:attr(data-mark);
  position:absolute;
  right:10px;
  bottom:-20px;
  color:color-mix(in srgb,var(--zone-color) 13%,transparent);
  font:900 92px/1 sans-serif;
}
.world-card:hover,.world-card:focus-visible{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--zone-color) 58%,transparent);
  outline:0;
}
.world-card.current{border-color:var(--zone-color);background:color-mix(in srgb,var(--zone-color) 13%,#0b0e12)}
.world-card.current::before{width:5px}
.world-card small,.world-card strong,.world-card span{position:relative;z-index:1;display:block}
.world-card small{color:var(--zone-color);font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.world-card strong{margin:12px 0 7px;font-size:20px}
.world-card span{max-width:29em;color:#8f96a3;font-size:11px;line-height:1.45}
.world-card em{position:absolute;right:14px;top:13px;color:#606772;font-size:9px;font-style:normal;font-weight:800;text-transform:uppercase}
.night-panel-foot{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:15px 30px calc(15px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);
  color:#707783;
  font-size:10px;
  font-weight:700;
}
.night-panel-foot kbd{
  margin-right:5px;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.14);
  background:#151920;
  color:#d9dce2;
}

.profile-panel{width:min(620px,100vw)}
.master-rank{
  display:grid;
  grid-template-columns:112px 1fr;
  align-items:center;
  gap:22px;
  margin:26px 30px 14px;
  padding:24px;
  border:1px solid var(--fatal-line);
  background:linear-gradient(135deg,rgba(242,198,109,.09),rgba(255,255,255,.02));
}
#masterRankMark{
  display:grid;
  width:92px;
  height:92px;
  place-items:center;
  border:1px solid var(--fatal-gold);
  color:var(--fatal-cream);
  font:900 34px/1 Georgia,serif;
  box-shadow:inset 0 0 0 7px #101319,0 0 0 8px rgba(242,198,109,.18),0 0 32px rgba(242,198,109,.12);
}
.master-rank div small,.master-rank div strong,.master-rank div p{display:block}
.master-rank div small{color:var(--fatal-gold);font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.master-rank div strong{margin:7px 0 5px;font-size:30px}
.master-rank div p{margin:0;color:#8f96a3;font-size:11px}
.master-stats{display:grid;gap:10px;padding:10px 30px 24px}
.master-skill{display:grid;grid-template-columns:120px 1fr 52px;align-items:center;gap:14px}
.master-skill span{color:#b9bec7;font-size:12px;font-weight:750}
.master-skill i{height:6px;overflow:hidden;background:#252a33}
.master-skill i::before{content:"";display:block;width:var(--skill-pct);height:100%;background:linear-gradient(90deg,#bd873c,var(--fatal-gold));box-shadow:0 0 9px rgba(242,198,109,.28)}
.master-skill b{text-align:right;color:#f4f1e9;font-size:11px}
.master-progress{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0 30px 30px;
  border-block:1px solid rgba(255,255,255,.08);
}
.master-progress span{padding:18px 8px;color:#737b87;font-size:9px;text-align:center;text-transform:uppercase;letter-spacing:.08em}
.master-progress span+span{border-left:1px solid rgba(255,255,255,.08)}
.master-progress b{display:block;margin-bottom:5px;color:var(--fatal-cream);font-size:24px;letter-spacing:0}

@media (max-width:760px){
  #utilityDock{max-height:calc(100vh - 156px);overflow:auto;scrollbar-width:none}
  .night-panel-head{padding:22px 18px 18px}
  .world-map-grid{grid-template-columns:1fr;padding:14px 18px 24px}
  .world-card{min-height:126px;padding:17px}
  .night-panel-foot{padding-inline:18px}
  .master-rank{grid-template-columns:76px 1fr;gap:17px;margin:18px;padding:18px}
  #masterRankMark{width:64px;height:64px;font-size:24px;box-shadow:inset 0 0 0 5px #101319,0 0 0 6px rgba(242,198,109,.18)}
  .master-rank div strong{font-size:24px}
  .master-stats{padding-inline:18px}
  .master-skill{grid-template-columns:90px 1fr 44px}
  .master-progress{margin-inline:18px}
}