@font-face {
  font-family: 'Pretendard';
  src: url('../assets/fonts/PretendardVariable.woff2') format('woff2-variations'),
       url('../assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-display: swap;
}

:root {
  --bg: #05070f;
  --panel: rgba(14, 18, 34, 0.86);
  --panel-2: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 228, 196, 0.12);
  --text: #f3ece2;
  --muted: #b3acc4;
  --faint: #8a84a0;
  --accent: #ffb86b;
  --accent-2: #ff8f5a;
  --good: #8ee6b0;
  --paper: #f6efe1;
  --ink: #3b302c;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --radius: 16px;
}

/* (a tap on a phone or a tablet: no blue or grey flash over what was tapped; the scene is one big
   canvas, so the flash covered the whole screen) */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- stage */

#stage { position: fixed; inset: 0; overflow: hidden; -webkit-touch-callout: none; }
/* (the black bands round the place on an upright phone too: a pinch there must not zoom the page) */
#stage { touch-action: none; }
/* (no callout on a long press, no focus ring) */
#screen { position: absolute; display: block; image-rendering: auto; -webkit-touch-callout: none; outline: none; }
/* (a finger's pinch and drag on the place are the game's: zoom and look around, js/main.js) */
#screen { touch-action: none; }

.nametag {
  position: absolute;
  transform: translate(-50%, 0);
  padding: 1px 7px 2px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fffaf0;
  text-shadow: 0 0 2px #000, 0 1px 2px #000, 1px 0 1px #000, -1px 0 1px #000;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

.pettag { font-weight: 550; opacity: 0.9; padding: 0 5px 1px; }

/* a machine pet muttering: a small dark panel above its head, the words in its lamps' colour (--led) */
.petsay {
  position: absolute;
  transform: translate(-50%, -100%);
  max-width: min(300px, 70vw);
  padding: 5px 9px 6px;
  border-radius: 8px;
  background: rgba(10, 14, 28, 0.88);
  border: 1px solid color-mix(in srgb, var(--led, #5ee0ff) 55%, transparent);
  color: color-mix(in srgb, var(--led, #5ee0ff) 70%, #ffffff);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, 'D2Coding', 'Pretendard', monospace;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  box-shadow: 0 0 10px color-mix(in srgb, var(--led, #5ee0ff) 25%, transparent);
  pointer-events: none;
  z-index: 4;
  animation: petsay-in 0.18s ease-out;
}
.petsay::after {
  content: '';
  position: absolute; left: calc(50% + var(--tail, 0px)); bottom: -5px;
  width: 8px; height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(10, 14, 28, 0.88);
  border-right: 1px solid color-mix(in srgb, var(--led, #5ee0ff) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--led, #5ee0ff) 55%, transparent);
}
@keyframes petsay-in { from { opacity: 0; margin-top: 4px; } to { opacity: 1; margin-top: 0; } }

.hovertip {
  position: fixed;
  z-index: 30;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(10, 12, 24, 0.86);
  border: 1px solid var(--line);
  font-size: 13px;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(14px, 14px);
}
.hovertip b { color: var(--accent); font-weight: 650; margin-right: 6px; }

#markers { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.marker {
  position: absolute;
  width: 26px; height: 12px;
  margin: -6px 0 0 -13px;
  border: 2px solid rgba(255, 220, 170, 0.85);
  border-radius: 50%;
  animation: marker 0.7s ease-out forwards;
}
@keyframes marker { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* ---------------------------------------------------------------- buttons */

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s, border-color 0.18s;
}
.btn:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 228, 196, 0.25); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, #ffc27e, #ff9a5c);
  color: #2b1a10;
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(255, 140, 70, 0.32);
}
.btn.primary:hover { background: linear-gradient(180deg, #ffcd92, #ffa66c); }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 14px; font-size: 13px; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: default; }
.mini {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 8px;
  min-width: 30px; height: 30px;
  padding: 0 6px;
  cursor: pointer;
  font-size: 14px;
}
.mini:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------------------------------------------------------------- screens */

.screen { position: fixed; inset: 0; z-index: 10; }

#title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 7vh 16px 6vh;
  background: linear-gradient(180deg, rgba(4, 6, 16, 0.55) 0%, rgba(4, 6, 16, 0) 32%, rgba(4, 6, 16, 0) 62%, rgba(4, 6, 16, 0.6) 100%);
  animation: fadein 1.6s ease both;
}
.title-top { text-align: center; }
.title-en {
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 228, 196, 0.7);
  margin-bottom: 10px;
}
#title h1 {
  margin: 0;
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff6ea;
  text-shadow: 0 0 28px rgba(255, 170, 100, 0.45), 0 4px 18px rgba(0, 0, 0, 0.6);
}
.tagline { margin: 12px 0 0; color: rgba(243, 236, 226, 0.85); font-size: clamp(14px, 1.6vw, 17px); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.title-bottom { text-align: center; }
.menu { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.menu .btn { min-width: 150px; backdrop-filter: blur(6px); }
.hint { margin: 14px 0 0; font-size: 13px; color: rgba(243, 236, 226, 0.65); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* creator */
#creator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 6, 16, 0.45);
  animation: fadein 0.4s ease both;
}
.creator {
  width: min(1020px, 100%);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.creator header { padding: 20px 24px 8px; }
.creator h2 { margin: 0; font-size: 22px; font-weight: 750; }
.creator header p { margin: 6px 0 0; color: var(--muted); font-size: 14px; word-break: keep-all; }
.creator-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.25fr);
  gap: 18px;
  padding: 14px 24px;
  overflow: auto;
}
.creator footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--line);
}
.cands { display: flex; flex-direction: column; gap: 12px; }
.cand-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px;
  /* thirty ready-made friends: about two and a half rows show, the rest a scroll away */
  max-height: clamp(214px, calc(100vh - 560px), 340px); overflow-y: auto; padding: 2px 4px 2px 2px;
}
.cand {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 85%, rgba(255, 170, 100, 0.18), rgba(255, 255, 255, 0.03) 70%);
  padding: 8px 4px 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, transform 0.12s, background 0.2s;
}
.cand:hover { transform: translateY(-2px); border-color: rgba(255, 228, 196, 0.3); }
.cand.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cand canvas { display: block; margin: 0 auto; image-rendering: pixelated; width: 64px; height: 88px; }
/* the friend as it is now (changing the friend): first in the grid, marked */
.cand span { position: absolute; top: 4px; left: 6px; font-size: 11px; color: var(--accent); font-weight: 700; }

.editor { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#preview {
  width: 200px; height: 270px;
  image-rendering: pixelated;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #0c1124;
}
.preview-dirs { display: flex; gap: 8px; }
.edit-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.name-row { display: flex; align-items: center; gap: 8px; }
.name-row span { font-size: 13px; color: var(--muted); width: 66px; flex: none; }
.name-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  user-select: text;
}
.name-row input:focus { outline: none; border-color: var(--accent); }
.name-row input.need { border-color: #ff8f75; box-shadow: 0 0 0 1px #ff8f75 inset; }
.name-row .req { color: var(--accent); font-weight: 700; }
.name-hint { margin: -4px 0 0 74px; font-size: 12px; line-height: 1.4; color: var(--muted); word-break: keep-all; }
.name-hint:empty { display: none; }
.name-hint.warn { color: #ffab95; }
.parts { display: flex; flex-direction: column; gap: 5px; }
.part { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.part .lbl { width: 66px; flex: none; color: var(--muted); }
.part .val { flex: 1; min-width: 0; text-align: center; padding: 5px 4px; border-radius: 8px; background: var(--panel-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; }
.part .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; border: 1px solid rgba(255, 255, 255, 0.25); }
.part .mini { min-width: 28px; height: 28px; }
.part.dim { opacity: 0.38; }

/* the animal friend chooser */
.petpick { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.pp-head { display: flex; align-items: baseline; gap: 8px; }
.pp-head b { font-size: 15px; font-weight: 700; }
.pp-head small { color: var(--muted); font-size: 12px; }
.pp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-tabs button { flex: 1; }
.pet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px;
  /* as tall as the screen allows next to everything else (so the creator need not scroll), 2–3 rows */
  max-height: clamp(150px, calc(100vh - 635px), 300px); overflow-y: auto; padding: 2px 4px 2px 2px;
}
.pet {
  appearance: none; border: 1px solid var(--line); border-radius: 10px; padding: 5px 2px 4px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 170, 100, 0.14), rgba(255, 255, 255, 0.03) 70%);
  color: var(--text); text-align: center; transition: border-color 0.15s, transform 0.12s;
}
.pet:hover { transform: translateY(-1px); border-color: rgba(255, 228, 196, 0.3); }
.pet.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pet canvas { display: block; margin: 0 auto; width: 64px; height: 60px; image-rendering: pixelated; }
.pet span { display: block; font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the chosen one, big, under the friend's preview */
.pet-stage { width: 200px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
#pet-preview { width: 200px; height: 150px; image-rendering: pixelated; border-radius: 14px; border: 1px solid var(--line); background: #0c1124; cursor: pointer; }
#pet-preview.empty { cursor: default; }
.pet-text { font-size: 13px; line-height: 1.45; min-width: 0; }
.pet-text b { color: var(--accent); font-size: 15px; margin-right: 6px; }
.pet-text .br { color: var(--muted); font-size: 12px; }
.pet-text p { margin: 3px 0 4px; color: var(--text); }
.pet-text p.none { color: var(--muted); }
.pet-text .tags i { font-style: normal; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-right: 4px; white-space: nowrap; }

/* side panels */
.side {
  position: fixed;
  top: 64px;
  right: 14px;
  width: min(370px, calc(100vw - 28px));
  max-height: calc(100vh - 150px);
  overflow: auto;
  z-index: 20;
  padding: 18px 18px 16px;
  word-break: keep-all; overflow-wrap: break-word;   /* (Korean breaks between words: "버튼과", not "버튼 / 과") */
  animation: slidein 0.22s ease both;
}
@keyframes slidein { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.side h3 { margin: 0 0 12px; font-size: 17px; font-weight: 750; display: flex; align-items: center; justify-content: space-between; }
.side h4 { margin: 18px 0 8px; font-size: 13px; color: var(--accent); font-weight: 650; letter-spacing: 0.02em; }
.side .x { appearance: none; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 2px 6px; }
.row { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; }
.row > span:first-child { width: 92px; flex: none; color: var(--muted); }
.row input[type=range] { flex: 1; accent-color: var(--accent); }
.row .num { width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--faint); font-size: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.seg button.on { background: rgba(255, 184, 107, 0.2); border-color: var(--accent); color: #ffe2c2; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; font-size: 14px; cursor: pointer; }
.switch input { display: none; }
.switch i { width: 38px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, 0.14); position: relative; transition: background 0.2s; flex: none; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.switch input:checked + i { background: var(--accent-2); }
.switch input:checked + i::after { transform: translateX(16px); }
.note { font-size: 12px; color: var(--faint); line-height: 1.55; margin: 6px 0 0; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
.keys kbd { font: inherit; font-size: 12px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); white-space: nowrap; }
.side h5.helpsub { margin: 12px 0 6px; font-size: 12px; font-weight: 650; color: var(--muted); }

/* music panel */
.np { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--panel-2); }
.np .t { font-size: 17px; font-weight: 700; }
.np .s { font-size: 12px; color: var(--muted); }
.np .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 8px; }
.np .bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.np .ctl { display: flex; gap: 8px; margin-top: 10px; }
.tracks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tracks li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.tracks li:hover { background: var(--panel-2); }
.tracks li.on { background: rgba(255, 184, 107, 0.14); }
.tracks li b { font-weight: 600; font-size: 14px; }
.tracks li small { color: var(--faint); font-size: 12px; margin-left: auto; white-space: nowrap; }
.tracks li .tno { flex: none; width: 22px; text-align: right; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
/* the instruments and the day it was made, on a line of their own under the title (beside it they squeezed the
   titles into two or three lines; a long note wraps instead of widening the list) */
.tracks li b { flex: 1 1 auto; min-width: 0; }
.tracks li .meta { flex: 1 0 100%; padding-left: 32px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; }
.tracks li .meta small { margin-left: 0; white-space: normal; text-align: left; }
.tracks li .meta small.made { margin-left: auto; white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }
.tracks li .tseason { font-style: normal; font-size: 12px; margin-left: 3px; opacity: 0.85; }
/* favourites: the stars, and the row that picks what the playlist goes round */
.favrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.favrow small { color: var(--faint); font-size: 12px; }
.favrow .seg button:disabled { opacity: 0.45; cursor: default; }
.tracks li .star { flex: none; width: 26px; height: 26px; margin: -4px -6px -4px -4px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--faint); font-size: 16px; line-height: 26px; cursor: pointer; }
.tracks li .star:hover { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.tracks li.fav .star { color: #ffc86b; }
.tracks.favonly li:not(.fav) { opacity: 0.55; }
.tracks li .meta { padding-left: 58px; }
/* the effects' own pieces: which effect each belongs to */
.tracks li .meta small.fxof { flex: 1 0 100%; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.empty { color: var(--faint); font-size: 13px; text-align: center; padding: 24px 0; }

/* ---------------------------------------------------------------- HUD */

#hud { position: fixed; inset: 0; z-index: 8; pointer-events: none; animation: fadein 0.8s ease both; }
#hud > * { pointer-events: auto; }
.hud-title {
  position: absolute; left: 18px; top: 16px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(255, 240, 222, 0.6);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none !important;
}
.topbar { position: absolute; right: 14px; top: 12px; display: flex; gap: 6px; }
.topbar button {
  position: relative;
  appearance: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(12, 15, 30, 0.6);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid; place-items: center;
  color: rgba(255, 240, 222, 0.88);
  transition: background 0.15s;
}
.topbar button:hover, .topbar button.on { background: rgba(40, 46, 80, 0.85); }
.topbar button.muted { color: #ffb29c; border-color: rgba(255, 178, 156, 0.45); }
.topbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.notice {
  position: absolute; left: 50%; top: 14px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px 9px 16px;
  border-radius: 14px;
  background: rgba(14, 22, 30, 0.82);
  border: 1px solid rgba(142, 230, 176, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(120, 230, 170, 0.12);
  font-size: 14px;
  animation: drop 0.4s ease both;
  max-width: calc(100vw - 260px);
  word-break: keep-all;   /* (a narrow phone breaks between words, not inside one) */
}
.notice .btn { white-space: nowrap; flex: none; }
.notice .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); animation: blink 1.2s infinite; flex: none; }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.nowplaying {
  position: absolute; left: 14px; top: 92px;
  max-width: min(360px, 42vw);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(12, 15, 30, 0.62);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: opacity 0.6s, padding 0.4s;
}
.nowplaying .t { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowplaying .t::before { content: '♪ '; color: var(--accent); }
.nowplaying .s { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowplaying.quiet { opacity: 0.55; padding: 6px 12px; }
.nowplaying.quiet .s { display: none; }
.nowplaying .s.d { color: var(--faint); }
.nowplaying .t .no, .np .t .no { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.nowplaying.off { opacity: 0.35; }

.bottom {
  position: absolute; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px);
  pointer-events: none !important;
}
.status {
  font-size: 14px;
  color: rgba(255, 244, 230, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  min-height: 20px;
}
.status b { color: var(--accent); font-weight: 700; }
.status .pst { display: block; text-align: center; font-size: 12.5px; opacity: 0.88; margin-top: 2px; }
.status .pst b { color: #ffd9a8; }
.actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(12, 15, 30, 0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.actions button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  color: rgba(255, 244, 230, 0.9);
  white-space: nowrap;
}
.actions button:hover { background: rgba(255, 255, 255, 0.09); }
.actions button.on { background: rgba(255, 184, 107, 0.18); border-color: rgba(255, 184, 107, 0.45); }
.actions .sep { width: 1px; background: var(--line); margin: 4px 2px; }
.actions .auto.on { background: rgba(142, 230, 176, 0.15); border-color: rgba(142, 230, 176, 0.4); }
/* the two rows' wrapper counts for nothing in the layout, and the "할 일" button is not there, except on
   a phone (below) */
.actwrap { display: contents; }
.actbtn { display: none; }

/* ---------------------------------------------------------------- effects (js/effects.js) */

/* the top-right button while an effect is laid over the weather */
.topbar button.fx { color: #ffd59a; border-color: rgba(255, 184, 107, 0.6); box-shadow: 0 0 10px rgba(255, 170, 90, 0.3); }
.topbar button.fx::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* the picker: its head ("현재 날씨" beside the close button) and the group tabs stay, the tiles scroll */
.fxpanel { width: min(480px, calc(100vw - 28px)); display: flex; flex-direction: column; overflow: hidden; }
.fxpanel .fxhead { flex: none; flex-wrap: wrap; gap: 8px; }
.fxh-r { display: flex; align-items: center; gap: 4px; }
.fxsync {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--text);
  padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap;
}
.fxsync:hover { background: rgba(255, 255, 255, 0.1); }
.fxsync.on { background: rgba(255, 184, 107, 0.18); border-color: var(--accent); color: #ffe2c2; }
.fxtabs { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 5px; margin: 0; padding-bottom: 2px; scrollbar-width: none; }
.fxtabs::-webkit-scrollbar { display: none; }
.fxtabs button { flex: none; padding: 5px 11px; font-weight: 500; color: var(--text); }
/* taking turns (자동으로 보기): a row under the head; lit while on */
.fxauto { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 5px 6px 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 12.5px; }
.fxauto .fa-t { flex: 1 1 auto; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxauto .btn.small { flex: none; padding: 4px 10px; }
.fxauto.on { background: rgba(255, 184, 107, 0.14); box-shadow: 0 0 0 1px var(--accent) inset; }
.fxauto.on .fa-t { color: var(--text); }
.fxauto .fa-p { font-style: normal; }
body.phone.tall .fxauto .fa-p { display: none; }   /* (a narrow phone: the buttons say it) */
.fxscroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 2px; }
.fxgroup + .fxgroup { margin-top: 10px; }
.fxgroup h5 { margin: 0 0 6px; font-size: 12px; font-weight: 650; color: var(--accent); letter-spacing: 0.02em; }
.fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.fxtile {
  appearance: none; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 66px; padding: 8px 3px 7px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-2); color: var(--text);
  text-align: center; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.fxtile:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.fxtile.on { background: rgba(255, 184, 107, 0.18); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.fxtile .fi { display: block; font-size: 24px; line-height: 1; height: 1.12em; }
/* an effect's own picture in place of an emoji (G.Effects.iconHtml): an emoji's size wherever it stands */
.fxart { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; pointer-events: none; }
.fxtile .fi .fxart { width: 1.12em; height: 1.12em; vertical-align: top; }
.fxtile b { font-size: 12px; font-weight: 700; line-height: 1.25; word-break: keep-all; }
/* played once, then the weather again */
.fxonce {
  position: absolute; top: 3px; right: 3px;
  font-style: normal; font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 3px; border-radius: 5px;
  background: rgba(140, 170, 255, 0.2); color: #c9d6ff;
}
.fxscroll .note { margin: 10px 0 2px; }

/* the friend's face, bottom left (js/face.js): the sprite up close, four screen pixels to one */
.face {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; gap: 6px;
  padding: 7px 7px 6px;
  border-radius: 14px;
  background: rgba(12, 15, 30, 0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  transition: border-color 0.4s, opacity 0.3s;
}
.face.off { display: none; }
/* stepping aside (js/face.js dodge): nearly gone, and taps go through to the place under it */
#hud .face.dodge { opacity: 0.1; pointer-events: none; }
.face-cell {
  appearance: none; border: 0; padding: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--text); font: inherit; cursor: pointer;
}
.face-cell:hover canvas { box-shadow: inset 0 0 0 1px rgba(255, 228, 196, 0.35); }
.face-cell.inside canvas { filter: brightness(0.55) saturate(0.6); }
.face canvas {
  display: block; width: 104px; height: 112px; margin-bottom: 4px;
  image-rendering: pixelated;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 105%, rgba(255, 158, 88, 0.5), rgba(86, 46, 34, 0.42) 52%, rgba(18, 16, 32, 0.7));
  box-shadow: inset 0 0 0 1px rgba(255, 228, 196, 0.1);
}
.face-name { font-size: 12px; font-weight: 700; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face-mood { font-size: 11px; color: var(--muted); max-width: 108px; text-align: center; line-height: 1.3; }
/* two faces (with an animal friend): three screen pixels to one, so both still fit the corner */
.face.two canvas { width: 78px; height: 84px; }
.face.two .face-name, .face.two .face-mood { max-width: 84px; }
.face.two .face-name { font-size: 11.5px; }
.face.two .face-mood { font-size: 10.5px; }
.face.t3 #face-me .face-mood, .face.t4 #face-me .face-mood { color: #ffb38a; }
.face.t4 { border-color: rgba(255, 160, 120, 0.35); }

/* only one tab runs the game (js/tabguard.js): the notice in the others */
.tabguard {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 60%, rgba(60, 30, 14, 0.55), rgba(5, 7, 15, 0.92));
  backdrop-filter: blur(3px);
}
.tg-card {
  width: min(440px, 100%); padding: 28px 26px 22px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--text);
}
.tg-ic { font-size: 34px; filter: drop-shadow(0 0 12px rgba(255, 150, 60, 0.6)); }
.tg-card h2 { margin: 10px 0 8px; font-size: 20px; }
.tg-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.65; font-size: 14px; }
.tg-card small { display: block; margin-top: 10px; color: var(--faint); font-size: 12px; }

/* ---------------------------------------------------------------- the camera (js/camera.js) */

.camera { position: fixed; inset: 0; z-index: 35; cursor: crosshair; touch-action: none; user-select: none; }
/* the scene outside the frame darkens a little, as through a camera (four panels around it) */
.cam-dim { position: absolute; background: rgba(6, 8, 18, 0.5); pointer-events: none; }
.vf { position: absolute; cursor: grab; outline: 1px solid rgba(255, 255, 255, 0.55); }
.vf:active { cursor: grabbing; }
.vf-c { position: absolute; width: 22px; height: 22px; border: 0 solid #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); transition: transform 0.25s ease; }
.vf-c.tl { left: -3px; top: -3px; border-left-width: 3px; border-top-width: 3px; }
.vf-c.tr { right: -3px; top: -3px; border-right-width: 3px; border-top-width: 3px; }
.vf-c.bl { left: -3px; bottom: -3px; border-left-width: 3px; border-bottom-width: 3px; }
.vf-c.br { right: -3px; bottom: -3px; border-right-width: 3px; border-bottom-width: 3px; }
.vf-thirds {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.22) calc(33.33% - 0.5px), rgba(255,255,255,0.22) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px),
      transparent calc(66.66% - 0.5px), rgba(255,255,255,0.22) calc(66.66% - 0.5px), rgba(255,255,255,0.22) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(180deg, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.22) calc(33.33% - 0.5px), rgba(255,255,255,0.22) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px),
      transparent calc(66.66% - 0.5px), rgba(255,255,255,0.22) calc(66.66% - 0.5px), rgba(255,255,255,0.22) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.vf-focus { position: absolute; left: 50%; top: 50%; width: 34px; height: 24px; transform: translate(-50%, -50%); border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 3px; }
.vf-date { position: absolute; right: 0; bottom: 0; pointer-events: none; }
/* between the shutter and the "tak": the corners close in and the focus mark hunts */
.vf.focusing .vf-c.tl { transform: translate(6px, 6px); }
.vf.focusing .vf-c.tr { transform: translate(-6px, 6px); }
.vf.focusing .vf-c.bl { transform: translate(6px, -6px); }
.vf.focusing .vf-c.br { transform: translate(-6px, -6px); }
.vf.focusing .vf-focus { border-color: #8ef0a8; animation: vf-hunt 0.38s ease-in-out infinite alternate; }
@keyframes vf-hunt { from { transform: translate(-50%, -50%) scale(1.25); } to { transform: translate(-50%, -50%) scale(0.85); } }
.cam-flash { position: absolute; pointer-events: none; background: #fff; opacity: 0; }
.cam-flash.go { animation: cam-flash 0.45s ease-out; }
@keyframes cam-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.cam-bar {
  position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 10px 16px; cursor: default;
  border-radius: 999px; background: rgba(10, 12, 24, 0.72); border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.cam-last { appearance: none; width: 54px; height: 36px; padding: 0; border-radius: 6px; border: 2px solid #fff; background: #000; cursor: pointer; overflow: hidden; }
.cam-last img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.cam-mini { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--text); font-size: 18px; cursor: pointer; }
.cam-mini:hover { background: rgba(255, 255, 255, 0.14); }
.cam-shutter {
  appearance: none; width: 62px; height: 62px; border-radius: 50%; cursor: pointer;
  border: 4px solid #fff; background: radial-gradient(circle, #fff 0 54%, transparent 56%); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.1s;
}
.cam-shutter:active { transform: scale(0.92); }
.cam-shutter:disabled { opacity: 0.6; cursor: default; }

.toast {
  position: fixed; left: 50%; bottom: 120px;
  transform: translateX(-50%);
  z-index: 40;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(10, 12, 24, 0.88);
  border: 1px solid var(--line);
  font-size: 14px;
  /* (one line where it fits, clear of the faces in the corner (2 × 200 px): left 50% alone wraps it at
     half the screen, over them on an iPad held upright; a longer one wraps between words, not inside one) */
  width: max-content; max-width: min(640px, max(300px, calc(100vw - 400px)));
  text-align: center; word-break: keep-all;
  animation: fadein 0.25s ease both;
  pointer-events: none;
}

/* ---------------------------------------------------------------- letter */

.rx-wrap {
  position: fixed; inset: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(4, 6, 16, 0.2), rgba(4, 6, 16, 0.6));
  animation: fadein 0.3s ease both;
}
.rx-wrap.closing { animation: fadeout 0.8s ease both; }
@keyframes fadeout { to { opacity: 0; } }

/* the receiver's casing: dark painted metal with a little wear */
.rx {
  --phos: #9dffb8;
  --phos-dim: #4fb878;
  position: relative;
  width: min(660px, 100%);
  padding: 16px 18px 14px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 2px, rgba(0,0,0,0.02) 2px 4px),
    linear-gradient(180deg, #3b3f3a 0%, #2b2e2a 55%, #222421 100%);
  border: 1px solid #4a4f48;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
  color: #d9d4c4;
  animation: rxIn 0.45s cubic-bezier(.2,.9,.3,1.08) both;
  font-family: 'Pretendard', system-ui, sans-serif;
}
@keyframes rxIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.screw { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9a9f96, #4b4f49 70%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); }
.screw::after { content: ''; position: absolute; left: 1px; right: 1px; top: 4px; height: 1px; background: rgba(0,0,0,0.55); transform: rotate(35deg); }
.screw.s1 { left: 7px; top: 7px; } .screw.s2 { right: 7px; top: 7px; } .screw.s3 { left: 7px; bottom: 7px; } .screw.s4 { right: 7px; bottom: 7px; }

.rx-top { display: flex; align-items: center; gap: 14px; padding: 2px 8px 12px; }
.rx-brand { display: flex; flex-direction: column; line-height: 1.2; }
.rx-brand b { font: 700 15px 'Consolas', 'Cascadia Code', monospace; letter-spacing: 0.16em; color: #e9e3d0; }
.rx-brand span { font-size: 11px; color: #9a9686; letter-spacing: 0.08em; }
.rx-meter {
  width: 112px; height: 60px; flex: none; margin-left: auto;
  border-radius: 6px;
  background: linear-gradient(180deg, #f1e7c8, #ddd0a8);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45), 0 0 0 2px #1d1f1c;
  overflow: hidden;
}
.rx-meter svg { width: 100%; height: 100%; display: block; }
.rx-meter .arc { fill: none; stroke: #3a3328; stroke-width: 1.4; }
.rx-meter .arc.red { stroke: #b4382a; stroke-width: 2.4; }
.rx-meter .ticks line { stroke: #3a3328; stroke-width: 1; }
.rx-meter text { font: 700 8px 'Consolas', monospace; fill: #5a5040; text-anchor: middle; letter-spacing: 0.1em; }
.rx-meter #rx-needle line { stroke: #c02a1e; stroke-width: 1.6; stroke-linecap: round; }
.rx-meter #rx-needle { transform-origin: 60px 58px; transform: rotate(-55deg); transition: transform 0.12s linear; }
.rx-meter circle { fill: #2a2622; }
.rx-freq {
  flex: none;
  min-width: 128px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #0d0a06;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.8), 0 0 0 2px #1d1f1c;
  font: 700 22px 'Consolas', 'Cascadia Code', monospace;
  letter-spacing: 0.06em;
  color: #ffb44a;
  text-shadow: 0 0 6px rgba(255, 170, 60, 0.75), 0 0 14px rgba(255, 140, 40, 0.35);
  text-align: right;
}
.rx-freq small { font-size: 11px; margin-left: 4px; color: #d0903a; }
.rx-leds { display: flex; flex-direction: column; gap: 6px; font: 700 11px 'Consolas', monospace; color: #a8a392; letter-spacing: 0.1em; }
.rx-leds span { display: flex; align-items: center; gap: 6px; }
.led { width: 9px; height: 9px; border-radius: 50%; background: #2c2f2b; box-shadow: inset 0 1px 2px rgba(0,0,0,0.7); }
.led.g.on { background: #8dff9c; box-shadow: 0 0 8px #6dff8a, 0 0 2px #fff inset; }
.led.r.on { background: #ff6a5a; box-shadow: 0 0 8px #ff4a3a, 0 0 2px #fff inset; }

/* the CRT: green phosphor, scanlines, a soft curved glass */
.rx-bezel {
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #151614, #1f211e);
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.75), inset 0 -1px 0 rgba(255,255,255,0.06);
}
/* The glass: clips its effects (overflow hidden) and never scrolls. */
.rx-crt {
  position: relative;
  overflow: hidden;
  border-radius: 22px / 18px;
  background: radial-gradient(ellipse at 50% 45%, #0f2a1b 0%, #08180f 62%, #030a06 100%);
  box-shadow: inset 0 0 48px rgba(0,0,0,0.9), inset 0 0 10px rgba(120, 255, 160, 0.12);
  color: var(--phos);
  text-shadow: 0 0 3px rgba(140, 255, 175, 0.85), 0 0 12px rgba(80, 255, 140, 0.32);
  animation: flicker 4.5s infinite steps(1);
}
/* The text scrolls on its own layer underneath the glass effects. */
.rx-scroll {
  position: relative;
  z-index: 1;
  height: clamp(220px, 44vh, 340px);  /* a fixed screen: the receiver never jumps while typing */
  overflow-y: auto;
  padding: 18px 22px 20px;
  scrollbar-width: none;
}
.rx-scroll::-webkit-scrollbar { display: none; }
.rx-crt::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.32) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.rx-crt::after {
  content: ''; position: absolute; left: 0; right: 0; height: 90px; top: -90px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(150, 255, 190, 0.05), transparent);
  animation: sweep 6s linear infinite;
}
@keyframes sweep { to { transform: translateY(520px); } }
@keyframes flicker { 0% { opacity: 1; } 48% { opacity: 0.97; } 50% { opacity: 1; } 77% { opacity: 0.985; } }
.rx-head {
  display: flex; justify-content: space-between; gap: 10px;
  font: 600 12px 'Consolas', 'Cascadia Code', monospace;
  letter-spacing: 0.06em;
  color: var(--phos-dim);
  border-bottom: 1px dashed rgba(120, 255, 160, 0.25);
  padding-bottom: 8px; margin-bottom: 12px;
  white-space: nowrap;
}
.rx-text {
  min-height: 120px;
  font-size: 19px;
  line-height: 1.75;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;   /* (a long run with no space, "ㅋㅋㅋ…", still wraps inside the screen) */
  user-select: text;
}
.rx-text .cur { display: inline-block; width: 0.55em; height: 1.05em; background: var(--phos); vertical-align: -0.15em; margin-left: 2px; box-shadow: 0 0 8px rgba(140,255,175,0.8); animation: blink 0.8s infinite steps(1); }
.rx-from { margin-top: 14px; text-align: right; font-size: 14px; color: var(--phos-dim); min-height: 22px; }
.rx-from b { color: var(--phos); font-weight: 600; }
.rx-from small { display: block; font-size: 12px; opacity: 0.8; margin-top: 2px; }
.tx-input {
  display: block;
  width: 100%;
  min-height: 110px;
  margin-top: 4px;
  resize: none;
  border: 1px dashed rgba(120, 255, 160, 0.35);
  border-radius: 8px;
  background: rgba(0, 20, 8, 0.35);
  color: var(--phos);
  caret-color: var(--phos);
  text-shadow: inherit;
  font: 500 18px/1.7 'Pretendard', system-ui, sans-serif;
  padding: 8px 10px;
  outline: none;
  user-select: text;
}
.tx-input::placeholder { color: rgba(120, 255, 160, 0.35); }

.rx-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 6px 2px; flex-wrap: wrap; }
.rx-switch { display: flex; border-radius: 8px; padding: 3px; background: #161815; box-shadow: inset 0 2px 5px rgba(0,0,0,0.7); }
.rx-switch button {
  appearance: none; border: 0; background: transparent; color: #8f8b7c;
  font: 600 12px 'Pretendard', system-ui, sans-serif; padding: 5px 10px; border-radius: 6px; cursor: pointer;
}
.rx-switch button.on { background: linear-gradient(180deg, #5d6258, #44483f); color: #f1ead6; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 2px 4px rgba(0,0,0,0.5); }
.rx-mode { font: 700 11px 'Consolas', monospace; letter-spacing: 0.12em; color: #b9b39d; padding: 5px 10px; border-radius: 6px; background: #161815; box-shadow: inset 0 2px 5px rgba(0,0,0,0.7); }
.rx-keys { display: flex; gap: 8px; }
.key {
  appearance: none;
  border: 1px solid #1a1c19;
  border-radius: 7px;
  padding: 8px 16px;
  font: 700 13px 'Pretendard', system-ui, sans-serif;
  color: #2a2620;
  background: linear-gradient(180deg, #ece4cd, #cfc4a6);
  box-shadow: 0 3px 0 #8f8670, 0 4px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #8f8670, 0 2px 4px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.6); }
.key.dark { color: #ebe5d2; background: linear-gradient(180deg, #5a5e55, #3e413a); box-shadow: 0 3px 0 #22241f, 0 4px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15); }
.key.go { color: #1f2a12; background: linear-gradient(180deg, #c8f0a0, #97cf6c); box-shadow: 0 3px 0 #5d8a3c, 0 4px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.6); }
.key:disabled { opacity: 0.45; cursor: default; }

/* the Stevenson screen's instrument panel: same painted metal, cream gauge faces */
.wxp {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px 18px 14px;
  word-break: keep-all; overflow-wrap: break-word;   /* (a narrow phone breaks between words, not inside one) */
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 2px, rgba(0,0,0,0.02) 2px 4px),
    linear-gradient(180deg, #3b3f3a 0%, #2b2e2a 55%, #222421 100%);
  border: 1px solid #4a4f48;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #d9d4c4;
  animation: rxIn 0.45s cubic-bezier(.2,.9,.3,1.08) both;
}
.wx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 8px 12px; }
.wx-src { display: flex; align-items: center; gap: 7px; font: 600 12px 'Pretendard', system-ui, sans-serif; color: #c9c3b0; }
.wx-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gauge {
  border-radius: 10px;
  padding: 10px 8px 9px;
  background: linear-gradient(180deg, #f1e7c8, #ddd0a8);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 0 0 2px #1d1f1c;
  color: #3a3328;
  text-align: center;
}
.gauge svg { width: 100%; height: 96px; display: block; }
.gauge .g-val { font: 700 18px 'Consolas', 'Cascadia Code', monospace; margin-top: 4px; color: #2a2620; }
.gauge .g-lbl { font-size: 12px; color: #6a5e4a; }
.thermo .glass { fill: #fbf7ea; stroke: #6a5e4a; stroke-width: 1.2; }
.thermo .merc, .thermo .bulb { fill: #c4302a; }
.thermo .bulb { stroke: #6a5e4a; stroke-width: 1.2; }
.thermo #wx-merc { transition: y 0.8s ease, height 0.8s ease; }
.thermo line { stroke: #5a5040; stroke-width: 1; }
.thermo text { font: 700 8px 'Consolas', monospace; fill: #5a5040; }
.dial .arc { fill: none; stroke: #3a3328; stroke-width: 1.4; }
.dial line { stroke: #3a3328; stroke-width: 1; }
.dial text { font: 700 9px 'Consolas', monospace; fill: #5a5040; text-anchor: middle; }
.dial #wx-hneedle { transform-origin: 60px 66px; transition: transform 0.8s ease; }
.dial #wx-hneedle line { stroke: #c02a1e; stroke-width: 1.8; stroke-linecap: round; }
.dial circle { fill: #2a2622; }
.compass .ring, .cover .ring { fill: #fbf7ea; stroke: #5a5040; stroke-width: 1.5; }
.compass text { font: 700 10px 'Consolas', monospace; fill: #5a5040; text-anchor: middle; }
.compass #wx-vane { transform-origin: 50px 50px; transition: transform 0.8s ease; }
.compass .vane { fill: #c02a1e; } .compass .tail { fill: #3a3328; } .compass .hub { fill: #2a2622; }
.cover .pie { fill: #3a3328; }
.wx-rows { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #161815; box-shadow: inset 0 2px 6px rgba(0,0,0,0.7); }
.wx-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,0.07); font-size: 14px; }
.wx-row:last-child { border-bottom: 0; }
.wx-row > span:first-child { width: 40px; flex: none; color: #8f8b7c; font-size: 12px; }
.wx-row b { color: #ffcf7a; font-weight: 650; text-shadow: 0 0 6px rgba(255, 170, 60, 0.35); }
.wx-row small { color: #9a9686; margin-left: auto; text-align: right; font-size: 12px; }
.sunarc { width: 160px; height: 56px; flex: none; }
/* (on a phone the sun's line goes under the picture instead of one word to a line beside it) */
.wx-row.sun { flex-wrap: wrap; }
.wx-row.sun b { flex: 1 1 150px; }
.sunarc .band { fill: #1d2748; transition: fill 1s; }
.sunarc[data-kind="day"] .band { fill: #8fb8e6; }
.sunarc[data-kind="dawn"] .band { fill: #d9a3a0; }
.sunarc[data-kind="dusk"] .band { fill: #d8876a; }
.sunarc .ground { fill: #2a2f24; }
.sunarc .path { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sunarc .path.night { stroke: rgba(255, 255, 255, 0.16); }
.sunarc .hz { stroke: #8a8676; stroke-width: 1; }
.sunarc .sun { fill: #ffc04a; filter: drop-shadow(0 0 3px #ffb030); transition: cx 1s, cy 1s; }
.sunarc .sun.below { fill: #7a5f36; filter: none; }
.sunarc .moon { opacity: 0; transition: opacity 1s; }
.sunarc[data-kind="night"] .moon, .sunarc[data-kind="dusk"] .moon, .sunarc[data-kind="dawn"] .moon { opacity: 1; }
.moon-dark { fill: #343b55; }
.moon-lit { fill: #f1ecd8; }
.moonicon { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 0 4px rgba(220, 230, 255, 0.25)); }
.wx-note { color: #a8a392; font-size: 12px; flex: 1; min-width: 160px; }

/* the weather chip in the HUD */
.wxchip {
  position: absolute; left: 14px; top: 40px;
  max-width: min(380px, 44vw);
  appearance: none; text-align: left;
  padding: 7px 12px;
  border-radius: 12px;
  background: rgba(12, 15, 30, 0.6);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  cursor: pointer;
  color: var(--text);
}
.wxchip .t { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wxchip .s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.wxchip:hover { background: rgba(30, 36, 64, 0.8); }
.locbox { display: flex; gap: 6px; margin: 8px 0; }
.locbox input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); color: var(--text); font: inherit; font-size: 13px; user-select: text; }
.locres { list-style: none; margin: 4px 0 0; padding: 0; }
.locres li { padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.locres li:hover { background: var(--panel-2); }
.locres li small { color: var(--faint); margin-left: 6px; }

/* ---------------------------------------------------------------- HUD left stack */

.hud-left {
  position: absolute; left: 14px; top: 40px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  pointer-events: none !important;
}
.hud-left > * { pointer-events: auto; }
.hud-left .wxchip, .hud-left .nowplaying { position: static; }
.chronochip .t.ring { color: #ffcf7a; }
.chronochip.ringing { border-color: #ffb44a; animation: ringPulse 1.2s ease-in-out infinite; }
.chronochip .breathe { animation: blink 2.6s ease-in-out infinite; }
.chronochip .dim { opacity: 0.6; }

/* ---------------------------------------------------------------- alarm / pomodoro cards */

.topcards {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 45;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 32px);
  pointer-events: none;
}
.topcards > * { pointer-events: auto; }
/* a tablet or a narrow window (not a phone: below): the button row reaches the middle, so the cards go
   under it on the right instead of over the buttons; a panel just opened goes over them */
@media (max-width: 1320px) {
  body:not(.phone) .topcards { top: 62px; left: auto; right: 14px; transform: none; align-items: flex-end; max-width: min(520px, calc(100vw - 340px)); }
  body:not(.phone) .side { z-index: 46; }
  body:not(.phone) .toast { z-index: 47; }   /* (and a toast over the panel, as on a wide screen and a phone) */
}
.topcards .notice { position: static; transform: none; animation: none; max-width: none; }
.ccard {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  background: rgba(28, 30, 27, 0.95);
  border: 1px solid #4a4f48;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: #e9e3d0;
  animation: cardIn 0.35s ease both;
  transition: opacity 0.4s, transform 0.4s;
}
.ccard.out { opacity: 0; transform: translateY(-6px); }
.ccard .ic { font-size: 20px; }
.ccard .tx { display: flex; flex-direction: column; line-height: 1.35; }
.ccard .tx b { font-size: 14px; }
.ccard .tx span { font-size: 13px; color: #c9c3b0; }
.ccard .tx small { font-size: 12px; color: #8f8b7c; }
.ccard.ring { border-color: #ffb44a; animation: cardIn 0.35s ease both, ringPulse 1.2s ease-in-out infinite; }
.ccard.focus { border-color: #ff9a7e; }
.ccard.rest { border-color: #7fe0c0; }
.ccard.wait { animation: cardIn 0.35s ease both, breathe 5s ease-in-out infinite; }
.ccard.quiet { border-color: #6a6f78; }
@keyframes cardIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes ringPulse { 50% { box-shadow: 0 0 22px rgba(255, 180, 74, 0.55), 0 10px 30px rgba(0, 0, 0, 0.45); } }
@keyframes breathe { 50% { box-shadow: 0 0 18px rgba(127, 224, 192, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45); } }

/* ---------------------------------------------------------------- the chronometer */

.chrono { width: min(880px, 100%); }
.ch-now { font-size: 20px; min-width: 124px; text-align: center; }
.ch-body { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(300px, 1.25fr); gap: 12px; }
.ch-left, .ch-right { background: #161815; border-radius: 10px; padding: 12px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7); min-width: 0; }
.ch-modes { margin-bottom: 10px; width: 100%; }
.ch-modes button { flex: 1; }
.ch-field { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
.ch-field span { width: 36px; flex: none; color: #8f8b7c; font-size: 12px; }
.ch-field input {
  flex: 1; min-width: 0;
  background: #0d0f0c; border: 1px solid #3a3f38; border-radius: 7px;
  color: #f1ead6; padding: 7px 9px; font: inherit; font-size: 13px; user-select: text; outline: none;
}
.ch-field input:focus { border-color: #ffb44a; }
.ch-sub { font-size: 12px; color: #8f8b7c; margin: 10px 0 6px; }
.ch-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ch-presets .key { padding: 7px 0; }
.ch-custom, .ch-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.ch-row span { width: 44px; flex: none; font-size: 12px; color: #8f8b7c; }
.ch-custom input, .ch-row input { flex: 1; min-width: 0; accent-color: #ffb44a; }
.ch-custom b, .ch-row b { width: 46px; text-align: right; font: 700 13px 'Consolas', monospace; color: #ffcf7a; }
.ch-custom .key { padding: 6px 12px; }
.ch-alarm { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; }
.ch-alarm b { font: 700 30px 'Consolas', monospace; color: #ffb44a; text-shadow: 0 0 8px rgba(255, 170, 60, 0.6); }
.ch-alarm span { color: #a8a392; font-size: 13px; }
.ch-form > .key { margin-top: 8px; }
.ch-today { margin: 10px 0; font-size: 13px; color: #c9c3b0; }
.ch-today b { color: #ff9a7e; }
.chrono .switch { font-size: 13px; color: #d9d4c4; }
.chrono .note { color: #8f8b7c; margin: 2px 0 6px; }
.ch-listhead { display: flex; justify-content: space-between; font-size: 12px; color: #8f8b7c; margin: 8px 2px 6px; }
.ch-listhead b { font: 700 12px 'Consolas', monospace; color: #c9c3b0; }
.ch-list { display: flex; flex-direction: column; gap: 6px; max-height: 250px; overflow: auto; }
.ch-item { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; padding: 8px 10px 10px; border-radius: 8px; background: #20231f; }
.ch-item.paused { opacity: 0.7; }
.ch-it-main { min-width: 0; }
.ch-it-main b { display: block; font-size: 13px; color: #f1ead6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-it-main small { font-size: 11px; color: #8f8b7c; }
.ch-rem { font: 700 16px 'Consolas', monospace; color: #ffcf7a; }
.ch-item .key { padding: 5px 9px; font-size: 12px; }
.ch-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; grid-column: 1 / -1; }
.ch-bar i { display: block; height: 100%; width: 0; background: #ffc860; transition: width 0.5s linear; }
.ch-empty { color: #8f8b7c; font-size: 13px; text-align: center; padding: 18px 0; margin: 0; }
.ch-pcard { border-radius: 10px; padding: 12px; border: 2px solid #ff9a7e; background: linear-gradient(180deg, rgba(255, 154, 126, 0.12), rgba(0, 0, 0, 0)); margin-bottom: 4px; }
.ch-pcard.rest { border-color: #7fe0c0; background: linear-gradient(180deg, rgba(127, 224, 192, 0.12), rgba(0, 0, 0, 0)); }
.ch-pcard.waiting { animation: breathe 5s ease-in-out infinite; }
.ch-pcard.paused .ch-big { opacity: 0.6; }
.ch-pc-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #a8a392; }
.ch-pc-main { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 6px; }
.ch-phase { font-size: 18px; color: #f1ead6; }
.ch-big { font: 700 40px 'Consolas', monospace; color: #fff3e4; letter-spacing: 0.02em; }
.ch-pcard .ch-bar i { background: #ff9a7e; }
.ch-pcard.rest .ch-bar i { background: #7fe0c0; }
.ch-pc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ch-pc-foot > span:first-child { font-size: 12px; color: #c9c3b0; }
.ch-btns { display: flex; gap: 6px; }
.ch-btns .key { padding: 5px 10px; font-size: 12px; }

/* ---------------------------------------------------------------- the journal (a leather notebook) */

.jr {
  position: relative;
  width: min(940px, 100%);
  height: min(620px, calc(100vh - 32px));
  display: grid; grid-template-columns: 300px 1fr;
  padding: 12px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 3px, rgba(0, 0, 0, 0.03) 3px 6px),
    linear-gradient(180deg, #6a4430, #4e3022);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 220, 180, 0.08);
  animation: rxIn 0.4s cubic-bezier(.2,.9,.3,1.08) both;
  color: #3b302c;
}
.jr-left {
  display: flex; flex-direction: column; min-height: 0;
  padding: 16px 14px;
  border-radius: 8px 0 0 8px;
  background: #efe6d2;
  box-shadow: inset -12px 0 14px -10px rgba(0, 0, 0, 0.35);
}
.jr-right {
  min-height: 0; overflow: auto;
  padding: 22px 28px;
  border-radius: 0 8px 8px 0;
  background: radial-gradient(ellipse at 45% 35%, #fbf6e9 0%, #f7efdd 65%, #f0e5cd 100%); /* plain paper, no lines */
  box-shadow: inset 12px 0 14px -10px rgba(0, 0, 0, 0.3);
}
.jr-head { display: flex; justify-content: space-between; align-items: center; }
.jr-head b { font-size: 20px; font-weight: 800; }
.jr-counts { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #7a6a5a; margin: 10px 0 8px; }
.jr-counts b { font-family: 'Consolas', monospace; }
.jr-counts .near b { color: #c07a2a; }
.jr-counts .full b { color: #c0482a; }
.jr-counts .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.dot.mine { background: #5a9ad0; }
.dot.sig { background: #d89a3a; }
.jr-filter button { background: rgba(0, 0, 0, 0.05); border-color: rgba(90, 60, 30, 0.18); color: #5a4a3a; }
.jr-filter button.on { background: rgba(200, 120, 60, 0.18); border-color: #c8642c; color: #7a3a1a; }
.jr-list { list-style: none; margin: 10px 0 0; padding: 0; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.jr-list.resting { opacity: 0.45; pointer-events: none; }
.jr-list li { position: relative; padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.jr-list li:hover { background: rgba(0, 0, 0, 0.05); }
.jr-list li.on { background: rgba(200, 120, 60, 0.12); border-color: rgba(200, 120, 60, 0.35); }
.jr-list li b { display: block; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-list li small { font-size: 12px; color: #8a7a6a; overflow-wrap: anywhere; }
.jr-list li small em { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: rgba(216, 154, 58, 0.2); color: #8a5a1a; font-size: 11px; }
.jr-list li.sig { border-left: 3px solid #d89a3a; padding-left: 28px; }
.jr-list li.sig .sigicon { position: absolute; left: 8px; top: 10px; }
.jr-list li.empty { color: #8a7a6a; cursor: default; text-align: center; padding: 24px 0; }
.jr-cap { font-size: 12px; color: #9a7a5a; margin: 8px 0 0; }
.jr-io { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(90, 60, 30, 0.2); }
.jr-io .btn { flex: 1; }
.sigicon { width: 14px; height: 14px; fill: none; stroke: #c07a2a; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.sigicon circle { fill: #c07a2a; stroke: none; }
.jr-x { position: absolute; right: 22px; top: 18px; appearance: none; border: 0; background: none; cursor: pointer; color: #7a6a5a; font-size: 24px; line-height: 1; }
.jr-blank { color: #9a8a7a; text-align: center; margin-top: 28%; line-height: 1.8; }
.jr-kicker { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #a0703a; letter-spacing: 0.04em; }
.jr-date { font-size: 22px; font-weight: 800; margin: 4px 0 2px; }
.jr-meta { font-size: 13px; color: #7a6a5a; overflow-wrap: anywhere; }
.jr-meta i { font-style: normal; color: #a08a6a; }
.jr-sent { display: inline-block; margin-top: 8px; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(216, 154, 58, 0.18); color: #8a5a1a; }
.jr-body { margin-top: 14px; font-size: 16px; line-height: 28px; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; user-select: text; }   /* (a run with no space wraps too) */
.jr-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.jr .btn { color: #3b302c; border-color: rgba(90, 60, 30, 0.25); background: rgba(255, 255, 255, 0.5); }
.jr .btn:hover { background: rgba(255, 255, 255, 0.85); }
.jr .btn.primary { background: linear-gradient(180deg, #ffc27e, #ff9a5c); color: #2b1a10; border-color: transparent; }
.jr .btn.warn { background: #f3c1b0; border-color: #c0482a; color: #7a2a1a; }
.jr .btn small { opacity: 0.6; font-size: 11px; margin-left: 4px; }
.jr-edit { display: flex; flex-direction: column; height: 100%; }
.jr-edit textarea {
  flex: 1; min-height: 240px; margin-top: 10px; resize: none;
  border: 0; outline: none; background: transparent;
  font: 500 16px/28px 'Pretendard', system-ui, sans-serif; color: #3b302c; user-select: text;
}
.jr-edfoot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #8a7a6a; border-top: 1px dashed rgba(90, 60, 30, 0.25); padding-top: 8px; }
#jr-n.warn { color: #c0482a; }
.jr-warn { font-size: 13px; color: #b0502a; margin: 8px 0 0; }
@media (max-width: 760px) {
  .jr { grid-template-columns: 1fr; height: calc(100vh - 32px - var(--st, 0px) - var(--sb, 0px)); height: calc(100dvh - 32px - var(--st, 0px) - var(--sb, 0px)); }
  .jr-left { border-radius: 8px 8px 0 0; max-height: 40vh; }
  .jr-right { border-radius: 0 0 8px 8px; }
  .jr-head { padding-right: 34px; }   /* (the close button sits at the top right) */
  .ch-body { grid-template-columns: 1fr; }
  .hud-left { top: 58px; left: 12px; }
}

/* a phone held sideways: too short for the list above the page, so side by side again */
@media (max-width: 760px) and (max-height: 500px) and (min-width: 520px) {
  .jr { grid-template-columns: 220px 1fr; }
  .jr-left { border-radius: 8px 0 0 8px; max-height: none; padding: 12px 10px; }
  .jr-right { border-radius: 0 8px 8px 0; padding: 16px 18px; }
  .jr-head { padding-right: 0; }
  .jr-head b { font-size: 17px; }
  .jr-counts { margin: 6px 0 4px; gap: 8px; }
}

.rx-timer { position: absolute; left: 22px; right: 22px; bottom: 4px; height: 2px; border-radius: 1px; overflow: hidden; }
.rx-timer i { display: block; height: 100%; width: 0; background: rgba(157, 255, 184, 0.45); box-shadow: 0 0 6px rgba(157,255,184,0.6); }

/* A touch screen (a tablet, a phone): the always-shown bits over the game go without the blur behind them.
   The picture under them changes every frame, so each blur is worked out again and again, and over
   an evening that warms a tablet until it slows down. A little more opaque instead. */
@media (pointer: coarse) {
  .topbar button, .nowplaying, .actions, .face, .wxchip, .menu .btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar button, .nowplaying, .wxchip { background: rgba(12, 15, 30, 0.74); }
  .actions, .face { background: rgba(12, 15, 30, 0.7); }
  /* the panels' and the journal's ×: a box a finger finds (40 px round the same glyph, the row as it was) */
  .side .x { min-width: 40px; min-height: 40px; margin: -8px -10px -8px 0; }
  .jr-x { min-width: 40px; min-height: 40px; right: 15px; top: 11px; }
  /* the small controls in the panels, the windows, the "할 일" sheet and the friend creator: 36 px or more
     for a finger (the row of buttons at the top keeps its size: ten of them share a phone's width) */
  .fxtabs button, .fxsync, .seg button, .btn.small, .rx-switch button, .key, .actions button { min-height: 36px; }
  .seg button { min-width: 40px; }   /* ("봄", "밤": one syllable) */
  .locbox input, .ch-field input { min-height: 36px; }
  .mini { min-width: 36px; height: 36px; }
  /* (the creator's parts: 36 px on a phone, where it scrolls anyway; 32 px high on a tablet, so that held
     sideways (1180 × 820) the creator still fits without a scroll) */
  .part .mini { min-width: 36px; height: 32px; }
  .parts { gap: 3px; }
  body.phone .part .mini { height: 36px; }
  body.phone .parts { gap: 4px; }
}

/* ---------------------------------------------------------------- small screens */

/* the friend creator a little narrower than a desktop (a tablet held upright, a phone sideways): the
   preview over the parts, so the parts keep their width */
@media (max-width: 900px) {
  .editor { grid-template-columns: 1fr; justify-items: center; }
  .edit-col { width: 100%; }
}

@media (max-width: 760px) {
  .creator-body { grid-template-columns: 1fr; }
  .editor { grid-template-columns: 1fr; justify-items: center; }
  .edit-col { width: 100%; }
  .actions button span.l { display: none; }
  .hud-title { display: none; }
  /* ten buttons in a narrow window: 10 × 34 + 9 × 3 = 367 px (a phone has its own sizes, body.phone below) */
  .topbar { right: 10px; gap: 3px; }
  .topbar button { width: 34px; height: 34px; border-radius: 10px; }
  .notice { max-width: calc(100vw - 32px); top: 62px; }
  .nowplaying { top: 108px; left: 12px; max-width: 46vw; }
  .wxchip { top: 58px; left: 12px; max-width: 60vw; }
  .wx-gauges { grid-template-columns: repeat(2, 1fr); }
  .rx-top { flex-wrap: wrap; }
  .rx-meter { margin-left: 0; }
}
@media (max-width: 370px) {
  /* and narrower: 10 × 31 + 9 × 2 = 328 px */
  .topbar { right: 6px; gap: 2px; }
  .topbar button { width: 31px; height: 31px; border-radius: 9px; }
  .topbar svg { width: 18px; height: 18px; }
  .cam-bar { gap: 8px; padding: 8px 12px; }
}
@media (max-height: 520px) {
  #title { padding-top: 3vh; }
  .side { top: 58px; max-height: calc(100vh - 70px); }
}

/* ---------------------------------------------------------------- a phone

   js/main.js resize sets body.phone (the window's short side 500 px or less) and body.tall (held
   upright). The HUD packs itself into the corners and along the edges, clear of the place in the middle:
   the weather chip top left, the buttons top right, a signal's notice and the alarm cards under the
   buttons (upright: under the weather chip), never over a button; the faces small in the bottom-left
   corner, the friend's actions behind a "할 일" button in the bottom-right one, the status line between
   them, and a toast in the status line's place for a moment. The notch and round corners kept clear. */
body.phone {
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
}
body.phone .hud-title { display: none; }
/* ten buttons: 10 × 34 + 9 × 3 = 367 px (held upright on a narrow phone: smaller, at the end) */
body.phone .topbar { top: calc(8px + var(--st)); right: calc(8px + var(--sr)); gap: 3px; }
body.phone .topbar button { width: 34px; height: 34px; border-radius: 10px; }
body.phone .topbar svg { width: 18px; height: 18px; }
body.phone .hud-left { top: calc(8px + var(--st)); left: calc(10px + var(--sl)); gap: 4px; }
body.phone.tall .hud-left { top: calc(50px + var(--st)); }
/* (sideways on a narrow phone the chip stops short of the buttons: 10 + 367 + 8 px and a gap) */
body.phone .wxchip { max-width: min(36vw, calc(100vw - 395px - var(--sl) - var(--sr))); padding: 5px 9px; border-radius: 10px; }
body.phone.tall .wxchip { max-width: calc(100vw - 20px); }
body.phone .wxchip .t { font-size: 12px; }
body.phone .wxchip .s { font-size: 11px; }
body.phone .nowplaying { max-width: 36vw; padding: 6px 10px; border-radius: 10px; }
body.phone.tall .nowplaying { max-width: 72vw; }
body.phone .nowplaying .t { font-size: 12.5px; }
body.phone .nowplaying .s { font-size: 11px; }
/* a signal's notice, the alarm and pomodoro cards */
body.phone .topcards { top: calc(48px + var(--st)); left: auto; right: calc(8px + var(--sr)); transform: none; align-items: flex-end; max-width: min(440px, 54vw); }
body.phone.tall .topcards { top: var(--lane-top, 150px); left: 10px; right: 10px; width: auto; max-width: none; align-items: center; }
body.phone .notice { font-size: 13px; gap: 8px; padding: 7px 8px 7px 12px; }
body.phone .ccard { padding: 8px 10px; gap: 10px; }
/* (what was just opened goes over them: a panel, the "할 일" sheet; a toast over a panel) */
body.phone .side { z-index: 46; }
body.phone .toast { z-index: 47; }
body.phone.sheet .topcards { visibility: hidden; }
/* the faces: two screen pixels to one, no mood line (a tap still tells it) */
body.phone .face { left: calc(10px + var(--sl)); bottom: calc(10px + var(--sb)); gap: 5px; padding: 5px 5px 4px; border-radius: 12px; }
body.phone .face canvas, body.phone .face.two canvas { width: 52px; height: 56px; margin-bottom: 2px; border-radius: 7px; }
body.phone .face .face-name { font-size: 11px; max-width: 56px; }
body.phone .face .face-mood { display: none; }
/* the status line between the corners (upright: above them) */
body.phone .bottom { left: calc(150px + var(--sl)); right: calc(108px + var(--sr)); bottom: calc(8px + var(--sb)); transform: none; width: auto; max-width: none; }
body.phone.tall .bottom { left: 10px; right: 10px; bottom: calc(var(--row-h, 84px) + 18px + var(--sb)); }
body.phone .status { white-space: normal; text-align: center; font-size: 12.5px; line-height: 1.35; min-height: 0; transition: opacity 0.2s; }
body.phone .status .pst { font-size: 11.5px; }
body.phone.toasting .status { opacity: 0; }
/* the "할 일" button, and its sheet: both rows of the bar together, with their names */
body.phone .actbtn {
  appearance: none;
  position: absolute; right: calc(10px + var(--sr)); bottom: calc(10px + var(--sb));
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 14px 0 12px;
  border-radius: 22px; border: 1px solid var(--line);
  background: rgba(12, 15, 30, 0.74); color: rgba(255, 244, 230, 0.92);
  font-size: 13px; font-weight: 650; cursor: pointer;
}
body.phone .actbtn .i { font-size: 17px; }
body.phone .actbtn.on { background: rgba(40, 46, 80, 0.92); border-color: rgba(255, 184, 107, 0.5); }
body.phone .actwrap { display: none; }
body.phone .bottom.open .actwrap {
  position: fixed; right: calc(8px + var(--sr)); bottom: calc(62px + var(--sb));
  display: flex; flex-direction: column; gap: 6px;
  width: min(360px, calc(100vw - 16px));
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto;
  padding: 8px;
  border-radius: 14px; border: 1px solid var(--line);
  background: rgba(12, 15, 30, 0.92); box-shadow: var(--shadow);
  pointer-events: auto;
  animation: fadein 0.18s ease both;
}
body.phone .actwrap .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* (sideways: four to a row, so the sheet stays low) */
body.phone:not(.tall) .bottom.open .actwrap { width: min(500px, calc(100vw - 16px)); }
body.phone:not(.tall) .actwrap .actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.phone .actwrap #actions2.hidden { display: grid !important; }
body.phone .actwrap #actions2 { order: 1; padding-top: 6px; border-top: 1px solid var(--line); border-radius: 0; }
body.phone .actwrap .actions button { min-width: 0; padding: 8px 6px; font-size: 12.5px; justify-content: flex-start; overflow: hidden; white-space: normal; text-align: left; line-height: 1.25; }
/* (a name too long for its cell goes on two lines, between words: "벤치에서 / 쉬기" on a 320 px phone) */
body.phone .actwrap .actions button span.l { display: inline; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
body.phone .actwrap .morebtn, body.phone .actwrap .sep { display: none !important; }
/* a toast: in the status line's place, wrapping instead of running off the screen */
body.phone .toast { bottom: calc(8px + var(--sb)); width: max-content; max-width: calc(100vw - 300px - var(--sl) - var(--sr)); padding: 8px 12px; font-size: 13px; line-height: 1.4; text-align: center; word-break: keep-all; }
body.phone.tall .toast { bottom: calc(var(--row-h, 84px) + 18px + var(--sb)); max-width: calc(100vw - 20px); }
/* the camera open: over its button bar (whose height the row takes then), as wide as the screen */
body.phone.cam .toast { bottom: calc(var(--row-h, 84px) + 10px); max-width: calc(100vw - 20px); }
/* side panels under the buttons, as tall as the screen allows */
body.phone .side {
  top: calc(48px + var(--st)); right: calc(8px + var(--sr));
  width: min(370px, calc(100vw - 16px));
  max-height: calc(100vh - 56px - var(--st) - var(--sb)); max-height: calc(100dvh - 56px - var(--st) - var(--sb));   /* (clear of the home bar) */
  padding: 14px 14px 12px;
  animation-name: slidein-near;   /* (8 px from the edge: a 10 px slide would start past it) */
}
@keyframes slidein-near { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
/* the effect picker: smaller tiles; held sideways, wide and low (more tiles to a row, fewer rows) */
body.phone .fxgrid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 5px; }
body.phone .fxtile { min-height: 56px; padding: 6px 2px 5px; gap: 2px; }
body.phone .fxtile .fi { font-size: 21px; }
body.phone .fxtile b { font-size: 11.5px; }
body.phone .fxpanel .fxhead { margin-bottom: 8px; gap: 6px; }
body.phone .fxtabs button { padding: 4px 10px; font-size: 12.5px; }
body.phone:not(.tall) .fxpanel { width: min(720px, calc(100vw - 16px - var(--sl) - var(--sr))); }
body.phone:not(.tall) .fxpanel .fxtabs { order: 0; flex: 1 1 auto; width: 0; margin-left: 6px; }
body.phone.tall .fxtabs { flex-wrap: wrap; overflow-x: visible; }   /* (upright: every tab in sight, two rows if need be) */
/* the windows (receiver, 백엽상, chronometer, journal) scroll when taller than the screen */
body.phone .rx-wrap { overflow-y: auto; align-items: flex-start; padding: calc(8px + var(--st)) calc(8px + var(--sr)) calc(8px + var(--sb)) calc(8px + var(--sl)); }
body.phone .rx-wrap > * { margin: auto; flex: none; }
body.phone .rx { padding: 10px 12px; }
body.phone .rx-top { gap: 8px; padding-bottom: 8px; }
body.phone .rx-meter { width: 84px; height: 46px; }
body.phone .rx-freq { min-width: 96px; font-size: 17px; }
body.phone .rx-text { font-size: 16px; min-height: 0; }
body.phone:not(.tall) .rx-scroll { height: clamp(110px, 36vh, 300px); padding: 12px 16px 14px; }
/* the friend creator: less padding round it */
body.phone #creator { padding: calc(8px + var(--st)) calc(8px + var(--sr)) calc(8px + var(--sb)) calc(8px + var(--sl)); }
body.phone .creator { max-height: calc(100vh - 16px - var(--st) - var(--sb)); max-height: calc(100dvh - 16px - var(--st) - var(--sb)); }   /* (inside the padding round it) */
body.phone .creator header { padding: 12px 16px 4px; }
body.phone .creator h2 { font-size: 18px; }
body.phone .creator header p { font-size: 12.5px; }
body.phone .creator-body { padding: 10px 16px; }
body.phone .creator footer { padding: 10px 16px 12px; }
/* upright on a 360–400 px phone: 10 × 32 + 9 × 2 = 338 px; on a 320 px one: 10 × 29 + 9 × 2 = 308 px */
@media (max-width: 400px) {
  body.phone .topbar { right: 6px; gap: 2px; }
  body.phone .topbar button { width: 32px; height: 32px; border-radius: 9px; }
  body.phone .topbar svg { width: 17px; height: 17px; }
}
@media (max-width: 340px) {
  body.phone .topbar button { width: 29px; height: 29px; }
  body.phone .topbar svg { width: 16px; height: 16px; }
}