/* 멍 골목 — the street fills the screen in whole pixels; the few controls stay out of the way. */
/* One look whatever the viewer's theme: a dark frame around the street, lamplight for the controls. */
:root {
  color-scheme: dark;
  --night: #05070d;
  --ink: #f4e4c4;
  --ink-dim: rgba(244, 228, 196, 0.62);
  --plate: rgba(8, 10, 18, 0.58);
  --plate-hi: rgba(28, 30, 44, 0.78);
  --edge: rgba(244, 228, 196, 0.16);
  --lamp: #ffb35c;
}

[hidden] { display: none !important; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night);
}
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body.still { cursor: none; }

#street {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* ---------- the controls: appear on a touch or a move, then step back ---------- */
#ui {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  font-family: "DotGothic16", ui-monospace, monospace;
  color: var(--ink);
}
body.awake #ui {
  opacity: 1;
  transform: none;
  transition-duration: 0.35s;
}
body.awake #tools { pointer-events: auto; }

#when {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px 8px;
  background: var(--plate);
  border: 1px solid var(--edge);
  border-radius: 3px;
  font-size: 15px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
#when-note { color: var(--ink-dim); font-size: 13px; }
#when-note:empty { display: none; }
body.no-clock #when { visibility: hidden; }

#tools,
#places {
  display: flex;
  gap: 6px;
}
#places {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  background: var(--plate);
  border: 1px solid var(--edge);
  border-radius: 3px;
}
body.awake #places { pointer-events: auto; }
#places button {
  appearance: none;
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
#places button:hover { color: var(--ink); background: var(--plate-hi); }
#places button[aria-current="true"] {
  color: var(--night);
  background: var(--lamp);
}
#places button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; }
#tools button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  justify-content: center;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--plate);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
#tools button:hover { background: var(--plate-hi); }
#tools button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
#tools svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
#speed-label:empty { display: none; }

/* weather icon: one glyph per mode */
#b-weather .ic-rain,
#b-weather .ic-clear { display: none; }
#b-weather[data-mode="rain"] .ic-auto,
#b-weather[data-mode="clear"] .ic-auto { display: none; }
#b-weather[data-mode="rain"] .ic-rain { display: inline; }
#b-weather[data-mode="clear"] .ic-clear { display: inline; }
#b-weather[data-mode="rain"],
#b-weather[data-mode="clear"],
#b-speed[data-on="true"],
#b-sound[aria-pressed="true"] { color: var(--lamp); }

#b-sound .ic-on { display: none; }
#b-sound[aria-pressed="true"] .ic-on { display: inline; }
#b-sound[aria-pressed="true"] .ic-off { display: none; }

@media (max-width: 860px) {
  #ui { flex-direction: column; align-items: stretch; gap: 8px; }
  #when { align-self: flex-start; }
  #places { align-self: stretch; }
  #tools { justify-content: flex-end; }
}
@media (max-width: 420px) {
  #places button { padding: 0 7px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #ui, body.awake #ui { transition: none; transform: none; }
}

/* ---------- the ad schedule (A): what is on air, and when the rest will be ---------- */
#adsheet {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  max-width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 10px 14px 12px;
  background: rgba(8, 10, 18, 0.86);
  border: 1px solid var(--edge);
  border-radius: 3px;
  color: var(--ink);
  font: 13px/1.5 "DotGothic16", ui-monospace, monospace;
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
}
#adsheet[hidden] { display: none; }
#adsheet header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
#adsheet header span, #adsheet footer, #adsheet small, #adsheet i { color: var(--ink-dim); font-style: normal; }
#adsheet p { margin: 4px 0; color: var(--ink-dim); }
#adsheet ul { list-style: none; margin: 0 0 8px; padding: 0; }
#adsheet li span { color: var(--ink-dim); margin-right: 8px; }
#adsheet b { color: var(--lamp); font-weight: normal; }
#adsheet table { border-collapse: collapse; width: 100%; white-space: nowrap; }
#adsheet th { text-align: left; font-weight: normal; color: var(--ink-dim); border-bottom: 1px solid var(--edge); padding: 3px 10px 3px 0; }
#adsheet td { padding: 3px 10px 3px 0; border-bottom: 1px solid rgba(244, 228, 196, 0.06); }
#adsheet tr.on td:first-child { color: var(--lamp); }
#adsheet footer { margin-top: 8px; font-size: 12px; }
#adsheet button {
  appearance: none;
  margin-left: 8px;
  padding: 0 8px;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: transparent;
  color: var(--lamp);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#adsheet button:hover { background: var(--plate-hi); }