:root{color-scheme:dark;--bg:#071827;--surface:#102b42;--surface2:#15354a;--line:#31566c;--text:#f3fbfe;--muted:#acc5d1;--cyan:#78eadf;--gold:#f0c784}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 50% -15%,#164360,var(--bg) 55%);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;line-height:1.65}
button{font:inherit;cursor:pointer}
a{color:#8cece2}
[hidden]{display:none!important}
.page{width:min(1120px,calc(100% - 36px));margin:auto}
.site-header{height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{color:#fff;text-decoration:none;font-size:19px;font-weight:900;letter-spacing:-.04em}
.brand span{color:#91b6c5;font-size:12px;font-weight:700;letter-spacing:0}
.header-tag{border:1px solid #477184;border-radius:999px;padding:5px 12px;color:#b4f0e8;font-size:10px;font-weight:900;letter-spacing:.13em}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:58px 50px 44px;border:1px solid #477188;border-radius:24px;background:#102c45 url('/img/typhoon/typhoon-newsroom.jpg') center/cover no-repeat}
.hero:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(5,20,36,.98),rgba(6,26,43,.87) 49%,rgba(6,26,43,.18))}
.eyebrow{margin:0;color:var(--cyan);font-size:11px;font-weight:900;letter-spacing:.16em}
.hero h1{margin:14px 0 15px;max-width:740px;font-size:clamp(34px,5.3vw,62px);line-height:1.2;letter-spacing:-.065em}
.hero h1 em{color:#a6fff1;font-style:normal}
.hero p:not(.eyebrow){margin:0;max-width:610px;color:#d2e5ea;font-size:14px}
.fiction-badge{display:inline-block;margin-top:21px;padding:7px 12px;border:1px solid #a0c8d0;border-radius:999px;background:rgba(6,27,41,.75);color:#e0edf0;font-size:11px;font-weight:800}
.game{margin:20px 0;border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:30px}
.game-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}
.case-label{color:var(--cyan);font-size:11px;font-weight:900;letter-spacing:.13em}
.progress{color:#abcad4;font-size:10px;font-weight:800;letter-spacing:.12em}
.progress b{margin-left:6px;color:#fff;font-size:15px;font-variant-numeric:tabular-nums}
.game>h2{margin:8px 0 2px;font-size:clamp(24px,3vw,32px);letter-spacing:-.055em}
.hint{margin:0;color:var(--muted);font-size:13px}
.step-heading{display:flex;align-items:baseline;gap:10px;margin:30px 0 12px}
.step-heading>span{color:var(--cyan);font-size:11px;font-weight:900}
.step-heading h3{margin:0;font-size:17px;letter-spacing:-.04em}
.step-heading p{margin:0 0 0 auto;color:#91adba;font-size:11px}
.wire-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wire-card{min-width:0;min-height:210px;border:1px solid #456b7e;border-top:3px solid #65ccce;border-radius:13px;background:#15364c;padding:16px 17px}
.wire-card:first-child{border-top-color:#8195b7}
.wire-card:last-child{border-top-color:#e1ad8f}
.wire-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wire-number{color:#9bb8c5;font-size:10px;font-weight:900;letter-spacing:.12em}
.wire-type{padding:2px 8px;border-radius:999px;background:#22566a;color:#d6f9f7;font-size:10px;font-weight:900;white-space:nowrap}
.wire-time{display:block;margin-top:18px;color:#c2d9df;font-size:11px;font-weight:700}
.wire-card h3{margin:4px 0 6px;color:#fff;font-size:17px;letter-spacing:-.03em}
.wire-card p{margin:0;color:#d3e4e9;font-size:13px}
.choice-heading{margin-top:30px}
.choice-list{display:grid;gap:10px}
.choice{width:100%;border:1px solid #456d82;border-radius:12px;background:#173d54;color:#f5fbfd;padding:14px 17px;text-align:left;font-size:14px;font-weight:800;line-height:1.5;transition:background .18s,border-color .18s,transform .18s}
.choice:not(:disabled):hover,.choice:not(:disabled):focus-visible{border-color:var(--cyan);background:#20586a;transform:translateY(-1px)}
.choice:disabled{cursor:default;opacity:.7}
.choice.is-correct{border-color:#7ce6d8;background:#195b58;color:#fff;opacity:1}
.choice.is-wrong{border-color:#e99c96;background:#5c3d4a;color:#fff;opacity:1}
.feedback{margin-top:17px;padding:17px 19px;border-radius:12px;border:1px solid #4d8985;background:#164643}
.feedback-wrong{border-color:#a77775;background:#413441}
.feedback strong{font-size:17px}
.feedback p{margin:5px 0 0;color:#e2eff0;font-size:13px}
.feedback .correct-headline{margin-top:11px;font-weight:900;color:#aaf8eb}
.feedback .takeaway{color:#bfd7de}
.next-row{display:flex;justify-content:flex-end;margin-top:16px}
.next-button,.restart-button{border:1px solid #89e7da;border-radius:10px;background:#88eadd;color:#0b3040;padding:11px 19px;font-size:13px;font-weight:900}
.next-button:hover,.restart-button:hover{background:#b1fff0}
.result{margin:20px 0;padding:38px;border:1px solid #4d948e;border-radius:20px;background:linear-gradient(120deg,#114b4b,#102b42)}
.result h2{margin:8px 0;font-size:28px}
.score{color:#a8fff0;font-size:clamp(50px,8vw,80px);font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.result p:not(.eyebrow){color:#d4e9e9;font-size:14px}
.restart-button{margin-top:10px}
.note{display:grid;grid-template-columns:250px 1fr;gap:20px;margin:28px 0;padding:25px 28px;border:1px solid #365a70;border-radius:17px;background:#0d263a}
.note-mark{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.13em}
.note h2{margin:6px 0;font-size:22px;line-height:1.35;letter-spacing:-.045em}
.note ol{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:tips}
.note li{display:flex;gap:13px;align-items:baseline;counter-increment:tips;color:#cbdfe5;font-size:12px}
.note li:before{content:counter(tips,decimal-leading-zero);color:var(--gold);font-size:11px;font-weight:900}
.note li b{min-width:130px;color:#fff;font-size:13px}
.note li span{flex:1}
.safety,.source{color:#b6cbd2;font-size:11px;margin:12px 4px}
.safety{color:#deccb1}
footer{display:flex;justify-content:space-between;gap:18px;margin-top:33px;padding:22px 0 34px;border-top:1px solid #355a6d;color:#8baab8;font-size:11px}
footer a{text-decoration:none;font-weight:800}
@media(max-width:760px){.page{width:calc(100% - 24px)}.site-header{height:60px}.brand{font-size:17px}.brand span{font-size:10px}.hero{padding:32px 23px;border-radius:18px}.hero:before{background:linear-gradient(90deg,rgba(5,20,36,.97),rgba(6,26,43,.78))}.hero h1{font-size:clamp(32px,8vw,42px)}.hero p:not(.eyebrow){font-size:12px}.fiction-badge{font-size:10px}.game{padding:19px 16px}.game>h2{font-size:23px}.wire-grid{grid-template-columns:1fr}.wire-card{min-height:0}.wire-time{margin-top:10px}.step-heading{flex-wrap:wrap}.step-heading p{width:100%;margin:0}.note{display:block;padding:21px}.note ol{margin-top:15px}.note li{display:block}.note li:before{margin-right:8px}.note li b{display:inline}.note li span{display:block;margin-left:29px}.result{padding:25px}footer{display:block}footer span{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.choice{transition:none}}