:root{--night:#060817;--navy:#0b1530;--panel:#111d39;--line:#31466d;--paper:#f2ead7;--ink:#eef1f4;--muted:#aebbd0;--cyan:#5de1e6;--gold:#e5b95d;--red:#f25d73;--green:#52d27b;--violet:#9a75ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% 0,#172749 0,var(--night) 52%);color:var(--ink);font-family:system-ui,-apple-system,sans-serif;min-height:100vh}button{font:inherit;color:var(--ink);background:#111e39;border:1px solid #42577b;border-radius:8px;padding:11px 15px;cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--gold);background:#1a2c4e}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}header{max-width:1380px;margin:auto;padding:16px 26px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #27395f;background:#060817cc;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{border:0;background:none;padding:0;text-align:left;color:var(--gold);font:bold 25px Georgia;letter-spacing:4px}.brand:hover{background:none}.brand small{display:block;margin-top:3px;color:var(--cyan);font:9px ui-monospace;letter-spacing:3px}.top-actions{display:flex;gap:8px}.top-actions button{font-size:12px}main{max-width:1320px;margin:auto;padding:42px 26px}.eyebrow{font:11px/1.6 ui-monospace,monospace;letter-spacing:2px;color:var(--cyan)}.primary{background:var(--gold);border-color:var(--gold);color:#10202e;font-weight:850}.primary:hover{background:#ffe09a}.big{padding:16px 24px;font-size:17px}.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:650px;align-items:center;gap:26px}.hero-copy{max-width:710px}.hero h1{font:clamp(52px,6.5vw,92px)/.92 Georgia;margin:18px 0;letter-spacing:-3px}.hero h1 em{color:var(--red);font-weight:normal}.hero p{font-size:20px;line-height:1.55;color:var(--muted);max-width:650px}.hero-figures{height:560px;position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#2b345c,#080b19 65%);box-shadow:0 30px 100px #000a}.hero-figures:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,#fff 5px 6px);opacity:.035;pointer-events:none}.figure-card{position:absolute;overflow:hidden;border:2px solid #ffffff24;box-shadow:0 20px 60px #000b}.figure-card img{width:100%;height:100%;object-fit:cover}.sophia-card{left:4%;top:5%;width:53%;height:90%;border-radius:40% 20% 12% 12%}.sophia-card img{object-position:11% 50%}.dio-card{right:4%;bottom:5%;width:45%;height:52%;border-radius:40% 40% 12% 12%}.dio-card img{object-position:84% 50%}.neon-word{position:absolute;right:5%;top:8%;text-align:right;color:var(--cyan);font:800 20px/1.15 ui-monospace;letter-spacing:4px;text-shadow:0 0 18px var(--cyan);z-index:2}.chapter-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}.chapter{text-align:left;min-height:155px;padding:18px;border-color:#30476c;background:linear-gradient(145deg,#111d39,#081124)}.chapter b{display:block;font:40px Georgia;color:var(--gold)}.chapter span{display:block;margin:6px 0;font:800 13px/1.3 ui-monospace;letter-spacing:1px}.chapter small{color:var(--muted);line-height:1.4}.story-stage{display:grid;grid-template-columns:1.1fr .9fr;min-height:700px;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#081022;box-shadow:0 24px 90px #000b}.story-visual{position:relative;min-height:700px;background-size:cover;background-position:center;overflow:hidden}.story-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,#081022),repeating-linear-gradient(0deg,transparent 0 5px,#fff 6px);opacity:.26}.story-visual.post-scene{background:linear-gradient(#17213c,#080b18)}.story-visual.post-scene:before{content:"NATIONALE GEDANKENWEHR\A ✓ OFFIZIELL\A\A ⚠ DIO VERGIFTET DEN NORDBRUNNEN\A\A ▶ 00:06  ·  84.207 Aufrufe";white-space:pre;position:absolute;inset:15% 9%;padding:35px;background:#f0eee6;color:#121826;border:8px solid #b92f40;border-radius:14px;font:800 24px/1.55 ui-monospace;box-shadow:0 0 80px #f25d7366}.story-visual.chase-scene{background-image:linear-gradient(0deg,#06081766,#06081744),url('dio.jpeg');background-position:20% center}.story-visual.forest-scene{background:radial-gradient(circle at 55% 30%,#d7d16a 0 5%,#244b43 6% 24%,#0b1821 55%)}.story-copy{padding:50px 40px;display:flex;flex-direction:column;justify-content:center}.story-copy h2{font:clamp(35px,4vw,58px)/1 Georgia;margin:10px 0 22px}.story-copy p{font-size:17px;line-height:1.68;color:#c9d3df}.dialogue{margin:18px 0;padding:16px 19px;border-left:4px solid var(--gold);background:#13223e;color:#fff;font:19px/1.5 Georgia}.story-actions{margin-top:24px;display:flex;gap:10px;align-items:center}.story-actions span{color:var(--muted);font:12px monospace}.story-actions .primary{margin-left:auto}.mission-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.mission-head h2{font:clamp(34px,5vw,60px) Georgia;margin:5px 0}.mission-head p{max-width:820px;color:var(--muted);line-height:1.55}.hud{display:flex;justify-content:space-between;align-items:center;margin:16px 0;padding:12px 16px;background:#0f1930;border:1px solid var(--line);border-radius:9px}.hud span,.dio-coach span{display:block;color:var(--cyan);font:9px ui-monospace;letter-spacing:1.7px}.hud strong{font-size:15px}.progress{display:flex;gap:7px}.progress i{width:45px;height:8px;background:#263858;border-radius:8px}.progress i.on{background:var(--gold);box-shadow:0 0 12px #e5b95d}.dio-coach{display:grid;grid-template-columns:58px 1fr auto;gap:13px;align-items:center;margin:14px 0;padding:10px 14px;border:1px solid #36b664;border-left:6px solid #36b664;border-radius:10px;background:#0d2330}.dio-portrait{width:54px;height:54px;overflow:hidden;border-radius:50%;border:2px solid var(--green);background:#111}.dio-portrait img{width:210%;height:150%;object-fit:cover;object-position:91% 35%;transform:translate(-49%,-7%)}.dio-coach strong{display:block;margin-top:2px;color:#9ff3b8}.dio-coach p{margin:3px 0 0;color:#d4e0e5;font-size:13px;line-height:1.4}.dio-coach button{font-size:12px;white-space:nowrap}.stage{position:relative;overflow:hidden;border:1px solid #465a7d;border-radius:11px;background:#060817;box-shadow:0 20px 80px #000b}.stage canvas{display:block;width:100%;height:auto;aspect-ratio:1200/675;image-rendering:pixelated;touch-action:none}.toast{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:4;max-width:88%;padding:12px 17px;background:#060817ef;border:1px solid var(--gold);color:#fff4cb;font:13px/1.4 ui-monospace;text-align:center;box-shadow:0 8px 40px #000}.curtain{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:#03050ddd}.curtain>div{width:min(680px,96%);max-height:92%;overflow:auto;padding:30px;background:var(--paper);color:#17233a;border:2px solid var(--gold);border-radius:12px}.curtain h3{font:36px/1.05 Georgia;margin:9px 0}.curtain p{font-size:16px;line-height:1.6}.curtain .quote{padding:12px 15px;background:#dcd2ba;border-left:4px solid #ad742c}.curtain button{width:100%;margin-top:12px}.controls{display:flex;justify-content:center;gap:8px;align-items:center;margin:16px 0;flex-wrap:wrap}.controls button{min-height:58px;min-width:80px;font-weight:800;user-select:none;-webkit-user-select:none}.controls .move{font-size:25px}.controls .jump{min-width:135px}.controls .action{min-width:170px}.controls button.pressed{background:var(--cyan);color:var(--night)}.control-tip{text-align:center;color:var(--muted);font-size:12px}.teachers{margin-top:48px;border-top:1px solid var(--line);padding-top:20px;color:#9eafc2;font-size:13px;line-height:1.7}.teachers summary{cursor:pointer;color:var(--cyan)}footer{max-width:1320px;margin:auto;padding:25px 26px 45px;display:flex;gap:18px;flex-wrap:wrap;color:#8292a8;font-size:11px}footer a{color:var(--cyan)}.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#01030be8}.overlay>div{width:min(650px,96%);padding:28px;border:1px solid var(--line);border-radius:10px;background:#11203a}.overlay>div>button{float:right}.overlay p{line-height:1.65;color:#c5d0dd}
@media(max-width:900px){main{padding:24px 12px}.hero{grid-template-columns:1fr;min-height:auto}.hero h1{font-size:58px}.hero-figures{height:440px}.chapter-row{grid-template-columns:1fr 1fr}.story-stage{grid-template-columns:1fr}.story-visual{min-height:420px}.story-copy{padding:28px 20px}.mission-head{display:block}.dio-coach{grid-template-columns:48px 1fr}.dio-coach button{grid-column:1/-1}.stage canvas{min-height:430px;object-fit:cover}.top-actions button{padding:8px;font-size:10px}.brand{font-size:18px}.curtain>div{padding:20px}.curtain h3{font-size:28px}}
@media(max-width:560px){.hero h1{font-size:44px}.hero p{font-size:17px}.hero-figures{height:350px}.chapter-row{grid-template-columns:1fr}.story-visual{min-height:300px}.story-visual.post-scene:before{font-size:15px;padding:20px}.controls button{min-width:62px}.controls .jump{min-width:105px}.controls .action{min-width:130px}.hud{align-items:flex-start;gap:10px}.progress i{width:26px}}

.sentence-card{padding:15px 20px;margin:12px 0;border:2px solid #e5b95d;border-radius:9px;background:#f2ead7;color:#111d39}.sentence-card span{display:block;font:11px ui-monospace;letter-spacing:1px}.sentence-card strong{display:block;margin-top:6px;font-size:clamp(17px,2vw,22px);line-height:1.4}.victory{padding:17px;background:#163d2d;color:#f9e7ad;border:2px solid #d8b65b;text-align:center;letter-spacing:1px}.victory strong{display:block;margin:5px;font-size:20px}.protest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:15px}.protest span{display:inline-block;padding:9px;background:#fff;border:2px solid #17233a;transform:rotate(-3deg);font-weight:900}.protest span:nth-child(2){transform:rotate(3deg)}
.dio-coach p{font-size:16px;line-height:1.5}.dio-coach strong{font-size:19px}.dio-coach span{font-size:11px}

.cover-art{width:100%;height:100%;object-fit:cover;object-position:center}.hero h1{overflow-wrap:anywhere;font-size:clamp(42px,5.2vw,76px)}
/* Show the complete illustrated cover and keep the story accessible below the header. */
.hero-figures{height:auto;aspect-ratio:2/3;max-height:none}.cover-art{object-fit:contain;display:block}.story-visual.chase-scene{background-image:linear-gradient(0deg,#06081744,#06081722),url('dio-action.png');background-color:#0b1530;background-size:contain;background-repeat:no-repeat;background-position:center}header{position:relative}

.story-visual.chase-scene{background-image:url('dach-rettung.png');background-size:cover;background-position:center}

.story-visual.cover-scene{background-image:url('cover-sophia.png');background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#070c1c}.story-visual.cover-scene:after{background:linear-gradient(90deg,transparent 75%,#081022);opacity:.3}

.controls button{touch-action:none;-webkit-touch-callout:none}.discover{margin:20px 0;padding:18px;border:1px solid #3d5479;border-radius:12px;background:#101d34}.discover>span{display:block;color:#b6c9db;font-size:13px;margin:6px 0 12px}.discover button{margin:4px 7px 4px 0;border-color:#62cdd3}.learn-dialog{background:#101d34;border:1px solid #62cdd3;border-radius:14px;padding:28px;width:min(640px,96%);max-height:88vh;overflow:auto}.learn-dialog h2{color:#f2c66c}.learn-dialog h3{font-size:15px;color:#78d9df;margin-bottom:4px}.learn-dialog p{line-height:1.65;color:#e0e8f1}.learn-dialog button{margin-top:14px}

.curtain.ending{position:fixed;inset:0;z-index:30;padding:20px;background:#030714f2}.curtain.ending>div{width:min(1100px,96vw);max-height:94vh;padding:24px}.ending-frame{margin:16px 0}.ending-frame img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;background:#081326;border-radius:9px}.ending-frame figcaption{font:12px/1.5 system-ui;color:#2a4357;margin-top:8px}.curtain.ending h3{font-size:32px}

.cast-scene{background:radial-gradient(ellipse at 40% 40%,#243f54,#0a142b 75%)}.cast-portraits{position:absolute;inset:5%;display:flex;align-items:center;gap:8px}.cast-portraits figure{width:50%;margin:0;text-align:center}.cast-portraits img{width:100%;height:480px;object-fit:contain;filter:drop-shadow(0 0 14px #46c9d644)}.cast-portraits figcaption{font:700 22px ui-monospace;letter-spacing:4px;color:#f2c66c}.character-bio{border-bottom:1px solid #2c455c;margin-bottom:14px;padding-bottom:10px}.character-bio h3{color:#f2c66c;margin-bottom:6px}.character-bio p{font-size:16px;margin:5px 0}.courage-bar{margin:14px 0;padding:12px 18px;border:1px solid #5abeb2;border-radius:10px;background:#102738}.courage-bar>div{display:flex;justify-content:space-between;font-size:13px;letter-spacing:1px}.courage-bar progress{display:block;width:100%;height:15px;margin:8px 0;accent-color:#61d5a0}.courage-bar progress::-webkit-progress-bar{background:#263d50;border-radius:6px}.courage-bar progress::-webkit-progress-value{background:#61d5a0;border-radius:6px;transition:width .2s}.courage-bar.low{border-color:#f66a79}.courage-bar.low progress::-webkit-progress-value{background:#f66a79}.courage-bar small{font-size:12px;color:#b7cdd8}.learn-art{background:radial-gradient(ellipse,#2b3850,#0a1426);border-radius:12px;display:grid;place-items:center;min-height:180px;margin:12px 0}.learn-art img{width:100%;height:230px;object-fit:contain}.learn-art .sprite-portrait{width:160px;height:240px;background-image:url('monster-sprites.png');background-size:300% 100%;background-repeat:no-repeat}@media(max-width:900px){.cast-portraits img{height:300px}}

/* Viewport-sized dialogs: let touch gestures scroll the content, including over images. */
.overlay,.curtain,.curtain.ending{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;overflow:hidden;touch-action:pan-y}
.overlay .learn-dialog,.curtain>div,.curtain.ending>div{min-height:0;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-gutter:stable}
.learn-art,.learn-art img,.ending-frame,.ending-frame img{touch-action:pan-y}
.learn-dialog #learnClose,.curtain #curtainNext{position:sticky;bottom:0;z-index:2;box-shadow:0 -8px 16px #0b153025}
.continuation{margin:22px 0;padding:18px;border:1px solid #ad742c;border-radius:10px;background:#e7dcc3}.continuation h4{font:700 22px/1.3 system-ui;margin:0 0 10px}.instagram-link{display:block;text-align:center;text-decoration:none;padding:14px;border-radius:8px;line-height:1.5}
@media(max-width:560px){.overlay,.curtain,.curtain.ending{padding:10px}.overlay .learn-dialog,.curtain>div,.curtain.ending>div{width:100%;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:20px}.ending-frame img{max-height:42dvh}.learn-art img{height:190px}}