/* The human jukebox: wayfinder song selector.
   Designed at 1080 x 1920 portrait. Every size is written in design pixels times --s,
   which is 1px on a 1080-wide screen and shrinks with the viewport on narrower ones,
   so the same portrait layout fills the width of a phone or a window. Wider screens
   keep the 1080 column centred.
   Prosus Strategy Share tokens: square corners, no shadows, vertical gradients only. */

@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/Geist-Light.woff2") format("woff2"); }
/* Season Mix is licensed and not in the repository (see fonts/README.md).
   Once fonts/SeasonMix-Regular.woff2 is in place, uncomment the url() line. */
@font-face {
  font-family: "Season Mix"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Season Mix"), local("SeasonMix-Regular"), local("Seasons Mix")
       /* , url("fonts/SeasonMix-Regular.woff2") format("woff2") */;
}

:root {
  --black: #000000; --blue: #004ed0; --grey: #bfbfbf; --ink: #f7f7f7; --ink-dark: #03212b;
  --display: "Season Mix", "Seasons Mix", Georgia, serif;
  --body: "Geist", system-ui, sans-serif;
  /* one design pixel */
  --s: min(calc(100vw / 1080), 1px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--black); overflow: hidden;
  /* Kiosk: no zoom, no selection, no callouts, no rubber-banding */
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}
img { -webkit-user-drag: none; }
button {
  background: none; border: 0; margin: 0; padding: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.stage { position: fixed; inset: 0; overflow: hidden; background: var(--black); }
.screen {
  width: calc(1080 * var(--s)); height: 100%; margin: 0 auto; position: relative; overflow: hidden;
  background: var(--black); color: var(--ink); font-family: var(--body);
  display: flex; flex-direction: column;
}

.bg {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(1100 * var(--s)); pointer-events: none; will-change: transform;
  background: linear-gradient(180deg, #bfbfbf 0, #bfbfbf calc(260 * var(--s)), #6f90c6 calc(520 * var(--s)), #004ed0 calc(660 * var(--s)), #001942 calc(860 * var(--s)), #000000 calc(1100 * var(--s)));
}
.scroll {
  flex: 1; position: relative; z-index: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  padding-bottom: calc(200 * var(--s)); touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.scroll::-webkit-scrollbar { display: none; }

header { padding: calc(72 * var(--s)) calc(64 * var(--s)) 0; display: flex; flex-direction: column; gap: calc(40 * var(--s)); }
.logo { align-self: flex-start; position: relative; padding: calc(4 * var(--s)) 0; }
.logo img { display: block; height: calc(84 * var(--s)); width: auto; }
/* Hidden operator zone over the blue mark: invisible, no feedback */
.logo .secret { position: absolute; left: calc(-8 * var(--s)); top: calc(-8 * var(--s)); width: calc(96 * var(--s)); height: calc(108 * var(--s)); opacity: 0; outline: none; }
h1 { margin: 0; font-family: var(--display); font-size: calc(96 * var(--s)); line-height: 1; font-weight: 400; color: var(--black); }
.subline { margin: calc(16 * var(--s)) 0 0; font-size: calc(26 * var(--s)); line-height: 1.4; color: var(--ink-dark); }

.setlist { padding: calc(140 * var(--s)) calc(64 * var(--s)) 0; display: flex; flex-direction: column; gap: calc(28 * var(--s)); }
.setlist-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(24 * var(--s)); }
h2 { margin: 0; font-family: var(--display); font-size: calc(48 * var(--s)); line-height: 1.1; font-weight: 400; color: var(--ink); }
.count { font-size: calc(20 * var(--s)); color: var(--grey); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(48 * var(--s)) calc(28 * var(--s)); }
.card { display: flex; flex-direction: column; gap: calc(16 * var(--s)); min-width: 0; }
.art {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background-size: 100% 420%; background-color: var(--black); transition: transform .12s ease-out;
}
.art.photo { background-size: cover; background-position: center; }
.card:active .art { transform: scale(.97); }
.plus { position: absolute; right: calc(14 * var(--s)); bottom: calc(14 * var(--s)); width: calc(76 * var(--s)); height: calc(76 * var(--s)); background: var(--blue); display: flex; align-items: center; justify-content: center; }
.plus svg { width: calc(30 * var(--s)); height: calc(30 * var(--s)); }
.flash {
  position: absolute; inset: 0; background: rgba(0, 78, 208, .94); display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(16 * var(--s)); color: #fff; font-size: calc(26 * var(--s)); animation: fade .15s ease-out;
}
.flash svg { width: calc(64 * var(--s)); height: calc(64 * var(--s)); }
.card.sent .flash { display: flex; }
.title { display: block; font-size: calc(26 * var(--s)); line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { display: block; font-size: calc(20 * var(--s)); line-height: 1.4; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.message { padding: calc(240 * var(--s)) calc(64 * var(--s)) 0; display: flex; flex-direction: column; gap: calc(32 * var(--s)); }
.message h2 { font-size: calc(96 * var(--s)); line-height: 1; }
.message p { margin: 0; font-size: calc(32 * var(--s)); line-height: 1.4; color: var(--grey); }

/* The dialog always sits above the list (z-index 100 > the scroll container's 1). */
.overlay { position: absolute; inset: 0; z-index: 100; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; }
.overlay[hidden] { display: none; }
.dialog {
  width: calc(820 * var(--s)); background: linear-gradient(180deg, #000000 26%, #004ed0 100%); border: max(1px, calc(1.5 * var(--s))) solid var(--grey);
  padding: calc(72 * var(--s)) calc(64 * var(--s)) calc(64 * var(--s)); display: flex; flex-direction: column; align-items: center; gap: calc(28 * var(--s)); text-align: center; animation: fade .15s ease-out;
}
.check { width: calc(120 * var(--s)); height: calc(120 * var(--s)); background: var(--blue); display: flex; align-items: center; justify-content: center; }
.check svg { width: calc(64 * var(--s)); height: calc(64 * var(--s)); }
.dialog h2 { font-size: calc(72 * var(--s)); line-height: 1.05; }
.dialog p { margin: 0; font-size: calc(28 * var(--s)); line-height: 1.4; color: var(--ink); }
.done { margin-top: calc(16 * var(--s)); height: calc(88 * var(--s)); min-width: calc(320 * var(--s)); padding: 0 calc(40 * var(--s)); background: var(--ink); color: var(--black); font-size: calc(28 * var(--s)); text-align: center; }
.done:active { opacity: .85; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .art, .flash, .dialog { transition: none; animation: none; } }