/* Shared in-call popup primitives: shell, resource card, action, and code. */
#contentPanelBackdrop,#changelogModal{--panel-fill:#f6f5f0;--panel-line:#d8d8d3;--panel-text:#2f2f2f;--panel-muted:#686863;--panel-card:#eeede7;--panel-hover:#e7e6df;--panel-inset:22px;--panel-top:18px;--panel-bottom:24px}
#contentPanelBackdrop{padding:24px}
body.dark-mode :is(#contentPanelBackdrop,#changelogModal){--panel-fill:#0e1116;--panel-line:#27292e;--panel-text:#e6e5de;--panel-muted:#a2a7ad;--panel-card:#171c22;--panel-hover:#202730}
#contentPanelBackdrop .content-panel{background:var(--panel-fill);color:var(--panel-text);border-color:var(--panel-line);max-width:580px;max-height:min(78dvh,680px);box-shadow:0 24px 80px #0004;transition:transform 240ms cubic-bezier(.22,1,.36,1)}
#contentPanelBackdrop .content-panel-header{padding:18px 22px;border-color:var(--panel-line)}
#contentPanelBackdrop .content-panel-title{color:var(--panel-muted);font-size:11px;font-weight:400;letter-spacing:.09em}
#contentPanelBackdrop .content-panel-body{padding:20px 22px 24px;overscroll-behavior:contain;scrollbar-width:thin}
#contentPanelBackdrop .content-panel-close{background:var(--panel-card);color:var(--panel-muted);opacity:1;flex-shrink:0}
#contentPanelBackdrop .content-panel-close:hover{background:var(--panel-hover);color:var(--panel-text)}
#contentPanelBackdrop .cp-article{background:var(--panel-card);border-color:var(--panel-line);padding:18px;border-radius:12px;text-align:left}
#contentPanelBackdrop .cp-article+.cp-article{margin-top:12px}
#contentPanelBackdrop a.cp-article:hover{background:var(--panel-hover)}
#contentPanelBackdrop .cp-article h3,#contentPanelBackdrop .cp-article-title{font:500 15px/1.4 'Geist Mono',monospace;margin:0 0 8px}
#contentPanelBackdrop .cp-article-desc{color:var(--panel-muted);font-size:12px;line-height:1.7}
#contentPanelBackdrop .cp-article-date{color:var(--panel-muted)}
#contentPanelBackdrop .cp-resource-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px}
#contentPanelBackdrop .cp-primary-action{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:0;border-radius:999px;background:var(--panel-text);color:var(--panel-fill);font:500 12px/1.3 'Geist Mono',monospace;text-decoration:none;cursor:pointer;transition:opacity .18s}
#contentPanelBackdrop .cp-primary-action:hover{opacity:.8}
#contentPanelBackdrop :is(a,button):focus-visible{outline:2px solid #427cde;outline-offset:3px}
#contentPanelBackdrop pre{padding:16px;border:1px solid var(--panel-line);border-radius:12px;background:var(--panel-card);line-height:1.65}
#contentPanelBackdrop .cp-fallback-wrap{padding:8px 0}
#contentPanelBackdrop .cp-fallback-btn{box-shadow:none;font-size:12px}
@media(max-width:600px){#contentPanelBackdrop{padding:16px}#contentPanelBackdrop .content-panel{max-height:calc(100dvh - 32px)}#contentPanelBackdrop .content-panel-header{padding:14px 16px}#contentPanelBackdrop .content-panel-body{padding:16px}#contentPanelBackdrop .content-panel-openfull{font-size:10px}#contentPanelBackdrop .cp-article{padding:15px}}
@media(prefers-reduced-motion:reduce){#contentPanelBackdrop .content-panel{transition:none}}

/* Cards provide separation; keep the header and content closer together. */
#contentPanelBackdrop .content-panel-header{border-bottom:0;padding-bottom:10px}
#contentPanelBackdrop .content-panel-body{padding-top:8px}
#contentPanelBackdrop .content-panel-openfull{background:#000;color:#fff;border:0;border-radius:999px;padding:9px 14px;font-weight:500}
#contentPanelBackdrop .content-panel-openfull:hover{background:#2a2a2a;color:#fff}
body.dark-mode #contentPanelBackdrop .content-panel-openfull{background:#fff;color:#000}
body.dark-mode #contentPanelBackdrop .content-panel-openfull:hover{background:#e6e5de;color:#000}
#contentPanelBackdrop .cp-game-banner{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin:0 0 20px;background:var(--panel-card)}

/* One scroll surface for header and content, matching RyLog. */
#contentPanelBackdrop .content-panel{display:block;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ccc transparent}
#contentPanelBackdrop .content-panel-body{overflow:visible;scroll-behavior:auto}
#contentPanelBackdrop .content-panel::-webkit-scrollbar{width:6px}
#contentPanelBackdrop .content-panel::-webkit-scrollbar-track{background:transparent;margin:12px 0}
#contentPanelBackdrop .content-panel::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}
body.dark-mode #contentPanelBackdrop .content-panel{scrollbar-color:#444 transparent}
body.dark-mode #contentPanelBackdrop .content-panel::-webkit-scrollbar-thumb{background:#444}

#contentPanelBackdrop .cp-copy-code{gap:6px}
#contentPanelBackdrop .cp-copy-code .material-symbols-outlined{font-size:16px;line-height:1}
#contentPanelBackdrop .cp-copy-code+pre{margin-top:16px}

/* Match RyLog visually without its modal-open voice-session side effects. */
#contentPanelBackdrop{background:rgba(0,0,0,.7)}
body:has(#contentPanelBackdrop.active) :is(.container,.controls-group,.stars,.leaves,.snow){filter:blur(5px);opacity:.5}
body:has(#contentPanelBackdrop.active) .top-nav{filter:blur(5px)}
body:has(#contentPanelBackdrop.active) :is(#handDebug,#handDebug *,#handControlHelper,#tiltDebug,#tiltDebug *){filter:none!important}
@media(max-width:768px){body:has(#contentPanelBackdrop.active) .controls-group :is(.changelog-button,.theme-toggle){filter:blur(5px);opacity:.5}}

#contentPanelBackdrop .cp-copy-code{border:1px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
#contentPanelBackdrop .cp-copy-code.is-copied{background:transparent;color:var(--panel-text);border-color:var(--panel-line)}
@media(prefers-reduced-motion:reduce){#contentPanelBackdrop .cp-copy-code{transition:none}}
#contentPanelBackdrop propagate-preview.cp-game-banner{position:relative;overflow:hidden}
propagate-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 600ms ease;pointer-events:none}
@media(prefers-reduced-motion:reduce){propagate-preview video{transition:none}}

/* Match the muted supporting hint beneath the 3D objects. */
#contentPanelBackdrop .content-panel-body .cp-fallback-note{margin-top:14px;font-family:'Geist Mono',monospace;font-size:10px;color:inherit;opacity:.38;text-align:center}

/* Shared modal surface and compact header; the scrollbar uses the existing inset. */
#changelogModal .changelog-content{background:var(--panel-fill);color:var(--panel-text);border-color:var(--panel-line);padding:var(--panel-top) calc(var(--panel-inset) - var(--modal-scrollbar-width,0px)) var(--panel-bottom) var(--panel-inset);scrollbar-gutter:auto}
#changelogModal .bento-card{background:var(--panel-card)}
#changelogModal ry-atlas-card:not(:fullscreen):not([expanded]),#changelogModal ry-atlas-card:not(:fullscreen):not([expanded]) .ry-atlas-stage{background:var(--panel-card)}
#changelogModal .changelog-header{margin-bottom:18px;gap:12px}
#changelogModal .changelog-title,#contentPanelBackdrop .content-panel-title{font-family:'Geist Mono',monospace;font-size:11px;font-weight:400;line-height:1.6;letter-spacing:.09em;text-transform:uppercase;color:var(--panel-muted)}
#changelogModal #changelogClose{background:var(--panel-card);color:var(--panel-muted)}
#changelogModal #changelogClose:hover{background:var(--panel-hover);color:var(--panel-text)}
#contentPanelBackdrop .content-panel{scrollbar-gutter:auto}
#contentPanelBackdrop :is(.content-panel-header,.content-panel-body){padding-left:var(--panel-inset);padding-right:calc(var(--panel-inset) - var(--modal-scrollbar-width,0px))}
@media(max-width:600px){#contentPanelBackdrop,#changelogModal{--panel-inset:16px;--panel-top:14px;--panel-bottom:16px}}