/* Kimachi theme. Proposed colours (cream, charcoal, golden yellow), not an official palette:
   change the variables here to retheme every screen. */
:root {
  --cream: #fff4dc;
  --cream-2: #f6e5bf;
  --card: #fffaf0;
  --charcoal: #2a2420;
  --charcoal-2: #4b4038;
  --muted: #7b6a5b;
  --gold: #e9b949;
  --gold-deep: #b97f12;
  --danger: #b8432f;
  --ok: #3f7d3a;
  --line: rgba(42, 36, 32, 0.12);
  --radius: 1.1rem;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --font-pixel: "Pixelify Sans", var(--font); /* headings and big numbers; falls back offline */
  --font-clock: "Jersey 10", var(--font-pixel); /* clock, date, big temperature: clear 2 and 5 (compare on /fonts.html) */
  --sky: #cde4f4;       /* page background; changes with the time of day below */
  --ink: #26304d;       /* big text and pixel borders */
  --pixel: 0.25em;      /* thickness of the stepped pixel borders */
  --pixel-border:
    calc(-1 * var(--pixel)) 0 0 0 var(--ink), var(--pixel) 0 0 0 var(--ink),
    0 calc(-1 * var(--pixel)) 0 0 var(--ink), 0 var(--pixel) 0 0 var(--ink);

}

/* Time of day (set by lib/util.js): warm peach dawn, soft baby-blue day, lavender dusk, and a dim navy night
   with light text so the screen doesn't glare in a dark living room. The pixel "sparkles" become stars at night. */
[data-time="dawn"] { --sky: #f7dcc9; }
[data-time="day"] { --sky: #cde4f4; }
[data-time="dusk"] { --sky: #dcd0ee; --ink: #2f2a4a; }
[data-time="night"] {
  --sky: #161b33; --card: #232a4a; --cream: #232a4a; --cream-2: #333b64;
  --charcoal: #efe7d6; --charcoal-2: #cfc6b4; --muted: #9d98b4; --line: rgba(255, 255, 255, 0.12);
  --ink: #aab6ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--charcoal);
  background-color: var(--sky);
  /* soft square "pixel sparkles" */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35));
  background-size: 0.5em 0.5em, 0.35em 0.35em;
  background-position: 3em 2em, 7em 6em;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

/* A trail of pixel cheetah paw prints behind everything, a shade darker than the page colour (follows the
   time-of-day theme because it's mixed from --sky). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--sky) 91%, #000);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cg transform='translate(3 3)'%3E%3Crect x='3' y='0' width='2' height='3'/%3E%3Crect x='7' y='0' width='2' height='3'/%3E%3Crect x='0' y='3' width='2' height='3'/%3E%3Crect x='10' y='3' width='2' height='3'/%3E%3Crect x='4' y='5' width='4' height='1'/%3E%3Crect x='3' y='6' width='6' height='3'/%3E%3Crect x='4' y='9' width='4' height='1'/%3E%3C/g%3E%3Cg transform='translate(19 18)'%3E%3Crect x='3' y='0' width='2' height='3'/%3E%3Crect x='7' y='0' width='2' height='3'/%3E%3Crect x='0' y='3' width='2' height='3'/%3E%3Crect x='10' y='3' width='2' height='3'/%3E%3Crect x='4' y='5' width='4' height='1'/%3E%3Crect x='3' y='6' width='6' height='3'/%3E%3Crect x='4' y='9' width='4' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 11em 11em repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cg transform='translate(3 3)'%3E%3Crect x='3' y='0' width='2' height='3'/%3E%3Crect x='7' y='0' width='2' height='3'/%3E%3Crect x='0' y='3' width='2' height='3'/%3E%3Crect x='10' y='3' width='2' height='3'/%3E%3Crect x='4' y='5' width='4' height='1'/%3E%3Crect x='3' y='6' width='6' height='3'/%3E%3Crect x='4' y='9' width='4' height='1'/%3E%3C/g%3E%3Cg transform='translate(19 18)'%3E%3Crect x='3' y='0' width='2' height='3'/%3E%3Crect x='7' y='0' width='2' height='3'/%3E%3Crect x='0' y='3' width='2' height='3'/%3E%3Crect x='10' y='3' width='2' height='3'/%3E%3Crect x='4' y='5' width='4' height='1'/%3E%3Crect x='3' y='6' width='6' height='3'/%3E%3Crect x='4' y='9' width='4' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 11em 11em repeat;
}

button, input, select { font: inherit; color: inherit; }
button {
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 0.55em 1.1em;
  background: var(--charcoal);
  color: var(--cream);
  font-weight: 600;
}
button.secondary { background: var(--cream-2); color: var(--charcoal); }
button.danger { background: var(--danger); color: #fff; }
button.gold { background: var(--gold); color: var(--charcoal); }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
input[type="text"], input[type="url"], input[type="password"], input[type="number"] {
  border: 2px solid var(--line);
  background: var(--card);
  border-radius: 0.7em;
  padding: 0.55em 0.75em;
  width: 100%;
}
a { color: var(--gold-deep); }

/* Pixel card: a stepped border on four sides leaves the corners notched, like a pixel-art panel. */
.card {
  background: var(--card); border-radius: 0; padding: 1.1em 1.3em; margin: var(--pixel);
  box-shadow: var(--pixel-border), 0 calc(3 * var(--pixel)) 0 0 rgba(38, 48, 77, 0.22);
}
/* Same notched border without the panel, for QR codes, thumbnails and big buttons. */
.pixel-frame { border-radius: 0; margin: var(--pixel); box-shadow: var(--pixel-border); }
button.pixel-frame { box-shadow: var(--pixel-border), 0 var(--pixel) 0 var(--pixel) rgba(38, 48, 77, 0.3); }
button.pixel-frame:active { transform: translateY(var(--pixel)); }
h1, h2, h3 { font-family: var(--font-pixel); font-weight: 700; letter-spacing: 0.02em; }
.badge {
  display: inline-block; font-size: 0.7em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2em 0.6em; border-radius: 999px; background: var(--cream-2); color: var(--charcoal-2); vertical-align: middle;
}
.badge.demo { background: var(--charcoal); color: var(--gold); }
.badge.warn { background: #f7d7cf; color: var(--danger); }
.badge.ok { background: #dcebd5; color: var(--ok); }
.muted { color: var(--muted); }
.error { color: var(--danger); font-weight: 600; }
[hidden] { display: none !important; }

/* ---------- Kimachi (pixel sprite, animated by lib/kimachi.js) ---------- */
.kimachi canvas { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* ---------- Karaoke song search results (lib/util.js songPicks): 3 rows on screen, scroll and snap for the rest ---------- */
.picks { max-height: calc(3 * 86px); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; }
.picks:not(:empty) { margin-top: 4px; }
.pick { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; height: 76px; margin-top: 10px; padding: 6px; border-radius: 0; text-align: left; font-weight: 400; scroll-snap-align: start; scroll-margin-top: 10px; }
.pick img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pick b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
.pick span { font-size: 13px; }