/* Live cards share the sidebar's purple and gold frame. */
[data-stream-shell][hidden] { display: none !important; }
[data-stream-shell] { min-width: 0; }
.detona-streamers { padding: 9px; }
.detona-stream-card { display: block; min-width: 0; color: #f0e5f7; text-decoration: none; }
.detona-stream-card + .detona-stream-card { margin-top: 13px; padding-top: 13px; border-top: 1px solid #694771; }
.detona-stream-preview { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #775780; background: radial-gradient(ellipse at center, #67407e, #191120 80%); }
.detona-stream-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detona-stream-preview::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, #110c1dcc); pointer-events: none; }
.detona-stream-live { position: absolute; z-index: 1; top: 7px; left: 7px; display: flex; align-items: center; gap: 5px; padding: 3px 5px; background: #8b233d; border: 1px solid #ec8b99; color: #fff; font: 700 9px/1.3 Arial, sans-serif; letter-spacing: .35px; }
.detona-stream-live i { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.detona-stream-play { position: absolute; z-index: 1; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 36px; height: 36px; padding-left: 2px; border: 1px solid #f1d496a6; border-radius: 50%; background: #160f24bb; color: #ffe1ac; font-size: 15px; }
.detona-stream-provider { position: absolute; z-index: 1; bottom: 6px; right: 7px; color: #fff0d6; font-size: 10px; text-shadow: 0 1px 3px #000; }
.detona-stream-info { display: block; padding: 9px 2px 2px; }
.detona-stream-info > strong { display: block; color: #f2ce91; font-size: 13px; overflow-wrap: anywhere; }
.detona-stream-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #e6dcec; font-size: 11px; line-height: 1.55; margin-top: 3px; overflow-wrap: anywhere; }
.detona-stream-viewers { display: block; color: #c9b4d8; font-size: 10px; margin-top: 6px; }
.detona-stream-watch { display: flex; justify-content: space-between; align-items: center; gap: 5px; min-height: 34px; color: #efc57c; font-size: 11px; margin-top: 5px; border-top: 1px solid #64436d66; }
.detona-stream-card:hover .detona-stream-preview, .detona-stream-card:focus-visible .detona-stream-preview { border-color: #e9c48a; }
.detona-stream-card:hover .detona-stream-play { background: #59316fe8; }
.detona-stream-card:focus-visible, .detona-stream-dialog :focus-visible { outline: 2px solid #bcefff; outline-offset: 3px; }
dialog.detona-stream-dialog { box-sizing: border-box; padding: 0; width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; border: 1px solid #b48a81; color: #eee1f6; background: #1a1225; box-shadow: 0 20px 80px #000b; overflow: auto; }
dialog.detona-stream-dialog:not([open]) { display: none; }
dialog.detona-stream-dialog[open] { display: block; }
.detona-stream-dialog::backdrop { background: #090610e6; backdrop-filter: blur(4px); }
.detona-stream-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 13px 16px; background: linear-gradient(120deg, #432a50, #1b1426); border-bottom: 1px solid #795668; }
.detona-stream-dialog-kicker { font: 9px/1.5 Arial, sans-serif; letter-spacing: 1.2px; color: #d5bbdf; }
.detona-stream-dialog-head h2 { margin: 3px 0 0; font: 21px/1.3 Georgia, 'Times New Roman', serif; color: #f1cf91; overflow-wrap: anywhere; }
.detona-stream-close { flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid #ad819e; background: #26192f; color: #ffe3bd; font: 26px/1 Arial, sans-serif; cursor: pointer; }
.detona-stream-close:hover { background: #573463; }
.detona-stream-player { min-width: 400px; min-height: 300px; background: #09070d; }
.detona-stream-player iframe { display: block; width: 100%; min-width: 400px; min-height: 300px; aspect-ratio: 16 / 9; height: auto; border: 0; }
.detona-stream-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font: 12px/1.5 Arial, sans-serif; }
.detona-stream-dialog-footer p { margin: 0; color: #d8cbe2; }
.detona-stream-dialog-footer a { flex: none; color: #efc57c; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .detona-stream-dialog-footer { flex-wrap: wrap; }
  .detona-stream-dialog-head { padding: 10px; }
}