/* Illustrated stage + accessible controls. This overrides the prototype shell. */
:root{color-scheme:light;--text:#203d59;--muted:#58738b;--gold:#376e9b;--line:#a9c5d7;--panel:#f8fcff;--bg:#eaf4fa}
body{background:#eaf4fa;color:var(--text);font-family:"Noto Sans JP","Yu Gothic",sans-serif}
.shell{display:block}.workspace{margin:0;width:100%;min-width:0}.sidebar{position:fixed;inset:auto 0 0;width:auto;height:80px;padding:0 3%;z-index:30;background:#f9fdfff5;border:0;border-top:1px solid #cee1ed;box-shadow:0 -5px 30px #1d5e7a10;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(16px)}
.brand,.side-label,.side-bottom{display:none}.sidebar nav{display:flex;gap:12px;width:min(850px,100%);margin:0}.sidebar nav button{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;color:#557087;min-height:56px;margin:0;padding:8px;background:transparent;font-size:14px}.sidebar nav button span{font-size:25px}.sidebar nav button small{display:none}.sidebar nav button.active{background:#e0f3ff;color:#147eb7;box-shadow:inset 0 -3px #31b6e6}
header{position:fixed;inset:0 0 auto;height:74px;z-index:25;border:0;background:linear-gradient(#f8fdfff2,#f8fdffcc);backdrop-filter:blur(12px);padding:10px 4%;gap:20px;box-shadow:0 2px 20px #25648409}.season{color:#2e658b;font-weight:800}.season small{color:#6288a5}.wallet{gap:20px;margin-left:auto}.wallet>div{padding:0 16px;border-left:1px solid #bcd4e4}.wallet small{color:#608097}.wallet strong{font-size:19px;color:#214c6c}.wallet em{color:#55738b}.icon-button{color:#2c678c;background:#ffffffaa;border-color:#bdd6e4}
button{color:#244d6b;background:#ffffffdd;border-color:#b6d4e5;box-shadow:0 3px 12px #0f496b08;border-radius:8px;font-weight:600;min-height:44px}button:hover:not(:disabled){background:#f1fbff;border-color:#4ab8e3}button:focus-visible,a:focus-visible{outline:3px solid #e6a52b;outline-offset:3px}button:disabled{opacity:.55}.primary,.primary:hover:not(:disabled){background:linear-gradient(115deg,#3fc3e9,#198fc6);color:#fff;border:1px solid #6dd9f2;box-shadow:0 8px 20px #1589b338}.text-button{color:#27769f}.panel{background:#ffffffed;border-color:#c3dbea;box-shadow:0 8px 30px #255b7310}.tag{color:#386d92;border-color:#bdd7e9;background:#e9f7ff}.gold{color:#96702a!important}.muted,p{color:#54728a}.selected,.tabs .selected{background:#d5f1ff!important;color:#126b9c!important;border-color:#7bcbea!important}
#game-stage{position:fixed;inset:0;z-index:0;background:#10224b}#game-stage canvas{display:block}#game-stage[hidden]{display:none}
#main{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:108px 28px 120px;min-height:100dvh}
body[data-page=home] #main,body[data-page=summon] #main,body[data-page=arena] #main{max-width:none;padding:0;height:100dvh;min-height:650px;pointer-events:none}
#main button,#main a{pointer-events:auto}.home-ui,.summon-ui,.arena-ui{position:relative;height:100%;min-height:650px;overflow:hidden}
.chapter{position:absolute;left:5%;top:110px;filter:drop-shadow(0 2px 12px #ffffff);color:#254968}.chapter>span{font-size:11px;font-weight:800;letter-spacing:2px}.chapter h1{font-size:clamp(28px,3vw,45px);margin:10px 0;font-weight:700;letter-spacing:.08em}.chapter p{font-size:12px;color:#375f7c;background:#ffffff9c;display:inline;padding:4px 8px}
.home-tools{position:absolute;left:5%;top:245px;display:flex;flex-direction:column;gap:10px}.home-tools button{background:#ffffffc9;backdrop-filter:blur(8px);font-size:12px;text-align:left;min-width:175px;border:1px solid #fff;box-shadow:0 6px 20px #31608113}.home-tools small{display:block;font-size:10px;color:#6388a2}
.character-line{position:absolute;left:5%;bottom:130px;max-width:350px;padding:20px 28px;background:linear-gradient(100deg,#ffffffef,#ffffffad 80%,#ffffff00);border-left:3px solid #43c5e5}.character-line>span{font-size:11px;color:#4d8bb1;letter-spacing:3px}.character-line h2{font-size:34px;margin:4px 0 10px;color:#244b6a}.character-line p{font-size:14px;line-height:1.8;color:#345d79;margin:0}
.home-cta{position:absolute;right:4%;bottom:120px;width:285px;display:flex;flex-direction:column;gap:14px}.home-cta button{position:relative;text-align:left;padding:20px 24px;background:linear-gradient(120deg,#ffffffef,#e4f7ffea);border:1px solid white;transform:skewX(-5deg);box-shadow:0 8px 30px #25688522}.home-cta b,.home-cta small,.home-cta span{display:block;transform:skewX(5deg)}.home-cta b{font-size:28px;letter-spacing:3px;margin:9px 0}.home-cta small{font-size:10px;letter-spacing:1px;color:#527d9a}.home-cta span{font-size:11px;color:#3a7497}.home-cta .launch{background:linear-gradient(110deg,#32c3e7,#258ed0);color:white}.home-cta .launch small{color:#e1faff}
body[data-page=summon] .chapter,body[data-page=summon] .chapter p{color:#fff;filter:none}body[data-page=summon] .chapter p{background:#193b6899}.summon-description{position:absolute;left:5%;top:240px;color:white}.summon-description h2{font-size:60px;letter-spacing:.12em;margin:15px 0;text-shadow:0 2px 20px #112e60}.summon-description p{color:#eef5ff}.pickup-label{color:#ffe3a6;letter-spacing:5px;font-size:16px}.summon-dock{position:absolute;right:4%;bottom:110px;width:370px;padding:22px;background:#f8fdfff2;box-shadow:0 12px 40px #102f6540;border:1px solid #fff;border-radius:8px}.summon-dock p{font-size:11px;margin:12px 0}.summon-dock .tabs{margin:0;gap:8px}.summon-dock .tabs button{flex:1;font-size:12px;padding:8px}.summon-dock .pull-options{display:flex;gap:5px;margin:12px 0}.summon-dock .pull-options button{padding:8px 3px;font-size:12px;flex:1}.summon-dock>.primary{width:100%;font-size:22px;min-height:62px}.summon-dock>.primary small{display:block;font-size:11px;margin-top:3px}.summon-dock>.text-button{width:100%;font-size:12px}
.opponent{position:absolute;right:5%;top:120px;text-align:right;background:#ffffffbf;padding:12px 18px;border-right:3px solid #5abddc}.opponent small{font-size:10px;letter-spacing:3px}.opponent h2{font-size:22px;margin:6px 0}.opponent p{font-size:12px;margin:0}.arena-dock{position:absolute;left:50%;transform:translateX(-50%);bottom:110px;display:flex;gap:12px;align-items:center;width:max-content;max-width:95%}.arena-dock>.primary{font-size:20px;min-height:64px;padding:14px 30px}.arena-dock button{font-size:12px}
footer{position:fixed;bottom:82px;left:0;right:0;z-index:8;padding:4px 20px;border:0;font-size:9px;color:#376888;pointer-events:none;background:#ffffff7d}footer span:first-child{display:none}#save-status{margin-left:auto}#toast{z-index:100;background:#163b59;color:white;border-color:#7bc9ee}
dialog{color:#24445e;background:#f7fcff;border:1px solid white;box-shadow:0 20px 80px #183a6766;max-height:85dvh}dialog::backdrop{background:#1029479c;backdrop-filter:blur(8px)}dialog h2,dialog h3{color:#24445e}.modal-close{background:#e7f3fc;color:#234e70}.eyebrow{color:#438bb4}.receipt{background:#e8f5ff}.result .rarity-totals{background:#eaf5fb}.result .legacy-gain{background:#e3f4f7}.rank-result{color:#258fbe}.crest{background:#dbeef9}.character-grid .character-card{background:#f9fdff}.equipped{background:#d9f2ff!important;color:#21779f!important}.formation,.shop-summary{background:#ffffffde}
#playback{position:fixed;inset:80px 0 80px;z-index:40;pointer-events:none}#playback[hidden]{display:none}#playback-text{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;text-align:center;font-size:16px;color:#173e5d;background:#ffffffed;padding:12px 24px;border-radius:4px;box-shadow:0 4px 30px #1d426629}#skip-playback{position:absolute;right:4%;top:14px;pointer-events:auto}.playing #main,.playing .sidebar,.playing header{visibility:hidden}.playing footer{display:none}
@media(max-width:650px){header{height:68px;padding:6px 10px;gap:5px}.season{display:none}.wallet{gap:0;width:calc(100% - 46px);justify-content:space-around;margin:0}.wallet>div{padding:0 7px;border:0}.wallet small{font-size:8px}.wallet strong{font-size:14px}.wallet em{font-size:7px}.icon-button{min-width:40px;padding:5px}.sidebar{height:72px;padding:0 5px}.sidebar nav{gap:2px}.sidebar nav button{font-size:10px;flex-direction:column;gap:2px;min-height:56px;padding:5px 2px}.sidebar nav button span{font-size:23px}footer{bottom:73px;padding:2px 10px;font-size:8px}#main{padding:88px 14px 105px}body[data-page=home] #main,body[data-page=summon] #main,body[data-page=arena] #main,.home-ui,.summon-ui,.arena-ui{min-height:690px}.chapter{top:86px;left:6%}.chapter>span{font-size:8px;letter-spacing:1px}.chapter h1{font-size:26px;margin:7px 0}.chapter p{font-size:10px}.home-tools{left:auto;right:4%;top:92px;gap:7px}.home-tools button{font-size:9px;padding:8px;min-width:115px;min-height:40px}.home-tools small{font-size:8px}.character-line{left:5%;bottom:248px;max-width:85%;padding:10px 18px}.character-line>span{font-size:9px}.character-line h2{font-size:25px;margin:3px 0}.character-line p{font-size:11px;line-height:1.5}.home-cta{right:5%;left:5%;bottom:102px;width:auto;flex-direction:row;gap:12px}.home-cta button{flex:1;padding:12px 14px;min-width:0}.home-cta b{font-size:22px;letter-spacing:1px}.home-cta small{font-size:8px}.home-cta span{font-size:9px}.summon-description{top:175px;left:6%}.summon-description h2{font-size:38px;margin:8px 0}.summon-description p{font-size:10px}.summon-description button{font-size:10px;padding:6px 12px}.pickup-label{font-size:11px;letter-spacing:3px}.summon-dock{right:5%;left:5%;width:auto;bottom:95px;padding:13px 16px}.summon-dock p{margin:6px 0;font-size:10px}.summon-dock .pull-options{margin:6px 0}.summon-dock .pull-options button{font-size:10px}.summon-dock>.primary{min-height:52px;font-size:20px}.summon-dock>.text-button{min-height:30px;padding:4px}.opponent{top:163px;right:5%;padding:8px 12px}.opponent h2{font-size:15px}.opponent p{font-size:10px}.arena-dock{bottom:100px;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:90%}.arena-dock>.primary{grid-column:1/-1;grid-row:1;padding:10px;font-size:19px;min-height:56px}.arena-dock button{font-size:10px;padding:6px}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-card{padding:14px}.character-card h2{font-size:18px}#playback{inset:68px 0 72px}#playback-text{font-size:12px;padding:10px;max-width:94%;width:94%}dialog{max-width:94vw;padding:20px}.rarity-totals{gap:5px}.rarity-totals strong{font-size:20px}}
#gems{color:#176b99}.ten-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:18px 0}.pull-card{position:relative;background:linear-gradient(#fff,#e6f2fc);border:1px solid var(--rarity);border-bottom:4px solid var(--rarity);border-radius:6px;overflow:hidden;padding:6px}.pull-card>span{font-size:10px;font-weight:800;color:#345c7c}.pull-card>b{display:block;font-size:10px;text-align:center;color:#254968;white-space:normal}.mini-portrait{height:80px;background-image:url('../assets/party.png');background-size:400% 100%;background-repeat:no-repeat}.result-modal{width:min(850px,94vw)}
@media(max-width:650px){.ten-results{gap:4px}.pull-card{padding:3px}.mini-portrait{height:65px}.pull-card>b{font-size:9px}.character-grid .forward{min-width:35px;padding:4px}}
.mini-portrait{width:62px;height:84px;margin:auto;background-size:auto 100%}.crest.illustrated{background:transparent;border:0;box-shadow:none;transform:none}.crest.illustrated::before,.crest.illustrated::after{display:none}.legacy-gain strong{color:#247797!important}.rarity-totals span{color:#355c79!important}.result .legacy-gain p{color:#426a80}
@media(max-width:650px){.mini-portrait{width:45px;height:61px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}