#viewport{background:#070d12 url('../assets/graves-reference.webp') center/cover}
.ch2-welcome h1 span{color:#c7392a;text-shadow:0 0 40px #7a120a88}
.ch2-status{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:12px;color:#d3c9ad;flex-wrap:wrap}
.ch2-status b{color:#f2e6c8;font-weight:600}
.slots{display:flex;gap:3px}.slots i{width:5px;height:18px;border-radius:1px;background:#3a2622;border:1px solid #6a3a30}.slots i.on{background:#c42a1c;border-color:#ff7a5a;box-shadow:0 0 8px #ff3a1a88}
.heart{color:#b23a2c;font-size:16px;transition:transform .08s;display:inline-block;transform:scale(calc(1 + var(--hb,0)*.2))}.heart.beat{transform:scale(calc(1.35 + var(--hb,0)*.4));color:#ff5a3a}
.stamina{width:70px;height:4px;background:#ffffff1c;border-radius:2px;overflow:hidden}.stamina i{display:block;height:100%;background:#cdb57c;width:100%}
.badge{font-size:11px;padding:3px 8px;border-radius:2px;background:#163029;border:1px solid #6b9b80;color:#cfe8d6}.badge.calm{background:#1d2a33;border-color:#6d8da5;color:#d3e4ef}.badge.red{background:#3a1410;border-color:#b0402c;color:#ffd2c4}
.ch2-captions{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);width:min(860px,92vw);text-align:center;z-index:30;pointer-events:none}
.ch2-line{display:inline-block;margin:0;padding:10px 18px;background:#060c0dcc;border-radius:3px;font-size:19px;line-height:1.7;color:#f4ead2;text-shadow:0 1px 3px #000}
.ch2-line.note{font-style:italic;color:#c5d0c6;font-size:16px}.ch2-line b{margin-right:6px}
.ch2-prompt{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);padding:8px 16px;background:#d1b77de6;color:#172922;border-radius:3px;font-weight:700;font-size:14px;z-index:31;pointer-events:none;max-width:90vw;text-align:center}
#experience.ch2-hidden .vignette{background:radial-gradient(ellipse,transparent 25%,#020403e8 90%);transition:background .5s}
.touch-only{display:none}
@media(pointer:coarse){.touch-only{display:inline-block}#hud .tools{flex-wrap:wrap;justify-content:flex-end;gap:6px}#hud .tools button{padding:10px 12px;font-size:13px}.ch2-captions{bottom:190px}.ch2-prompt{bottom:150px}}
@media(max-width:650px){.ch2-line{font-size:15px}.ch2-status{font-size:10px;gap:8px}}
#hud .notice{bottom:auto;top:24%}
@media(max-height:500px){#hud .notice{top:40%}.ch2-captions{bottom:64px}.ch2-prompt{bottom:24px}}

/* Mission sign (top-left, under the status) */
.objective{margin-top:12px;max-width:min(420px,78vw);padding:10px 14px 10px 12px;background:#070d0fd9;border:1px solid #c9a75e88;border-left:4px solid #e0b55e;border-radius:3px;color:#f2e8cf;pointer-events:none;box-shadow:0 4px 18px #0008}
.objective.urgent{border-color:#e0553c99;border-left-color:#ff6a48;animation:obj-pulse 1s ease-in-out infinite}
.objective p{margin:0}.obj-head{display:flex;align-items:center;gap:8px;font-size:13px;color:#f0cf7e;letter-spacing:.02em}
.objective.urgent .obj-head{color:#ff9a7a}
.obj-arrow{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e0b55e;color:#1a1206;font-weight:900;font-size:15px;transition:transform .2s linear}
.obj-dist{margin-left:auto;color:#d9ccaa;font-size:12px;font-variant-numeric:tabular-nums}
.obj-text{margin-top:6px!important;font-size:15px;line-height:1.55}
.obj-extra{margin-top:6px!important;font-size:12px;color:#a9c4b5}
@keyframes obj-pulse{50%{box-shadow:0 0 22px #ff4a2a66}}
@media(max-width:650px){.objective{max-width:62vw;padding:8px 10px}.obj-text{font-size:13px}.obj-extra{display:none}}

/* Film grain on desktop/phone screens only (VR renders straight to the headset). */
#experience.ch2-grain::after{content:'';position:fixed;inset:-50%;pointer-events:none;z-index:5;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:ch2-grain .9s steps(6) infinite}
@keyframes ch2-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,2%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){#experience.ch2-grain::after{animation:none}}