/* Orbit's TV interface, rebuilt in CSS. Sizes are the app's own dp values on a 960 × 540 dp screen:
   --dp scales them with the TV, so the screen looks the same at any width. Colours follow Theme.kt,
   with the app's Violet accent. */

.tv {
  position: relative;
  padding: 0.8%;
  border-radius: clamp(10px, 1.4vw, 20px);
  background: linear-gradient(160deg, #22202c, #0d0c12 40%, #08070c);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 50px 120px -30px rgba(0, 0, 0, 0.85),
    0 0 140px -20px rgba(139, 108, 255, 0.35);
}
.tv::after {
  /* the foot's shadow on the "table" */
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -9%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  filter: blur(6px);
  pointer-events: none;
}
.tv__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(4px, 0.7vw, 10px);
  background: #0b0c10;
  container-type: inline-size;
}
.tv__screen::after {
  /* glass reflection */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 32%, rgba(255, 255, 255, 0) 33%);
  pointer-events: none;
}

.ui {
  --dp: calc(100cqw / 960);
  --acc: #bf5af2;
  --bg: #0b0c10;
  --bg-top: #161824;
  --panel: #14151b;
  --card: #1d1e26;
  --card-hi: #2a2b36;
  --t1: #f5f5f7;
  --t2: #a1a1aa;
  --t3: #6e6e78;
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--t1);
  background: linear-gradient(180deg, var(--bg-top), var(--bg) 45%, var(--bg));
  line-height: 1.25;
  letter-spacing: 0;
  user-select: none;
}
.ui * { transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }

/* Top bar */
.ui-top {
  position: relative;
  z-index: 3;
  background: var(--bg-top);
  display: flex;
  align-items: center;
  padding: calc(18 * var(--dp)) calc(40 * var(--dp)) calc(6 * var(--dp));
}
.ui-chip {
  display: grid;
  place-items: center;
  width: calc(30 * var(--dp));
  height: calc(30 * var(--dp));
  margin-right: calc(14 * var(--dp));
  border-radius: 50%;
  background: var(--c);
  font-size: calc(14 * var(--dp));
  font-weight: 700;
  transition: background-color 0.3s;
}
.ui-word {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--dp));
  font-size: calc(21 * var(--dp));
  font-weight: 700;
}
.ui-word i {
  width: calc(22 * var(--dp));
  height: calc(22 * var(--dp));
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), #8e7cff);
}
.ui-tabs { display: flex; gap: calc(4 * var(--dp)); margin-left: auto; }
.ui-pill {
  padding: calc(8 * var(--dp)) calc(16 * var(--dp));
  border-radius: 999px;
  font-size: calc(14 * var(--dp));
  font-weight: 500;
  color: var(--t2);
  transition: transform 140ms, background-color 140ms, color 140ms;
}
.ui-pill.is-sel { background: var(--card-hi); color: var(--t1); font-weight: 600; }
.ui-pill.is-focus { background: #fff; color: #000; font-weight: 600; transform: scale(1.08); }
.ui-clock { margin-left: calc(18 * var(--dp)); font-size: calc(16 * var(--dp)); font-weight: 500; color: var(--t2); }

/* Home hero */
.ui-scroll { transition: transform 420ms cubic-bezier(0.2, 0, 0, 1); }
.ui-hero {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(250 * var(--dp));
  margin: calc(8 * var(--dp)) calc(32 * var(--dp)) 0;
  padding: calc(28 * var(--dp)) calc(36 * var(--dp));
  border-radius: calc(26 * var(--dp));
  overflow: hidden;
  background: linear-gradient(135deg, var(--card), var(--tint, rgba(191, 90, 242, 0.35)), var(--panel));
}
.ui-hero::before {
  content: '';
  position: absolute;
  right: calc(-60 * var(--dp));
  top: 50%;
  width: calc(460 * var(--dp));
  height: calc(460 * var(--dp));
  margin-top: calc(-230 * var(--dp));
  background: radial-gradient(closest-side, var(--glow, rgba(191, 90, 242, 0.6)), transparent);
}
.ui-hero__copy { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-micro { font-size: calc(11 * var(--dp)); font-weight: 600; letter-spacing: calc(0.6 * var(--dp)); color: rgba(255, 255, 255, 0.75); }
.ui-display {
  margin-top: calc(6 * var(--dp));
  font-size: calc(34 * var(--dp));
  font-weight: 700;
  letter-spacing: calc(-0.5 * var(--dp));
  white-space: nowrap;
}
.ui-live, .ui-meta {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--dp));
  margin-top: calc(6 * var(--dp));
  font-size: calc(18 * var(--dp));
  font-weight: 500;
}
.ui-meta { font-size: calc(15 * var(--dp)); color: rgba(255, 255, 255, 0.78); }
.ui-dot {
  width: calc(9 * var(--dp));
  height: calc(9 * var(--dp));
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 calc(8 * var(--dp)) var(--live);
  animation: ui-pulse 1.6s ease-in-out infinite;
}
@keyframes ui-pulse { 50% { opacity: 0.35; } }
.ui-time {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--dp));
  margin-top: calc(8 * var(--dp));
  font-size: calc(13 * var(--dp));
  color: rgba(255, 255, 255, 0.75);
}
.ui-time .ui-progress { width: calc(200 * var(--dp)); }
.ui-progress {
  position: relative;
  display: block;
  height: calc(3 * var(--dp));
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.ui-progress i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #fff; }
.ui-btns { display: flex; gap: calc(12 * var(--dp)); margin-top: calc(20 * var(--dp)); }
.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--dp));
  padding: calc(12 * var(--dp)) calc(22 * var(--dp));
  border-radius: calc(12 * var(--dp));
  background: var(--card);
  font-size: calc(16 * var(--dp));
  font-weight: 600;
  transition: transform 140ms, background-color 140ms, color 140ms;
}
.ui-btn svg { width: calc(14 * var(--dp)); height: calc(14 * var(--dp)); fill: currentColor; }
.ui-btn--primary { background: var(--acc); }
.ui-btn.is-focus { background: #fff; color: #000; transform: scale(1.06); }
.ui-hero__art {
  position: relative;
  flex-shrink: 0;
  width: calc(300 * var(--dp));
  height: calc(169 * var(--dp));
  margin-left: calc(24 * var(--dp));
  border-radius: calc(20 * var(--dp));
}

/* Monogram tiles (Orbit draws these when a channel has no logo) */
.mono {
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 55% 50%), hsl(calc(var(--h) + 40) 65% 28%));
}
.ui-hero__art.mono { font-size: calc(44 * var(--dp)); }
.mono--sm {
  position: absolute;
  left: calc(10 * var(--dp));
  top: calc(10 * var(--dp));
  width: calc(34 * var(--dp));
  height: calc(34 * var(--dp));
  border-radius: calc(9 * var(--dp));
  font-size: calc(13 * var(--dp));
  box-shadow: 0 calc(4 * var(--dp)) calc(12 * var(--dp)) rgba(0, 0, 0, 0.45);
}

/* Shelves */
.ui-shelf { padding: calc(20 * var(--dp)) 0 0; }
.ui-shelf__title {
  display: block;
  margin: 0 calc(40 * var(--dp)) calc(10 * var(--dp));
  font-size: calc(19 * var(--dp));
  font-weight: 600;
}
.ui-row { display: flex; gap: calc(16 * var(--dp)); padding: 0 calc(40 * var(--dp)); }
.ui-card {
  position: relative;
  flex: 0 0 calc(206 * var(--dp));
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--dp));
  transition: transform 140ms;
  transform-origin: 50% 40%;
}
.ui-card .art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: calc(14 * var(--dp));
  overflow: hidden;
  transition: box-shadow 140ms;
}
.ui-card .art b {
  position: absolute;
  left: calc(12 * var(--dp));
  bottom: calc(10 * var(--dp));
  right: calc(12 * var(--dp));
  font-size: calc(15 * var(--dp));
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.ui-card .ui-progress { margin: calc(-14 * var(--dp)) calc(10 * var(--dp)) calc(8 * var(--dp)); }
.ui-card__name { font-size: calc(14 * var(--dp)); font-weight: 600; }
.ui-card__sub { margin-top: calc(-2 * var(--dp)); font-size: calc(12 * var(--dp)); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-card--ch .ui-progress { margin: 0; }
.ui-card.is-focus { transform: scale(1.06); z-index: 2; }
.ui-card.is-focus .art {
  box-shadow: 0 0 0 calc(2 * var(--dp)) rgba(255, 255, 255, 0.85), 0 calc(14 * var(--dp)) calc(30 * var(--dp)) rgba(0, 0, 0, 0.7);
}

/* Options sheet (hold OK) */
.ui-sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: calc(360 * var(--dp));
  padding: calc(40 * var(--dp)) calc(26 * var(--dp));
  background: rgba(20, 21, 27, 0.96);
  box-shadow: calc(-30 * var(--dp)) 0 calc(80 * var(--dp)) rgba(0, 0, 0, 0.6);
  transform: translateX(105%);
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
}
.ui-sheet.is-open { transform: none; }
.ui-sheet__title { font-size: calc(24 * var(--dp)); font-weight: 600; }
.ui-sheet__sub { margin: calc(6 * var(--dp)) 0 calc(22 * var(--dp)); font-size: calc(13 * var(--dp)); line-height: 1.4; color: var(--t2); }
.ui-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(12 * var(--dp));
  padding: calc(11 * var(--dp)) calc(14 * var(--dp));
  border-radius: calc(12 * var(--dp));
  font-size: calc(15 * var(--dp));
  font-weight: 500;
  transition: transform 140ms, background-color 140ms, color 140ms;
}
.ui-action i { width: calc(18 * var(--dp)); font-style: normal; text-align: center; color: var(--t2); }
.ui-action small { flex-basis: 100%; padding-left: calc(30 * var(--dp)); font-size: calc(12 * var(--dp)); color: var(--t2); }
.ui-action.is-focus { background: #fff; color: #000; transform: scale(1.03); }
.ui-action.is-focus i, .ui-action.is-focus small { color: rgba(0, 0, 0, 0.6); }

/* ---------- Artwork (all invented: no real posters or logos) ---------- */

.art { background-color: #222; }
.art--coast {
  background:
    radial-gradient(circle at 68% 52%, #ffe2a8 0 7%, rgba(255, 226, 168, 0) 7.5%),
    radial-gradient(120% 60% at 68% 55%, rgba(255, 170, 110, 0.55), rgba(255, 170, 110, 0) 60%),
    linear-gradient(180deg, #f6a26b 0%, #cf6a7f 40%, #4b2f72 58%, #1a2148 59%, #0f1834 100%);
}
.art--salt {
  background:
    radial-gradient(80% 50% at 30% 20%, rgba(170, 245, 255, 0.8), rgba(170, 245, 255, 0) 70%),
    repeating-linear-gradient(170deg, rgba(255, 255, 255, 0) 0 6%, rgba(255, 255, 255, 0.12) 6.5% 7%),
    linear-gradient(180deg, #2bb5c8, #13698a 50%, #0a2b45);
}
.art--moons {
  background:
    radial-gradient(circle at 70% 34%, #ffe8b4 0 13%, rgba(255, 232, 180, 0) 13.5%),
    radial-gradient(circle at 40% 62%, #ffcf8a 0 6%, rgba(255, 207, 138, 0) 6.5%),
    radial-gradient(circle at 70% 34%, rgba(255, 220, 160, 0.35), rgba(255, 220, 160, 0) 35%),
    linear-gradient(180deg, #1f2756, #0d1031);
}
.art--kitchen {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 240, 200, 0.6), rgba(255, 240, 200, 0) 30%),
    linear-gradient(160deg, #ffb35c, #d9482b 55%, #3f121d);
}
.art--velocity {
  background:
    radial-gradient(60% 80% at 75% 50%, rgba(255, 61, 127, 0.55), rgba(255, 61, 127, 0) 70%),
    linear-gradient(112deg, #0b0f2a 0 44%, #ff3d7f 44% 46%, #0b0f2a 46% 58%, #28d7ff 58% 59.5%, #0b0f2a 59.5%);
}
.art--velocity2 {
  background:
    radial-gradient(60% 80% at 25% 50%, rgba(40, 215, 255, 0.5), rgba(40, 215, 255, 0) 70%),
    linear-gradient(68deg, #0b0f2a 0 40%, #28d7ff 40% 42%, #0b0f2a 42% 52%, #ffcf3d 52% 53.5%, #0b0f2a 53.5%);
}
.art--harbour {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 9%, rgba(10, 14, 24, 0.55) 9% 11%),
    linear-gradient(180deg, #a3b2c4, #4a5a72 48%, #1a2232 49%, #0d121c);
}
.art--mesa {
  background:
    radial-gradient(circle at 78% 26%, #fff1c9 0 6%, rgba(255, 241, 201, 0) 6.5%),
    linear-gradient(180deg, #ffd27f 0%, #f08a46 42%, #b4442e 43%, #6a1f2a 70%, #2e0f1b);
}
.art--aurora {
  background:
    radial-gradient(70% 30% at 40% 30%, rgba(80, 255, 170, 0.55), rgba(80, 255, 170, 0) 70%),
    radial-gradient(60% 30% at 70% 20%, rgba(190, 110, 255, 0.5), rgba(190, 110, 255, 0) 70%),
    linear-gradient(180deg, #071426, #0f3a3d 62%, #081a14 63%, #050d0a);
}
.art--pitch {
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0) 0 14%, rgba(255, 255, 255, 0.55) 14.5% 15.5%, rgba(255, 255, 255, 0) 16%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 49.6%, rgba(255, 255, 255, 0.55) 49.6% 50.4%, rgba(255, 255, 255, 0) 50.4%),
    linear-gradient(180deg, #121826 0 26%, rgba(0, 0, 0, 0) 26%),
    repeating-linear-gradient(90deg, #2f8f4e 0 12.5%, #2a8045 12.5% 25%);
}
.art--court {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 49.5%, rgba(255, 255, 255, 0.6) 49.5% 50.5%, rgba(255, 255, 255, 0) 50.5%),
    radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0) 0 12%, rgba(255, 255, 255, 0.6) 12.5% 13.5%, rgba(255, 255, 255, 0) 14%),
    linear-gradient(180deg, #2a1830 0 22%, #c96a3b 22%, #b45a30);
}
.art--track {
  background:
    repeating-linear-gradient(160deg, rgba(255, 255, 255, 0) 0 14%, rgba(255, 255, 255, 0.5) 14% 15%),
    radial-gradient(80% 60% at 70% 30%, rgba(255, 70, 70, 0.45), rgba(255, 70, 70, 0) 70%),
    linear-gradient(180deg, #2b2f3a, #14161d);
}
.art--news {
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(80, 140, 255, 0.7), rgba(80, 140, 255, 0) 70%),
    linear-gradient(180deg, #0c1c44, #071026);
}

/* ---------- Player (Merge scene) ---------- */

.ui--player { background: #000; }
.pitch { position: absolute; inset: 0; overflow: hidden; }
.pitch__grass {
  position: absolute;
  inset: -20% -30% -10%;
  background: repeating-linear-gradient(90deg, #2f8f4e 0 6%, #2a8045 6% 12%);
  transform: perspective(calc(600 * var(--dp))) rotateX(40deg);
  transform-origin: 50% 100%;
  animation: pan 9s ease-in-out infinite alternate;
}
.pitch__lines {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 22% 14% at 50% 66%, rgba(255, 255, 255, 0) 0 92%, rgba(255, 255, 255, 0.7) 93% 97%, rgba(255, 255, 255, 0) 98%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 49.7%, rgba(255, 255, 255, 0.65) 49.7% 50.3%, rgba(255, 255, 255, 0) 50.3%) 0 32% / 100% 100% no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 30%, #000 34%);
  mask: linear-gradient(180deg, transparent 30%, #000 34%);
  animation: pan 9s ease-in-out infinite alternate;
}
.pitch::before {
  /* stands */
  content: '';
  position: absolute;
  inset: 0 0 66% 0;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1%, rgba(0, 0, 0, 0) 1% 3%),
    linear-gradient(180deg, #0c1018, #1b2433);
}
.pitch__ball {
  position: absolute;
  left: 40%;
  top: 60%;
  width: calc(10 * var(--dp));
  height: calc(10 * var(--dp));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(4 * var(--dp)) calc(4 * var(--dp)) rgba(0, 0, 0, 0.4);
  animation: ball 3.4s ease-in-out infinite alternate;
}
.pitch__light {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 50% 0%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 70%);
}
@keyframes pan { to { transform: perspective(calc(600 * var(--dp))) rotateX(40deg) translateX(8%); } }
.pitch__lines { animation-name: pan-flat; }
@keyframes pan-flat { to { transform: translateX(6%); } }
@keyframes ball {
  0% { transform: translate(0, 0); }
  35% { transform: translate(calc(120 * var(--dp)), calc(-30 * var(--dp))); }
  70% { transform: translate(calc(60 * var(--dp)), calc(40 * var(--dp))); }
  100% { transform: translate(calc(220 * var(--dp)), calc(10 * var(--dp))); }
}
.ui--player.is-down .pitch *, .ui--player.is-down .pitch { animation-play-state: paused; }
.ui--player.is-down .pitch { filter: saturate(0.3) brightness(0.55); }

.ui-osd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: calc(14 * var(--dp));
  padding: calc(60 * var(--dp)) calc(40 * var(--dp)) calc(30 * var(--dp));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82));
}
.ui-osd__live {
  grid-row: span 2;
  padding: calc(4 * var(--dp)) calc(9 * var(--dp));
  border-radius: calc(6 * var(--dp));
  background: var(--live);
  font-size: calc(12 * var(--dp));
  font-weight: 700;
  letter-spacing: calc(0.6 * var(--dp));
}
.ui-osd__name { font-size: calc(24 * var(--dp)); font-weight: 700; }
.ui-osd__prog { grid-column: 2; font-size: calc(15 * var(--dp)); color: rgba(255, 255, 255, 0.78); }
.ui-osd .qtag { grid-row: 1 / span 2; grid-column: 3; font-size: calc(13 * var(--dp)); padding: calc(4 * var(--dp)) calc(10 * var(--dp)); }

.glitch {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 2px, rgba(0, 0, 0, 0) 2px 4px),
    linear-gradient(90deg, rgba(255, 0, 80, 0.18), rgba(0, 220, 255, 0.18));
  mix-blend-mode: screen;
  animation: glitch 0.35s steps(3) infinite;
  pointer-events: none;
}
@keyframes glitch {
  0% { transform: translate(0, 0); clip-path: inset(0 0 70% 0); }
  33% { transform: translate(-1.5%, 0); clip-path: inset(40% 0 30% 0); }
  66% { transform: translate(1.5%, 0); clip-path: inset(75% 0 5% 0); }
  100% { transform: translate(0, 0); clip-path: inset(10% 0 60% 0); }
}
.ui-reconnect {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--dp));
  padding: calc(12 * var(--dp)) calc(20 * var(--dp));
  border-radius: 999px;
  background: rgba(20, 21, 27, 0.9);
  font-size: calc(16 * var(--dp));
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.ui-reconnect i {
  width: calc(16 * var(--dp));
  height: calc(16 * var(--dp));
  border-radius: 50%;
  border: calc(2 * var(--dp)) solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ui-toast {
  position: absolute;
  top: calc(26 * var(--dp));
  right: calc(30 * var(--dp));
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--dp));
  padding: calc(12 * var(--dp)) calc(18 * var(--dp)) calc(12 * var(--dp)) calc(44 * var(--dp));
  border-radius: calc(14 * var(--dp));
  background: rgba(20, 21, 27, 0.94);
  font-size: calc(13 * var(--dp));
  color: var(--t2);
  opacity: 0;
}
.ui-toast::before {
  content: '';
  position: absolute;
  left: calc(16 * var(--dp));
  top: 50%;
  width: calc(16 * var(--dp));
  height: calc(16 * var(--dp));
  margin-top: calc(-8 * var(--dp));
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 calc(10 * var(--dp)) rgba(48, 209, 88, 0.7);
}
.ui-toast b { font-size: calc(15 * var(--dp)); color: var(--t1); }

/* ---------- Who's watching / profile homes (Learn scene) ---------- */

.ui--learn { background: linear-gradient(180deg, #161824, #0b0c10 60%); }
.ui-who {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #161824, #0b0c10);
}
.ui-who__title { font-size: calc(40 * var(--dp)); font-weight: 700; letter-spacing: calc(-0.5 * var(--dp)); }
.ui-who__row { display: flex; gap: calc(36 * var(--dp)); margin: calc(44 * var(--dp)) 0 calc(40 * var(--dp)); }
.ui-avatar { display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--dp)); transition: transform 160ms; }
.ui-avatar b {
  display: grid;
  place-items: center;
  width: calc(118 * var(--dp));
  height: calc(118 * var(--dp));
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 100%, #fff 18%), color-mix(in srgb, var(--c) 70%, #000));
  font-size: calc(48 * var(--dp));
  font-weight: 700;
  transition: box-shadow 160ms;
}
.ui-avatar span { font-size: calc(18 * var(--dp)); font-weight: 600; color: var(--t2); }
.ui-avatar--add b { background: var(--card); color: var(--t2); font-weight: 400; }
.ui-avatar.is-focus { transform: scale(1.1); }
.ui-avatar.is-focus b { box-shadow: 0 0 0 calc(3 * var(--dp)) #fff, 0 calc(16 * var(--dp)) calc(40 * var(--dp)) rgba(0, 0, 0, 0.6); }
.ui-avatar.is-focus span { color: var(--t1); }
.ui-who__hint { font-size: calc(13 * var(--dp)); color: var(--t3); white-space: pre; }

.ui-phome { position: absolute; inset: 0; }
.ui-heroes { position: relative; height: calc(196 * var(--dp)); margin-top: calc(8 * var(--dp)); }
.ui-hero--sm { position: absolute; inset: 0; height: auto; margin: 0 calc(32 * var(--dp)); }
.ui-hero--sm .ui-hero__art { width: calc(250 * var(--dp)); height: calc(141 * var(--dp)); }
.ui-hero--sm .ui-btns { margin-top: calc(16 * var(--dp)); }
.ui-rows { position: relative; height: calc(330 * var(--dp)); }
.ui-prow { position: absolute; left: 0; right: 0; top: 0; }
.ui-row--swap { position: relative; }
.ui-row__set { display: flex; gap: calc(16 * var(--dp)); }
.ui-row__set + .ui-row__set { position: absolute; inset: 0 calc(40 * var(--dp)); }
.ui-row--swap { display: block; padding: 0 calc(40 * var(--dp)); }