#mission-objective{
  position:fixed;
  left:18px;
  top:86px;
  z-index:120;
  width:min(420px,calc(100vw - 36px));
  padding:14px 18px 16px;
  background:linear-gradient(180deg,rgba(8,21,38,.78),rgba(5,14,26,.82));
  border:1px solid rgba(53,232,255,.34);
  box-shadow:0 0 26px rgba(53,232,255,.1),inset 0 0 18px rgba(53,232,255,.05);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s;
}

#mission-objective::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--hud-border),transparent) top left/78px 2px no-repeat,
    linear-gradient(180deg,var(--hud-border),transparent) top left/2px 26px no-repeat,
    linear-gradient(90deg,transparent,var(--hud-border)) bottom right/28px 2px no-repeat,
    linear-gradient(180deg,transparent,var(--hud-border)) bottom right/2px 28px no-repeat;
}

#mission-objective.visible{opacity:1}

.mission-objective-kicker{
  font-family:"Orbitron",sans-serif;
  color:var(--hud-gold);
  font-size:.78rem;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:10px;
}

#mission-objective-text{
  font-size:1rem;
  line-height:1.32;
  color:var(--hud-text);
}

.mission-shopping-list{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(53,232,255,.18);
  display:grid;
  gap:8px;
}

.mission-shopping-list-title{
  font-family:"Orbitron",sans-serif;
  font-size:.68rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--hud-gold);
}

.mission-shopping-list-row{
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:8px;
  align-items:center;
  min-height:24px;
  color:var(--hud-text);
  font-size:.86rem;
  line-height:1.25;
}

.mission-shopping-list-row::before{
  content:"";
  width:14px;
  height:14px;
  border:1px solid rgba(53,232,255,.64);
  box-shadow:0 0 10px rgba(53,232,255,.12);
}

.mission-shopping-list-row.complete::before{
  background:linear-gradient(135deg,rgba(53,232,255,.95),rgba(240,199,78,.9));
  border-color:rgba(240,199,78,.95);
}

.mission-shopping-list-count{
  font-family:"Orbitron",sans-serif;
  font-size:.72rem;
  color:var(--hud-gold);
  white-space:nowrap;
}

#mission-notice{
  position:fixed;
  left:50%;
  top:132px;
  z-index:720;
  transform:translate(-50%,-8px);
  max-width:min(560px,calc(100vw - 36px));
  background:rgba(10,12,12,.9);
  border:1px solid rgba(216,182,75,.34);
  border-radius:8px;
  padding:10px 16px;
  color:#f4f4e9;
  text-align:center;
  font-family:"Orbitron",sans-serif;
  font-size:.72rem;
  letter-spacing:1px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s,transform .25s;
}

#mission-notice.visible{opacity:1;transform:translate(-50%,0)}

#factory-hud{
  position:fixed;
  top:18px;
  left:18px;
  z-index:400;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s;
}

#factory-hud.visible{opacity:1;pointer-events:auto}

.factory-title{
  font-family:"Orbitron",sans-serif;
  font-size:1.24rem;
  font-weight:800;
  color:var(--hud-gold);
  letter-spacing:3px;
  text-shadow:0 0 22px rgba(240,199,78,.24);
}

.factory-subtitle{
  font-size:.76rem;
  color:#a9b7c6;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-top:4px;
}

#factory-exit{
  position:fixed;
  top:16px;
  right:24px;
  z-index:400;
  background:rgba(216,182,75,.12);
  border:1px solid rgba(216,182,75,.32);
  border-radius:8px;
  padding:8px 20px;
  color:#f4d778;
  font-family:"Orbitron",sans-serif;
  font-size:.7rem;
  letter-spacing:2px;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:all .3s;
}

#factory-exit.visible{opacity:1;pointer-events:auto}
#factory-exit:hover{background:rgba(216,182,75,.22);box-shadow:0 0 20px rgba(216,182,75,.18)}

#factory-tooltip{
  position:fixed;
  bottom:80px;
  left:50%;
  transform:translateX(-50%);
  z-index:400;
  background:rgba(8,8,16,.92);
  backdrop-filter:blur(14px);
  border:1px solid rgba(216,182,75,.3);
  border-radius:8px;
  padding:12px 28px;
  text-align:center;
  color:#f4f4e9;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
  font-family:"Orbitron",sans-serif;
  font-size:.75rem;
  letter-spacing:2px;
}

#factory-tooltip.visible{opacity:1}

#factory-hints{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:400;
  background:rgba(10,10,20,.8);
  backdrop-filter:blur(10px);
  border:1px solid rgba(216,182,75,.12);
  border-radius:8px;
  padding:10px 24px;
  color:#8f8778;
  font-size:.78rem;
  letter-spacing:1px;
  display:flex;
  gap:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
}

#factory-hints.visible{opacity:1}

.vale-dialogue{
  position:fixed;
  inset:0;
  z-index:760;
  background:rgba(3,4,4,.7);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 20px 32px;
  opacity:0;
  pointer-events:none;
  transition:opacity .24s;
}

.vale-dialogue.visible{opacity:1;pointer-events:auto}

.vale-dialogue-panel{
  width:min(860px,calc(100vw - 40px));
  background:rgba(11,12,12,.96);
  border:1px solid rgba(216,182,75,.34);
  border-radius:8px;
  padding:22px 24px;
  color:#eff7f3;
  box-shadow:0 22px 70px rgba(0,0,0,.58);
}

.vale-dialogue-kicker{
  font-family:"Orbitron",sans-serif;
  font-size:.72rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#7dc7c9;
  margin-bottom:8px;
}

.vale-dialogue-panel h2{
  font-family:"Orbitron",sans-serif;
  font-size:1.15rem;
  color:#d8b64b;
  letter-spacing:2px;
  margin-bottom:12px;
}

.vale-dialogue-body{font-size:1.06rem;line-height:1.42;color:#dbe9e2;min-height:88px}
.vale-dialogue-body p{margin:0 0 9px}
.vale-dialogue-body p:last-child{margin-bottom:0}

#vale-dialogue-next{
  margin-top:16px;
  border:1px solid rgba(216,182,75,.52);
  border-radius:6px;
  background:rgba(216,182,75,.15);
  color:#f4f4e9;
  padding:9px 16px;
  font-family:"Orbitron",sans-serif;
  font-size:.72rem;
  letter-spacing:2px;
  cursor:pointer;
}

#vale-dialogue-next:hover,
#vale-dialogue-next:focus-visible{
  background:rgba(125,199,201,.18);
  outline:none;
}

.stranger-live-dialogue{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:750;
  width:min(880px,calc(100vw - 40px));
  transform:translate(-50%,16px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s,transform .22s;
}

.stranger-live-dialogue.visible{
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}

.stranger-live-panel{
  background:linear-gradient(180deg,rgba(8,13,18,.92),rgba(9,10,12,.96));
  border:1px solid rgba(216,182,75,.38);
  border-radius:8px;
  box-shadow:0 18px 54px rgba(0,0,0,.44),inset 0 0 24px rgba(125,199,201,.05);
  padding:20px 22px 18px;
  color:#eff7f3;
}

.stranger-live-kicker{
  font-family:"Orbitron",sans-serif;
  font-size:.7rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#7dc7c9;
  margin-bottom:8px;
}

.stranger-live-panel h2{
  font-family:"Orbitron",sans-serif;
  font-size:1.08rem;
  color:#d8b64b;
  letter-spacing:2px;
  margin-bottom:10px;
}

.stranger-live-body{
  min-height:72px;
  color:#dbe9e2;
  font-size:1.03rem;
  line-height:1.42;
}

.stranger-live-body p{margin:0 0 8px}
.stranger-live-body p:last-child{margin-bottom:0}

#stranger-live-next{
  margin-top:14px;
  border:1px solid rgba(216,182,75,.52);
  border-radius:6px;
  background:rgba(216,182,75,.15);
  color:#f4f4e9;
  padding:9px 16px;
  font-family:"Orbitron",sans-serif;
  font-size:.72rem;
  letter-spacing:2px;
  cursor:pointer;
}

#stranger-live-next:hover,
#stranger-live-next:focus-visible{
  background:rgba(125,199,201,.18);
  outline:none;
}

body.cinematic-running #mission-objective{opacity:0}

@media (max-width:700px){
  #mission-objective{left:12px;top:72px;width:calc(100vw - 24px)}
  #factory-hints{width:calc(100vw - 28px);justify-content:center;flex-wrap:wrap;gap:10px}
  .vale-dialogue{padding:0 12px 18px}
  .vale-dialogue-panel{width:calc(100vw - 24px);padding:18px}
  .vale-dialogue-body{font-size:.96rem}
  .stranger-live-dialogue{bottom:16px;width:calc(100vw - 24px)}
  .stranger-live-panel{padding:17px}
  .stranger-live-body{font-size:.96rem}
}