@font-face { font-family: "Anton"; src: url(/fonts/anton.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url(/fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
/* Tik Rok Live. Brand: Tik Rok red on black (brand.json). The one bold thing is the studio ON AIR lamp:
   the live badge, the empty state and the host's Go Live button are all the same lit sign. Everything else is quiet. */
:root {
  --red: #E02028;          /* brand red */
  --hot: #FF2A1F;          /* the lamp's lit core */
  --black: #101010;        /* brand black */
  --deck: #1A1918;         /* raised surfaces: warm, like a mixing desk */
  --rule: #2C2A28;
  --paper: #F8F8F8;        /* brand white */
  --dim: #A39E98;          /* quiet words, warm grey */
  --glow: rgba(255, 42, 31, .55);
  --display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: 16px;
  --radio-h: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--paper); font: 400 16px/1.45 var(--text); -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; padding-bottom: calc(var(--radio-h) + env(safe-area-inset-bottom)); }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; border-radius: 6px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) var(--gut) 10px; background: linear-gradient(var(--black) 70%, transparent); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-word { font: 400 26px/1 var(--display); letter-spacing: .01em; }
.top-actions { display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 0; background: var(--paper); color: var(--black); font-weight: 700; text-decoration: none; cursor: pointer; }
.pill-ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--rule); }
.pill-ghost#nav-golive { box-shadow: inset 0 0 0 1.5px var(--red); color: #ffd9d6; }

/* the ON AIR lamp */
.lamp { font-family: var(--display); letter-spacing: .04em; color: #fff; background: radial-gradient(ellipse at 50% 40%, var(--hot), var(--red) 70%);
  border-radius: 8px; padding: 4px 10px 3px; font-size: 15px; line-height: 1; box-shadow: 0 0 0 2px #5a0d0d, 0 0 18px var(--glow);
  text-shadow: 0 0 8px rgba(255, 220, 200, .8); display: inline-block; }
.lamp-sm { font-size: 13px; padding: 3px 8px 2px; }
.lamp-off { background: #2a1513; color: #6f4a46; text-shadow: none; box-shadow: 0 0 0 2px #3a1d1a; }
@media (prefers-reduced-motion: no-preference) {
  .lamp:not(.lamp-off) { animation: hum 2.8s ease-in-out infinite; }
  @keyframes hum { 50% { box-shadow: 0 0 0 2px #5a0d0d, 0 0 26px var(--glow); } }
}

/* home */
.home { padding: 4px var(--gut) 24px; max-width: 760px; margin: 0 auto; }
.h-display { font: 400 44px/1 var(--display); margin: 8px 0 0; letter-spacing: .01em; }
.onair-row { display: flex; align-items: baseline; gap: 12px; }
.count { color: var(--dim); font-weight: 600; }
.h-section { font: 400 24px/1.1 var(--display); margin: 32px 0 12px; color: var(--paper); }
.live-list { display: grid; gap: 14px; margin-top: 16px; }
.live-card { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--deck); text-decoration: none; aspect-ratio: 4 / 5; }
@media (min-width: 620px) { .live-list { grid-template-columns: 1fr 1fr; } }
.live-card .thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.live-card .shade { position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(16, 16, 16, .92)); }
.live-card .lamp { position: absolute; top: 14px; left: 14px; }
.live-card .meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 12px; padding: 16px; }
.live-card .medal { width: 64px; height: 64px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px var(--black); }
.live-card .name { font: 400 30px/1 var(--display); display: block; }
.live-card .title { color: #e6e1dc; display: block; margin-top: 4px; font-stretch: 90%; }
.live-card .watching { position: absolute; top: 16px; right: 16px; background: rgba(16, 16, 16, .7); border-radius: 999px; padding: 4px 10px; font-size: 14px; font-weight: 600; }
.empty { margin-top: 18px; padding: 28px 20px; border-radius: 18px; background: var(--deck); text-align: center; }
.empty .lamp { font-size: 22px; padding: 8px 18px 6px; }
.empty-title { font-weight: 700; font-size: 19px; margin: 18px 0 4px; }
.empty-sub { color: var(--dim); margin: 0; }
.next-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.next-list li { display: grid; grid-template-columns: 76px 40px 1fr; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.next-list time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--paper); }
.next-list img { width: 40px; height: 40px; border-radius: 50%; }
.next-list .show { font-weight: 600; }
.next-list .show small { display: block; color: var(--dim); font-weight: 400; }
.host-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.host-shelf a { text-decoration: none; text-align: center; font-size: 14px; font-weight: 600; }
.host-shelf img { width: 100%; aspect-ratio: 1; border-radius: 50%; display: block; margin-bottom: 6px; }
.host-shelf a.is-live img { box-shadow: 0 0 0 3px var(--red), 0 0 18px var(--glow); }

/* watch + go live share the stage */
.watch, .golive { display: grid; grid-template-rows: auto 1fr; min-height: calc(100dvh - 56px - var(--radio-h)); }
@media (min-width: 900px) { .watch, .golive { grid-template-columns: 1fr 380px; grid-template-rows: 1fr; max-width: 1280px; margin: 0 auto; gap: 16px; padding: 0 var(--gut); } }
.stage { position: relative; background: #000; aspect-ratio: 9 / 13; max-height: 70dvh; width: 100%; overflow: hidden; }
@media (min-width: 900px) { .stage { aspect-ratio: auto; max-height: none; height: calc(100dvh - 120px); border-radius: 18px; } }
.stage video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; position: relative; z-index: 0; }
.unmute, .floaters, .offair, .host-tools, .host-chat { z-index: 2; }
.stage-top { z-index: 3; }
.stage-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 12px;
  background: linear-gradient(rgba(0, 0, 0, .6), transparent); }
.back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(16, 16, 16, .6); }
.stage-top .medal { width: 40px; height: 40px; border-radius: 50%; }
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.who strong { font: 400 20px/1.05 var(--display); }
.who span { color: #ddd; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unmute { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); border: 0; border-radius: 999px; padding: 12px 20px;
  background: var(--paper); color: var(--black); font-weight: 800; cursor: pointer; }
.offair { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(16, 16, 16, .85); text-align: center; padding: 24px; }
.floaters { position: absolute; right: 10px; bottom: 70px; width: 90px; height: 60%; pointer-events: none; overflow: hidden; }
.floater { position: absolute; bottom: 0; font-size: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .floater { animation: rise 2.6s ease-out forwards; }
  @keyframes rise { to { transform: translate(var(--dx, 0), -320px) scale(1.2); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .floater { opacity: 0; transition: opacity 2s; } }

.room { display: flex; flex-direction: column; min-height: 0; background: var(--black); }
.room-bar { padding: 10px var(--gut); border-bottom: 1px solid var(--rule); }
.viewers { color: var(--dim); font-size: 14px; font-weight: 600; display: block; margin-bottom: 8px; }
.react { display: flex; gap: 8px; overflow-x: auto; }
.r { flex: none; min-width: 48px; height: 48px; border-radius: 14px; border: 0; background: var(--deck); font-size: 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.r-wide { padding: 0 16px; font: 800 16px/1 var(--text); }
.r[aria-pressed="true"] { background: var(--red); color: #fff; }
.r:active { transform: scale(.94); background: var(--rule); }
.chat { list-style: none; margin: 0; padding: 8px var(--gut); overflow-y: auto; flex: 1; min-height: 160px; max-height: 40dvh; }
@media (min-width: 900px) { .chat { max-height: none; } }
.chat li { padding: 5px 0; line-height: 1.35; overflow-wrap: anywhere; }
.chat b { font-weight: 700; margin-right: 6px; }
.chat .sys { color: var(--dim); font-style: italic; }
.chat .jarvis b { color: #ffb4ad; }
.say { display: flex; gap: 8px; padding: 10px var(--gut) 14px; border-top: 1px solid var(--rule); }
.say input { flex: 1; min-width: 0; height: 44px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--deck); padding: 0 16px; }
.say-signin { margin: 10px var(--gut) 14px; }

/* go live */
.stage-host video { transform: scaleX(-1); }
.stage-host.rear video { transform: none; }
.clock { font: 400 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.host-tools { position: absolute; right: 12px; top: 72px; display: grid; gap: 10px; }
.tool { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(16, 16, 16, .65); display: grid; place-items: center; cursor: pointer; }
.tool[aria-pressed="true"] { background: var(--red); }
.host-chat { position: absolute; left: 12px; right: 72px; bottom: 12px; max-height: 40%; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px; font-size: 15px; text-shadow: 0 1px 3px #000; }
.host-panel { padding: 16px var(--gut) 24px; display: grid; gap: 16px; align-content: start; }
.field span { display: block; color: var(--dim); font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field input { width: 100%; height: 48px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--deck); padding: 0 14px; }
.onair-button { border: 0; background: none; padding: 0; cursor: pointer; justify-self: center; }
.lamp-face { display: block; font: 400 40px/1 var(--display); letter-spacing: .05em; padding: 22px 46px 18px; border-radius: 16px; color: #ffe9e6;
  background: radial-gradient(ellipse at 50% 35%, var(--hot), var(--red) 65%, #8c1014); box-shadow: 0 0 0 3px #5a0d0d, 0 8px 30px var(--glow);
  text-shadow: 0 0 12px rgba(255, 230, 220, .9); }
.onair-button.is-live .lamp-face { background: #2a1513; color: #f0b3ad; text-shadow: none; box-shadow: 0 0 0 3px #5a0d0d; }
.onair-button:disabled { opacity: .5; cursor: wait; }
.hint { color: var(--dim); text-align: center; margin: 0; font-size: 15px; }

/* radio bar */
.radio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: calc(var(--radio-h) + env(safe-area-inset-bottom));
  padding: 0 var(--gut) env(safe-area-inset-bottom); background: var(--deck); border-top: 1px solid var(--rule); }
.radio-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--red); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.radio-play svg { fill: currentColor; stroke: none; }
.radio-play .i-pause, .radio.playing .radio-play .i-play { display: none; }
.radio.playing .radio-play .i-pause { display: inline; }
.radio-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.radio-text span { color: var(--dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-community { font-weight: 700; font-size: 14px; text-decoration: none; padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--radio-h) + 16px + env(safe-area-inset-bottom)); z-index: 40;
  background: var(--paper); color: var(--black); font-weight: 700; padding: 12px 18px; border-radius: 12px; max-width: calc(100vw - 32px); }
.center-note { display: grid; place-items: center; min-height: 50dvh; }

/* the stage screens are full-bleed: their own back button replaces the top bar; no radio while a host is on camera */
body.on-stage .top { display: none; }
body.on-stage .watch, body.on-stage .golive { min-height: calc(100dvh - var(--radio-h)); }
body.on-golive { padding-bottom: 0; }
body.on-golive .radio { display: none; }
body.on-stage .stage-top { padding-top: calc(12px + env(safe-area-inset-top)); }

/* embedded on a community page ( ?embed=1 ): no top bar, no radio bar */
body.embed { padding-bottom: 0; }
body.embed .top, body.embed .radio { display: none; }

/* chat moderation (the room's host or a community moderator): tap a message -> hide it or remove the member */
.chat li.modable, .host-chat .modable { cursor: pointer; border-radius: 6px; }
.chat li.modable:hover, .chat li.modable:focus-visible { background: var(--deck); outline: none; box-shadow: inset 3px 0 0 var(--red); padding-left: 8px; }
.host-chat .modable { pointer-events: auto; }
.modsheet { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; justify-items: center; background: rgba(0, 0, 0, .6); }
.modsheet[hidden] { display: none; }
.modsheet-card { width: min(440px, 100%); background: var(--deck); border-top: 3px solid var(--red); border-radius: 16px 16px 0 0;
  padding: 18px var(--gut) calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.mod-head { margin: 0; color: var(--dim); }
.mod-head b { color: var(--paper); }
.mod-said { margin: 0 0 6px; padding: 10px 12px; background: var(--black); border-radius: 10px; overflow-wrap: anywhere; max-height: 30vh; overflow-y: auto; }
.mod-btn { width: 100%; min-height: 48px; justify-content: center; }
.mod-danger { background: var(--red); color: #fff; }
.mod-cancel { min-height: 44px; background: none; border: 0; color: var(--dim); font: inherit; font-weight: 700; cursor: pointer; }
.mod-btn:focus-visible, .mod-cancel:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
@media (min-width: 700px) { .modsheet { align-items: center; } .modsheet-card { border-radius: 16px; } }