/* 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%;
}

.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;
}

/* ==========================================
   Premium Dynamic Themes Style
   ========================================== */

html, body, #t, .offline {
  background-color: transparent !important;
  background: transparent !important;
}

/* Entire background wrapper */
#game-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  transition: background 1.5s ease-in-out, filter 1.5s ease-in-out;
  pointer-events: none;
  overflow: hidden;
}

/* Theme 0: Default (Chrome Classic) */
#game-bg.theme-default {
  background: linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%);
}

/* Theme 1: Sunset (Warm & Romantic) */
#game-bg.theme-sunset {
  background: linear-gradient(180deg, #ff5e62 0%, #ff9966 100%);
}
#game-bg.theme-sunset::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: min(20vw, 180px);
  height: min(20vw, 180px);
  background: radial-gradient(circle, rgba(255, 235, 180, 0.95) 0%, rgba(255, 94, 98, 0) 70%);
  border-radius: 50%;
  filter: blur(4px);
  animation: sunset-glow 4s ease-in-out infinite alternate;
}

@keyframes sunset-glow {
  0% { transform: translateX(-50%) scale(0.95); opacity: 0.8; }
  100% { transform: translateX(-50%) scale(1.05); opacity: 1; }
}

/* Theme 2: Night (Deep & Starlit) */
#game-bg.theme-night {
  background: linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

.stars-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none;
}
#game-bg.theme-night .stars-effect,
#game-bg.theme-space .stars-effect {
  opacity: 0.8;
}

/* Theme 3: City (Cyberpunk Neon Vibe) */
#game-bg.theme-city {
  background: linear-gradient(180deg, #111936 0%, #1f133a 60%, #34123a 100%);
}
.city-silhouettes {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none"><path d="M0,300 L0,200 L30,200 L30,220 L70,220 L70,180 L110,180 L110,250 L140,250 L140,150 L190,150 L190,230 L220,230 L220,130 L280,130 L280,260 L320,260 L320,170 L370,170 L370,210 L410,210 L410,100 L470,100 L470,240 L500,240 L500,160 L550,160 L550,220 L600,220 L600,120 L660,120 L660,250 L700,250 L700,190 L750,190 L750,230 L800,230 L800,140 L860,140 L860,260 L900,260 L900,180 L950,180 L950,210 L1000,210 L1000,300 Z" fill="rgba(20, 10, 35, 0.45)"/><path d="M0,300 L0,230 L40,230 L40,250 L80,250 L80,210 L120,210 L120,270 L150,270 L150,190 L200,190 L200,250 L230,250 L230,170 L290,170 L290,280 L330,280 L330,210 L380,210 L380,240 L420,240 L420,150 L480,150 L480,260 L510,260 L510,200 L560,200 L560,240 L610,240 L610,170 L670,170 L670,270 L710,270 L710,220 L760,220 L760,250 L810,250 L810,180 L870,180 L870,280 L910,280 L910,210 L960,210 L960,240 L1000,240 L1000,300 Z" fill="rgba(10, 5, 20, 0.75)"/></svg>') bottom repeat-x;
  background-size: 100% 240px;
}
#game-bg.theme-city .city-silhouettes {
  opacity: 1;
}

/* Theme 4: Desert (Mysterious Golden Horizon) */
#game-bg.theme-desert {
  background: linear-gradient(180deg, #f3a152 0%, #e27d3c 60%, #b25329 100%);
}

/* Theme 5: Space (Infinite Nebula) */
#game-bg.theme-space {
  background: linear-gradient(180deg, #020107 0%, #080313 50%, #15092a 100%);
}
.space-nebula {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  background: radial-gradient(circle at 20% 30%, rgba(130, 50, 200, 0.25) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(0, 162, 255, 0.2) 0%, transparent 60%);
  filter: blur(40px);
  animation: nebula-drift 30s linear infinite alternate;
}
#game-bg.theme-space .space-nebula {
  opacity: 1;
}

@keyframes nebula-drift {
  0% { transform: scale(1) translate(0px, 0px); }
  100% { transform: scale(1.15) translate(15px, 15px); }
}

/* Theme 6: Rain (Stormy & Moody) */
#game-bg.theme-rain {
  background: linear-gradient(180deg, #1c2731 0%, #0d131a 100%);
}

/* Theme 7: Snow (Frosted Winter Wonderland) */
#game-bg.theme-snow {
  background: linear-gradient(180deg, #2c3e50 0%, #3498db 50%, #ecf0f1 100%);
}

/* Weather Canvas overlay */
#weather-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Dynamic Filter Overlays for Game Elements (Canvas, Text) */
.runner-container, #messageBox h1, .niokbutton {
  transition: filter 1.5s ease-in-out, color 1.5s ease-in-out;
}

/* Theme neon colors & outline glow for T-Rex Game Elements */
body.theme-sunset-active #messageBox h1 {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.6);
}
body.theme-sunset-active .runner-container {
  filter: drop-shadow(1px 0px 0px #fff) drop-shadow(-1px 0px 0px #fff) drop-shadow(0px 1px 0px #fff) drop-shadow(0px -1px 0px #fff) drop-shadow(0 0 4px rgba(255, 94, 98, 0.8)) sepia(0.1);
}

body.theme-night-active #messageBox h1 {
  color: #00ffff !important;
  text-shadow: 0 0 15px rgba(0,255,255,0.8);
}
body.theme-night-active .runner-container {
  filter: invert(0.9) drop-shadow(1px 0px 0px #fff) drop-shadow(-1px 0px 0px #fff) drop-shadow(0px 1px 0px #fff) drop-shadow(0px -1px 0px #fff) drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
}

body.theme-city-active #messageBox h1 {
  color: #ff007f !important;
  text-shadow: 0 0 15px rgba(255,0,127,0.9);
}
body.theme-city-active .runner-container {
  filter: invert(0.9) hue-rotate(280deg) saturate(2.5) drop-shadow(1.5px 0px 0px #ff007f) drop-shadow(-1.5px 0px 0px #ff007f) drop-shadow(0px 1.5px 0px #ff007f) drop-shadow(0px -1.5px 0px #ff007f);
}

body.theme-desert-active #messageBox h1 {
  color: #ffcc00 !important;
  text-shadow: 0 0 8px rgba(255,204,0,0.6);
}
body.theme-desert-active .runner-container {
  filter: drop-shadow(1px 0px 0px #ffeb3b) drop-shadow(-1px 0px 0px #ffeb3b) drop-shadow(0px 1px 0px #ffeb3b) drop-shadow(0px -1px 0px #ffeb3b) sepia(0.3) contrast(1.1);
}

body.theme-space-active #messageBox h1 {
  color: #a020f0 !important;
  text-shadow: 0 0 20px rgba(160,32,240,0.9);
}
body.theme-space-active .runner-container {
  filter: invert(0.9) hue-rotate(140deg) saturate(2) drop-shadow(1.5px 0px 0px #00ffff) drop-shadow(-1.5px 0px 0px #00ffff) drop-shadow(0px 1.5px 0px #00ffff) drop-shadow(0px -1.5px 0px #00ffff);
}

body.theme-rain-active #messageBox h1 {
  color: #708090 !important;
  text-shadow: 0 0 8px rgba(112,128,144,0.5);
}
body.theme-rain-active .runner-container {
  filter: invert(0.85) sepia(0.1) drop-shadow(1px 0px 0px #e0e0e0) drop-shadow(-1px 0px 0px #e0e0e0) drop-shadow(0px 1px 0px #e0e0e0) drop-shadow(0px -1px 0px #e0e0e0);
}

body.theme-snow-active #messageBox h1 {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.7);
}
body.theme-snow-active .runner-container {
  filter: invert(0.9) sepia(0.1) hue-rotate(200deg) drop-shadow(1px 0px 0px #fff) drop-shadow(-1px 0px 0px #fff) drop-shadow(0px 1px 0px #fff) drop-shadow(0px -1px 0px #fff);
}

/* Ensure background of body and elements are transparent where appropriate */
.interstitial-wrapper, #main-content {
  background: transparent !important;
}
.offline .runner-canvas {
  background: transparent !important;
}
.offline .runner-container {
  background: transparent !important;
}

/* ==========================================
   Sophisticated Isometric Splash Modal Style
   ========================================== */

/* Fullscreen modal blur overlay */
.splash-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.7); /* 어두운 모던 딥네이비 마스크 */
  backdrop-filter: blur(12px); /* 고급 블러 효과 */
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Modal Card (Landscape Responsive Flex Grid) */
.splash-modal-card {
  width: min(95vw, 680px); /* 가로 배치에 맞추어 시원하게 가로폭 확장 */
  background: rgba(30, 41, 59, 0.8); /* 모던 다크 slate 유리 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6),
              0 0 50px rgba(45, 212, 191, 0.2); /* 은은한 틸 광채 */
  overflow: hidden;
  display: flex;
  flex-direction: row; /* 가로 배치 */
  animation: modal-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modal-pop {
  0% { transform: scale(0.88) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Left Image Banner (45% Width) */
.splash-modal-banner {
  flex: 0 0 45%;
  background: #151c2c;
  overflow: hidden;
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
}

.splash-modal-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.splash-modal-card:hover .splash-modal-banner img {
  transform: scale(1.04);
}

/* Right Content Details (55% Width, Left Aligned for modern layout) */
.splash-modal-content {
  flex: 1;
  padding: 24px 28px;
  text-align: left; /* 좌측 정렬 */
  font-family: 'Open Sans', sans-serif;
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.splash-modal-content h2 {
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
}

.title-main {
  font-size: 32px;
  font-weight: 900; /* Extremely Bold */
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #2dd4bf 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(45, 212, 191, 0.35);
  display: inline-block;
  line-height: 1.1;
}

.title-year {
  font-size: 16px;
  font-weight: 300; /* Ultra Thin */
  color: #64748b;
  letter-spacing: 1px;
  display: inline-block;
  margin-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 10px;
}

.splash-modal-content .subtitle {
  font-size: 11px;
  color: #94a3b8;
  margin: 0 0 16px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Custom BGM Toggle Switch */
.sound-toggle-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.4);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 12px;
}

.sound-label {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
}

/* Switch UI */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #475569;
  transition: .3s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: #2dd4bf;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.5);
}

input:checked + .slider:before {
  transform: translateX(22px);
}

/* Controls Guide Keyboard Caps */
.controls-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.3);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.control-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

/* Retro Keycaps style */
.key {
  background: linear-gradient(to bottom, #475569 0%, #334155 100%);
  border: 1px solid #1e293b;
  border-radius: 4px;
  padding: 3px 6px;
  font-family: monospace;
  font-weight: bold;
  color: #f8fafc;
  box-shadow: 0 2px 0 #0f172a;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  font-size: 10px;
}

.control-item .action {
  color: #94a3b8;
  font-weight: 500;
}

/* Start Button Premium look */
.start-btn {
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2dd4bf 0%, #3b82f6 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 10px 20px -10px rgba(45, 212, 191, 0.4);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              filter 0.2s ease;
}

.start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(45, 212, 191, 0.6),
              0 0 15px rgba(45, 212, 191, 0.3);
  filter: brightness(1.05);
}

.start-btn:active {
  transform: translateY(1px);
  box-shadow: 0 6px 12px -8px rgba(45, 212, 191, 0.4);
}

/* Smooth fade out when starting game */
.splash-modal-wrapper.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Developer & Original Game Credits */
.modal-credits {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.credit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
}

.credit-label {
  color: #64748b;
  font-weight: 500;
}

.credit-val {
  color: #cbd5e1;
  font-weight: 600;
}

.credit-val a {
  color: #2dd4bf;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.credit-val a:hover {
  color: #3b82f6;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
  text-decoration: underline;
}

/* Mobile Responsive Adaptive Layout (Under 640px wide) */
@media (max-width: 640px) {
  .splash-modal-card {
    width: min(90vw, 360px);
    flex-direction: column; /* 세로 배치로 환원 */
  }
  .splash-modal-banner {
    flex: 0 0 auto;
    aspect-ratio: 1.5; /* 세로형 모드에서는 이미지가 약간 얇게 보임 */
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .splash-modal-content {
    text-align: center;
    padding: 20px 24px;
  }
}