/* Uniform camera; DOM actions stay outside cosmetic FX. */
[hidden]{display:none!important}
#study{min-height:100svh;display:flex;flex-direction:column;gap:8px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
header{margin:0}h1{font-size:30px}.eyebrow{font-size:13px}.hud{padding-block:8px}
.sea{flex:1;width:100%;height:clamp(250px,calc(100svh - 350px),600px);min-height:220px;aspect-ratio:auto;border-radius:0 0 24px 24px;isolation:isolate}
#canvas-mount{position:absolute;inset:0}.light-rays{position:absolute;inset:0;background:linear-gradient(106deg,transparent 15%,#aaffdc14 17%,transparent 30%,transparent 54%,#6dece818 57%,transparent 64%);pointer-events:none}.reef-front{position:absolute;inset:auto 0 0;height:70px;background:url('./assets/reef-front.svg') center bottom/100% 100% no-repeat;pointer-events:none}
.intro-card{position:absolute;inset:50% 20px auto;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;background:#063d58ed;border:1px solid #88efda66;border-radius:26px;color:#f4fffa;box-shadow:0 8px 32px #001c3b66;text-align:center}.intro-card p{margin:0;max-width:24ch}.intro-card button{width:min(100%,240px)}
.status{min-height:0;margin:0;font-size:14px}.status:empty{display:none}
.actions{order:5}.actions #cancel{grid-column:1/-1}.result{position:static;inset:auto;order:4;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 4px 18px #001f3d44}.result h2{font-size:21px}.result p{font-size:14px}.result-actions{display:flex;gap:8px;flex-wrap:wrap;flex:none}.result-actions button{font-size:14px;flex:auto}.result-actions .primary{min-width:88px}
.aim-panel{order:6}.settings{order:7}.warning{order:8}.aim-panel,.settings{display:block;margin:0;border:1px solid #90c2d040;border-radius:14px;background:#0b3651}summary{cursor:pointer;min-height:44px;padding:8px 12px;font-size:14px;user-select:none}summary:focus-visible{outline:3px solid #fff2a2;outline-offset:3px}.setting-options{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px}.settings label{min-height:44px}#angle{width:calc(100% - 24px);margin-inline:12px}
.celebrating{box-shadow:0 0 24px #45d5c233}#boot-error{padding:16px;background:#103d56;border-radius:16px}
@media(max-width:360px){#study{padding-inline:10px;gap:6px}.result{align-items:stretch;flex-direction:column}.result-actions button{flex:1}.intro-card img{width:100px;height:100px}.intro-card{inset-inline:12px}.actions{grid-template-columns:1fr 1.3fr 1fr}.actions #cancel{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.celebrating{box-shadow:none}}