/* All display effects stay within the desk monitor's original glass. */
.azeroth-monitor-r32{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.azeroth-monitor-r32[hidden]{display:none!important}
.azeroth-monitor-stage32{position:absolute;left:0;top:0;width:1448px;height:1086px;transform-origin:0 0;pointer-events:none}
.azeroth-monitor-screen32{position:absolute;left:0;top:0;display:block;box-sizing:border-box;width:640px;height:360px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:3px;overflow:hidden;transform-origin:0 0;background:#110719;isolation:isolate;pointer-events:none;color:#ffe6fb;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
button.azeroth-monitor-screen32{pointer-events:auto;cursor:pointer;touch-action:manipulation}
.azeroth-monitor-screen32:focus-visible{outline:8px solid #ffc5f2;outline-offset:-10px}
.azeroth-monitor-wallpaper32{display:block;width:100%;height:100%;object-fit:fill;filter:brightness(.88);pointer-events:none}
.azeroth-monitor-screen32::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#fff1 0%,transparent 40%,#08051228 100%);pointer-events:none;box-shadow:inset 0 0 18px #0e061b66}
.azeroth-monitor-boot32{position:absolute;inset:0;display:none;overflow:hidden;background:radial-gradient(ellipse at 65% 65%,#51204755,transparent 65%),#100b19;color:#f8bef0;text-align:left}
.azeroth-monitor-screen32[data-playing=true] .azeroth-monitor-boot32{display:block}
.azeroth-monitor-grid32{position:absolute;inset:0;opacity:.3;background:linear-gradient(#e08af515 1px,transparent 1px),linear-gradient(90deg,#b48cff15 1px,transparent 1px);background-size:32px 32px}
.azeroth-monitor-boot32::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 4px,#d890ec0c 4px 5px)}
.azeroth-monitor-code32{position:absolute;left:26px;top:24px;font-size:12px;line-height:1.7;letter-spacing:1px;color:#c995db}
.azeroth-monitor-core32{position:absolute;inset:104px 42px auto;display:flex;flex-direction:column;align-items:center;gap:20px}
.azeroth-monitor-kicker32{font-size:12px;letter-spacing:3px;color:#ad83d5}
.azeroth-monitor-core32 strong{display:block;min-height:40px;font-size:31px;line-height:40px;font-weight:600;letter-spacing:2px;color:#ffe3fa;text-shadow:2px 0 #cf7af073,-2px 0 #f5a6bb55,0 0 20px #ed77f74d;white-space:nowrap}
.azeroth-monitor-status32{font-size:12px;letter-spacing:2px;color:#e2a1e6}
.azeroth-monitor-meter32{display:block;width:80%;height:4px;background:#b07bcc30;overflow:hidden}
.azeroth-monitor-meter32 i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a874ff,#f7a6bb);box-shadow:0 0 12px #f2a4ed}
.azeroth-monitor-footer32{position:absolute;bottom:24px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;color:#bd93d7}
#sanctuary-view[data-window-open=true] button.azeroth-monitor-screen32{pointer-events:none}
@media(forced-colors:active){button.azeroth-monitor-screen32:focus-visible{outline-color:Highlight}.azeroth-monitor-core32 strong{color:CanvasText;text-shadow:none}.azeroth-monitor-boot32{background:Canvas;color:CanvasText}}

/* Cat cameo uses the same projected and clipped screen as the normal desktop. */
.azeroth-monitor-cat32{position:absolute;inset:0;display:none;overflow:hidden;background:#100916}
.azeroth-monitor-cat32 img{position:absolute;width:2866.285714px!important;height:2866.285714px!important;max-width:none!important;left:-224px;top:-2316px;pointer-events:none;filter:brightness(.85) saturate(.85)}
.azeroth-monitor-screen32[data-playing=true][data-mode=cat] .azeroth-monitor-cat32{display:block;animation:azeroth-cat-glitch33 .19s steps(2,end) 4}
.azeroth-monitor-screen32[data-mode=cat] .azeroth-monitor-boot32{display:none}
@keyframes azeroth-cat-glitch33{0%,100%{filter:none;opacity:1}50%{filter:hue-rotate(18deg);opacity:.72}}
@media(prefers-reduced-motion:reduce){.azeroth-monitor-cat32{animation:none!important}}

/* r34: cover the full 640×360 display with the existing 280×280 cat crop.
 * Scale uniformly by 640/280, then center-crop 140px from its top/bottom.
 * The source artwork, perspective surface, glitch filter and lifetime are unchanged. */
.azeroth-monitor-cat-crop32{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}

/* r50: approved 16:9 music video fills the same projected glass.
 * Preserve full landscape framing, including the final face and peace sign.
 * Loading leaves the wallpaper visible. No transition or autoplay on mount. */
.azeroth-monitor-video36{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 50%;background:#110719;pointer-events:none;visibility:hidden}
.azeroth-monitor-screen32[data-playing=true][data-mode=video][data-video-state=playing] .azeroth-monitor-video36{visibility:visible}
.azeroth-monitor-screen32[data-mode=video] .azeroth-monitor-boot32{display:none}

/* r51: a quiet gothic-lavender end title on the very same clipped screen.
 * The title uses the site's local decorative typeface; no remote font request.
 * The final video frame only fades AFTER ended, preserving the full soundtrack. */
@font-face{font-family:AzerothEndcard51;src:url('/assets/fonts/cinzel-decorative/CinzelDecorative-Regular.ttf') format('truetype');font-display:swap;font-style:normal;font-weight:400}
.azeroth-monitor-endcard51{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;overflow:hidden;background:radial-gradient(ellipse at center,#251433 0%,#100b19 56%,#08060d 100%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease,visibility 0s 1s}
.azeroth-monitor-endcard51 strong{font-family:AzerothEndcard51,Georgia,serif;font-size:43px;font-weight:400;line-height:1.3;letter-spacing:3px;white-space:nowrap;color:#e4c9ff;text-shadow:0 0 17px #ab6fd44d,0 1px 0 #fff1;opacity:0;transform:translateY(3px);transition:opacity .85s ease,transform .85s ease}
.azeroth-endcard-ornament51{font-family:Georgia,serif;font-size:25px;line-height:1;color:#b58bcf;opacity:0;transition:opacity .85s ease}
.azeroth-endcard-rule51{height:1px;width:170px;background:linear-gradient(90deg,transparent,#b58bcf,transparent);opacity:0;transition:opacity .85s ease}
.azeroth-monitor-screen32[data-playing=true][data-mode=video]:not([data-endcard=none]) .azeroth-monitor-endcard51{opacity:1;visibility:visible;transition:opacity 1s ease,visibility 0s}
.azeroth-monitor-screen32[data-endcard=holding] .azeroth-monitor-endcard51 strong{opacity:1;transform:none}
.azeroth-monitor-screen32[data-endcard=holding] .azeroth-endcard-ornament51,.azeroth-monitor-screen32[data-endcard=holding] .azeroth-endcard-rule51{opacity:.8}
/* During a replay seek the opaque card stays up; initial loading still shows wallpaper. */
.azeroth-monitor-screen32[data-playing=true][data-mode=video][data-endcard=restarting] .azeroth-monitor-video36{visibility:visible}
/* An explicit stop removes the card instantly, never leaving it over the wallpaper. */
.azeroth-monitor-screen32:not([data-playing=true]) .azeroth-monitor-endcard51{transition:none;visibility:hidden;opacity:0}
@media(prefers-reduced-motion:reduce){.azeroth-monitor-endcard51,.azeroth-monitor-endcard51 *{transition:none!important;transform:none!important}}