/* Four editable palettes and silhouettes; rank also stays legible without color. */
.live-widget[data-kind="danmaku-overlay"] {
  display: flex;
  flex-direction: column;
  height: 440px;
  max-height: 70vh;
  min-height: 0;
  isolation: isolate;
}
.live-widget[data-kind="danmaku-overlay"] .widget-items {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: inherit;
  overflow: hidden;
  overflow-anchor: none;
  padding: 5px;
}
.live-widget[data-kind="danmaku-overlay"][data-direction="top-down"] .widget-items { flex-direction: column-reverse; }
.live-widget .danmaku-card {
  --danmaku-color: var(--danmaku-viewer-color);
  --danmaku-surface: var(--danmaku-viewer-bg);
  --danmaku-edge: color-mix(in srgb, var(--danmaku-color) 45%, currentColor);
  position: relative;
  box-sizing: border-box;
  flex: none;
  width: 100%;
  max-height: 100%;
  min-height: min(4.7em, 100%);
  gap: .7em;
  align-items: center;
  padding: .65em 1.1em .65em .65em;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 1.5em;
  background: var(--danmaku-surface);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.danmaku-card::before { content: ""; position: absolute; pointer-events: none; }
.live-widget .danmaku-card[data-tier="governor"] { --danmaku-color: var(--danmaku-governor-color); --danmaku-surface: var(--danmaku-governor-bg); border: 4px double var(--danmaku-edge); border-radius: 3em; padding-right: 1.8em; }
.danmaku-card[data-tier="governor"]::before { inset: 4px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: inherit; }
.live-widget .danmaku-card[data-tier="admiral"] { --danmaku-color: var(--danmaku-admiral-color); --danmaku-surface: var(--danmaku-admiral-bg); border: 2px solid var(--danmaku-edge); border-radius: 1em 2.8em 1em 2.8em; padding-right: 1.8em; }
.danmaku-card[data-tier="admiral"]::before { inset: 4px; border-block: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: inherit; }
.live-widget .danmaku-card[data-tier="captain"] { --danmaku-color: var(--danmaku-captain-color); --danmaku-surface: var(--danmaku-captain-bg); border: 2px solid var(--danmaku-edge); border-radius: 2.8em 1.3em 1.3em 2.8em; }
.danmaku-card[data-tier="captain"]::before { inset: 4px; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: inherit; }
.live-widget .danmaku-portrait.avatar-wrap { position: relative; display: grid; place-items: center; flex: none; width: 3.6em; height: 3.6em; margin-block: .12em; isolation: isolate; }
.danmaku-portrait .avatar { position: relative; display: grid; place-items: center; width: 2.85em; height: 2.85em; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 50%; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.danmaku-portrait .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.danmaku-portrait .image-fallback { font-weight: 700; }
/* Preserve the native frame's square artwork and centre the portrait in its opening. */
.danmaku-portrait.avatar-framed .avatar { width: 80%; height: 80%; border: 0; box-shadow: none; }
.danmaku-portrait .avatar-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; pointer-events: none; }
.danmaku-portrait .avatar-frame[hidden] { display: none; }
.danmaku-portrait.avatar-framed + .danmaku-body .danmaku-rank-fallback { display: none; }
.danmaku-card svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.live-widget .danmaku-card[data-tier="viewer"] .danmaku-portrait { width: 3.2em; }
.live-widget .danmaku-body { position: relative; flex: 1; min-width: 0; max-height: 100%; gap: .18em; overflow: hidden; }
.danmaku-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .5em; }
.danmaku-name { min-width: 0; max-width: 100%; font-size: .95em; line-height: 1.35; }
.danmaku-badge { padding: .08em .55em; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 1em; font-size: .53em; font-weight: 600; }
.danmaku-medal {
  --medal-start: #777084; --medal-end: #777084; --medal-border: #b6afc2; --medal-text: #fff;
  box-sizing: border-box; display: inline-flex; flex: 0 1 auto; align-items: center; gap: .24em;
  min-width: 0; max-width: 100%; height: 1.6em; padding: 0 .25em 0 .38em;
  border: 1px solid var(--medal-border); border-radius: 1em;
  background: linear-gradient(100deg, var(--medal-start), var(--medal-end)); color: var(--medal-text);
  font-size: .58em; font-weight: 500; line-height: 1; white-space: nowrap; text-shadow: none;
}
.danmaku-medal[data-dim="true"] { filter: grayscale(1); }
.danmaku-medal .danmaku-medal-icon { flex: none; width: 1.9em; height: 1.9em; margin-left: -.5em; object-fit: contain; }
.danmaku-medal-name { overflow: hidden; text-overflow: ellipsis; }
.danmaku-medal-level { flex: none; padding: 0 .1em; color: var(--medal-text); font-size: 1.05em; font-weight: 800; font-variant-numeric: tabular-nums; }
.danmaku-medal-legacy { padding-inline: .5em; }
.danmaku-text { line-height: 1.45; white-space: pre-wrap; }
.danmaku-emoticon { display: inline-flex; max-width: 100%; }
.danmaku-emoticon img { max-height: 3em; max-width: min(6em, 100%); object-fit: contain; }
.danmaku-flourish { position: absolute; right: .5em; top: calc(50% - .45em); width: .9em; height: .9em; opacity: .5; }
.live-widget[data-animation="true"] .danmaku-card { animation: danmaku-appear .24s ease-out; }
.live-widget[data-direction="top-down"] { --danmaku-enter: -12px; }
@keyframes danmaku-appear { from { opacity: 0; transform: translateY(var(--danmaku-enter, 12px)); } }
body[data-widget-kind="danmaku-overlay"] { overflow: hidden; }
body[data-widget-kind="danmaku-overlay"] #generic { box-sizing: border-box; height: 100vh; height: 100dvh; padding: 8px; }
body[data-widget-kind="danmaku-overlay"] .live-widget { height: 100%; max-height: none; margin: 0; }
@media (prefers-reduced-motion: reduce) { .live-widget .danmaku-card { animation: none !important; } }

/* Theme layers inherit the user's four palettes and opacity, including zero.
   No backdrop blur is needed: OBS video is outside this browser source. */
.live-widget[data-theme="glass"] .danmaku-card {
  min-height: min(4.5em, 100%);
  padding-block: .5em;
  background-image: linear-gradient(120deg, rgb(255 255 255 / calc(var(--danmaku-opacity) * .4)), transparent 65%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--danmaku-opacity) * .7)), 0 3px 9px rgb(20 30 50 / calc(var(--danmaku-opacity) * .08));
}
.live-widget[data-theme="glass"] .danmaku-card::before { opacity: .55; }
.live-widget[data-theme="glass"] .danmaku-flourish { opacity: .3; }
.live-widget[data-theme="heritage"] .danmaku-card {
  min-height: min(5.2em, 100%);
  padding-block: .7em;
  background-image: linear-gradient(135deg, rgb(255 255 255 / calc(var(--danmaku-opacity) * .3)), transparent 45%, rgb(255 255 255 / calc(var(--danmaku-opacity) * .16)));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / calc(var(--danmaku-opacity) * .55)), 0 3px 8px rgb(25 30 40 / calc(var(--danmaku-opacity) * .13));
}
.live-widget[data-theme="heritage"] .danmaku-portrait.avatar-wrap { width: 4em; height: 4em; }
.live-widget[data-theme="heritage"] .danmaku-card[data-tier="viewer"] .danmaku-portrait { width: 3.2em; }
.live-widget[data-theme="heritage"] .danmaku-card[data-tier="governor"] { border-width: 5px; }
.live-widget[data-theme="heritage"] .danmaku-card[data-tier="admiral"] { border-width: 3px; }
.live-widget[data-theme="heritage"] .danmaku-name { letter-spacing: .025em; }
.live-widget[data-theme="minimal"] .danmaku-card {
  min-height: min(3.5em, 100%);
  padding: .3em .7em .3em .4em;
  gap: .5em;
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  border-left: 3px solid var(--danmaku-edge);
  border-radius: .65em;
  box-shadow: none;
}
.live-widget[data-theme="minimal"] .danmaku-card[data-tier="governor"] { border-left: 6px double var(--danmaku-edge); border-radius: 1.5em .65em .65em 1.5em; }
.live-widget[data-theme="minimal"] .danmaku-card[data-tier="admiral"] { border-left-width: 4px; border-radius: .35em 1.2em .35em 1.2em; }
.live-widget[data-theme="minimal"] .danmaku-card[data-tier="captain"] { border-left-style: dashed; border-radius: 1.2em .35em .35em 1.2em; }
.live-widget[data-theme="minimal"] .danmaku-card::before, .live-widget[data-theme="minimal"] .danmaku-flourish { display: none; }
.live-widget[data-theme="minimal"] .danmaku-portrait.avatar-wrap { width: 2.8em; height: 2.8em; }
.live-widget[data-theme="minimal"] .danmaku-portrait:not(.avatar-framed) .avatar { width: 2.4em; height: 2.4em; }
.live-widget[data-theme="minimal"] .danmaku-card[data-tier="viewer"] .danmaku-portrait { width: 2.6em; }
.live-widget[data-theme="minimal"] .danmaku-name { font-size: .8em; }
.live-widget[data-theme="minimal"] .danmaku-body { gap: .08em; }
.live-widget[data-theme="minimal"] .danmaku-text { line-height: 1.35; }

/* A thin neutral frosted surface, independent of the rank palette. OBS cannot
   sample the video below a browser source, so do not fake a backdrop blur in
   previews that would disappear in the actual composite. */
.live-widget[data-theme="blend"] .danmaku-card {
  align-self: flex-start; width: fit-content; max-width: 100%; min-height: 0;
  align-items: flex-start; gap: .48em; padding: .38em .65em .42em .4em;
  border: 1px solid rgb(255 255 255 / calc(var(--danmaku-opacity) * .16)); border-radius: .8em;
  background-color: rgb(22 18 28 / calc(var(--danmaku-opacity) * .4));
  background-image: linear-gradient(125deg, rgb(255 255 255 / calc(var(--danmaku-opacity) * .1)), rgb(255 255 255 / calc(var(--danmaku-opacity) * .025)) 65%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--danmaku-opacity) * .1)), 0 2px 8px rgb(8 5 15 / calc(var(--danmaku-opacity) * .12));
  text-shadow: 0 1px 2px #080711d0, 0 0 3px #08071180;
}
.live-widget[data-theme="blend"] .danmaku-card::before,
.live-widget[data-theme="blend"] .danmaku-flourish { display: none; }
.live-widget[data-theme="blend"] .danmaku-portrait.avatar-wrap { width: 2.1em; height: 2.1em; margin: .05em 0 0; }
.live-widget[data-theme="blend"] .danmaku-portrait:not(.avatar-framed) .avatar { width: 1.65em; height: 1.65em; }
.live-widget[data-theme="blend"] .danmaku-body { flex: 0 1 auto; gap: .14em; }
.live-widget[data-theme="blend"] .danmaku-heading { gap: .25em .48em; }
.live-widget[data-theme="blend"] .danmaku-name { font-size: .68em; line-height: 1.5; font-weight: 500; opacity: .85; }
.live-widget[data-theme="blend"] .danmaku-badge { font-size: .5em; }
.live-widget[data-theme="blend"] .danmaku-text { font-weight: 600; line-height: 1.4; letter-spacing: .015em; }
.live-widget[data-theme="blend"] .danmaku-emoticon img { max-height: 2.4em; }