/* 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. */

/* ==========================================================================
   Base Layout & Typography
   ========================================================================== */
* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Pretendard', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  background: #0f172a;
  color: #f8fafc;
}

.hidden {
  display: none !important;
}

/* Lucide Icon Helpers */
.icon-xs { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }

/* ==========================================================================
   Top HUD Bar & Score Display
   ========================================================================== */
.top-hud-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hud-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hud-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.hud-btn.home-link {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.3);
}

/* Best Score Pill */
.hud-score-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(15, 23, 42, 0.7));
  border: 1px solid rgba(234, 179, 8, 0.45);
  border-radius: 999px;
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.2);
}

.trophy-icon { color: #eab308; }

.score-label {
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 700;
}

.score-value {
  font-size: 14px;
  font-weight: 900;
  color: #fde047;
  font-family: 'Press Start 2P', monospace;
  letter-spacing: -0.5px;
}

.hud-theme-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  font-weight: 700;
  color: #38bdf8;
}

/* ==========================================================================
   Theme Quick Bar (Sub-bar)
   ========================================================================== */
.theme-quick-bar {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  height: 38px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  overflow-x: auto;
  z-index: 900;
}

.quick-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
  white-space: nowrap;
}

.theme-pill {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.theme-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.theme-pill.active {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #ffffff;
  border-color: #7dd3fc;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  font-weight: 800;
}

/* Start Hint Banner */
.start-hint-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 600;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

body.arcade-mode .start-hint-banner {
  opacity: 0.2;
}

/* ==========================================================================
   Record Celebration Toast
   ========================================================================== */
.record-toast {
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(16px);
  border: 2px solid #f59e0b;
  border-radius: 16px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1500;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 158, 11, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.toast-icon {
  width: 32px;
  height: 32px;
  color: #f59e0b;
  animation: pulseFlame 1s infinite alternate;
}

.toast-title {
  font-size: 14px;
  font-weight: 800;
  color: #fde047;
}

.toast-desc {
  font-size: 13px;
  color: #f8fafc;
  font-weight: 600;
}

@keyframes pulseFlame {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px #f59e0b); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 12px #ef4444); }
}

/* ==========================================================================
   Pure CSS Layered Theme Stage
   ========================================================================== */
.theme-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.scene-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

/* Theme Visibility Rules */
body.theme-default .scene-default { opacity: 1; }
body.theme-sunset .scene-sunset { opacity: 1; }
body.theme-night .scene-night { opacity: 1; }
body.theme-city .scene-city { opacity: 1; }
body.theme-desert .scene-desert { opacity: 1; }
body.theme-space .scene-space { opacity: 1; }
body.theme-rain .scene-rain { opacity: 1; }
body.theme-snow .scene-snow { opacity: 1; }

/* 0. 기본 (Daylight) */
.scene-default {
  background: linear-gradient(180deg, #38bdf8 0%, #7dd3fc 40%, #bae6fd 75%, #f0fdf4 100%);
}
.daylight-sun {
  position: absolute;
  top: 130px;
  right: 12%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a 0%, #facc15 60%, rgba(250, 204, 21, 0) 100%);
  box-shadow: 0 0 60px rgba(250, 204, 21, 0.8);
}
.cloud {
  position: absolute;
  background: #ffffff;
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
}
.cloud-1 {
  width: 180px; height: 50px; top: 160px; left: -200px;
  animation: floatClouds 35s linear infinite;
}
.cloud-1::before { width: 70px; height: 70px; top: -35px; left: 30px; }
.cloud-1::after { width: 55px; height: 55px; top: -25px; left: 85px; }

.cloud-2 {
  width: 240px; height: 65px; top: 250px; left: -300px; opacity: 0.85;
  animation: floatClouds 48s linear infinite 12s;
}
.cloud-2::before { width: 90px; height: 90px; top: -45px; left: 40px; }
.cloud-2::after { width: 75px; height: 75px; top: -35px; left: 115px; }

.cloud-3 {
  width: 140px; height: 40px; top: 340px; left: -150px; opacity: 0.7;
  animation: floatClouds 40s linear infinite 6s;
}
.cloud-3::before { width: 50px; height: 50px; top: -25px; left: 25px; }
.cloud-3::after { width: 40px; height: 40px; top: -18px; left: 65px; }

.daylight-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(180deg, rgba(187, 247, 208, 0) 0%, #bbf7d0 100%);
  opacity: 0.6;
}

@keyframes floatClouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 400px)); }
}

/* 1. 노을 (Sunset) */
.scene-sunset {
  background: linear-gradient(180deg, #4c0519 0%, #881337 25%, #be123c 45%, #ea580c 70%, #fde047 100%);
}
.sunset-sun {
  position: absolute;
  bottom: 160px; left: 50%;
  transform: translateX(-50%);
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a 0%, #f97316 65%, #dc2626 100%);
  box-shadow: 0 0 80px rgba(249, 115, 22, 0.9), 0 0 140px rgba(220, 38, 38, 0.6);
}
.sunset-mountains {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 220px;
  background: 
    radial-gradient(circle at 20% 100%, #31102f 40%, transparent 41%),
    radial-gradient(circle at 60% 100%, #1e0924 55%, transparent 56%),
    radial-gradient(circle at 85% 100%, #290d2e 45%, transparent 46%);
  opacity: 0.85;
}
.sunset-cloud {
  position: absolute;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(254, 215, 170, 0.4), rgba(251, 146, 60, 0.6));
  box-shadow: 0 4px 20px rgba(234, 88, 12, 0.3);
}
.sunset-cloud-1 {
  width: 320px; height: 45px; top: 260px; right: -350px;
  animation: floatSunsetCloud 40s linear infinite;
}
.sunset-cloud-2 {
  width: 240px; height: 35px; top: 180px; right: -260px;
  animation: floatSunsetCloud 55s linear infinite 15s;
}
@keyframes floatSunsetCloud {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100vw - 400px)); }
}

/* 2. 밤 (Night) */
.scene-night {
  background: linear-gradient(180deg, #020617 0%, #0b0f19 35%, #1e1b4b 70%, #0f172a 100%);
}
.night-moon {
  position: absolute;
  top: 120px; right: 15%;
  width: 80px; height: 80px;
  border-radius: 50%;
  box-shadow: 18px 10px 0 0 #fef08a;
  filter: drop-shadow(0 0 25px rgba(254, 240, 138, 0.8));
}
.stars-field {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.stars-1 {
  background-image: 
    radial-gradient(2px 2px at 10% 20%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 30% 15%, #bae6fd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50% 30%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 70% 18%, #fef08a, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 85% 35%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 20% 50%, #e0e7ff, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 45% 60%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 80% 65%, #fbcfe8, rgba(0,0,0,0));
  background-size: 550px 550px;
  animation: starsTwinkle 3s ease-in-out infinite alternate;
}
.stars-2 {
  background-image: 
    radial-gradient(1.5px 1.5px at 15% 35%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 40% 25%, #bae6fd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 65% 45%, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 90% 20%, #ffffff, rgba(0,0,0,0));
  background-size: 400px 400px;
  animation: starsTwinkle 4s ease-in-out infinite alternate-reverse;
}
.shooting-star {
  position: absolute; top: 140px; left: 20%; width: 120px; height: 2px;
  background: linear-gradient(90deg, #ffffff, transparent);
  transform: rotate(-35deg); opacity: 0;
  animation: shootStar 6s ease-in-out infinite;
}
@keyframes shootStar {
  0% { transform: translate(0, 0) rotate(-35deg); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translate(300px, 200px) rotate(-35deg); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes starsTwinkle {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* 3. 도시 (City) */
.scene-city {
  background: linear-gradient(180deg, #09090b 0%, #2e1065 40%, #581c87 70%, #831843 100%);
}
.city-moon {
  position: absolute; top: 120px; left: 12%; width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #f43f5e 0%, #ec4899 50%, rgba(236, 72, 153, 0) 100%);
  box-shadow: 0 0 50px rgba(244, 63, 94, 0.8);
}
.city-skyline-back {
  position: absolute; bottom: 0; left: 0; right: 0; height: 280px;
  background: 
    linear-gradient(90deg, 
      transparent 0%, #1e1b4b 2%, #1e1b4b 10%, transparent 11%,
      transparent 15%, #311042 16%, #311042 28%, transparent 29%,
      transparent 35%, #1e1b4b 36%, #1e1b4b 48%, transparent 49%,
      transparent 55%, #2a0845 56%, #2a0845 70%, transparent 71%,
      transparent 75%, #1e1b4b 76%, #1e1b4b 92%, transparent 93%
    );
  opacity: 0.7;
}
.city-skyline-front {
  position: absolute; bottom: 0; left: 0; right: 0; height: 200px;
  background: 
    linear-gradient(90deg, 
      #09090b 0%, #09090b 8%, transparent 9%,
      transparent 13%, #0d0915 14%, #0d0915 22%, transparent 23%,
      transparent 27%, #09090b 28%, #09090b 42%, transparent 43%,
      transparent 48%, #0f0a1c 49%, #0f0a1c 62%, transparent 63%,
      transparent 68%, #09090b 69%, #09090b 84%, transparent 85%,
      transparent 88%, #09090b 89%, #09090b 100%
    );
  box-shadow: 0 -4px 30px rgba(236, 72, 153, 0.3);
}
.city-grid-glow {
  position: absolute; bottom: 0; left: 0; right: 0; height: 70px;
  background: linear-gradient(180deg, rgba(236, 72, 153, 0) 0%, rgba(236, 72, 153, 0.3) 100%);
  border-bottom: 2px solid #ec4899;
}

/* 4. 사막 (Desert) */
.scene-desert {
  background: linear-gradient(180deg, #78350f 0%, #b45309 30%, #f59e0b 60%, #fef3c7 100%);
}
.desert-sun {
  position: absolute; top: 120px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fef08a 40%, #f59e0b 80%, rgba(245, 158, 11, 0) 100%);
  box-shadow: 0 0 90px rgba(254, 240, 138, 0.9);
}
.desert-pyramid {
  position: absolute; bottom: 120px; right: 18%; width: 0; height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 110px solid #92400e;
  opacity: 0.6;
}
.desert-dunes-back {
  position: absolute; bottom: 0; left: -10%; width: 120%; height: 200px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #d97706; opacity: 0.85;
}
.desert-dunes-front {
  position: absolute; bottom: 0; right: -10%; width: 110%; height: 140px;
  border-radius: 60% 40% 0 0 / 100% 100% 0 0;
  background: #b45309;
}

/* 5. 우주 (Space) */
.scene-space {
  background: radial-gradient(ellipse at 50% 25%, #3730a3 0%, #1e1b4b 35%, #050510 70%, #000000 100%);
}
.space-planet {
  position: absolute; top: 130px; left: 14%; width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a855f7 0%, #4338ca 60%, #1e1b4b 100%);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.6);
}
.space-planet::before {
  content: '';
  position: absolute; top: 50%; left: -40px; width: 170px; height: 24px;
  border-radius: 50%; border: 4px solid rgba(216, 180, 254, 0.8);
  transform: translateY(-50%) rotate(-25deg);
}
.space-nebula {
  position: absolute; top: 20%; right: 10%; width: 380px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(59, 130, 246, 0.2) 50%, transparent 70%);
  filter: blur(40px);
}
.space-stars-deep {
  position: absolute; inset: 0;
  background-image: 
    radial-gradient(1px 1px at 25% 15%, #c084fc, transparent),
    radial-gradient(2px 2px at 70% 30%, #38bdf8, transparent),
    radial-gradient(1px 1px at 85% 60%, #f472b6, transparent),
    radial-gradient(2px 2px at 40% 75%, #ffffff, transparent);
  background-size: 350px 350px;
}
.space-stars-bright {
  position: absolute; inset: 0;
  background-image: 
    radial-gradient(2px 2px at 15% 45%, #ffffff, transparent),
    radial-gradient(3px 3px at 55% 20%, #fef08a, transparent),
    radial-gradient(2px 2px at 80% 80%, #a7f3d0, transparent);
  background-size: 450px 450px;
  animation: starsTwinkle 3.5s ease-in-out infinite alternate;
}

/* 6. 비 (Rain) */
.scene-rain {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 45%, #334155 80%, #475569 100%);
}
.rain-clouds {
  position: absolute; top: 0; left: 0; right: 0; height: 180px;
  background: radial-gradient(circle at 30% 0%, #1e293b 60%, transparent 61%),
              radial-gradient(circle at 70% 0%, #0f172a 70%, transparent 71%);
  opacity: 0.9;
}
.rain-streaks {
  position: absolute; inset: -100px 0 0 0;
  background: repeating-linear-gradient(
    105deg,
    transparent 0px,
    transparent 20px,
    rgba(148, 163, 184, 0.4) 21px,
    transparent 22px
  );
  animation: rainFall 0.7s linear infinite;
}
.rain-layer-2 {
  opacity: 0.5; animation: rainFall 0.5s linear infinite 0.2s;
  background-size: 100% 120%;
}
.lightning-flash {
  position: absolute; inset: 0; background: #ffffff; opacity: 0;
  animation: lightning 8s ease-in-out infinite;
}
@keyframes rainFall {
  0% { transform: translateY(-80px); }
  100% { transform: translateY(80px); }
}
@keyframes lightning {
  0%, 93%, 97%, 100% { opacity: 0; }
  94%, 96% { opacity: 0.45; }
  95% { opacity: 0.8; }
}

/* 7. 눈 (Snow) */
.scene-snow {
  background: linear-gradient(180deg, #082f49 0%, #0369a1 40%, #38bdf8 75%, #e0f2fe 100%);
}
.snow-mountains {
  position: absolute; bottom: 0; left: 0; right: 0; height: 240px;
  background: 
    linear-gradient(135deg, #f8fafc 25%, transparent 26%) -50px 0,
    linear-gradient(225deg, #f8fafc 25%, transparent 26%) -50px 0,
    linear-gradient(315deg, #0284c7 25%, transparent 26%),
    linear-gradient(45deg, #0284c7 25%, transparent 26%);
  background-size: 180px 240px;
  background-repeat: repeat-x;
  background-position: bottom;
  opacity: 0.7;
}
.snowflakes {
  position: absolute; inset: 0;
  background-image: 
    radial-gradient(3px 3px at 20% 30%, #ffffff, transparent),
    radial-gradient(4px 4px at 40% 70%, #ffffff, transparent),
    radial-gradient(3px 3px at 60% 20%, #ffffff, transparent),
    radial-gradient(5px 5px at 80% 50%, #ffffff, transparent),
    radial-gradient(3px 3px at 90% 85%, #ffffff, transparent);
  background-size: 400px 400px;
  animation: snowfall 8s linear infinite;
}
.snow-layer-2 {
  background-image: 
    radial-gradient(2px 2px at 15% 60%, #ffffff, transparent),
    radial-gradient(3px 3px at 50% 40%, #ffffff, transparent),
    radial-gradient(2px 2px at 75% 15%, #ffffff, transparent);
  background-size: 300px 300px;
  animation: snowfall 12s linear infinite 3s;
  opacity: 0.7;
}
.snow-ground {
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(180deg, transparent 0%, #f8fafc 100%);
  opacity: 0.85;
}
@keyframes snowfall {
  0% { transform: translate(0, -400px); }
  100% { transform: translate(40px, 400px); }
}

/* ==========================================================================
   T-Rex Game Canvas & Sprite Filter Rules per Theme
   ========================================================================== */
.offline .interstitial-wrapper {
  color: #2b2b2b;
  font-size: 1em;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 600px;
  padding-top: 155px;
  width: 100%;
  position: relative;
  z-index: 10;
}

.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;
  transition: filter 0.6s ease;
}

/* High contrast filters for dark themes */
body.theme-night .runner-canvas {
  filter: invert(1) brightness(1.25);
}
body.theme-city .runner-canvas {
  filter: invert(1) drop-shadow(0 0 5px #ec4899);
}
body.theme-space .runner-canvas {
  filter: invert(1) drop-shadow(0 0 6px #818cf8);
}
body.theme-rain .runner-canvas {
  filter: invert(0.9) brightness(1.15);
}
body.theme-snow .runner-canvas {
  filter: invert(1) drop-shadow(0 0 4px #38bdf8);
}
body.theme-sunset .runner-canvas {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}
body.theme-desert .runner-canvas {
  filter: drop-shadow(0 2px 4px rgba(120, 53, 15, 0.3));
}
body.theme-default .runner-canvas {
  filter: none;
}

.offline .controller {
  background: transparent;
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 1;
}

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

#offline-resources {
  display: none;
}

/* Arcade Mode */
.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;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .top-hud-bar {
    height: 56px;
    padding: 0 12px;
  }
  .theme-quick-bar {
    top: 56px;
  }
  .offline .interstitial-wrapper {
    padding-top: 110px;
  }
  .hud-theme-badge {
    display: none;
  }
}