/* Secret Pip-Boy terminal theme. Activated by pipboy.js (Konami code or 2 logo taps).
   Palette and effects (scanlines, vignette, phosphor glow, flicker, square corners) inspired by
   iosue-iulianus/homeassistant-pipboy-theme (MIT). */
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");

html.pipboy:root{
  --pb-fg:#1bff80;--pb-dim:#0fa855;--pb-bg:#0c0c0c;--pb-hue:100deg;--pb-sat:3;
  --bg:var(--pb-bg);
  --surface:color-mix(in srgb,var(--pb-fg) 5%,var(--pb-bg));
  --surface-2:color-mix(in srgb,var(--pb-fg) 10%,var(--pb-bg));
  --border:color-mix(in srgb,var(--pb-dim) 55%,var(--pb-bg));
  --text:var(--pb-fg);--text-dim:var(--pb-dim);--accent:var(--pb-fg);
  --font:'Share Tech Mono','Courier New',monospace;--mono:'Share Tech Mono','Courier New',monospace;
  color-scheme:dark;
}
html.pipboy.pb-amber{--pb-fg:#ffb642;--pb-dim:#b87a14;--pb-bg:#0d0800;--pb-hue:0deg;--pb-sat:3}
html.pipboy.pb-blue{--pb-fg:#4fd8ff;--pb-dim:#2a8aa8;--pb-bg:#00080d;--pb-hue:150deg;--pb-sat:3}

/* square corners everywhere except data dots */
html.pipboy :is(button,input,select,textarea,table,header,aside,
  .filter-tag,.mini-tag,.round-card,.list-link,.hex-legend,.filter-toggle,
  .leaflet-popup-content-wrapper,.leaflet-control-zoom,.leaflet-control-zoom a,
  [class^="ai-"],[class*=" ai-"]){border-radius:0!important}

/* phosphor glow on text */
html.pipboy :is(header,.sidebar,.filters-header,.filter-group h3,.round-card,main,h1,h2,h3,th,td,.leaflet-popup-content){
  text-shadow:0 0 5px color-mix(in srgb,var(--pb-fg) 55%,transparent);
}
/* partial (top + right) border on section headers */
html.pipboy :is(.filter-group h3,.filters-header){
  border-top:1px solid var(--pb-dim);border-right:1px solid var(--pb-dim);padding:3px 8px;
}

/* map: monochrome phosphor tiles */
html.pipboy .leaflet-tile-pane{
  filter:grayscale(1) sepia(1) hue-rotate(var(--pb-hue)) saturate(var(--pb-sat)) brightness(1.15) contrast(1.1);
}
html.pipboy .leaflet-container{background:var(--pb-bg)}
html.pipboy .leaflet-control-attribution{background:color-mix(in srgb,var(--pb-bg) 85%,transparent)!important}

/* readable text on bright accent fills */
html.pipboy :is(.filter-tag.active,.ai-agent-launcher.active,.ai-msg.user .ai-msg-bubble,.ai-chat-send){color:var(--pb-bg)!important}

/* CRT: scanlines + faint tint (flickers), then vignette */
html.pipboy body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:
    repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.22) 3px),
    color-mix(in srgb,var(--pb-fg) 3%,transparent);
  animation:pb-flicker 5s steps(1,end) infinite;
}
html.pipboy body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9001;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%);
}
@keyframes pb-flicker{0%,100%{opacity:1}7%{opacity:.88}8%{opacity:1}43%{opacity:.93}44%{opacity:1}71%{opacity:.9}72%{opacity:1}}
@media (prefers-reduced-motion:reduce){html.pipboy body::before{animation:none}}

/* variant picker, injected into the header while active */
.pb-variants{display:flex;gap:5px;align-items:center}
.pb-variants button{width:14px;height:14px;padding:0;border:1px solid transparent;cursor:pointer;background:var(--c);border-radius:0!important}
.pb-variants button.active{outline:1px solid var(--c);outline-offset:2px}
@media (max-width:760px){.pb-variants{display:none}}

/* boot sequence */
#pb-boot{
  position:fixed;inset:0;z-index:10000;background:var(--pb-bg);color:var(--pb-fg);cursor:pointer;
  font-family:'Share Tech Mono','Courier New',monospace;font-size:clamp(12px,min(1.9vw,2.2vh),18px);line-height:1.4;
  padding:7vh 6vw;white-space:pre-wrap;text-shadow:0 0 6px color-mix(in srgb,var(--pb-fg) 70%,transparent);
  overflow:hidden;transition:opacity .35s;
}
#pb-boot .art{white-space:pre}
#pb-boot.out{opacity:0;pointer-events:none}
#pb-boot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.25) 3px);
}
#pb-boot .cur{display:inline-block;width:.6em;height:1em;background:var(--pb-fg);vertical-align:-.15em;animation:pb-blink 1s steps(1,end) infinite}
#pb-boot .skip{position:absolute;right:6vw;bottom:5vh;opacity:.6;font-size:.7em}
@keyframes pb-blink{50%{opacity:0}}

/* no light/dark switch while in Pip-Boy mode */
html.pipboy .theme-toggle{display:none!important}

/* visible way out of Pip-Boy mode (the light/dark button is hidden while active) */
.pb-exit{margin-left:10px;background:none;border:1px solid var(--pb-dim);color:var(--pb-fg);font-family:inherit;font-size:13px;letter-spacing:.06em;padding:3px 8px;cursor:pointer;white-space:nowrap}
.pb-exit:hover{background:var(--pb-fg);color:var(--pb-bg)}

/* logo focus ring (left after tapping it) hugs the title, not the whole grid column */
html.pipboy .logo{justify-self:start}
html.pipboy .logo:focus:not(:focus-visible){outline:none}