.panda-link{
  position:fixed;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  z-index:101;
  max-width:calc(100vw - 32px);
  padding:10px 20px;
  border:0;
  border-radius:999px;
  background:#c8102e;
  box-shadow:0 0 18px 4px rgba(200,16,46,.6);
  color:#fff;
  font-family:var(--heading, sans-serif);
  font-size:clamp(13px,1.6vw,16px);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  /* starts once the countdown has faded in, then pulses every 2s */
  animation:panda-pulse 2s ease-in-out 4s infinite
}
@keyframes panda-pulse{
  0%{opacity:0;visibility:visible}
  50%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:visible}
}
/* hold it steady while someone is about to click it */
.panda-link:hover,
.panda-link:focus-visible{
  animation:none;
  opacity:1;
  visibility:visible;
  outline:none
}

/* --- Swan station terminal --- */
.lost-modal{
  position:fixed;inset:0;
  z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  box-sizing:border-box;
  background:rgba(0,0,0,.85);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease,visibility 0s linear .4s
}
.lost-modal.open{
  opacity:1;
  visibility:visible;
  transition:opacity .4s ease
}

.lost-bezel{
  position:relative;
  width:min(640px,100%);
  padding:clamp(14px,3vw,28px);
  box-sizing:border-box;
  border-radius:18px;
  background:linear-gradient(160deg,#5b5446,#2c2820 60%,#1b1814);
  box-shadow:0 0 0 2px #0d0c0a,0 30px 60px rgba(0,0,0,.8),inset 0 2px 3px rgba(255,255,255,.15)
}

.lost-screen{
  position:relative;
  overflow:hidden;
  min-height:clamp(240px,45vh,360px);
  padding:clamp(16px,4vw,32px);
  box-sizing:border-box;
  border-radius:26px / 34px;
  background:radial-gradient(ellipse at center,#062a0c 0%,#021405 70%,#010a02 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.9),inset 0 0 8px rgba(51,255,102,.15);
  color:#33ff66;
  font-family:'VT323',ui-monospace,Consolas,monospace;
  font-size:clamp(26px,6vw,40px);
  line-height:1.15;
  text-shadow:0 0 4px rgba(51,255,102,.9),0 0 12px rgba(51,255,102,.45);
  animation:lost-flicker 4s infinite
}
/* scanlines */
.lost-screen::after{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.28) 0 2px,transparent 2px 4px)
}
@keyframes lost-flicker{
  0%,100%{opacity:1}
  92%{opacity:1}
  93%{opacity:.86}
  94%{opacity:1}
  97%{opacity:.93}
}

/* DHARMA logo, pre-tinted phosphor green on a transparent background */
.lost-dharma{
  position:absolute;
  top:50%;left:50%;
  width:min(70%,240px);
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  filter:drop-shadow(0 0 4px rgba(51,255,102,.9)) drop-shadow(0 0 14px rgba(51,255,102,.45))
}
.lost-dharma.flash{animation:lost-dharma-flash .3s steps(1) forwards}
@keyframes lost-dharma-flash{
  0%{opacity:1}
  25%{opacity:0}
  45%{opacity:.85}
  70%,100%{opacity:0}
}

.lost-line{
  display:flex;
  align-items:baseline;
  white-space:pre
}
.lost-prompt{flex:none}
.lost-input{
  flex:1;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  color:inherit;
  font:inherit;
  text-shadow:inherit;
  caret-color:#33ff66;
  letter-spacing:.06em
}

.lost-status{
  min-height:1.2em;
  margin-top:.6em;
  white-space:pre-wrap
}
.lost-status.error{animation:lost-blink .5s steps(1) 6}
.lost-status.granted{
  font-size:1.4em;
  letter-spacing:.08em;
  text-shadow:0 0 6px rgba(51,255,102,1),0 0 20px rgba(51,255,102,.7);
  animation:lost-blink .4s steps(1) infinite
}

.lost-hint{
  min-height:1.2em;
  margin-top:.8em;
  opacity:.75;
  white-space:pre-wrap
}
@keyframes lost-blink{50%{opacity:0}}

.lost-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:clamp(12px,2.5vw,20px)
}
.lost-close,
.lost-execute{
  font-family:'VT323',ui-monospace,Consolas,monospace;
  font-size:20px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:4px;
  padding:6px 16px
}
.lost-close{
  border:1px solid #6d6553;
  background:transparent;
  color:#b8ae95
}
.lost-execute{
  border:0;
  background:linear-gradient(#d9d2bf,#a9a08a);
  color:#1b1814;
  box-shadow:0 3px 0 #5b5446,0 4px 6px rgba(0,0,0,.6)
}
.lost-execute:active{transform:translateY(2px);box-shadow:0 1px 0 #5b5446}
.lost-close:focus-visible,
.lost-execute:focus-visible{outline:2px solid #33ff66;outline-offset:2px}
