:root {
  --panel-bg: #15171a;
  --panel-edge: #2a2d32;
  --cell-off: #232629;
  --time-color: #ff8a3d;
  --date-color: #5ec8ff;
  --temp-color: #6fe07a;
  --rain-color: #c9a6ff;
  --label-color: #6b7178;
  --bg: #0a0b0d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.03), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.02), transparent 50%);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Wall: free-placement canvas. Clock cards are absolutely positioned. */
.wall {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ===== Clock card ===== */
.clock-frame {
  position: absolute;
  transform-origin: top left;
  background: linear-gradient(160deg, #1c1f23, #101214);
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 40px);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 2px 0 rgba(255,255,255,0.04) inset,
    0 -2px 0 rgba(0,0,0,0.5) inset;
  border: 1px solid #2a2d32;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 24px);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  cursor: grab;
  transition: box-shadow 0.2s ease;
}
.clock-frame.dragging {
  cursor: grabbing;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.7),
    0 2px 0 rgba(255,255,255,0.04) inset;
  opacity: 0.92;
}
body.edit-mode .clock-frame {
  box-shadow:
    0 0 0 2px rgba(94,200,255,0.3),
    0 30px 80px rgba(0,0,0,0.6);
}
body.edit-mode .clock-frame.selected {
  box-shadow:
    0 0 0 2px rgba(42,109,240,0.9),
    0 0 28px 6px rgba(42,109,240,0.22),
    0 30px 80px rgba(0,0,0,0.6);
}

/* ===== Resize handles ===== */
/* Appear on hover in display mode; always visible in edit mode */
.resize-handle {
  position: absolute;
  z-index: 20;
  background: rgba(94, 200, 255, 0.55);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: auto;
}
.clock-frame:hover .resize-handle { opacity: 0.4; }
body.edit-mode .resize-handle { opacity: 0.55; }
.resize-handle:hover { opacity: 1 !important; }

/* Corner handles — 24×24 px squares */
.rh-nw { top: -12px; left: -12px; width: 24px; height: 24px; cursor: nw-resize; }
.rh-ne { top: -12px; right: -12px; width: 24px; height: 24px; cursor: ne-resize; }
.rh-sw { bottom: -12px; left: -12px; width: 24px; height: 24px; cursor: sw-resize; }
.rh-se { bottom: -12px; right: -12px; width: 24px; height: 24px; cursor: se-resize; }

/* Side handles — wide bars on left/right/top/bottom */
.rh-w { top: 50%; left: -8px; transform: translateY(-50%); width: 14px; height: 56px; border-radius: 7px; cursor: w-resize; }
.rh-e { top: 50%; right: -8px; transform: translateY(-50%); width: 14px; height: 56px; border-radius: 7px; cursor: e-resize; }
.rh-n { left: 50%; top: -8px; transform: translateX(-50%); height: 14px; width: 56px; border-radius: 7px; cursor: n-resize; }
.rh-s { left: 50%; bottom: -8px; transform: translateX(-50%); height: 14px; width: 56px; border-radius: 7px; cursor: s-resize; }

/* Delete button — top-left, edit mode only */
.loc-delete-btn {
  display: none;
  position: absolute;
  top: -10px; left: -10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  border: 2px solid #0a0b0d;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0; z-index: 30;
}
body.edit-mode .loc-delete-btn { display: flex; }
.loc-delete-btn:hover { background: #e74c3c; }

/* ===== Identify blink ===== */
.identify-target {
  position: relative;
  border-radius: 10px;
  transition: box-shadow 0.2s ease;
}
.identify-target.identifying {
  animation: identify-pulse 0.9s ease-in-out infinite;
}
@keyframes identify-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,138,61,0); }
  50%      { box-shadow: 0 0 0 3px rgba(255,138,61,0.95), 0 0 22px 4px rgba(255,138,61,0.55); }
}

/* ===== Location label (full-width, above content row) ===== */
.location-label-row {
  display: flex; align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
}

/* ===== Content row: time + SDs side-by-side; wraps when card is narrow ===== */
.clock-content-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(6px, 1vw, 16px);
}

/* ===== Location block (wraps the time row) ===== */
.location-block {
  flex: 0 0 auto;
}
.location-name {
  color: var(--label-color);
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}
.location-tz {
  color: var(--label-color);
  font-size: clamp(9px, 0.85vw, 12px);
  letter-spacing: 0.08em; opacity: 0.7;
}

/* ===== Time row ===== */
.time-row {
  display: flex; align-items: center;
  gap: clamp(6px, 1.1vw, 18px);
}

/* ===== Digit groups ===== */
.digit-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3px, 0.4vw, 7px);
  background: var(--panel-bg);
  padding: clamp(5px, 0.7vw, 10px);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 -1px 4px rgba(0,0,0,0.5) inset;
  border: 1px solid var(--panel-edge);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.digit-group:hover  { border-color: #555a61; }
.digit-group:active { transform: scale(0.97); }
.digit-group.popup-open { border-color: #888e94; }
.digit-group.two-col { grid-template-columns: repeat(2,1fr); }

/* AM/PM and always-lit single-pixel groups */
.ampm-group {
  grid-template-columns: 1fr;
  align-self: center;
}
/* Decimal dot sits at the bottom of the row (looks like a period) */
.decimal-dot {
  align-self: flex-end;
  margin-bottom: clamp(5px, 0.7vw, 10px);
}

/* ===== Color popup ===== */
.color-popup {
  position: fixed;
  background: #1c1f23; border: 1px solid #34373c; border-radius: 10px;
  padding: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  z-index: 200; display: none; flex-direction: column; gap: 10px; min-width: 180px;
}
.color-popup.open { display: flex; }
.color-popup-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #d8dadc; font-weight: 600; }
.color-popup-row { display: flex; align-items: center; gap: 10px; }
.color-popup-row input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid #34373c; border-radius: 6px; background: none; cursor: pointer; }
.color-popup-row .hex-readout { font-size: 12px; color: #aab0b6; font-family: Consolas, monospace; }
.color-popup-close { align-self: flex-end; background: #25282d; color: #aab0b6; border: 1px solid #34373c; border-radius: 6px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
.color-popup-close:hover { background: #2c2f34; }
.color-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 199; display: none; }
.color-popup-overlay.open { display: block; }

/* ===== Dots ===== */
.dot {
  width: clamp(9px, 1.4vw, 22px);
  height: clamp(9px, 1.4vw, 22px);
  border-radius: 4px;
  background: var(--cell-off);
  box-shadow: 0 1px 1px rgba(0,0,0,0.6) inset, 0 1px 0 rgba(255,255,255,0.02);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.dot.lit {
  background: var(--dot-color, var(--time-color));
  box-shadow:
    0 0 6px 1px var(--dot-color, var(--time-color)),
    0 0 14px 3px color-mix(in srgb, var(--dot-color, var(--time-color)) 60%, transparent),
    0 1px 0 rgba(255,255,255,0.25) inset;
}
.colon {
  color: var(--label-color);
  font-size: clamp(16px, 2vw, 30px);
  font-weight: 700; opacity: 0.4; align-self: center;
}
/* "/" separator in the Date SD — same visual weight as .colon but smaller */
.date-sep {
  color: var(--label-color);
  font-size: clamp(12px, 1.4vw, 22px);
  font-weight: 700; opacity: 0.4; align-self: center;
}

/* ===== SD row ===== */
/* flex: 1 1 auto + min-width:0 — on its own wrapped line the sd-row fills
   the full card width AND can shrink below its natural size, so the
   individual sd-blocks reflow/wrap instead of overflowing the card border. */
.sd-row { display: flex; gap: clamp(6px, 1vw, 16px); flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.sd-block {
  display: flex; flex-direction: column;
  gap: clamp(3px, 0.5vh, 7px);
  padding: clamp(5px, 0.7vw, 9px) clamp(6px, 0.9vw, 11px);
  border-radius: 8px;
}
.sd-title {
  color: var(--label-color);
  font-size: clamp(8px, 0.75vw, 10px);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.sd-digits { display: flex; gap: clamp(3px, 0.5vw, 9px); align-items: flex-end; }

/* ===== Border labels ===== */
.border-label {
  position: absolute; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #555a61;
  background: #0e1012; padding: 2px 6px; border-radius: 3px;
  border: 1px solid #24272b; pointer-events: none;
}
.border-label.top    { top:-9px; left:14px; }
.border-label.bottom { bottom:-9px; left:14px; }
.border-label.left   { top:14px; left:-9px; writing-mode:vertical-rl; transform:rotate(180deg); }
.border-label.right  { top:14px; right:-9px; writing-mode:vertical-rl; }

/* ===== Edit bar ===== */
.edit-bar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 14px;
  background: rgba(20,22,25,0.95); border: 1px solid #34373c;
  border-radius: 10px; padding: 8px 10px 8px 16px;
  z-index: 300; box-shadow: 0 12px 32px rgba(0,0,0,0.5); backdrop-filter: blur(6px);
}
body.edit-mode .edit-bar { display: flex; }
.edit-bar-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9fb6c4; font-weight: 600; }
.edit-done { background: #2a6df0; color: #fff; border: none; border-radius: 6px; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; }
.edit-done:hover { background: #3b7bf5; }

/* ===== Edit panel ===== */
.edit-panel {
  position: fixed; top: 64px; right: 16px;
  display: none;
  background: rgba(20,22,25,0.95); border: 1px solid #34373c;
  border-radius: 10px; padding: 14px 16px;
  z-index: 300; min-width: 210px;
  max-height: calc(100vh - 80px); overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); backdrop-filter: blur(6px);
}
body.edit-mode .edit-panel { display: block; }

.edit-panel-title {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #9fb6c4; font-weight: 600; margin-bottom: 8px;
}
.edit-panel-section + .edit-panel-section {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #2a2d32;
}
.edit-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 6px 0; color: #d8dadc; font-size: 13px; cursor: pointer;
}
.edit-toggle input { width: 16px; height: 16px; cursor: pointer; accent-color: #2a6df0; }

.edit-input {
  width: 100%; background: #1c1f23; color: #d8dadc;
  border: 1px solid #34373c; border-radius: 6px;
  padding: 6px 8px; font-size: 12px; font-family: Consolas, monospace;
  margin-bottom: 6px; display: block;
}
.edit-input:last-child { margin-bottom: 0; }
.edit-input:focus { outline: none; border-color: #2a6df0; }

.edit-add-btn {
  width: 100%; background: #1c2d4a; color: #5ec8ff;
  border: 1px solid #2a4a6a; border-radius: 6px;
  padding: 7px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.edit-add-btn:hover { background: #1e3555; }

.edit-panel-hint {
  font-size: 11px; color: #888e94; line-height: 1.4;
  padding-top: 10px; margin-top: 10px; border-top: 1px solid #2a2d32;
}

/* ===== Scale slider ===== */
.scale-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.scale-row input[type="range"] {
  flex: 1; accent-color: #2a6df0; cursor: pointer;
}
#scaleVal {
  font-size: 11px; color: #9fb6c4; font-family: Consolas, monospace;
  width: 48px; text-align: right;
  background: #1a1d21; border: 1px solid #333; border-radius: 4px;
  padding: 2px 4px; -moz-appearance: textfield;
}
#scaleVal::-webkit-inner-spin-button,
#scaleVal::-webkit-outer-spin-button { opacity: 0.4; }

/* ===== °F/°C toggle ===== */
.unit-toggle-row { display: flex; gap: 6px; margin-bottom: 4px; }
.unit-btn {
  flex: 1; background: #1c1f23; color: #888e94;
  border: 1px solid #34373c; border-radius: 6px;
  padding: 6px 0; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.unit-btn:hover { background: #25282d; color: #d8dadc; }
.unit-btn.active { background: #1e3555; color: #5ec8ff; border-color: #2a4a6a; }

/* ===== City search dropdown ===== */
.city-search-wrap { position: relative; }
.city-search-input { margin-bottom: 0; }
.city-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #1c1f23; border: 1px solid #34373c; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55); z-index: 400;
  max-height: 240px; overflow-y: auto;
}
.city-dropdown.open { display: block; }
.city-option {
  padding: 9px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid #252830;
}
.city-option:last-child { border-bottom: none; }
.city-option:hover { background: #252830; }
.city-name { font-size: 13px; color: #e0e2e4; font-weight: 500; }
.city-meta { font-size: 11px; color: #6b7178; letter-spacing: 0.04em; }
.city-msg  { cursor: default; color: #888e94; font-size: 12px; font-style: italic; padding: 10px 12px; }
.city-msg:hover { background: none; }

/* ===== Dev controls ===== */
.dev-controls {
  position: fixed; bottom: 16px; left: 16px;
  background: rgba(20,22,25,0.92); border: 1px solid #2a2d32;
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; color: #aab0b6; backdrop-filter: blur(6px);
  z-index: 100; max-width: 200px;
}
.dev-controls h4 { margin: 0 0 2px 0; color: #e4e6e8; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.dev-controls button, .dev-controls select {
  background: #1c1f23; color: #d8dadc; border: 1px solid #34373c;
  border-radius: 6px; padding: 6px 8px; font-size: 12px; cursor: pointer;
}
.dev-controls button:hover { background: #25282d; }
.dev-controls label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-hint { font-size: 11px; color: #888e94; line-height: 1.4; border-top: 1px solid #2a2d32; padding-top: 8px; margin-top: 2px; }
.dev-toggle {
  position: fixed; bottom: 16px; left: 16px;
  background: #1c1f23; color: #aab0b6; border: 1px solid #2a2d32;
  border-radius: 8px; padding: 6px 10px; font-size: 11px; cursor: pointer; z-index: 101;
}