:root {
  --ribbon-unit: clamp(1px, .25vw, 3px);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #24364d;
  color-scheme: light;
  line-height: 1.25;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; }
body { display: flex; flex-direction: column; padding: calc(4 * var(--ribbon-unit)); gap: calc(7 * var(--ribbon-unit)); }
#pinned { flex: none; max-height: 45vh; overflow: hidden; }
#pinned:empty { display: none; }
#scroll-area { flex: 1; min-height: 0; overflow: hidden; }
#gift-list, #pinned { display: flex; flex-direction: column; gap: calc(7 * var(--ribbon-unit)); }
#gift-list { gap: var(--gift-gap, calc(7 * var(--ribbon-unit))); }
body[data-style=columns] #gift-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content:start; }
body[data-style=banner] #gift-list { flex-direction:row; width:max-content; }
body[data-style=banner] .gift-row { width: min(600px,90vw); }
.gift-row { color:var(--gift-ink,var(--ribbon-ink)); }
.gift-row:before { opacity:var(--gift-alpha,1); }
body .gift-row:before { background:var(--gift-surface,linear-gradient(105deg,var(--ribbon-start),var(--ribbon-end))); }
.gift-row.gift-leader { filter:drop-shadow(0 0 7px #edbd5680); }
.gift-row.gift-leader:after { content:'★'; position:absolute; top:0; right:8px; color:#d8a737; }
[data-entrance=fade] .gift-row { animation:gift-fade .3s ease-out; }
[data-entrance=slide] .gift-row { animation:gift-slide .3s ease-out; }
@keyframes gift-fade { from { opacity:0; } }
@keyframes gift-slide { from { opacity:0; transform:translateX(20px); } }
@media(prefers-reduced-motion:reduce) { .gift-row { animation:none!important; } }

/* A quiet tinted surface keeps the original artwork and live text prominent. */
.gift-row {
  --ribbon-start: #cfe5ff;
  --ribbon-end: #f1f7ff;
  --ribbon-ink: #203b58;
  --ribbon-detail: #536d87;
  --ribbon-highlight: #245fa6;
  --ribbon-accent: #327bd0;
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  width: 100%;
  min-width: 0;
  min-height: calc(68 * var(--ribbon-unit));
  padding: calc(2 * var(--ribbon-unit)) calc(14 * var(--ribbon-unit)) calc(2 * var(--ribbon-unit)) calc(6 * var(--ribbon-unit));
  gap: calc(8 * var(--ribbon-unit));
  color: var(--ribbon-ink);
  isolation: isolate;
}
.gift-row[data-color=violet] {
  --ribbon-start: #e4d8ff;
  --ribbon-end: #f7f2ff;
  --ribbon-ink: #392f56;
  --ribbon-detail: #73638c;
  --ribbon-highlight: #704aa5;
  --ribbon-accent: #8660c2;
}
.gift-row[data-color=rose] {
  --ribbon-start: #ffdce7;
  --ribbon-end: #fff4f7;
  --ribbon-ink: #513044;
  --ribbon-detail: #946376;
  --ribbon-highlight: #a5416b;
  --ribbon-accent: #d36290;
}
.gift-row[data-color=gold] {
  --ribbon-start: #ffe5a5;
  --ribbon-end: #fff8e7;
  --ribbon-ink: #513c1c;
  --ribbon-detail: #806943;
  --ribbon-highlight: #8c6016;
  --ribbon-accent: #bf8a24;
}
.gift-row:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(34 * var(--ribbon-unit)) calc(12 * var(--ribbon-unit)) calc(12 * var(--ribbon-unit)) calc(34 * var(--ribbon-unit));
  background: linear-gradient(105deg, var(--ribbon-start), var(--ribbon-end));
  box-shadow: inset 0 0 0 1px #ffffffa6;
  z-index: -1;
}
.avatar-wrap { --avatar-size: calc(44 * var(--ribbon-unit)); --avatar-frame-size: calc(56 * var(--ribbon-unit)); }
.avatar { border: calc(2 * var(--ribbon-unit)) solid #fff; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none; background: #f7faff; color: #526d89; overflow: hidden; }
.avatar img, .gift-icon img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.image-fallback { font-size: calc(16 * var(--ribbon-unit)); font-weight: 600; }
.ribbon-info { flex: 1; min-width: 0; }
.ribbon-heading { display: flex; align-items: center; gap: calc(5 * var(--ribbon-unit)); min-width: 0; }
.ribbon-name { min-width: 0; font-size: calc(17 * var(--ribbon-unit)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ribbon-description { font-size: calc(14 * var(--ribbon-unit)); font-weight: 400; margin-top: calc(5 * var(--ribbon-unit)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ribbon-detail); }
.gift-name { color: var(--ribbon-highlight); font-weight: 600; }
.unit-price { font-size: calc(12 * var(--ribbon-unit)); }
.identity { font-size: calc(10 * var(--ribbon-unit)); padding: calc(2 * var(--ribbon-unit)) calc(4 * var(--ribbon-unit)); border-radius: calc(4 * var(--ribbon-unit)); background: #ffffff8c; color: var(--ribbon-highlight); white-space: nowrap; flex: none; }
.identity.tier-unknown, .identity.tier-0 { display: none; }
/* The frame already names the event identity; keep current-lookup labels explicit. */
.avatar-wrap.avatar-framed + .ribbon-info .identity[data-source=event] { display: none; }
.gift-icon { height: calc(64 * var(--ribbon-unit)); width: calc(64 * var(--ribbon-unit)); position: relative; flex: none; display: grid; place-items: center; }
.gift-icon img { object-fit: contain; }
.gift-quantity { display: flex; align-items: baseline; justify-content: flex-end; gap: calc(3 * var(--ribbon-unit)); min-width: calc(40 * var(--ribbon-unit)); max-width: calc(110 * var(--ribbon-unit)); color: var(--ribbon-highlight); font-size: calc(26 * var(--ribbon-unit)); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; flex: none; }
.quantity-multiplier { font-size: calc(14 * var(--ribbon-unit)); font-weight: 400; color: var(--ribbon-detail); }
.quantity-number { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.superchat-row { padding: calc(8 * var(--ribbon-unit)); align-items: flex-start; }
.superchat-row:before { border-radius: calc(12 * var(--ribbon-unit)); }
.superchat-row .gift-icon { display: none; }
.superchat-text { font-size: calc(15 * var(--ribbon-unit)); line-height: 1.45; margin: calc(6 * var(--ribbon-unit)) 0 0; overflow-wrap: anywhere; white-space: pre-wrap; max-height: calc(130 * var(--ribbon-unit)); overflow: hidden; }
#overlay-status { flex: none; padding: 6px 10px; margin: 0; font-size: 14px; color: #fff; background: #1c294cf2; border-radius: 7px; line-height: 1.5; }
#overlay-status[hidden] { display: none; }
body[data-style=compact] .gift-row:before { border-radius: calc(10 * var(--ribbon-unit)); background: var(--ribbon-end); box-shadow: inset calc(3 * var(--ribbon-unit)) 0 var(--ribbon-accent), inset 0 0 0 1px #ffffffa6; }
#pinned[data-layout=columns] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#pinned[data-layout=columns] .superchat-row { --ribbon-unit: clamp(1px, .125vw, 1.5px); gap: 4px; flex-wrap: wrap; }
#pinned[data-layout=columns] .gift-quantity { display: none; }
#pinned[data-layout=columns] .superchat-text { max-height: calc(100 * var(--ribbon-unit)); }
@media (max-width: 300px) {
  .gift-row { min-height: 60px; padding: 2px 8px 2px 4px; gap: 4px; }
  .avatar-wrap { --avatar-size: 40px; --avatar-frame-size: 50px; }
  .gift-icon { width: 52px; height: 56px; }
  .ribbon-name { font-size: 16px; }
  .ribbon-description { font-size: 13px; margin-top: 4px; }
  .gift-quantity { min-width: 34px; font-size: 24px; }
}