:root { --fg: #e8f0e0; --bg: #000; --tube: #fff3df; --glow: #ffb15e; }
@font-face { font-family: 'Alexs Writing'; src: url('assets/fonts/AlexsWriting.ttf') format('truetype'); font-display: block; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; font-family: 'VT323', monospace; color: var(--fg); }
#stage { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; outline: none; }
#back {
  position: fixed; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232,240,224,.25);
  background: rgba(0,0,0,.35); color: var(--fg); font: 26px/1 'VT323', monospace; cursor: pointer;
  transition: opacity .3s;
}
#back:hover { background: rgba(232,240,224,.12); }
#tip {
  position: fixed; pointer-events: none; padding: 3px 10px; font-size: 28px; letter-spacing: .05em;
  background: rgba(0,0,0,.6); color: #7cff8a; transform: translate(14px, -28px); white-space: nowrap;
}
#hint {
  position: fixed; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 52px); transform: translateX(-50%);
  font-size: 20px; letter-spacing: .2em; opacity: 0; transition: opacity 1.2s; pointer-events: none;
}
#hint.show { opacity: .45; }
#nogl { position: fixed; inset: 0; display: grid; place-items: center; font-size: 24px; }
#nogl[hidden], #back[hidden], #tip[hidden] { display: none; }

/* 네온 조명 — 화면에 고정, 시선과 무관 */
#topbar {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(10px, 2.2vw, 26px); z-index: 2;
}
.neon { background: none; border: 0; padding: 8px; margin: 0; cursor: pointer; color: rgba(255,236,210,.14); line-height: 0; }
.neon.on { color: var(--tube); filter: drop-shadow(0 0 1.5px var(--glow)) drop-shadow(0 0 7px var(--glow)) drop-shadow(0 0 20px rgba(255,130,50,.55)); }
#neon .tube {
  display: block; width: clamp(200px, 32vw, 430px); aspect-ratio: 2000 / 179; background: currentColor;
  -webkit-mask: url('assets/logo.png') center / contain no-repeat; mask: url('assets/logo.png') center / contain no-repeat;
}
#ig svg { width: clamp(26px, 2.8vw, 36px); height: auto; display: block; }
#ig.on { opacity: .82; transition: opacity .2s, filter .2s; }
#ig.on:hover, #ig.on:focus-visible { opacity: 1; filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 28px rgba(255,130,50,.7)); }
.neon:focus-visible { outline: 1px dashed rgba(255,243,223,.4); outline-offset: 2px; }

#clock {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  font: clamp(22px, 2.6vw, 32px)/1 'Alexs Writing', 'VT323', cursive; letter-spacing: .04em; white-space: nowrap;
  color: #f4ead9; text-shadow: 0 0 6px rgba(255,190,120,.45); pointer-events: none; z-index: 2;
}
@media (max-width: 480px) { #neon .tube { width: 46vw; } }