*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --sepia: #704214;
  --brass: #C19A6B;
  --cream: #FFF8E7;
  --gold: #B8860B;
  --parchment: #F5E6C8;
  --bronze-dark: #4A3728;
  --patina-green: #4E6B5C;
  --bg-dark: #2A1F14;
}

body {
  font-family: 'IM Fell English', serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Paper grain texture */
.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-radial-gradient(circle at 17% 32%, rgba(112,66,20,0.02) 0px, transparent 1px),
    repeating-radial-gradient(circle at 83% 67%, rgba(112,66,20,0.02) 0px, transparent 1px),
    repeating-radial-gradient(circle at 50% 50%, rgba(112,66,20,0.01) 0px, transparent 2px);
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(42,31,20,0.5) 100%);
}

/* Watch container */
.watch-container {
  position: relative;
  z-index: 2;
}

/* Watch outer casing */
.watch-casing {
  position: relative;
  border-radius: 50%;
  background: linear-gradient(135deg, #D4A853 0%, #C19A6B 20%, #A67C52 40%, #C19A6B 60%, #D4A853 80%, #A67C52 100%);
  box-shadow:
    0 0 0 4px #8B6914,
    0 0 0 8px #A67C52,
    0 0 0 10px rgba(0,0,0,0.3),
    0 8px 32px rgba(0,0,0,0.5),
    inset 0 2px 8px rgba(255,255,255,0.3),
    inset 0 -2px 8px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s ease;
}

.watch-casing:hover {
  box-shadow:
    0 0 0 4px #8B6914,
    0 0 0 8px #A67C52,
    0 0 0 10px rgba(0,0,0,0.3),
    0 8px 32px rgba(0,0,0,0.5),
    0 0 40px rgba(212,168,83,0.15),
    inset 0 2px 8px rgba(255,255,255,0.4),
    inset 0 -2px 8px rgba(0,0,0,0.2);
}

/* Patina theme */
.theme-patina .watch-casing {
  background: linear-gradient(135deg, #6B8F71 0%, #4E6B5C 20%, #5A7D65 40%, #7BA seventeen 60%, #4E6B5C 80%, #6B8F71 100%);
  box-shadow:
    0 0 0 4px #3D5244,
    0 0 0 8px #4E6B5C,
    0 0 0 10px rgba(0,0,0,0.3),
    0 8px 32px rgba(0,0,0,0.5),
    inset 0 2px 8px rgba(255,255,255,0.15),
    inset 0 -2px 8px rgba(0,0,0,0.2);
}

.theme-ebony .watch-casing {
  background: linear-gradient(135deg, #2C1810 0%, #1A0F08 20%, #3D2817 40%, #2C1810 60%, #1A0F08 80%, #3D2817 100%);
  box-shadow:
    0 0 0 4px #B8860B,
    0 0 0 8px #8B6914,
    0 0 0 10px rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.7),
    inset 0 2px 8px rgba(184,134,11,0.2),
    inset 0 -2px 8px rgba(0,0,0,0.3);
}

/* Watch face */
.watch-face {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFFDF5 0%, #FFF8E7 40%, #F5E6C8 70%, #E8D5B0 100%);
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.15), inset 0 0 40px rgba(112,66,20,0.05);
}

.theme-ebony .watch-face {
  background: radial-gradient(circle at 40% 35%, #1A1510 0%, #151010 40%, #0F0A08 70%, #0A0705 100%);
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.4), inset 0 0 40px rgba(184,134,11,0.05);
}

/* Aged patina overlay */
.watch-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 20%, rgba(139,105,20,0.05) 0%, transparent 30%),
    radial-gradient(circle at 25% 75%, rgba(112,66,20,0.04) 0%, transparent 25%);
  pointer-events: none;
}

/* Crown (winding knob) */
.crown {
  position: absolute;
  width: 18px;
  height: 28px;
  background: linear-gradient(90deg, #A67C52, #D4A853, #C19A6B, #D4A853, #A67C52);
  border-radius: 4px 4px 2px 2px;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.3);
  z-index: 10;
  transition: transform 0.1s ease;
}

.crown::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 2px;
  background: rgba(0,0,0,0.2);
  box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 8px 0 rgba(0,0,0,0.2), 0 12px 0 rgba(0,0,0,0.2);
}

.crown:active {
  transform: translateX(-50%) translateY(-2px);
}

.theme-ebony .crown {
  background: linear-gradient(90deg, #8B6914, #D4A853, #B8860B, #D4A853, #8B6914);
}

/* Clock hands */
.clock-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  z-index: 5;
}

.hour-hand {
  width: 6px;
  margin-left: -3px;
  background: linear-gradient(to top, #5A4020, #8B6914);
  border-radius: 3px 3px 1px 1px;
  z-index: 6;
}

.minute-hand {
  width: 4px;
  margin-left: -2px;
  background: linear-gradient(to top, #5A4020, #A67C52);
  border-radius: 2px 2px 1px 1px;
  z-index: 7;
}

.second-hand {
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to top, #8B2500, #CD5C5C);
  z-index: 8;
}

.theme-ebony .hour-hand {
  background: linear-gradient(to top, #B8860B, #D4A853);
}
.theme-ebony .minute-hand {
  background: linear-gradient(to top, #B8860B, #D4A853);
}
.theme-ebony .second-hand {
  background: linear-gradient(to top, #CD5C5C, #FF6347);
}

/* Center pin */
.center-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D4A853, #8B6914);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  z-index: 10;
}

.theme-ebony .center-pin {
  background: radial-gradient(circle at 35% 35%, #FFD700, #B8860B);
}

/* Sub-dial */
.sub-dial {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(112,66,20,0.3);
  background: radial-gradient(circle, rgba(255,248,231,0.5) 0%, rgba(245,230,200,0.3) 100%);
}

.theme-ebony .sub-dial {
  border-color: rgba(184,134,11,0.3);
  background: radial-gradient(circle, rgba(26,21,16,0.5) 0%, rgba(15,10,8,0.3) 100%);
}

/* Pendulum */
.pendulum-container {
  position: relative;
  overflow: hidden;
}

.pendulum {
  transform-origin: top center;
  animation: pendulumSwing 2s ease-in-out infinite alternate;
}

@keyframes pendulumSwing {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}

.pendulum-rod {
  width: 3px;
  background: linear-gradient(180deg, #C19A6B, #A67C52);
  margin: 0 auto;
}

.pendulum-bob {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D4A853, #8B6914);
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  position: relative;
}

.pendulum-bob::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
}

.theme-ebony .pendulum-rod {
  background: linear-gradient(180deg, #B8860B, #8B6914);
}

.theme-ebony .pendulum-bob {
  background: radial-gradient(circle at 35% 35%, #FFD700, #B8860B);
}

/* Pendulum shadow */
.pendulum-shadow {
  width: 30px;
  height: 6px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.2) 0%, transparent 70%);
  margin: 8px auto 0;
  animation: shadowSwing 2s ease-in-out infinite alternate;
}

@keyframes shadowSwing {
  0% { transform: translateX(-20px) scaleX(0.8); }
  100% { transform: translateX(20px) scaleX(0.8); }
}

/* Roman numerals */
.numeral {
  position: absolute;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #4A3728;
  text-shadow: 0 1px 1px rgba(255,255,255,0.3), 0 -1px 1px rgba(0,0,0,0.1);
  user-select: none;
}

.theme-ebony .numeral {
  color: #D4A853;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5), 0 0 8px rgba(184,134,11,0.2);
}

/* Tick marks */
.tick-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
}

/* Filigree decorations */
.filigree-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(193,154,107,0.3);
  pointer-events: none;
}

/* Settings panel */
.settings-panel {
  background: linear-gradient(135deg, #F5E6C8 0%, #E8D5B0 50%, #D4C4A0 100%);
  border: 2px solid #C19A6B;
  box-shadow: -4px 0 20px rgba(0,0,0,0.3), inset 0 0 20px rgba(112,66,20,0.05);
  font-family: 'IM Fell English', serif;
}

.theme-ebony .settings-panel {
  background: linear-gradient(135deg, #1A0F08 0%, #2C1810 50%, #1A0F08 100%);
  border-color: #B8860B;
}

/* Brass toggle */
.brass-toggle {
  width: 52px;
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8B6914, #A67C52);
  border: 2px solid #704214;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.brass-toggle.active {
  background: linear-gradient(135deg, #D4A853, #C19A6B);
}

.brass-toggle .knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D4A853, #8B6914);
  position: absolute;
  top: 1px;
  left: 1px;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.brass-toggle.active .knob {
  transform: translateX(24px);
}

/* Brass slider */
.brass-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #704214, #C19A6B);
  outline: none;
}

.brass-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D4A853, #8B6914);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.brass-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D4A853, #8B6914);
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Corner flourishes */
.corner-flourish {
  position: fixed;
  width: 120px;
  height: 120px;
  z-index: 3;
  opacity: 0.4;
  pointer-events: none;
}

.corner-flourish svg {
  width: 100%;
  height: 100%;
}

.corner-tl { top: 0; left: 0; }
.corner-tr { top: 0; right: 0; transform: scaleX(-1); }
.corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.corner-br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* Sound toggle */
.sound-toggle {
  cursor: pointer;
  transition: all 0.2s ease;
}

.sound-toggle:hover {
  transform: scale(1.1);
}

/* Gear icon */
.gear-btn {
  cursor: pointer;
  transition: all 0.3s ease;
}

.gear-btn:hover {
  transform: rotate(30deg);
}

/* Startup animation */
@keyframes watchOpen {
  0% { transform: scale(0.3) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.05) rotate(5deg); opacity: 1; }
  80% { transform: scale(0.98) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.watch-startup {
  animation: watchOpen 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Easter egg speedup */
@keyframes windUp {
  0% { transform: translateX(-50%) translateY(0); }
  25% { transform: translateX(-50%) translateY(-3px) rotate(5deg); }
  50% { transform: translateX(-50%) translateY(0); }
  75% { transform: translateX(-50%) translateY(-3px) rotate(-5deg); }
  100% { transform: translateX(-50%) translateY(0); }
}

.crown-winding {
  animation: windUp 0.15s ease-in-out 4;
}

/* Digital display */
.digital-display {
  font-family: 'Special Elite', cursive;
  letter-spacing: 2px;
}

/* Date display */
.date-display {
  font-family: 'IM Fell English', serif;
  font-style: italic;
}

/* Settings slide animation */
.settings-overlay {
  transition: opacity 0.3s ease;
}

.settings-slide {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive */
@media (max-width: 480px) {
  .corner-flourish {
    width: 60px;
    height: 60px;
  }
}

/* Theme backgrounds */
.bg-brass-theme {
  background: linear-gradient(135deg, #3D2817 0%, #2A1F14 30%, #1F1610 60%, #2A1F14 100%);
}

.bg-patina-theme {
  background: linear-gradient(135deg, #2A3D2E 0%, #1F2D22 30%, #162018 60%, #1F2D22 100%);
}

.bg-ebony-theme {
  background: linear-gradient(135deg, #0A0705 0%, #151010 30%, #0A0705 60%, #151010 100%);
}