/* Shared stylesheet for Hyperdweller pages */
:root {
  --bg:#050508;
  --phosphor:#ffffff;
  --phosphor-dim:#e8b8cf;
  --amber:#ff4fa3;
  --alert:#ff1f7a;
  --glass:rgba(5,5,8,0.55);
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  height:100%;
  background:var(--bg);
  overflow-x:hidden;
  overflow-y:auto;
  font-family:'Space Mono', monospace;
}

body.page-index {
  overflow-y:auto;
}

body.page-ascii {
  --bg:#040608;
  --phosphor:#7ef9ff;
  --phosphor-dim:#2e7f8a;
  --amber:#ff3ec8;
  --alert:#ff5a4d;
  --glass:rgba(4,6,8,0.55);
}

button{
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  background:transparent;
  color:var(--phosphor);
  border:1px solid var(--phosphor);
  padding:12px 20px;
  cursor:pointer;
  letter-spacing:1px;
  box-shadow:0 0 12px rgba(255,255,255,0.15) inset;
  transition:background 0.15s, color 0.15s;
}
button:hover{ background:var(--phosphor); color:#20030f; }
button:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

#bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
  background:#0a0007;
}

#crt{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}

#vignette{
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.75) 100%);
}

#flicker{
  position:fixed;
  inset:0;
  z-index:7;
  pointer-events:none;
  background:rgba(255,255,255,0.02);
  animation:flick 6s infinite;
}

@keyframes flick{
  0%,93%,100%{opacity:0;}
  94%{opacity:1;}
  95%{opacity:0;}
  97%{opacity:0.6;}
  98%{opacity:0;}
}

body.page-index {
  overflow-y: auto;
}
body.page-index #stage{
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:40px 20px;
  gap:40px;
}
body.page-index .header{ text-align:center; }
body.page-index .title{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(20px, 4vw, 36px);
  color:var(--phosphor);
  text-shadow:0 0 8px rgba(255,255,255,0.7), 0 0 22px rgba(255,255,255,0.25);
  letter-spacing:3px;
  margin:0 0 8px 0;
}
body.page-index .subtitle{
  font-size:14px;
  color:var(--phosphor-dim);
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0;
}
body.page-index #menu{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:min(600px, 90vw);
  align-items:stretch;
}
body.page-index .menu-item{ display:flex; flex-direction:column; gap:8px; width:100%; }
body.page-index .menu-item-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  width:100%;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,0.35);
  background:var(--glass);
  backdrop-filter:blur(1px);
  box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 20px rgba(255,255,255,0.08) inset;
  text-decoration:none;
  color:var(--phosphor);
  transition:background 0.2s, border-color 0.2s;
  text-align:left;
}
body.page-index .menu-item-header:hover{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.55); }
body.page-index .menu-item-title{
  display:block;
  font-family:'Press Start 2P', monospace;
  font-size:12px;
  letter-spacing:1px;
  color:var(--phosphor);
  text-shadow:0 0 4px rgba(255,255,255,0.5);
}
body.page-index .menu-item-header.main .menu-item-title{ color:var(--amber); text-shadow:0 0 4px rgba(255,79,163,0.6); }
body.page-index .menu-item-status{ display:block; font-size:10px; color:var(--phosphor-dim); letter-spacing:0.5px; margin-top:2px; }
body.page-index .progress-bar-container{ width:100%; height:12px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.2); position:relative; overflow:hidden; }
body.page-index .progress-bar-fill{ height:100%; background:linear-gradient(to right, var(--amber), var(--phosphor)); text-shadow:0 0 4px rgba(255,79,163,0.6); width:0%; transition:width 0.3s ease; display:flex; align-items:center; justify-content:flex-end; padding-right:4px; font-size:8px; color:var(--phosphor); letter-spacing:0.5px; }
body.page-index #info-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.9); z-index:100; opacity:1; transition:opacity 0.3s ease; }
body.page-index #info-overlay.hidden{ opacity:0; pointer-events:none; }
body.page-index .info-box{ background:var(--glass); border:1px solid rgba(255,255,255,0.35); box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 40px rgba(255,255,255,0.08) inset; padding:40px 30px; max-width:500px; text-align:center; backdrop-filter:blur(1px); }
body.page-index .info-box p{ color:var(--phosphor); font-size:13px; letter-spacing:1px; line-height:1.8; margin:0 0 24px 0; text-shadow:0 0 4px rgba(255,255,255,0.4); }
body.page-index #audio-toggle{ position:fixed; top:14px; right:14px; z-index:20; font-family:'Press Start 2P', monospace; font-size:10px; background:transparent; color:var(--phosphor); border:1px solid var(--phosphor); padding:8px 10px; cursor:pointer; letter-spacing:1px; box-shadow:0 0 12px rgba(255,255,255,0.15) inset; transition:background 0.15s, color 0.15s; }
body.page-index #audio-toggle:hover{ background:var(--phosphor); color:#20030f; }
body.page-index #footer{ position:fixed; bottom:12px; left:12px; z-index:15; font-size:9px; color:var(--phosphor-dim); letter-spacing:0.5px; text-shadow:0 0 3px rgba(255,255,255,0.2); }
body.page-index .links {
  position: relative;
  margin-top: 12px;
  text-align: center;
  z-index: 15;
  font-size: 11px;
  color: var(--phosphor-dim);
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(255,255,255,0.2);
  padding: 12px 20px 20px;
}
body.page-index #side-nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; z-index:20; }
body.page-index .side-nav-btn{ font-family:'Press Start 2P', monospace; font-size:10px; letter-spacing:1px; color:var(--phosphor); background:var(--glass); border:1px solid rgba(255,255,255,0.35); padding:8px 10px; text-decoration:none; text-transform:uppercase; cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 20px rgba(255,255,255,0.08) inset; transition:background 0.2s, border-color 0.2s, color 0.2s; }
body.page-index .side-nav-btn:hover{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.55); color:var(--amber); }
body.page-index #nav-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.9); z-index:100; opacity:1; transition:opacity 0.3s ease; }
body.page-index #nav-overlay.hidden{ opacity:0; pointer-events:none; }
body.page-index .nav-dialog{ background:var(--glass); border:1px solid rgba(255,255,255,0.35); box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 40px rgba(255,255,255,0.08) inset; padding:30px 24px; width:min(760px, calc(100vw - 40px)); text-align:left; backdrop-filter:blur(1px); }
body.page-index .nav-panel{ display:none; }
body.page-index .nav-panel.active{ display:block; }
body.page-index .nav-dialog h2{ font-family:'Press Start 2P', monospace; font-size:12px; letter-spacing:1px; color:var(--phosphor); margin:0 0 12px 0; text-shadow:0 0 4px rgba(255,255,255,0.4); text-transform:uppercase; }
body.page-index .nav-dialog .nav-content{ color:var(--phosphor); font-size:13px; letter-spacing:1px; line-height:1.8; margin:0 0 16px 0; text-shadow:0 0 4px rgba(255,255,255,0.4); }
body.page-index .nav-dialog .nav-content p{ margin:0 0 12px 0; }
body.page-index .nav-dialog .nav-content a{ color:var(--amber); text-decoration:underline; }
body.page-index .nav-dialog .nav-content a:hover{ color:var(--phosphor); }

body.page-alpha #stage,
body.page-omicron #stage{
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px 12px;
  gap:14px;
}
body.page-alpha #hud,
body.page-omicron #hud{
  width:min(920px, 96vw);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  color:var(--phosphor);
  font-size:13px;
  letter-spacing:1px;
  text-shadow:0 0 6px rgba(255,255,255,0.6);
}
body.page-alpha #hud .amber,
body.page-omicron #hud .amber{ color:var(--amber); text-shadow:0 0 6px rgba(255,79,163,0.6); }
body.page-alpha h1,
body.page-omicron h1{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(14px, 2.6vw, 22px);
  color:var(--phosphor);
  text-shadow:0 0 8px rgba(255,255,255,0.7), 0 0 22px rgba(255,255,255,0.25);
  letter-spacing:2px;
  margin:0 0 4px 0;
}
body.page-alpha .subtitle,
body.page-omicron .subtitle{
  font-size:11px;
  color:var(--phosphor-dim);
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:4px;
}
body.page-alpha #screen-wrap,
body.page-omicron #screen-wrap{
  position:relative;
  width:min(920px, 96vw);
  border:1px solid rgba(255,255,255,0.35);
  background:var(--glass);
  backdrop-filter:blur(1px);
  box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 40px rgba(255,255,255,0.08) inset, 0 0 30px rgba(0,0,0,0.6);
  padding:18px 10px;
}
body.page-omicron #screen-wrap{ touch-action:none; }
body.page-alpha #game,
body.page-omicron #game{
  white-space:pre;
  font-family:'Space Mono', monospace;
  font-weight:700;
  font-size:clamp(9px, 1.55vw, 16px);
  line-height:1.05;
  color:var(--phosphor);
  text-shadow:0 0 5px rgba(255,255,255,0.65);
  text-align:center;
  letter-spacing:1px;
  user-select:none;
}
body.page-alpha #overlay-msg,
body.page-omicron #overlay-msg{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:rgba(5,5,8,0.82);
  text-align:center;
  padding:20px;
}
body.page-alpha #overlay-msg.show,
body.page-omicron #overlay-msg.show{ display:flex; }
body.page-alpha #overlay-msg h2,
body.page-omicron #overlay-msg h2{ font-family:'Press Start 2P', monospace; font-size:clamp(16px, 3vw, 28px); margin:0; }
body.page-alpha #overlay-msg.win h2,
body.page-omicron #overlay-msg.win h2{ color:var(--phosphor); text-shadow:0 0 12px rgba(255,255,255,0.8); }
body.page-alpha #overlay-msg.congratulations h2,
body.page-omicron #overlay-msg.congratulations h2{ color:var(--amber); text-shadow:0 0 12px rgba(255,79,163,0.8); }
body.page-alpha #overlay-msg p,
body.page-omicron #overlay-msg p{ color:#f4d7e6; font-size:12px; letter-spacing:1px; max-width:480px; line-height:1.6; }
body.page-alpha #overlay-controls,
body.page-omicron #overlay-controls{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:rgba(5,5,8,0.82);
  text-align:center;
  padding:20px;
}
body.page-alpha #overlay-controls.show,
body.page-omicron #overlay-controls.show{ display:flex; }
body.page-alpha #pre-overlay,
body.page-omicron #pre-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(5,5,8,0.95);
  z-index:30;
  opacity:1;
  transition:opacity 0.5s ease;
}
body.page-alpha #pre-overlay.hidden,
body.page-omicron #pre-overlay.hidden{ opacity:0; pointer-events:none; }
body.page-alpha #pre-overlay .typing-box,
body.page-omicron #pre-overlay .typing-box{ max-width:520px; color:var(--phosphor); font-size:12px; line-height:1.8; letter-spacing:1px; text-align:left; white-space:pre-wrap; word-break:break-word; }
body.page-alpha #pre-overlay .cursor,
body.page-omicron #pre-overlay .cursor{ display:inline-block; width:8px; background:var(--phosphor); margin-left:4px; animation:blink 1s steps(2,start) infinite; }
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0;}}
body.page-alpha #overlay-controls h2,
body.page-omicron #overlay-controls h2{ font-family:'Press Start 2P', monospace; font-size:clamp(16px, 3vw, 28px); margin:0; color:var(--phosphor); text-shadow:0 0 12px rgba(255,255,255,0.8); }
body.page-alpha #overlay-controls p,
body.page-omicron #overlay-controls p{ color:#f4d7e6; font-size:12px; letter-spacing:1px; max-width:480px; line-height:1.6; }
body.page-alpha #audio-toggle,
body.page-omicron #audio-toggle{ position:fixed; top:14px; right:14px; z-index:20; font-size:10px; padding:8px 10px; }
body.page-alpha #back-btn,
body.page-omicron #back-btn{ position:fixed; top:14px; left:14px; z-index:20; font-size:10px; padding:8px 10px; }
body.page-alpha #collected-letters,
body.page-omicron #collected-letters{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:20; font-size:11px; color:var(--amber); letter-spacing:2px; text-shadow:0 0 6px rgba(255,79,163,0.6); }
body.page-alpha kbd,
body.page-omicron kbd{ border:1px solid var(--phosphor-dim); padding:1px 6px; border-radius:3px; color:var(--phosphor); }
body.page-alpha #touch-controls,
body.page-omicron #touch-controls{ display:flex; gap:14px; align-items:center; justify-content:center; width:min(920px, 96vw); -webkit-tap-highlight-color:transparent; }
body.page-alpha .touch-btn,
body.page-omicron .touch-btn{ font-family:'Press Start 2P', monospace; font-size:14px; min-width:64px; min-height:56px; padding:14px 18px; background:rgba(255,255,255,0.06); color:var(--phosphor); border:1px solid var(--phosphor); border-radius:6px; box-shadow:0 0 12px rgba(255,255,255,0.15) inset; user-select:none; touch-action:manipulation; }
body.page-alpha .touch-btn:active,
body.page-omicron .touch-btn:active{ background:var(--phosphor); color:#20030f; }
body.page-alpha .touch-btn-fire,
body.page-omicron .touch-btn-fire{ flex:1; max-width:220px; font-size:12px; letter-spacing:2px; border-color:var(--amber); color:var(--amber); box-shadow:0 0 12px rgba(255,79,163,0.15) inset; }
body.page-alpha .touch-btn-fire:active,
body.page-omicron .touch-btn-fire:active{ background:var(--amber); color:#2a0016; }
body.page-alpha #footer,
body.page-omicron #footer{ position:fixed; bottom:12px; left:12px; z-index:15; font-size:9px; color:var(--phosphor-dim); letter-spacing:0.5px; text-shadow:0 0 3px rgba(255,255,255,0.2); }
@media (hover:hover) and (pointer:fine){ body.page-alpha #touch-controls, body.page-omicron #touch-controls{ display:none; } }

body.page-ascii #vignette{ position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.8) 100%); }
body.page-ascii #scanlines{ position:fixed; inset:0; z-index:2; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px, rgba(0,0,0,0) 4px); mix-blend-mode:multiply; }
body.page-ascii #stage{ position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:20px 12px; gap:12px; }
body.page-ascii h1{ font-family:'Press Start 2P', monospace; font-size:clamp(14px, 2.6vw, 22px); color:var(--phosphor); text-shadow:0 0 8px rgba(126,249,255,0.7), 0 0 22px rgba(126,249,255,0.25); letter-spacing:2px; margin:0; }
body.page-ascii .subtitle{ font-size:11px; color:var(--phosphor-dim); letter-spacing:3px; text-transform:uppercase; margin-bottom:2px; }
body.page-ascii #hud{ width:min(760px, 96vw); display:flex; justify-content:space-between; color:var(--phosphor); font-size:13px; letter-spacing:1px; text-shadow:0 0 6px rgba(126,249,255,0.6); }
body.page-ascii #hud .accent{ color:var(--amber); text-shadow:0 0 6px rgba(255,62,200,0.6); }
body.page-ascii #screen-wrap{ position:relative; width:min(760px, 96vw); border:1px solid rgba(126,249,255,0.35); background:rgba(4,6,8,0.55); box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 30px rgba(126,249,255,0.08) inset, 0 0 24px rgba(0,0,0,0.6); padding:16px 10px; touch-action:none; }
body.page-ascii #game{ white-space:pre; font-family:'Space Mono', monospace; font-weight:700; font-size:clamp(9px, 1.7vw, 16px); line-height:1.05; color:var(--phosphor); text-shadow:0 0 5px rgba(126,249,255,0.65); text-align:center; letter-spacing:1px; user-select:none; }
body.page-ascii #overlay-msg{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(4,6,8,0.85); text-align:center; padding:20px; }
body.page-ascii #overlay-msg.show{ display:flex; }
body.page-ascii #overlay-msg h2{ font-family:'Press Start 2P', monospace; font-size:clamp(16px, 3vw, 26px); margin:0; }
body.page-ascii #overlay-msg.win h2{ color:var(--phosphor); text-shadow:0 0 12px rgba(126,249,255,0.8); }
body.page-ascii #overlay-msg.lose h2{ color:var(--alert); text-shadow:0 0 12px rgba(255,90,77,0.8); }
body.page-ascii #overlay-msg p{ color:#d8f7fb; font-size:12px; letter-spacing:1px; max-width:440px; line-height:1.6; }
body.page-ascii button{ box-shadow:0 0 12px rgba(126,249,255,0.15) inset; }
body.page-ascii #controls-hint{ color:var(--phosphor-dim); font-size:11px; letter-spacing:1px; text-align:center; max-width:560px; }
body.page-ascii kbd{ border:1px solid var(--phosphor-dim); padding:1px 6px; border-radius:3px; color:var(--phosphor); }
body.page-ascii #touch-controls{ display:flex; gap:14px; align-items:center; justify-content:center; width:min(760px, 96vw); }
body.page-ascii .touch-btn{ font-family:'Press Start 2P', monospace; font-size:14px; min-width:64px; min-height:52px; padding:12px 18px; background:rgba(126,249,255,0.06); color:var(--phosphor); border:1px solid var(--phosphor); border-radius:6px; user-select:none; touch-action:manipulation; }
body.page-ascii .touch-btn:active{ background:var(--phosphor); color:#021014; }
body.page-ascii .touch-btn-launch{ flex:1; max-width:200px; font-size:11px; letter-spacing:2px; border-color:var(--amber); color:var(--amber); }
body.page-ascii .touch-btn-launch:active{ background:var(--amber); color:#1a0012; }
@media (hover:hover) and (pointer:fine){ body.page-ascii #touch-controls{ display:none; } }

@media (prefers-reduced-motion: reduce){
  body.page-index #flicker{ animation:none; }
  body.page-alpha #flicker, body.page-omicron #flicker{ animation:none; }
}