/* Additions for the 3D page only; Codex's coop/web/style.css stays the base. */
#app{background:#141d33}
.screen{background:#0a12244d}
.menu-card{background:linear-gradient(150deg,#14263dd9,#0f1d31eb);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.coop3d-partner{position:absolute;left:0;top:0;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;display:grid;place-items:center;background:#13243ce8;border:2px solid var(--c);color:var(--c);pointer-events:none;z-index:1}
.coop3d-partner svg{width:15px;height:15px}
#coop3d-loading{position:fixed;left:0;right:0;top:0;height:3px;z-index:9;pointer-events:none;transition:opacity .4s}
#coop3d-loading i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff916c,#f0cfa0,#67d8df);transition:width .2s}
#coop3d-loading.done{opacity:0}
/* Local workaround, reported to Codex in #16: thirteen 46px stage buttons (746px) overflow the 380px menu card,
   which pushes the card off-centre on phones and hides levels 7-13. Wrap them into rows on this page only. */
.stage-select{flex-wrap:wrap;gap:8px;max-width:100%}
.stage-select button{width:40px;height:40px;border-radius:12px}
/* Camera note (mode and zoom) and a soft vignette over the 3D view; both ignore pointer input. */
.coop3d-vignette{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 75% 70% at 50% 48%,#0000 55%,#050b18a6 100%)}
.coop3d-note{position:absolute;top:calc(var(--top) + 116px);left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;background:#142942f0;border:1px solid #adccc233;padding:8px 14px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
@media(max-height:520px){.coop3d-note{top:calc(var(--top) + 56px)}}

/* Production integration: compact menus, explicit loading/recovery, safe-area aware. */
.stage-select{flex-wrap:nowrap;gap:7px}
.stage-select button{width:46px;height:46px;flex-shrink:0}
.element-crest{display:flex;align-items:center;justify-content:center;gap:22px;margin:0 0 14px;color:#f2d2a0}
.element-crest svg{width:44px;height:44px;fill:currentColor}
.element-crest svg:first-child{color:#ff916c}.element-crest svg:last-child{color:#67d8df}
#loading-screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 35%,#243b4d,#0d1729 70%);color:#edf1ed;text-align:center}
#loading-screen[hidden]{display:none}.load-card{width:min(100%,340px)}.load-mark{font-size:44px;color:#f0cfa0;margin-bottom:20px}.load-card h2{font-size:24px}.load-card p{font-size:14px;color:#aabac7;line-height:1.6}
#load-progress{width:100%;height:5px;accent-color:#67d8df;margin-top:20px}#load-recovery{margin-top:24px}#load-recovery a{display:block;text-decoration:none}#load-recovery .primary{width:100%}
@media(max-height:650px){.element-crest{margin-bottom:5px}.element-crest svg{width:30px;height:30px}.menu-card{padding-top:20px;padding-bottom:20px}}

#graphics-options{margin:16px 0;text-align:left}#graphics-quality{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #53617a;border-radius:10px;background:#17243b;color:#fff;font:inherit}#graphics-options .small{margin:8px 0}