.story-shot{height:250px;margin:-27px -27px 24px;background:linear-gradient(0deg,#09182b,transparent 65%),url('./assets/dialogue-scene.png') 63% 40%/cover;position:relative;overflow:hidden;border-radius:7px 7px 0 0;isolation:isolate}.story-shot:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#65d5ff12 45%,transparent 70%);animation:shot-breathe 8s ease-in-out infinite alternate}.shot-tag{position:absolute;top:20px;left:22px;font-size:14px;border-left:3px solid #ffcd7c;padding:6px 12px;background:#071524ad;letter-spacing:1px}.speaker-name{position:absolute;bottom:22px;left:24px;font-size:28px;font-weight:700;color:#fff;text-shadow:0 2px 15px #000}.speaker-name small{display:block;font-size:15px;font-weight:400;margin-top:5px;color:#c1dceb}.story-shot.incident{background-image:linear-gradient(0deg,#2b111a,transparent),url('./assets/nightwatch-keyart.png');background-position:60% 45%;border-top:3px solid #ee947a}.voice-replay{display:flex;align-items:center;gap:10px;font-size:16px;min-height:44px;padding:8px 12px;border-radius:24px;color:#a5e9ff;background:#5edfff12;border:1px solid #5edfff35;margin:0 0 18px}.voice-replay .icon{width:20px;height:20px}.voice-bars{display:flex;align-items:center;gap:3px;height:16px}.voice-bars b{width:3px;height:5px;background:#8ce9ff;border-radius:3px}body[data-voice="playing"] .voice-bars b{animation:voice-wave .5s ease-in-out infinite alternate}body[data-voice="playing"] .voice-bars b:nth-child(2){animation-delay:-.2s}body[data-voice="playing"] .voice-bars b:nth-child(3){animation-delay:-.35s}.event-card{box-shadow:0 10px 100px #30a9cf26;overflow:hidden}.feedback-card.good .feedback-symbol{background:radial-gradient(#8fffe640,#4ef8ca08);box-shadow:0 0 65px #4ef8ca55}.feedback-card.bad .feedback-symbol{color:#ffb09c;border-color:#ff9677}.feedback-card .voice-replay{margin:16px auto}.decision-impact{position:fixed;inset:0;z-index:60;pointer-events:none;animation:impact-fade .9s ease-out both;box-shadow:inset 0 0 150px #80ffdc66}.decision-impact.bad{box-shadow:inset 0 0 150px #ff5b3855}.decision-impact.warn{box-shadow:inset 0 0 150px #ffc05e55}.result-card .rank{animation:rank-reveal 1s cubic-bezier(.2,.8,.2,1) both}.cinema-layer{background-image:linear-gradient(90deg,#021221e6,#02122188),url('./assets/dialogue-scene.png');background-size:cover;background-position:65% center}.cinema-content{animation:scene-reveal 1s ease-out both}.cinema-grain{background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#6bd6ff05 4px);opacity:.5}
@keyframes voice-wave{to{height:16px}}@keyframes shot-breathe{to{transform:scale(1.08);opacity:.5}}@keyframes impact-fade{0%{opacity:0}20%{opacity:1}100%{opacity:0}}@keyframes rank-reveal{from{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scene-reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:700px){.header-actions>[data-action="sound"]{display:flex}.header-actions{gap:4px}.header-actions .icon-button{width:44px;height:44px}.phase-night #stage-overlay,.phase-emergency #stage-overlay{padding:78px 12px 30px}.phase-night #scene-top,.phase-emergency #scene-top{display:none}.event-card{padding:22px 18px;border-color:#71b9e64d;max-height:none;overflow:hidden}.story-shot{height:215px;margin:-22px -18px 20px;border-radius:12px 12px 0 0;background-position:62% 40%}.speaker-name{font-size:25px;left:20px;bottom:18px}.speaker-name small{font-size:14px}.shot-tag{font-size:14px;top:16px;left:18px}.event-card h2{font-size:24px;margin-bottom:12px}.dialogue>div:nth-child(2)>span{display:none}.dialogue p{font-size:19px}.voice-replay{font-size:16px;min-height:46px}.event-context{font-size:16px}.phase-night #footer,.phase-emergency #footer{display:none}.phase-night #stage-overlay:has(.feedback-card),.phase-emergency #stage-overlay:has(.feedback-card){padding-top:126px}.feedback-card{width:100%}.result-card .result-score small{font-size:16px}.lobby-copy .lobby-subtitle{max-width:300px}}
@media(prefers-reduced-motion:reduce){.story-shot:before,.voice-bars b,.cinema-content,.rank,.decision-impact{animation:none!important}.decision-impact{display:none}}.reduced-motion .decision-impact{display:none}.reduced-motion .story-shot:before,.reduced-motion .voice-bars b,.reduced-motion .rank,.reduced-motion .cinema-content{animation:none!important}
.spoken-reply{text-align:left;background:#70c8f30b;border-left:3px solid #75d8e9;padding:16px 18px;margin:20px 0}.spoken-reply>span{font-size:15px;color:#f2c77b}.spoken-reply p{font-size:18px;line-height:1.8;color:#e2f0fa;margin:8px 0 0}.story-shot.handover{background-image:linear-gradient(0deg,#09182b,transparent 65%),url('./assets/nightwatch-keyart.png');background-position:75% 30%}
.chapter-entering{visibility:hidden!important}.cinema-layer.chapter-title{background:#050e1d;display:grid;place-items:center}.chapter-title:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#2d63764d,transparent 65%)}.chapter-title .cinema-content h2{font-size:clamp(56px,9vw,112px);letter-spacing:14px;color:#f1d3a0;margin:24px 0}.chapter-title .cinema-content p{font-size:28px;letter-spacing:8px}.chapter-title .cinema-content>span{font-size:17px;letter-spacing:2px;color:#b4c8de}.opening-cry{background:#03070c!important}.opening-cry .cinema-content{display:none}.incident-memory{background-image:linear-gradient(#170c11c9,#050811df),url('./assets/dialogue-scene.png');filter:saturate(.5)}.personal-mode #left-panel,.personal-mode #scene-top,.personal-mode #scene-controls,.personal-mode #scene-bottom,.personal-mode .hotspot,.personal-mode .player-nameplate{display:none!important}.personal-mode #scene{opacity:.35;filter:blur(4px)}.personal-task{pointer-events:auto;max-width:680px;width:100%;margin:auto;border:1px solid #83c9ee66;border-radius:16px;background:#10233bf5;padding:28px}.role-task-heading{display:flex;align-items:center;gap:18px}.role-task-heading span{font-size:16px;color:#f1c882}.role-task-heading h2{font-size:26px;line-height:1.4;margin:8px 0}.personal-task>p{font-size:19px;line-height:1.8;margin:24px 0}.personal-task .option{text-align:left;width:100%}.personal-task .option b{font-size:18px;line-height:1.7}.personal-task .personal-note{font-size:15px;color:#9cb9d2}.plan-card.chosen:disabled{opacity:1}.role-card.selected .role-route-preview{display:block;font-size:15px;color:#c7d8e9;line-height:1.6;margin:10px 0 0}.role-task-heading .portrait{flex-shrink:0;width:58px;height:65px}@media(max-width:700px){.personal-mode #stage-overlay{padding:85px 14px 24px}.personal-task{padding:22px 18px;margin:0}.role-task-heading{gap:12px}.role-task-heading h2{font-size:23px}.role-task-heading span{font-size:15px}.personal-task .option{padding:15px 12px}.chapter-title .cinema-content h2{font-size:62px;letter-spacing:8px}.chapter-title .cinema-content p{font-size:25px;letter-spacing:5px}.chapter-title .cinema-content>span{font-size:17px;line-height:1.7}.cinema-skip{min-width:150px;background:#f2c580;color:#102036;border:0;border-radius:8px;justify-content:center}}
/* One coherent character art system for selection, missions, and team cards. */
.portrait{background-image:url('./assets/role-atlas.png');background-size:300% 200%;background-position:var(--portrait-x) var(--portrait-y);border-color:var(--role-color);overflow:hidden}.portrait svg{visibility:hidden}.role-select-screen{position:fixed;inset:0;z-index:40;overflow:auto;background:radial-gradient(ellipse at 25% 45%,#254d665c,transparent 60%),#07101d;color:#eef5ff;padding:32px max(28px,5vw);animation:drawer-in .25s ease}.role-select-screen:before{content:'';position:fixed;inset:0;background:url('./assets/nightwatch-keyart.png') center/cover;opacity:.09;pointer-events:none}.role-select-header{position:relative;display:flex;align-items:flex-start;justify-content:space-between;max-width:1100px;margin:auto}.role-select-header>div>span{color:#e9c58b;font-size:16px;letter-spacing:2px}.role-select-header h2{font-size:25px;line-height:1.4;margin:10px 0}.role-select-header .icon-button{width:48px;height:48px}.role-select-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;max-width:1100px;margin:25px auto 0;position:relative}.role-hero{position:relative;min-height:510px;overflow:hidden;border-radius:16px;border:1px solid #8caec530;box-shadow:0 20px 80px #0006}.role-hero .portrait.hero{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background-size:300% 200%;mask-image:linear-gradient(#000 70%,transparent)}.role-hero-caption{position:absolute;bottom:24px;left:28px;right:24px;text-shadow:0 2px 15px #000}.role-hero-caption>span{font-size:18px;color:#f1ce92;letter-spacing:2px}.role-hero-caption h3{font-size:42px;letter-spacing:5px;margin:9px 0}.role-hero-caption p{font-size:17px;color:#d1dfed;line-height:1.7}.route-brief>span{font-size:14px;color:#e9c58b;letter-spacing:2px}.route-brief h3{font-size:25px;line-height:1.5;margin:10px 0}.route-brief p{font-size:16px;line-height:1.7;color:#a9bed2}.role-roster{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.roster-card{border:1px solid #91b3d43d;background:#12283ad9;border-radius:9px;padding:10px 5px;display:flex;align-items:center;flex-direction:column;gap:8px;color:#b9cee1;min-height:100px}.roster-card .portrait{height:59px;width:59px;border-radius:7px}.roster-card>span{font-size:16px}.roster-card.selected{border-color:#f5cc8b;color:#ffe0a5;background:#715b3133;box-shadow:0 0 24px #e9be6e18}.role-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.role-modes button{min-height:48px;padding:10px;font-size:16px;border:1px solid #86bed838;border-radius:8px;color:#aac5da;background:#0b1d30}.role-modes button.selected{color:#afe9f6;border-color:#7ecde1;background:#497e8c22}.role-start{width:100%;font-size:19px;min-height:58px;margin-top:16px;justify-content:center}.save-replace-note{font-size:14px;line-height:1.6;color:#9eb4ca;margin:13px 0 0}.plan-card .portrait{width:70px;height:75px}.plan-card.chosen{border-color:#e9c282;background:linear-gradient(120deg,#40362bea,#162d42ed)}
@media(max-width:700px){.role-select-screen{padding:18px 18px calc(22px + env(safe-area-inset-bottom));}.role-select-header>div>span{font-size:18px}.role-select-header h2{font-size:15px;color:#a8bdcf;margin:7px 0}.role-select-layout{display:flex;flex-direction:column;gap:16px;margin-top:12px}.role-hero{min-height:270px;height:270px;flex-shrink:0}.role-hero .portrait.hero{background-size:300% 200%}.role-hero-caption{bottom:15px;left:20px}.role-hero-caption>span{font-size:16px}.role-hero-caption h3{font-size:32px;margin:6px 0}.role-hero-caption p{display:none}.route-brief>span{font-size:14px}.route-brief h3{font-size:21px;margin:5px 0}.route-brief p{display:none}.role-roster{gap:8px;margin:14px 0}.roster-card{min-height:76px;padding:8px 4px;gap:6px;flex-direction:row;justify-content:center;flex-wrap:wrap}.roster-card .portrait{width:30px;height:34px}.roster-card>span{font-size:15px;flex-basis:100%;line-height:1.4}.role-modes button{font-size:15px;min-height:48px;padding:9px 5px}.role-start{font-size:18px;min-height:58px;margin-top:14px}.save-replace-note{font-size:14px}.plan-card .portrait{width:58px;height:64px;flex-shrink:0}.role-task-heading .portrait{width:70px;height:75px}}