/* Reference: https://krch.wtf/about/styles/tokens.css
 * White paper, #0033ff ink, SB Sans, editorial titles and hand-drawn brand art.
 * Green illustrated room retained; original mascot SVG files are unmodified. */
body[data-design="green"] {
  --color-paper: #fff;
  --color-surface: #f5f5f5;
  --color-ink: #000;
  --color-muted: #666;
  --color-line: #e5e4e4;
  --color-accent: #0033ff;
  --color-accent-ink: #fff;
  --color-selected: #eef1ff;
  --color-focus: #0033ff;
  --color-blue: #0033ff;
  --color-player: #fff;
  --color-player-ink: #000;
  --color-player-muted: #666;
  --color-eva: #0033ff;
  --color-boris: #0033ff;
  --color-bubble: #f2f2f2;
  --color-bubble-ink: #000;
}
.brand-wordmark { width: 176px; height: 75px; display: block; }
.brand.slopcaster-brand { display: block; position: relative; color: #0033ff; padding-bottom: 9px; flex-shrink: 0; }
@font-face { font-family: "Slopcaster Hand"; src: url("assets/Caveat-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
.slopcaster-wordmark { display: block; font: 700 46px/1 "Slopcaster Hand", cursive; letter-spacing: -1.7px; text-transform: uppercase; transform: rotate(-3deg); }
.brand-scribble { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
[data-design="green"] .design-bar { display: none; }
[data-design="green"] .app-shell { max-width: 1520px; padding: 0 56px; gap: 0 40px; grid-template-columns: minmax(0, 1fr) 300px; }
[data-design="green"] .app-header { min-height: 126px; }
[data-design="green"] .brand { gap: 10px; color: var(--color-blue); }
[data-design="green"] .brand-radio { align-self: center; font-size: 19px; font-weight: 600; margin-top: 15px; }
[data-design="green"] .brand-dot { display: none; }
[data-design="green"] .header-caption { font-size: 12px; line-height: 1.55; }
[data-design="green"] .share-button { padding: 14px 20px; background: #f0f0f0; border-radius: 16px; font-size: 14px; font-weight: 600; }
[data-design="green"] .profile-button { background: var(--color-blue); color: #fff; width: 44px; height: 44px; }
[data-design="green"] .channel-rail { padding: 20px 0; gap: 12px; }
[data-design="green"] .channel-button { border-radius: 12px; font-size: 12px; padding: 10px 12px; }
[data-design="green"] .channel-button[aria-current="true"] { background: var(--color-blue); color: #fff; }
[data-design="green"] .all-channels { color: var(--color-blue); }
[data-design="green"] .main-content { padding-top: 36px; }
[data-design="green"] .intro { margin-bottom: 30px; }
[data-design="green"] h1 { font-family: "Times New Roman", Georgia, serif; font-size: clamp(52px,5.5vw,84px); line-height: .98; font-weight: 700; letter-spacing: -3.8px; }
[data-design="green"] .broadcast { border-radius: 16px; border: 1px solid var(--color-line); }
[data-design="green"] .player { color: #000; padding: 20px 24px; }
[data-design="green"] .play-button { background: var(--color-blue); color: #fff; border-radius: 16px; }
[data-design="green"] .player-copy strong { font-size: 13px; }
[data-design="green"] .player-copy>span { color: #666; font-size: 11px; }
[data-design="green"] .player-time { color: #666; }
[data-design="green"] .stage .host { width: 30%; bottom: 26%; }
[data-design="green"] .stage .host-eva { left: 15%; }
[data-design="green"] .stage .host-boris { right: 15%; }
.on-air-marker { padding: 6px 10px; border-radius: 99px; background: var(--color-overlay); }
[data-design="green"] .below-player { font-size: 11px; }
[data-design="green"] .below-player button { font-size: 11px; color: var(--color-blue); }
[data-design="green"] .chat-panel { padding-top: 38px; padding-left: 28px; }
[data-design="green"] .chat-heading h2 { font-size: 23px; font-weight: 700; }
[data-design="green"] .chat-heading>div>span { font-size: 12px; }
[data-design="green"] .chat-symbol { background: #eef1ff; color: var(--color-blue); }
[data-design="green"] .chat-message { font-size: 14px; line-height: 1.6; }
[data-design="green"] .chat-message strong { font-size: 13px; }
[data-design="green"] .chat-avatar { color: var(--color-blue); background: #eef1ff; }
[data-design="green"] .quick-prompts button { font-size: 11px; border-color: var(--color-line); }
[data-design="green"] #chat-form { background: #f5f5f5; border: 1px solid #eee; border-radius: 16px; }
[data-design="green"] #chat-input { font-size: 14px; }
[data-design="green"] .composer-bottom button { background: var(--color-blue); color: #fff; }
[data-design="green"] .call-button { background: var(--color-blue); color: #fff; border-radius: 16px; min-height: 54px; font-size: 14px; }
[data-design="green"] .on-topic { margin-top: 36px; }
[data-design="green"] .section-heading h2 { font-size: 22px; }
[data-design="green"] .story-text strong { font-size: 14px; }
[data-design="green"] .story-index { color: var(--color-blue); }
[data-design="green"] #modal-host-preview .krche-mascot { background: #242424; }
/* A clear dark silhouette area above the table, with separate label space. */
[data-design="green"] .stage .host { width: 34%; max-width: 340px; bottom: 25%; }
[data-design="green"] .stage .host-eva { left: 13%; }
[data-design="green"] .stage .host-boris { right: 13%; }
[data-design="green"] .stage .host-name { margin-top: 4px; white-space: nowrap; }
[data-design="green"] .on-air-marker { top: 15%; font-size: 9px; }
/* On Play the message gives way to one large, hand-inked audio trace. */
.player .waveform { display: none; }
.is-playing .player-copy { display: none; }
.is-playing .player .waveform {
  display: block; flex: 1; min-width: 0; max-width: none; height: 64px;
  color: var(--color-accent); align-self: center;
}
.waveform svg { display: block; width: 100%; height: 100%; overflow: visible; }
.waveform path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wave-ink { stroke-width: 3.2; }
.wave-echo { stroke-width: 1.1; opacity: .45; transform: translate(1px, 2px); }
[data-design="green"] .player { min-height: 104px; }
.play-button { flex-shrink: 0; }
@media (max-width: 1100px) {
  [data-design="green"] .app-shell { padding: 0 28px; gap: 0 24px; grid-template-columns: minmax(0,1fr) 275px; }
  [data-design="green"] .intro { padding-right: 0; }
  [data-design="green"] h1 { font-size: 60px; }
  [data-design="green"] .chat-panel { padding-left: 20px; }
}
@media (max-width: 800px) {
  [data-design="green"] .app-shell { grid-template-columns: minmax(0,1fr); grid-template-areas: "header" "rail" "main" "chat"; }
  [data-design="green"] .app-header { min-height: 105px; }
  [data-design="green"] .chat-panel { padding: 28px 0; border-left: 0; border-top: var(--rule); }
}
@media (max-width: 560px) {
  [data-design="green"] .app-shell { padding: 0 18px; }
  .brand-wordmark { width: 126px; height: 54px; }
  .slopcaster-wordmark { font-size: 32px; letter-spacing: -1.4px; }
  [data-design="green"] .app-header { min-height: 94px; }
  [data-design="green"] .brand { gap: 4px; }
  [data-design="green"] .brand-radio { font-size: 13px; margin-top: 10px; }
  [data-design="green"] .share-button { padding: 11px; border-radius: 12px; }
  [data-design="green"] .profile-button { width: 36px; height: 36px; }
  [data-design="green"] .header-actions { gap: 8px; }
  [data-design="green"] .channel-rail { padding: 14px 0; }
  [data-design="green"] .channel-button { font-size: 11px; padding: 8px; border-radius: 10px; }
  [data-design="green"] .main-content { padding-top: 28px; }
  [data-design="green"] .intro { margin-bottom: 24px; }
  [data-design="green"] h1 { font-size: clamp(42px,11.8vw,64px); letter-spacing: -2px; line-height: 1; }
  [data-design="green"] .stage .host { width: 44%; bottom: 26%; }
  [data-design="green"] .stage .host-eva { left: 3%; }
  [data-design="green"] .stage .host-boris { right: 3%; }
  [data-design="green"] .on-air-marker { top: 17%; font-size: 7px; padding: 5px 8px; }
  [data-design="green"] .room-caption { bottom: 5%; }
  [data-design="green"] .host-name { font-size: 9px; padding: 5px 9px; }
  [data-design="green"] .player { padding: 14px; }
  [data-design="green"] .player-copy strong { font-size: 10px; }
  [data-design="green"] .player-copy>span { font-size: 9px; }
  [data-design="green"] .below-player, [data-design="green"] .below-player button { font-size: 10px; }
  [data-design="green"] .section-heading h2 { font-size: 21px; }
  .is-playing .player .waveform { height: 50px; }
  [data-design="green"] .player { min-height: 84px; }
  .is-playing .player-icon[data-action="skip"] { display: none; }
}

/* Keep the single tagline in the header on narrow screens too. */
@media (max-width: 1190px) {
  [data-design] .app-header { flex-wrap: wrap; row-gap: 8px; padding-top: 16px; padding-bottom: 16px; }
  [data-design] .header-caption { display: block; order: 3; flex-basis: 100%; font-size: 11px; }
  .header-caption br { display: none; }
}