:root {
  color-scheme: dark;
  font-family: Outfit, Sora, Inter, Segoe UI, Arial, sans-serif;
  --bg: #11131c;
  --bg-deep: #07070d;
  --panel: rgba(18, 20, 34, .92);
  --panel-soft: rgba(255,255,255,.045);
  --panel-border: rgba(255,255,255,.08);
  --text: #f4f7fb;
  --muted: #8b91a7;
  --muted-2: #6f7596;
  --cyan: #25F4EE;
  --red: #FE2C55;
  --yellow: #FFC83D;
  --green: #33d69f;
  --violet: #b89dff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100vh; }
body {
  color: var(--text);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(37,244,238,.10), transparent 55%),
    radial-gradient(70% 70% at 80% 10%, rgba(254,44,85,.13), transparent 58%),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button {
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
  color: #071018;
  background: linear-gradient(90deg, var(--cyan), #7ff6f1);
  cursor: pointer;
  font-weight: 800;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
button:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.ghost {
  color: #cdd2e4;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
}
button.danger { color: #fff; background: linear-gradient(90deg, #ff9696, var(--red)); }
button.danger-secondary { background: linear-gradient(90deg, #ffd478, #ff9f55); color: #190b0b; }
input, select, textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.28);
  color: #fff;
  border-radius: 11px;
  padding: 10px 12px;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(37,244,238,.55);
  box-shadow: 0 0 0 3px rgba(37,244,238,.08);
}
textarea { resize: vertical; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; color: #dff9ff; }
code { color: var(--cyan); }

.app-shell {
  display: grid;
  grid-template-columns: minmax(380px, 430px) minmax(560px, 780px);
  gap: 28px;
  align-items: start;
  max-width: 1260px;
  margin: 0 auto;
  padding: 24px;
}
.stream-card, .control-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

/* Stream preview in admin */
.stream-card {
  min-height: 820px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), #ff5277);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  animation: pulseGlow 2.2s infinite;
}
.live-pill span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: liveDot 1.2s infinite;
}
.stream-title { min-width: 0; text-align: right; }
.eyebrow { margin: 0 0 2px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); font-weight: 900; }
h1 { margin: 0; font-size: 14px; line-height: 1.1; color: var(--muted); font-weight: 800; }
h2 { margin: 0; }
.badge { padding: 7px 10px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,.12); }
.badge.online { background: rgba(51,214,159,.14); color: #7ef2c6; }
.badge.offline { background: rgba(255,200,87,.14); color: #ffd478; }
.badge.error { background: rgba(255,91,91,.16); color: #ff9c9c; }
.progress-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: #cdd2e4; font-size: 12px; font-weight: 800; }
.progress-label strong { color: #fff; }
#appleCount { color: var(--cyan); }
.progress { height: 9px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); margin-top: 6px; }
#progressBar { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--red)); transition: width .35s ease; }
.board-wrap {
  /* v0.1.52: no CSS border here on purpose. The canvas itself draws the neon
     board frame (see draw() in app.js); a second CSS border on this wrapper
     was the cause of the "double Spielfeldrand" in the capture window. */
  position: relative;
  flex: 1;
  min-height: 500px;
  border-radius: 20px;
  background: #06060e;
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  overflow: hidden;
}
#gameCanvas { display: block; width: 100%; height: 100%; min-height: 500px; background: #06060e; }
.board-effect-badges {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}
.effect-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}
.shield-badge { color: #7ff6f1; background: rgba(37,244,238,.18); border: 1px solid rgba(37,244,238,.38); }
.speed-badge { color: #ffd970; background: rgba(255,200,61,.18); border: 1px solid rgba(255,200,61,.38); }
.combo-badge {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.50);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}
.combo-badge strong { color: var(--yellow); }
.runtime-notice {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.50);
  color: #dff9ff;
  text-align: center;
  font-size: 10px;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}
.hud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hud-grid div { padding: 8px 9px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.hud-grid span { display: block; color: #7c8299; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hud-grid strong { display: block; color: #fff; font-size: 18px; font-weight: 900; font-family: Sora, Outfit, sans-serif; }
.last-event-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px 8px 42px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(37,244,238,.14), rgba(254,44,85,.14));
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
}
.last-event-banner::before {
  content: '🎁';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}
.last-event-banner.event-pop { animation: tickerIn .28s ease-out; }
.supporter-panel { padding: 9px 10px; border-radius: 15px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,200,61,.16); }
.supporter-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 7px; }
.supporter-head span { color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.supporter-head strong { color: #7c8299; font-size: 11px; }
.supporter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.supporter-list li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 11px; background: rgba(0,0,0,.22); color: #dce7ff; font-size: 12px; }
.supporter-list .rank { color: var(--yellow); font-weight: 900; }
.supporter-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supporter-list .points { color: var(--yellow); font-weight: 900; }
.stream-action-guide { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.free-guide { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.guide-title {
  grid-column: 1 / -1;
  text-align: center;
  color: #cdd2e4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.combo-info {
  padding: 7px 10px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,200,61,.11), rgba(254,44,85,.08));
  border: 1px solid rgba(255,200,61,.16);
  text-align: center;
}
.combo-info strong { display: block; color: #ffd970; font-size: 11px; line-height: 1.1; }
.combo-info span { display: block; color: #aeb8d4; font-size: 10px; margin-top: 2px; }
.action-item { text-align: center; padding: 7px 3px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); animation: floatY 3.4s ease-in-out infinite; }
.gift-guide .action-item:nth-child(3) { border-color: rgba(255,200,61,.22); background: rgba(255,200,61,.08); animation-delay: .18s; }
.gift-guide .action-item:nth-child(4) { border-color: rgba(254,44,85,.24); background: rgba(254,44,85,.09); animation-delay: .36s; }
.gift-guide .action-item:nth-child(5) { border-color: rgba(37,244,238,.24); background: rgba(37,244,238,.08); animation-delay: .54s; }
.gift-guide .action-item:nth-child(6) { border-color: rgba(255,200,61,.22); background: rgba(255,200,61,.08); animation-delay: .72s; }
.action-item.free { border-color: rgba(51,214,159,.22); background: rgba(51,214,159,.075); }
.action-emoji { display: block; margin: 0 auto 3px; width: 20px; height: 20px; }
img.action-emoji { width: 100%; height: 100%; object-fit: contain; display: block; }
span.action-emoji { font-size: 19px; line-height: 20px; text-align: center; }
.action-item strong { display: block; color: #fff; font-size: 8.5px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-item span:not(.action-emoji) { display: block; margin-top: 2px; color: var(--cyan); font-size: 9.5px; font-weight: 900; }
.live-status, .effect-strip, .rules-strip, .event-feed { display: none; }
.event-feed ol { list-style: none; margin: 0; padding: 0; }

/* Studio layout */
.control-panel {
  padding: 0;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.admin-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), var(--red)); font-size: 21px; box-shadow: 0 0 28px rgba(37,244,238,.20); }
.admin-brand h2 { margin: 0; font-size: 17px; font-weight: 900; font-family: Sora, Outfit, sans-serif; white-space: nowrap; }
.admin-brand p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.admin-actions { display: flex; align-items: center; gap: 10px; }
.admin-conn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(51,214,159,.14); border: 1px solid rgba(51,214,159,.3); }
.admin-conn span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: liveDot 1.4s infinite; }
.admin-conn strong { color: #7ef2c6; font-size: 12px; }
.primary-action { white-space: nowrap; }
.admin-layout { display: grid; grid-template-columns: 186px minmax(0, 1fr); min-height: 600px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.18); }
.admin-nav button { text-align: left; padding: 11px 13px; border-radius: 11px; color: #cdd2e4; background: transparent; border: 0; font-size: 13.5px; font-weight: 800; }
.admin-nav button:hover, .admin-nav button.active { color: #fff; background: linear-gradient(90deg, rgba(37,244,238,.14), rgba(254,44,85,.10)); box-shadow: inset 3px 0 0 var(--cyan); }
.admin-hint-card { margin-top: auto; padding: 12px 13px; border-radius: 14px; background: rgba(37,244,238,.06); border: 1px solid rgba(37,244,238,.14); }
.admin-hint-card span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.admin-hint-card strong { display: block; color: var(--cyan); font-size: 16px; }
.admin-hint-card small { display: block; color: #a6adc4; line-height: 1.35; margin-top: 5px; }
.admin-content { padding: 18px; min-width: 0; max-height: calc(100vh - 142px); overflow: auto; scrollbar-width: thin; }
.admin-panel, .config-panel, .recorder-panel { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; }
.panel-title { margin-bottom: 14px; }
.panel-title h3, .admin-panel h3, .config-panel h3, .recorder-panel h3 { margin: 0; font-size: 18px; font-weight: 900; font-family: Sora, Outfit, sans-serif; }
.panel-title p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.form-grid { display: grid; gap: 12px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.control-panel label { display: grid; gap: 6px; color: #cdd8f7; font-size: 12px; font-weight: 700; }
.button-row { display: grid; gap: 8px; margin: 10px 0; }
.button-row.two { grid-template-columns: 1fr 1fr; }
.button-row.three { grid-template-columns: repeat(3, 1fr); }
.button-row.single { grid-template-columns: 1fr; }
.setup-list { margin: 12px 0 0; padding: 12px 12px 12px 30px; border-radius: 14px; color: #b6bcd0; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); font-size: 13px; line-height: 1.75; }
.ws-status, .mapping-status { margin: 10px 0; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.24); color: #dff9ff; font-size: 12px; border: 1px solid rgba(255,255,255,.08); }
.quick-tests { margin-top: 14px; }
.quick-tests p { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.a-chip { margin: 0 6px 8px 0; padding: 9px 11px; border-radius: 999px; color: #dff9ff; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10); display: inline-flex; align-items: center; gap: 6px; }
.chip-emote { width: 16px; height: 16px; object-fit: contain; display: block; }
.mapping-form { display: grid; grid-template-columns: 1.3fr 1fr .65fr; gap: 10px; align-items: end; margin-bottom: 12px; }
.gift-rows { display: grid; gap: 7px; max-height: 310px; overflow: auto; }
.gift-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 13px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.08); }
.gift-row strong { font-size: 12px; overflow-wrap: anywhere; }
.gift-row span { color: #b9c6e8; font-size: 12px; }
.gift-row button { padding: 8px 10px; background: #ffb0b0; }
.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.protection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.debug-panel dl { display: grid; gap: 8px; margin: 0 0 12px; }
.debug-panel dl div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: start; }
.debug-panel dt { color: var(--muted); font-size: 12px; }
.debug-panel dd { margin: 0; color: #f4f7fb; font-size: 12px; word-break: break-word; }
.debug-panel pre, .recorder-panel pre { max-height: 210px; overflow: auto; margin: 0; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.32); color: #dff9ff; font-size: 11px; white-space: pre-wrap; }
.recorder-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 12px; }
.recorder-status strong { color: #f4f7fb; }
.embedded-config, .embedded-recorder { margin-top: 16px; }
.note { margin: 12px 18px 16px; color: #8e9bbf; font-size: 13px; line-height: 1.45; }

/* Stream layout */
body.stream-mode {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(120% 80% at 50% 0%, #1c1430 0%, #0c0c16 55%, #07070d 100%);
}
body.stream-mode .app-shell {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  overflow: hidden;
}
body.stream-mode .stream-card {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: 9 / 16;
  min-height: 0;
  padding: clamp(8px, 1.25vh, 18px);
  gap: clamp(5px, .8vh, 10px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto auto;
  border-radius: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, #1c1430 0%, #0c0c16 55%, #07070d 100%);
  border: 0;
  box-shadow: none;
  overflow: hidden;
  -webkit-app-region: drag;
}
body.stream-mode .control-panel { display: none; }
body.stream-mode .runtime-notice { display: none; }
body.stream-mode .badge { display: none; }
body.stream-mode .board-wrap {
  height: 100%;
  min-height: 0;
  align-self: stretch;
}
body.stream-mode #gameCanvas {
  min-height: 0;
  height: 100%;
  image-rendering: auto;
}
body.stream-mode .live-status,
body.stream-mode .effect-strip,
body.stream-mode .rules-strip,
body.stream-mode .event-feed { display: none; }

body.stream-mode .live-pill { font-size: clamp(11px, 1.2vh, 16px); padding: clamp(6px, .72vh, 10px) clamp(10px, 1.15vh, 16px); gap: 7px; }
body.stream-mode .live-pill span { width: 8px; height: 8px; }
body.stream-mode .eyebrow { font-size: clamp(9px, .95vh, 13px); }
body.stream-mode h1 { font-size: clamp(13px, 1.35vh, 20px); color: #f4f7fb; }
body.stream-mode .progress-label { font-size: clamp(11px, 1.1vh, 16px); }
body.stream-mode .progress { height: clamp(5px, .72vh, 8px); margin-top: 4px; }
body.stream-mode .effect-badge { font-size: clamp(10px, 1vh, 13px); padding: 5px 8px; }
body.stream-mode .combo-badge { font-size: clamp(11px, 1.05vh, 14px); padding: 5px 9px; }
body.stream-mode .hud-grid { gap: clamp(4px, .65vh, 8px); }
body.stream-mode .hud-grid div { padding: clamp(6px, .85vh, 10px) clamp(7px, .95vh, 12px); border-radius: 14px; }
body.stream-mode .hud-grid span { font-size: clamp(8px, .9vh, 11px); }
body.stream-mode .hud-grid strong { font-size: clamp(18px, 2.2vh, 30px); }
body.stream-mode .last-event-banner { min-height: clamp(34px, 4.2vh, 54px); padding: 7px 10px 7px 36px; border-radius: 14px; font-size: clamp(12px, 1.25vh, 18px); }
body.stream-mode .last-event-banner::before { left: 11px; font-size: clamp(16px, 1.8vh, 21px); }
body.stream-mode .supporter-panel { padding: clamp(6px, .85vh, 10px) clamp(8px, 1vh, 12px); border-radius: 15px; overflow: hidden; }
body.stream-mode .supporter-head span, body.stream-mode .supporter-head strong { font-size: clamp(9px, 1vh, 13px); }
body.stream-mode .supporter-list { gap: 4px; max-height: clamp(30px, 5vh, 58px); overflow: hidden; }
body.stream-mode .supporter-list li { grid-template-columns: 24px 1fr auto; gap: 5px; padding: 4px 7px; border-radius: 10px; font-size: clamp(10px, 1.05vh, 14px); min-width: 0; }
body.stream-mode .stream-action-guide { gap: clamp(3px, .55vh, 6px); }
body.stream-mode .guide-title { font-size: clamp(8px, .9vh, 12px); line-height: 1; }
body.stream-mode .action-item { padding: clamp(4px, .65vh, 7px) 3px; border-radius: 11px; }
body.stream-mode .action-emoji { font-size: clamp(15px, 1.7vh, 24px); margin-bottom: 2px; }
body.stream-mode .action-item strong { font-size: clamp(8px, .95vh, 12px); }
body.stream-mode .action-item span:not(.action-emoji) { font-size: clamp(7.5px, .88vh, 11px); margin-top: 1px; }
body.stream-mode .combo-info { padding: clamp(4px, .65vh, 7px) 8px; border-radius: 12px; }
body.stream-mode .combo-info strong { font-size: clamp(9px, 1vh, 13px); }
body.stream-mode .combo-info span { font-size: clamp(8px, .9vh, 12px); margin-top: 1px; }

body.stream-mode .stream-header,
body.stream-mode .progress-wrap,
body.stream-mode .hud-grid,
body.stream-mode .last-event-banner,
body.stream-mode .supporter-panel,
body.stream-mode .stream-action-guide,
body.stream-mode .combo-info { min-height: 0; -webkit-app-region: drag; }
body.stream-mode .action-item,
body.stream-mode button,
body.stream-mode input,
body.stream-mode select,
body.stream-mode textarea { -webkit-app-region: no-drag; }
body.stream-mode .supporter-list li:only-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .control-panel { max-height: none; overflow: visible; }
  .admin-content { max-height: none; }
}
@media (max-width: 720px) {
  .admin-topbar, .admin-actions { align-items: stretch; flex-direction: column; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-nav { display: grid; grid-template-columns: repeat(2, 1fr); border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .admin-hint-card { display: none; }
  .form-grid.two, .mapping-form, .protection-grid, .button-row.two, .button-row.three { grid-template-columns: 1fr; }
}
@media (max-height: 780px) {
  body.stream-mode .stream-card { padding: 7px; gap: 4px; border-radius: 0; }
  body.stream-mode .stream-header { align-items: center; }
  body.stream-mode .progress { height: 5px; margin-top: 3px; }
  body.stream-mode .board-wrap { min-height: 0; }
  body.stream-mode .last-event-banner { min-height: 30px; padding-top: 5px; padding-bottom: 5px; font-size: 11px; }
  body.stream-mode .supporter-panel { padding: 5px 7px; }
  body.stream-mode .supporter-head { margin-bottom: 3px; }
  body.stream-mode .supporter-list { max-height: 24px; }
  body.stream-mode .supporter-list li { padding: 3px 5px; }
  body.stream-mode .action-item { padding: 3px 2px; }
  body.stream-mode .action-emoji { font-size: 14px; }
  body.stream-mode .combo-info span { display: none; }
}
@media (max-height: 660px) {
  body.stream-mode .combo-info { display: none; }
  body.stream-mode .supporter-panel { display: none; }
  body.stream-mode .stream-card { grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; }
  body.stream-mode .hud-grid div { padding: 5px 6px; }
  body.stream-mode .hud-grid strong { font-size: 17px; }
}

@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(254,44,85,.50); } 50% { box-shadow: 0 0 0 7px rgba(254,44,85,0); } }
@keyframes liveDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes tickerIn { from { transform: translateY(110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.mapping-panel,
.protection-panel,
.tikfinity-panel,
.recorder-panel,
.debug-panel,
.session-panel,
.config-panel { scroll-margin-top: 12px; }


/* v0.1.34 Mobile LIVE safe layout
   TikTok overlays cover top/bottom areas on phones. Keep important content inside the middle safe zone. */
body.stream-mode .stream-card {
  padding:
    clamp(46px, 7.2vh, 88px)
    clamp(16px, 5vw, 42px)
    clamp(220px, 31vh, 340px);
  gap: clamp(4px, .62vh, 7px);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
}

body.stream-mode .hud-grid,
body.stream-mode .supporter-panel,
body.stream-mode .combo-info {
  display: none;
}

body.stream-mode .stream-header {
  min-height: 0;
}

body.stream-mode .live-pill {
  padding: 5px 10px;
  font-size: clamp(10px, 1.05vh, 14px);
}

body.stream-mode .stream-title {
  max-width: 58%;
}

body.stream-mode .eyebrow {
  font-size: clamp(8px, .8vh, 11px);
  letter-spacing: .16em;
}

body.stream-mode h1 {
  font-size: clamp(11px, 1.05vh, 15px);
  line-height: 1.05;
}

body.stream-mode .progress-label {
  font-size: clamp(10px, .95vh, 13px);
}

body.stream-mode .progress {
  height: clamp(4px, .5vh, 6px);
}

body.stream-mode .board-wrap {
  width: min(100%, 46vh);
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  align-self: center;
  justify-self: center;
  border-radius: clamp(14px, 2vh, 22px);
}

body.stream-mode #gameCanvas {
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.stream-mode .board-effect-badges {
  left: 8px;
  top: 8px;
}

body.stream-mode .effect-badge {
  padding: 4px 7px;
  font-size: clamp(9px, .9vh, 12px);
}

body.stream-mode .combo-badge {
  right: 8px;
  top: 8px;
  padding: 4px 8px;
  font-size: clamp(9px, .9vh, 12px);
}

body.stream-mode .last-event-banner {
  min-height: clamp(28px, 3.2vh, 40px);
  padding: 5px 9px 5px 32px;
  border-radius: 12px;
  font-size: clamp(10px, 1.03vh, 14px);
  line-height: 1.1;
}

body.stream-mode .last-event-banner::before {
  left: 9px;
  font-size: clamp(14px, 1.45vh, 18px);
}

body.stream-mode .stream-action-guide {
  gap: 4px;
  margin: 0;
}

body.stream-mode .gift-guide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.stream-mode .free-guide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.stream-mode .guide-title {
  font-size: clamp(7px, .75vh, 10px);
  letter-spacing: .14em;
}

body.stream-mode .action-item {
  padding: clamp(3px, .48vh, 5px) 2px;
  border-radius: 10px;
  min-width: 0;
  animation: none;
}

body.stream-mode .action-emoji {
  font-size: clamp(12px, 1.35vh, 18px);
  margin-bottom: 1px;
}

body.stream-mode .action-item strong {
  font-size: clamp(6.5px, .77vh, 10px);
  line-height: 1.05;
}

body.stream-mode .action-item span:not(.action-emoji) {
  font-size: clamp(6px, .72vh, 9px);
  line-height: 1.05;
}

@media (max-height: 820px) {
  body.stream-mode .stream-card {
    padding:
      clamp(42px, 6.8vh, 72px)
      clamp(14px, 5vw, 34px)
      clamp(190px, 30vh, 290px);
    gap: 4px;
  }

  body.stream-mode .board-wrap {
    width: min(100%, 43vh);
  }

  body.stream-mode .stream-title {
    max-width: 54%;
  }
}

@media (max-height: 700px) {
  body.stream-mode .stream-card {
    padding:
      clamp(34px, 6vh, 54px)
      clamp(12px, 5vw, 28px)
      clamp(165px, 29vh, 230px);
  }

  body.stream-mode .board-wrap {
    width: min(100%, 40vh);
  }

  body.stream-mode .free-guide .action-item span:not(.action-emoji),
  body.stream-mode .gift-guide .action-item span:not(.action-emoji) {
    display: none;
  }
}


/* v0.1.35 Capture-sharp full stream layout
   Restores the full v0.1.33 stream structure. No empty safe area. */
html,
body,
.stream-card,
.action-item,
.last-event-banner,
.supporter-panel,
.hud-grid div {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.stream-mode {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

body.stream-mode .app-shell {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

body.stream-mode .stream-card {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  min-height: 0;
  padding: clamp(8px, 1.05vh, 14px);
  gap: clamp(5px, .68vh, 8px);
  display: grid !important;
  grid-template-areas: none;
  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto
    auto
    auto
    auto
    auto;
  border-radius: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, #1c1430 0%, #0c0c16 55%, #07070d 100%);
  border: 0;
  box-shadow: none;
  overflow: hidden;
  -webkit-app-region: drag;
}

body.stream-mode .stream-header,
body.stream-mode .progress-wrap,
body.stream-mode .board-wrap,
body.stream-mode .hud-grid,
body.stream-mode .last-event-banner,
body.stream-mode .supporter-panel,
body.stream-mode .gift-guide,
body.stream-mode .free-guide,
body.stream-mode .combo-info {
  grid-area: auto;
}

body.stream-mode .control-panel,
body.stream-mode .runtime-notice,
body.stream-mode .badge,
body.stream-mode .live-status,
body.stream-mode .effect-strip,
body.stream-mode .rules-strip,
body.stream-mode .event-feed {
  display: none !important;
}

body.stream-mode .hud-grid {
  display: grid !important;
}

body.stream-mode .supporter-panel,
body.stream-mode .combo-info {
  display: block !important;
}

body.stream-mode .stream-header {
  align-items: center;
  min-height: 0;
}

body.stream-mode .stream-title {
  max-width: 62%;
}

body.stream-mode .live-pill {
  padding: clamp(5px, .65vh, 8px) clamp(9px, 1.05vh, 14px);
  font-size: clamp(10px, 1vh, 14px);
  gap: 6px;
}

body.stream-mode .live-pill span {
  width: 7px;
  height: 7px;
}

body.stream-mode .eyebrow {
  font-size: clamp(7px, .78vh, 11px);
  line-height: 1;
  letter-spacing: .16em;
}

body.stream-mode h1 {
  font-size: clamp(10px, 1.05vh, 15px);
  line-height: 1.04;
  color: #f4f7fb;
}

body.stream-mode .progress-label {
  font-size: clamp(9px, .95vh, 13px);
  line-height: 1;
}

body.stream-mode .progress {
  height: clamp(4px, .55vh, 7px);
  margin-top: 4px;
}

body.stream-mode .board-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  aspect-ratio: auto;
  border-radius: clamp(14px, 1.65vh, 20px);
}

body.stream-mode #gameCanvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  image-rendering: auto;
}

body.stream-mode .board-effect-badges {
  left: 8px;
  top: 8px;
  gap: 5px;
}

body.stream-mode .effect-badge {
  padding: 4px 7px;
  font-size: clamp(8.5px, .88vh, 12px);
}

body.stream-mode .combo-badge {
  right: 8px;
  top: 8px;
  padding: 4px 8px;
  font-size: clamp(8.5px, .88vh, 12px);
}

body.stream-mode .hud-grid {
  gap: clamp(4px, .58vh, 7px);
}

body.stream-mode .hud-grid div {
  padding: clamp(5px, .72vh, 9px) clamp(7px, .88vh, 10px);
  border-radius: 13px;
}

body.stream-mode .hud-grid span {
  font-size: clamp(7px, .78vh, 10px);
}

body.stream-mode .hud-grid strong {
  font-size: clamp(16px, 1.95vh, 26px);
}

body.stream-mode .last-event-banner {
  min-height: clamp(30px, 3.65vh, 46px);
  padding: 6px 10px 6px 34px;
  border-radius: 13px;
  font-size: clamp(10px, 1.05vh, 15px);
  line-height: 1.08;
}

body.stream-mode .last-event-banner::before {
  left: 10px;
  font-size: clamp(14px, 1.55vh, 19px);
}

body.stream-mode .supporter-panel {
  padding: clamp(5px, .72vh, 9px) clamp(8px, .9vh, 11px);
  border-radius: 14px;
  overflow: hidden;
}

body.stream-mode .supporter-head {
  margin-bottom: 4px;
}

body.stream-mode .supporter-head span,
body.stream-mode .supporter-head strong {
  font-size: clamp(8px, .85vh, 11px);
}

body.stream-mode .supporter-list {
  gap: 3px;
  max-height: clamp(26px, 4.2vh, 52px);
  overflow: hidden;
}

body.stream-mode .supporter-list li {
  grid-template-columns: 22px 1fr auto;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 9px;
  font-size: clamp(8.5px, .9vh, 12px);
  min-width: 0;
}

body.stream-mode .stream-action-guide {
  margin: 0;
  gap: clamp(3px, .48vh, 5px);
}

body.stream-mode .gift-guide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.stream-mode .free-guide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.stream-mode .guide-title {
  font-size: clamp(6.5px, .7vh, 9px);
  line-height: 1;
  letter-spacing: .14em;
}

body.stream-mode .action-item {
  padding: clamp(3px, .5vh, 6px) 2px;
  border-radius: 10px;
  min-width: 0;
  animation: none;
}

body.stream-mode .action-emoji {
  margin: 0 auto 1px;
  width: clamp(12px, 1.35vh, 18px);
  height: clamp(12px, 1.35vh, 18px);
}

body.stream-mode span.action-emoji {
  font-size: clamp(12px, 1.35vh, 18px);
  line-height: 1;
}

body.stream-mode .action-item strong {
  font-size: clamp(6.5px, .76vh, 9.5px);
  line-height: 1.04;
}

body.stream-mode .action-item span:not(.action-emoji) {
  font-size: clamp(5.8px, .68vh, 8.5px);
  line-height: 1.04;
  margin-top: 1px;
  white-space: normal;
}

body.stream-mode .combo-info {
  padding: clamp(4px, .58vh, 7px) 8px;
  border-radius: 12px;
}

body.stream-mode .combo-info strong {
  font-size: clamp(8px, .82vh, 11px);
}

body.stream-mode .combo-info span {
  font-size: clamp(7px, .75vh, 10px);
  margin-top: 1px;
}

@media (max-height: 860px) {
  body.stream-mode .stream-card {
    padding: 7px;
    gap: 4px;
  }

  body.stream-mode .supporter-list {
    max-height: 28px;
  }

  body.stream-mode .combo-info span {
    display: none;
  }
}

@media (max-height: 760px) {
  body.stream-mode .stream-card {
    padding: 6px;
    gap: 3px;
  }

  body.stream-mode .supporter-list {
    max-height: 22px;
  }

  body.stream-mode .action-item span:not(.action-emoji) {
    display: none;
  }
}


.capture-box {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(37,244,238,.18);
  border-radius: 14px;
  background: rgba(37,244,238,.06);
}
.capture-box strong { color: #25F4EE; }
.capture-box code { user-select: all; word-break: break-all; }


.capture-box span {
  color: #aeb8d4;
  font-size: 13px;
  line-height: 1.35;
}

/* v0.1.50 Capture source uses the shared stream renderer.
   The 1080p source stays native for TikTok and remains the only capture window. */
/* v0.1.52: capture stage sized in vh/vw (proportional to the window) instead of fixed px
   rows, so a resized capture window never clips. */
/* v0.1.53: margins increased again, this time for a different reason than TikTok's UI chrome.
   Phone screens are taller than 9:16 (commonly ~9:19.5-20), and TikTok's live player fills the
   whole screen, so a 9:16 source gets scaled up and cropped on the LEFT/RIGHT to cover that
   taller screen -- roughly 8-10% per side, independent of any UI overlay. Side margins were
   bumped well past that estimate; side rails narrowed to compensate so the board doesn't
   shrink too much. Still a best-effort estimate (TikTok publishes no official safe-zone
   numbers) -- check the actual mobile preview and tune here if needed. */
body.stream-mode.capture-mode .stream-card {
  padding: 8vh 9.5vw 12vh;
  gap: .8vh 1.2vw;
  grid-template-areas:
    "header header header"
    "progress progress progress"
    "gift board free"
    "hud hud hud"
    "banner banner banner"
    "supporters supporters supporters"
    "combo combo combo";
  grid-template-columns: 11vw minmax(0, 1fr) 11vw;
  grid-template-rows: 4vh 2.6vh minmax(0, 1fr) 5vh 3.9vh 6.5vh 3.3vh;
}

body.stream-mode.capture-mode .stream-header { grid-area: header; }
body.stream-mode.capture-mode .progress-wrap { grid-area: progress; }
body.stream-mode.capture-mode .board-wrap { grid-area: board; }
body.stream-mode.capture-mode .gift-guide { grid-area: gift; }
body.stream-mode.capture-mode .free-guide { grid-area: free; }
body.stream-mode.capture-mode .hud-grid { grid-area: hud; }
body.stream-mode.capture-mode .last-event-banner { grid-area: banner; }
body.stream-mode.capture-mode .supporter-panel { grid-area: supporters; }
body.stream-mode.capture-mode .combo-info { grid-area: combo; }

body.stream-mode.capture-mode .board-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: center;
  justify-self: center;
  border-radius: clamp(18px, 2.6vh, 32px);
}

body.stream-mode.capture-mode .stream-action-guide {
  display: grid;
  min-height: 0;
  align-self: stretch;
  padding: 1.1vh 1vw;
  border-radius: clamp(14px, 2vh, 24px);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
}

body.stream-mode.capture-mode .gift-guide {
  grid-template-columns: 1fr;
  grid-template-rows: auto repeat(5, minmax(0, 1fr));
}

body.stream-mode.capture-mode .free-guide {
  grid-template-columns: 1fr;
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
  align-content: start;
}

body.stream-mode.capture-mode .guide-title {
  text-align: center;
  color: #f4f7fb;
  font-size: clamp(10px, 1.4vh, 15px);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.05;
}

body.stream-mode.capture-mode .action-item {
  position: relative;
  text-align: center;
  min-width: 0;
  min-height: 0;
  padding: .9vh .55vw;
  border-radius: clamp(12px, 1.8vh, 19px);
  animation: floatY 3.4s ease-in-out infinite;
  overflow: hidden;
}

body.stream-mode.capture-mode .action-emoji {
  margin: 0 auto .6vh;
  width: clamp(20px, 2.6vh, 30px);
  height: clamp(20px, 2.6vh, 30px);
}

body.stream-mode.capture-mode span.action-emoji {
  font-size: clamp(18px, 2.6vh, 28px);
  line-height: clamp(20px, 2.6vh, 30px);
}

body.stream-mode.capture-mode .action-item strong {
  display: block;
  color: #fff;
  font-size: clamp(11px, 1.4vh, 15px);
  line-height: 1.1;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.stream-mode.capture-mode .action-item span:not(.action-emoji) {
  display: block;
  color: var(--cyan);
  font-size: clamp(9px, 1.05vh, 12px);
  line-height: 1.15;
  margin-top: .35vh;
  font-weight: 900;
  white-space: normal;
}

body.stream-mode.capture-mode .hud-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1vw;
}

body.stream-mode.capture-mode .hud-grid div {
  padding: 1.3vh 1.2vw;
  border-radius: clamp(16px, 2.2vh, 24px);
}

body.stream-mode.capture-mode .hud-grid span {
  font-size: clamp(10px, 1.35vh, 15px);
}

body.stream-mode.capture-mode .hud-grid strong {
  font-size: clamp(22px, 3.2vh, 36px);
}

body.stream-mode.capture-mode .last-event-banner {
  min-height: 0;
  padding: 1vh 1.4vw 1vh 4.8vw;
  border-radius: clamp(18px, 2.5vh, 28px);
  font-size: clamp(15px, 2vh, 22px);
}

body.stream-mode.capture-mode .last-event-banner::before {
  left: 1.6vw;
  font-size: clamp(18px, 2.5vh, 28px);
}

body.stream-mode.capture-mode .supporter-panel {
  padding: 1.2vh 1.8vw;
  border-radius: clamp(18px, 2.5vh, 28px);
}

body.stream-mode.capture-mode .supporter-list {
  max-height: 6.5vh;
}

body.stream-mode.capture-mode .supporter-list li {
  grid-template-columns: clamp(26px, 3vh, 36px) minmax(0, 1fr) auto;
  gap: .7vw;
  padding: .6vh .8vw;
  border-radius: clamp(12px, 1.8vh, 18px);
  font-size: clamp(13px, 1.6vh, 17px);
}

body.stream-mode.capture-mode .combo-info {
  padding: .8vh 1.5vw;
  border-radius: clamp(14px, 2vh, 22px);
}

body.stream-mode.capture-mode .combo-info strong {
  font-size: clamp(12px, 1.5vh, 16px);
}

body.stream-mode.capture-mode .combo-info span {
  font-size: clamp(10px, 1.3vh, 14px);
}


.action-item.action-hit {
  animation: actionHit .9s ease;
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.28), 0 0 28px rgba(37,244,238,.35);
}

.action-item.action-hit::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.82);
  animation: actionRing .9s ease;
  pointer-events: none;
}

.event-toast {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translateX(-50%);
  max-width: 78%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(7,7,13,.84);
  border: 1px solid rgba(37,244,238,.34);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  color: #fff;
  font-size: clamp(13px, 1.35vh, 22px);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  animation: toastRise 1.25s ease forwards;
}

@keyframes actionHit {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.06); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes actionRing {
  from { opacity: 1; transform: scale(.96); }
  to { opacity: 0; transform: scale(1.12); }
}

@keyframes toastRise {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.96); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  74% { opacity: 1; transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(.98); }
}

/* v0.1.51 Capture polish: gift emotes, stronger action feedback and board glow. */
/* v0.1.52: removed the hard 2px CSS border + the (invisible, clipped) gradient halo here.
   Combined with the canvas-drawn board frame in app.js, that border was the second
   "Spielfeldrand" the capture window showed. The canvas frame is now the only border;
   this wrapper only contributes soft ambient glow around it. */
body.stream-mode.capture-mode .board-wrap {
  background:
    radial-gradient(80% 80% at 50% 42%, rgba(37,244,238,.12), transparent 58%),
    #06060e;
  box-shadow:
    0 0 42px rgba(37,244,238,.30),
    0 0 92px rgba(123,92,246,.18);
}

body.stream-mode.capture-mode .stream-action-guide {
  box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 0 34px rgba(255,255,255,.035);
}

body.stream-mode.capture-mode .action-item {
  border-width: 2px;
  box-shadow: inset 0 0 22px rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.22);
}

body.stream-mode.capture-mode .action-item::before {
  content: '';
  position: absolute;
  inset: -35% -80%;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55), transparent 70%);
  transform: translateX(-72%) rotate(12deg);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

body.stream-mode.capture-mode .action-emoji {
  filter: drop-shadow(0 0 10px rgba(255,255,255,.28));
}

body.stream-mode.capture-mode [data-action-key="finger-heart"] .action-emoji,
body.stream-mode.capture-mode [data-action-key="tiktok"] .action-emoji {
  filter: drop-shadow(0 0 12px rgba(37,244,238,.42));
}

body.stream-mode.capture-mode .action-item.action-hit {
  animation: captureActionHit 1.2s cubic-bezier(.2, .9, .18, 1);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.40),
    0 0 42px rgba(37,244,238,.58),
    0 0 74px rgba(254,44,85,.34),
    inset 0 0 36px rgba(255,255,255,.14);
  will-change: transform, box-shadow;
}

body.stream-mode.capture-mode .action-item.action-hit::before {
  animation: actionSweep 1.05s ease-out;
}

body.stream-mode.capture-mode .action-item.action-hit .action-emoji {
  animation: emojiPop 1.05s ease-out;
  will-change: transform;
}

body.stream-mode.capture-mode .last-event-banner.event-pop {
  animation: captureBannerPop 1.05s ease;
  box-shadow: 0 0 34px rgba(37,244,238,.36), 0 0 58px rgba(254,44,85,.20);
  will-change: transform, opacity;
}

body.stream-mode.capture-mode .event-toast {
  top: 40%;
  padding: 14px 24px;
  border: 2px solid rgba(37,244,238,.50);
  box-shadow: 0 0 44px rgba(37,244,238,.34), 0 22px 70px rgba(0,0,0,.42);
  font-size: 24px;
  animation: captureToastRise 1.45s ease forwards;
}

@keyframes captureActionHit {
  0% { transform: scale(1); filter: brightness(1); }
  18% { transform: scale(1.12); filter: brightness(1.55) saturate(1.25); }
  48% { transform: scale(1.06); filter: brightness(1.22) saturate(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes actionSweep {
  0% { opacity: 0; transform: translateX(-72%) rotate(12deg); }
  20% { opacity: .85; }
  100% { opacity: 0; transform: translateX(72%) rotate(12deg); }
}

@keyframes emojiPop {
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.35) rotate(-5deg); }
  55% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes captureBannerPop {
  0% { transform: translateY(10px) scale(.98); opacity: .72; }
  24% { transform: translateY(0) scale(1.035); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes captureToastRise {
  0% { opacity: 0; transform: translate(-50%, 24px) scale(.92); }
  16% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  68% { opacity: 1; transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -38px) scale(.98); }
}

/* v0.1.54 remote stream relay settings */
.remote-relay-box {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(37,244,238,.055);
  border: 1px solid rgba(37,244,238,.16);
}
.remote-relay-box > strong {
  color: #dffcff;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.remote-relay-box label {
  display: grid;
  gap: 4px;
  color: #aeb8d4;
  font-size: 11px;
  font-weight: 800;
}
.remote-relay-box input[type="url"],
.remote-relay-box input[type="password"] {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.inline-check {
  grid-template-columns: auto 1fr;
  align-items: center;
}
.inline-check input {
  width: auto;
}


/* v0.1.56: public TikTok domain source.
   TikTok Link sources may start with a landscape viewport. This block keeps the
   rendered stage itself locked to 9:16 and prevents the old desktop-wide grid
   from being captured as a tiny strip with top/bottom black bars. */
body.stream-mode.browser-source-mode {
  background: #000;
}

body.stream-mode.browser-source-mode .app-shell {
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

body.stream-mode.browser-source-mode .stream-card {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  padding: clamp(42px, 4.4%, 84px) clamp(34px, 4.9%, 58px) clamp(48px, 5.1%, 92px);
  gap: clamp(5px, .62%, 12px) clamp(6px, .72%, 14px);
  display: grid !important;
  grid-template-areas:
    "header header header"
    "progress progress progress"
    "gift board free"
    "hud hud hud"
    "banner banner banner"
    "supporters supporters supporters"
    "combo combo combo";
  grid-template-columns: minmax(82px, 17.2%) minmax(0, 1fr) minmax(82px, 17.2%);
  grid-template-rows: minmax(46px, 5.4%) minmax(16px, 2.1%) minmax(0, 1fr) minmax(48px, 5.2%) minmax(36px, 4.1%) minmax(54px, 6.4%) minmax(28px, 3.1%);
  border-radius: 0;
  background:
    radial-gradient(95% 55% at 50% 0%, rgba(123,92,246,.25), transparent 60%),
    radial-gradient(85% 70% at 50% 44%, rgba(37,244,238,.11), transparent 62%),
    #07070d;
  overflow: hidden;
}

body.stream-mode.browser-source-mode .stream-header { grid-area: header; }
body.stream-mode.browser-source-mode .progress-wrap { grid-area: progress; }
body.stream-mode.browser-source-mode .board-wrap { grid-area: board; }
body.stream-mode.browser-source-mode .gift-guide { grid-area: gift; }
body.stream-mode.browser-source-mode .free-guide { grid-area: free; }
body.stream-mode.browser-source-mode .hud-grid { grid-area: hud; }
body.stream-mode.browser-source-mode .last-event-banner { grid-area: banner; }
body.stream-mode.browser-source-mode .supporter-panel { grid-area: supporters; }
body.stream-mode.browser-source-mode .combo-info { grid-area: combo; }

body.stream-mode.browser-source-mode .board-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: center;
  justify-self: center;
  border-radius: clamp(16px, 2.7%, 30px);
  background:
    radial-gradient(72% 72% at 50% 45%, rgba(37,244,238,.15), transparent 62%),
    #050713;
  box-shadow:
    0 0 38px rgba(37,244,238,.34),
    0 0 86px rgba(123,92,246,.20);
}

body.stream-mode.browser-source-mode #gameCanvas {
  width: 100%;
  height: 100%;
}

body.stream-mode.browser-source-mode .stream-action-guide {
  display: grid;
  min-height: 0;
  align-self: stretch;
  padding: clamp(6px, 6%, 12px) clamp(5px, 5%, 10px);
  border-radius: clamp(12px, 7%, 22px);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 26px rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.30);
  overflow: hidden;
}

body.stream-mode.browser-source-mode .gift-guide {
  grid-template-columns: 1fr;
  grid-template-rows: auto repeat(5, minmax(0, 1fr));
}

body.stream-mode.browser-source-mode .free-guide {
  grid-template-columns: 1fr;
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
}

body.stream-mode.browser-source-mode .guide-title {
  font-size: clamp(9px, 1.05vw, 14px);
  line-height: 1;
  margin-bottom: 2px;
}

body.stream-mode.browser-source-mode .action-item {
  min-height: 0;
  padding: clamp(4px, 5.5%, 9px) 2px;
  border-radius: clamp(10px, 8%, 18px);
  animation: floatY 3s ease-in-out infinite;
}

body.stream-mode.browser-source-mode .action-emoji {
  width: clamp(16px, 2.3vw, 30px);
  height: clamp(16px, 2.3vw, 30px);
  margin-bottom: 3px;
}

body.stream-mode.browser-source-mode span.action-emoji {
  font-size: clamp(16px, 2.3vw, 30px);
  line-height: 1;
}

body.stream-mode.browser-source-mode .action-item strong {
  font-size: clamp(8px, 1.05vw, 14px);
  line-height: 1.05;
}

body.stream-mode.browser-source-mode .action-item span:not(.action-emoji) {
  font-size: clamp(7px, .9vw, 12px);
  line-height: 1.05;
  margin-top: 2px;
}

body.stream-mode.browser-source-mode .hud-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.1%, 12px);
}

body.stream-mode.browser-source-mode .hud-grid div {
  padding: clamp(6px, 1.2%, 14px) clamp(8px, 1.4%, 16px);
  border-radius: clamp(12px, 2.1%, 22px);
}

body.stream-mode.browser-source-mode .hud-grid strong {
  font-size: clamp(20px, 3.1vw, 36px);
}

body.stream-mode.browser-source-mode .last-event-banner {
  min-height: 0;
  padding: clamp(7px, 1.05%, 14px) clamp(10px, 1.4%, 18px) clamp(7px, 1.05%, 14px) clamp(34px, 4.8%, 52px);
  font-size: clamp(13px, 1.7vw, 22px);
  line-height: 1.06;
}

body.stream-mode.browser-source-mode .supporter-panel {
  padding: clamp(7px, 1.05%, 14px) clamp(10px, 1.5%, 18px);
}

body.stream-mode.browser-source-mode .supporter-list {
  max-height: 100%;
}

body.stream-mode.browser-source-mode .supporter-list li {
  grid-template-columns: clamp(22px, 2.8vw, 34px) minmax(0, 1fr) auto;
  font-size: clamp(11px, 1.35vw, 17px);
}

body.stream-mode.browser-source-mode .combo-info {
  padding: clamp(5px, .8%, 10px) clamp(8px, 1.4%, 16px);
}

@media (orientation: landscape) {
  body.stream-mode.browser-source-mode .app-shell {
    width: min(100vw, calc(100vh * 9 / 16));
    height: 100vh;
  }
}


/* v0.1.57: TikTok custom 1080x1920 source layout.
   The Link source now gets a full-height mobile stage with fewer rows, larger text,
   larger gift icons and separated banner/supporter rows. This block intentionally
   overrides the older v0.1.56 browser-source rules at the end of the file. */
body.stream-mode.browser-source-mode,
body.stream-mode.browser-source-mode .app-shell {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body.stream-mode.browser-source-mode .app-shell {
  display: block;
  padding: 0;
}

body.stream-mode.browser-source-mode .stream-card {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  padding: 78px 46px 116px;
  gap: 14px 16px;
  display: grid !important;
  grid-template-areas:
    "header header header"
    "progress progress progress"
    "gift board free"
    "gift hud free"
    "banner banner banner"
    "supporters supporters supporters"
    "combo combo combo";
  grid-template-columns: minmax(174px, 18%) minmax(0, 1fr) minmax(174px, 18%);
  grid-template-rows: 104px 34px minmax(0, 1fr) 88px 84px 112px 48px;
  box-sizing: border-box;
  border-radius: 0;
  background:
    radial-gradient(78% 46% at 50% 0%, rgba(123,92,246,.34), transparent 64%),
    radial-gradient(82% 62% at 50% 42%, rgba(37,244,238,.14), transparent 66%),
    #07070d;
  overflow: hidden;
}

body.stream-mode.browser-source-mode .stream-header { grid-area: header; min-height: 0; }
body.stream-mode.browser-source-mode .progress-wrap { grid-area: progress; min-height: 0; }
body.stream-mode.browser-source-mode .gift-guide { grid-area: gift; min-height: 0; }
body.stream-mode.browser-source-mode .free-guide { grid-area: free; min-height: 0; }
body.stream-mode.browser-source-mode .board-wrap { grid-area: board; min-height: 0; }
body.stream-mode.browser-source-mode .hud-grid { grid-area: hud; min-height: 0; }
body.stream-mode.browser-source-mode .last-event-banner { grid-area: banner; min-height: 0; }
body.stream-mode.browser-source-mode .supporter-panel { grid-area: supporters; min-height: 0; }
body.stream-mode.browser-source-mode .combo-info { grid-area: combo; min-height: 0; }

body.stream-mode.browser-source-mode .stream-header {
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
}

body.stream-mode.browser-source-mode .live-pill {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 20px;
  letter-spacing: .02em;
}

body.stream-mode.browser-source-mode .live-pill span {
  width: 10px;
  height: 10px;
}

body.stream-mode.browser-source-mode .stream-title {
  text-align: right;
  justify-self: end;
  min-width: 320px;
}

body.stream-mode.browser-source-mode .eyebrow {
  font-size: 16px;
  letter-spacing: .24em;
}

body.stream-mode.browser-source-mode h1 {
  font-size: 24px;
  line-height: 1.05;
}

body.stream-mode.browser-source-mode .progress-label {
  font-size: 18px;
  line-height: 1;
}

body.stream-mode.browser-source-mode .progress {
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
}

body.stream-mode.browser-source-mode .board-wrap {
  width: min(100%, 650px);
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: center;
  justify-self: center;
  border-radius: 30px;
  background:
    radial-gradient(70% 72% at 50% 45%, rgba(37,244,238,.18), transparent 64%),
    #050713;
  box-shadow:
    0 0 44px rgba(37,244,238,.42),
    0 0 96px rgba(123,92,246,.24),
    0 26px 70px rgba(0,0,0,.38);
}

body.stream-mode.browser-source-mode #gameCanvas {
  width: 100%;
  height: 100%;
}

body.stream-mode.browser-source-mode .board-effect-badges {
  top: 12px;
  left: 12px;
  gap: 8px;
}

body.stream-mode.browser-source-mode .effect-badge,
body.stream-mode.browser-source-mode .combo-badge {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 16px;
}

body.stream-mode.browser-source-mode .combo-badge {
  top: 12px;
  right: 12px;
}

body.stream-mode.browser-source-mode .stream-action-guide {
  display: grid;
  align-self: stretch;
  padding: 14px 12px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.035));
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 36px rgba(255,255,255,.045), 0 20px 48px rgba(0,0,0,.32);
  overflow: hidden;
}

body.stream-mode.browser-source-mode .gift-guide {
  grid-template-rows: 42px repeat(5, minmax(0, 1fr));
}

body.stream-mode.browser-source-mode .free-guide {
  grid-template-rows: 42px repeat(3, minmax(0, 1fr));
}

body.stream-mode.browser-source-mode .guide-title {
  align-self: center;
  margin: 0;
  font-size: 21px;
  line-height: 1;
  letter-spacing: .08em;
}

body.stream-mode.browser-source-mode .action-item {
  position: relative;
  min-height: 0;
  padding: 10px 6px;
  border-radius: 22px;
  border-width: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  animation: floatY 3s ease-in-out infinite;
  box-shadow: inset 0 0 28px rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.26);
}

body.stream-mode.browser-source-mode .action-emoji {
  width: 58px;
  height: 58px;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.30));
}

body.stream-mode.browser-source-mode span.action-emoji {
  width: auto;
  height: auto;
  font-size: 58px;
  line-height: .95;
}

body.stream-mode.browser-source-mode .action-item strong {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.02em;
}

body.stream-mode.browser-source-mode .action-item span:not(.action-emoji) {
  font-size: 17px;
  line-height: 1.08;
  margin: 0;
  color: #25f4ee;
  text-shadow: 0 0 10px rgba(37,244,238,.36);
}

body.stream-mode.browser-source-mode .hud-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

body.stream-mode.browser-source-mode .hud-grid div {
  padding: 12px 16px;
  border-radius: 22px;
}

body.stream-mode.browser-source-mode .hud-grid span {
  font-size: 17px;
  letter-spacing: .18em;
}

body.stream-mode.browser-source-mode .hud-grid strong {
  font-size: 38px;
  line-height: 1;
}

body.stream-mode.browser-source-mode .last-event-banner {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0 24px 0 72px;
  border-radius: 24px;
  font-size: 30px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.stream-mode.browser-source-mode .last-event-banner::before {
  left: 24px;
  font-size: 34px;
}

body.stream-mode.browser-source-mode .supporter-panel {
  padding: 13px 18px;
  border-radius: 24px;
}

body.stream-mode.browser-source-mode .supporter-head {
  margin-bottom: 8px;
}

body.stream-mode.browser-source-mode .supporter-head span,
body.stream-mode.browser-source-mode .supporter-head strong {
  font-size: 17px;
}

body.stream-mode.browser-source-mode .supporter-list {
  max-height: 58px;
  overflow: hidden;
}

body.stream-mode.browser-source-mode .supporter-list li {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 22px;
}

body.stream-mode.browser-source-mode .combo-info {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: 0 18px;
  border-radius: 18px;
  text-align: center;
}

body.stream-mode.browser-source-mode .combo-info strong {
  font-size: 20px;
  line-height: 1;
}

body.stream-mode.browser-source-mode .combo-info span {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1;
}

body.stream-mode.browser-source-mode .action-item::before {
  content: '';
  position: absolute;
  inset: -35% -80%;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.56), transparent 70%);
  transform: translateX(-72%) rotate(12deg);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

body.stream-mode.browser-source-mode .action-item.action-hit {
  animation: browserActionHit 1.12s cubic-bezier(.2, .9, .18, 1);
  border-color: rgba(255,255,255,.82) !important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.35),
    0 0 46px rgba(37,244,238,.62),
    0 0 78px rgba(254,44,85,.32),
    inset 0 0 42px rgba(255,255,255,.14);
  z-index: 2;
}

body.stream-mode.browser-source-mode .action-item.action-hit::before {
  animation: actionSweep 1.02s ease-out;
}

body.stream-mode.browser-source-mode .action-item.action-hit .action-emoji {
  animation: emojiPop 1.02s ease-out;
}

body.stream-mode.browser-source-mode .last-event-banner.event-pop {
  animation: browserBannerPop 1s ease;
  box-shadow: 0 0 38px rgba(37,244,238,.40), 0 0 64px rgba(254,44,85,.22);
}

body.stream-mode.browser-source-mode .event-toast {
  top: 42%;
  max-width: 84%;
  padding: 18px 30px;
  border: 2px solid rgba(37,244,238,.56);
  box-shadow: 0 0 52px rgba(37,244,238,.36), 0 24px 76px rgba(0,0,0,.46);
  font-size: 32px;
  animation: captureToastRise 1.42s ease forwards;
}

@keyframes browserActionHit {
  0% { transform: scale(1); filter: brightness(1); }
  18% { transform: scale(1.14); filter: brightness(1.58) saturate(1.25); }
  52% { transform: scale(1.06); filter: brightness(1.24) saturate(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes browserBannerPop {
  0% { transform: translateY(12px) scale(.98); opacity: .74; }
  24% { transform: translateY(0) scale(1.035); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}


/* v0.1.60: TikTok 900x1920 source order.
   Top Supporters sit above the board as three stacked slots. Score/Round/Run is
   directly below the board; Gift and Free action rails stay on the sides. */
body.stream-mode.browser-source-mode .stream-card {
  grid-template-areas:
    "header header header"
    "progress progress progress"
    "supporters supporters supporters"
    "gift board free"
    "gift hud free"
    "banner banner banner"
    "combo combo combo";
  grid-template-columns: minmax(164px, 18%) minmax(0, 1fr) minmax(164px, 18%);
  grid-template-rows: 96px 30px 190px minmax(0, 1fr) 86px 76px 44px;
  padding: 70px 46px 112px;
}

body.stream-mode.browser-source-mode .supporter-panel {
  display: grid !important;
  grid-template-rows: 34px minmax(0, 1fr);
  gap: 8px;
  padding: 12px 18px;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(255,200,61,.12), rgba(254,44,85,.08), rgba(37,244,238,.08));
  border: 2px solid rgba(255,200,61,.28);
  box-shadow: 0 0 40px rgba(255,200,61,.10), inset 0 0 28px rgba(255,255,255,.04);
}

body.stream-mode.browser-source-mode .supporter-head {
  margin: 0;
  align-items: center;
}

body.stream-mode.browser-source-mode .supporter-head span {
  font-size: 23px;
  letter-spacing: .08em;
}

body.stream-mode.browser-source-mode .supporter-head strong {
  font-size: 18px;
}

body.stream-mode.browser-source-mode .supporter-list {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  min-height: 0;
  overflow: hidden;
}

body.stream-mode.browser-source-mode .supporter-list li {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 24px;
  min-height: 0;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
}

body.stream-mode.browser-source-mode .supporter-list .rank {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 38px;
  border-radius: 999px;
  color: #06060e;
  background: linear-gradient(135deg, #ffd75f, #ff9f2c);
  box-shadow: 0 0 20px rgba(255,200,61,.32);
}

body.stream-mode.browser-source-mode .supporter-list .name {
  font-size: 24px;
  font-weight: 900;
}

body.stream-mode.browser-source-mode .supporter-list .points {
  font-size: 22px;
  color: #ffd75f;
}

body.stream-mode.browser-source-mode .supporter-list .empty-supporter {
  opacity: .55;
}

body.stream-mode.browser-source-mode .supporter-list .empty-supporter .rank {
  background: rgba(255,255,255,.16);
  color: #dce7ff;
  box-shadow: none;
}

body.stream-mode.browser-source-mode .supporter-list .empty-supporter .points {
  color: #7c8299;
}

body.stream-mode.browser-source-mode .hud-grid {
  grid-area: hud;
  align-self: start;
  margin-top: 0;
}

body.stream-mode.browser-source-mode .hud-grid div {
  padding: 12px 16px;
}

body.stream-mode.browser-source-mode .last-event-banner {
  margin-top: 0;
}


/* v0.1.61: corrected TikTok 900x1920 order.
   Top Supporters and Score/Round/Run now sit in the middle column only, between
   Gift Actions and Free Actions. The side rails stay visible around the board. */
body.stream-mode.browser-source-mode .stream-card {
  grid-template-areas:
    "header header header"
    "progress progress progress"
    "gift supporters free"
    "gift board free"
    "gift hud free"
    "banner banner banner"
    "combo combo combo";
  grid-template-columns: minmax(178px, 20%) minmax(0, 1fr) minmax(178px, 20%);
  grid-template-rows: 94px 30px 210px minmax(0, 1fr) 88px 74px 44px;
  padding: 68px 42px 108px;
  gap: 12px 16px;
}

body.stream-mode.browser-source-mode .supporter-panel {
  grid-area: supporters;
  align-self: stretch;
  min-height: 0;
  padding: 12px 16px;
}

body.stream-mode.browser-source-mode .supporter-head span {
  font-size: 21px;
}

body.stream-mode.browser-source-mode .supporter-head strong {
  font-size: 16px;
}

body.stream-mode.browser-source-mode .supporter-list {
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body.stream-mode.browser-source-mode .supporter-list li {
  grid-template-columns: 50px minmax(0, 1fr) auto;
  padding: 7px 12px;
  font-size: 22px;
}

body.stream-mode.browser-source-mode .supporter-list .rank {
  min-width: 44px;
  height: 34px;
}

body.stream-mode.browser-source-mode .supporter-list .name {
  font-size: 22px;
}

body.stream-mode.browser-source-mode .supporter-list .points {
  font-size: 20px;
}

body.stream-mode.browser-source-mode .board-wrap {
  grid-area: board;
  align-self: stretch;
  width: 100%;
}

body.stream-mode.browser-source-mode .hud-grid {
  grid-area: hud;
  align-self: stretch;
  margin-top: 0;
}

body.stream-mode.browser-source-mode .gift-guide,
body.stream-mode.browser-source-mode .free-guide {
  align-self: stretch;
  min-height: 0;
}

body.stream-mode.browser-source-mode .stream-action-guide {
  gap: 10px;
}

body.stream-mode.browser-source-mode .action-item {
  min-height: 0;
  padding: 9px 8px;
}

body.stream-mode.browser-source-mode .action-emoji {
  width: 50px;
  height: 50px;
}

body.stream-mode.browser-source-mode span.action-emoji {
  font-size: 50px;
}

body.stream-mode.browser-source-mode .action-item strong {
  font-size: 20px;
}

body.stream-mode.browser-source-mode .action-item span:not(.action-emoji) {
  font-size: 15px;
}

/* v0.1.62: compact TikTok 900x1920 order.
   The board keeps its square size. Top Supporters sit directly above the board,
   Score/Round/Run directly below it. Gift and Free buttons are smaller. */
body.stream-mode.browser-source-mode .stream-card {
  grid-template-areas:
    "header header header"
    "progress progress progress"
    "gift supporters free"
    "gift board free"
    "gift hud free"
    "banner banner banner"
    "combo combo combo";
  grid-template-columns: 132px minmax(0, 1fr) 132px;
  grid-template-rows: 82px 24px 154px 536px 72px 68px 38px;
  gap: 8px 12px;
  padding: 62px 34px 96px;
  align-content: center;
}

body.stream-mode.browser-source-mode .supporter-panel {
  grid-area: supporters;
  align-self: end;
  height: 154px;
  min-height: 0;
  padding: 8px 12px;
  border-radius: 20px;
}

body.stream-mode.browser-source-mode .supporter-head {
  margin: 0 0 5px;
}

body.stream-mode.browser-source-mode .supporter-head span {
  font-size: 17px;
}

body.stream-mode.browser-source-mode .supporter-head strong {
  font-size: 13px;
}

body.stream-mode.browser-source-mode .supporter-list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
  max-height: none;
  min-height: 0;
  overflow: hidden;
}

body.stream-mode.browser-source-mode .supporter-list li {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 14px;
  font-size: 17px;
  min-height: 0;
}

body.stream-mode.browser-source-mode .supporter-list .rank {
  min-width: 32px;
  height: 27px;
  font-size: 15px;
}

body.stream-mode.browser-source-mode .supporter-list .name {
  font-size: 17px;
}

body.stream-mode.browser-source-mode .supporter-list .points {
  font-size: 15px;
}

body.stream-mode.browser-source-mode .board-wrap {
  grid-area: board;
  width: min(100%, 536px);
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: start;
  justify-self: center;
}

body.stream-mode.browser-source-mode .hud-grid {
  grid-area: hud;
  align-self: start;
  height: 72px;
  margin: 0;
  gap: 8px;
}

body.stream-mode.browser-source-mode .hud-grid div {
  padding: 8px 12px;
  border-radius: 18px;
}

body.stream-mode.browser-source-mode .hud-grid span {
  font-size: 13px;
}

body.stream-mode.browser-source-mode .hud-grid strong {
  font-size: 30px;
}

body.stream-mode.browser-source-mode .gift-guide,
body.stream-mode.browser-source-mode .free-guide {
  align-self: start;
  min-height: 0;
  padding: 10px 8px;
  border-radius: 18px;
}

body.stream-mode.browser-source-mode .gift-guide {
  grid-template-rows: 28px repeat(5, 78px);
}

body.stream-mode.browser-source-mode .free-guide {
  grid-template-rows: 28px repeat(3, 86px);
}

body.stream-mode.browser-source-mode .stream-action-guide {
  gap: 7px;
}

body.stream-mode.browser-source-mode .guide-title {
  font-size: 14px;
  letter-spacing: .06em;
}

body.stream-mode.browser-source-mode .action-item {
  padding: 6px 4px;
  border-radius: 16px;
  gap: 3px;
}

body.stream-mode.browser-source-mode .action-emoji {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.28));
}

body.stream-mode.browser-source-mode span.action-emoji {
  font-size: 34px;
}

body.stream-mode.browser-source-mode .action-item strong {
  font-size: 14px;
  line-height: 1;
}

body.stream-mode.browser-source-mode .action-item span:not(.action-emoji) {
  font-size: 10.5px;
  line-height: 1.05;
}

body.stream-mode.browser-source-mode .last-event-banner {
  min-height: 0;
  padding: 0 18px 0 58px;
  border-radius: 20px;
  font-size: 25px;
}

body.stream-mode.browser-source-mode .last-event-banner::before {
  left: 18px;
  font-size: 28px;
}

body.stream-mode.browser-source-mode .combo-info {
  min-height: 0;
  padding: 0 14px;
  border-radius: 16px;
}

body.stream-mode.browser-source-mode .combo-info strong {
  font-size: 17px;
}

body.stream-mode.browser-source-mode .combo-info span {
  font-size: 13px;
}