/* Base — Dark Mode, mobile-first, small safe border */
:root{
  --bg-color: #000;
  --fg-color: #e6e6e6;
  --accent-0: #66d9ef; /* cool cyan */
  --accent-1: #ff5f56; /* red */
  --accent-2: #ffd866; /* warm yellow */
  --accent-3: #a6e22e; /* neon green */
  --accent-4: #bd93f9; /* violet */
  --accent-5: #ffb86c; /* orange */
  --accent-6: #50fa7b; /* lime */
  --btn-bg: #111317;
  --btn-bg-hover: #1b1e24;
  --btn-fg: #eaeaea;
  --btn-ring: #2a2f37;
  --border-radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.5);
  --safe-gap: 10px;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg-color);
  color: var(--fg-color);
  font-family: 'Gabriela', ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Aptos", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  padding: var(--safe-gap);
  background-position: center center;
  background-size: cover;   /* stretch corner-to-corner */
  background-repeat: no-repeat;
}

/* Settings Cog (upper-left) */
.cog{
  position: fixed;
  top: calc(var(--safe-gap) + 2px);
  left: calc(var(--safe-gap) + 2px);
  z-index: 20;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-ring);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease;
}
.cog:hover{ background: var(--btn-bg-hover); }
.cog:active{ transform: translateY(10px); }

/* Settings bar */
.settings{
  position: fixed;
  top: calc(52px + var(--safe-gap));
  left: var(--safe-gap);
  right: var(--safe-gap);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 19;
  padding: 10px;
  background: rgba(15,16,20,.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--btn-ring);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}
.settings.hidden{ display: none; }

.btn{
  appearance: none;
  border: 1px solid var(--btn-ring);
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{ background: var(--btn-bg-hover); }
.btn:active{ transform: translateY(10px); }

/* Viewport alignment states */
.viewport{
  position: relative;
  width: 100%;
  height: calc(100vh - 2*var(--safe-gap));
  display: flex;
  justify-content: center;
  align-items: center;
}
.align-top{ align-items: flex-start; }
.align-middle{ align-items: center; }
.align-bottom{ align-items: flex-end; }

.clock-wrapper{
  display: block;
  max-width: 100%;
  max-height: 100%;
  padding: clamp(8px, 2vw, 24px);
  border-radius: 24px;
}

/* Rotation states */
.rotate-left  { transform: rotate(-90deg); transform-origin: center; }
.rotate-right { transform: rotate( 90deg); transform-origin: center; }

/* Clock typography & responsive sizing */
.clock{
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.05;
  user-select: none;
  -webkit-user-select: none;
  word-break: keep-all;
  text-wrap: balance;
}

/* Sizes — even “small” is large, per spec */
.size-sm     .time{ font-size: clamp(44px, 9vw, 100px); }
.size-normal .time{ font-size: clamp(64px, 13vw, 140px); }
.size-xl     .time{ font-size: clamp(82px, 18vw, 200px); }
.size-xxl    .time{ font-size: clamp(100px, 24vw, 260px); }
.size-xxxl   .time{ font-size: clamp(120px, 30vw, 320px); }
.size-xxxxl  .time{ font-size: clamp(140px, 36vw, 400px); }

/* Date line */
.date{
  margin-top: .25em;
  font-size: clamp(20px, 5.5vw, 50px);
  opacity: .9;
}
.hidden{ display: none; }

/* Color themes (good in dark mode) */
.color-0 .time, .color-0 .date { color: var(--accent-0); }
.color-1 .time, .color-1 .date { color: var(--accent-1); }
.color-2 .time, .color-2 .date { color: var(--accent-2); }
.color-3 .time, .color-3 .date { color: var(--accent-3); }
.color-4 .time, .color-4 .date { color: var(--accent-4); }
.color-5 .time, .color-5 .date { color: var(--accent-5); }
.color-6 .time, .color-6 .date { color: var(--accent-6); }

/* Font buckets: 10 choices (0..9). We rely on system availability except Gabriela. */
.font-0 { font-family: 'Gabriela', serif; }
.font-1 { font-family: "Aptos", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, Arial, sans-serif; }
.font-2 { font-family: "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.font-3 { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.font-4 { font-family: "Futura", "Avenir Next", "Avenir", system-ui, -apple-system, "Segoe UI", sans-serif; }
.font-5 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.font-6 { font-family: "Georgia", "Times New Roman", serif; }
.font-7 { font-family: "IBM Plex Sans", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.font-8 { font-family: "JetBrains Mono", "Menlo", "Consolas", monospace; }
.font-9 { font-family: "Gill Sans", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Style variants: normal / bold / italic */
.style-normal .time, .style-normal .date { font-weight: 500; font-style: normal; }
.style-bold   .time, .style-bold   .date { font-weight: 800; font-style: normal; }
.style-italic .time, .style-italic .date { font-weight: 600; font-style: italic; }

/* Subtle inner glow for readability on busy backgrounds */
.time, .date {
  text-shadow:
    0 1px 2px rgba(0,0,0,.75),
    0 2px 20px rgba(0,0,0,.55);
}

/* Respect safe area on notched devices */
@supports(padding: max(0px)) {
  body{ padding: max(var(--safe-gap), env(safe-area-inset-top)) max(var(--safe-gap), env(safe-area-inset-right)) max(var(--safe-gap), env(safe-area-inset-bottom)) max(var(--safe-gap), env(safe-area-inset-left)); }
}

/* Narrow devices: keep settings usable */
@media (max-width: 480px){
  .btn{ font-size: 16px; padding: 9px 10px; border-radius: 10px; }
  .cog{ font-size: 16px; padding: 8px 10px; }
}