/* Pixelify Sans (SIL OFL 1.1, see static/fonts/OFL.txt) is served from our own origin: no font host is contacted. */
@font-face { font-family: "Pixelify Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/PixelifySans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-weight: 600; font-display: swap; src: url("/static/fonts/PixelifySans-SemiBold.woff2") format("woff2"); }

/* Night lamp theme. Inputs stay at 16px: smaller text makes iOS zoom in on focus. */
:root {
  --bg: #141a33;
  --ink: #f4ead8;
  --muted: #a7abc9;
  --soft: #c9cce3;
  --amber: #ffb54d;
  --amber-2: #ffe2a8;
  --line: #3a4170;
  --field: #1a1f3d;
  --bad: #ffb8bf;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(120% 60% at 50% 60%, #3a2f4a 0%, #1f2547 45%, var(--bg) 100%) fixed, var(--bg);
  color: var(--ink);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
input { -webkit-user-select: text; user-select: text; }
#app {
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen { position: relative; flex: 1; display: flex; flex-direction: column; }
.screen.form { padding: 16px 24px 24px; }
.screen.center { align-items: center; justify-content: center; }
.center-col { justify-content: center; }
.spacer { flex: 1; min-height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.logo { display: flex; align-items: center; gap: 10px; margin: 20px 0 6px; font-size: 27px; line-height: 1.1; color: var(--amber-2); }
.logo-heart { width: 24px; height: 22px; fill: var(--amber); shape-rendering: crispEdges; flex: none; }
.lead { color: #b8bbd6; margin: 0 0 16px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 5px; }
input {
  width: 100%; height: 48px; padding: 0 14px;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--field);
  color: var(--ink); font-family: inherit; font-size: 16px; outline: none;
}
input::placeholder { color: #7d82a8; }
input:focus { border-color: #ffb54dcc; box-shadow: 0 0 0 3px #ffb54d33; }
input.err { border-color: #ff8f9a; }
.err-text { color: var(--bad); font-size: 13.5px; margin: 8px 0 0; }
.c { text-align: center; }

.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 14px;
  border: 0; border-radius: 14px; background: var(--amber); color: #1b1530;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer; box-shadow: 0 0 24px #ffb54d33;
}
.btn.ghost { background: transparent; border: 1.5px solid #ffb54d99; color: var(--amber-2); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, .text-btn:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 3px; }
.text-btn { background: none; border: 0; padding: 8px 4px; color: var(--amber-2); font: inherit; text-decoration: underline; cursor: pointer; }
.text-btn:disabled { opacity: .5; }
.link { margin: 14px 0 0; text-align: center; color: #9ea3c4; font-size: 14px; }
.hint { font-size: 13px; color: #9ea3c4; margin: 6px 0 0; min-height: 1em; }

.steps { margin: 4px 0 0; padding-left: 22px; }
.steps li { margin: 9px 0; }
.note { background: #ffffff0d; border-radius: 14px; padding: 12px 14px; font-size: 13.5px; color: var(--soft); margin: 16px 0 0; }
.note.warn { background: #4a3a1a; color: #ffd99a; }
.note b { color: #fff2d6; }
.banner { margin: 4px 0 8px; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.banner.info { background: #1d3d4a; color: #b5e6f2; }
.banner.bad { background: #4d2228; color: var(--bad); }
.dimmed { opacity: .35; }

.code { display: flex; gap: 5px; justify-content: center; margin: 10px 0 4px; }
.code i {
  font-style: normal; width: 30px; height: 46px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1.5px solid #ffb54d99; background: var(--field);
  font: 700 22px/1 ui-monospace, Menlo, monospace; color: var(--amber-2);
}
.code i.gap { width: 8px; border: 0; background: none; }
.code-input { height: 58px; text-align: center; font: 700 26px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-2); }

.status { text-align: center; color: #9ea3c4; font-size: 14px; }
.status.mt { margin-top: 20px; }
.status i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6c7196; margin-right: 7px; vertical-align: 1px; }
.cnt { display: flex; justify-content: space-between; margin-top: 4px; }
.cnt div { display: flex; flex-direction: column; }
.cnt div:last-child { text-align: right; }
.cnt small { font-size: 12px; color: #9ea3c4; }
.cnt strong { font-size: 19px; color: var(--amber-2); text-shadow: 0 0 12px #ffb54d55; }

.sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; background: #05061099; }
.sheet > div {
  width: 100%; max-width: 480px; background: #1f2547; border-top: 1px solid var(--line);
  border-radius: 24px 24px 0 0; padding: 20px 22px calc(22px + env(safe-area-inset-bottom));
}
.sheet h2 { margin: 0 0 8px; font-size: 18px; color: var(--amber-2); }
.sheet p { margin: 0 0 6px; color: var(--soft); }
.sheet-cancel { display: block; margin: 8px auto 0; }
.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 11;
  margin: 0; padding: 10px 14px; border-radius: 12px; background: #000c; color: #fff; font-size: 14px; white-space: nowrap;
}
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #ffb54d33; border-top-color: var(--amber); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }


/* Scene */
.n { font: 600 1.25em/1 "Pixelify Sans", ui-monospace, Menlo, monospace; margin-right: 2px; }
.scene-screen { padding: 8px 20px 0; min-height: 100dvh; }
.banner-slot:empty { display: none; }
.banner.warn { background: #4a3a1a; color: #ffd99a; }
.banner-slot .banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -8px 6px; }
.banner-btn { flex: none; border: 1.5px solid #ffd99a99; background: none; color: #ffe9bf; border-radius: 999px; padding: 6px 12px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
.scene-screen .top { padding: 4px 0 0; }
.scene-screen .cnt strong { font-size: 15px; line-height: 1.2; }
.scene-screen .cnt .n { font-size: 24px; }
.scene-screen .status { margin-top: 10px; font-size: 13px; min-height: 1.4em; }
.status i.on { background: #7fdc9a; }
.status i.live { background: #ffcf7a; box-shadow: 0 0 0 0 #ffcf7a88; animation: pulse 1.4s ease-out infinite; }
.status i.sk { background: #4a5080; animation: shimmer 1.2s ease-in-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px #ffcf7a00; } 100% { box-shadow: 0 0 0 0 #ffcf7a00; } }
@keyframes shimmer { 50% { opacity: .35; } }

.scene { position: relative; flex: 1; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; transition: opacity .3s; }
.scene.dim { opacity: .45; }
.glow { position: absolute; left: 50%; bottom: -30px; width: 320px; height: 200px; transform: translateX(-50%); background: radial-gradient(closest-side, #ffb54d3a, #ffb54d00); pointer-events: none; }
.msg { position: absolute; top: 14px; left: 0; right: 0; text-align: center; z-index: 1; pointer-events: none; }
.msg b { font: 700 20px/1.2 -apple-system, system-ui, sans-serif; color: var(--amber-2); letter-spacing: -.2px; }
.msg .n { font-size: 24px; }
.msg small { display: block; color: #b8bbd6; font-size: 13px; margin-top: 4px; }
.stage { width: 100%; flex: 1; min-height: 0; display: flex; align-items: flex-end; }
.stage svg.px { width: 100%; height: 100%; display: block; image-rendering: pixelated; shape-rendering: crispEdges; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 8px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 5px 11px; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; background: #ffffff10; color: var(--soft); }
.chip.ok { background: #1f4a33; color: #bff0d0; }
.chip.warn { background: #4a3a1a; color: #ffd99a; }
button.chip.warn { cursor: pointer; text-decoration: underline; }
.chip.action { background: #3a2f6b; color: #e4defc; }
button.chip.action { cursor: pointer; font-weight: 600; }
.chip.bad { background: #4d2228; color: var(--bad); }
.chip i.d { width: 7px; height: 7px; border-radius: 50%; background: var(--soft); }

/* Hold zone: no selection, no magnifier, no scrolling or zooming under the finger. */
.hold {
  position: relative; flex: none; margin: 10px 0 0; height: 140px; border-radius: 26px;
  border: 2px solid #ffb54d99; background: #ffffff08; box-shadow: 0 0 30px #ffb54d22, inset 0 0 30px #ffb54d10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.hold * { pointer-events: none; }
.hold b { font-size: 18px; font-weight: 600; }
.hold > span { font-size: 12.5px; color: #b8bbd6; margin-top: 4px; min-height: 1.2em; }
.hold.on { border-color: #ffcf7a; box-shadow: 0 0 50px #ffb54d66, inset 0 0 40px #ffb54d33; transform: scale(.985); }
.hold.on b { font-size: 24px; line-height: 1; color: var(--amber-2); }
.hold.on b .n { font-size: 1.25em; }
.hold.full { border-color: #7d82a8; box-shadow: none; cursor: default; }
.hold.off { border-color: #3a4170; box-shadow: none; background: #ffffff05; color: #9ea3c4; cursor: default; }
.scene-screen .foot { flex: none; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.scene-screen .foot .text-btn { color: #7d82a8; font-size: 12px; text-decoration: none; }
.toast[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .status i.live, .status i.sk { animation: none; }
  .hold, .scene { transition: none; }
}