:root {
  color-scheme: dark;
  --black: #080909;
  --tile: #111314;
  --ink: #e7edf0;
  --metal: #d5d8d4;
  --ambient-center: #42443f;
  --ambient-mid: #252622;
  --ambient-edge: #10110f;
  --case-a: #fafcf9;
  --case-b: #c3c6c2;
  --case-c: #f2f3f0;
  --case-d: #aeb2af;
  --case-border: #ebeeeb;
  --inner-a: #e7e9e5;
  --inner-b: #bec2bf;
  --tile-top: #151718;
  --tile-bottom: #0c0e0f;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #10110f;
  font-family: Arial, "Helvetica Neue", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button, input { font: inherit; }

.clock-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  background: radial-gradient(circle at 50% 40%, var(--ambient-center) 0, var(--ambient-mid) 38%, var(--ambient-edge) 78%);
  transition: background 1.2s ease;
}

.case {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, var(--case-a) 0%, var(--case-b) 42%, var(--case-c) 75%, var(--case-d) 100%);
  box-shadow: none;
  transition: background 1.2s ease, border-color 1.2s ease;
}

.case-inner {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  display: grid;
  grid-template-rows: 1.35fr .58fr 1fr;
  gap: 16px;
  gap: clamp(12px, 2vmin, 20px);
  width: 100%;
  height: 100%;
  padding: 32px;
  padding-bottom: 80px;
  padding: clamp(24px, 5vmin, 54px);
  padding-bottom: clamp(76px, 10vmin, 104px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.time-row {
  display: -webkit-flex;
  display: flex;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  gap: clamp(9px, 1.6vmin, 17px);
  -webkit-flex: 1.35 1 0;
  flex: 1.35 1 0;
  height: 42%;
  min-height: 0;
}

.time-card {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}

.flip-card, .calendar-card, .weekday-panel {
  position: relative;
  overflow: hidden;
  border: 2px solid #939794;
  border-radius: 8px;
  border-radius: clamp(5px, .9vmin, 10px);
  background: linear-gradient(var(--tile-top), var(--tile-bottom));
  box-shadow: inset 0 2px 5px #000, 0 2px 2px rgba(255,255,255,.65);
}

.card-face {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  color: var(--ink);
  font-size: 140px;
  font-size: min(25vmin, 188px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.09em;
  line-height: 1;
}

.card-face span {
  position: absolute;
  left: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200%;
  transform: translateX(-50%);
}

.card-top { top: 0; background: var(--tile-top); }
.card-bottom { bottom: 0; background: var(--tile-bottom); }
.card-top span { top: 0; }
.card-bottom span { bottom: 0; }

.hinge, .calendar-hinge {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  background: #252829;
  box-shadow: 0 -1px #000, 0 1px rgba(255,255,255,.1);
}

.flip-leaf {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  pointer-events: none;
  visibility: hidden;
}

.flip-drop {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
  pointer-events: none;
  visibility: hidden;
}

.leaf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--tile-top);
  font-size: 140px;
  font-size: min(25vmin, 188px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.09em;
  line-height: 1;
}

.leaf-face span {
  position: absolute;
  left: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200%;
  transform: translateX(-50%);
}

.leaf-front span { top: 0; }
.leaf-back { background: var(--tile-bottom); }
.leaf-back span { bottom: 0; }

.flip-card.flipping .flip-leaf,
.split-panel.flipping .flip-leaf {
  visibility: visible;
  -webkit-animation: fold-top .4s cubic-bezier(.55,.06,.68,.19) forwards;
  animation: fold-top .4s cubic-bezier(.55,.06,.68,.19) forwards;
}

.flip-card.flipping .flip-drop,
.split-panel.flipping .flip-drop {
  visibility: visible;
  -webkit-animation: unfold-bottom .4s .4s cubic-bezier(.22,.61,.36,1) both;
  animation: unfold-bottom .4s .4s cubic-bezier(.22,.61,.36,1) both;
}

.flipping .hinge { box-shadow: 0 -2px 4px #000, 0 2px 5px #000; }

@keyframes fold-top {
  0% { transform: perspective(900px) rotateX(0deg); filter: brightness(1); }
  100% { transform: perspective(900px) rotateX(-90deg); filter: brightness(.35); }
}

@keyframes unfold-bottom {
  0% { transform: perspective(900px) rotateX(90deg); filter: brightness(.35); }
  100% { transform: perspective(900px) rotateX(0deg); filter: brightness(1); }
}

@-webkit-keyframes fold-top {
  0% { -webkit-transform: perspective(900px) rotateX(0deg); filter: brightness(1); }
  100% { -webkit-transform: perspective(900px) rotateX(-90deg); filter: brightness(.35); }
}

@-webkit-keyframes unfold-bottom {
  0% { -webkit-transform: perspective(900px) rotateX(90deg); filter: brightness(.35); }
  100% { -webkit-transform: perspective(900px) rotateX(0deg); filter: brightness(1); }
}

.weekday-panel {
  color: var(--ink);
  -webkit-flex: .58 1 0;
  flex: .58 1 0;
  height: 18%;
  margin-top: 16px;
}
.weekday-panel strong { font-size: 52px; font-size: min(8.5vmin, 66px); letter-spacing: -.06em; }
.weekday-panel span { font-size: 38px; font-size: min(6.2vmin, 48px); font-weight: 800; white-space: nowrap; }

.calendar-row { display: -webkit-flex; display: flex; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; gap: clamp(9px, 1.6vmin, 17px); -webkit-flex: 1 1 0; flex: 1 1 0; height: 32%; min-height: 0; margin-top: 16px; }
.calendar-card { color: var(--ink); }
.calendar-card { -webkit-flex: 1 1 0; flex: 1 1 0; }
.day-content { font-size: 110px; font-size: min(18vmin, 142px); font-weight: 700; letter-spacing: -.08em; }
.month-content { flex-direction: column; line-height: .82; }
.month-card strong { font-size: 58px; font-size: min(9.5vmin, 74px); letter-spacing: -.08em; }
.month-card span { margin-top: 5%; font-size: 40px; font-size: min(6.8vmin, 52px); font-weight: 800; }

.panel-face {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  color: var(--ink);
}

.panel-top { top: 0; background: var(--tile-top); }
.panel-bottom { bottom: 0; background: var(--tile-bottom); }
.calendar-leaf .panel-face,
.calendar-drop .panel-face { inset: 0; height: 100%; }
.calendar-leaf .panel-face { background: var(--tile-top); }
.calendar-drop .panel-face { background: var(--tile-bottom); }

.weekday-content,
.day-content,
.month-content {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200%;
}
.weekday-content { justify-content: space-around; padding: 0 4%; }
.panel-top > div,
.leaf-front > div { top: 0; }
.panel-bottom > div,
.leaf-back > div { bottom: 0; }

.settings-button {
  position: fixed;
  z-index: 10;
  bottom: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  right: 16px;
  right: max(16px, env(safe-area-inset-right));
  width: 52px;
  height: 44px;
  border: 0;
  color: #aaa;
  background: rgba(0,0,0,.18);
  border-radius: 12px;
  font-size: 18px;
  letter-spacing: 3px;
}

.preview-controls {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.preview-controls button {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  color: #f4f4f4;
  background: #292b2b;
  font-size: 14px;
  font-weight: 700;
}

.preview-controls button:active { transform: translateY(1px); background: #383a3a; }

.color-picker {
  display: none;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #3b3b3b;
  border-radius: 10px;
  background: #111;
}

.color-picker.open { display: -webkit-flex; display: flex; }
.color-picker button {
  width: 36px;
  height: 36px;
  border: 3px solid #555;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.35);
}
.color-picker button.selected { border-color: #fff; box-shadow: 0 0 0 2px #111, 0 0 0 4px #fff; }

.random-color-button {
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  color: #f4f4f4;
  background: #292b2b;
  font-size: 14px;
  font-weight: 700;
}
.random-color-button.active { color: #111; background: #eee; }

.fullscreen-button {
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  color: #f4f4f4;
  background: #292b2b;
  font-size: 14px;
  font-weight: 700;
}

.fullscreen-button:active { transform: translateY(1px); background: #383a3a; }

.settings { position: fixed; z-index: 20; top: 50%; left: 50%; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 88vw; max-width: 420px; width: min(88vw, 420px); max-height: 88vh; overflow-y: auto; border: 1px solid #555; border-radius: 18px; padding: 0; color: #eee; background: #181818; box-shadow: 0 24px 80px #000; }
.settings:not([open]) { display: none; }
.settings::backdrop { background: rgba(0,0,0,.72); }
.settings-open::before { content: ""; position: fixed; z-index: 19; inset: 0; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.78); }
.settings form { padding: 24px; }
.settings-header { display: flex; align-items: center; justify-content: space-between; }
.settings h1 { margin: 0; font-size: 22px; }
.close-button { border: 0; color: #aaa; background: transparent; font-size: 32px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid #333; font-size: 18px; }
.setting-row input { width: 24px; height: 24px; accent-color: #eee; }
.setting-row.size-setting input { width: 180px; height: 28px; }
.wake-button { width: 100%; margin-top: 22px; padding: 13px; border: 0; border-radius: 10px; color: #111; background: #eee; font-weight: 600; }
.hint { margin: 14px 0 0; color: #999; font-size: 13px; line-height: 1.45; }

@media (orientation: landscape) {
  .card-face { font-size: 120px; font-size: min(19vh, 155px); }
  .leaf-face { font-size: 120px; font-size: min(19vh, 155px); }
  .weekday-panel strong { font-size: 46px; font-size: min(6.7vh, 55px); }
  .weekday-panel span { font-size: 32px; font-size: min(4.7vh, 39px); }
  .day-content { font-size: 90px; font-size: min(14vh, 112px); }
  .month-card strong { font-size: 48px; font-size: min(7.3vh, 58px); }
  .month-card span { font-size: 34px; font-size: min(5vh, 40px); }
}

@supports not (display: grid) {
  .time-card + .time-card,
  .calendar-card + .calendar-card { margin-left: 14px; }
}

@supports (display: grid) {
  .time-row,
  .weekday-panel,
  .calendar-row {
    height: auto;
    margin-top: 0;
    -webkit-flex: none;
    flex: none;
  }
}

/* User-selected sizing. Kept after responsive rules so it wins on old Safari too. */
.time-size-1 .card-face, .time-size-1 .leaf-face { font-size: 105px; font-size: 19vmin; }
.time-size-2 .card-face, .time-size-2 .leaf-face { font-size: 122px; font-size: 22vmin; }
.time-size-3 .card-face, .time-size-3 .leaf-face { font-size: 140px; font-size: 25vmin; }
.time-size-4 .card-face, .time-size-4 .leaf-face { font-size: 158px; font-size: 28vmin; }
.time-size-5 .card-face, .time-size-5 .leaf-face { font-size: 176px; font-size: 31vmin; }

.weekday-size-1 .weekday-panel strong { font-size: 38px; font-size: 6vmin; }
.weekday-size-1 .weekday-panel span { font-size: 28px; font-size: 4.5vmin; }
.weekday-size-2 .weekday-panel strong { font-size: 45px; font-size: 7.2vmin; }
.weekday-size-2 .weekday-panel span { font-size: 33px; font-size: 5.3vmin; }
.weekday-size-3 .weekday-panel strong { font-size: 52px; font-size: 8.5vmin; }
.weekday-size-3 .weekday-panel span { font-size: 38px; font-size: 6.2vmin; }
.weekday-size-4 .weekday-panel strong { font-size: 59px; font-size: 9.7vmin; }
.weekday-size-4 .weekday-panel span { font-size: 43px; font-size: 7vmin; }
.weekday-size-5 .weekday-panel strong { font-size: 66px; font-size: 10.8vmin; }
.weekday-size-5 .weekday-panel span { font-size: 48px; font-size: 7.8vmin; }

.date-size-1 .day-content { font-size: 82px; font-size: 13vmin; }
.date-size-1 .month-card strong { font-size: 43px; font-size: 7vmin; }
.date-size-1 .month-card span { font-size: 30px; font-size: 5vmin; }
.date-size-2 .day-content { font-size: 96px; font-size: 15.5vmin; }
.date-size-2 .month-card strong { font-size: 50px; font-size: 8.2vmin; }
.date-size-2 .month-card span { font-size: 35px; font-size: 5.9vmin; }
.date-size-3 .day-content { font-size: 110px; font-size: 18vmin; }
.date-size-3 .month-card strong { font-size: 58px; font-size: 9.5vmin; }
.date-size-3 .month-card span { font-size: 40px; font-size: 6.8vmin; }
.date-size-4 .day-content { font-size: 124px; font-size: 20.5vmin; }
.date-size-4 .month-card strong { font-size: 66px; font-size: 10.8vmin; }
.date-size-4 .month-card span { font-size: 45px; font-size: 7.7vmin; }
.date-size-5 .day-content { font-size: 138px; font-size: 23vmin; }
.date-size-5 .month-card strong { font-size: 74px; font-size: 12vmin; }
.date-size-5 .month-card span { font-size: 50px; font-size: 8.6vmin; }

@media (prefers-reduced-motion: reduce) { .flipping .flip-leaf, .flipping .flip-drop { animation: none; } }

/* TWEMCO-inspired case colors. The minute selects one theme for the whole clock. */
.theme-ivory {
  --ambient-center: #69675d; --ambient-mid: #393831; --ambient-edge: #151512;
  --case-a: #fffdf0; --case-b: #d8d3b9; --case-c: #f4f0d9; --case-d: #aaa690;
  --case-border: #fffdf2; --inner-a: #eee9d2; --inner-b: #c8c2a9;
  --tile-top: #20201c; --tile-bottom: #11120f; --ink: #f3f0df;
}
.theme-mustard {
  --ambient-center: #6b5923; --ambient-mid: #3d3216; --ambient-edge: #171309;
  --case-a: #f1cf3c; --case-b: #b78b0d; --case-c: #e5b923; --case-d: #8e6b09;
  --case-border: #f6d958; --inner-a: #dbb62e; --inner-b: #ae8610;
  --tile-top: #28230e; --tile-bottom: #151207; --ink: #fff8d8;
}
.theme-orange {
  --ambient-center: #793e1e; --ambient-mid: #402313; --ambient-edge: #170c07;
  --case-a: #f28a3a; --case-b: #bd501d; --case-c: #e46b27; --case-d: #8d3513;
  --case-border: #ff9c51; --inner-a: #dc6d2c; --inner-b: #ae481b;
  --tile-top: #2a1710; --tile-bottom: #170b07; --ink: #fff1e6;
}
.theme-red {
  --ambient-center: #702c2b; --ambient-mid: #3a1818; --ambient-edge: #160909;
  --case-a: #d94a43; --case-b: #9d201d; --case-c: #c73530; --case-d: #751412;
  --case-border: #e85b54; --inner-a: #c63a35; --inner-b: #94201e;
  --tile-top: #281112; --tile-bottom: #150708; --ink: #fff0ef;
}
.theme-cobalt {
  --ambient-center: #274d6d; --ambient-mid: #142b40; --ambient-edge: #07101a;
  --case-a: #3c78a6; --case-b: #17466e; --case-c: #2b6897; --case-d: #0e3253;
  --case-border: #4f8bb5; --inner-a: #2d6894; --inner-b: #17466c;
  --tile-top: #101d29; --tile-bottom: #071019; --ink: #eef7ff;
}
.theme-green {
  --ambient-center: #395b48; --ambient-mid: #203629; --ambient-edge: #0c160f;
  --case-a: #5f8b6e; --case-b: #315b40; --case-c: #4c785a; --case-d: #21432d;
  --case-border: #72a17f; --inner-a: #4c795a; --inner-b: #31583e;
  --tile-top: #122019; --tile-bottom: #09120d; --ink: #eef8f0;
}