/* Base Reset & Fonts */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #05070a;
  background: radial-gradient(circle at 50% 30%, #111726 0%, #05070a 100%);
  color: #eaeaea;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  user-select: none;
}

/* Canvas Container */
#game-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  /* 100vh is measured against the LARGEST possible viewport (as if the browser's
       address bar were fully collapsed), not what's actually visible right now.
       On real mobile browsers, when that chrome is showing, 100vh overshoots the
       real visible height, pushing content (including the self-view camera frame,
       which is bottom-anchored) below the fold.
       Cascade, weakest to strongest support:
       1) 100vh — universal fallback for browsers with neither dvh nor JS fallback applied yet
       2) calc(var(--app-vh,1vh)*100) — JS-measured real px height (main.js sets --app-vh
          on load/resize/orientationchange), overrides (1) once JS has run
       3) 100dvh — native dynamic viewport height where supported, most accurate &
          updates live as chrome shows/hides without needing a JS resize listener */
  height: 100vh;
  height: calc(var(--app-vh, 1vh) * 100);
  height: 100dvh;
  overflow: hidden;
}

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* UI Overlay / HUD */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  /* Clicks pass through to canvas */
}

.hidden {
  display: none !important;
}

/* Glassmorphism Top Bar */
#top-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 850px;
  padding: 8px 16px;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 20, 32, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 30;
}

#stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
}

#stats>div {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
}

#elapsed-time {
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

#blink-count {
  color: #00ff9d;
  text-shadow: 0 0 6px rgba(0, 255, 157, 0.4);
}

#forced-blink-count {
  color: #ff4757;
  text-shadow: 0 0 6px rgba(255, 69, 96, 0.4);
}

/* Eye State Icon */
#eye-state-icon {
  width: 34px;
  height: 20px;
  border: 2px solid #00f0ff;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  transition: all 0.15s ease;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

#eye-state-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #00f0ff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.15s ease;
  box-shadow: 0 0 8px #00f0ff;
}

/* Closed Eye State */
#eye-state-icon.eye-closed {
  height: 3px;
  background: #ff4757;
  border-radius: 3px;
  border: none;
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.6);
}

#eye-state-icon.eye-closed::after {
  display: none;
}

/* Fallback Keyboard Icon */
#eye-state-icon.keyboard-icon {
  width: 32px;
  height: 20px;
  border: 1.5px solid #00f0ff;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

#eye-state-icon.keyboard-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: transparent;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  box-shadow:
    -8px -4px 0 #00f0ff, 0 -4px 0 #00f0ff, 8px -4px 0 #00f0ff,
    -8px 4px 0 #00f0ff, 0 4px 0 #00f0ff, 8px 4px 0 #00f0ff;
}

/* Swipe Mode Hand Icon */
#eye-state-icon.hand-pointer-icon {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 0;
  background: transparent;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2300f0ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-4 0v4"/><path d="M14 10V5a2 2 0 0 0-4 0v5"/><path d="M10 10.5V4a2 2 0 0 0-4 0v9"/><path d="m6 13-2.5-2.5a2 2 0 0 0-3 2.8l5.5 8.7a5 5 0 0 0 4.2 2h4.5c2.8 0 5-2.2 5-5v-7a2 2 0 0 0-4 0v2"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  animation: swipeAnim 2s infinite;
}

#eye-state-icon.hand-pointer-icon::after {
  display: none;
}

@keyframes swipeAnim {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

/* Mode Selection Buttons */
.mode-btn {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(112, 0, 255, 0.15));
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-transform: uppercase;
  letter-spacing: 1px;
  backdrop-filter: blur(8px);
}

.mode-btn:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(112, 0, 255, 0.35));
  color: #fff;
  border-color: #00f0ff;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  transform: translateY(-2px);
}

/* Junction Prompt */
#junction-prompt {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(15, 20, 32, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 18px;
  border-radius: 20px;
  animation: pulseText 1.5s infinite alternate;
}

#junction-prompt.confirm-flash {
  animation: none;
  transform: translateX(-50%) scale(1.05);
  color: #00ff9d;
  border-color: #00ff9d;
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.5);
}

@keyframes pulseText {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
  }
}

/* Touch Controls Dock */
#touch-controls {
  position: absolute;
  bottom: 12px;
  left: 16px;
  right: 16px;
  width: auto;
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  z-index: 60;
}

#touch-dpad {
  display: grid;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  gap: 5px;
  pointer-events: auto;
}

#touch-dpad button[data-direction="N"] {
  grid-area: up;
}

#touch-dpad button[data-direction="W"] {
  grid-area: left;
}

#touch-dpad button[data-direction="E"] {
  grid-area: right;
}

#touch-dpad button[data-direction="S"] {
  grid-area: down;
}

#touch-dpad button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  pointer-events: auto;
  background: rgba(18, 24, 38, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #00f0ff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.15s ease;
  margin: 0;
}

#touch-dpad button:active {
  background: rgba(0, 240, 255, 0.35);
  border-color: #00f0ff;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
  transform: scale(0.92);
}

#touch-blink {
  pointer-events: auto;
  height: 44px;
  padding: 0 20px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(112, 0, 255, 0.25));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  border-radius: 22px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.2);
  white-space: nowrap;
  transition: all 0.15s ease;
  margin: 0;
}

#touch-blink:active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.4), rgba(112, 0, 255, 0.45));
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
  transform: scale(0.94);
}

/* Media Queries for Mobile/Portrait */
@media (max-width: 600px) {
  #top-bar {
    top: 6px;
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  #stats {
    gap: 3px;
    font-size: 0.72rem;
  }

  #stats>div {
    padding: 2px 6px;
  }

  /* Stack Self-View camera frame directly ABOVE the BLINK action button on the right */
  #self-view-frame {
    position: absolute;
    bottom: 58px;
    right: 8px;
    width: 92px;
    height: 69px;
    border-radius: 10px;
    z-index: 55;
  }

  #touch-controls {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #touch-blink {
    width: 92px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
  }
}

/* Composure Meter - Globally integrated under Top Bar */
#composure-container {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 850px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 2px;
  overflow: hidden;
  z-index: 35;
}

@media (max-width: 600px) {
  #composure-container {
    top: 48px;
  }
}

#composure-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00ff9d, #00f0ff);
  transition: width 0.2s ease, background-color 0.5s ease;
}

/* Self-View Camera Preview */
#self-view-frame {
  position: absolute;
  bottom: 12px;
  right: 16px;
  width: clamp(80px, 15vw, 140px);
  height: clamp(60px, 11.25vw, 105px);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 25;
  backdrop-filter: blur(8px);
  transition: bottom 0.3s ease;
}

/* When touch controls are visible, move camera preview up so they don't overlap the BLINK button */
body.touch-active #self-view-frame {
  bottom: 72px;
}

#self-view-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Blink Fade Overlay */
#blink-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
}

#blink-fade.is-blinking {
  opacity: 1;
  transition: opacity 0.06s ease-in;
}

/* Screens */
#screens {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 40%, rgba(18, 24, 40, 0.94) 0%, rgba(5, 7, 10, 0.97) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  padding: 20px;
}

/* Typography for Screens */
.screen h1 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 8px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #00f0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
  text-transform: uppercase;
}

.screen h2 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: 16px;
  color: #fff;
}

.screen p {
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  line-height: 1.6;
  max-width: 550px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.7);
}

/* Calibration Video */
.video-container {
  position: relative;
  width: clamp(240px, 70vw, 320px);
  height: clamp(180px, 52vw, 240px);
  margin: 16px auto;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
}

/* #webcam-video is permanently mounted in #video-anchor (outside #screens) so
   mobile browsers never see it go display:none — that would throttle/stop frame
   decoding and blank any canvas that draws from it (e.g. the self-view preview).
   By default it's parked off-screen but still "visible" to the layout engine. */
#video-anchor {
  position: fixed;
  top: 0;
  left: -99999px;
  width: 320px;
  height: 240px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

/* While calibrating, the anchor's position/size is set inline (in JS) to match
   the actual on-page position of #calibration-video-slot, since that slot sits
   within a vertically-stacked layout (heading + paragraph above it) rather than
   being centered in the viewport. See positionVideoAnchor() in main.js. */
#video-anchor.in-calibration {
  border-radius: 16px;
  z-index: 101;
  /* above .screen (z-index via #screens: 100) */
}

#webcam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}

#face-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 180px;
  border: 2px dashed rgba(0, 240, 255, 0.5);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  pointer-events: none;
}

.progress-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
}

.progress-ring__circle {
  transition: stroke-dashoffset 0.1s linear;
  stroke-dasharray: 326.72;
  stroke-dashoffset: 326.72;
  stroke: #00f0ff;
}

/* Buttons */
button {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(112, 0, 255, 0.2));
  color: #fff;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 12px;
  padding: 12px 28px;
  font-size: 1rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin: 8px;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15);
}

button:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.35), rgba(112, 0, 255, 0.4));
  color: #fff;
  border-color: #00f0ff;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
  transform: translateY(-2px);
}

/* Results Screen Specifics */
.results-stats {
  text-align: left;
  background: rgba(15, 20, 32, 0.7);
  backdrop-filter: blur(12px);
  padding: 24px 32px;
  border-radius: 16px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.results-stats p {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.results-stats h3 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 1.6rem;
  color: #00f0ff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* Countdown Animation */
#countdown-text {
  font-size: 7rem;
  font-weight: 800;
  color: #00f0ff;
  text-shadow: 0 0 30px rgba(0, 240, 255, 0.8);
  animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  20% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}