/* CB-0368. Video and every interactive coordinate share a single 1920 x 1080 contain frame. */
/* Keep the shared scene coordinates intact while clipping artwork below the navigation. */
.stage{clip-path:inset(var(--site-header-height,76px) 0 0)}
.cinema-surface,.cinema-surface video,.cinema-surface img,#freeplay-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cinema-surface{background:#000;transform-origin:50% 50%;z-index:0}
.cinema-surface video,.cinema-surface img{object-fit:contain;object-position:center}
#last-frame{opacity:0;transition:opacity 180ms linear}
#last-frame.visible{opacity:1}
#freeplay-canvas{z-index:1}
#awakening-shade{position:absolute;inset:0;opacity:.9;pointer-events:none;z-index:1}
#awakening-shade svg{width:100%;height:100%;display:block}
#freeplay-canvas{z-index:2}
#game-scene{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:1;background:#000}
#layer-frame{position:absolute}
#layer-frame img{position:absolute;display:block;pointer-events:none}
#game-background{inset:0;width:100%;height:100%}
#game-king,#game-cat{will-change:transform}
.stage>.shade{display:none}
.opening{z-index:3}
.opening-brand{z-index:4}
.opening-brand{will-change:transform,opacity}
.world-title{z-index:3}
.freeplay-ui{position:absolute;inset:0;z-index:6;pointer-events:none}
.note-pad{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:var(--note-size,100px);height:var(--note-size,100px);min-width:52px;min-height:52px;border-radius:50%;border:2px solid #c1f9ffbc;background:radial-gradient(circle,#a5f8ff40,#35ceff18 50%,#00243d60 70%);box-shadow:0 0 25px #4ae6ff80,inset 0 0 18px #89edff80;display:grid;place-items:center;color:#fff9de;touch-action:pan-y}
.note-pad>span[aria-hidden]{font-size:clamp(24px,3vw,50px);font-weight:900;text-shadow:0 0 12px #20c9ff;line-height:1}
.note-pad:active{background:#c3f9ff66;box-shadow:0 0 45px #a0f6ff}
.note-pad:disabled{opacity:.35;cursor:default}
.note-pad.boxing-note{border:0;background:none;box-shadow:none;padding:0}
.note-pad.boxing-note:active{background:none;box-shadow:none}
.note-pad.boxing-note>span[aria-hidden]{display:none}
.note-pad.boxing-note:focus-visible{outline:2px solid #fff4c0;outline-offset:4px}
.freeplay-caption{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);text-align:center;margin:0;color:#fff;white-space:nowrap;font-size:clamp(12px,1.15vw,17px);line-height:1.8;text-shadow:0 2px 12px #26180b}
.freeplay-caption small{display:block;font-size:.75em;opacity:.8}
.freeplay-caption a{pointer-events:auto;text-decoration:underline;text-underline-offset:4px;padding:8px 12px;display:inline-block}
.continue-hint.playing-hint{top:auto;bottom:1%;font-size:11px;transform:translateX(-50%);opacity:.7!important}
.media-notice{position:absolute;z-index:8;left:50%;top:14%;transform:translateX(-50%);max-width:90vw;padding:12px 20px;border:1px solid #ffffff40;border-radius:8px;background:#07152bd9;color:white;font-size:12px;text-align:center}
.media-notice a{display:inline-block;text-decoration:underline;padding:6px}
.stage.paused .cinema-surface{filter:brightness(.7)}
.scene-resume{position:absolute;z-index:9;left:50%;top:75%;transform:translate(-50%,-50%) skewX(-10deg);border:0;background:transparent;color:white;padding:16px 22px;font-family:CatBeatDisplay,sans-serif;font-size:clamp(20px,2.2vw,32px);letter-spacing:.075em;line-height:1.3;white-space:nowrap;text-shadow:0 2px 14px #000,0 0 24px #0009;touch-action:manipulation}
@media(max-width:700px){.freeplay-caption{bottom:10%;font-size:12px}.continue-hint.playing-hint{bottom:4%}#controls .small-brand{display:none}#controls{justify-content:flex-end}#controls nav{gap:12px}.media-notice{top:13%;width:85vw}}
@media(prefers-reduced-motion:reduce){#last-frame{transition:none}}