:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#080b20;color:#f5f7ff;font-synthesis:none}*{box-sizing:border-box}html{min-height:100%;background:#080b20}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#233166 0,#111839 27%,#080b20 64%);overscroll-behavior:none}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #93f5e5;outline-offset:3px}.app-shell{width:min(100%,620px);margin:auto;padding:0 16px env(safe-area-inset-bottom)}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;line-height:1}.brand-icon{display:grid;place-items:center;width:38px;height:38px;background:#222b58;border:1px solid #485793;border-radius:13px;font-size:23px}.brand strong{display:block;font-size:15px;letter-spacing:.12em;font-weight:900}.brand small{display:block;margin-top:4px;color:#9da9d1;font-size:10px;letter-spacing:.28em;font-weight:800}.icon-button{height:40px;width:40px;border:1px solid #48527c;background:#20294d;color:#fff;border-radius:12px;font-size:22px}.icon-button.muted{color:#8590b0}.game-card{overflow:hidden;border:1px solid #35416e;border-radius:26px;background:#11183a;box-shadow:0 22px 64px #0007}.game-info{height:75px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 20px}.stat{display:flex;flex-direction:column;gap:4px}.stat span{color:#96a5d4;font-size:11px;font-weight:850;letter-spacing:.15em}.stat strong{font-size:23px;font-variant-numeric:tabular-nums;line-height:1;font-weight:900}.stat strong small{font-size:11px;letter-spacing:.1em;color:#fdb47a}.time-stat{text-align:center}.time-stat strong{color:#fbc178}.stat.right{text-align:right}.progress-track{height:3px;background:#2a335a}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,#7fe9e2,#fab76d);transition:width .1s linear}.arena{position:relative;height:min(62vh,510px);min-height:390px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 49% 60%,#23386c 0,#151f4d 46%,#101735 78%);touch-action:manipulation}.arena::before{content:"";position:absolute;inset:0;opacity:.7;background-image:radial-gradient(#c5d7ff 1px,transparent 1px),radial-gradient(#f7d8b3 1px,transparent 1px);background-size:83px 91px,137px 121px;background-position:14px 28px,46px 10px;pointer-events:none}.arena::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,#151c42b9);pointer-events:none}.orbit{position:absolute;border:1px solid #7f93d022;border-radius:50%;pointer-events:none}.orbit-one{width:120%;height:62%;left:-10%;top:19%;transform:rotate(-19deg)}.orbit-two{width:72%;height:93%;left:14%;top:3%;transform:rotate(29deg)}.balloon-layer{position:absolute;inset:0;z-index:2}.balloon{position:absolute;left:0;top:0;display:grid;place-items:center;width:60px;height:68px;padding:0;background:transparent;border:0;will-change:transform;user-select:none;-webkit-user-select:none;touch-action:manipulation;filter:drop-shadow(0 6px 9px #0006)}.balloon .emoji{font-family:system-ui,sans-serif;font-size:45px;line-height:1;filter:hue-rotate(var(--hue,0deg)) saturate(1.3)}.balloon.special .emoji{font-size:39px}.balloon.gate{width:84px;height:104px;background:#111b50dd;border:2px solid #ffd082;border-radius:26px;box-shadow:0 0 26px #ffad5861;display:flex;flex-direction:column;gap:0;z-index:3}.balloon.gate .emoji{font-size:41px;filter:none}.gate-name{font-size:11px;font-weight:900;color:#ffe0a2;letter-spacing:.1em}.gate-hp{width:60%;height:4px;background:#445078;border-radius:5px;overflow:hidden}.gate-hp i{display:block;height:100%;background:#fbb76f}.balloon.hit{animation:hit .16s ease-out}.pop-effect{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-50%);animation:pop .42s ease-out forwards;color:#ffdf9e;font-weight:900;font-size:23px;text-shadow:0 0 20px #ffb550}.center-panel{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 28px;background:linear-gradient(180deg,#121943b9,#11183ce0)}.center-panel[hidden]{display:none}.panel-symbol{display:grid;place-items:center;width:75px;height:75px;border-radius:25px;background:#283868;border:1px solid #6782bc;font-size:45px;transform:rotate(-8deg);box-shadow:0 15px 35px #05091b88}.eyebrow{margin:22px 0 11px;color:#92e9e4;font-size:11px;font-weight:900;letter-spacing:.2em}.center-panel h1{margin:0;font-size:clamp(27px,6.7vw,39px);letter-spacing:-.035em;line-height:1.1}.panel-copy{margin:16px 0 22px;max-width:340px;color:#c0c9e5;font-size:15px;line-height:1.45}.primary-button{min-height:52px;width:min(100%,330px);border:0;border-radius:16px;background:#f9b664;color:#1d1930;font-weight:900;font-size:16px;box-shadow:0 9px 30px #faad5960}.primary-button:active{transform:scale(.98)}.primary-button span{padding-left:6px}.panel-hint{margin:15px 0 0;color:#9ba9cd;font-size:12px}.game-toast{position:absolute;top:20px;left:50%;z-index:6;transform:translateX(-50%);white-space:nowrap;max-width:90%;font-size:13px;font-weight:800;color:#172645;background:#c7faf2;padding:9px 16px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none}.game-toast.show{opacity:1}.game-footer{height:53px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 18px}.game-footer span{color:#aebbe1;font-size:10px;letter-spacing:.09em;font-weight:800}.game-footer button{border:0;background:transparent;color:#e7ecff;font-size:13px;font-weight:800;white-space:nowrap}.game-footer button:disabled{opacity:.42;cursor:default}.zone-picker{padding:24px 2px 8px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}.section-heading h2{margin:0;font-size:17px}.section-heading span{font-size:12px;color:#8ee4dc;font-weight:800}.zone-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.zone-choice{min-height:80px;text-align:left;border:1px solid #35436c;border-radius:15px;padding:11px 12px;background:#182244;color:#fff}.zone-choice.active{border-color:#98eee3;background:#213a5a;box-shadow:inset 0 0 0 1px #98eee354}.zone-choice strong{display:block;color:#ffc28a;font-size:18px}.zone-choice span{display:block;margin-top:4px;color:#d8e1fa;font-weight:800;font-size:13px}.zone-choice small{display:block;margin-top:2px;color:#93a6d2;font-size:11px}.pass-note{display:flex;align-items:center;gap:13px;margin-top:12px;padding:14px;background:#151c39;border:1px solid #2c365c;border-radius:17px}.pass-mark{width:40px;height:40px;flex:none;display:grid;place-items:center;background:#2a3052;border-radius:12px;color:#fac78c;font-size:26px}.pass-note strong{font-size:13px;color:#e2e8f9}.pass-note p{font-size:12px;line-height:1.4;color:#98a6ca;margin:3px 0 0}.pass-lock{margin-left:auto;font-size:21px;color:#8d9bc3}.site-footer{text-align:center;color:#8794b8;font-size:12px;padding:16px 0 30px}@keyframes pop{0%{opacity:1;transform:translate(-50%,-50%) scale(.7)}100%{opacity:0;transform:translate(-50%,-95%) scale(1.7)}}@keyframes hit{50%{filter:drop-shadow(0 0 18px #ffdd91);scale:1.12}}@media(max-width:430px){.topbar{height:66px}.arena{height:56vh;min-height:370px}.game-info{height:67px;padding:0 15px}.stat strong{font-size:21px}.game-footer{padding:0 13px}.game-footer span{font-size:9px;letter-spacing:.03em}.panel-copy{font-size:14px}}@media(max-height:720px){.arena{height:52vh;min-height:320px}.center-panel .panel-symbol{width:58px;height:58px;font-size:36px}.eyebrow{margin-top:12px}.panel-copy{margin:10px 0 14px}.panel-hint{margin-top:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* KachoX character journey */
body{background:radial-gradient(circle at 50% -10%,#294e60 0,#172845 28%,#0d1731 67%)}
.brand strong{font-size:19px;letter-spacing:.16em}
.brand small{letter-spacing:.16em;color:#aacac8}
.game-card{border-color:#506477}
.arena{background:radial-gradient(ellipse at 50% 45%,#427579 0,#254c66 43%,#1c3357 82%)}
.arena::before{opacity:.18;background-size:120px 120px,180px 160px}
.arena::after{background:linear-gradient(transparent,#1633508c)}
.orbit{border-color:#bcebe22d}
.panel-mascot{width:100px;height:108px;object-fit:contain;filter:drop-shadow(0 12px 19px #08163488)}
.center-panel{background:linear-gradient(180deg,#142544c7,#152d4de8)}
.center-panel h1{font-size:clamp(25px,6vw,35px)}
.eyebrow{margin:11px 0 9px;color:#a9f3dc}
.panel-copy{margin:12px 0 18px}
.primary-button{background:#f9ce83;box-shadow:0 9px 27px #f7bc5360}
.balloon .balloon-art{width:60px;height:67px;object-fit:contain;filter:hue-rotate(var(--hue,0deg)) drop-shadow(0 5px 6px #0b23477a)}
.balloon.special{border-radius:22px;background:#ffffff16;border:1px solid #ffffff35}
.balloon.special .emoji{font-size:35px}
.balloon.gate{width:94px;height:116px;border-color:#d9fff3;background:#def9ed27;box-shadow:0 0 25px #a3f2cd5c;border-radius:30px}
.balloon.gate .gate-art{width:72px;height:78px;object-fit:contain;filter:drop-shadow(0 6px 6px #0a2b3b99)}
.gate-name{font-size:10px;color:#f5ffeb;line-height:1}
.gate-hp{background:#426b75;width:65%;margin-top:5px}
.gate-hp i{background:#fbd28a}
.zone-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.zone-choice{min-height:72px;padding:9px 10px}
.zone-choice strong{font-size:16px}
.zone-choice span{font-size:12px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zone-choice small{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zone-choice.locked{opacity:.57;cursor:not-allowed}
.zone-choice.active{background:#264b60;border-color:#a3ead9}
.zone-choice.next{border-color:#b8d49b}
.character-journey{padding:18px 2px 4px}
.character-list{display:grid;gap:9px}
.character-card{display:flex;align-items:center;gap:13px;min-height:96px;padding:10px 13px;border:1px solid #334c67;border-radius:17px;background:#182944}
.character-card.current{border-color:#9cebd8;background:#244054}
.character-card.locked{background:#16253e}
.character-card img{flex:none;width:66px;height:70px;object-fit:contain;filter:drop-shadow(0 5px 10px #07162699)}
.character-card.locked img{opacity:.77}
.character-card .character-copy{min-width:0;flex:1}
.character-card strong{font-size:15px;color:#f3f6fa}
.character-card .role{font-size:12px;color:#9fe8d8;margin-left:6px}
.character-card p{margin:4px 0 0;color:#bdcde0;font-size:12px;line-height:1.35}
.character-card .milestone{flex:none;font-size:11px;font-weight:800;color:#f7d49b;text-align:right}
.philosophy{margin:17px 2px 0;padding:17px 18px;border-radius:17px;background:#1b3549;border:1px solid #376c6d}
.philosophy strong{font-size:15px;color:#baf3db}
.philosophy p{margin:6px 0 0;color:#c5d6e0;font-size:13px;line-height:1.5}
@media(max-width:430px){.panel-mascot{width:83px;height:88px}.center-panel{padding:16px 20px}.center-panel h1{font-size:26px}.panel-copy{font-size:13px}.panel-hint{font-size:11px}.zone-list{grid-template-columns:repeat(3,minmax(0,1fr))}.character-card{gap:9px}.character-card img{width:57px;height:63px}.character-card .milestone{font-size:10px}.section-heading span{font-size:11px}}
@media(max-height:720px){.panel-mascot{height:65px;width:72px}.center-panel h1{font-size:24px}.panel-copy{margin:8px 0 11px}.eyebrow{margin:6px 0}.primary-button{min-height:47px}.panel-hint{margin-top:6px}}

/* The round itself occupies the whole phone. Discovery stays in the lobby. */
body.immersive{height:100vh;height:100dvh;overflow:hidden;background:#1c3357}
body.immersive .app-shell{width:100%;max-width:none;height:100%;padding:0;margin:0}
body.immersive .topbar,
body.immersive .zone-picker,
body.immersive .character-journey,
body.immersive .philosophy,
body.immersive .site-footer{display:none}
body.immersive .game-card{position:relative;width:100%;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none}
body.immersive .arena{height:100vh;height:100dvh;min-height:0;width:100%}
body.immersive .progress-track{display:none}
body.immersive .game-info{position:absolute;z-index:12;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,minmax(64px,auto));gap:16px;width:auto;height:auto;padding:8px 14px;border:1px solid #ddfff238;border-radius:14px;background:#112940af;backdrop-filter:blur(8px)}
body.immersive .game-info .stat:first-child{display:none}
body.immersive .game-info .stat{gap:2px;text-align:center}
body.immersive .game-info .stat span{font-size:9px;letter-spacing:.1em;color:#c5ddd8}
body.immersive .game-info .stat strong{font-size:17px;color:#fff}
body.immersive .game-footer{position:absolute;z-index:15;top:max(12px,env(safe-area-inset-top));right:14px;height:auto;padding:0}
body.immersive .game-footer span{display:none}
body.immersive .game-footer button{width:42px;height:42px;border:1px solid #ddfff238;border-radius:14px;background:#112940af;backdrop-filter:blur(8px);font-size:0}
body.immersive .game-footer button::after{content:'Ⅱ';font-size:18px;line-height:1}
body.immersive.paused-mode .game-info,
body.immersive.paused-mode .game-footer,
body.immersive.result-mode .game-info,
body.immersive.result-mode .game-footer{display:none}
.lobby-button{position:absolute;z-index:16;top:max(14px,env(safe-area-inset-top));left:16px;width:42px;height:42px;border:1px solid #ddfff256;border-radius:14px;background:#112940aa;color:#effff5;font-size:30px;line-height:1;backdrop-filter:blur(8px)}
.lobby-button[hidden]{display:none!important}
body.immersive .center-panel{padding:22px 25px}
body.result-mode .center-panel{background:radial-gradient(circle at 50% 33%,#345e68 0,#1c395a 58%,#172846 100%)}
body.result-mode .center-panel .eyebrow{display:none}
body.result-mode .panel-mascot{width:112px;height:120px}
body.result-mode .center-panel h1{margin-top:12px;font-size:clamp(27px,7vw,37px)}
body.result-mode .panel-copy{max-width:310px;margin:13px 0 20px;font-size:17px;line-height:1.4;color:#e8f3f1}
body.result-mode .primary-button{width:min(100%,280px)}
body.result-mode .panel-hint{margin-top:14px;color:#b8d1d5;font-size:12px}
body.paused-mode .panel-mascot{width:85px;height:95px}
@media(max-height:620px){body.result-mode .panel-mascot{height:85px;width:80px}body.result-mode .center-panel h1{font-size:25px}body.result-mode .panel-copy{margin:8px 0 13px;font-size:15px}}

.cheer-fly{position:absolute;z-index:25;pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%);font-size:clamp(24px,7vw,34px);font-weight:900;color:#ffdc8b;text-shadow:0 3px 0 #8b4c50,0 0 20px #fff1b9;animation:cheer-flight 1.25s ease-out forwards}
@keyframes cheer-flight{0%{opacity:0;transform:translate(-50%,-15%) scale(.65) rotate(5deg)}18%{opacity:1;transform:translate(-50%,-48%) scale(1.12) rotate(-4deg)}72%{opacity:1;transform:translate(-55%,-115%) scale(1.14) rotate(3deg)}100%{opacity:0;transform:translate(-62%,-165%) scale(1.25) rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.cheer-fly{animation:none;opacity:1;transform:translate(-50%,-85%)}}

/* Compact bilingual identity: X is read as batsu. */
.brand-logo{display:block;width:200px;max-width:calc(100vw - 104px);height:auto;max-height:62px;object-fit:contain;object-position:left center}

/* Image-led lobby: a boss, a demand, one action. */
body:not(.immersive){background:radial-gradient(ellipse at 50% 20%,#2b5367 0,#142b44 50%,#101c32 100%)}
body:not(.immersive) .app-shell{width:min(100%,700px);padding:0 16px env(safe-area-inset-bottom)}
body:not(.immersive) .topbar{height:72px}
body:not(.immersive) .brand-logo{width:180px;max-height:60px}
body:not(.immersive) .icon-button{border:0;background:#ffffff0b;border-radius:50%}
body:not(.immersive) .game-card{border:0;border-radius:0;background:transparent;box-shadow:none}
body:not(.immersive) .game-info,body:not(.immersive) .progress-track,body:not(.immersive) .game-footer{display:none}
body:not(.immersive) .arena{height:clamp(390px,calc(100svh - 254px),540px);min-height:390px;background:transparent;overflow:visible}
body:not(.immersive) .arena::before,body:not(.immersive) .arena::after,body:not(.immersive) .orbit{display:none}
body:not(.immersive) .center-panel{position:relative;min-height:100%;padding:6px 14px 18px;background:transparent;gap:0}
body:not(.immersive) .panel-mascot{width:clamp(190px,34svh,300px);height:clamp(190px,34svh,300px);max-height:none;filter:drop-shadow(0 18px 20px #07142466);animation:boss-float 4s ease-in-out infinite}
body:not(.immersive) .eyebrow{font-size:12px;letter-spacing:.13em;color:#b9dfde;margin:2px 0 9px}
body:not(.immersive) .center-panel h1{font-size:clamp(23px,5.7vw,32px);font-weight:800;line-height:1.12;max-width:100%;margin:0 0 20px;color:#fff2da;letter-spacing:-.025em}
.panel-copy:empty,.panel-hint:empty{display:none}
body:not(.immersive) .primary-button{width:180px;min-height:50px;border-radius:999px;background:#ffc778;box-shadow:0 6px 18px #020f2733;font-size:18px}
body:not(.immersive) .primary-button span{display:none}
body:not(.immersive) .panel-hint{font-size:13px;color:#c0d3dd;margin:10px 0 0}
.boss-lineup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;align-items:end;padding:5px 0 14px;position:relative}
.boss-stop{min-width:0;display:flex;flex-direction:column;align-items:center;padding:5px 1px 7px;border:0;border-radius:16px;color:#f4f7ff;background:transparent;position:relative}
.boss-stop img{width:clamp(48px,14vw,86px);height:clamp(56px,15vw,90px);object-fit:contain;filter:drop-shadow(0 4px 5px #07142655);transition:transform .18s}
.boss-stop strong{font-size:clamp(12px,3.2vw,15px);margin-top:3px;font-weight:650}
.boss-stop small{font-size:12px;color:#abc7d6;margin-top:4px;font-variant-numeric:tabular-nums}
.boss-stop.selected{background:#b1ffe611}
.boss-stop.selected::after{content:'';width:18px;height:3px;position:absolute;bottom:0;border-radius:3px;background:#b0eedb}
.boss-stop.locked{cursor:default}
.boss-stop.locked img{opacity:.8}
.boss-stop:not(:disabled):hover img{transform:translateY(-4px)}
.lobby-details{border-top:1px solid #acc9d522;margin:0;padding:0 3px}
.lobby-details summary{min-height:46px;padding:14px 0;cursor:pointer;color:#b9ccd8;font-size:14px}
.lobby-details summary span{float:right;font-size:12px;color:#89bab8;line-height:20px}
.zone-picker,.character-journey{padding:4px 0 16px}
.zone-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.zone-choice span{font-size:13px}
.zone-choice small{font-size:12px}
.character-card .role{font-size:13px;display:block;margin:3px 0}
.character-card p{font-size:14px}
.character-card .milestone{font-size:12px}
.philosophy{margin:0 0 16px;padding:16px;background:#11273d;border:0}
.philosophy p{font-size:14px}
.site-footer{font-size:12px;padding:16px 4px 24px;color:#a3bccb}
body.immersive .boss-lineup,body.immersive .lobby-details{display:none}
.balloon.gate{width:112px;height:140px;border:1px solid #ffdbad8c;border-radius:50% 50% 38% 38%;background:#ffffff0d;box-shadow:0 0 25px #f9bb6e20}
.balloon.gate .gate-art{width:101px;height:108px}
.gate-name{font-size:11px}
body.result-mode .panel-mascot{width:180px;height:190px}
@keyframes boss-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media(max-width:430px){body:not(.immersive) .topbar{height:64px}body:not(.immersive) .arena{height:clamp(355px,calc(100svh - 240px),480px);min-height:355px}body:not(.immersive) .panel-mascot{width:clamp(172px,29svh,240px);height:clamp(172px,29svh,240px)}body:not(.immersive) .center-panel h1{margin-bottom:16px}.character-card{flex-wrap:wrap}.character-card .milestone{margin-left:auto}}
@media(max-height:620px){body:not(.immersive) .arena{height:auto;min-height:350px}body:not(.immersive) .panel-mascot{width:174px;height:174px}}
@media(prefers-reduced-motion:reduce){body:not(.immersive) .panel-mascot{animation:none}.boss-stop img{transition:none}}
.batsu-stamp{position:absolute;z-index:24;pointer-events:none;transform:translate(-50%,-50%);font-size:100px;line-height:1;font-weight:900;color:#ff8168;text-shadow:0 3px 0 #783839;animation:batsu-pop .85s ease-out forwards}
@keyframes batsu-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(-12deg)}18%,45%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}100%{opacity:0;transform:translate(-50%,-60%) scale(.7) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.batsu-stamp{animation:none;opacity:.7}}