/* Tropical Triki 1.1 — cheap frost chrome. Title paints the glass; lux lays it out. */

:root {
  --tt-ink: #f4fffc;
  --tt-muted: rgba(244, 255, 252, 0.72);
  --tt-accent: #5eead4;
  --tt-title-shadow: 0 1px 2px rgba(0, 12, 18, 0.55);
  --tt-title-shadow-compact: 0 1px 2px rgba(0, 12, 18, 0.5);
  --tt-glass: rgba(8, 32, 38, 0.48);
  --tt-glass-border: rgba(255, 255, 255, 0.22);
  --tt-glass-blur: 20px;
  --tt-glass-radius: 28px;
  --tt-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 28px rgba(4, 18, 24, 0.2);
  --tt-plate-glow: drop-shadow(0 6px 18px rgba(4, 36, 48, 0.28));
  --lmp-accent: #5eead4;
  --lmp-eq: #9be8ff;
  --lmp-track: rgba(255, 255, 255, 0.22);
  --lmp-rail: 5px;
  --lmp-btn-size: 36px;
  --lmp-btn-bg: transparent;
  --lmp-btn-hover: rgba(255, 255, 255, 0.12);
  --lmp-title-shadow: 0 1px 2px rgba(0, 10, 16, 0.78), 0 0 8px rgba(0, 12, 18, 0.42);
  --lux-metric-ink: 0 1px 2px rgba(0, 12, 18, 0.45);
  --lux-metric-gap: 0.45em;
  --lux-metrics-gap: 0.7em;
}

/* Root is the turquoise Safari samples for the status band and URL bar.
   #bg paints the island on top of it. */
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  color-scheme: dark;
  /* Turquoise, not transparent. A clear root is what Safari fills black
     behind the status band and the URL bar. */
  background: #2ec4b6;
  color: #fffef4;
  font-family: "SF Pro Display", "Avenir Next", "Segoe UI", ui-sans-serif, sans-serif;
  touch-action: none;
}

/* First-frame shell — same tracks as lux RESET so the first paint is final.
   latis.js must not change this layout when it arrives. */
html[data-lux-shell][data-o="w"] body {
  display: grid;
  grid-template-areas: "hat body tail" "head body tail" "foot body tail";
  grid-template-columns: var(--eh, 0px) minmax(0, 1fr) var(--et, 0px);
  grid-template-rows: auto minmax(0, 1fr) min-content;
}
html[data-lux-shell][data-o="t"] body {
  display: grid;
  grid-template-areas: "hat" "head" "body" "tail" "footer";
  grid-template-rows: auto var(--eh, 0px) minmax(0, 1fr) min-content min-content;
  grid-template-columns: minmax(0, 1fr);
}
html[data-lux-shell] lux-hat { grid-area: hat; }
html[data-lux-shell] lux-head { grid-area: head; }
html[data-lux-shell] lux-body { grid-area: body; }
html[data-lux-shell] lux-tail { grid-area: tail; }
html[data-lux-shell] lux-foot { grid-area: footer; }
html[data-lux-shell][data-o="w"] lux-foot { grid-area: foot; }
/* Logo stays in lux-head (the west rail), not lux-hat. Hat is a short north
   strip and would clip the wordmark. First row is the logo; the player row
   fills the rest of the rail and centers the card. !important beats the
   packer's equal 1fr split. ionic.games stays in lux-foot, the bottom cell. */
html[data-lux-shell][data-o="w"] lux-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) !important;
  place-content: start stretch;
  place-items: stretch;
  box-sizing: border-box;
  width: var(--eh, 0px);
  max-width: var(--eh, 0px);
  height: 100%;
  padding: 4px;
  gap: 6px;
}
/* Portrait head is logo + player, not a GLOW title strip. chromeSize writes a
   short --eh (~title + 12). Keep the first-paint bar so the row stays tall
   enough for the player. !important beats the engine's inline --eh. */
html[data-lux-shell][data-o="t"] {
  --eh: max(80px, min(112px, 22vmin)) !important;
  /* Tail was a 47px title strip, so the scoreboard pill shrink-wrapped
     under the readings. A slightly taller track lets the pill grow. */
  --et: 60px !important;
}
html[data-lux-shell][data-o="t"] lux-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-content: stretch;
  place-items: stretch;
  box-sizing: border-box;
  height: var(--eh, 0px);
  max-height: var(--eh, 0px);
  gap: 8px;
}

html[data-lux-shell],
html[data-lux-shell] body {
  background: #2ec4b6;
}

#boot-fill {
  width: 5%;
  height: 100%;
  background: #fffef4;
  border-radius: inherit;
}

#boot.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#hit {
  position: fixed;
  z-index: 2;
  display: grid;
  pointer-events: none;
  margin: 0;
}

#hit button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

lux-hat,
lux-head,
lux-body,
lux-tail,
lux-foot {
  z-index: 4;
  background: transparent;
}

/* Safari’s status band and URL bar are turquoise #2ec4b6 (theme-color).
   The scene eases into that color. No env() inside the gradient — Safari
   drops the whole fade when a stop uses env(), and the edge stays black.
   Chrome stays above this wash (z-index 4). */
@media (pointer: coarse) {
  html[data-lux-shell]::before,
  html[data-lux-shell]::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: 2;
    height: 168px;
    pointer-events: none;
  }
  html[data-lux-shell]::before {
    top: calc(env(safe-area-inset-top, 0px) * -1);
    height: calc(168px + env(safe-area-inset-top, 0px));
    background: linear-gradient(
      to bottom,
      #2ec4b6 0%,
      rgba(46, 196, 182, 0.72) 42%,
      rgba(46, 196, 182, 0.28) 72%,
      transparent 100%
    );
  }
  html[data-lux-shell]::after {
    bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
    height: calc(168px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(
      to top,
      #2ec4b6 0%,
      rgba(46, 196, 182, 0.72) 42%,
      rgba(46, 196, 182, 0.28) 72%,
      transparent 100%
    );
  }
}

lux-body {
  pointer-events: none;
}

lux-hat,
lux-head,
lux-tail,
lux-foot {
  pointer-events: none;
}

lux-hat > *,
lux-head > *,
lux-tail > *,
lux-foot > * {
  pointer-events: auto;
}

/* Custom glass plate + overlay grid. The image is the chrome; lux tags sit
   in the content well. Portrait drops the plate for a thin CSS frost bar. */
.tt-skin {
  position: relative;
  display: grid;
  grid-template: 1fr / 1fr;
  box-sizing: border-box;
  color: var(--tt-ink);
  text-shadow: var(--tt-title-shadow-compact);
}
.tt-skin-plate {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  overflow: visible;
  filter: var(--tt-plate-glow);
}
.tt-plate-bar { display: none; }
.tt-skin > lmp-player,
.tt-skin > lux-metrics,
.tt-skin > .tt-metrics {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Head: logo (image sibling, aspect locked) + music (leftover). Foot = ionic. */
html[data-lux-shell] lux-head > .tt-logo {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: none;
  overflow: visible;
  filter: none;
}
html[data-lux-shell] lux-head > .tt-logo img {
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: 480 / 368;
  max-width: 100%;
  max-height: none;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center top;
  filter: none;
  opacity: 1;
}

html[data-lux-shell] lux-head {
  background: transparent;
}
html[data-lux-shell] lux-head > .tt-music {
  box-sizing: border-box;
  place-items: start center;
  place-content: start;
  padding: 0;
}
html[data-lux-shell][data-o="w"] lux-head > .tt-logo {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: calc(var(--eh, 0px) - 8px);
  max-width: 100%;
  height: auto !important;
  max-height: none !important;
  align-self: start !important;
  justify-self: start !important;
  place-items: start stretch !important;
}
html[data-lux-shell][data-o="w"] lux-head > .tt-logo img {
  width: calc(var(--eh, 0px) - 8px);
  max-width: 100%;
  height: auto;
  max-height: none;
}
html[data-lux-shell][data-o="w"] lux-head > .tt-music {
  grid-row: 2 !important;
  grid-column: 1 !important;
  width: 100%;
  height: 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  place-items: center !important;
  place-content: center !important;
}
html[data-lux-shell][data-o="w"] lux-head > .tt-music > .tt-skin-player {
  width: min(200px, 22vw, 100%);
  max-width: 100%;
  min-width: 0;
  /* Size to the player, then the rail centers that box. A fixed 360/562
     plate was shorter than the controls, so the card hung below center. */
  aspect-ratio: auto;
  height: auto;
  margin: 0;
  justify-self: center !important;
  align-self: center !important;
}
html[data-lux-shell][data-o="w"] lux-head > .tt-music > .tt-skin-player > lmp-player {
  height: auto;
  width: 100%;
}

lmp-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "art" "title" "controls" "seek" "vol";
  align-content: start;
  gap: 8px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16% 12% 12%;
  box-sizing: border-box;
  background: none;
  border: 0;
  box-shadow: none;
}

lmp-art {
  grid-area: art;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: none;
}

lmp-title {
  grid-area: title;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--tt-ink);
  text-shadow: var(--lmp-title-shadow);
}

lmp-eq {
  grid-area: title;
  align-self: center;
  justify-self: stretch;
  z-index: 0;
  height: 36px;
  margin: 0;
  opacity: 0.52;
  pointer-events: none;
}
lmp-eq[rainbow],
lmp-eq[mode="rainbow"] {
  opacity: 0.9;
}

lmp-seek { grid-area: seek; display: block; color: var(--tt-muted); }
lmp-controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--tt-ink);
}
lmp-vol { grid-area: vol; color: var(--tt-muted); }
lmp-play {
  --lmp-btn-size: 44px;
  --lmp-btn-bg: #f4fffc;
  color: #0b3a42;
}

html[data-lux-shell] lux-tail {
  overflow: visible;
  background: transparent;
  place-items: center;
  place-content: center;
}
/* Portrait tail is a 1-column grid. Without a definite column, width:100%
   on the pill cycles and the bar collapses to the metric row. */
html[data-lux-shell][data-o="t"] lux-tail {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  align-items: center;
}
html[data-lux-shell][data-o="w"] lux-tail {
  height: 100%;
  place-items: center;
  place-content: center;
}
html[data-lux-shell][data-o="w"] lux-tail > .tt-skin-metrics {
  width: min(188px, 20vw, 100%);
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 360 / 562;
  height: auto;
  margin: 0;
  justify-self: center;
  align-self: center;
}

html[data-lux-shell] lux-tail lux-metrics.tt-metrics,
html[data-lux-shell] lux-tail .tt-metrics {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin: 0;
  padding: 18% 12% 16%;
  box-sizing: border-box;
  background: none;
  border: 0;
  box-shadow: none;
}
/* One row: icon, name, value. Child text used to be copied into the label
   and the live value was written again, so each reading showed twice. */
html[data-lux-shell][data-o="w"] lux-tail lux-metric {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45em;
}
html[data-lux-shell][data-o="w"] lux-tail lux-metric::part(label) {
  flex: 1 1 auto;
  text-align: left;
}
html[data-lux-shell][data-o="w"] lux-tail lux-metric::part(value) {
  margin-left: auto;
  text-align: right;
  font-size: 22px;
}
html[data-lux-shell][data-o="w"] lux-tail lux-metric::part(icon) {
  height: 22px;
  width: 22px;
}

lux-metric {
  padding: 0.2em 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  color: var(--tt-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

lux-metric::part(icon) {
  height: 1.35em;
  width: 1.35em;
  filter: none;
}

lux-metric::part(name),
lux-metric::part(label) {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.86;
  justify-self: start;
  text-align: left;
}

lux-metric::part(value) {
  font-size: 22px;
  font-weight: 700;
  justify-self: end;
  text-align: right;
}

#metric-turn { color: var(--tt-ink); }
#metric-turn::part(value) { color: var(--tt-accent); }

/* Tall: full-width frost table at the bottom. Engine stacks icon+name
   over the value; titles only paint. */
html[data-lux-shell][data-o="t"] lux-tail > .tt-skin-metrics {
  width: calc(100% - 16px);
  max-width: none;
  min-width: 0;
  aspect-ratio: auto;
  height: 52px;
  min-height: 52px;
  margin: 0 auto;
  justify-self: center;
  align-self: center;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(8, 32, 38, 0.78);
  border: 1px solid var(--tt-glass-border);
  border-radius: 26px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--tt-glass-shadow);
}
html[data-lux-shell][data-o="t"] lux-tail > .tt-skin-metrics > .tt-skin-plate {
  display: none;
}
html[data-lux-shell][data-o="t"] lux-tail lux-metrics.tt-metrics,
html[data-lux-shell][data-o="t"] lux-tail .tt-metrics {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 18px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
html[data-lux-shell][data-o="t"] lux-metric {
  padding: 0.15em 0.2em;
  font-size: 11px;
  overflow: visible;
}
html[data-lux-shell][data-o="t"] lux-metric::part(icon) {
  height: 15px;
  width: 15px;
}
html[data-lux-shell][data-o="t"] lux-metric::part(name),
html[data-lux-shell][data-o="t"] lux-metric::part(label) {
  display: none;
}
html[data-lux-shell][data-o="t"] lux-metric::part(value) {
  font-size: 15px;
  min-width: 0;
  overflow: visible;
}

html[data-lux-shell] lux-foot {
  background: transparent;
  align-self: end;
  justify-content: center;
}

lux-foot #ionic-mark {
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
  opacity: 0.94;
}

lux-foot #ionic-mark img {
  display: block;
  height: min(28px, 4dvh);
  width: auto;
  max-width: min(160px, calc(var(--eh, 180px) - 16px));
  object-fit: contain;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.3));
}

html[data-lux-shell][data-o="t"] lux-foot {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 2px 0 8px;
}
html[data-lux-shell][data-o="t"] lux-foot #ionic-mark {
  margin: 0 auto;
}
html[data-lux-shell][data-o="t"] lux-foot #ionic-mark img {
  height: 14px;
  max-width: 88px;
}

/* Tall chrome follows lux data-o, not the window orientation media query.
   A phone frame inside a landscape desktop window is still data-o=t. */
html[data-lux-shell][data-o="t"] lux-head {
  align-self: start;
  column-gap: 8px;
}
html[data-lux-shell][data-o="t"] lux-head > .tt-logo {
  width: auto;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  justify-self: start;
}
html[data-lux-shell][data-o="t"] lux-head > .tt-logo img {
  height: 100%;
  width: auto;
  max-height: 100%;
  max-width: min(46vw, 220px);
}
html[data-lux-shell][data-o="t"] lux-head > .tt-music {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  padding: 2px 4px;
  place-items: stretch;
  place-content: stretch;
  align-self: stretch;
}
html[data-lux-shell][data-o="t"] lux-head > .tt-music > .tt-skin-player {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 14px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--tt-glass-shadow);
}
html[data-lux-shell][data-o="t"] lux-head > .tt-music > .tt-skin-player > .tt-plate-card {
  display: none;
}
html[data-lux-shell][data-o="t"] lux-head > .tt-music > .tt-skin-player > .tt-plate-bar {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: none;
  border-radius: inherit;
  z-index: 0;
}
html[data-lux-shell][data-o="w"] lux-head > .tt-music > .tt-skin-player > .tt-plate-bar {
  display: none;
}
html[data-lux-shell][data-o="t"] lmp-player {
  --lmp-btn-size: clamp(22px, calc(var(--eh, 80px) * 0.28), 28px);
  --lmp-rail: 4px;
  --tt-art: calc(var(--eh, 80px) - 8px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  grid-template-columns: var(--tt-art) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "art title title" "art controls vol";
  align-items: center;
  align-content: stretch;
  gap: 0 8px;
  padding: 4px 8px;
}
html[data-lux-shell][data-o="t"] lmp-art {
  grid-area: art;
  box-sizing: border-box;
  aspect-ratio: 1;
  width: var(--tt-art);
  height: var(--tt-art);
  max-width: var(--tt-art);
  max-height: none;
  min-width: 0;
  min-height: 0;
  align-self: center;
  justify-self: start;
  overflow: hidden;
  border-radius: 8px;
}
html[data-lux-shell][data-o="t"] lmp-title {
  grid-area: title;
  display: flex;
  align-self: stretch;
  align-items: flex-end;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(14px, calc(var(--eh, 80px) * 0.19), 16px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-shadow: var(--lmp-title-shadow);
}
html[data-lux-shell][data-o="t"] lmp-title::part(text) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
html[data-lux-shell][data-o="t"] lmp-eq {
  display: block;
  grid-area: title;
  align-self: stretch;
  justify-self: stretch;
  z-index: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0.48;
  pointer-events: none;
}
html[data-lux-shell][data-o="t"] lmp-eq[rainbow],
html[data-lux-shell][data-o="t"] lmp-eq[mode="rainbow"] {
  opacity: 0.92;
}
html[data-lux-shell][data-o="t"] lmp-seek { display: none; }
html[data-lux-shell][data-o="t"] lmp-controls {
  grid-area: controls;
  align-self: center;
  justify-content: flex-start;
  min-width: 0;
  width: auto;
  height: var(--lmp-btn-size);
  gap: 4px;
}
html[data-lux-shell][data-o="t"] lmp-prev,
html[data-lux-shell][data-o="t"] lmp-next,
html[data-lux-shell][data-o="t"] lmp-play {
  display: inline-flex;
  flex: 0 0 var(--lmp-btn-size);
  width: var(--lmp-btn-size);
  height: var(--lmp-btn-size);
}
html[data-lux-shell][data-o="t"] lmp-vol {
  display: flex;
  grid-area: vol;
  align-self: center;
  align-items: center;
  min-width: 0;
  width: 100%;
  height: var(--lmp-btn-size);
  gap: 6px;
  color: var(--tt-ink);
}
html[data-lux-shell][data-o="t"] lmp-vol::part(min) { display: none; }
html[data-lux-shell][data-o="t"] lmp-vol::part(max) {
  display: block;
  width: 16px;
  height: 16px;
  opacity: 1;
}
html[data-lux-shell][data-o="t"] lmp-vol::part(range) {
  min-width: 0;
  height: 18px;
}
html[data-lux-shell][data-o="t"] lmp-vol::part(fill) {
  background: var(--lmp-accent, #5eead4);
}
html[data-lux-shell][data-o="t"] lmp-play {
  --lmp-btn-size: clamp(22px, calc(var(--eh, 80px) * 0.28), 28px);
  --lmp-btn-bg: #f4fffc;
  color: #0b3a42;
}

/* Phone-short wide: the 86px plate cannot hold 36/44px buttons + seek/vol.
   Reserve a controls row inside the card and shrink the well. */
@media (max-height: 520px) {
  html[data-lux-shell][data-o="w"] lmp-player {
    box-sizing: border-box;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 14% 10% 12%;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "art" "title" "controls";
    align-content: stretch;
    overflow: hidden;
  }
  html[data-lux-shell][data-o="w"] lmp-art {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    justify-self: center;
  }
  html[data-lux-shell][data-o="w"] lmp-title {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    min-height: 0;
  }
  html[data-lux-shell][data-o="w"] lmp-eq { height: 22px; opacity: 0.48; }
  html[data-lux-shell][data-o="w"] lmp-seek,
  html[data-lux-shell][data-o="w"] lmp-vol { display: none; }
  html[data-lux-shell][data-o="w"] lmp-controls {
    width: 100%;
    min-width: 0;
    height: 28px;
    justify-content: space-between;
    gap: 0;
  }
  html[data-lux-shell][data-o="w"] lmp-prev,
  html[data-lux-shell][data-o="w"] lmp-next,
  html[data-lux-shell][data-o="w"] lmp-play {
    display: inline-flex;
    flex: 0 0 var(--lmp-btn-size);
    width: var(--lmp-btn-size);
    height: var(--lmp-btn-size);
  }
  html[data-lux-shell][data-o="w"] lmp-prev,
  html[data-lux-shell][data-o="w"] lmp-next { --lmp-btn-size: 22px; }
  html[data-lux-shell][data-o="w"] lmp-play {
    --lmp-btn-size: 28px;
    --lmp-btn-bg: #f4fffc;
    color: #0b3a42;
  }
}

/* Hold ` / ~ — engine sets html[data-d]; outline packed chrome cells. */
html[data-d] :is(lux-hat, lux-head, lux-body, lux-tail) :is(lux-cell, lux-box, lux) {
  outline: 1px solid #8888;
}
html[data-d] :is(lux-cell, lux-box, lux)[data-p]::after {
  content: attr(data-p);
  position: absolute;
  top: 2px;
  left: 3px;
  z-index: 4;
  padding: 1px 4px;
  font: 600 10px / 1.2 ui-monospace, monospace;
  color: #f0d27a;
  background: #000a;
  pointer-events: none;
}