:root {
  --background: #0b1020;
  --text: #f4f7ff;
  --muted: #a4aec5;
  --accent: #8ba7ff;
  --panel: #151c30;
  --border: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: background .3s, color .3s;
}

body[data-theme="midnight"] {
  --background:#0b1020; --text:#f4f7ff;
  --muted:#a4aec5; --accent:#8ba7ff; --panel:#151c30;
}
body[data-theme="ocean"] {
  --background:#082b40; --text:#effaff;
  --muted:#a4d1e4; --accent:#55d6e8; --panel:#10394f;
}
body[data-theme="forest"] {
  --background:#10291f; --text:#f0fff4;
  --muted:#b0d2ba; --accent:#77e0a0; --panel:#193b2c;
}
body[data-theme="sunset"] {
  --background:#402039; --text:#fff4f0;
  --muted:#e9c3d4; --accent:#ffad8a; --panel:#512b48;
}
body[data-theme="lavender"] {
  --background:#29213e; --text:#faf5ff;
  --muted:#d0c1ec; --accent:#c2a3ff; --panel:#382b50;
}
body[data-theme="light"] {
  --background:#f0f3fa; --text:#182033;
  --muted:#64708a; --accent:#526ee8;
  --panel:#ffffff; --border:rgba(20,30,60,.15);
}

body[data-wallpaper="aurora"] {
  background-image:
    radial-gradient(ellipse at 20% 20%,#176c75,transparent 40%),
    radial-gradient(ellipse at 80% 75%,#523879,transparent 45%);
}
body[data-wallpaper="sunset"] {
  background-image:linear-gradient(135deg,#281b48,#a44965,#f2a66d);
}
body[data-wallpaper="ocean"] {
  background-image:linear-gradient(135deg,#041b36,#07566d,#138e9b);
}
body[data-wallpaper="midnight"] {
  background-image:
    radial-gradient(ellipse at 50% 100%,#293a77,transparent 55%),
    linear-gradient(135deg,#080b19,#151329);
}
body[data-wallpaper="custom"] {
  background-image:var(--custom-wallpaper,none);
}

button, select, input { font: inherit; }
button { cursor:pointer; }

.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:24px 5%;
  position:relative;
  z-index:2;
}
.brand {
  color:var(--text);
  text-decoration:none;
  font-size:23px;
  font-weight:800;
  letter-spacing:-1px;
}
.brand span { color:var(--accent); }
.header-actions { display:flex; gap:10px; }

.settings-button {
  padding:11px 16px;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
}
.settings-button:hover { border-color:var(--accent); }

.clock-container {
  min-height:65vh;
  padding:35px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  z-index:1;
}
.greeting {
  margin:0 0 18px;
  color:var(--muted);
  font-size:18px;
  letter-spacing:2px;
}
.clock {
  font-size:clamp(48px,12vw,120px);
  font-weight:700;
  letter-spacing:-5px;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  white-space:nowrap;
  text-shadow:0 8px 45px rgba(0,0,0,.15);
}
.date {
  margin-top:20px;
  color:var(--muted);
  font-size:clamp(16px,2.5vw,21px);
}
.discord-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin-top:24px;
  padding:14px 28px;
  background:#5865f2;
  color:white;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  border-radius:12px;
  box-shadow:0 6px 25px rgba(88,101,242,.25);
  transition:.2s;
}
.discord-button:hover {
  background:#4752c4;
  transform:translateY(-3px);
}
.hint {
  margin-top:45px;
  color:var(--muted);
  font-size:14px;
}

/* FLIP CLOCK */

.clock.flip-mode {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(2px,.8vw,12px);
  font-size:clamp(26px,6vw,68px) !important;
  letter-spacing:0;
}
.flip-digit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:.7em;
  height:1.4em;
  padding:.05em .12em;
  border-radius:9px;
  background:linear-gradient(#242b3d 49%,#111827 50%);
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  position:relative;
}
.flip-digit::after {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:rgba(0,0,0,.5);
}
.flip-digit.flip-change {
  animation:flipChange .35s ease;
}
.flip-separator { padding:0 .04em; }
.flip-period { font-size:.32em; align-self:end; margin-bottom:.5em; }
@keyframes flipChange {
  0% { transform:rotateX(-55deg); opacity:.5; }
  100% { transform:rotateX(0); opacity:1; }
}

/* TIME TOOLS */

.tools-section {
  max-width:1050px;
  margin:30px auto 90px;
  padding:0 20px;
  position:relative;
  z-index:1;
}
.tools-section h2 {
  text-align:center;
  font-size:32px;
  margin-bottom:8px;
}
.section-description {
  text-align:center;
  color:var(--muted);
  margin-bottom:30px;
}
.tool-tabs {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:20px;
}
.tab {
  padding:12px 18px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
}
.tab.active {
  background:var(--accent);
  color:#111827;
  font-weight:bold;
}
.tool-panel {
  display:none;
  padding:30px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:20px;
  min-height:320px;
  text-align:center;
  box-shadow:0 15px 45px rgba(0,0,0,.1);
}
.tool-panel.active { display:block; }
.tool-panel h3 { font-size:24px; margin:0 0 8px; }
.tool-description { color:var(--muted); margin-bottom:25px; }
.input-row, .button-row, .focus-config {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:20px 0;
}
.input-row select, .input-row input, .focus-config input {
  background:var(--background);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
}
.input-row select { min-width:220px; }
.timer-inputs label, .focus-config label {
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}
.timer-inputs input { width:90px; }
.focus-config input { width:115px; }

.primary-button, .secondary-button {
  padding:12px 22px;
  border-radius:10px;
  font-weight:700;
  border:1px solid var(--border);
}
.primary-button {
  background:var(--accent);
  color:#111827;
}
.secondary-button {
  background:var(--background);
  color:var(--text);
}
.primary-button:hover, .secondary-button:hover { filter:brightness(1.1); }

.tool-time {
  font-size:clamp(32px,7vw,65px);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-2px;
  margin:28px 0;
}
.world-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:15px;
  margin-top:25px;
}
.world-card {
  background:var(--background);
  border:1px solid var(--border);
  padding:20px;
  border-radius:15px;
  text-align:left;
}
.world-card h4 { margin:0 0 12px; }
.world-time {
  font-size:25px;
  font-weight:bold;
  font-variant-numeric:tabular-nums;
}
.world-date {
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
}
.remove-city {
  background:transparent;
  color:var(--muted);
  border:0;
  float:right;
  font-size:18px;
}
.lap-list {
  max-width:420px;
  margin:20px auto;
  text-align:left;
}
.lap-item {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding:10px;
}
.status-text { color:var(--muted); font-size:14px; }
.focus-label {
  color:var(--accent);
  font-weight:bold;
  letter-spacing:2px;
  text-transform:uppercase;
}
.progress-track {
  width:min(450px,100%);
  height:9px;
  margin:20px auto;
  background:var(--background);
  border-radius:10px;
  overflow:hidden;
}
.progress-fill {
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width .2s;
}

/* SETTINGS */

.settings-panel {
  position:fixed;
  z-index:20;
  top:0;
  right:0;
  width:min(410px,100%);
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  padding:28px;
  background:var(--panel);
  color:var(--text);
  border-left:1px solid var(--border);
  box-shadow:-20px 0 70px rgba(0,0,0,.25);
  transform:translateX(105%);
  visibility:hidden;
  transition:transform .25s ease,visibility .25s;
}
.settings-panel.open {
  transform:translateX(0);
  visibility:visible;
}
.panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px;
}
.panel-header h2 { margin:5px 0 0; font-size:27px; }
.eyebrow {
  margin:0;
  color:var(--accent);
  font-size:10px;
  font-weight:bold;
  letter-spacing:2px;
}
.close-button {
  width:38px;
  height:38px;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
}
.settings-panel > label, .setting-row > label {
  display:block;
  margin:20px 0 9px;
  font-size:13px;
  font-weight:700;
}
.settings-panel select,
.settings-panel input[type="url"] {
  width:100%;
  padding:12px;
  color:var(--text);
  background:var(--background);
  border:1px solid var(--border);
  border-radius:10px;
}
.settings-panel input[type="color"] {
  width:100%;
  height:42px;
  padding:4px;
  background:var(--background);
  border:1px solid var(--border);
  border-radius:10px;
}
.settings-panel input[type="range"] {
  width:100%;
  accent-color:var(--accent);
}
.small-note { color:var(--muted); font-size:11px; }
.switch-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:16px 0;
  border-bottom:1px solid var(--border);
}
.switch-row strong { font-size:13px; }
.switch-row p { color:var(--muted); font-size:11px; }
.switch-row input { width:18px; height:18px; accent-color:var(--accent); }
.panel-actions { display:flex; gap:10px; margin-top:26px; }
.panel-actions button {
  flex:1;
  padding:12px 8px;
  border-radius:10px;
  font-weight:bold;
}
.reset-button {
  color:var(--text);
  background:transparent;
  border:1px solid var(--border);
}
.done-button {
  color:#111827;
  background:var(--accent);
  border:0;
}
.overlay {
  position:fixed;
  z-index:15;
  inset:0;
  background:rgba(0,0,0,.45);
}
.hidden, [hidden] { display:none !important; }

body.font-rounded { font-family:"Trebuchet MS",Arial,sans-serif; }
body.font-mono { font-family:"Courier New",monospace; }
body.font-serif { font-family:Georgia,serif; }

.footer {
  padding:25px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

/* FULLSCREEN */

body.focus-fullscreen .topbar,
body.focus-fullscreen .tools-section,
body.focus-fullscreen .footer,
body.focus-fullscreen .discord-button,
body.focus-fullscreen .hint {
  display:none !important;
}
body.focus-fullscreen .clock-container {
  min-height:100vh;
  min-height:100dvh;
}
body.focus-fullscreen { cursor:pointer; }

/* ANIMATED WALLPAPERS */

.animated-background {
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.animated-background.aurora {
  background:
    radial-gradient(ellipse at 20% 30%,rgba(34,211,238,.25),transparent 55%),
    radial-gradient(ellipse at 80% 70%,rgba(168,85,247,.3),transparent 55%);
  animation:auroraMove 12s ease-in-out infinite alternate;
}
.animated-background.gradient {
  background:linear-gradient(120deg,#2563eb55,#9333ea66,#0d948866,#ec489955);
  background-size:400% 400%;
  animation:gradientMove 15s ease infinite;
}
@keyframes auroraMove {
  from { transform:scale(1) translateX(-5%); }
  to { transform:scale(1.3) translateX(5%); }
}
@keyframes gradientMove {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.particle {
  position:absolute;
  top:-20px;
  left:var(--x);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:white;
  opacity:var(--opacity);
  animation:particleFall var(--duration) linear infinite;
  animation-delay:var(--delay);
}
.particle.star {
  top:var(--y);
  animation:starTwinkle var(--duration) ease-in-out infinite alternate;
}
@keyframes particleFall {
  from { transform:translateY(-20px); }
  to { transform:translateY(110vh); }
}
@keyframes starTwinkle {
  from { opacity:.1; transform:scale(.6); }
  to { opacity:1; transform:scale(1.5); }
}

@media(max-width:600px) {
  .topbar { padding:18px; }
  .header-actions { gap:5px; }
  .settings-button { padding:10px; font-size:12px; }
  .clock { letter-spacing:-2px; }
  .tool-panel { padding:20px 12px; }
  .settings-panel { padding:22px; }
  .world-grid { grid-template-columns:1fr; }
  .clock.flip-mode { gap:2px; }
}

@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}