:root{
  --bg1:#0b0b0f;
  --bg2:#151525;
  --paper:#f5f0df;
  --ink:#221c14;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#eee; }

body{
  background:
    radial-gradient(1200px 600px at 50% 10%, rgba(125,249,255,.10), transparent 60%),
    radial-gradient(900px 500px at 20% 80%, rgba(255,120,180,.08), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px 4px;
}

/* Flipbook */
.flipbook{
  width: min(810px, 96vw);
  height: 320px; /* slightly shorter: only 10 rows now */
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
  touch-action: pan-y;
}

/* Page states */
.page{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform-origin: 50% 50%;
  transform: rotateY(18deg) translateX(10px) scale(.995);
}
.page.active{
  opacity:1;
  pointer-events:auto;
  transform: rotateY(0deg) translateX(0) scale(1);
}

/* Slow horizontal flip */
.page.enter-from-right{ opacity:1; transform: rotateY(70deg) translateX(42px) scale(.99); }
.page.enter-from-left { opacity:1; transform: rotateY(-70deg) translateX(-42px) scale(.99); }
.page.leaving-to-left { opacity:1; transform: rotateY(-70deg) translateX(-42px) scale(.99); }
.page.leaving-to-right{ opacity:1; transform: rotateY(70deg) translateX(42px) scale(.99); }

.page.animating{
  transition:
    transform 700ms cubic-bezier(.2,.85,.2,1),
    opacity 520ms ease;
}

.pageInner{
  height:100%;
  padding: 12px;
  border-radius: 18px;
  border:1px solid rgba(215,202,166,.35);
  background:
    linear-gradient(180deg, rgba(215,202,166,.18), rgba(0,0,0,.10)),
    radial-gradient(900px 420px at 50% 10%, rgba(255,255,255,.10), transparent 50%);
}

.stripPanel{
  height:100%;
  border-radius: 14px;
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, var(--paper), #efe3c4);
  color: var(--ink);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.stripHeader{
  padding: 8px 14px 6px;
  border-bottom: 3px solid rgba(180,40,40,.65);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.0));
}
.pageCodeBig{
  font-weight: 1000;
  letter-spacing:.22em;
  font-size: 1.05rem;
}

/* Two-column grid (5 rows x 2 columns) */
.stripGrid{
  flex:1;
  padding: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(44px, auto);
  gap: 8px 10px;
}

/* Rows */
.stripRow{
  display:grid;
  grid-template-columns: 42px 1fr 72px;
  gap:10px;
  align-items:center;

  padding: 7px 9px;
  border-radius: 12px;

  border: 1px solid rgba(180,40,40,.28);
  background: rgba(255,255,255,.18);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.stripRow:active{ transform: translateY(1px); }

.stripRow .k{
  font-weight:1000;
  font-size: 1.0rem;
  letter-spacing:.06em;
  text-align:center;
  border:1px solid rgba(34,28,20,.18);
  border-radius: 10px;
  padding: 6px 0;
  background: rgba(34,28,20,.05);
}

/* Server truncates to 18 chars + "..."; keep layout safe */
.songTitle{
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size: .86rem;
  line-height:1.02;
  white-space:nowrap;
  overflow:hidden;
}
.songArtist{
  margin-top:3px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: .66rem;
  opacity:.75;
  white-space:nowrap;
  overflow:hidden;
}

.stripRow .r{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 900;
  letter-spacing:.10em;
  text-align:right;
  opacity:.75;
  font-size: .82rem;
}

.stripRow.selected{
  outline: 3px solid rgba(125,249,255,.28);
  background: rgba(125,249,255,.10);
}

.stripRow.empty{
  opacity:.55;
  cursor: default;
}
.stripRow.empty:active{ transform:none; }

/* Ultra-minimal player dock */
.playerDock{
  padding: 4px 10px 8px;
  display:flex;
  justify-content:center;
}

.player{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;

  border-radius: 12px;
  border:1px solid rgba(215,202,166,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.14));
  box-shadow: 0 8px 16px rgba(0,0,0,.22);
}

.playerUltra{
  width: min(560px, 94vw);
  padding: 6px 8px;
}

.nowPlayingUltra{
  min-width: 140px;
  max-width: 220px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.npLine{
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.npTiny{
  font-size: .70rem;
  font-weight: 900;
  letter-spacing:.14em;
  opacity:.72;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.audioUltra{
  width: min(330px, 94vw);
  height: 26px;
}