:root{font-family:ui-sans-serif,system-ui,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:#eaf7ff;background:#070c1e;font-synthesis:none}*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 0% 0%,#173456 0%,transparent 35%),radial-gradient(ellipse at 95% 80%,#23144a 0%,transparent 40%),#060b1b}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #e9c46a;outline-offset:3px}a{color:inherit}.app{max-width:1760px;margin:auto;padding:16px clamp(10px,2vw,32px) 10px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 15px;min-height:67px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand .mark{position:relative;display:grid;place-items:center;width:51px;height:51px;background:linear-gradient(135deg,#8df4ff,#3658e9 64%,#9c65f1);border:1px solid #7ce9ff;border-radius:16px;box-shadow:0 0 26px #3af2ff55;color:#051833;font-weight:1000;font-size:35px;transform:rotate(-7deg)}.spark{position:absolute;top:-11px;right:-8px;color:#ffe9a0;text-shadow:0 0 10px #ffc052;font-size:19px}.brand strong{display:block;font-size:clamp(20px,2.1vw,28px);font-weight:1000;letter-spacing:.12em;line-height:1.15}.brand .accent{color:#53e9f9}.brand small{display:block;margin-top:2px;letter-spacing:.11em;color:#95a7c4;font-weight:700;font-size:10px}.header-actions{display:flex;align-items:center;gap:8px}.sim-badge{border:1px solid #2a805d80;background:#10372980;padding:7px 11px;border-radius:20px;font-size:12px;font-weight:800;color:#91ffcb}.mini{background:#122342cc;border:1px solid #42668a;border-radius:11px;color:#d7ebff;min-height:38px;padding:7px 13px;font-weight:850;font-size:13px}.mini:hover,.mini:focus-visible{background:#25426b}.icon-mini{width:40px;font-size:21px;padding:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:17px}.board{min-width:0}.hud{display:grid;grid-template-columns:2fr 1fr .8fr 1fr;gap:8px;margin-bottom:10px}.hud-tile{min-width:0;background:linear-gradient(135deg,#112341ea,#11182fea);border:1px solid #2e476c;border-radius:12px;min-height:65px;padding:9px 14px;display:flex;flex-direction:column;justify-content:center;gap:3px;box-shadow:inset 0 1px 0 #c4f3ff12}.over{font-size:11px;letter-spacing:.04em;color:#a6bad1;font-weight:800}.hud-tile b{font-size:20px;font-variant-numeric:tabular-nums;font-weight:950}.hud-tile .score{color:#ffe3a4;letter-spacing:.06em}.hud-tile:first-child b{display:none}.bar{height:13px;border-radius:20px;background:#07132b;border:1px solid #35546b;overflow:hidden;margin-top:4px}.bar-fill{height:100%;background:linear-gradient(90deg,#49debd,#bfffca);width:100%;box-shadow:0 0 20px #50edc3aa;transition:width .27s}.arena{position:relative;isolation:isolate;overflow:hidden;min-height:540px;height:clamp(540px,63vh,670px);border:2px solid #446c96;border-radius:20px;background:#091b38;box-shadow:0 16px 44px #0008,0 0 35px #25b5ff22,inset 0 0 35px #66dafe17}.arena canvas,.arena-shade,.flash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.arena-shade{z-index:1;background:linear-gradient(180deg,#05122a99 0%,#06122888 31%,#06122639 66%,#0613266e 100%)}.mission{position:absolute;z-index:2;top:20px;left:20px;right:20px;min-height:165px;border-radius:17px;padding:15px 19px 12px;background:linear-gradient(110deg,#071c38f2,#0c1535e6);border:1px solid #56c9ef80;box-shadow:0 10px 24px #0007,inset 0 1px 0 #8ad7ff35}.mission-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.chapter{color:#a6fdff;font-weight:1000;letter-spacing:.16em;font-size:11px}.q-ref{color:#f6dca9;background:#483b3255;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:850}.mission h1{margin:10px 0 6px;font-size:clamp(19px,2vw,27px);font-weight:950;line-height:1.35;letter-spacing:-.045em;text-wrap:balance}.mission p{color:#a8bdd1;font-weight:700;font-size:13px;margin:0 0 9px}.time-track{height:7px;background:#253956;border-radius:5px;overflow:hidden;border:1px solid #567ba040}.time-track>div{height:100%;width:100%;background:linear-gradient(90deg,#65d7ff,#84ffde);box-shadow:0 0 16px #5befff;transition:background .4s}.time-track>div.low{background:linear-gradient(90deg,#ffb347,#ff5b80)}.choices{position:absolute;z-index:3;left:18px;right:18px;top:34%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.choice{display:flex;min-height:176px;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;padding:16px 15px 13px;color:#effdff;border:2px solid #4c7aa6;border-radius:17px;background:linear-gradient(155deg,#0d2345ed,#10183deb);box-shadow:0 6px 0 #07142d,0 15px 22px #0008,inset 0 1px 0 #9cd9ff30;transition:transform .13s,border-color .15s,box-shadow .15s;position:relative;overflow:hidden}.choice:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,#67dfff,transparent);opacity:.4}.choice .c-index{display:inline-flex;align-items:center;justify-content:center;width:41px;height:31px;border-radius:9px;background:linear-gradient(135deg,#1572c7,#0b356e);border:1px solid #5ab8eb;color:#c8efff;font-size:14px;font-weight:1000;margin-bottom:15px}.choice .c-text{font-size:clamp(14px,1.45vw,19px);font-weight:900;line-height:1.46;letter-spacing:-.035em;word-break:keep-all;overflow-wrap:anywhere}.choice .select-foot{margin-top:auto;padding-top:14px;color:#86b1cd;font-size:11px;font-weight:800}.choice.is-selected{border-color:#7ff8ff;box-shadow:0 6px 0 #0a3f58,0 0 0 1px #7ff8ff44,0 0 28px #3ee4ff4c,inset 0 0 30px #56dcff1a;transform:translateY(-6px)}.choice.is-selected .c-index{background:linear-gradient(135deg,#33d9df,#377eea);color:#03223f}.choice:not(:disabled):hover{border-color:#c2fbff;transform:translateY(-5px)}.choice:disabled{cursor:default}.choice.correct{border-color:#80ffc5;background:linear-gradient(160deg,#07523eea,#093c4bec)}.choice.wrong{border-color:#ff8a9c;background:linear-gradient(160deg,#68273cee,#28142dea)}.bottomline{position:absolute;z-index:4;bottom:14px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:850;color:#cae9ff;background:#061a34e0;border:1px solid #34688b;border-radius:10px;padding:8px 14px;gap:6px}.bottomline #countdown{font-variant-numeric:tabular-nums;font-size:18px;color:#9bf5ff}.flash{z-index:5;opacity:0;background:#ff496a;transition:opacity .1s}.flash.good{background:#4befc1}.lower{min-height:60px;padding:10px 4px;display:flex;align-items:center;justify-content:space-between;gap:12px}.status{font-size:13px;color:#8fadc6;display:flex;align-items:center;gap:8px;line-height:1.4}.dot{flex:none;width:8px;height:8px;background:#6afac4;border-radius:50%;box-shadow:0 0 12px #66ffd2}.control-btns{display:flex;gap:7px}.pad{color:#d6f8ff;font-weight:950;padding:10px 15px;min-width:50px;border-radius:12px;border:1px solid #4ca9cd;background:#102e4d;box-shadow:inset 0 1px 0 #b1edff2e}.pad:active{transform:translateY(2px)}.pad.scan{background:linear-gradient(120deg,#1e789d,#2344a2);border-color:#80cdeb;min-width:105px}.pad.scan span{font-size:12px}.sidebar{min-width:0;display:flex;flex-direction:column;gap:13px}.side-panel{border:1px solid #2d4768;border-radius:17px;background:linear-gradient(145deg,#12243de8,#10162feb);padding:17px 16px;box-shadow:inset 0 1px 0 #abc5ff14}.eyebrow{color:#73d9ee;font-size:11px;font-weight:950;letter-spacing:.17em;text-transform:uppercase}.side-panel h2{font-size:17px;margin:6px 0 7px;font-weight:950;letter-spacing:-.045em}.muted,.side-panel p{font-size:12.5px;color:#a8bdd1;line-height:1.65;margin:0}.stage-map{padding:8px 0 0;margin:0;list-style:none}.stage-step{display:flex;gap:10px;align-items:center;border:1px solid #29486680;background:#0c1d3255;border-radius:11px;padding:7px 9px;margin:5px 0;opacity:.6}.stage-step.active{opacity:1;background:#173f5966;border-color:#5edcf8;box-shadow:0 0 16px #36d9f929}.stage-step.done{opacity:1;border-color:#3c9a80}.stage-step .step-symbol{width:32px;height:32px;flex:none;background:#162f4d;border-radius:8px;display:grid;place-items:center;font-size:18px;font-weight:950;color:#8fe7fc}.stage-step.done .step-symbol{background:#114f41;color:#96ffcb}.step-body{min-width:0}.step-body strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-body small{display:block;color:#a1acc6;font-size:10px;margin-top:3px}.mini-flow{margin-top:12px;font-size:11px;font-weight:900;line-height:2.3;color:#baf6ff}.mini-flow span{color:#f6c779}.log{flex:1;max-height:210px;overflow:auto}.log ul{padding:0;margin:7px 0 0;list-style:none}.log li{padding:7px 0 7px 12px;border-left:2px solid #39627e;color:#a8bed7;font-size:11.5px;line-height:1.45}.log li:first-child{color:#aaf3d4;border-left-color:#66eec4}.foot{border-top:1px solid #273d5a;margin-top:10px;padding:15px 5px 8px;display:flex;gap:9px;flex-wrap:wrap;color:#869ebb;font-size:11px;line-height:1.7}.foot strong{color:#bad7ed}.foot span{margin-left:auto}.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;background:#020918b9;backdrop-filter:blur(8px)}.overlay.hidden{display:none}.modal{max-width:730px;width:100%;max-height:min(90vh,850px);display:flex;flex-direction:column;overflow:auto;background:linear-gradient(160deg,#172948,#0b1533 67%,#1b1640);border:1px solid #6cc9ee;border-radius:24px;box-shadow:0 24px 90px #000c,0 0 60px #25c8ff2c}.modal-art{height:130px;min-height:130px;position:relative;background:linear-gradient(90deg,#031326a1,#113c6d18),url('assets/bg-intro.webp') center 47%/cover;overflow:hidden;border-radius:23px 23px 0 0;display:flex;align-items:center;justify-content:center}.emblem{font-size:73px;text-shadow:0 0 32px #ffeba6;color:#fff7ce;z-index:1}.neon-ring{position:absolute;width:220px;height:110px;border-radius:50%;border:3px solid #72efff9f;box-shadow:0 0 20px #45dcff,inset 0 0 18px #45dcff;transform:rotate(-15deg)}.modal-body{padding:23px clamp(18px,4vw,32px) 26px}.modal-body h2{font-size:clamp(23px,3.2vw,34px);line-height:1.25;margin:9px 0 14px;letter-spacing:-.045em}.modal-copy{font-size:15px;color:#c9dcee;line-height:1.8;max-height:45vh;overflow:auto}.modal-copy p{margin:0 0 11px}.modal-copy strong{color:#9cf8e6}.modal-copy ul,.modal-copy ol{padding-left:22px;margin:11px 0}.modal-copy li{padding:2px 0}.modal-copy .brief{background:#09274a;border:1px solid #3b83ab;border-radius:12px;padding:12px 14px;font-weight:750;color:#d6f7ff;margin:12px 0}.modal-copy a{color:#8fefff;text-underline-offset:3px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:18px}.cta,.secondary{font-weight:950;font-size:15px;border-radius:12px;min-height:49px;padding:10px 19px}.cta{border:1px solid #9cf5ff;color:#04243e;background:linear-gradient(115deg,#8afaff,#77c2ff);box-shadow:0 5px 24px #42d2ff44}.cta:hover{filter:brightness(1.11)}.cta span{margin-left:12px}.secondary{background:#182944;border:1px solid #497496;color:#d9edff}.secondary:hover{background:#224265}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1180px){.layout{grid-template-columns:minmax(0,1fr) 265px}.side-panel{padding:13px}.choice{padding:13px}.choice .c-text{font-size:15px}.sim-badge{display:none}}
@media(max-width:980px){.layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar .log{grid-column:1/-1;max-height:140px}.arena{height:clamp(540px,65vh,650px)}.mission h1{font-size:22px}.choices{top:35%}}
@media(max-width:620px){.app{padding:9px 8px}.masthead{flex-wrap:wrap;gap:8px}.brand .mark{width:40px;height:40px;font-size:28px}.brand strong{font-size:21px}.brand small{font-size:9px}.header-actions{width:100%;justify-content:flex-end}.mini{font-size:11px;min-height:35px;padding:7px 9px}.hud{grid-template-columns:1.4fr 1fr .65fr 1fr;gap:4px}.hud-tile{padding:8px 7px;min-height:52px}.hud-tile b{font-size:15px}.hud-tile .over{font-size:9px}.arena{min-height:690px;height:690px;border-radius:14px}.mission{top:13px;left:10px;right:10px;padding:13px;min-height:0}.mission h1{font-size:19px;line-height:1.4;margin:9px 0 7px}.mission p{font-size:11px}.choices{top:200px;left:10px;right:10px;display:flex;flex-direction:column;gap:10px}.choice{min-height:125px;max-height:132px;padding:10px 13px;display:grid;grid-template-columns:43px 1fr;grid-template-rows:1fr auto;align-items:center;column-gap:10px;border-radius:12px}.choice .c-index{grid-row:1/3;margin:0}.choice .c-text{font-size:15px;line-height:1.46}.choice .select-foot{padding:4px 0 0;margin:0;grid-column:2}.choice.is-selected{transform:translateX(3px)}.bottomline{font-size:10px;bottom:9px;left:10px;right:10px;padding:8px}.bottomline #countdown{font-size:15px}.lower{flex-direction:column;align-items:stretch;gap:8px}.control-btns{justify-content:center}.pad{min-width:64px}.pad.scan{min-width:160px}.sidebar{grid-template-columns:1fr}.sidebar .log{grid-column:auto}.side-panel{padding:15px}.foot span{margin-left:0}.modal-art{height:94px;min-height:94px}.modal-body{padding:19px 15px}.modal-copy{font-size:13px;max-height:54vh}.modal-body h2{font-size:23px}.modal-actions button{flex:1;white-space:nowrap;font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Companion sprite keeps the high-resolution original character alive on small screens too. */
.side-panel.concept{position:relative;padding-right:85px;min-height:155px}.companion-sprite{position:absolute;right:9px;top:16px;width:69px;height:69px;background-image:url('assets/companion-atlas.webp');background-size:800% 100%;background-repeat:no-repeat;background-position:0 0;filter:drop-shadow(0 0 11px #52efff70);animation:mascotSprite 1.7s steps(7,end) infinite,mascotFloat 2.9s ease-in-out infinite}.side-panel.concept .mini-flow{margin-right:-69px}
@keyframes mascotSprite{from{background-position-x:0%}to{background-position-x:100%}}@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hud-tile:first-child{position:relative}.hud-tile:first-child b{display:block;position:absolute;top:10px;right:12px;font-size:14px;color:#aafad4}.hud-tile:first-child .over{padding-right:34px}
@media(max-width:620px){.hud-tile:first-child b{top:9px;right:6px;font-size:11px}.hud-tile:first-child .over{padding-right:19px}.side-panel.concept{min-height:175px}}
@media(prefers-reduced-motion:reduce){.companion-sprite{animation:none}}
/* Illustrated Edition: custom optimized WebP sprites, vistas, icon atlas */
:root{--stage-hue:184}
body{background:radial-gradient(ellipse at 50% -20%,#1d467d7d 0%,transparent 50%),radial-gradient(ellipse at 95% 80%,#3b1d6973 0%,transparent 45%),#050c1e}
.arena{border-color:#6ebdeb;box-shadow:0 22px 55px #01040ad9,0 0 44px #25b5ff37,inset 0 0 25px #66dafe2b}
.arena-shade{background:linear-gradient(180deg,#05122a7d 0%,#06122850 30%,#06122626 63%,#06132642 100%)}
.mission{border-color:#86e4ff91;background:linear-gradient(111deg,#081933f5 5%,#112d52e3 65%,#0c1941de);box-shadow:0 9px 26px #010813c0,inset 0 1px 0 #a3d8ff43}
.choice{background:linear-gradient(145deg,#10294ef5,#0e1641ed);border-color:#65add0;box-shadow:0 5px 0 #03132e,0 12px 26px #000c,inset 0 1px 0 #d0f9ff3d}
.choice .c-art{position:absolute;right:10px;top:9px;width:51px;height:51px;pointer-events:none;background:url('assets/item-atlas.webp') 0% 50% / 800% 100% no-repeat;filter:drop-shadow(0 0 12px #44ddf8bd);opacity:.91}
.choice.is-selected{background:linear-gradient(145deg,#173a60f9,#111f45ee);border-color:#a6ffff;box-shadow:0 6px 0 #0d4d66,0 0 32px #54eaff7a,inset 0 0 26px #63fffa20}
.choice.is-selected .c-art{filter:drop-shadow(0 0 16px #f7e4a1);transform:scale(1.08)}
.art-panel{padding:9px;overflow:hidden;background:#0b213e}
.art-panel .scene-image-wrap{position:relative;overflow:hidden;border-radius:11px;border:1px solid #4e97b2;aspect-ratio:640/300}
.art-panel img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.14);transition:filter .4s}
.art-panel .scene-label{position:absolute;left:0;right:0;bottom:0;padding:23px 12px 9px;background:linear-gradient(0deg,#04132bf2,transparent);font-size:12px;font-weight:900;color:#d9f7ff;text-shadow:0 2px 5px #000}
.art-panel p{padding:10px 6px 3px;font-size:11px}
.modal-art{height:158px;min-height:158px;background-image:linear-gradient(90deg,#051125bc,#1333671f),url('assets/bg-intro.webp');background-position:center 42%;}
.modal-character,.modal-bot{position:absolute;bottom:-10px;object-fit:contain;filter:drop-shadow(0 6px 13px #081426d9)}
.modal-character{left:9%;width:125px;height:145px;z-index:1;animation:mascotFloat 2.9s ease-in-out infinite}
.modal-bot{right:10%;width:112px;height:125px;z-index:1;animation:mascotFloat 2.2s ease-in-out infinite reverse}
.modal-art .neon-ring{width:175px;height:90px}
.modal-art .emblem{font-size:55px}
.companion-sprite{background-image:url('assets/companion-atlas.webp');background-size:800% 100%;}
@media(max-width:980px){.art-panel{grid-column:1/-1}.art-panel .scene-image-wrap{aspect-ratio:2.8}.art-panel img{object-position:center 50%}}
@media(max-width:620px){.art-panel .scene-image-wrap{aspect-ratio:3.4}.choice .c-art{width:41px;height:41px;right:4px;top:4px;opacity:.73}.choice .c-text{padding-right:32px}.modal-art{height:110px;min-height:110px}.modal-character{width:90px;height:105px;left:3%}.modal-bot{width:79px;height:93px;right:5%}.modal-art .emblem{font-size:46px}}
@media(prefers-reduced-motion:reduce){.modal-character,.modal-bot{animation:none}}

.mobile-hero{display:none;position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 0 9px #48dffa)}
@media(max-width:620px){.choices{top:205px;gap:9px}.choice{min-height:112px;max-height:116px}.mobile-hero{display:block;right:16px;bottom:54px;width:75px;height:75px;object-fit:contain;animation:mascotFloat 2.7s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.mobile-hero{animation:none}}