#campaignBriefing { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; background:#060c14; }
.comic-scene { position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; }
#comicBackdrop { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; z-index:-2; }
.comic-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(#0006,transparent 18% 78%,#0009); z-index:-1; pointer-events:none; }
.comic-heading { position:absolute; left:24px; top:20px; text-align:left; max-width:65%; }.comic-heading>span { font:900 12px var(--display); color:#ffdc38; letter-spacing:.18em; }#campaignBriefing .comic-heading h2 { color:white; font:900 clamp(17px,2.3vw,34px) var(--display); margin:6px 0; text-shadow:2px 3px #000; }
#comicSkip { position:absolute; right:22px; top:20px; color:white; background:#07131baa; border:1px solid #ffffff55; padding:10px 14px; cursor:pointer; }
.comic-bubble { position:absolute; top:12%; left:48%; width:25%; padding:24px; color:#141414; background:#f8f2df url('assets/card-wear.svg') center/cover; border:4px solid #111; border-radius:35% 30% 28% 24% / 20% 22% 24% 25%; box-shadow:5px 6px #0005; transform:rotate(2deg); }
.comic-bubble::after { content:''; position:absolute; right:2%; bottom:-25px; width:45px; height:30px; background:#f8f2df; clip-path:polygon(0 0,100% 100%,45% 0); }
.comic-bubble[data-speaker="hero"] { left:28%; top:18%; transform:rotate(-2deg); }.comic-bubble[data-speaker="hero"]::after { right:auto; left:-12%; transform:scaleX(-1); }
#comicSpeaker { display:block; font:900 10px var(--display); letter-spacing:.08em; opacity:.65; }#campaignBriefing #briefingSpeech { margin:8px 0; font:900 clamp(16px,2vw,28px)/1.2 var(--display); text-transform:uppercase; }
.comic-name { position:absolute; bottom:18%; padding:10px 22px; font:900 clamp(18px,2.2vw,32px) var(--display); background:#b7f20c url('assets/card-wear.svg') center/cover; color:#101010; transform:rotate(-5deg); }.comic-name-left { left:5%; }.comic-name-right { right:5%; background-color:#ffdc38; }
.comic-footer { position:absolute; bottom:22px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }#comicPage { color:#ffdc38; font:900 20px var(--display); white-space:nowrap; }#campaignBriefing #briefingObjective { background:#07121bcc; padding:10px; margin:0; max-width:40%; font-size:11px; }#briefingStart { border:2px solid #1c2011; background:#ffdc38 url('assets/card-wear.svg') center/cover; color:#13170f; padding:15px 24px; font:900 clamp(18px,2.2vw,30px) var(--display); cursor:pointer; }
#campaignBriefing button:focus-visible { outline:3px solid white; outline-offset:3px; }
@media(max-aspect-ratio:1/1) { #comicBackdrop { object-fit:contain; background:#07101a; }.comic-bubble,.comic-bubble[data-speaker="hero"] { top:18%; left:12%; width:76%; padding:18px; }.comic-name { bottom:25%; font-size:16px; padding:8px; }.comic-footer { flex-wrap:wrap; bottom:16px; gap:8px; }#campaignBriefing #briefingObjective { max-width:100%; order:3; width:100%; }.comic-heading { max-width:68%; } }