/* Copyright 2013 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background 0.8s ease, color 0.8s ease;
}

/* ========================================================
   THEME AMBIENT SYSTEM
   ======================================================== */
.theme-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  transition: all 0.8s ease;
  overflow: hidden;
}

/* Top Navigation & Indicator */
.top-nav {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  box-sizing: border-box;
  z-index: 50;
  pointer-events: auto;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.home-btn:hover {
  background: rgba(45, 212, 191, 0.25);
  border-color: #2dd4bf;
  transform: translateY(-1px);
}

.theme-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #f1f5f9;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 10px #2dd4bf;
  animation: dot-pulse 2s infinite;
}

/* Theme HUD Notification Popup */
.theme-hud {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-hud.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid #2dd4bf;
  padding: 12px 28px;
  border-radius: 9999px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 30px rgba(45, 212, 191, 0.4);
}

.hud-icon {
  font-size: 20px;
}

/* ========================================================
   8 DYNAMIC THEMES SPECIFICATION
   ======================================================== */

/* 1. DEFAULT (0+): Original Classic Day */
body.theme-default {
  background: #f7f7f7;
  color: #333333;
}
body.theme-default .runner-canvas {
  filter: none;
}

/* 2. SUNSET (100+): Twilight Glow */
body.theme-sunset {
  background: linear-gradient(180deg, #1b0c2e 0%, #4a154b 30%, #892850 55%, #c24b42 75%, #e68541 90%, #f6c065 100%);
  color: #ffffff;
}
body.theme-sunset .celestial-body {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde047 0%, #f97316 40%, rgba(249, 115, 22, 0) 75%);
  filter: blur(15px);
  opacity: 0.85;
}
body.theme-sunset .runner-canvas {
  filter: invert(1) hue-rotate(180deg) brightness(1.2) drop-shadow(0 0 8px rgba(253, 224, 71, 0.5));
}
body.theme-sunset .indicator-dot { background: #f97316; box-shadow: 0 0 10px #f97316; }

/* 3. NIGHT (200+): Starry Sky & Moon */
body.theme-night {
  background: linear-gradient(180deg, #020617 0%, #0a0f2d 45%, #151d4f 80%, #1e295d 100%);
  color: #ffffff;
}
body.theme-night .celestial-body {
  position: absolute;
  top: 15%;
  right: 18%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  box-shadow: 18px 12px 0 0 #fef08a, 18px 12px 25px 0 rgba(254, 240, 138, 0.7);
}
body.theme-night .stars-layer {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 15% 20%, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 35% 45%, #93c5fd, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 60% 15%, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 80% 30%, #c4b5fd, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 25% 70%, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 70% 65%, #93c5fd, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90% 80%, #fff, rgba(0,0,0,0));
  background-size: 550px 550px;
  animation: stars-twinkle 4s ease-in-out infinite alternate;
}
body.theme-night .runner-canvas {
  filter: invert(1) brightness(1.3) drop-shadow(0 0 10px rgba(147, 197, 253, 0.7));
}
body.theme-night .indicator-dot { background: #818cf8; box-shadow: 0 0 10px #818cf8; }

/* 4. CITY (300+): Cyberpunk Neon Skyline */
body.theme-city {
  background: linear-gradient(180deg, #080214 0%, #150630 45%, #25094f 75%, #3b0764 100%);
  color: #ffffff;
}
body.theme-city .skyline-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 260px;
  background: 
    linear-gradient(to top, rgba(217, 70, 239, 0.25), transparent 70%),
    repeating-linear-gradient(90deg, #09031a 0, #09031a 30px, #180838 30px, #180838 60px, transparent 60px, transparent 75px, #100628 75px, #100628 115px);
  mask-image: linear-gradient(to top, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
  box-shadow: inset 0 -30px 50px rgba(6, 182, 212, 0.4);
}
body.theme-city .runner-canvas {
  filter: invert(1) hue-rotate(135deg) brightness(1.5) drop-shadow(0 0 10px #06b6d4) drop-shadow(0 0 20px #d946ef);
}
body.theme-city .indicator-dot { background: #06b6d4; box-shadow: 0 0 10px #06b6d4; }

/* 5. DESERT (400+): Golden Amber Dunes & Sun */
body.theme-desert {
  background: linear-gradient(180deg, #2b1102 0%, #582006 30%, #92400e 60%, #b45309 80%, #f59e0b 100%);
  color: #ffffff;
}
body.theme-desert .celestial-body {
  position: absolute;
  top: 16%;
  left: 30%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbeb 0%, #fde68a 50%, rgba(251, 191, 36, 0) 80%);
  filter: blur(10px);
}
body.theme-desert .dunes-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  background: radial-gradient(ellipse at 30% 100%, #b45309 0%, transparent 70%),
              radial-gradient(ellipse at 75% 100%, #78350f 0%, transparent 70%);
  opacity: 0.9;
}
body.theme-desert .runner-canvas {
  filter: invert(1) hue-rotate(215deg) brightness(1.3) drop-shadow(0 0 8px #f59e0b);
}
body.theme-desert .indicator-dot { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }

/* 6. SPACE (500+): Cosmic Galaxy & Nebula */
body.theme-space {
  background: radial-gradient(ellipse at 50% 35%, #4c1d95 0%, #1e1b4b 40%, #030712 80%, #000000 100%);
  color: #ffffff;
}
body.theme-space .stars-layer {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, #f472b6, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 70% 20%, #38bdf8, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 40% 70%, #a855f7, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 85% 60%, #4ade80, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 50% 50%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 10% 80%, #f43f5e, rgba(0,0,0,0));
  background-size: 450px 450px;
  animation: cosmic-drift 20s linear infinite;
}
body.theme-space .runner-canvas {
  filter: invert(1) hue-rotate(90deg) brightness(1.6) drop-shadow(0 0 10px #c084fc) drop-shadow(0 0 20px #38bdf8);
}
body.theme-space .indicator-dot { background: #c084fc; box-shadow: 0 0 10px #c084fc; }

/* 7. RAIN (600+): Rainstorm & Lightning */
body.theme-rain {
  background: linear-gradient(180deg, #090d16 0%, #131c2c 45%, #1e293b 80%, #334155 100%);
  color: #ffffff;
}
body.theme-rain .weather-layer {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0.7) 100%);
  background-size: 3px 60px;
  animation: rain-fall 0.4s linear infinite;
}
body.theme-rain .lightning-layer {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  animation: lightning-strike 7s ease-in-out infinite;
}
body.theme-rain .runner-canvas {
  filter: invert(1) hue-rotate(185deg) brightness(1.2) drop-shadow(0 0 6px #60a5fa);
}
body.theme-rain .indicator-dot { background: #60a5fa; box-shadow: 0 0 10px #60a5fa; }

/* 8. SNOW (700+): Winter Blizzard */
body.theme-snow {
  background: linear-gradient(180deg, #031d2e 0%, #073854 40%, #0e5a80 75%, #bae6fd 100%);
  color: #ffffff;
}
body.theme-snow .weather-layer {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(3px 3px at 20% 30%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(4px 4px at 60% 70%, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2.5px 2.5px at 80% 20%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(5px 5px at 40% 40%, rgba(255,255,255,0.8), rgba(0,0,0,0));
  background-size: 350px 350px;
  animation: snow-fall 5s linear infinite;
}
body.theme-snow .runner-canvas {
  filter: invert(1) hue-rotate(160deg) brightness(1.4) drop-shadow(0 0 8px #bae6fd);
}
body.theme-snow .indicator-dot { background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }

/* Keyframe Animations */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.6); opacity: 0.4; }
}

@keyframes stars-twinkle {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes cosmic-drift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rain-fall {
  0% { background-position: 0 0; }
  100% { background-position: 40px 300px; }
}

@keyframes lightning-strike {
  0%, 89%, 93%, 97%, 100% { opacity: 0; }
  90%, 92% { opacity: 0.7; }
  96% { opacity: 0.9; }
}

@keyframes snow-fall {
  0% { background-position: 0 0; }
  100% { background-position: 50px 350px; }
}

.icon {
  -webkit-user-select: none;
  user-select: none;
  display: inline-block;
}

.icon-offline {
  content: -webkit-image-set( url(assets/default_100_percent/100-error-offline.png) 1x, url(assets/default_200_percent/200-error-offline.png) 2x);
  position: relative;
}

.hidden {
  display: none;
}


/* Offline page */

.offline .interstitial-wrapper {
  color: #2b2b2b;
  font-size: 1em;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 600px;
  padding-top: 100px;
  width: 100%;
}

.offline .runner-container {
  height: 150px;
  max-width: 600px;
  overflow: hidden;
  position: absolute;
  top: 35px;
  width: 44px;
}

.offline .runner-canvas {
  height: 150px;
  max-width: 600px;
  opacity: 1;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 2;
}

.offline .controller {
  background: rgba(247, 247, 247, .1);
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 1;
}

#offline-resources {
  display: none;
}

@media (max-width: 420px) {
  .suggested-left > #control-buttons, .suggested-right > #control-buttons {
    float: none;
  }
  .snackbar {
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
  }
}

@media (max-height: 350px) {
  h1 {
    margin: 0 0 15px;
  }
  .icon-offline {
    margin: 0 0 10px;
  }
  .interstitial-wrapper {
    margin-top: 5%;
  }
  .nav-wrapper {
    margin-top: 30px;
  }
}

@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) {
  .offline .interstitial-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) {
  .interstitial-wrapper {
    margin-bottom: 100px;
  }
}

@media (min-height: 240px) and (orientation: landscape) {
  .offline .interstitial-wrapper {
    margin-bottom: 90px;
  }
  .icon-offline {
    margin-bottom: 20px;
  }
}

@media (max-height: 320px) and (orientation: landscape) {
  .icon-offline {
    margin-bottom: 0;
  }
  .offline .runner-container {
    top: 10px;
  }
}

@media (max-width: 240px) {
  .interstitial-wrapper {
    overflow: inherit;
    padding: 0 8px;
  }
}

.arcade-mode,
.arcade-mode .runner-container,
.arcade-mode .runner-canvas {
  image-rendering: pixelated;
  max-width: 100%;
  overflow: hidden;
}

.arcade-mode #buttons,
.arcade-mode #main-content {
  opacity: 0;
  overflow: hidden;
}

.arcade-mode .interstitial-wrapper {
  height: 100vh;
  max-width: 100%;
  overflow: hidden;
}

.arcade-mode .runner-container {
  left: 0;
  margin: auto;
  right: 0;
  transform-origin: top center;
  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) 400ms;
  z-index: 2;
}