/* SAVE BO — Transmission reference direction 2026.10
   Visual language across incoming call and field terminal.
   Pure presentation layer; game state, route and AR controls untouched. */

:root {
  --ref-void: #020b20;
  --ref-ink: #041631;
  --ref-hud: #66caff;
  --ref-blue: #247fff;
  --ref-border: rgba(85, 174, 255, .54);
  --ref-green: #77ff9c;
}

/* Shared star-command stage */
.call-layer::before {
  content:"";
  position:fixed;
  z-index:1;
  pointer-events:none;
  inset:0;
  background:
    radial-gradient(ellipse 40% 30% at 50% 33%, rgba(42,128,248,.16),transparent 85%),
    radial-gradient(circle at 8% 12%,rgba(200,233,255,.94) 0 1px,transparent 2px),
    radial-gradient(circle at 91% 27%,rgba(158,224,255,.76) 0 1px,transparent 2px),
    radial-gradient(circle at 28% 69%,rgba(158,224,255,.7) 0 1px,transparent 2px),
    radial-gradient(circle at 69% 8%,rgba(158,224,255,.84) 0 1px,transparent 2px),
    linear-gradient(rgba(35,112,208,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,112,208,.04) 1px,transparent 1px);
  background-size:auto, 280px 330px,390px 400px,460px 510px,330px 370px,47px 47px,47px 47px;
}
.call-layer::after {
  content:"";
  pointer-events:none;position:fixed;z-index:1;inset:0;
  background:radial-gradient(ellipse at 50% 43%,transparent 23%,rgba(0,5,19,.67) 100%);
}

/* Pre-connection frame: five real layout regions, no painted-on fake controls. */
.panel--intro {
  justify-content:initial;align-items:stretch;
  display:grid;
  grid-template-rows:auto minmax(108px,1fr) auto auto auto;
  gap:0;
  min-width:0;
  padding:calc(env(safe-area-inset-top, 0px) + 15px) 15px calc(env(safe-area-inset-bottom, 0px) + 17px);
  height:100vh;height:100dvh;
  text-align:left;
  background:
    radial-gradient(ellipse 65% 52% at 51% 38%,rgba(14,82,190,.28),transparent 76%),
    linear-gradient(160deg,#01071a 0%,#051332 48%,#010817 100%);
  isolation:isolate;
  overflow:hidden;
  gap:10px;
}
.panel--intro::before {
  content:"";z-index:-1;position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(circle at 7% 14%,#79caff 0 1px,transparent 2px),
   radial-gradient(circle at 74% 13%,#9bddff 0 1px,transparent 2px),
   radial-gradient(circle at 92% 35%,#8bbdff 0 1px,transparent 2px),
   radial-gradient(circle at 25% 57%,#76cfff 0 1px,transparent 2px),
   repeating-linear-gradient(0deg,transparent 0 27px,rgba(69,153,250,.028) 28px 29px);
  background-size:302px 330px,450px 400px,393px 330px,390px 461px,auto;
  opacity:.82;
}
.panel--intro::after {
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  box-shadow:inset 0 0 80px rgba(0,3,14,.75),inset 0 0 0 1px rgba(58,137,232,.06);
}
.intro-head {
  position:relative;display:flex;min-width:0;justify-content:space-between;align-items:center;
  padding:0 1px 10px;
  border-bottom:1px solid rgba(63,159,255,.58);
}
.intro-head::after {
  content:"";position:absolute;bottom:-2px;left:0;width:46px;height:2px;
  background:#70d9ff;box-shadow:0 0 12px #2dbdff;
}
.intro-head__brand {display:flex;gap:9px;min-width:0;align-items:center;}
.intro-head__logo {
  width:40px;height:40px;flex:none;fill:#d3edff;
  filter:drop-shadow(0 0 7px rgba(63,173,255,.76));
}
.intro-head__brand strong {
  display:block;color:#e9f7ff;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(18px,5vw,28px);
  letter-spacing:.035em;font-style:italic;text-shadow:0 0 12px rgba(52,142,255,.58);
  white-space:nowrap;line-height:1.03;
}
.intro-head__brand small {
  display:block;margin-top:5px;color:#64bdff;font-size:9px;letter-spacing:.17em;font-weight:750;
  white-space:nowrap;
}
.intro-head__signal {display:flex;align-items:center;gap:9px;flex:none;}
.intro-head__bars {display:flex;align-items:flex-end;gap:3px;height:22px;}
.intro-head__bars i {display:block;width:4px;background:#8cd8ff;box-shadow:0 0 9px rgba(78,162,255,.43);}
.intro-head__bars i:nth-child(1){height:8px;}
.intro-head__bars i:nth-child(2){height:14px;}
.intro-head__bars i:nth-child(3){height:18px;}
.intro-head__bars i:nth-child(4){height:22px;}
.intro-head__secure {display:block;color:#b8dfff;font:750 10px/1.1 ui-monospace,monospace;white-space:nowrap;letter-spacing:.03em;}
.intro-head__secure b {color:#ffac59;font-size:9px;filter:drop-shadow(0 0 5px #ffad5f);}
.intro-head__secure small {display:block;margin-top:5px;color:#66a9e7;font-size:8px;font-weight:600;letter-spacing:.02em;}

.intro-scene {
  position:relative;min-height:0;overflow:hidden;
  border-left:1px solid rgba(67,155,255,.13);border-right:1px solid rgba(67,155,255,.13);
  background:radial-gradient(ellipse at center 42%,rgba(20,92,211,.22),transparent 68%);
}
.intro-scene::before {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(76,167,255,.024) 4px 5px);
}
.intro-scene__side {
  position:absolute;z-index:4;top:20px;width:86px;padding:12px 9px;
  border:1px solid rgba(81,178,255,.52);border-radius:8px 2px 12px 2px;
  background:rgba(2,19,47,.68);display:flex;flex-direction:column;gap:5px;
  box-shadow:inset 0 0 12px rgba(20,122,239,.08);
}
.intro-scene__side--left {left:4px;}
.intro-scene__side--right{right:4px;text-align:right;align-items:flex-end;border-radius:2px 8px 2px 12px;}
.intro-scene__mini{font:650 9px/1.35 ui-monospace,Consolas,monospace;letter-spacing:.04em;color:#7abcf4;}
.intro-scene__side strong{font:800 12px/1.2 ui-monospace,monospace;color:#71ffae;}
.intro-scene__bars{font-size:12px;letter-spacing:.15em;color:#6affb4;}
.intro-scene__aura {
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:72%;height:68%;
  background:radial-gradient(ellipse,rgba(40,141,254,.45),rgba(26,98,230,.14) 46%,transparent 73%);
  filter:blur(18px);
}
.intro-scene__beam {
  position:absolute;left:50%;top:26%;bottom:7%;width:70%;transform:translateX(-50%);
  background:linear-gradient(to top,rgba(74,189,255,.36),rgba(34,134,255,.13),transparent);
  clip-path:polygon(29% 100%,71% 100%,98% 0,2% 0);
  filter:blur(6px);
}
.intro-scene__character {
  position:absolute;z-index:3;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(71%,360px);height:98%;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(88,201,255,.9)) drop-shadow(0 0 24px rgba(43,135,255,.55));
  mix-blend-mode:screen;
  animation:intro-float 5.2s ease-in-out infinite;
}
@keyframes intro-float {50%{transform:translate(-50%,calc(-50% - 7px));}}
.intro-scene__floor {
  position:absolute;z-index:2;left:10%;right:10%;bottom:4%;
  height:16%;border:2px solid rgba(61,169,255,.46);border-radius:50%;
  transform:perspective(220px) rotateX(63deg);
  box-shadow:0 0 12px rgba(35,153,255,.6),inset 0 0 30px rgba(71,181,255,.25);
}
.intro-scene__floor span {
  position:absolute;inset:14% 19%;border:2px solid rgba(122,228,255,.73);border-radius:50%;
  box-shadow:0 0 25px rgba(87,206,255,.74);
}
.intro-scene__spark {position:absolute;z-index:4;color:#a0d8ff;font-size:22px;filter:drop-shadow(0 0 6px #5eacff);animation:intro-spark 4s ease-in-out infinite;}
.intro-scene__spark--a{top:28%;left:19%;}
.intro-scene__spark--b{top:42%;right:13%;animation-delay:1.4s;font-size:15px;}
@keyframes intro-spark{50%{opacity:.3;transform:scale(.65);}}

.intro-message {
  position:relative;padding:13px 15px 16px;border:1px solid rgba(79,173,255,.72);
  border-radius:10px 3px 10px 3px;
  background:linear-gradient(130deg,rgba(8,39,85,.96),rgba(3,19,50,.94));
  box-shadow:inset 0 0 20px rgba(45,136,255,.14),0 3px 30px rgba(0,7,28,.3);
}
.intro-message::before {
  content:"";position:absolute;left:15px;right:15px;top:-1px;height:2px;
  background:linear-gradient(90deg,#5dd0ff 0 43%,transparent 44%);
}
.intro-message__head {
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  color:#a6dbff;font-size:11px;font-weight:750;letter-spacing:.065em;
}
.intro-message__wave {font-size:14px;letter-spacing:.02em;color:#68bbff;}
.intro-message h1 {
  margin:9px 0 4px;color:#f6faff;font-size:clamp(18px,5.3vw,25px);line-height:1.32;
  font-weight:800;letter-spacing:-.03em;
}
.intro-message p {
  margin:0;color:#c2dcf1;font-size:clamp(12px,3.4vw,15px);line-height:1.55;word-break:keep-all;
}
.intro-connect.btn--primary {
  width:100%;min-height:62px;border-radius:12px;border:2px solid #bbffce;
  background:linear-gradient(180deg,#b8ffb9 0%,#76fc9d 39%,#4ce98b 100%);
  color:#082b25;box-shadow:0 0 0 4px rgba(75,241,129,.11),0 0 28px rgba(74,239,123,.34),inset 0 2px 0 rgba(255,255,255,.63);
  font-size:clamp(19px,5.5vw,24px);font-weight:850;
  display:flex;gap:13px;justify-content:center;align-items:center;
}
.intro-connect span:last-child {font-size:30px;font-weight:400;line-height:.7;}
.intro-connect:active {background:#65e891;}
.intro-note.panel__note {
  margin:0 auto;padding:0;text-align:center;color:#8cabce;
  font-size:10px;line-height:1.4;max-width:100%;
}
/* On short browsers the illustration yields space to real controls. */
@media(max-height:740px){
  .panel--intro{gap:7px;padding-top:calc(var(--safe-t) + 9px);padding-bottom:calc(var(--safe-b) + 9px);}
  .intro-head{padding-bottom:7px;}
  .intro-scene__side{top:10px;padding:7px;}
  .intro-message{padding:10px 13px 12px;}
  .intro-message h1{margin-top:4px;}
  .intro-connect.btn--primary{min-height:52px;}
}
@media(max-height:595px) {
  .intro-head__logo{width:30px;height:30px;}
  .intro-head__brand strong{font-size:16px;}
  .intro-scene__side{display:none;}
  .intro-note{display:none;}
  .intro-message{padding:8px 12px;}
  .intro-message p{font-size:11px;}
  .intro-message h1{font-size:16px;}
  .intro-connect.btn--primary{min-height:46px;font-size:17px;}
}
@media(max-width:375px){
  .intro-head__brand{gap:4px;}
  .intro-head__logo{width:32px;height:32px;}
  .intro-head__brand strong{font-size:18px;}
  .intro-head__brand small{font-size:8px;letter-spacing:.11em;}
  .intro-head__secure small{font-size:7px;}
  .intro-head__signal{gap:5px;}
  .intro-head__bars i{width:3px;}
  .intro-scene__side{width:70px;padding:8px 6px;}
  .intro-scene__mini{font-size:8px;}
  .intro-scene__side strong{font-size:10px;}
  .intro-scene__character{width:76%;}
}

/* Live holo-call inherits the same signal-panel identity. */
.hud {
  top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:calc(var(--safe-t) + 12px) 13px 10px;
  border-bottom:1px solid rgba(78,175,255,.45);
  background:linear-gradient(180deg,rgba(1,9,30,.94),rgba(1,12,32,.54));
  color:#d4efff;min-height:calc(var(--safe-t) + 63px);
}
.hud__brand{display:flex;gap:6px;align-items:center;min-width:0;}
.hud__brand svg{width:27px;height:27px;flex:none;fill:#cce9ff;filter:drop-shadow(0 0 6px rgba(84,183,255,.45));}
.hud__brand strong{display:block;white-space:nowrap;font:italic 800 clamp(14px,4.3vw,19px)/1.1 Impact,Arial,sans-serif;letter-spacing:.04em;}
.hud__brand small{display:block;margin-top:4px;font-size:8px;letter-spacing:.14em;color:#7fcaff;white-space:nowrap;}
.hud__secure{text-align:right;display:grid;gap:3px;justify-items:end;min-width:0;}
.hud__signal{gap:6px;font-size:10px;color:#91fbc0;}
.hud__dot{width:6px;height:6px;}
.hud__channel{font-size:9px;color:#94b7d8;max-width:115px;}
.stage{top:calc(var(--safe-t) + 70px);bottom:calc(var(--safe-b) + 197px);}
.holo{max-height:calc(100% - 5px);}
.holo__body{filter:drop-shadow(0 0 15px rgba(73,178,255,.75)) drop-shadow(0 0 42px rgba(53,116,255,.4));}
.holo__ring{border-color:rgba(139,222,255,.85);}
.caption {
  bottom:calc(var(--safe-b) + 92px);
  left:13px;right:13px;padding:12px 15px 15px;
  border:1px solid rgba(72,177,255,.63);
  border-radius:9px 3px 9px 3px;
  background:linear-gradient(120deg,rgba(8,37,84,.94),rgba(2,16,44,.95));
  box-shadow:0 0 25px rgba(29,115,232,.14);
}
.caption__speaker{color:#9cdaff;font-size:11px;letter-spacing:.075em;}
.caption__text{font-size:clamp(14px,3.8vw,19px);line-height:1.55;text-shadow:none;}
.controls{left:13px;right:13px;bottom:calc(var(--safe-b) + 15px);gap:10px;}
.controls .btn{border-radius:9px;min-height:55px;font-size:14px;}
.controls .btn--danger{background:rgba(38,9,39,.55);border:1px solid rgba(255,103,149,.55);color:#ff8cab;}
.controls .btn--ghost{background:rgba(4,27,61,.75);border:1px solid rgba(88,173,255,.55);color:#d1eaff;}
.panel--connecting {background:rgba(2,11,31,.9);}
@media(max-height:640px){
  .stage{top:calc(var(--safe-t) + 55px);bottom:calc(var(--safe-b) + 168px);}
  .caption{bottom:calc(var(--safe-b) + 73px);padding:9px 11px;}
  .controls .btn{min-height:48px;}
  .caption__text{font-size:13px;}
}

/* Main operation screen: the same bright angular transmission hardware,
   but purpose-built for reading and solving the next mission. */
body[data-state="idle"] .terminal {
  background:
    radial-gradient(ellipse 85% 34% at 50% -13%,rgba(34,111,238,.43),transparent 71%),
    radial-gradient(ellipse 90% 45% at 93% 77%,rgba(5,52,127,.29),transparent 70%),
    linear-gradient(155deg,#04112b 0%,#020c21 67%,#010716);
}
.terminal::before {
  opacity:.52;
  background-size:42px 42px;
}
.term-top {
  padding:calc(var(--safe-t) + 11px) 17px 13px;
  background:linear-gradient(160deg,rgba(4,24,61,.98),rgba(2,13,34,.97));
  border-bottom:1px solid rgba(91,187,255,.6);
  box-shadow:0 6px 30px rgba(0,2,12,.4),inset 0 -1px 0 rgba(84,180,250,.12);
}
.term-top::after{display:block;bottom:-1px;right:10px;width:32px;height:2px;background:#7acbff;}
.term-top__row:first-child{min-height:39px;}
.term-top__emblem{fill:#cfeaff;filter:drop-shadow(0 0 8px rgba(86,165,255,.65));width:28px;height:28px;}
.term-top__cmd{
  color:#e2f3ff;text-shadow:0 0 15px rgba(74,154,255,.55);
  font:italic 800 clamp(16px,4.6vw,21px)/1 Impact,"Arial Narrow",sans-serif;letter-spacing:.09em;
}
.term-top__agent{color:#8affbc;font-size:10px;}
.term-top__agent::before{box-shadow:0 0 8px rgba(85,255,165,.72);background:#5fffad;}
.term-top__comms {
  border:1px solid rgba(98,188,255,.5);border-radius:7px;
  background:rgba(22,80,144,.17);color:#cdeaff;
}
.term-top__title{
  margin:9px 0 10px;font-size:clamp(19px,5.2vw,24px);font-style:italic;letter-spacing:.02em;
  font-weight:840;color:#f5faff;text-shadow:0 0 18px rgba(71,150,250,.4);
}
.term-chip,.term-chip[data-status="active"]{
  color:#8bffb8;border:1px solid rgba(87,251,163,.65);background:rgba(44,167,111,.075);
  padding:5px 10px;border-radius:999px;font-size:10px;
}
.term-chip[data-status="pending"]{border:1px solid rgba(245,197,124,.55);color:#f4c37a;}
.term-progress {background:rgba(68,131,205,.27);height:3px;}
.term-progress span{background:#66caff;box-shadow:0 0 10px rgba(88,202,255,.4);}
.term-top__return{color:#b5dfff;border-top-color:rgba(89,180,255,.2);}
.term-view {padding:16px 14px calc(30px + var(--safe-b));}
.view--map .mission{
  border:1px solid rgba(92,187,255,.69);
  border-radius:11px 3px 11px 3px;
  padding:20px 17px 18px;
  background:
    radial-gradient(ellipse 70% 45% at 50% 29%,rgba(22,95,198,.19),transparent 78%),
    linear-gradient(145deg,rgba(8,37,82,.95),rgba(3,18,47,.97));
  box-shadow:inset 0 0 30px rgba(21,101,207,.13),0 11px 30px rgba(0,4,20,.22);
}
.view--map .mission::before {
  content:"";display:block;z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;
  background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(100,190,255,.025) 6px 7px);
  pointer-events:none;
}
.view--map .mission::after {
  content:"";display:block;top:-1px;left:17px;width:78px;height:2px;
  background:#63cfff;box-shadow:0 0 11px #52b9ff;border:0;
}
.view--map .mission__num{color:#7ed5ff;font-size:11px;letter-spacing:.16em;}
.view--map .mission__title{color:#f6fbff;text-shadow:0 0 20px rgba(74,156,255,.21);font-size:clamp(25px,6.8vw,33px);}
.view--map .mission__meta dt{color:#8dbce4;}
.view--map .mission__meta dd{color:#e4f3ff;}
.view--map .mission__brief {border-top-color:rgba(110,194,255,.26);color:#d5eaff;}
.view--map .mission__detail {border-top-color:rgba(91,171,244,.31);}
.view--map .mission__detail summary{color:#8bd3ff;}
.view--map .mission__visual{
  height:154px;margin:15px 0 7px;overflow:hidden;
  border:1px solid rgba(87,171,253,.37);border-radius:7px;
  background:
    radial-gradient(ellipse 60% 60% at 50% 57%,rgba(25,117,245,.25),transparent 76%),
    linear-gradient(160deg,#0b2a5b,#041430);
  box-shadow:inset 0 0 24px rgba(57,147,251,.14);
}
.view--map .mission__visual::after{color:#8acaff;}
.view--map .hold {
  min-height:67px;background:linear-gradient(155deg,#b7ffc2,#72fbaa 45%,#48e88d);
  border:2px solid #bcffcc;border-radius:9px;
  box-shadow:0 0 0 3px rgba(77,243,142,.07),0 0 24px rgba(55,229,122,.23),inset 0 2px rgba(255,255,255,.47);
}
.view--map .hold__label{color:#072819;font-weight:840;}
.view--map .hold__sub{color:#265139;}
.view--map .btn-term--primary{background:linear-gradient(110deg,#6bc6ff,#a4ecff);color:#082540;box-shadow:0 0 16px rgba(45,144,255,.18);}
.mission-resources,.mission-tools{
  border-color:rgba(72,153,231,.3);border-radius:8px;
  background:rgba(5,23,55,.73);
}
.mission-resources > summary,.mission-tools > summary{color:#d0eaff;}
.mission-resources > summary::after,.mission-tools > summary::after{color:#77d1ff;}
.mission-resources__count{color:#8fbadd;}
.mission-resources__body {border-top-color:rgba(78,155,233,.2);}
.mission-resources__body .card {border-color:rgba(82,165,240,.28);background:rgba(9,37,76,.71);}
.mission-tools__links a {border-color:rgba(82,173,255,.42);color:#c4e9ff;}
body[data-tab="scanner"] .module-head,body[data-tab="comms"] .module-head {
  border:1px solid rgba(91,179,255,.49);border-radius:9px;
  background:linear-gradient(120deg,rgba(14,61,130,.7),rgba(3,20,49,.86));
}
.module-head__title {color:#effaff;}
.module-head__eyebrow {color:#7fd2ff;}
.module-head__caption {color:#9ecbf0;}
.scan-stage {border:1px solid rgba(73,173,255,.65);}
.agent-result__actions .btn-term {box-shadow:none;}
@media(max-width:375px){
  .term-top__tools{gap:7px;}
  .term-top__comms{padding:0 7px;font-size:10px;}
  .term-top__title{font-size:19px;}
}
@media(prefers-reduced-motion:reduce){
 .intro-scene__character,.intro-scene__spark{animation:none!important;}
}