*{box-sizing:border-box}body{margin:0;background:#080708;color:#fff;font-family:system-ui}button{cursor:pointer;background:#edcf91;color:#20151a;border:0;border-radius:12px;padding:14px;font-weight:700}#screen{width:min(100vw,177.77dvh);height:min(100dvh,56.25vw);margin:auto;position:absolute;inset:0;display:grid;grid-template-columns:24% 52% 24%;grid-template-rows:10% 80% 10%;padding:12px;background:linear-gradient(135deg,#481329,#17131a);border:2px solid #edcf91;border-radius:20px}header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 10px}#left,#right{display:grid;grid-template-rows:repeat(4,1fr);gap:8px;padding:8px;min-height:0}#video{align-self:center;aspect-ratio:16/9;width:100%;background:#000}#player{width:100%;height:100%}article{display:flex;align-items:center;gap:8px;padding:10px;background:#ffffff20;border:1px solid #ffffff50;border-radius:10px;overflow:hidden;font-size:clamp(12px,1.5vw,25px)}article span{flex:1;min-width:0;overflow:hidden}article strong,article small{display:block;overflow:hidden;text-overflow:ellipsis}article b{background:#dedbd5;color:#222;padding:8px;border-radius:5px;white-space:nowrap}article.current b{background:#d00b36;color:white}#status{grid-column:1/-1;text-align:center;align-self:center;margin:0;font-size:14px}dialog{position:fixed;inset:0;margin:auto;z-index:10;background:#251824;color:white;border:1px solid #edcf91;border-radius:20px;max-width:90vw;padding:24px}dialog button{margin:6px}body.portrait #screen{width:min(100vw,56.25dvh);height:min(100dvh,177.77vw);grid-template-columns:1fr 1fr;grid-template-rows:10% 30% 52% 8%}body.portrait #video{grid-column:1/-1;grid-row:2;width:100%;height:100%;aspect-ratio:auto}body.portrait #left,body.portrait #right{grid-row:3}body.portrait article{font-size:clamp(11px,2dvh,20px);padding:5px}body.portrait header strong{font-size:14px}body.portrait header button{padding:8px;font-size:11px}
.show-art{display:none}
.screen-playlist-name{display:none}
body.landscape[data-panel=visuals] #screen #showTrack{overflow:visible}
body.landscape[data-panel=visuals] #screen .screen-playlist-name{display:block;position:absolute;top:100%;left:0;right:0;margin:12px 0 0;text-align:center;color:#ffe2ad;font:750 clamp(16px,2cqw,32px)/1.3 system-ui;text-shadow:0 2px 5px #000;overflow-wrap:anywhere}
.screen-actions{display:flex;gap:8px;align-items:center;pointer-events:auto}
#screenSound[aria-pressed=true]{background:#33443c;color:#fff}
body:is(.portrait,.show-portrait)[data-panel=visuals] #screenSound{position:fixed;bottom:4px;left:4px;pointer-events:auto;z-index:6}
/* Three presentations, synchronized to the main screen; same iframe throughout. */
body #screen{display:block!important;background-position:center;background-size:cover;container-type:inline-size;overflow:hidden}
body #screen header{position:absolute;top:2%;left:3%;right:3%;z-index:4;height:5%}
body #screen #left,body #screen #right{display:none}
body #screen #video{position:absolute;left:8%;top:50%;width:84%;height:auto;aspect-ratio:16/9;transform:translateY(-50%);opacity:0;pointer-events:none}
body[data-panel=video] #screen #video{opacity:1}
body #screen #status{position:absolute;left:3%;right:3%;bottom:2%;font-size:clamp(10px,1cqw,18px)}
body #screen .show-art{position:absolute;display:none;top:50%;width:45%;height:auto;aspect-ratio:16/9;margin:0;transform:translateY(-50%);overflow:hidden}
body[data-panel=visuals] #screen .show-art{display:block}
body.landscape[data-panel=visuals] #screen #showTrack{display:none}
body.landscape[data-panel=visuals] #screen #showBac{left:3%;right:auto;top:auto;bottom:3%;width:34%;transform:none}
body.landscape[data-panel=visuals] #screen #video{left:auto;right:3%;top:auto;bottom:3%;width:19.125%;aspect-ratio:1;transform:none;overflow:hidden;opacity:1}
body.landscape[data-panel=visuals] #screen #video #player{position:absolute;left:50%;top:0;width:177.777778%;height:100%;max-width:none;transform:translateX(-50%)}
body.landscape[data-panel=visuals] #screen #status{display:none}
body #screen #showBac{left:3%}body #screen #showTrack{right:3%}
body #screen .show-art img{width:100%;height:100%;object-fit:cover}
body #screen figcaption{position:absolute;bottom:0;left:0;right:0;padding:15% 4% 4%;background:linear-gradient(transparent,#000e);font:700 clamp(14px,2cqw,34px)/1.2 system-ui}
body #screen #screenCatalog{position:absolute;inset:9% 2% 8%}
body #screen #screenCatalog[hidden]{display:none}
body.portrait #screen .show-art,body.show-portrait #screen .show-art{width:94%;left:3%;right:auto}
body.portrait #screen #showBac,body.show-portrait #screen #showBac{top:30%}
body.portrait #screen #showTrack,body.show-portrait #screen #showTrack{top:67%}

body.show-portrait #screen{width:min(100vw,56.25dvh);height:min(100dvh,177.77vw);grid-template-columns:1fr;grid-template-rows:6% 28% 32% 28% 6%;padding:0;overflow:hidden;border-radius:0;background:#080708}
body.show-portrait #left,body.show-portrait #right{display:none}
body.show-portrait .show-art{display:block;position:relative;margin:0;min-height:0;overflow:hidden;background:#211421}
body.show-portrait #showBac{grid-row:2}body.show-portrait #showTrack{grid-row:4}
body.show-portrait .show-art img{width:100%;height:100%;object-fit:cover}
body.show-portrait figcaption{position:absolute;bottom:0;left:0;right:0;padding:28px 4% 12px;background:linear-gradient(transparent,#000e);font:700 clamp(14px,2.5dvh,30px)/1.15 system-ui;overflow-wrap:anywhere}
body.show-portrait #video{grid-column:1;grid-row:3;height:100%;aspect-ratio:auto}
body.show-portrait header strong{font-size:14px}body.show-portrait header button{font-size:10px;padding:7px}body.show-portrait #status{grid-row:5;font-size:10px;padding:4px}
body.show-portrait #screen #video{height:auto;aspect-ratio:16/9;width:84%}body.show-portrait[data-panel=catalog] #screen .show-art,body.show-portrait[data-panel=video] #screen .show-art{display:none}
body:is(.portrait,.show-portrait)[data-panel=visuals] #screen{padding:0;border:0;border-radius:0}
body:is(.portrait,.show-portrait)[data-panel=visuals] #screen .show-art{left:0;right:auto;width:100%;height:33.333333%;aspect-ratio:auto;transform:none;opacity:1;transition:opacity .25s}
body:is(.portrait,.show-portrait)[data-panel=visuals] #screen #showTrack{top:0}
body:is(.portrait,.show-portrait)[data-panel=visuals] #screen #showBac{top:66.666667%}
body:is(.portrait,.show-portrait)[data-panel=visuals] #screen #video{left:0;top:33.333333%;width:100%;height:33.333333%;aspect-ratio:auto;transform:none;opacity:1;overflow:hidden;transition:opacity .25s}
body:is(.portrait,.show-portrait)[data-panel=visuals] #player{position:absolute;left:-2.6749%;top:0;width:105.3498%;height:100%}
body:is(.portrait,.show-portrait)[data-panel=visuals] #screen header{height:auto;top:0;pointer-events:none}
body:is(.portrait,.show-portrait)[data-panel=visuals] #screen header strong{display:none}
body:is(.portrait,.show-portrait)[data-panel=visuals] #format{position:fixed;bottom:4px;right:4px;opacity:.3;pointer-events:auto}
body:is(.portrait,.show-portrait)[data-panel=visuals] #format:hover,body:is(.portrait,.show-portrait)[data-panel=visuals] #format:focus{opacity:1}
body:is(.portrait,.show-portrait)[data-panel=visuals] #status{bottom:2px;z-index:5;background:#0009}
body.screen-intro[data-panel=visuals] #screen .show-art,body.screen-intro[data-panel=visuals] #screen #video{opacity:0!important;transition:none}
.ring-notice{position:absolute;z-index:8;left:8%;right:8%;bottom:12%;padding:14px;background:#2d102bee;border:2px solid #edcf91;border-radius:12px;font-weight:800;text-align:center}
.ring-notice[hidden],body:not([data-panel=video]) .ring-notice{display:none}
@media(prefers-reduced-motion:reduce){body #screen .show-art,body #screen #video{transition:none!important}}
.battle-feed{position:absolute;z-index:9;left:8%;right:8%;top:8%;height:24%;display:flex;flex-direction:column;gap:8px;overflow:hidden;pointer-events:none}
.battle-feed[hidden],body:not([data-panel=video]) .battle-feed{display:none!important}
.battle-bubble{display:flex;align-items:center;gap:12px;min-height:0;flex:0 1 auto;padding:10px 12px;border:1px solid #e6be7890;border-left:4px solid #ffcc52;border-radius:5px 15px 15px 15px;background:linear-gradient(110deg,#251020f5,#15121aeb);box-shadow:0 4px 12px #0007;color:#fff4df}
.battle-punch{flex:none;padding:7px 5px;background:#ffcb47;color:#301226;border-radius:4px;transform:rotate(-5deg);font:1000 clamp(13px,3cqw,26px)/1 system-ui;letter-spacing:-.04em}
.battle-bubble:nth-child(2){border-left-color:#ef527b}.battle-bubble:nth-child(2) .battle-punch{background:#ef527b}.battle-bubble:nth-child(3){opacity:.8}
.battle-bubble>div{min-width:0}.battle-bubble strong{display:block;font:800 clamp(12px,2.4cqw,23px)/1.15 system-ui;color:#ffdc8c}
.battle-bubble p{margin:4px 0 0;font:600 clamp(11px,2.1cqw,20px)/1.2 system-ui;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.battle-bubble.is-new{animation:battle-arrive .22s ease-out both}
@keyframes battle-arrive{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
.cjk-lowproc .battle-bubble{animation:none!important;box-shadow:none}
body.landscape[data-panel=visuals] #screen #video{box-shadow:0 0 0 8px #fff4df,0 12px 32px 8px #0008!important;border-radius:0!important}
@media(prefers-reduced-motion:reduce){.battle-bubble{animation:none!important}}
/* SCREEN column: category, access, admin poster, then the same video iframe. */
body.cjk-screen-split #screen{border:0;border-radius:0;padding:0}
body.cjk-screen-column-active[data-panel=visuals] #screen .show-art,
body.cjk-screen-column-active[data-panel=visuals] #screen header>strong,
body.cjk-screen-column-active[data-panel=visuals] #screen #status{display:none!important}
body.cjk-screen-column-active[data-panel=visuals] #screen #video{left:auto!important;right:var(--cjk-column-right)!important;top:var(--cjk-column-top)!important;bottom:auto!important;width:var(--cjk-column-size)!important;height:var(--cjk-column-size)!important;aspect-ratio:1!important;transform:none!important;opacity:1!important;overflow:hidden;box-sizing:border-box;border:4px solid #fff4df!important;box-shadow:0 8px 24px #0006!important;border-radius:0!important;transition:none}
body.cjk-screen-column-active[data-panel=visuals] #screen #player{position:absolute!important;left:50%!important;top:0!important;width:177.777778%!important;height:100%!important;max-width:none!important;transform:translateX(-50%)!important}
body.cjk-screen-column-active[data-panel=visuals] .screen-actions{position:fixed;left:12px;bottom:12px;top:auto;right:auto}
body.cjk-screen-column-active[data-panel=visuals] :is(#screenSound,#format){position:static;opacity:1}

/* Admin transport anchored to the image, never shown on public clients. */
.cjk-screen-zap{position:absolute!important;right:18px!important;bottom:18px!important;z-index:120!important;min-width:88px;min-height:44px;padding:10px 18px!important;border:2px solid #ffe2a1!important;border-radius:8px!important;background:#171019ed!important;color:#ffe2a1!important;font:900 16px/1.2 system-ui!important;letter-spacing:.06em;box-shadow:0 3px 16px #0009;cursor:pointer}
.cjk-screen-zap:focus-visible{outline:3px solid #fff;outline-offset:4px}.cjk-screen-zap:disabled{opacity:.45;cursor:default}

#video{position:relative}

/* RING: use the entire available screen; YouTube preserves video proportions. */
body[data-panel=video] #screen #video{left:0;right:0;top:0;bottom:0;width:100%;height:100%;aspect-ratio:auto;transform:none;opacity:1;overflow:hidden}
body[data-panel=video] #screen #video #player{position:absolute;inset:0;width:100%;height:100%;max-width:none;transform:none}