:root {
  color-scheme: light;

  --gb-1: #d8dfa0;
  --gb-2: #a9b476;
  --gb-3: #667248;
  --gb-4: #26311f;

  --shell: #d7d4c9;
  --ink: #1e211d;
  --orange: #e1a348;
  --red: #c94c45;
  --blue: #4976b2;
  --gb-purple: #7a5b7d;
  --gb-purple-soft: #9f87af;
  --gb-purple-deep: #5b4262;
  --gb-purple-line: #8f6b91;
  --cream: #f0eadb;

  --lcd-bg: #d8dfa0;
  --lcd-ink: #1d281b;
  --lcd-off: rgba(29,40,27,.095);
  --lcd-after: rgba(29,40,27,.43);
  --lcd-grid: rgba(31,43,28,.021);

  --pie-1: #455f36;
  --pie-2: #7c814b;
  --pie-3: #b1974d;
  --pie-4: #586e73;
  --pie-5: #8a5c49;
  --pie-6: #67608a;
  --pie-empty: #dfe39b;

  font-family: "Courier New", "Yu Gothic UI", "Hiragino Sans", "Meiryo", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.24), transparent 30%),
    linear-gradient(#b9b7a2, #8f8e7d);
  color: var(--ink);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  width: min(1000px, calc(100% - 20px));
  margin: 0 auto;
  padding:
    max(16px, env(safe-area-inset-top))
    0
    max(24px, env(safe-area-inset-bottom));
}

.screen[hidden] { display: none !important; }

.console-shell {
  position: relative;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 30px);
  border: 4px solid #30312b;
  border-radius: 22px 22px 62px 22px;
  background: var(--shell);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.28),
    9px 11px 0 rgba(37,38,33,.62);
}

.console-shell::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px solid rgba(52,53,46,.25);
  border-radius: 14px 14px 48px 14px;
  pointer-events: none;
}

.select-header {
  position: relative;
  z-index: 1;
  margin: 7px 4px 18px;
  padding: 18px;
  border: 4px solid #2d3028;
  border-radius: 10px 10px 30px 10px;
  background:
    repeating-linear-gradient(0deg, rgba(37,49,31,.04) 0 1px, transparent 1px 4px),
    var(--gb-2);
  box-shadow: inset 0 0 0 6px rgba(37,49,31,.12);
  color: var(--gb-4);
}

.tiny {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.select-header h1 {
  margin: 0;
  font-size: clamp(28px, 7vw, 54px);
  line-height: 1.04;
  letter-spacing: -.06em;
}

.mode-title {
  margin: 9px 0 0;
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 900;
  letter-spacing: .14em;
}

.watch-select-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 5px;
}

.select-item {
  width: 100%;
  display: grid;
  grid-template-columns: 18px 34px 68px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 3px solid #30312b;
  border-radius: 9px;
  background: var(--gb-1);
  color: var(--gb-4);
  box-shadow: 4px 4px 0 #30312b;
  text-align: left;
  cursor: pointer;
}

.select-item:hover,
.select-item:focus-visible {
  background: #e3eaa0;
  transform: translate(-1px, -1px);
  outline: none;
}

.select-item:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #30312b;
}

.cursor, .right-arrow, .select-number { font-weight: 900; }

.mini-watch {
  position: relative;
  width: 58px;
  aspect-ratio: 1.04;
  border: 3px solid #090a0d;
  border-radius: 12px;
  background: #17191f;
  box-shadow: inset 0 0 0 3px #73757b;
}

.mini-watch::before,
.mini-watch::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 18px;
  height: 3px;
  border-radius: 99px;
}

.mini-watch::before { left: 8px; background: var(--red); }
.mini-watch::after { right: 8px; background: var(--blue); }

.mini-screen {
  position: absolute;
  inset: 17px 8px 9px;
  border: 2px solid var(--gb-4);
  border-radius: 3px;
  background: var(--gb-1);
}

.select-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.select-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(15px, 3.6vw, 21px);
}

.select-meta {
  color: #525d38;
  font-size: 11px;
  font-weight: 900;
}

.select-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.select-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 23px 7px 3px;
  color: #55564d;
  font-size: 11px;
  font-weight: 900;
}

.pixel-button {
  border: 3px solid #292b26;
  border-radius: 8px;
  padding: 11px 15px;
  background: #ebe6d8;
  color: #22231f;
  box-shadow: 4px 4px 0 #292b26;
  font-weight: 900;
  cursor: pointer;
}

.pixel-button.primary { background: var(--orange); }
.pixel-button.report-button { background: var(--gb-1); }
.pixel-button.danger { background: #d98278; }
.pixel-button.small { padding: 8px 10px; font-size: 11px; }

.pixel-button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #292b26;
}

.topbar {
  width: min(760px, 100%);
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.topbar-note {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}

.watch-machine {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 24px);
  border: 4px solid #17181d;
  border-radius: 27px;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.17),
    9px 11px 0 rgba(27,28,31,.58);
}

.theme-retro {
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), transparent 28%),
    #17191f;
  color: var(--cream);
}

/* monochrome handheld LCD theme */
.theme-lcd {
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), transparent 28%),
    #c9c9bf;
  color: #20251d;
}

.theme-lcd .watch-case {
  background:
    linear-gradient(120deg, rgba(255,255,255,.24), transparent 23%),
    #70736a;
  border-color: #282d25;
  box-shadow:
    inset 0 0 0 4px #c5c7bd,
    inset 0 0 0 9px #65685f,
    0 11px 22px rgba(0,0,0,.31);
}

.theme-lcd .case-brand-row {
  color: #2d3028;
  padding-bottom: 8px;
  border-bottom: 4px solid var(--gb-purple);
  box-shadow: 0 3px 0 rgba(111,85,127,.18);
}

.theme-lcd .case-brand::after {
  content: " / DOT MATRIX";
  margin-left: 7px;
  color: var(--gb-purple);
  font-size: .48em;
  letter-spacing: .04em;
}

.theme-lcd .case-footer-labels span:nth-child(2) {
  color: var(--gb-purple);
}

.theme-lcd .chip.is-active {
  background: var(--gb-purple);
  color: #f3eedf;
  border-color: #4e3a59;
}

.theme-lcd .digital-panel {
  --lcd-bg: #a7b95f;
  --lcd-ink: #173318;
  --lcd-off: rgba(23,51,24,.105);
  --lcd-after: rgba(23,51,24,.47);
  --lcd-grid: rgba(23,51,24,.018);
  border-color: #2c4227;
  box-shadow:
    inset 0 0 27px rgba(29,50,24,.22),
    inset 0 0 0 4px rgba(78,101,50,.20),
    inset 8px 0 17px rgba(41,63,30,.07),
    inset -8px -10px 20px rgba(48,67,34,.10);
}

.theme-lcd .case-footer-labels {
  color: #252820;
}

.theme-lcd .watch-case::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 56px;
  right: 22px;
  width: 40px;
  height: 12px;
  border-top: 3px solid var(--gb-purple-line);
  border-right: 3px solid var(--gb-purple-line);
  border-radius: 0 8px 0 0;
  opacity: .85;
}

.theme-lcd .watch-case::after {
  content: "A / B";
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 18px;
  color: var(--gb-purple);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .8;
}



/* translucent virtual-pet inspired theme */
.theme-translucent {
  background:
    linear-gradient(135deg, rgba(255,255,255,.50), transparent 24%),
    linear-gradient(150deg, rgba(71,208,220,.66), rgba(248,99,180,.34));
  color: #26373a;
  border-color: #3d6971;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.52),
    9px 11px 0 rgba(48,66,69,.42);
}

.theme-translucent .watch-case {
  overflow: hidden;
  border-color: rgba(52,86,94,.92);
  background:
    radial-gradient(circle at 15% 11%, rgba(255,255,255,.72), transparent 17%),
    linear-gradient(145deg, rgba(255,255,255,.46), rgba(73,201,209,.10) 35%, rgba(246,82,177,.16)),
    rgba(174, 233, 230, .34);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.66),
    inset 0 0 0 9px rgba(42,136,141,.14),
    0 11px 22px rgba(40,61,64,.30);
}

.theme-translucent .watch-case::before,
.theme-translucent .watch-case::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 2px solid rgba(60,96,98,.20);
  border-radius: 50%;
}

.theme-translucent .watch-case::before {
  width: 120px;
  height: 120px;
  right: -42px;
  top: 74px;
}

.theme-translucent .watch-case::after {
  width: 84px;
  height: 84px;
  left: -30px;
  bottom: 42px;
}

.theme-translucent .case-brand-row,
.theme-translucent .case-footer-labels {
  color: #314447;
}

.theme-translucent .digital-panel {
  --lcd-bg: #c4dca9;
  --lcd-ink: #274238;
  --lcd-off: rgba(39,66,56,.10);
  --lcd-after: rgba(39,66,56,.44);
  --lcd-grid: rgba(39,66,56,.017);
  border-color: #496a61;
}



.machine-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 11px;
}

.machine-title-group {
  min-width: 0;
  overflow: visible;
}

.machine-header h2 {
  margin: 0;
  padding: 3px 0 5px;
  max-width: 560px;
  overflow: visible;
  font-family: "Yu Gothic UI", "Hiragino Sans", "Meiryo", "Courier New", monospace;
  font-size: clamp(27px, 7vw, 47px);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -.035em;
  word-break: break-word;
}

.run-badge {
  flex: 0 0 auto;
  min-width: 62px;
  padding: 7px 9px;
  border: 2px solid currentColor;
  border-radius: 5px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
}

.run-badge.running {
  background: var(--red);
  color: white;
}

.switch-area {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.chip-label {
  min-width: 55px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .82;
}

.chip {
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 6px 9px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 900;
  opacity: .66;
  cursor: pointer;
}

.chip.is-active {
  background: var(--cream);
  color: #17191f;
  opacity: 1;
}

.theme-lcd .chip.is-active {
  background: #383c32;
  color: #d9dfc8;
}

.theme-translucent .chip.is-active {
  background: rgba(54,92,94,.88);
  color: #edf9f6;
}

.watch-tap-area {
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.watch-case {
  position: relative;
  width: min(490px, 100%);
  margin: 0 auto;
  padding: 19px 17px 14px;
  border: 5px solid #030304;
  border-radius: 48px 48px 38px 38px;
  background:
    linear-gradient(125deg, rgba(255,255,255,.18), transparent 22%),
    #0d0e12;
  box-shadow:
    inset 0 0 0 4px #777981,
    inset 0 0 0 9px #17191e,
    0 11px 22px rgba(0,0,0,.42);
}

.theme-retro .watch-case::before,
.theme-retro .watch-case::after {
  content: "";
  position: absolute;
  top: 16px;
  height: 5px;
  border-radius: 99px;
}

.theme-retro .watch-case::before {
  left: 26px;
  width: 41%;
  background: var(--red);
}

.theme-retro .watch-case::after {
  right: 26px;
  width: 41%;
  background: var(--blue);
}

.case-brand-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin: 5px 7px 10px;
}

.case-brand {
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 900;
  letter-spacing: -.04em;
}

.case-small {
  font-size: 9px;
  font-weight: 900;
}

.visual-panels {
  display: grid;
  gap: 9px;
  min-width: 0;
}

/* LCD v0.6 */
.digital-panel {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  min-height: 190px;
  padding: 15px;
  border: 4px solid #26301f;
  border-radius: 10px;
  color: var(--lcd-ink);

  background:
    radial-gradient(ellipse at 48% 52%, rgba(255,255,255,.12), transparent 38%),
    radial-gradient(ellipse at 8% 80%, rgba(44,57,35,.11), transparent 30%),
    radial-gradient(ellipse at 86% 18%, rgba(255,255,255,.145), transparent 26%),
    linear-gradient(101deg, rgba(255,255,255,.13), transparent 34%),
    repeating-linear-gradient(
      90deg,
      var(--lcd-grid) 0 .6px,
      transparent .6px 3.4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(31,43,28,.028) 0 .55px,
      transparent .55px 3.8px
    ),
    var(--lcd-bg);

  box-shadow:
    inset 0 0 30px rgba(42,57,34,.24),
    inset 0 0 0 4px rgba(89,103,60,.16),
    inset 9px 0 18px rgba(58,71,43,.08),
    inset -8px -10px 22px rgba(64,75,45,.10);
}

.digital-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      112deg,
      rgba(255,255,255,.46) 0%,
      rgba(255,255,255,.23) 12%,
      transparent 25%,
      transparent 70%,
      rgba(255,255,255,.07) 100%
    );
  clip-path: polygon(0 0, 64% 0, 35% 56%, 0 82%);
  opacity: .82;
}

.digital-panel::after {
  content: "";
  position: absolute;
  z-index: 5;
  pointer-events: none;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.11), transparent 2.5%),
    radial-gradient(circle at 81% 69%, rgba(33,47,29,.055), transparent 4%),
    radial-gradient(circle at 57% 28%, rgba(255,255,255,.055), transparent 5%);
  mix-blend-mode: soft-light;
}

.lcd-row,
.lcd-time-stage {
  position: relative;
  z-index: 2;
}

.lcd-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
}

.small-row { font-size: 10px; }

.lcd-time-stage {
  display: grid;
  place-items: center;
  min-height: 112px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Seven-segment LCD */
.segment-display {
  --digit-w: 48px;
  --digit-h: 82px;
  --seg-t: 9px;
  --seg-gap: 6px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--seg-gap);
  width: max-content;
  max-width: 100%;
  color: var(--lcd-ink);
  filter: saturate(.88) contrast(1.05);
}


.segment-digit {
  position: relative;
  flex: 0 0 var(--digit-w);
  width: var(--digit-w);
  height: var(--digit-h);
}

.segment {
  position: absolute;
  background: var(--lcd-off);
  box-shadow: inset 0 0 1px rgba(255,255,255,.08);
  transition: background-color .035s linear;
}

/* beveled horizontal segments */
.segment.a,
.segment.g,
.segment.d {
  left: calc(var(--seg-t) * .68);
  width: calc(100% - var(--seg-t) * 1.36);
  height: var(--seg-t);
  clip-path: polygon(10% 0, 88% 0, 100% 42%, 92% 100%, 9% 100%, 0 58%);
}

.segment.a { top: 0; }
.segment.g { top: calc(50% - var(--seg-t) / 2); }
.segment.d { bottom: 0; }

/* beveled vertical segments */
.segment.b,
.segment.c,
.segment.e,
.segment.f {
  width: var(--seg-t);
  height: calc(50% - var(--seg-t) * .98);
  clip-path: polygon(44% 0, 100% 10%, 88% 90%, 52% 100%, 0 88%, 10% 12%);
}

.segment.b { top: calc(var(--seg-t) * .75); right: 0; }
.segment.c { bottom: calc(var(--seg-t) * .75); right: 0; }
.segment.e { bottom: calc(var(--seg-t) * .75); left: 0; }
.segment.f { top: calc(var(--seg-t) * .75); left: 0; }

.segment.on {
  background: var(--lcd-ink);
  box-shadow:
    inset 0 0 1px rgba(255,255,255,.08),
    0 .5px .35px rgba(20,30,18,.24);
}

.segment.afterglow:not(.on) {
  animation: segment-afterglow .58s cubic-bezier(.18,.64,.31,1) forwards;
}

@keyframes segment-afterglow {
  0% {
    background: var(--lcd-after);
    box-shadow: 0 .4px .3px rgba(20,30,18,.12);
  }
  100% {
    background: var(--lcd-off);
    box-shadow: inset 0 0 1px rgba(255,255,255,.08);
  }
}

.segment-colon {
  position: relative;
  flex: 0 0 9px;
  width: 9px;
  height: var(--digit-h);
}

.segment-colon::before,
.segment-colon::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--lcd-ink);
}

.segment-colon::before { top: 28%; }
.segment-colon::after { bottom: 28%; }

.lcd-name {
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lcd-mini { font-size: 9px; opacity: .72; }

.analog-panel {
  min-width: 0;
  min-height: 280px;
  padding: 2px;
}

.analog-lcd-layer { pointer-events: none; }
.analog-hands-layer { pointer-events: none; }

#analogSvg {
  width: min(100%, 340px);
  display: block;
  margin: 0 auto;
  overflow: visible;
}

.dial-outer {
  fill: #d9d4bd;
  stroke: #101219;
  stroke-width: 12;
}

.dial-inner {
  fill: #f2eedf;
  stroke: #464a4f;
  stroke-width: 3;
}

.theme-lcd .dial-outer { fill: #73776a; }
.theme-lcd .dial-inner { fill: #b3bd81; }
.theme-translucent .dial-outer { fill: rgba(110,178,174,.72); }
.theme-translucent .dial-inner { fill: #d1e5c0; }

.tick-major { stroke: #17191d; stroke-width: 4; }
.tick-minor { stroke: #52564d; stroke-width: 2; }

.dial-brand {
  fill: #17191d;
  font-size: 18px;
  font-weight: 900;
}

.dial-sub {
  fill: #62665c;
  font-size: 9px;
  font-weight: 900;
}

.hand {
  stroke-linecap: round;
  transform-origin: 160px 160px;
}

.minute-hand { stroke: #202942; stroke-width: 8; }
.second-hand { stroke: #c5443b; stroke-width: 4; }

.pin {
  fill: #d2a243;
  stroke: #17191d;
  stroke-width: 4;
}

.analog-lcd-box {
  fill: #b9bf76;
  stroke: #1e2718;
  stroke-width: 3;
}

.analog-lcd-time {
  fill: #1e2718;
  font-family: "Courier New", monospace;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.55px;
}

.case-footer-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 11px 12px 0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: .88;
}

.editor-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.name-editor {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.name-editor input {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 3px solid currentColor;
  border-radius: 7px;
  background: #f2eddf;
  color: #1d201c;
  outline: none;
}

.name-editor input:focus { box-shadow: 4px 4px 0 var(--orange); }

.watch-status {
  margin: 9px 1px 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  opacity: .82;
}

/* TODAY REPORT */
.report-machine {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 28px);
  border: 4px solid #293024;
  border-radius: 24px 24px 52px 24px;
  background: var(--shell);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.25),
    8px 10px 0 rgba(37,38,33,.58);
}

.report-header {
  padding: 15px 17px;
  border: 4px solid var(--gb-4);
  border-radius: 10px 10px 26px 10px;
  background:
    repeating-linear-gradient(0deg, rgba(37,49,31,.04) 0 1px, transparent 1px 4px),
    var(--gb-2);
  color: var(--gb-4);
}

.report-header h2 {
  margin: 0;
  font-size: clamp(28px, 7vw, 48px);
  line-height: 1.05;
  letter-spacing: -.05em;
}

.report-date {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 900;
}

.report-body {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(240px, 1.1fr);
  gap: 22px;
  align-items: center;
  margin-top: 20px;
}

.pie-stage {
  display: grid;
  place-items: center;
  padding: 14px;
}

.today-pie {
  position: relative;
  width: min(300px, 80vw);
  aspect-ratio: 1;
  border: 5px solid #30312b;
  border-radius: 50%;
  background: var(--pie-empty);
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,.25),
    6px 7px 0 #30312b;
}

.pie-center {
  position: absolute;
  inset: 23%;
  display: grid;
  place-content: center;
  border: 4px solid #30312b;
  border-radius: 50%;
  background: var(--gb-1);
  text-align: center;
  color: var(--gb-4);
}

.pie-center strong {
  font-size: clamp(23px, 6vw, 38px);
  line-height: 1;
}

.pie-center span {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 900;
}

.report-caption {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
}

.today-legend {
  display: grid;
  gap: 8px;
}

.legend-row {
  display: grid;
  grid-template-columns: 14px minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 2px solid #30312b;
  border-radius: 7px;
  background: #eee9d9;
  font-size: 12px;
  font-weight: 900;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border: 2px solid #30312b;
  border-radius: 3px;
}

.legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend-time { font-variant-numeric: tabular-nums; }

.report-notice {
  margin: 11px 2px 0;
  color: #5b5d55;
  font-size: 11px;
  line-height: 1.5;
}

.report-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 3px 0;
  border-top: 2px solid #8c8d82;
  font-size: 11px;
  font-weight: 900;
}

@media (min-width: 800px) {
  .tiny { font-size: 12px; }
  .topbar-note { font-size: 12px; }
  .chip-label { font-size: 11px; }
  .chip { font-size: 12px; padding: 7px 11px; }
  .case-small { font-size: 10px; }
  .lcd-row { font-size: 12px; }
  .small-row { font-size: 11px; }
  .lcd-mini { font-size: 10px; }
  .case-footer-labels { font-size: 10px; }
  .watch-status { font-size: 12px; }
  .name-editor { font-size: 11px; }
  .select-meta { font-size: 12px; }
  .select-footer { font-size: 12px; }
}

/* phones */
@media (max-width: 620px) {
  .app-shell {
    width: min(100% - 12px, 1000px);
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .console-shell {
    padding: 13px 10px 21px;
    border-radius: 18px 18px 44px 18px;
    box-shadow: 5px 7px 0 rgba(37,38,33,.62);
  }

  .select-header { margin: 7px 3px 13px; }

  .select-item {
    grid-template-columns: 15px 25px 52px minmax(0, 1fr) 14px;
    gap: 7px;
    padding: 9px 8px;
  }

  .mini-watch { width: 47px; }

  .select-footer {
    flex-direction: column;
    gap: 5px;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-note { text-align: left; }

  .watch-machine {
    padding: 13px 10px 15px;
    border-radius: 20px;
    box-shadow: 5px 7px 0 rgba(27,28,31,.58);
  }

  .machine-header {
    align-items: center;
    margin-bottom: 8px;
  }

  .machine-header h2 {
    font-size: clamp(25px, 8vw, 38px);
    line-height: 1.28;
    padding-top: 2px;
    padding-bottom: 4px;
  }

  .chip-label { display: none; }

  .chip-group { flex-wrap: nowrap; }

  .skin-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .chip {
    flex: 1 1 auto;
    padding: 6px 6px;
    font-size: 8.5px;
    white-space: nowrap;
  }

  .watch-case {
    padding: 17px 11px 12px;
    border-radius: 34px;
  }

  .case-brand-row { margin-inline: 3px; }
  .case-small { display: none; }

  .digital-panel {
    min-height: 162px;
    padding: 11px 9px;
  }

  .lcd-time-stage { min-height: 92px; }

  .segment-display {
    --digit-w: 37px;
    --digit-h: 64px;
    --seg-t: 7px;
    --seg-gap: 4px;
  }

  .segment-colon {
    flex-basis: 7px;
    width: 7px;
  }

  .segment-colon::before,
  .segment-colon::after {
    width: 6px;
    height: 6px;
  }

  .lcd-row { font-size: 9px; }

  .analog-panel { min-height: 230px; }
  #analogSvg { width: min(100%, 270px); }

  .editor-row {
    margin-top: 11px;
    align-items: flex-end;
  }

  .name-editor input { padding: 8px 10px; }

  .report-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .today-pie { width: min(245px, 68vw); }

  .report-machine {
    padding: 13px 11px 18px;
  }
}

/* short-height phones / iPhone SE class */
@media (max-width: 620px) and (max-height: 720px) {
  .app-shell {
    padding-top: max(5px, env(safe-area-inset-top));
    padding-bottom: max(7px, env(safe-area-inset-bottom));
  }

  .watch-screen .topbar {
    margin-bottom: 5px;
    flex-direction: row;
    align-items: center;
  }

  .watch-screen .topbar-note {
    font-size: 8px;
    text-align: right;
  }

  .watch-screen .pixel-button.small {
    padding: 6px 8px;
    font-size: 9px;
  }

  .watch-machine {
    padding: 9px 8px 9px;
    border-width: 3px;
    border-radius: 17px;
    box-shadow: 4px 5px 0 rgba(27,28,31,.58);
  }

  .machine-header { margin-bottom: 5px; }

  .machine-header .tiny {
    margin-bottom: 1px;
    font-size: 8px;
  }

  .machine-header h2 {
    font-size: clamp(22px, 7.4vw, 31px);
    line-height: 1.24;
    padding: 2px 0 3px;
  }

  .run-badge {
    min-width: 53px;
    padding: 5px 7px;
    font-size: 9px;
  }

  .switch-area {
    gap: 6px;
    margin-bottom: 7px;
  }

  .chip-group { gap: 4px; }

  .chip {
    padding: 4px 5px;
    border-width: 2px;
    font-size: 7.5px;
  }

  .watch-case {
    width: min(94vw, 430px, 45dvh);
    min-width: 290px;
    padding: 13px 9px 8px;
    border-width: 4px;
    border-radius: 27px;
    box-shadow:
      inset 0 0 0 3px #777981,
      inset 0 0 0 7px #17191e,
      0 7px 12px rgba(0,0,0,.35);
  }

  .theme-retro .watch-case::before,
  .theme-retro .watch-case::after {
    top: 11px;
    height: 3px;
  }

  .case-brand-row { margin: 2px 4px 5px; }
  .case-brand { font-size: 15px; }

  .visual-panels {
    gap: 5px;
    min-width: 0;
  }

  .digital-panel {
    min-width: 0;
    min-height: 119px;
    padding: 7px 7px;
    border-width: 3px;
  }

  .lcd-time-stage {
    min-width: 0;
    min-height: 67px;
    width: 100%;
  }

  .segment-display {
    --digit-w: 30px;
    --digit-h: 52px;
    --seg-t: 6px;
    --seg-gap: 3px;
  }

  .segment-colon {
    flex-basis: 6px;
    width: 6px;
  }

  .segment-colon::before,
  .segment-colon::after {
    left: .5px;
    width: 5px;
    height: 5px;
  }

  .lcd-row,
  .small-row { font-size: 7px; }

  .lcd-mini { font-size: 6px; }

  .analog-panel { min-height: 0; }
  #analogSvg { width: min(100%, 178px); }

  /* DUAL gets its own layout and a smaller 7-segment module.
     No text scaling: the segment geometry itself shrinks. */
  .watch-case.mode-dual .visual-panels {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr);
    align-items: center;
    gap: 3px;
  }

  .watch-case.mode-dual .digital-panel {
    min-width: 0;
    min-height: 105px;
    padding: 5px 4px;
  }

  .watch-case.mode-dual .lcd-time-stage {
    min-height: 58px;
    overflow: hidden;
  }

  .watch-case.mode-dual .segment-display {
    --digit-w: 18.5px;
    --digit-h: 37px;
    --seg-t: 4.2px;
    --seg-gap: 1.5px;
  }

  .watch-case.mode-dual .segment-colon {
    flex-basis: 3.5px;
    width: 3.5px;
  }

  .watch-case.mode-dual .segment-colon::before,
  .watch-case.mode-dual .segment-colon::after {
    left: 0;
    width: 3.5px;
    height: 3.5px;
  }

  .watch-case.mode-dual #analogSvg {
    width: min(100%, 148px);
  }

  .watch-case.mode-dual .analog-lcd-time {
    font-size: 12px;
    letter-spacing: -.85px;
  }

  .watch-case.mode-dual .lcd-row,
  .watch-case.mode-dual .small-row {
    gap: 4px;
    font-size: 6px;
  }

  .watch-case.mode-dual .lcd-mini {
    font-size: 5px;
  }

  .case-footer-labels {
    margin: 6px 7px 0;
    font-size: 6px;
  }

  .editor-row {
    margin-top: 7px;
    gap: 6px;
  }

  .name-editor {
    gap: 2px;
    font-size: 7px;
  }

  .name-editor input {
    padding: 6px 8px;
    border-width: 2px;
    font-size: 12px;
  }

  #deleteWatchButton {
    padding: 7px 8px;
    border-width: 2px;
    font-size: 8px;
    box-shadow: 2px 2px 0 #292b26;
  }

  .watch-status {
    margin-top: 5px;
    font-size: 8px;
  }
}


@supports (-webkit-touch-callout: none) {
  @media (max-width: 620px) and (max-height: 720px) {
    .watch-case.mode-dual .segment-display {
      --digit-w: 17.5px;
      --digit-h: 35px;
      --seg-t: 4px;
      --seg-gap: 1.2px;
    }

    .watch-case.mode-dual .segment-colon {
      flex-basis: 3px;
      width: 3px;
    }

    .watch-case.mode-dual .segment-colon::before,
    .watch-case.mode-dual .segment-colon::after {
      width: 3px;
      height: 3px;
    }

    .watch-case.mode-dual #analogSvg {
      width: min(100%, 151px);
    }
  }
}

@media (max-width: 370px) {
  .select-item {
    grid-template-columns: 13px 22px 42px minmax(0, 1fr);
  }

  .right-arrow { display: none; }
  .mini-watch { width: 39px; }

  .select-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .select-actions .pixel-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* v0.9: retro-latin labels are slightly more angular/tight */
.tiny,
.mode-title,
.case-brand,
.case-small,
.lcd-row,
.case-footer-labels,
.case-micro-notes,
.pixel-button,
.chip,
.topbar-note,
.select-footer,
.select-meta,
.report-date,
.report-footer,
.legend-row {
  font-family: "Courier New", "Liberation Mono", monospace;
  letter-spacing: .035em;
}

.machine-header h2,
.select-header h1,
.report-header h2 {
  font-family: "Yu Gothic UI", "Hiragino Sans", "Meiryo", sans-serif;
}


/* v0.9 translucent desktop-toy theme */
.translucent-core,
.translucent-print {
  display: none;
  pointer-events: none;
}

.theme-translucent {
  background:
    linear-gradient(135deg, rgba(255,255,255,.62), transparent 24%),
    linear-gradient(150deg, rgba(83,196,215,.58), rgba(170,214,231,.30));
  color: #224349;
  border-color: #5a8d97;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.58),
    9px 11px 0 rgba(70,112,120,.35);
}

.theme-translucent .watch-case {
  overflow: hidden;
  border-color: rgba(98,147,158,.88);
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.76), transparent 18%),
    linear-gradient(145deg, rgba(255,255,255,.58), rgba(76,174,196,.16) 37%, rgba(255,255,255,.34)),
    rgba(212, 241, 246, .58);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.72),
    inset 0 0 0 9px rgba(122,180,194,.22),
    0 11px 22px rgba(55,94,103,.26);
  border-radius: 54px 54px 44px 44px;
}

.theme-translucent .watch-case::before,
.theme-translucent .watch-case::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: .34;
}

.theme-translucent .watch-case::before {
  width: 128px;
  height: 128px;
  right: -28px;
  top: 72px;
  border: 3px solid rgba(93,158,174,.44);
}

.theme-translucent .watch-case::after {
  width: 82px;
  height: 82px;
  left: -18px;
  bottom: 48px;
  border: 3px solid rgba(93,158,174,.34);
}

.theme-translucent .case-brand-row,
.theme-translucent .visual-panels,
.theme-translucent .case-footer-labels,
.theme-translucent .case-micro-notes {
  position: relative;
  z-index: 4;
}

.theme-translucent .case-brand-row,
.theme-translucent .case-footer-labels {
  color: #2f5d67;
}

.theme-translucent .case-brand::after {
  content: " / BUBBLE GEAR";
  margin-left: 7px;
  color: #4f9db0;
  font-size: .48em;
  letter-spacing: .04em;
}

.theme-translucent .digital-panel {
  --lcd-bg: #d7e7cd;
  --lcd-ink: #23463b;
  --lcd-off: rgba(35,70,59,.10);
  --lcd-after: rgba(35,70,59,.42);
  --lcd-grid: rgba(35,70,59,.017);
  border-color: #69a9b5;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.20),
    0 8px 14px rgba(65,137,152,.15),
    inset 0 0 24px rgba(70,105,84,.12),
    inset 0 0 0 4px rgba(112,171,173,.17);
}

.theme-translucent .chip.is-active {
  background: linear-gradient(#7dd0e1, #59a8bb);
  color: #effcff;
  border-color: #467f8e;
}

.theme-translucent .translucent-core {
  display: block;
  position: absolute;
  z-index: 1;
  inset: 42px 14px 26px;
  border: 2px solid rgba(107,163,177,.34);
  border-radius: 28px;
  opacity: .88;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.30), transparent 14%),
    repeating-linear-gradient(90deg, rgba(83,168,183,.12) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(83,168,183,.10) 0 1px, transparent 1px 18px),
    linear-gradient(145deg, rgba(148,220,234,.34), rgba(255,255,255,.12)),
    rgba(185,232,240,.20);
  box-shadow:
    inset 0 0 18px rgba(82,165,181,.16),
    0 0 0 6px rgba(255,255,255,.10);
}

.theme-translucent .translucent-core::before,
.theme-translucent .translucent-core::after {
  content: "";
  position: absolute;
  border-radius: 14px;
  background: rgba(84,165,181,.20);
  border: 2px solid rgba(90,150,161,.25);
}

.theme-translucent .translucent-core::before {
  width: 68px;
  height: 36px;
  right: 10%;
  top: 16%;
}

.theme-translucent .translucent-core::after {
  width: 42px;
  height: 42px;
  left: 12%;
  bottom: 16%;
  border-radius: 50%;
}

.core-chip {
  position: absolute;
  width: 42px;
  height: 24px;
  border: 2px solid rgba(82,136,149,.28);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.38), rgba(103,180,194,.20)),
    rgba(193,240,246,.26);
}

.core-chip-a { left: 13%; top: 48%; transform: rotate(-6deg); }
.core-chip-b { right: 13%; top: 56%; transform: rotate(7deg); }

.core-cap {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.46), transparent 24%),
    rgba(117,192,206,.34);
  box-shadow:
    22px 3px 0 rgba(95,176,191,.24),
    40px -1px 0 rgba(140,214,226,.22);
}

.core-cap-a { left: 20%; bottom: 14%; }
.core-cap-b { right: 24%; top: 22%; }

.theme-translucent .translucent-print {
  display: block;
  position: absolute;
  z-index: 3;
  inset: 38px 15px 28px;
  color: rgba(78,152,170,.62);
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.03em;
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
}

.translucent-print span { position: absolute; }
.translucent-print .print-1 { left: 0; top: 16%; transform: rotate(-16deg); }
.translucent-print .print-2 { right: 2%; top: 24%; transform: rotate(13deg); color: rgba(90,170,188,.66); }
.translucent-print .print-3 { left: 3%; bottom: 20%; transform: rotate(11deg); color: rgba(90,170,188,.58); }
.translucent-print .print-4 { right: 2%; bottom: 13%; transform: rotate(-15deg); }
.translucent-print .print-5 {
  left: 5%;
  top: 44%;
  transform: rotate(13deg);
  color: rgba(255,255,255,.58);
  font-size: 17px;
}
.translucent-print .print-6 {
  right: 6%;
  bottom: 38%;
  transform: rotate(-8deg);
  color: rgba(92,182,197,.75);
  font-size: 12px;
}

.theme-translucent .digital-panel,
.theme-translucent .analog-panel {
  box-shadow:
    0 0 0 3px rgba(255,255,255,.14),
    0 8px 14px rgba(64,143,160,.12);
}


.case-micro-notes {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 5px 15px 0;
  font-size: 8px;
  font-weight: 900;
  opacity: .56;
}

.theme-translucent .case-micro-notes {
  color: #5f97a2;
}

.analog-progress-track {
  fill: rgba(40,55,29,.20);
  stroke: rgba(27,39,20,.10);
  stroke-width: 1;
}

.analog-progress-fill {
  fill: #40512b;
}

.analog-mini-label {
  fill: #516146;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .10em;
}

@media (max-width: 620px) {
  .case-micro-notes {
    margin: 4px 10px 0;
    font-size: 7px;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .case-micro-notes {
    margin: 3px 7px 0;
    font-size: 5.5px;
  }

  .watch-case.mode-dual .analog-progress-track,
  .watch-case.mode-dual .analog-progress-fill {
    transform: scaleY(.9);
    transform-origin: center;
  }

  .watch-case.mode-dual .analog-mini-label {
    font-size: 6px;
  }
}


/* =========================
   v0.91 design refinement overrides
   ========================= */
:root {
  --v091-plum-main: #7d617d;
  --v091-plum-soft: #a78ead;
  --v091-plum-deep: #63486a;
  --v091-bondi-blue: #73bed5;
  --v091-bondi-deep: #2d7ea2;
  --v091-bondi-milk: #edf0eb;
  --v091-bondi-rib: #d1d5cf;
}

.theme-retro .watch-case {
  background:
    linear-gradient(115deg, rgba(255,255,255,.12), transparent 21%),
    linear-gradient(180deg, rgba(16,18,24,.98), rgba(7,8,11,.98));
}

.theme-retro .case-brand-row {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.theme-retro .case-brand-row::after {
  content: "20  30  40  50  60 SEC";
  position: absolute;
  right: 0;
  top: -10px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
  color: rgba(243,235,221,.72);
}

.theme-retro .case-small {
  color: rgba(245,238,224,.72);
}

.theme-retro .digital-panel {
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.22),
    inset 0 0 0 4px rgba(103,112,94,.18),
    inset 8px 0 16px rgba(255,255,255,.03),
    inset -8px -9px 16px rgba(0,0,0,.07),
    0 0 0 1px rgba(255,255,255,.03);
}

.theme-retro .case-footer-labels {
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.13);
}

.theme-retro .case-footer-labels span:nth-child(1) { color: #e87864; }
.theme-retro .case-footer-labels span:nth-child(2) { color: #f3ead9; }
.theme-retro .case-footer-labels span:nth-child(3) { color: #7399d0; }

.theme-retro .case-micro-notes {
  opacity: .72;
  color: #aeb4c0;
}

.theme-retro .case-micro-notes span:nth-child(2) {
  color: #89a6d4;
}

.theme-retro .analog-progress-fill {
  fill: #7f96c7;
}

.theme-retro .analog-mini-label {
  fill: #d6dbe6;
}

.theme-lcd .watch-case {
  background:
    linear-gradient(120deg, rgba(255,255,255,.28), transparent 23%),
    linear-gradient(180deg, rgba(136,140,126,.55), rgba(102,106,95,.35) 20%, transparent 20%),
    #73776c;
}

.theme-lcd .case-brand-row {
  border-bottom: 4px solid var(--v091-plum-soft);
  box-shadow: 0 3px 0 rgba(125,97,125,.14);
}

.theme-lcd .case-brand::after {
  color: var(--v091-plum-main);
}

.theme-lcd .watch-case::before {
  left: 20px;
  right: 20px;
  top: 52px;
  width: auto;
  height: 5px;
  border: none;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(125,97,125,.10), rgba(125,97,125,.9) 18%, rgba(167,142,173,.85) 68%, rgba(125,97,125,.18));
  opacity: .9;
}

.theme-lcd .watch-case::after {
  content: "GB TONE";
  right: 22px;
  bottom: 17px;
  color: var(--v091-plum-deep);
  font-size: 9px;
  letter-spacing: .14em;
  opacity: .84;
}

.theme-lcd .chip.is-active {
  background: linear-gradient(var(--v091-plum-soft), var(--v091-plum-main));
  color: #f5f0e8;
  border-color: var(--v091-plum-deep);
}

.theme-lcd .case-footer-labels span:nth-child(2),
.theme-lcd .case-micro-notes span:nth-child(2) {
  color: var(--v091-plum-deep);
}

.theme-lcd .digital-panel {
  --lcd-bg: #b2c56a;
  --lcd-ink: #183119;
  --lcd-off: rgba(24,49,25,.10);
  --lcd-after: rgba(24,49,25,.45);
  --lcd-grid: rgba(24,49,25,.017);
  border-color: #41552e;
  box-shadow:
    inset 0 0 26px rgba(31,53,26,.18),
    inset 0 0 0 4px rgba(87,111,56,.18),
    inset 0 10px 16px rgba(255,255,255,.04),
    inset -8px -10px 18px rgba(56,76,39,.08);
}

.theme-lcd .analog-progress-fill {
  fill: var(--v091-plum-deep);
}

.theme-lcd .analog-mini-label {
  fill: #6e5a73;
}

.theme-translucent {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.32), transparent 30%),
    linear-gradient(145deg, rgba(143,223,243,.62), rgba(81,171,196,.64));
  color: #25434b;
  border-color: #6099ac;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.52),
    9px 11px 0 rgba(54,108,121,.34);
}

.theme-translucent .watch-case {
  overflow: hidden;
  border-color: #8ca9b1;
  border-radius: 58px 58px 42px 42px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0) 0 15%,
      rgba(210,214,210,.82) 15% 15.6%,
      rgba(241,243,239,.92) 15.6% 16.8%,
      rgba(202,207,204,.78) 16.8% 17.4%,
      rgba(255,255,255,0) 17.4% 18.8%),
    linear-gradient(180deg, rgba(245,246,242,.98), rgba(229,234,228,.96));
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.84),
    inset 0 0 0 11px rgba(196,205,201,.34),
    0 11px 22px rgba(55,94,103,.20);
}

.theme-translucent .watch-case::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 18px;
  right: 10px;
  bottom: 26px;
  width: 30%;
  border-radius: 30px 54px 40px 22px;
  background:
    linear-gradient(180deg, rgba(113,202,228,.80), rgba(42,111,145,.92));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    inset -12px 0 24px rgba(17,63,88,.26);
  opacity: .96;
}

.theme-translucent .watch-case::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 12px;
  height: 72px;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(155,210,222,.30));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
}

.theme-translucent .case-brand-row,
.theme-translucent .visual-panels,
.theme-translucent .case-footer-labels,
.theme-translucent .case-micro-notes {
  position: relative;
  z-index: 3;
}

.theme-translucent .case-brand-row {
  color: #5b6e72;
  margin-bottom: 12px;
}

.theme-translucent .case-brand::after {
  content: " / BUBBLE DESKTOP";
  color: #4a92a7;
}

.theme-translucent .digital-panel {
  --lcd-bg: #c5ebe3;
  --lcd-ink: #26464a;
  --lcd-off: rgba(38,70,74,.10);
  --lcd-after: rgba(38,70,74,.42);
  --lcd-grid: rgba(38,70,74,.016);
  border-color: #1c2729;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 18%),
    var(--lcd-bg);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.20),
    inset 0 0 0 10px rgba(17,26,28,.12),
    inset 0 0 26px rgba(33,78,80,.10),
    0 4px 10px rgba(79,122,132,.10);
}

.theme-translucent .translucent-core {
  display: block;
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 14px;
  top: auto;
  height: 58px;
  border: none;
  border-radius: 0 0 24px 24px;
  background: transparent;
  opacity: 1;
  box-shadow: none;
}

.theme-translucent .translucent-core::before,
.theme-translucent .translucent-core::after {
  content: "";
  position: absolute;
  bottom: 8px;
  width: 46px;
  height: 28px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 26% 30%, rgba(255,255,255,.56), transparent 18%),
    radial-gradient(circle, rgba(35,86,102,.22) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(82,180,203,.56), rgba(56,133,161,.72));
  background-size: auto, 6px 6px, auto;
  border: 1px solid rgba(70,140,164,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.theme-translucent .translucent-core::before { left: 6px; }
.theme-translucent .translucent-core::after { right: 6px; }

.theme-translucent .core-chip {
  position: absolute;
  border: none;
  background: none;
}

.theme-translucent .core-chip-a {
  left: 50%;
  top: 10px;
  width: 72px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(152,194,205,.82), rgba(109,149,162,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.theme-translucent .core-chip-b {
  right: 14px;
  top: 12px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 26%), rgba(82,148,173,.72);
}

.theme-translucent .core-cap-a {
  left: 16px;
  top: 13px;
  width: 8px;
  height: 8px;
  box-shadow: none;
  background: rgba(66,128,145,.75);
}

.theme-translucent .core-cap-b {
  display: none;
}

.theme-translucent .translucent-print {
  display: none;
}

.theme-translucent .case-footer-labels {
  color: #5a7074;
}

.theme-translucent .case-footer-labels span:nth-child(2) {
  color: #4a92a7;
}

.theme-translucent .case-micro-notes {
  color: #6f8d96;
  opacity: .68;
}

.theme-translucent .case-micro-notes span:nth-child(2) {
  color: #4a92a7;
}

.theme-translucent .analog-progress-fill {
  fill: #4a92a7;
}

.theme-translucent .analog-mini-label {
  fill: #5e8e96;
}

/* ensure v0.91 details fit on small phones */
@media (max-width: 620px) {
  .theme-retro .case-brand-row::after {
    top: -9px;
    font-size: 7px;
    letter-spacing: .12em;
  }

  .theme-translucent .watch-case::before {
    width: 28%;
  }

  .theme-translucent .translucent-core {
    left: 22px;
    right: 22px;
    height: 52px;
  }

  .theme-translucent .translucent-core::before,
  .theme-translucent .translucent-core::after {
    width: 40px;
    height: 24px;
  }

  .theme-translucent .core-chip-a {
    width: 60px;
  }
}


/* =========================
   v0.92 love-and-layout pass
   ========================= */
.case-footer-labels,
.case-micro-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.case-footer-labels span,
.case-micro-notes span {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-footer-labels {
  gap: 6px;
}

.case-micro-notes {
  gap: 6px;
}

.analog-progress-track {
  fill: rgba(40,55,29,.16);
  stroke: rgba(27,39,20,.08);
}

.analog-progress-fill {
  transition: width .18s linear;
}

.analog-progress-dot {
  fill: #40512b;
  transition: cx .18s linear;
}

.analog-lcd-box {
  fill: #b9bf76;
  stroke: #1e2718;
  stroke-width: 3;
}


.analog-mini-label { font-size: 7px; }
.analog-lcd-time { font-size: 14px; }

.theme-retro .analog-progress-dot {
  fill: #6f95d6;
}

.theme-lcd .analog-progress-dot {
  fill: #8e70a2;
}

.theme-translucent .analog-progress-dot {
  fill: #59a6c4;
}

/* analog label box precise geometry in SVG (overrides attribute defaults visually) */
#analogSvg .analog-lcd-layer {
  transform: translateY(4px);
}

.theme-lcd .case-footer-labels,
.theme-lcd .case-micro-notes {
  color: #54564c;
}

.theme-lcd .case-footer-labels span:nth-child(2),
.theme-lcd .case-micro-notes span:nth-child(2) {
  color: var(--v091-plum-main);
}

.theme-lcd .case-footer-labels span:nth-child(3) {
  color: #464941;
}

.theme-lcd .case-micro-notes span:nth-child(3) {
  color: #464941;
}

/* richer retro watch details */
.theme-retro .case-brand-row::after {
  content: "10  20  30  40  50  60 SEC";
}

.theme-retro .watch-case::before,
.theme-retro .watch-case::after {
  top: 17px;
}

.theme-retro .watch-case {
  border-radius: 50px 50px 40px 40px;
}

/* iMac-inspired aqua theme */
.theme-translucent {
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), transparent 26%),
    linear-gradient(145deg, #a6dcec, #7ec2dd 58%, #65abc9);
  color: #375158;
  border-color: #7fa2aa;
}

.theme-translucent .chip.is-active {
  background: linear-gradient(180deg, #8fd2e8, #57abc6);
  color: #f9fffe;
  border-color: #5e9bb0;
}

.theme-translucent .watch-case {
  overflow: hidden;
  border-color: #99a9ad;
  border-radius: 64px 64px 42px 42px;
  background:
    radial-gradient(circle at 28% 10%, rgba(255,255,255,.72), transparent 16%),
    linear-gradient(90deg,
      rgba(240,242,238,.97) 0 58%,
      rgba(227,234,233,.96) 58% 68%,
      rgba(117,198,226,.90) 68% 100%),
    linear-gradient(180deg, rgba(252,252,248,.98), rgba(226,229,224,.96));
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.84),
    inset 0 0 0 11px rgba(201,207,201,.25),
    0 11px 22px rgba(55,94,103,.20);
}

.theme-translucent .watch-case::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 68%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0) 0 8px,
      rgba(213,215,209,.82) 8px 9px,
      rgba(245,246,243,.94) 9px 11px,
      rgba(203,207,201,.78) 11px 12px,
      rgba(255,255,255,0) 12px 16px);
  opacity: .55;
  pointer-events: none;
}

.theme-translucent .watch-case::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -2%;
  top: 7%;
  width: 38%;
  height: 78%;
  border-radius: 38px 60px 48px 36px;
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.36), transparent 13%),
    linear-gradient(180deg, rgba(120,208,239,.95), rgba(50,123,160,.94));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset -18px 0 26px rgba(14,67,97,.25),
    inset 12px 0 18px rgba(255,255,255,.08);
}

.theme-translucent .case-brand-row,
.theme-translucent .visual-panels,
.theme-translucent .case-footer-labels,
.theme-translucent .case-micro-notes {
  position: relative;
  z-index: 3;
}

.theme-translucent .case-brand-row {
  margin: 2px 6px 12px;
  color: #6a7779;
}

.theme-translucent .case-brand::after {
  content: " / AQUA POP";
  margin-left: 7px;
  color: #4698b7;
  font-size: .48em;
}

.theme-translucent .case-small {
  color: #789197;
}

.theme-translucent .digital-panel,
.theme-translucent .analog-panel {
  position: relative;
  border-radius: 20px;
}

.theme-translucent .digital-panel {
  --lcd-bg: #caece8;
  --lcd-ink: #274449;
  --lcd-off: rgba(39,68,73,.08);
  --lcd-after: rgba(39,68,73,.35);
  --lcd-grid: rgba(39,68,73,.012);
  margin: 0 auto;
  width: 88%;
  border: 4px solid #5f6665;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 14%),
    radial-gradient(circle at 75% 16%, rgba(255,255,255,.18), transparent 20%),
    var(--lcd-bg);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.15),
    inset 0 0 0 10px rgba(45,58,60,.12),
    inset 0 0 26px rgba(33,78,80,.08),
    0 2px 5px rgba(79,122,132,.08);
}

.theme-translucent .analog-panel {
  width: 88%;
  margin: 0 auto;
}

.theme-translucent .dial-outer { fill: #88c7da; }
.theme-translucent .dial-inner { fill: #f6f7f2; }
.theme-translucent .tick-major { stroke: #273a42; }
.theme-translucent .tick-minor { stroke: #72858a; }
.theme-translucent .dial-brand { fill: #4d646a; }
.theme-translucent .dial-sub { fill: #86989d; }

.theme-translucent .translucent-core {
  display: block;
  position: absolute;
  inset: auto 0 20px 0;
  height: 54px;
  z-index: 2;
  pointer-events: none;
}

.theme-translucent .translucent-core::before,
.theme-translucent .translucent-core::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 38px;
  height: 28px;
  border-radius: 13px;
  background:
    radial-gradient(circle, rgba(44,120,150,.35) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(85,180,207,.58), rgba(45,117,146,.78));
  background-size: 6px 6px, auto;
  background-position: center center;
  border: 1px solid rgba(70,140,164,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.theme-translucent .translucent-core::before { left: 26px; }
.theme-translucent .translucent-core::after { right: 26px; }

.theme-translucent .core-chip-a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: 66px;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(208,214,214,.86), rgba(165,174,176,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

.theme-translucent .core-chip-b {
  position: absolute;
  right: 78px;
  bottom: 18px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.52), transparent 24%), rgba(170,182,184,.86);
  border: 1px solid rgba(112,128,131,.5);
}

.theme-translucent .core-cap-a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 29px;
  width: 8px;
  height: 3px;
  background: rgba(56,145,183,.82);
  border-radius: 99px;
}

.theme-translucent .core-cap-b { display: none; }
.theme-translucent .translucent-print { display: none; }

.theme-translucent .case-footer-labels {
  color: #6d7d81;
  margin-top: 10px;
}

.theme-translucent .case-footer-labels span:nth-child(2),
.theme-translucent .case-micro-notes span:nth-child(2) {
  color: #4f95ac;
}

.theme-translucent .case-micro-notes {
  color: #7f9196;
}

/* layout love for narrow phones */
@media (max-width: 620px) {
  .switch-area {
    gap: 7px;
  }

  .chip-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
  }

  .chip-label {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .chip {
    min-width: 0;
    font-size: 10px;
    padding: 7px 8px;
  }

  .watch-case {
    width: min(100%, 470px);
    min-width: 0;
  }

  .case-footer-labels,
  .case-micro-notes {
    font-size: 7px;
    gap: 4px;
    margin-left: 6px;
    margin-right: 6px;
  }

  .theme-translucent .digital-panel,
  .theme-translucent .analog-panel {
    width: 92%;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .chip-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chip-label {
    grid-column: 1 / -1;
  }

  .chip {
    font-size: 8px;
    padding: 5px 6px;
  }

  .case-footer-labels,
  .case-micro-notes {
    font-size: 5.8px;
    gap: 3px;
    margin-left: 3px;
    margin-right: 3px;
  }

  .theme-retro .case-brand-row::after {
    font-size: 6px;
    top: -8px;
    right: 3px;
  }

  .watch-case.mode-dual .visual-panels {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
    gap: 2px;
  }

  .watch-case.mode-dual .digital-panel {
    min-height: 101px;
    padding: 5px 3px;
  }

  .watch-case.mode-dual .segment-display {
    --digit-w: 17px;
    --digit-h: 34px;
    --seg-t: 3.8px;
    --seg-gap: 1px;
  }

  .watch-case.mode-dual .segment-colon {
    flex-basis: 3px;
    width: 3px;
  }

  .watch-case.mode-dual .segment-colon::before,
  .watch-case.mode-dual .segment-colon::after {
    width: 3px;
    height: 3px;
  }

  .watch-case.mode-dual #analogSvg {
    width: min(100%, 144px);
  }

  .watch-case.mode-dual .analog-lcd-time {
    font-size: 11px;
    letter-spacing: -1px;
  }

  .watch-case.mode-dual .analog-mini-label {
    font-size: 5.6px;
  }

  .watch-case.mode-dual .digital-panel .lcd-mini,
  .watch-case.mode-dual .digital-panel .lcd-row,
  .watch-case.mode-dual .digital-panel .small-row {
    font-size: 5.5px;
  }

  .watch-case.mode-analog .visual-panels {
    display: block;
  }

  .watch-case.mode-analog #analogSvg {
    width: min(100%, 250px);
  }

  .editor-row {
    gap: 6px;
  }

  .watch-status {
    font-size: 8px;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 620px) and (max-height: 720px) {
    .watch-case.mode-dual #analogSvg { width: min(100%, 140px); }
  }
}


/* =========================
   v0.93 composition pass
   ========================= */
html, body {
  overflow-x: hidden;
}

.app-shell,
.screen,
.watch-screen {
  overflow-x: clip;
}

.topbar,
.watch-machine,
.switch-area,
.chip-group,
.watch-case,
.case-brand-row,
.visual-panels,
.editor-row,
.name-editor {
  min-width: 0;
  max-width: 100%;
}

.topbar-note {
  min-width: 0;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-machine {
  overflow: hidden;
}

.machine-header h2,
.case-brand,
.case-small {
  min-width: 0;
}

.case-brand-row {
  gap: 8px;
  flex-wrap: wrap;
}

.case-small {
  margin-left: auto;
}

.chip-group {
  width: 100%;
}

.chip {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}

.watch-case {
  padding-bottom: 18px;
}

.case-footer-labels,
.case-micro-notes {
  line-height: 1.08;
}

.case-footer-labels {
  margin-top: 12px;
}

.case-micro-notes {
  margin-top: 8px;
}

#analogSvg .analog-lcd-layer {
  transform: none;
}

/* --- GB LCD: more reddish-magenta, less overlap, more intentional color placement --- */
:root {
  --gb-purple: #8d4f88;
  --gb-purple-soft: #b58db4;
  --gb-purple-deep: #6f416e;
  --gb-purple-line: #a45d93;
}

.theme-lcd .chip.is-active {
  background: linear-gradient(180deg, #bea8c8, #9f7dac);
  color: #faf7ff;
  border-color: #7f5b89;
}

.theme-lcd .case-brand-row {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 4px solid var(--gb-purple-line);
  box-shadow: 0 3px 0 rgba(141,79,136,.16);
}

.theme-lcd .case-brand::after {
  color: #9f62a1;
}

.theme-lcd .case-footer-labels,
.theme-lcd .case-micro-notes {
  color: #61655a;
}

.theme-lcd .case-footer-labels span:nth-child(2),
.theme-lcd .case-micro-notes span:nth-child(2) {
  color: #98548c;
  font-weight: 900;
}

.theme-lcd .case-footer-labels span:nth-child(3),
.theme-lcd .case-micro-notes span:nth-child(3) {
  color: #63655c;
}

.theme-lcd .case-footer-labels {
  margin-top: 15px;
}

.theme-lcd .case-micro-notes {
  margin-top: 7px;
  font-size: 7px;
}

.theme-lcd .watch-case::after {
  content: "A  B";
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: #98548c;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .34em;
  opacity: .78;
}

.theme-lcd .watch-case::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 60px;
  height: 6px;
  background: linear-gradient(90deg, #c3c6bb 0 75%, #98548c 75% 100%);
  border-radius: 99px;
  opacity: .9;
}

/* --- AQUA POP reset: rebuild from philosophy, simpler and friendlier --- */
.theme-translucent {
  background:
    radial-gradient(circle at 18% 5%, rgba(255,255,255,.55), transparent 22%),
    linear-gradient(180deg, #f0efea, #d8d6cf);
  color: #315059;
  border-color: #7f9499;
}

.theme-translucent .chip.is-active {
  background: linear-gradient(180deg, #8ad2ea, #5baecc);
  color: #f7ffff;
  border-color: #6f9daa;
}

.theme-translucent .watch-case {
  border-color: #6f7a7d;
  border-radius: 60px 60px 44px 44px;
  background:
    linear-gradient(90deg,
      #f0f1ec 0 64%,
      #ecefe9 64% 70%,
      #78c4e0 70% 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.72),
    inset 0 0 0 10px rgba(151,159,160,.18),
    0 12px 18px rgba(77,95,99,.18);
}

.theme-translucent .watch-case::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 66%;
  border-radius: 50px 0 0 38px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), transparent 18%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0) 0 8px,
      rgba(205,210,208,.92) 8px 9px,
      rgba(243,244,240,.95) 9px 12px,
      rgba(214,217,212,.84) 12px 13px,
      rgba(255,255,255,0) 13px 16px);
  opacity: .62;
  pointer-events: none;
}

.theme-translucent .watch-case::after {
  content: "";
  position: absolute;
  right: -3%;
  top: 5%;
  width: 39%;
  height: 83%;
  border-radius: 52px 72px 58px 40px;
  background:
    radial-gradient(circle at 22% 13%, rgba(255,255,255,.46), transparent 14%),
    linear-gradient(180deg, rgba(142,223,247,.98), rgba(74,152,191,.98));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset -15px 0 25px rgba(16,73,109,.22),
    inset 14px 0 14px rgba(255,255,255,.10);
  pointer-events: none;
}

.theme-translucent .case-brand-row,
.theme-translucent .visual-panels,
.theme-translucent .case-footer-labels,
.theme-translucent .case-micro-notes {
  position: relative;
  z-index: 2;
}

.theme-translucent .case-brand-row {
  margin: 3px 10px 14px;
  color: #6d7f82;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(112,140,147,.34);
}

.theme-translucent .case-brand::after {
  content: " / AQUA POP";
  margin-left: 7px;
  color: #4d9dbf;
  font-size: .48em;
}

.theme-translucent .case-small {
  color: #89a5ab;
}

.theme-translucent .digital-panel,
.theme-translucent .analog-panel {
  position: relative;
  width: 84%;
  margin: 0 auto;
}

.theme-translucent .digital-panel {
  --lcd-bg: #d7f0ee;
  --lcd-ink: #27484d;
  --lcd-off: rgba(39,72,77,.085);
  --lcd-after: rgba(39,72,77,.33);
  --lcd-grid: rgba(39,72,77,.012);
  border: 4px solid #647071;
  border-radius: 26px 26px 20px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), transparent 16%),
    linear-gradient(180deg, rgba(62,77,79,.07), transparent 22%),
    var(--lcd-bg);
  box-shadow:
    inset 0 0 0 7px rgba(243,244,239,.78),
    inset 0 0 0 16px rgba(84,99,100,.14),
    inset 0 0 24px rgba(71,133,136,.06);
}

.theme-translucent .analog-panel {
  width: 82%;
}

.theme-translucent .dial-outer { fill: #8ac6d7; }
.theme-translucent .dial-inner { fill: #f5f5f0; }
.theme-translucent .tick-major { stroke: #294148; }
.theme-translucent .tick-minor { stroke: #7a8e93; }
.theme-translucent .dial-brand { fill: #597178; }
.theme-translucent .dial-sub { fill: #91a3a7; }
.theme-translucent .analog-lcd-box { fill: #d7f0ee; stroke: #4f666a; }
.theme-translucent .analog-progress-fill { fill: #5eb1cf; }
.theme-translucent .analog-progress-dot { fill: #5eb1cf; }
.theme-translucent .analog-mini-label { fill: #6d8d94; }
.theme-translucent .analog-lcd-time { fill: #29484e; }

.theme-translucent .translucent-core {
  display: block;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 44px;
  pointer-events: none;
}

.theme-translucent .core-chip,
.theme-translucent .core-cap {
  display: none;
}

.theme-translucent .translucent-core::before,
.theme-translucent .translucent-core::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 27px;
  border-radius: 13px;
  background:
    radial-gradient(circle, rgba(43,120,151,.40) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(115,198,225,.64), rgba(57,127,160,.88));
  background-size: 6px 6px, auto;
  border: 1px solid rgba(83,149,174,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}

.theme-translucent .translucent-core::before { left: 24px; }
.theme-translucent .translucent-core::after { right: 24px; }

.theme-translucent .translucent-print {
  display: block;
  position: absolute;
  inset: auto 0 14px 0;
  z-index: 2;
  pointer-events: none;
  color: #7d969c;
  font-size: 8px;
  font-weight: 900;
}

.theme-translucent .print-1,
.theme-translucent .print-2,
.theme-translucent .print-3,
.theme-translucent .print-4,
.theme-translucent .print-5 {
  position: absolute;
  opacity: .72;
}

.theme-translucent .print-1 { left: 28px; bottom: 41px; }
.theme-translucent .print-2 { left: 48px; bottom: 16px; }
.theme-translucent .print-3 { right: 54px; bottom: 20px; }
.theme-translucent .print-4 { right: 28px; bottom: 39px; }
.theme-translucent .print-5 { right: 46px; bottom: 44px; color: #4ea9ca; }

.theme-translucent .case-footer-labels,
.theme-translucent .case-micro-notes {
  color: #72868b;
}

.theme-translucent .case-footer-labels span:nth-child(2),
.theme-translucent .case-micro-notes span:nth-child(2) {
  color: #51a0c0;
}

/* narrow phones: reduce overflow pressure further */
@media (max-width: 620px) {
  .topbar {
    gap: 8px;
  }

  .topbar-note {
    max-width: 46%;
    font-size: 9px;
  }

  .switch-area {
    gap: 6px;
  }

  .chip-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .chip-label {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .chip {
    font-size: 9px;
    padding: 6px 6px;
  }

  .watch-machine {
    padding-left: 10px;
    padding-right: 10px;
  }

  .watch-case {
    width: min(100%, 440px);
    padding: 14px 10px 14px;
  }

  .case-brand {
    font-size: 15px;
  }

  .case-small {
    font-size: 8px;
  }

  .case-footer-labels {
    margin-top: 10px;
    font-size: 6px;
  }

  .case-micro-notes {
    margin-top: 6px;
    font-size: 5.5px;
  }

  .theme-translucent .digital-panel,
  .theme-translucent .analog-panel {
    width: 88%;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .topbar-note {
    max-width: 42%;
    font-size: 8px;
  }

  .chip-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .chip {
    font-size: 7px;
    padding: 4px 4px;
  }

  .watch-machine {
    padding: 8px 8px 9px;
  }

  .watch-case {
    width: min(100%, 420px);
    min-width: 0;
    padding: 12px 8px 12px;
  }

  .case-brand-row {
    margin: 2px 3px 5px;
    gap: 4px;
  }

  .case-brand {
    font-size: 13px;
  }

  .case-small {
    font-size: 7px;
  }

  .watch-case.mode-dual .visual-panels {
    grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
  }

  .watch-case.mode-dual .segment-display {
    --digit-w: 15.8px;
    --digit-h: 31.5px;
    --seg-t: 3.5px;
    --seg-gap: 1px;
  }

  .watch-case.mode-dual .segment-colon {
    flex-basis: 2.8px;
    width: 2.8px;
  }

  .watch-case.mode-dual .segment-colon::before,
  .watch-case.mode-dual .segment-colon::after {
    width: 2.8px;
    height: 2.8px;
  }

  .watch-case.mode-dual #analogSvg {
    width: min(100%, 134px);
  }

  .watch-case.mode-dual .analog-lcd-time {
    font-size: 10px;
    letter-spacing: -1px;
  }

  .watch-case.mode-dual .analog-mini-label {
    font-size: 5px;
  }

  .watch-case.mode-dual .case-footer-labels {
    font-size: 5px;
  }

  .watch-case.mode-dual .case-micro-notes {
    font-size: 4.6px;
  }

  .theme-lcd .case-micro-notes span:nth-child(2) {
    font-size: 4.9px;
    letter-spacing: .04em;
  }

  .theme-retro .case-brand-row::after {
    top: -7px;
    right: 2px;
    font-size: 5px;
  }

  .theme-translucent .digital-panel,
  .theme-translucent .analog-panel {
    width: 90%;
  }
}


/* v0.98: AQUA POP has been removed from the product UI.
   The v0.93 Retro Watch / GB LCD styling above is intentionally left unchanged. */