/* Ink contours, warm paper labels and in-world illustration. */
.comic-dialog,.comic-guide,.replay-dialog{color:#f4edda;background:#091b31;border:2px solid #e8ce85;box-shadow:7px 7px 0 #020a15,0 24px 80px #000a;border-radius:14px;max-height:94svh;overflow:auto}
.comic-dialog{width:min(790px,95vw);padding:24px}.comic-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.comic-heading h2{font:900 36px/1 'Barlow Condensed',sans-serif;margin:6px 0;color:#fff0bd}.comic-close{flex:0 0 44px;width:44px;height:44px;border:1px solid #e1d6b26b;border-radius:8px;background:#102943;color:#fff0c9;font-size:30px;cursor:pointer}
.course-choices{display:grid;grid-template-columns:1fr 1fr;gap:17px}.course-choice{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:2px solid #d3ba76;border-radius:10px;background:#132b44;color:#f7efd9;overflow:hidden;cursor:pointer;box-shadow:4px 5px 0 #010912;transition:transform .18s,box-shadow .18s;min-width:0}.course-choice:hover,.course-choice:focus-visible{transform:translateY(-3px);box-shadow:6px 8px 0 #010912;outline:3px solid #ffe394;outline-offset:3px}.course-choice:active{transform:translateY(1px)}
.course-choice img{width:100%;aspect-ratio:1.5;object-fit:cover;border-bottom:2px solid #061223}.course-copy{display:flex;flex-direction:column;padding:16px 17px 20px;gap:10px}.course-copy b{font:900 35px/.98 'Barlow Condensed',sans-serif;color:#ffe18d;letter-spacing:.6px}.course-copy>span{font:400 16px/1.5 'DM Sans',sans-serif}.course-copy small{font:700 12px/1.4 'DM Sans',sans-serif;letter-spacing:.6px;color:#b9cfdf;padding-right:22px}.course-choice i{position:absolute;right:14px;bottom:17px;font-style:normal;color:#ffe18d;font-size:25px}.fantastic-choice{border-color:#bcabf1;background:#1b2548}.fantastic-choice .course-copy b,.fantastic-choice i{color:#d8c2ff}.course-footnote{font-size:14px;line-height:1.5;color:#bacfe2;margin:20px 0 0}
.comic-guide .lesson-art{background:none;height:auto;margin:8px auto 16px;overflow:visible}.guide-illustration{width:min(250px,100%);aspect-ratio:1;background-image:url('flight-guide.png');background-size:200% 200%;border:2px solid #e3ce8c;border-radius:12px;box-shadow:5px 5px 0 #020c19;transform:rotate(-1deg)}.guide-0{background-position:0 0}.guide-1{background-position:100% 0}.guide-2{background-position:0 100%}.guide-3{background-position:100% 100%}.comic-guide h2{color:#ffe093}.comic-guide .lesson-note{border-color:#b598ec}.comic-guide .lesson-dots i.current{background:#ffe093}
html[data-graphics=next] .start-card{--costume-light:#ffda78;position:relative;background:radial-gradient(ellipse at 50% 35%,#b48c3422,transparent 56%)}
html[data-costume=captain][data-graphics=next] .start-card{--costume-light:#f6edce;background:radial-gradient(ellipse at 50% 35%,#dfd6ad25,transparent 56%)}
html[data-costume=cyber][data-graphics=next] .start-card{--costume-light:#78eeff;background:radial-gradient(ellipse at 50% 35%,#3bcef82c,transparent 56%)}
html[data-costume=cena][data-graphics=next] .start-card{--costume-light:#aeff78;background:radial-gradient(ellipse at 50% 35%,#88dc4525,transparent 56%)}
html[data-graphics=next] .start-card .portrait{filter:drop-shadow(0 10px 15px #0009) drop-shadow(0 0 16px var(--costume-light));transition:filter .3s}
html[data-graphics=next] .start-card #start{border:2px solid #041326;box-shadow:4px 5px 0 #020b17;background:#ffe081;transform:rotate(-.6deg)}
html[data-graphics=next] .start-card #start:active{transform:translateY(3px) rotate(-.6deg);box-shadow:1px 2px 0 #020b17}
html[data-graphics=next] .menu-nav a,html[data-graphics=next] .menu-nav button{border:1px solid #c6af775c;border-radius:6px;background:#102741;box-shadow:2px 3px 0 #031021;font-size:14px;transition:background .15s,transform .15s}
html[data-graphics=next] .menu-nav a:hover,html[data-graphics=next] .menu-nav button:hover{background:#213d59;transform:translateY(-1px)}
html[data-graphics=next] .end-card{border:2px solid #eed497;border-radius:12px;box-shadow:7px 7px 0 #020b18,0 24px 70px #0009;background:#0b2037}
.end-mode-stamp{display:inline-block;padding:5px 10px;background:#f4e2b2;color:#142b43;font:800 14px 'DM Sans',sans-serif;transform:rotate(-2deg);margin-bottom:10px}
.end-card .result{position:relative;text-align:left;min-height:170px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:10px!important;isolation:isolate;overflow:hidden}.end-card .result strong,.end-card .result>span{position:relative;z-index:1}.end-card .result strong{max-width:58%;text-shadow:3px 3px 0 #051021!important}.end-card #comic-end-art{position:absolute;right:-8px;bottom:-10px;width:150px;height:184px;z-index:0;opacity:.92}
.end-card #run-stats{font:800 20px/1.2 'Barlow Condensed',sans-serif!important;color:#ffe29b!important;background:#203952;border-left:3px solid #d5befc;padding:10px}.end-card #share-challenge{background:#f1dba6;color:#102943;border:2px solid #021326;font-weight:800;box-shadow:3px 4px 0 #020a15}.replay-button{font-size:16px!important;min-height:44px}
.replay-dialog{width:min(460px,94vw);padding:18px}.replay-dialog canvas{display:block;max-width:100%;max-height:62svh;width:auto;height:auto;margin:auto;border:1px solid #dcc181;border-radius:8px}.replay-dialog p{font-size:14px;line-height:1.5;color:#bed1e3}.replay-dialog h2{margin:0}.weapon-boosted{border-color:#b99fff!important;box-shadow:0 0 14px #b79cfe33!important}
html[data-graphics=next] .costume-card{border:1px solid #d8c48b69;box-shadow:3px 4px 0 #020a16;border-radius:9px;background:linear-gradient(155deg,#243b52,#0c1c30)}html[data-graphics=next] .costume-card.selected{border:2px solid #ffe294;box-shadow:3px 4px 0 #020a16,0 0 20px #e0be5821}
@media(max-width:580px){.comic-dialog{padding:18px}.course-choices{grid-template-columns:1fr;gap:14px}.course-choice{display:grid;grid-template-columns:36% 1fr;min-height:175px}.course-choice img{height:100%;aspect-ratio:auto;object-fit:cover;border-bottom:0;border-right:2px solid #061223}.course-copy{padding:14px 12px;gap:8px}.course-copy b{font-size:30px}.course-copy small{font-size:12px}.course-choice i{bottom:12px;right:10px}.comic-heading h2{font-size:32px}.course-footnote{margin-top:16px}}
@media(max-height:760px){.comic-guide .guide-illustration{width:180px}.comic-guide .lesson-art{margin:5px auto 12px}.comic-guide .lesson-body{font-size:16px}.end-card .result{min-height:145px}.end-card #comic-end-art{width:130px;height:160px}}
@media(prefers-reduced-motion:reduce){.course-choice,.menu-nav>*{transition:none!important}.course-choice:hover{transform:none}.guide-illustration{transform:none}}

/* The second setup step keeps both difficulty choices visible on phones. */
.difficulty-banner{position:relative;height:125px;overflow:hidden;border-radius:12px;margin-bottom:16px;background:#132b44}.difficulty-banner img{width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.55}.difficulty-banner>span{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:20px;background:linear-gradient(90deg,#061629e8,#06162910);color:#f7ead1;font:700 22px/1.2 'Barlow Condensed',sans-serif;letter-spacing:1px}.difficulty-banner b{font-size:30px;color:#ffe18d}
.difficulty-choices{display:grid;grid-template-columns:1fr 1fr;gap:16px}.difficulty-choice{display:flex;flex-direction:column;gap:12px;text-align:left;min-width:0;border:2px solid #7ed5de;border-radius:14px;padding:20px;color:#e4f6ff;background:linear-gradient(145deg,#164451,#0b2436);cursor:pointer;box-shadow:0 5px 0 #020d19}.difficulty-choice.hard{border-color:#eead78;background:linear-gradient(145deg,#4c2c40,#1a1e37)}.difficulty-top{display:flex;align-items:center;justify-content:space-between;color:#aeedf0}.hard .difficulty-top{color:#ffcf9e}.difficulty-top b{font:900 42px/1 'Barlow Condensed',sans-serif;letter-spacing:1px}.difficulty-top>span{font-size:28px}.difficulty-choice strong{font-size:14px;line-height:1.4;letter-spacing:.4px}.difficulty-choice>span:not(.difficulty-top){font:400 16px/1.5 'DM Sans',sans-serif}.difficulty-choice small{margin-top:auto;padding-top:8px;font:800 14px/1.4 'DM Sans',sans-serif;color:#ffe18d}.difficulty-choice:focus-visible{outline:3px solid #fff2bb;outline-offset:4px}.difficulty-choice:hover{filter:brightness(1.12)}.difficulty-footer{display:flex;align-items:center;gap:16px;margin-top:20px}.difficulty-footer p{font-size:14px;line-height:1.5;color:#bed1e2;margin:0}.difficulty-footer button{font-size:14px;flex-shrink:0}
@media(max-width:580px){.difficulty-banner{height:95px}.difficulty-banner>span{font-size:17px;padding:14px}.difficulty-banner b{font-size:25px}.difficulty-choices{gap:12px}.difficulty-choice{padding:14px 12px;gap:10px}.difficulty-top b{font-size:34px}.difficulty-top>span{font-size:22px}.difficulty-footer{align-items:flex-start;flex-direction:column;gap:10px}}
@media(max-width:350px){.difficulty-choices{grid-template-columns:1fr}}
