*{box-sizing:border-box}html,body{margin:0;background:#000;color:#fff;font-family:Arial,sans-serif;text-transform:uppercase}body{padding:8px}main{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:calc(100dvh - 16px)}.side{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;color:var(--color)}.stream{border:2px solid var(--color);border-radius:7px;overflow:hidden;flex:none}.banner{height:90px;display:flex;align-items:center;gap:14px;padding:8px 14px;border-bottom:2px solid var(--color);background-position:center;background-size:cover;position:relative}.banner:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.12))}.banner>*{position:relative}.avatar{height:70px;width:70px;object-fit:contain;border:1px solid var(--color);border-radius:8px;background:#000b}h1{font-size:clamp(22px,2vw,36px);margin:0;text-shadow:0 2px 5px #000}.player{position:relative;width:100%;aspect-ratio:16/9;background:#000}.embed,.embed iframe,.offline-art{position:absolute;inset:0;width:100%;height:100%;border:0}.offline-art img{width:100%;height:100%;object-fit:cover}.offline-art[hidden],.offline-notice[hidden]{display:none}.offline-notice{position:absolute;bottom:10px;right:10px;border:1px solid var(--color);background:#000d;padding:6px 9px;border-radius:4px;font-size:11px;pointer-events:none}.show-player{position:absolute;left:10px;bottom:10px;color:var(--color);border:1px solid var(--color);border-radius:4px;background:#000d;padding:6px 9px;text-transform:uppercase;cursor:pointer}.chat{width:360px;max-width:100%;min-height:280px;flex:1;display:flex;flex-direction:column;border:2px solid var(--color);border-radius:6px;overflow:hidden}.side:last-child .chat{align-self:flex-end}.chat-heading{display:flex;justify-content:space-between;align-items:center;padding:10px;font-size:12px;border-bottom:1px solid var(--color);background:#080808}.chat-heading a{color:inherit;text-decoration:none}.chat iframe{width:100%;flex:1;min-height:240px;border:0;background:#18181b}a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:2px}@media(max-width:850px){main{grid-template-columns:1fr;height:auto}.chat{align-self:center!important;height:450px;flex:none}.banner{height:76px}.avatar{height:58px;width:58px}.side{gap:10px;margin-bottom:16px}}@media(min-width:851px) and (max-height:850px){main{height:auto}.chat{height:350px;flex:none}}

/* Header-free videos and full-height shared chat. */
main{grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);align-items:start;height:calc(100dvh - 16px)}
.side{height:auto;margin:0}.stream{width:100%}.player{aspect-ratio:16/9}
.shared-chat{width:100%;height:100%;min-height:0;max-width:none;color:var(--color);align-self:stretch;flex:none}
.shared-chat iframe{min-height:0}.chat-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-bottom:1px solid var(--color)}
.chat-tabs button{font:700 12px Arial,sans-serif;text-transform:uppercase;color:var(--color);background:#080808;border:1px solid var(--color);border-radius:4px;padding:12px 4px;cursor:pointer}
.chat-tabs button[aria-pressed="true"]{background:var(--color);color:#000}
@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) minmax(280px,320px) minmax(0,1fr)}}
@media(max-width:740px){main{grid-template-columns:1fr;height:auto}.side{grid-column:1}.side:first-child{grid-row:1}.side:last-child{grid-row:2}.shared-chat{grid-column:1;grid-row:3;height:75dvh;min-height:400px;width:100%;max-width:420px;justify-self:center}}

/* Mirror Southern's header toward the outside edge. */
.side[aria-label="SouthernVixn"] .banner{flex-direction:row-reverse;text-align:right}
.side[aria-label="SouthernVixn"] .banner:before{background:linear-gradient(270deg,rgba(0,0,0,.75),rgba(0,0,0,.12))}
.side[aria-label="SouthernVixn"] .avatar{flex-shrink:0}


.page-credit{display:block;flex-shrink:0;margin:8px;padding:12px 8px;border:2px solid #39ff14;border-radius:5px;background:#000;color:#39ff14;text-align:center;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.5px}.page-credit:hover{background:#39ff14;color:#000}.page-credit:focus-visible{outline:2px solid #fff;outline-offset:2px}

.chat-column{display:flex;flex-direction:column;gap:16px;height:100%;min-height:0;min-width:0}.chat-column .shared-chat{flex:1;height:auto;min-height:0}.chat-column .page-credit{margin:0;width:100%}
@media(max-width:740px){.chat-column{grid-column:1;grid-row:3;height:calc(75dvh + 60px);min-height:460px;width:100%;max-width:420px;justify-self:center}.chat-column .shared-chat{width:100%;max-width:none}}

.side.has-feature{height:100%;gap:16px}.southern-feature{position:relative;margin:0;flex:1;min-height:120px;border:2px solid var(--color);border-radius:7px;overflow:hidden;background:#000}.southern-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:740px){.side.has-feature{height:auto}.southern-feature{flex:none;aspect-ratio:16/9;min-height:0}}

.chat-content{position:relative;flex:1;min-height:0;overflow:hidden}.chat-content iframe{display:block;width:100%;height:100%;border:0}.chat-content iframe[hidden],.chat-offline[hidden]{display:none}.chat-offline{position:absolute;inset:0;background:#000}.chat-offline img{width:100%;height:100%;object-fit:cover;display:block}.chat-offline p{position:absolute;bottom:0;left:0;right:0;margin:0;padding:16px 12px;background:rgba(0,0,0,.9);border-top:1px solid var(--color);color:var(--color);font-size:12px;line-height:1.6;font-weight:700;text-align:center}

.chat-heading{position:relative;justify-content:center;padding-left:32px;padding-right:32px;text-align:center}.chat-heading #chat-popout{position:absolute;right:10px;top:50%;transform:translateY(-50%)}


.visit-counter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:12px 16px;border:2px solid #39ff14;border-radius:6px;background:#000;color:#39ff14;font-size:12px;font-weight:700}.visit-counter strong{font-size:19px;font-variant-numeric:tabular-nums}