:root{color-scheme:dark;--bg:#10272d;--panel:#183b40;--border:#426369;--muted:#a6c5c0;--mint:#95f1cf;--gold:#f4cd7b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#071c24;color:#eff8ed;font-family:Inter,"Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:16px;display:grid;place-items:center}button,[role=button]{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{color:inherit;border:1px solid var(--border);background:#24474d;border-radius:8px;min-height:44px;padding:8px 12px}button:hover:enabled{filter:brightness(1.15)}button:disabled{opacity:.4;cursor:default}button:focus-visible,[role=button]:focus-visible,a:focus-visible{outline:3px solid #ffe69a;outline-offset:2px}[hidden]{display:none!important}#shell{position:relative;isolation:isolate;width:min(100vw,177.78dvh);height:min(100dvh,56.25vw);min-height:320px;overflow:hidden;background:radial-gradient(ellipse at 45% 45%,#315b58,#13343c 85%);border:1px solid #345353}#play-ui{height:100%;display:flex;flex-direction:column}.hud{height:65px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px max(18px,env(safe-area-inset-right)) 8px max(18px,env(safe-area-inset-left));background:#112f36f2;border-bottom:1px solid #365657;z-index:4}.hud-left,.hud-right{display:flex;align-items:center;gap:17px}.brand{display:flex;flex-direction:column;margin-right:8px;line-height:1.1}.brand>b{font-size:24px;color:var(--mint);letter-spacing:3px}.brand span{font-size:9px;letter-spacing:1.5px;margin-top:4px}.resource{font-size:21px;white-space:nowrap}.resource strong{font-weight:700;font-variant-numeric:tabular-nums}.resource small{font-size:12px;color:var(--muted)}.mint{color:var(--mint)}.gold{color:var(--gold)}.hud-center{display:flex;align-items:center;gap:12px}.hud-center>span:first-child{font-size:12px;color:var(--muted)}.hud-center>strong{font-size:26px;font-variant-numeric:tabular-nums}#combo{font-size:12px;color:var(--gold);background:#27464a;padding:6px 8px;border-radius:5px;min-width:66px}.hud-right{gap:7px}.wave-info{text-align:right;margin-right:8px;font-size:14px;white-space:nowrap}.wave-info small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.icon-button{font-size:20px;width:44px;padding:6px}.sound{font-size:18px;color:#8baaa7}.sound.on{color:var(--mint)}.pause-button{font-weight:600;font-size:14px;white-space:nowrap;background:#355954}.arena{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none}#pad-layer{position:absolute;inset:0;pointer-events:none}.pad{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:1px solid #b9e8d56b;background:#173f4852;border-radius:50%;width:34px;height:34px;min-height:34px;padding:0;font-size:12px;color:#e1f7df;touch-action:none;user-select:none;transition:background .1s,border-color .1s,box-shadow .1s}.pad.occupied{background:transparent;border-color:transparent;color:transparent;width:42px;height:42px}.pad.selected{border:2px solid #b6ffe1;box-shadow:0 0 0 4px #74e8ba38}.pad.legal{border:2px solid #a0ffd4;background:#3dc38875;color:#eaffdf}.pad.illegal{border-color:#ff8599;background:#b8355866;color:#ffd5dd}.pad.target{box-shadow:0 0 0 6px #96fac14f;transform:translate(-50%,-50%) scale(1.12)}.pad.moving{border:2px dashed #f8d28b}.battle-label{position:absolute;top:12px;left:18px;pointer-events:none;color:#b9d2c9;font-size:12px;display:flex;gap:10px}.battle-label small{font-size:10px;color:#89aaa6}.deck{flex:none;height:100px;display:flex;align-items:center;gap:16px;padding:10px max(18px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:#112f36f5;border-top:1px solid #375a5c;z-index:4}.deploy-card{border:1px solid #85d4b8;background:linear-gradient(135deg,#366c5f,#214840);border-radius:12px;display:flex;align-items:center;gap:12px;padding:12px 15px;user-select:none;touch-action:none;flex-shrink:0;min-height:70px}.character-icon{font-size:40px;color:var(--mint);line-height:1}.deploy-card b{font-size:16px;display:block}.deploy-card em{font-size:14px;color:var(--gold);font-style:normal;margin-left:12px}.deploy-card small{font-size:12px;display:block;color:#c4e4d6;margin-top:6px}.deploy-card.armed{box-shadow:0 0 0 3px #9ef3c980}.deploy-card.unaffordable{opacity:.5}.branch-cards{display:flex;align-items:center;gap:7px;position:relative;padding-bottom:13px}.path-card{display:flex;align-items:center;gap:8px;background:#1b3b42;min-height:53px;padding:7px 11px;text-align:left}.path-card>span{font-size:26px;line-height:1}.path-card b{font-size:13px;font-weight:600;white-space:nowrap}.path-card small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.glass>span{color:#f4cd7b}.frost>span{color:#d8baff}.blue>span{color:#82deff}.branch-caption{position:absolute;bottom:-3px;left:0;right:0;text-align:center;font-size:10px;color:#8fb4ad}.run-info{margin-left:auto;display:flex;flex-direction:column;gap:5px;white-space:nowrap;font-size:13px}.run-info small{font-size:11px;color:var(--muted)}#perk-tags{max-width:150px;overflow:hidden;text-overflow:ellipsis}#early{min-width:157px;max-width:200px;min-height:64px;border-color:#688b6b;background:#45654b;color:#e2f5d3;padding:8px 12px}#early b{font-size:14px;display:block}#early small{font-size:11px;color:#cfdfbb;display:block;margin-top:6px}#early:enabled{background:#abd879;color:#1a3428;border-color:#bedf97}#early:enabled small{color:#315735}#context{position:absolute;width:304px;background:#14363cf7;border:1px solid #88bca3;border-radius:12px;box-shadow:0 8px 30px #041e2b80;padding:12px;z-index:6}.context-head{display:flex;align-items:center;justify-content:space-between;gap:5px}.context-head h2{font-size:17px;margin:0}.context-head small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.close-context{width:32px;height:32px;min-height:32px;padding:0;border:0;background:transparent;font-size:24px}.stats{font-size:11px;display:flex;gap:12px;color:#c1d8d1;margin:9px 0}.evolutions{display:flex;gap:5px}.evolve{flex:1;padding:8px 4px;min-width:0;font-size:12px;text-align:center;border-radius:7px}.evolve span{display:block;color:var(--gold);font-size:12px;margin-top:5px}.evolve small{display:block;font-size:10px;color:#acc6c0;margin-top:4px}.context-actions{display:flex;gap:6px;margin-top:9px}.context-actions button{flex:1;font-size:12px;min-height:38px;padding:7px}.context-note{font-size:11px;color:var(--muted);margin:8px 0 0;line-height:1.5}#boss-bar{position:absolute;top:11px;left:36%;width:28%;min-width:190px;border:1px solid #b07688;background:#283b43ef;border-radius:8px;padding:8px 12px;font-size:12px;pointer-events:none}#boss-bar span{display:flex;justify-content:space-between}#boss-bar>div{height:5px;background:#563d48;margin:5px 0;border-radius:3px}#boss-fill{display:block;height:100%;background:#fb8fa3;border-radius:3px}#boss-time{font-size:10px;color:#e0b8be}#toast,#drag-tip{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:#0c2d38ee;border:1px solid #6c9c8d;border-radius:9px;padding:9px 16px;color:#e0ffeb;text-align:center;font-size:13px;max-width:80%;pointer-events:none;z-index:7;transition:opacity .15s}#toast{opacity:0}#toast.show{opacity:1}#drag-tip{color:#d5f8df}#drag-ghost{position:fixed;width:52px;height:58px;margin-left:-26px;margin-top:-40px;pointer-events:none;background:#53c39cdc;border:2px solid #b9ffe0;border-radius:12px;color:#eafff0;text-align:center;line-height:54px;font-size:33px;z-index:50;box-shadow:0 6px 15px #0005}#drag-ghost.bad{background:#9c3e55d9;border-color:#ff91a5}.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:20;background:#08232cd9;backdrop-filter:blur(6px);padding:16px}.modal{width:min(670px,94%);max-height:100%;overflow:auto;border:1px solid #709c8e;border-radius:18px;background:linear-gradient(145deg,#315851,#16383f);box-shadow:0 20px 70px #0010186b;padding:28px;text-align:center}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--mint)}.modal h1,.modal h2{font-size:30px;margin:10px 0}.modal p{font-size:14px;line-height:1.65;color:#bfd8cf;margin:10px 0 18px}.start-logo{font-size:40px;font-weight:800;letter-spacing:3px;color:#b0f5d6;line-height:1}.start-logo small{display:block;font-size:16px;letter-spacing:5px;margin-top:9px;color:#eef8e5}.instructions{display:flex;justify-content:center;gap:14px;margin:20px 0;font-size:13px}.instructions b{color:var(--mint);margin-right:5px}.primary{background:var(--mint);border:0;color:#163c32;font-weight:750;min-height:48px;border-radius:9px;padding:12px 22px;font-size:17px}.modal .primary{min-width:230px}.modal-footer{font-size:11px;color:var(--muted);margin-top:13px}.secondary{margin:10px 0 0;background:transparent;color:#c0d8cc;border-color:#5d8478;font-size:13px;min-height:40px}.perk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.perk-choice{padding:20px 10px;background:#21474a;text-align:center}.perk-choice .perk-icon{display:block;font-size:30px;color:var(--mint);margin-bottom:12px}.perk-choice strong{display:block;font-size:17px}.perk-choice small{display:block;font-size:12px;line-height:1.7;color:#bcd4cc;margin-top:10px}.result-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px;text-align:left;margin:16px 0}.result-main{text-align:center}.result-score{font-size:43px;font-weight:750;letter-spacing:-1px;color:var(--mint);margin:10px 0}.record{font-size:12px;color:var(--gold)}.result-metrics{display:flex;gap:8px;justify-content:space-between;background:#163a3b;border-radius:8px;padding:12px 8px}.result-metrics div{font-size:11px;color:var(--muted);text-align:center}.result-metrics b{display:block;font-size:17px;color:#e7f4e4;margin-top:5px}.score-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;color:#c8ddd2}.score-row b{color:#f0f6e3}.hints{font-size:12px;line-height:1.7;color:#e3edc9;padding:9px 12px;background:#334d3e;border-radius:8px;margin:10px 0}.hints div:before{content:'＋ ';color:#bcecaa}.feedback{display:inline-block;font-size:12px;color:#b5d4ca;margin:12px}.rotate-guide{display:none;position:absolute;inset:0;z-index:40;background:#123239;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}.rotate-icon{font-size:50px;color:var(--mint)}.rotate-guide h2{font-size:22px;line-height:1.65}.rotate-guide p{font-size:14px;color:var(--muted)}#portrait-preview{margin-top:15px;background:transparent;font-size:14px}
@media(max-width:1100px){.hud{height:56px;padding:6px 12px;gap:9px}.hud-left{gap:13px}.brand{margin-right:0}.brand>b{font-size:20px}.brand span{font-size:8px}.hud-center{gap:8px}.hud-center>strong{font-size:23px}.hud-center>span:first-child{display:none}.resource{font-size:19px}.deck{height:87px;padding:8px 12px;gap:9px}.deploy-card{min-height:62px;padding:9px;gap:7px}.character-icon{font-size:31px}.deploy-card b{font-size:14px}.deploy-card em{margin-left:5px;font-size:12px}.deploy-card small{font-size:11px}.path-card{padding:7px;gap:5px;min-height:47px}.path-card>span{font-size:22px}.path-card b{font-size:11px}.path-card small{font-size:9px}.branch-cards{gap:5px}.branch-caption{font-size:9px}.run-info{font-size:11px;gap:4px}.run-info small{font-size:10px}#early{min-width:125px;min-height:58px;padding:8px}#early b{font-size:12px}#early small{font-size:10px}.wave-info{font-size:12px}.pad{width:30px;height:30px;min-height:30px;font-size:10px}.pad.occupied{width:38px;height:38px}.battle-label{top:7px;left:12px;font-size:10px}.battle-label small{font-size:9px}}
@media(max-height:520px) and (orientation:landscape){#shell{width:100vw;height:100dvh;border:0;min-height:0}.hud{height:48px;padding:2px max(9px,env(safe-area-inset-right)) 2px max(9px,env(safe-area-inset-left))}.brand span{display:none}.hud-left{gap:10px}.brand>b{font-size:19px;letter-spacing:1px}.hud-center>strong{font-size:21px}#combo{font-size:10px;min-width:54px;padding:5px}.hud-right{gap:4px}.icon-button{width:40px;min-height:40px}.pause-button{font-size:12px;padding:6px;min-height:40px}.wave-info{margin-right:3px;font-size:11px}.wave-info small{font-size:10px;margin-top:2px}.deck{height:77px;gap:8px;padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.deploy-card{min-height:55px;padding:7px}.deploy-card b{font-size:12px}.deploy-card em{display:block;margin:3px 0 0;font-size:11px}.deploy-card small{font-size:10px;margin-top:3px}.branch-caption{display:none}.branch-cards{padding:0}.path-card{min-height:51px;padding:6px}.path-card>span{font-size:23px}.path-card small{font-size:9px}.run-info{font-size:10px}.run-info small{font-size:9px}#perk-tags{display:none}#early{min-width:114px;min-height:54px}#early b{font-size:11px}#early small{font-size:9px}.modal{padding:18px 24px;border-radius:13px;width:min(680px,95%)}.modal h1,.modal h2{font-size:22px;margin:6px 0}.modal p{font-size:12px;margin:8px 0 12px}.start-logo{font-size:28px}.start-logo small{font-size:12px;margin-top:6px}.instructions{margin:13px 0;font-size:12px}.modal .primary{font-size:15px;min-height:44px;padding:9px 20px}.modal-footer{margin-top:8px;font-size:10px}.perk-choice{padding:13px 10px}.perk-choice .perk-icon{margin-bottom:7px;font-size:24px}.perk-choice strong{font-size:15px}.perk-choice small{font-size:11px;margin-top:7px}.result-layout{margin:8px 0;gap:24px}.result-score{font-size:33px;margin:4px 0}.result-metrics{padding:7px}.result-metrics b{font-size:14px}.score-row{padding:3px 0;font-size:11px}.hints{margin:5px 0;font-size:11px;padding:6px 10px}.result-layout+p{display:none}.feedback{margin:8px}.pad{width:28px;height:28px;min-height:28px;font-size:10px}.pad.occupied{width:36px;height:36px}#context{width:276px;padding:9px;max-height:calc(100% - 8px);overflow:auto}.context-head h2{font-size:14px}.stats{font-size:10px;margin:6px 0}.evolve{min-height:46px;padding:6px 3px;font-size:11px}.context-actions button{min-height:36px;font-size:11px}.context-note{font-size:10px;margin-top:5px}#boss-bar{top:5px;padding:5px 9px;font-size:10px}#boss-time{font-size:9px}#toast,#drag-tip{font-size:11px;padding:7px 12px;bottom:7px}}
@media(max-width:750px) and (orientation:landscape){.path-card>span{display:none}.path-card small{display:none}.path-card{padding:8px 5px;min-height:45px}.branch-cards{gap:3px}.branch-cards b{font-size:10px}.hud-left{gap:6px}.resource{font-size:17px}.hud-center{gap:4px}.sound{display:none}.run-info{display:none}#early{margin-left:auto;min-width:105px}.deploy-card{gap:6px}.character-icon{font-size:26px}}
@media(orientation:portrait){#shell{width:100vw;height:100dvh;border:0}.rotate-guide{display:flex}.portrait-ok .rotate-guide{display:none}.hud{height:62px;gap:5px;padding:6px}.brand{display:none}.hud-left{gap:8px}.hud-center{flex-direction:column;gap:2px}.hud-center>strong{font-size:19px}#combo{padding:2px;font-size:10px}.hud-right{gap:3px}.sound,#fullscreen{display:none}.wave-info{font-size:10px}.wave-info small{font-size:10px}.pause-button{padding:6px;font-size:11px}.deck{height:155px;flex-wrap:wrap;gap:6px;padding:9px;align-content:center}.deploy-card{width:48%;height:61px}.branch-cards{width:48%;padding:0}.path-card{padding:6px;flex:1;display:block;text-align:center}.path-card>span{font-size:20px}.path-card b{display:block;font-size:9px}.path-card small,.branch-caption{display:none}.run-info{margin-left:0;flex:1}.run-info small{font-size:10px}#early{min-width:160px}.modal{padding:22px 17px}.modal h2{font-size:24px}.instructions{gap:8px;font-size:11px}.perk-grid{grid-template-columns:1fr}.perk-choice{display:flex;align-items:center;gap:14px;padding:15px}.perk-choice .perk-icon{margin:0}.perk-choice strong{font-size:15px}.perk-choice small{margin:0;font-size:11px}.result-layout{grid-template-columns:1fr;gap:7px}.result-score{font-size:37px}.modal .primary{min-width:0;width:100%}.pad{width:27px;height:27px;min-height:27px}.pad.occupied{width:32px;height:32px}.battle-label{font-size:10px}#boss-bar{left:28%;width:50%;min-width:0}#context{width:270px}.eyebrow{font-size:10px}}
/* Phase 1.2: shared tap-first HUD; visual pad rings retain generous hit areas. */
.hud{height:56px}.brand span{display:none}.hud-left{gap:14px}.hud-center>span:first-child{display:none}.wave-info{margin-right:4px}.pad,.pad.occupied{width:44px;height:44px;min-height:44px;border:0;background:transparent;box-shadow:none;color:#b7dac9;font-size:12px}.pad:disabled{opacity:1}.pad::before{content:'';position:absolute;inset:13px;border:1px solid #a2eed14d;border-radius:50%;box-shadow:0 0 7px #82dfbb1c;pointer-events:none}.pad.occupied::before{opacity:0}.pad.selected::before{opacity:1;border:2px solid #bbffe5;box-shadow:0 0 0 4px #74e8ba26}.pad.legal,.pad.illegal{background:transparent;border:0}.pad.legal::before{opacity:1;border:2px solid #a0ffd4;background:#3dc38855}.pad.illegal::before{opacity:1;border-color:#ff8599;background:#b8355844}.pad.moving::before{opacity:1;border:2px dashed #f8d28b}.pad.target{box-shadow:none}.pad.occupied{color:transparent}
#context{width:224px;padding:10px;border-radius:10px;max-height:calc(100% - 12px);overflow:auto;background:#14363cf5}.context-head h2{font-size:15px}.context-head{margin-bottom:6px}.context-head small,.stats{display:none}.close-context{width:44px;height:44px;min-height:44px;margin:-9px -7px -5px 0;flex:none}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.action-grid button{font-size:14px;min-height:44px;padding:6px}.action-grid>button:last-child{grid-column:1/-1}.max-evolution{font-size:13px;color:var(--muted);display:grid;place-items:center}.context-note{font-size:12px;margin:7px 0 0}.evolutions{display:grid;grid-template-columns:1fr;gap:5px}.evolve{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:14px;min-height:44px;padding:6px 8px}.evolve span{font-size:12px;margin:0}.menu-back{width:100%;min-height:44px;font-size:14px;margin-top:6px}#context .primary{width:100%;font-size:16px;min-height:44px;padding:8px}.pause-settings{display:flex;justify-content:center;gap:8px;margin-top:10px}.pause-settings button{font-size:14px;min-height:44px}#early{position:absolute;bottom:8px;right:max(8px,env(safe-area-inset-right));z-index:4;min-width:120px;min-height:44px;max-width:178px;padding:6px 9px}#early b{font-size:12px}#early small{font-size:11px;margin-top:2px}#toast,#drag-tip{bottom:8px;max-width:58%;padding:7px 10px}#boss-bar{left:50%;transform:translateX(-50%);width:25%;min-width:160px}.battle-label{display:none}
@media(max-height:520px) and (orientation:landscape){.hud{height:48px;padding-top:2px;padding-bottom:2px}.hud-left{gap:10px}.hud-center{gap:8px}.hud-center>strong{font-size:21px}.resource{font-size:18px}.wave-info{font-size:13px}#combo{font-size:12px}.pause-button{min-height:44px;font-size:14px;padding:6px 10px}.pad,.pad.occupied{width:44px;height:44px;min-height:44px}#context{width:220px;padding:8px}.context-head h2{font-size:14px}.context-note{font-size:12px}.evolve{font-size:14px}.modal .pause-settings{margin-top:8px}}
@media(orientation:portrait){.hud{height:62px}#context{width:220px}.hud-center{gap:2px}.brand{display:block}.hud-left{gap:5px}.brand>b{font-size:16px}.resource{font-size:16px}.wave-info{font-size:11px}.pause-button{font-size:12px}}

.pad::before{opacity:0}.evolutions{grid-template-columns:1fr 1fr}.evolutions .evolve{display:block;text-align:center}.evolutions .evolve span{display:block;margin-top:3px}.evolutions .menu-back{margin:0}

.qa-mode .pad.occupied{color:#fff;text-shadow:0 1px 3px #000}
/* Phase 1.3: portrait play surface. No rotation gate or fixed 16:9 shrink. */
html{height:100%;height:-webkit-fill-available}body{height:100%;height:-webkit-fill-available}#shell{width:min(100vw,56.25dvh);height:100vh;height:100dvh;min-height:0;border:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
@supports not (height:100dvh){#shell{width:min(100vw,56.25vh);height:100%;height:-webkit-fill-available}}
@media(max-width:600px){#shell{width:100vw}}
.hud{height:60px;min-height:60px;padding:4px 8px;gap:6px;display:grid;grid-template-columns:auto 1fr auto}.hud-left{gap:8px}.resource{font-size:16px}.resource small{font-size:10px}.hud-center{display:flex;flex-direction:column;align-items:center;gap:2px}.hud-center>strong{font-size:20px}#combo{font-size:11px;min-width:0;padding:1px 5px;background:transparent}.hud-right{gap:5px}.wave-info{font-size:11px;margin:0}.pause-button{width:44px;min-height:44px;padding:0;font-size:0}.pause-button::after{content:'Ⅱ';font-size:19px}.arena{flex:1;min-height:0}.pad,.pad.occupied{width:44px;height:44px;min-height:44px;border:0;background:transparent;opacity:1}.pad::before{inset:7px;opacity:.36;border:1.5px dashed #c1f7df;box-shadow:0 0 6px #a5f5d52b;background:#93e3bb08}.pad.buildable::before{opacity:.58}.pad.occupied::before{display:none}.pad.selected::before{opacity:1;border:2px solid #dafff0;background:#9fffc133;box-shadow:0 0 0 4px #91f8c72b}.pad.occupied.selected::before{display:block;border-style:solid}.pad.legal::before{opacity:.9;border-color:#a0ffd4}.pad.illegal::before{opacity:.65;border-color:#ff8599}.pad.recommended::before{animation:first-breathe 2.5s ease-in-out infinite}@keyframes first-breathe{50%{opacity:.85;box-shadow:0 0 9px #b0ffe64d}}@media(prefers-reduced-motion:reduce){.pad.recommended::before{animation:none;opacity:.7}}
#first-hint{position:absolute;z-index:3;pointer-events:none;color:#d7f7e6;background:#143c3de8;border:1px solid #7dba9d60;border-radius:8px;padding:7px 8px;font-size:12px;width:190px;text-align:center}#core-label{position:absolute;bottom:2%;left:0;right:0;text-align:center;font-size:11px;letter-spacing:2px;color:#bcf8dd;pointer-events:none}#context{width:220px;max-width:calc(100% - 16px);padding:8px}.evolutions{grid-template-columns:1fr 1fr}.context-head h2{font-size:14px}.context-note{font-size:12px}.action-grid button{font-size:13px}#boss-bar{top:6px;left:50%;width:55%;font-size:11px}#toast,#drag-tip{max-width:85%;bottom:28px;font-size:12px}#early{bottom:8px;right:8px;max-width:156px}.modal{width:96%;padding:20px 16px;max-height:100%}.modal h1,.modal h2{font-size:23px}.modal p{font-size:14px}.modal-footer{font-size:11px}.instructions{font-size:12px;gap:7px}.perk-grid{grid-template-columns:1fr}.perk-choice{display:flex;align-items:center;gap:12px;padding:14px 10px}.perk-choice .perk-icon{margin:0;font-size:24px}.perk-choice strong{font-size:15px;white-space:nowrap}.perk-choice small{font-size:12px;margin:0}.result-layout{grid-template-columns:1fr;gap:7px}.result-score{font-size:36px}.result-metrics b{font-size:16px}.score-row{font-size:12px;padding:4px 0}.start-logo{font-size:32px}.start-logo small{font-size:13px}.modal .primary{min-width:0;width:100%;min-height:44px}.overlay{padding:10px}.rotate-guide{display:none!important}
@media(max-width:350px){.hud{padding:3px 5px;gap:3px}.hud-left{gap:5px}.resource{font-size:14px}.hud-center>strong{font-size:18px}.wave-info{font-size:10px}}

#shell{height:var(--play-height,100dvh);width:min(100vw,calc(var(--play-height,100dvh) * .5625))}@media(max-width:600px){#shell{width:100vw}}
/* Phase 2: direct careers, compact recycle and long-press move. */
#move-count{color:#bddbcc;white-space:nowrap;font-size:12px}.hud-left{gap:5px;flex-wrap:wrap;max-width:135px}.hud-left .gold{width:100%}.hud{height:64px;min-height:64px}.hud-center>strong{font-size:21px}#context{width:248px}.context-head h2{flex:1;font-size:14px}.context-head h2 small{display:inline;font-size:11px;color:var(--muted)}.sell-icon{width:44px;min-height:44px;padding:2px;border:0;background:transparent;color:var(--gold);font-size:17px;flex:none}.sell-icon small{display:block;font-size:11px}.close-context{margin:0;width:32px;min-width:32px}.evolutions{gap:5px}.evolutions.single{grid-template-columns:1fr}.evolutions .evolve{padding:7px 4px;min-height:54px;white-space:normal}.evolve b{font-size:13px;font-weight:600}.evolve span{font-size:10px}.family-glass{border-color:#ac9667}.family-matte{border-color:#9686ac}.family-blue{border-color:#6b9fb5}.family-privacy{border-color:#9c75af}.sell-confirm{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:13px}.sell-confirm span{width:100%}.sell-confirm button{flex:1;min-height:44px;font-size:13px}.context-note{font-size:12px}#hero-banner{position:absolute;left:5%;right:5%;top:30%;z-index:8;pointer-events:none;text-align:center;background:#173b48e8;border:1px solid #e0da99;border-radius:10px;padding:13px 7px;animation:hero-arrive .7s ease-out}#hero-banner b{display:block;color:#fce5a5;font-size:20px;letter-spacing:1px}#hero-banner span{display:block;color:#d9f8e5;font-size:12px;margin-top:5px}@keyframes hero-arrive{0%{transform:scale(.9);opacity:0}25%{transform:scale(1.03);opacity:1}80%{opacity:1}100%{opacity:0}}@media(prefers-reduced-motion:reduce){#hero-banner{animation:none}}

.evolutions .evolve{min-height:44px;padding:5px 4px}.evolutions .evolve span{margin-top:2px}.context-head{margin-bottom:5px}

#combat-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.combat-pop{position:absolute;transform:translate(-50%,-100%);font-size:12px;font-weight:700;text-shadow:0 1px 3px #102b30;color:#aebcc0;white-space:nowrap}.combat-pop.critical{color:#ffe3a0}.combat-pop.reveal{color:#ecc8ff}
/* Phase 2.1: horizontal career deck and non-blocking combat milestones. */
#context.has-careers{width:360px}.career-track{position:relative;display:flex!important;overflow-x:auto;gap:8px;padding:7px 3px 9px;scrollbar-width:thin;touch-action:none;overscroll-behavior:contain;user-select:none}.career-track .career-card{flex:0 0 38%;min-width:0;padding:7px 4px;transform:scale(.96);transition:transform .12s,border-color .12s;touch-action:none}.career-card.focused{transform:scale(1);border-color:#baf6db;box-shadow:0 0 10px #91eec332}.evolve i{display:block;font-size:25px;color:var(--mint);font-style:normal}.evolve em{display:block;font-size:11px;font-style:normal;color:#bde6d2;margin:5px 0}.evolve small{font-size:10px;line-height:1.45}.career-card b{font-size:12px;white-space:nowrap}.career-card small{min-height:29px}.evolve span{font-size:12px!important}.carousel-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}.carousel-nav button{min-height:32px;width:40px;padding:0;font-size:22px}.carousel-nav small{font-size:11px;color:var(--muted)}.evolutions.single .evolve{display:block;width:100%}.evolutions.single .evolve i{display:none}#early{z-index:9}#early:active{filter:brightness(1.25);box-shadow:inset 0 0 0 2px #fff8}#combo-pop{position:absolute;left:50%;top:13%;z-index:7;pointer-events:none;text-align:center;transform:translateX(-50%);color:#fce39a;text-shadow:0 2px 5px #09282e}#combo-pop b{display:block;font-size:32px;line-height:1}#combo-pop span{font-size:12px;font-weight:800;white-space:nowrap}#combo-pop.major{padding:9px 20px;background:radial-gradient(ellipse,#64b9a74d,transparent 70%)}#combo-pop.major b{font-size:58px}#combo-pop.major span{font-size:14px;letter-spacing:1px}#wave-incoming{position:absolute;top:4%;left:12%;right:12%;z-index:9;pointer-events:none;text-align:center;background:#163d41e8;border:1px solid #a6d784;border-radius:10px;padding:10px;color:#d8f8ba}#wave-incoming b,#wave-incoming span{display:block}#wave-incoming b{font-size:19px}#wave-incoming span{font-size:14px;margin-top:4px}

#combo-pop.major b{font-size:50px}#combo-pop.major.high b{font-size:64px}#combo-pop.major.high{filter:drop-shadow(0 0 9px #eedb7b75)}
/* Phase 2.2: every career visible, details only after selection. */
#context.has-careers{width:340px;max-width:calc(100% - 12px)}.compact-careers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.compact-career{padding:6px 1px;min-width:0;min-height:88px;text-align:center;background:#204446;display:flex;flex-direction:column;justify-content:center;gap:4px}.compact-career i{font-style:normal;font-size:22px;line-height:1;color:#b6f5df}.compact-career b{font-size:12px;white-space:nowrap}.compact-career span{font-size:12px;color:var(--gold)}.compact-career small{font-size:10px;white-space:nowrap;color:#bdd8cf}.compact-career.focused{border-color:#c1ffe1;background:#39645b;box-shadow:0 0 0 1px #b9f2d2}.career-details{border-top:1px solid #608d79;margin-top:8px;padding-top:8px;font-size:12px}.career-details b{font-size:12px}.career-details p{margin:5px 0;font-size:12px;line-height:1.5;color:#cce6dc}.career-details .primary{width:100%;padding:6px;font-size:14px;min-height:44px}.combat-pop.armorBreak{color:#ffdf96}.combat-pop.shieldBreak{color:#a1f2ff}.combat-pop.execute{color:#f7b4f2;font-size:14px}.combat-pop.critical{font-size:14px}.combat-pop.reveal{color:#dbb9ff}

#context.has-careers .context-head{height:44px;margin-bottom:3px}#context.has-careers .sell-icon small{display:inline;font-size:10px}.compact-career{min-height:80px;gap:3px;padding:4px 1px}.compact-career i{font-size:20px}.career-details{margin-top:5px;padding-top:5px}.career-details p{line-height:1.35;margin:4px 0}.career-details>b{display:none}#context .career-details .primary{font-size:14px;padding:5px;min-height:44px}.combat-pop.shatter{font-size:17px;color:#ffe5a5}
.compact-career{min-height:78px;line-height:1.2;gap:2px;padding:3px 1px}.compact-career i{font-size:18px}.career-details{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:5px}.career-details p{font-size:11px;line-height:1.4;margin:0}#context .career-details .primary{font-size:13px;padding:4px}
/* Crystal Valley — shared portrait surface, safe under ordinary browser chrome. */
:root{--mint:#126f67;--gold:#88682c;--muted:#526e73;--text:#193f4a}body{background:radial-gradient(ellipse at 28% 20%,#e6f5ee,#afd2df 70%);color:#193f4a}#shell{background:linear-gradient(#91c8e0,#e9f9ed);box-shadow:0 0 100px #3b728f2b}.arena{background:radial-gradient(ellipse at 20% 15%,#f8ffffad,transparent 35%),linear-gradient(#94c9df,#d9f5eb)}.hud{background:#eefbf5ed;border-bottom:1px solid #ffffffb0;box-shadow:0 3px 16px #26495a14;color:#244c57}.hud-center>strong,.resource.mint{color:#116b61}.resource.gold{color:#856125}.hud-center>span,#combo,.wave-info,#move-count{color:#44616b}.pause-button{color:#275763;background:#cfe9e5;border:1px solid #ffffffb0}.pad::before{opacity:.24;border-color:#176e65;box-shadow:0 0 5px #b8fff766;background:#d9fff230}.pad.buildable::before{opacity:.3}.pad::after{content:'✧';position:absolute;inset:13px;font-size:16px;color:#187b70;opacity:.24;pointer-events:none}.pad.occupied::after{display:none}.pad.selected::before{opacity:1;border-color:#ecfff3;background:#7ed6bb55;box-shadow:0 0 0 3px #217f7550,0 0 12px #b6ffee}.pad.selected::after{opacity:.9}.pad.selected{animation:sigil-tap .25s ease-out}@keyframes sigil-tap{50%{transform:translate(-50%,-50%) scale(1.08)}}@keyframes first-breathe{50%{opacity:.52;box-shadow:0 0 9px #f0fff6}}#first-hint{color:#19534b;background:#f1fff1ef;border-color:#b4d5bf;box-shadow:0 3px 10px #35625b19}#core-label{color:#286961;text-shadow:0 1px #fff}#context,.modal{color:#234d55;background:linear-gradient(135deg,#fbfff9f5,#e2f4f2f7);border:1px solid #fff;box-shadow:0 12px 28px #193c4a33;border-radius:16px}.context-head h2,.modal h1,.modal h2{color:#234d55}.context-note,.modal p,.modal-footer,.instructions,.instructions b{color:#527078}.close-context{color:#41656b;background:#e0efea}.compact-career{background:#ffffff9e;border:1px solid #a7c6c8;border-radius:9px;gap:3px;padding:4px 1px;min-height:103px;color:#254d54}.compact-career b{font-size:12px}.compact-career small{font-size:10px;color:#567077}.compact-career span{color:#8a672b}.compact-career:active,.evolve:active{background:#d1eee3;transform:translateY(1px)}button:disabled{opacity:.42}.guardian-thumb{width:52px;height:52px;object-fit:contain;display:block;margin:auto;pointer-events:none}.evolutions .evolve{background:#ffffffa8;color:#2e525b;border:1px solid #afcace;min-height:80px}.evolutions .evolve .guardian-thumb{float:left;width:68px;height:68px;margin-right:6px}.evolve small{color:#537079}.primary,.modal .primary{color:#f7fff9;background:linear-gradient(#378b7b,#246a60);border:1px solid #24675f;box-shadow:0 3px 0 #194d47;font-weight:700;border-radius:10px;min-height:48px}.secondary,.pause-settings button,.sell-confirm button{color:#335d61;background:#e2efea;border:1px solid #b9d4ce}.overlay{background:#66929e42}.start-logo{color:#246e66;text-shadow:0 2px #fff}.start-logo small{color:#678079}.eyebrow{color:#587e78}.perk-choice{background:#f8fff9;color:#315953;border-color:#b0cec8}.perk-choice small{color:#5d7775}.result-score{color:#267c6f;text-shadow:0 2px #fff}.result-core{font-size:60px;line-height:1;color:#339f88;text-shadow:0 0 15px #72e3c8,0 0 35px #8de8d3;margin-bottom:10px}.result-metrics,.score-row{color:#56716f;border-color:#bbd6cf}.result-metrics b,.score-row b{color:#294f51}.hints{color:#56716f;background:#dceee58f}.modal.new-record .result-core{animation:record-glow .7s ease-out}@keyframes record-glow{50%{text-shadow:0 0 25px #fff,0 0 45px #37d7ae;transform:scale(1.12)}}#toast,#drag-tip{background:#effbf5f2;color:#254f4e;border-color:#bfd7cc;box-shadow:0 3px 14px #193a4526}#hero-banner{background:#f1fff3e8;border-color:#d5c48e}#hero-banner b{color:#867044}#hero-banner span{color:#365e60}#boss-bar{background:#f8eff8ee;color:#655578;border-color:#bfa4c7}#wave-incoming{background:#effff3ed;color:#3e7764;border-color:#9cceba}#early{background:#edf9d9ee;color:#47603d;border-color:#9fae81}.combat-pop{text-shadow:0 1px 3px #193b4d,0 0 2px #193b4d}#combo-pop{color:#fff2b4;text-shadow:0 2px 3px #766336,0 0 10px #98753888}@media(prefers-reduced-motion:reduce){.pad.selected,.modal.new-record .result-core{animation:none}}
.evolutions.single .evolve{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto auto;gap:2px 6px;text-align:left;min-height:72px;padding:6px}.evolutions.single .evolve .guardian-thumb{grid-row:1/4;width:54px;height:54px;float:none;margin:0}.evolutions.single .evolve>small:nth-of-type(2){display:none}.evolutions.single .evolve span{margin:0}.context-note{margin:7px 0 1px}
.result-metrics{background:#d7eae4}.result-metrics>div{color:#466660}.result-metrics b{color:#214f47}.modal.result-mode{padding:14px 16px}.result-core{font-size:44px;margin-bottom:7px}.modal.result-mode h2{margin:12px 0}.modal.result-mode .result-score{margin:12px 0}.modal.result-mode .hints{margin:10px 0}
:root{color-scheme:light}body{font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}
/* Phase 3.1: retain portrait geometry and all tap targets; upgrade visual surfaces only. */
body{background:#17354d url('./assets/environment/crystal-valley-sky.webp') center/cover fixed}
#shell{box-shadow:0 0 70px #092b4566}
.arena{background:#88bbdc url('./assets/environment/crystal-valley-sky.webp') center/cover}
.hud{background:linear-gradient(110deg,#153d4bee,#18304ce8);border-bottom:1px solid #c3d7cc7a;color:#f0f7f4;box-shadow:0 4px 16px #123b5144}
.hud-center>strong,.resource.mint{color:#a6f9df}.resource.gold{color:#ffe3a2}.hud-center>span,#combo,.wave-info,#move-count{color:#c4d9e2}.pause-button{color:#e7f6f3;background:#ffffff14;border-color:#accbc555}
.pad::before{inset:7px;border:1px dashed #9bffe088;background:transparent;opacity:.24;box-shadow:none}.pad.buildable::before{opacity:.45}.pad::after{display:none}.pad.selected::before{opacity:1;border:2px solid #e5fff5;box-shadow:0 0 12px #74ffcf,inset 0 0 8px #c3ffdc;background:#b6fff019}.pad.occupied::before{display:none}.pad.occupied.selected::before{display:block}
#core-label{color:#e4fff1;font-weight:700;text-shadow:0 1px 4px #173c49;letter-spacing:2px}
.guardian-thumb{filter:drop-shadow(0 2px 2px #123c4c22)}.compact-career{background:linear-gradient(#f6faf7,#dce9e5);border-color:#a1b6b5}
.combat-pop.critical{color:#ffe992;font-size:17px;font-weight:900;text-shadow:0 2px 0 #47223c,0 0 6px #171e3b}.combat-pop.execute{font-size:17px;color:#ffe1ff}.combat-pop.reveal{font-weight:800;color:#edc9ff}.combat-pop.armorBreak{font-weight:800;color:#ffd57c}

/* Phase 3.2: distant scenery recedes; the interactive arena and hit areas keep their layout. */
body{background:#244051}
.arena{background:#8dabbc;isolation:isolate}
.arena::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#b2cdd955,#7595af66),url('./assets/environment/crystal-valley-sky.webp') center/cover;filter:saturate(.52) contrast(.76);pointer-events:none}
.arena canvas{position:relative}
.pad.buildable::before{opacity:.5}.pad:not(.occupied)::before{border-color:#c1fff0}
@media(prefers-reduced-motion:no-preference){.pad.buildable:not(.selected)::before{animation:available-sigil 3.5s ease-in-out infinite}@keyframes available-sigil{50%{opacity:.34}}}
/* Phase 3.3: one transparent, non-interactive presentation slot; battlefield geometry is unchanged. */
#intro-layer{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;contain:layout style;isolation:isolate}
#intro-layer[hidden]{display:none}#intro-layer *{pointer-events:none;box-sizing:border-box}.intro-card{position:relative;width:calc(100% - 24px);display:grid;grid-template-columns:42% minmax(0,1fr);align-items:center;gap:4px;padding:12px 14px 12px 0;border:1px solid #b8f7ef77;border-radius:22px;background:linear-gradient(125deg,#203b4aca,#203847a1 65%,#45666b88);box-shadow:0 8px 28px #122c4040,inset 0 1px #efffff70;color:#f6fffc;text-shadow:0 1px 3px #071b2dc9;overflow:visible}
.intro-portrait{height:100%;min-height:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 9px #a3f4e961)}.intro-art{width:100%;height:100%;object-fit:contain;max-width:100%;max-height:100%}.intro-copy{min-width:0;align-self:center}.intro-eyebrow{color:#b4f7de;font-weight:800;font-size:12px;letter-spacing:.1em;line-height:1.35;margin-bottom:6px}.intro-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px}.intro-title h2{font-size:23px;line-height:1.2;margin:0;color:#fff8e6;font-weight:900;letter-spacing:.03em}.intro-english{font-size:11px;color:#d0e6e5;line-height:1.2}.intro-card p{font-size:14px;line-height:1.45;margin:8px 0 0;overflow-wrap:anywhere}.intro-knowledge{color:#e0eded}.intro-recommend{display:flex;align-items:center;gap:5px;font-size:12px;line-height:1.25;color:#ffecb5;margin-top:5px}.intro-recommend img{width:23px;height:23px;object-fit:contain;flex:none}.intro-boss-traits{word-break:keep-all;font-size:14px;line-height:1.7;color:#edd6ff;margin-top:14px}.intro-card [hidden]{display:none}
.intro-monster{position:absolute;bottom:8px;height:30%;grid-template-columns:25% minmax(0,1fr);width:calc(100% - 16px);padding:9px 12px 9px 2px;border-radius:18px}.intro-monster .intro-eyebrow{font-size:10px;margin-bottom:3px}.intro-monster .intro-title h2{font-size:18px}.intro-monster p{font-size:12px;line-height:1.35;margin-top:4px}.intro-hero{height:48%}.intro-card.intro-boss{height:52%;grid-template-columns:48% minmax(0,1fr);border-color:#d0b0ff9e;background:linear-gradient(120deg,#332944c7,#241d36ac 70%,#614e7699);box-shadow:0 0 32px #af7bd745,inset 0 1px #edcaff77}.intro-boss .intro-eyebrow{color:#e2b6ff}.intro-boss .intro-title h2{font-size:25px}.arena.intro-boss::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:#210e321f}.arena.intro-active #combo-pop,.arena.intro-active #wave-incoming{visibility:hidden}.arena.intro-active #toast{top:8px;bottom:auto;z-index:7}
@media(max-width:350px),(max-height:560px){.intro-card{padding:8px 10px 8px 0;gap:2px;border-radius:16px}.intro-eyebrow{font-size:10px;letter-spacing:.02em;margin-bottom:4px}.intro-title h2{font-size:19px}.intro-english{font-size:10px}.intro-card p{font-size:12px;line-height:1.35;margin-top:6px}.intro-monster{padding:5px 7px 5px 0;grid-template-columns:24% minmax(0,1fr)}.intro-monster .intro-title h2{font-size:16px}.intro-monster .intro-eyebrow{font-size:9px;margin-bottom:2px}.intro-monster p{font-size:12px;line-height:1.25;margin-top:3px}.intro-recommend{font-size:11px;margin-top:3px;gap:2px}.intro-recommend img{width:18px;height:18px}.intro-boss .intro-title h2{font-size:22px}.intro-boss-traits{font-size:12px;line-height:1.5;margin-top:9px}}
@media(prefers-reduced-motion:reduce){.intro-card{transform:none!important}}

/* First Lv.2 career introduction: smaller than the existing Lv.3 card. */
.intro-card.intro-career{height:36%;width:calc(100% - 40px);grid-template-columns:38% minmax(0,1fr)}.intro-career .intro-title h2{font-size:20px}.intro-career .intro-eyebrow{letter-spacing:.02em;font-size:11px}.intro-career p{font-size:13px;line-height:1.35}
@media(max-width:350px),(max-height:560px){.intro-card.intro-career{height:38%;width:calc(100% - 28px);grid-template-columns:34% minmax(0,1fr)}.intro-career .intro-title h2{font-size:18px}.intro-career .intro-eyebrow{font-size:10px}.intro-career p{font-size:12px;margin-top:4px}}

/* Character fidelity + MVP: result hierarchy only; arena/HUD geometry stays locked. */
.modal.result-mode{width:min(620px,100%);padding:16px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain;background:linear-gradient(145deg,#f0fbf9f5,#e3edf4f5);text-align:center}
.result-mode .result-heading h2{font-size:19px;margin:4px 0 0}.result-heading .eyebrow{font-size:12px;letter-spacing:.12em}
.result-mode .result-score{margin:8px 0 4px;display:flex;justify-content:center;gap:12px;align-items:center;line-height:1.15}.result-score>span{font-size:13px;letter-spacing:.08em;font-weight:600}.result-score>strong{font-size:38px;font-variant-numeric:tabular-nums}
.result-mvp{--class-accent:#8cbea9;position:relative;display:grid;grid-template-columns:46% minmax(0,1fr);align-items:center;min-height:166px;height:clamp(166px,28dvh,235px);max-width:100%;border-radius:18px;background:radial-gradient(ellipse at 23% 60%,#c5ebecb8,transparent 65%);text-align:left;margin:0}
.mvp-portrait{width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;filter:drop-shadow(0 7px 6px #20556c30);animation:mvp-arrival .55s ease-out}.mvp-copy{min-width:0;padding-right:8px}.mvp-eyebrow{font-size:12px;color:#54666e;letter-spacing:.07em;font-weight:700}.mvp-copy h3{font-size:23px;line-height:1.25;color:#183b50;margin:6px 0 8px}.mvp-copy .mvp-class{margin:0;font-size:17px;font-weight:800;color:#426475;line-height:1.35}.mvp-class small{display:block;font-size:11px;font-weight:500;letter-spacing:.06em}.mvp-copy .mvp-damage{font-size:12px;line-height:1.4;margin:8px 0 0;color:#527177}.mvp-damage strong{display:block;font-size:26px;color:#255e63;font-variant-numeric:tabular-nums}
.class-damage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:3px 0 9px}.class-damage-item{display:flex;align-items:center;flex-direction:column;justify-content:center;min-width:0;padding:4px 1px;border-radius:10px;border:1px solid #adc6cf59;background:#ffffff6e}.class-damage-item img{width:40px;height:40px;object-fit:contain}.class-damage-item span{font-size:11px;white-space:nowrap;color:#557080;line-height:1.35}.class-damage-item b{display:block;font-size:13px;color:#285361;font-variant-numeric:tabular-nums}.class-damage-item.is-mvp{border-color:#7aa9b4;background:#e4f8f2}
.result-mode .result-metrics{padding:8px 5px;gap:3px}.result-mode .result-metrics div{font-size:12px}.result-mode .result-metrics b{font-size:16px;margin-top:3px;white-space:nowrap}.result-details{text-align:left;margin-top:8px;font-size:12px;color:#45606a}.result-details summary{cursor:pointer;min-height:32px;padding:6px 0;text-align:center}.result-details .score-rows{padding:4px 10px}.result-actions{padding-top:5px;position:sticky;bottom:-16px;background:linear-gradient(#e9f3f500,#e9f3f5 20%);padding-bottom:2px}.result-actions>.primary{width:100%;min-width:0;min-height:48px;font-size:17px}.result-actions .feedback{margin:5px 0 0;display:block;color:#396777;font-size:12px}.mvp-empty{display:flex;flex-direction:column;justify-content:center;text-align:center;min-height:100px;height:auto;padding:18px 8px}.mvp-empty p{margin:0;font-size:16px}.mvp-empty small{font-size:12px;margin-top:6px;color:#55737c}
@keyframes mvp-arrival{from{opacity:0;transform:translateY(9px) scale(.95)}to{opacity:1;transform:none}}
@media(max-width:350px),(max-height:600px){.modal.result-mode{padding:10px}.result-mode .result-heading h2{font-size:16px;margin:2px 0}.result-heading .eyebrow{font-size:11px}.result-mode .result-score{margin:5px 0 0}.result-score>strong{font-size:32px}.result-mvp{height:150px;min-height:150px;grid-template-columns:43% minmax(0,1fr)}.mvp-copy h3{font-size:19px;margin:4px 0}.mvp-eyebrow{font-size:11px;letter-spacing:0}.mvp-copy .mvp-class{font-size:15px}.mvp-copy .mvp-damage{font-size:11px;margin-top:5px}.mvp-damage strong{font-size:22px}.class-damage{margin:0 0 6px}.class-damage-item{padding:2px 0}.class-damage-item img{width:27px;height:27px}.class-damage-item span{font-size:10px}.class-damage-item b{font-size:12px}.result-mode .result-metrics{padding:6px 3px}.result-mode .result-metrics div{font-size:11px}.result-mode .result-metrics b{font-size:14px}.result-details{margin-top:3px}.result-details summary{min-height:30px;padding:6px 0}.result-actions{bottom:-10px;padding-top:3px}.result-actions>.primary{min-height:44px;padding:8px;font-size:16px}.mvp-empty{height:auto;min-height:80px}}
@media(prefers-reduced-motion:reduce){.mvp-portrait{animation:none}}
.modal.result-mode .result-score{margin:8px 0 4px}
@media(max-width:350px),(max-height:600px){.modal.result-mode .result-score{margin:5px 0 0}}
.line-login{width:100%;min-height:48px;margin-bottom:8px;border:0;border-radius:10px;background:#06c755;color:#fff;font:700 16px inherit;box-shadow:0 3px 0 #04983f}.line-login-status{padding:10px;color:#4c6d70}.line-account{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;margin-bottom:8px;padding:7px 8px;border:1px solid #b8d8ce;border-radius:11px;background:#f8fffb;text-align:left}.line-account img{width:44px;height:44px;border-radius:50%;object-fit:cover}.line-account span{min-width:0}.line-account strong,.line-account small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-account strong{font-size:14px;color:#254f4e}.line-account small{margin-top:2px;font-size:11px;color:#56716f}.line-account .secondary{min-height:36px;padding:5px 9px;font-size:12px}
.rank-status,.rank-summary{margin:0 0 8px;padding:9px;border:1px solid #b8d8ce;border-radius:11px;background:#f8fffb;color:#315d5c;font-size:12px}.rank-status span,.rank-status strong{display:block;margin-bottom:5px}.rank-status button,.rank-summary button{width:100%;min-height:38px;padding:6px 10px}.rank-error{border-color:#e4b1b1;background:#fff7f7;color:#7f4141}.rank-summary{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:center}.rank-summary div{padding:5px;border-radius:8px;background:#e5f5ef}.rank-summary span{display:block;font-size:11px;color:#5d7775}.rank-summary strong{display:block;margin-top:2px;font-size:21px;color:#245f59;font-variant-numeric:tabular-nums}.rank-summary p{grid-column:1/-1;margin:2px 0;color:#4a6b68}.rank-summary button{grid-column:1/-1;background:#315f68;color:#fff}
.modal.leaderboard-mode{width:min(520px,100%);max-height:min(92dvh,760px);padding:15px;overflow:hidden;background:linear-gradient(155deg,#f3fcf8,#dcecf0);color:#183b50;text-align:center}.leaderboard-heading span{font-size:10px;letter-spacing:.2em;color:#53847b}.leaderboard-heading h2{margin:4px 0;font-size:22px}.leaderboard-heading p{margin:0 0 9px;font-size:12px;color:#60787d}.leaderboard-list{list-style:none;margin:0;padding:0;max-height:calc(min(92dvh,760px) - 170px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.leaderboard-row{display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:49px;padding:4px 8px;border-bottom:1px solid #bdd2d37d;text-align:left}.leaderboard-row.is-me{border:1px solid #5bb99a;border-radius:10px;background:#e0f6e9}.leaderboard-rank{text-align:center;font-size:17px;color:#557177}.leaderboard-row:nth-child(-n+3) .leaderboard-rank{color:#a06b16}.leaderboard-row img,.leaderboard-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover}.leaderboard-avatar{display:grid;place-items:center;background:#87cdb9;color:#173f42;font-size:13px;font-weight:800}.leaderboard-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.leaderboard-name small{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:8px;background:#49a981;color:#fff;font-size:9px}.leaderboard-row>strong:last-child{font-size:15px;font-variant-numeric:tabular-nums}.leaderboard-mine{margin:8px 0 0;padding:8px;border-radius:9px;background:#d8e9eb;font-size:13px;font-weight:700}.leaderboard-loading,.leaderboard-error,.leaderboard-empty{padding:38px 10px;color:#526f71;line-height:1.6}.leaderboard-error button{display:block;margin:10px auto 0}.leaderboard-close{width:100%;margin-top:10px;min-height:46px}
@media(max-width:350px),(max-height:600px){.rank-status,.rank-summary{margin-bottom:5px;padding:6px}.rank-summary strong{font-size:17px}.rank-summary p{font-size:11px}.modal.leaderboard-mode{padding:9px;max-height:96dvh}.leaderboard-heading h2{font-size:18px}.leaderboard-heading p{margin-bottom:5px}.leaderboard-list{max-height:calc(96dvh - 145px)}.leaderboard-row{grid-template-columns:25px 34px minmax(0,1fr) auto;gap:6px;min-height:41px;padding:3px 5px}.leaderboard-row img,.leaderboard-avatar{width:32px;height:32px}.leaderboard-close{margin-top:6px;min-height:42px}}

/* Phase 4A-1.1: Home/Lobby, Result Hub and reward status. */
.modal.lobby-mode{width:min(480px,100%);max-height:min(96dvh,800px);padding:22px 18px;background:linear-gradient(155deg,#f7fffa,#dceef0);overflow-y:auto}.lobby-heading>span{font-size:12px;letter-spacing:.24em;font-weight:850;color:#26786d}.lobby-heading h1{font-size:28px;margin:7px 0 2px}.lobby-heading p{margin:0 0 13px;font-weight:700}.lobby-account{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 10px;margin:9px 0;border:1px solid #b9d7d0;border-radius:12px;background:#fff9}.lobby-account img{width:44px;height:44px;border-radius:50%;object-fit:cover}.lobby-account span{min-width:0;flex:1}.lobby-account .secondary{margin:0}.lobby-account strong,.lobby-account small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-account small{margin-top:3px;color:#587373}.lobby-guest,.lobby-error{padding:8px;border-radius:9px;background:#e8f4ef;margin:8px 0!important}.lobby-error{background:#fff4e2;color:#735d39!important}.lobby-mode>.primary{width:100%;margin-top:5px}.lobby-links,.result-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.lobby-links button{background:#e6f3ef;color:#315d5c}.lobby-rewards{margin-top:12px;padding:11px;border-radius:13px;background:#fff9;border:1px solid #c7ddd5}.lobby-rewards h2{font-size:17px;margin:0 0 6px}.lobby-rewards ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}.lobby-rewards li{padding:7px;border-radius:8px;background:#e9f5ef;text-align:left}.lobby-rewards b,.lobby-rewards span{display:block;font-size:11px}.lobby-rewards span{margin-top:2px;color:#536e6d}.lobby-footer{font-size:11px;line-height:1.55;color:#5d7775;margin-top:10px}
.reward-status{grid-column:1/-1;padding:7px;border-radius:9px;background:#f8f1d8;color:#5e532e}.reward-status strong,.reward-status span,.reward-status small{display:block}.reward-status strong{font-size:14px}.reward-status span{font-size:11px;margin-top:3px}.reward-status small{font-size:9px;margin-top:6px;color:#786f50}.oa-status{display:grid;gap:4px;margin:0 0 8px;padding:8px;border-radius:10px;border:1px solid #d8c58f;background:#fff9e9;color:#66562e;text-align:left}.oa-status strong{font-size:12px}.oa-status span{font-size:10px;line-height:1.45}.oa-status button{margin-top:3px;min-height:36px;padding:5px;background:#06c755;color:#fff;border:0}.oa-status.is-friend{border-color:#a6d7bd;background:#edfbf2;color:#31654f}.oa-status.is-unknown{border-color:#c6d1d4;background:#f3f7f8;color:#53696f}.result-nav{grid-template-columns:1fr 1fr}.result-nav .primary{grid-column:1/-1;width:100%;min-width:0}.result-nav .secondary{width:100%;margin:0}.leaderboard-rank small{display:block;font-size:7px;white-space:nowrap;color:#8a6d2d}
@media(max-width:350px),(max-height:600px){.modal.lobby-mode{padding:12px}.lobby-heading h1{font-size:22px}.lobby-account{padding:6px}.lobby-rewards{padding:7px;margin-top:7px}.lobby-rewards li{padding:5px}.lobby-footer{margin-top:6px}.reward-status{padding:5px}.oa-status{padding:6px;margin-bottom:5px}.result-nav{gap:5px;margin-top:5px}.result-nav button{min-height:40px!important;font-size:13px!important}}

/* Phase 4A-1.1c: first-time tutorial and three-day leaderboard. */
.overlay.tutorial-overlay{background:#071925b8;backdrop-filter:blur(1px)}.modal.tutorial-mode{width:min(400px,calc(100% - 24px));max-height:min(86dvh,590px);padding:0;overflow:hidden;border:1px solid #b9e9dd;background:linear-gradient(150deg,#f7fffb,#dceff0);text-align:left}.tutorial-card{padding:20px}.tutorial-progress{display:flex;align-items:center;gap:10px;color:#48716d;font-size:11px;font-weight:800}.tutorial-progress i{position:relative;display:block;flex:1;height:5px;border-radius:9px;background:#bcd6d1;overflow:hidden}.tutorial-progress i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--tutorial-progress));background:#22a882}.tutorial-eyebrow{display:block;margin-top:16px;color:#23836f;font-size:11px;font-weight:850;letter-spacing:.14em}.tutorial-card h2{margin:5px 0 9px;color:#183f4d;font-size:25px}.tutorial-card p{margin:0;color:#49686c;font-size:15px;line-height:1.65}.tutorial-demo{display:flex;align-items:center;justify-content:center;gap:4px;margin:16px 0;padding:12px;border:1px dashed #73ae9d;border-radius:12px;background:#eaf8f2;color:#286355;text-align:center;font-size:13px;font-weight:750}.tutorial-demo img{width:44px;height:44px;object-fit:contain}.tutorial-actions{display:grid;grid-template-columns:1.35fr minmax(88px,.65fr);gap:9px}.tutorial-actions button{min-height:46px}.tutorial-skip{background:#edf4f2;color:#536f6d;border-color:#b8cfca}.tutorial-active .pad.tutorial-spotlight::before{display:block;opacity:1;border:2px solid #fff2a6;box-shadow:0 0 0 5px #58d8aa66,0 0 24px #ffef9f,inset 0 0 10px #fff3b088}.tutorial-active .resource.tutorial-spotlight,.tutorial-active #early.tutorial-spotlight{position:relative;z-index:22;outline:3px solid #fff1a1;box-shadow:0 0 0 5px #3bbd9466,0 0 24px #fff0a4}.tutorial-active .pad.tutorial-move-origin::after,.tutorial-active .pad.tutorial-move-target::after{display:grid;place-items:center;position:absolute;inset:-8px;border-radius:50%;color:#173f42;background:#fff6b9;font-size:10px;font-weight:900}.tutorial-active .pad.tutorial-move-origin::after{content:"起點"}.tutorial-active .pad.tutorial-move-target::after{content:"支援"}
.leaderboard-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0 0 9px}.leaderboard-tabs button{min-width:0;min-height:46px;padding:5px;border:1px solid #b7cfcd;background:#e8f2f1;color:#557171}.leaderboard-tabs b,.leaderboard-tabs small{display:block}.leaderboard-tabs b{font-size:13px}.leaderboard-tabs small{margin-top:2px;font-size:9px}.leaderboard-tabs button.is-selected{border-color:#278e77;background:#287f70;color:#fff;box-shadow:0 2px 7px #1c64523d}.leaderboard-player{display:block;min-width:0}.leaderboard-name-line{display:flex;align-items:center;min-width:0}.leaderboard-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.leaderboard-name-line>small{flex:none;margin-left:5px;padding:1px 5px;border-radius:8px;background:#49a981;color:#fff;font-size:9px}.leaderboard-reward{display:block;margin-top:2px;color:#7a6129;font-size:9px;line-height:1.2;white-space:normal}.leaderboard-row.rank-champion{border:1px solid #d4a936;border-radius:10px;background:linear-gradient(90deg,#fff4bf,#fffaf0)}.leaderboard-row.rank-silver{border:1px solid #aab9c3;border-radius:10px;background:linear-gradient(90deg,#edf4f7,#fff)}.leaderboard-row.rank-bronze{border:1px solid #c68b61;border-radius:10px;background:linear-gradient(90deg,#f8e4d5,#fff)}.leaderboard-row.rank-champion .leaderboard-rank,.leaderboard-row.rank-silver .leaderboard-rank,.leaderboard-row.rank-bronze .leaderboard-rank{font-size:21px}.leaderboard-row.rank-champion>strong:last-child{color:#87620d;font-size:17px}.leaderboard-list{max-height:calc(min(92dvh,760px) - 224px)}
@media(max-width:350px),(max-height:600px){.tutorial-card{padding:14px}.tutorial-eyebrow{margin-top:10px}.tutorial-card h2{font-size:20px}.tutorial-card p{font-size:13px;line-height:1.5}.tutorial-demo{margin:10px 0;padding:8px;font-size:11px}.tutorial-actions button{min-height:44px}.leaderboard-tabs{gap:3px;margin-bottom:5px}.leaderboard-tabs button{min-height:42px;padding:3px}.leaderboard-list{max-height:calc(96dvh - 190px)}.leaderboard-row{grid-template-columns:27px 32px minmax(0,1fr) auto;gap:5px}.leaderboard-reward{font-size:8px}.leaderboard-row.rank-champion .leaderboard-rank,.leaderboard-row.rank-silver .leaderboard-rank,.leaderboard-row.rank-bronze .leaderboard-rank{font-size:18px}}
@media(prefers-reduced-motion:no-preference){.tutorial-active .tutorial-spotlight{animation:tutorial-focus 1.4s ease-in-out infinite}@keyframes tutorial-focus{50%{filter:brightness(1.14)}}}@media(prefers-reduced-motion:reduce){.tutorial-active .tutorial-spotlight{animation:none}}

/* Phase 4A-1.1c.1: clearer tutorial cues and readable podium rows. */
.overlay.tutorial-overlay{background:#0b263a70;backdrop-filter:blur(.7px)}.modal.tutorial-mode{position:relative;z-index:22;background:rgba(245,252,250,.88);backdrop-filter:blur(10px);border-color:#d8fff2;box-shadow:0 18px 58px #031d306b,0 0 0 1px #ffffffb8}.tutorial-card{padding:22px 20px}.tutorial-card p{color:#294f55;font-weight:600}.tutorial-actions{margin-top:19px}.tutorial-skip{opacity:.78}.tutorial-cues{position:absolute;inset:0;z-index:21;overflow:hidden;pointer-events:none}.tutorial-cue{position:absolute;display:block;border-radius:16px;pointer-events:none;overflow:visible}.tutorial-pad-ring,.tutorial-move-ring,.tutorial-hud-ring,.tutorial-early-ring{border:3px solid #eaff8b;background:#caff6c26;box-shadow:0 0 0 5px #61ffba70,0 0 26px 10px #dfff72b8,inset 0 0 16px #fff}.tutorial-pad-ring::after,.tutorial-move-ring::after,.tutorial-hud-ring::after,.tutorial-early-ring::after{content:"";position:absolute;inset:-7px;border:2px solid #dfff91;border-radius:inherit;animation:tutorial-ring-wave 1.35s ease-out infinite}.tutorial-pad-ring{border-radius:50%;transform:scale(.75)}.tutorial-tap-pointer::before{content:attr(data-label);position:absolute;left:50%;top:50%;font-size:32px;filter:drop-shadow(0 2px 4px #163c4d);animation:tutorial-finger-tap 1.05s ease-in-out infinite}.tutorial-hud-ring{margin:-5px;padding:5px}.tutorial-hud-ring::before{content:attr(data-label);position:absolute;left:0;top:calc(100% + 10px);padding:5px 9px;border-radius:999px;background:#effff4;color:#245e50;box-shadow:0 3px 14px #0f493f55;font-size:12px;font-weight:900;white-space:nowrap}.tutorial-upgrade-mock{position:absolute;top:80px;left:12px;display:grid;grid-template-columns:auto auto auto auto;align-items:center;gap:5px;width:min(205px,54%);padding:9px;border:2px solid #dfff8f;border-radius:14px;background:#effff4e8;box-shadow:0 0 25px #b8ff9ba8;color:#28554e}.tutorial-upgrade-mock img{object-fit:contain}.tutorial-upgrade-mock>b{font-size:11px}.tutorial-coin-pop{position:absolute;right:8px;top:-20px;padding:3px 7px;border-radius:999px;background:#ffef91;color:#5b4a10;font-weight:900;animation:tutorial-coin-rise 1.25s ease-out infinite}.tutorial-flow-arrow{color:#179a76;font-size:23px;font-weight:900}.tutorial-evolution-choice{display:grid;place-items:center;padding:3px;border-radius:9px;background:#d3f4e6}.tutorial-evolution-choice b{font-size:10px}.tutorial-early-callout{position:absolute;right:10px;bottom:78px;max-width:190px;padding:7px 10px;border-radius:10px;background:#effff4ed;color:#26584e;border:2px solid #dcff8c;box-shadow:0 0 22px #ccff83a8;font-size:12px;font-weight:900}.tutorial-early-ring{margin:-5px;padding:5px;border-radius:12px}.tutorial-move-ring{margin:-6px;padding:6px;border-radius:50%}.tutorial-move-ring::before{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#f8ffb8d9;color:#24574e;font-size:13px;font-weight:950}.tutorial-moves-ring::before{top:calc(100% + 7px)}.tutorial-move-path{position:absolute;z-index:1;height:4px;transform-origin:left center;border-radius:5px;background:repeating-linear-gradient(90deg,#f9ff9c 0 12px,transparent 12px 19px);filter:drop-shadow(0 0 5px #dfff74)}.tutorial-move-path::after{content:"➜";position:absolute;right:-8px;top:-17px;color:#edff8b;font-size:30px;text-shadow:0 0 8px #57dca3}.tutorial-moving-guardian{position:absolute;z-index:2;width:54px;height:54px;margin:-27px;filter:drop-shadow(0 0 8px #dfff89);animation:tutorial-guardian-travel 2.15s ease-in-out infinite}.tutorial-moving-guardian img{width:54px;height:54px;object-fit:contain}
.leaderboard-row{grid-template-columns:44px 40px minmax(0,1fr) auto}.leaderboard-rank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1}.leaderboard-medal{font-size:18px;white-space:nowrap;filter:drop-shadow(0 1px 2px #6f55204d)}.leaderboard-rank-number{font-size:18px;font-variant-numeric:tabular-nums}.leaderboard-row.rank-champion,.leaderboard-row.rank-silver,.leaderboard-row.rank-bronze{min-height:62px}.leaderboard-row.rank-champion .leaderboard-medal{font-size:20px}.leaderboard-row.rank-champion .leaderboard-rank-number{font-size:26px;color:#8a6100}.leaderboard-row.rank-silver .leaderboard-rank-number{font-size:23px;color:#687781}.leaderboard-row.rank-bronze .leaderboard-rank-number{font-size:23px;color:#955b35}.leaderboard-reward{display:inline-block;width:max-content;max-width:100%;margin-top:4px;padding:3px 7px;border:1px solid #d9c477;border-radius:999px;background:#fff7d8;color:#68531f;font-size:11px;font-weight:800;line-height:1.25;white-space:normal}.leaderboard-name{font-size:14px;font-weight:750}
@keyframes tutorial-ring-wave{0%{opacity:.95;transform:scale(.82)}75%,100%{opacity:0;transform:scale(1.45)}}@keyframes tutorial-finger-tap{0%,100%{transform:translate(-25%,-5%) rotate(-18deg)}50%{transform:translate(-25%,8%) rotate(-18deg)}}@keyframes tutorial-coin-rise{0%{opacity:0;transform:translateY(8px)}35%,70%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}@keyframes tutorial-guardian-travel{0%,16%{transform:translate(0,0) scale(.9)}52%,66%{transform:translate(var(--move-x),var(--move-y)) scale(1.05)}100%{transform:translate(0,0) scale(.9)}}
@media(max-width:350px),(max-height:600px){.modal.tutorial-mode{width:calc(100% - 18px)}.tutorial-card{padding:15px 14px}.tutorial-actions{margin-top:12px}.tutorial-upgrade-mock{top:68px;left:6px;width:185px;padding:6px}.tutorial-upgrade-mock img{width:40px;height:40px}.tutorial-early-callout{right:6px;bottom:67px;font-size:11px}.leaderboard-row{grid-template-columns:39px 32px minmax(0,1fr) auto}.leaderboard-row.rank-champion,.leaderboard-row.rank-silver,.leaderboard-row.rank-bronze{min-height:57px}.leaderboard-row.rank-champion .leaderboard-rank-number{font-size:23px}.leaderboard-row.rank-silver .leaderboard-rank-number,.leaderboard-row.rank-bronze .leaderboard-rank-number{font-size:21px}.leaderboard-reward{font-size:10px;padding:2px 5px}.leaderboard-name{font-size:12px}}
@media(prefers-reduced-motion:reduce){.tutorial-pad-ring::after,.tutorial-move-ring::after,.tutorial-hud-ring::after,.tutorial-early-ring::after,.tutorial-tap-pointer::before,.tutorial-coin-pop,.tutorial-moving-guardian{animation:none}.tutorial-moving-guardian{transform:translate(var(--move-x),var(--move-y))}}

/* Phase 4A-1.1c.2: DOM-anchored early-wave cue and high-contrast first deployment guidance. */
.tutorial-early-callout{right:auto;bottom:auto;max-width:none;text-align:center;background:#effff4f5}.tutorial-disabled-mock{pointer-events:none!important;opacity:.92!important}#first-hint{color:#163e32;background:#fff7a8f5;border:2px solid #2d8069;box-shadow:0 4px 0 #1f5d4d,0 8px 22px #173d3d66;font-weight:900;font-size:13px}#first-hint::before{content:"☝";margin-right:5px}.pad.recommended::before{opacity:1!important;border:3px solid #fff58b!important;background:#dfff6055!important;box-shadow:0 0 0 6px #28ba8a70,0 0 28px 13px #eaff6ebd!important;animation:first-deploy-pulse 1.05s ease-in-out infinite!important}.pad.recommended::after{content:"☝"!important;display:block!important;inset:-23px -10px auto auto!important;color:#173f42!important;font-size:25px!important;opacity:1!important;filter:drop-shadow(0 2px 3px #fff);animation:first-deploy-hand 1.05s ease-in-out infinite}@keyframes first-deploy-pulse{50%{transform:scale(1.18);box-shadow:0 0 0 10px #28ba8a35,0 0 36px 17px #edff82e6}}@keyframes first-deploy-hand{50%{transform:translateY(5px)}}@media(prefers-reduced-motion:reduce){.pad.recommended::before,.pad.recommended::after{animation:none!important}}

/* Phase 4A-1.1c.2a: Step 3 uses one viewport coordinate system. */
.tutorial-viewport-cues{position:fixed;inset:0;z-index:30;overflow:hidden;pointer-events:none}.tutorial-viewport-cues .tutorial-cue{position:fixed}.tutorial-viewport-ring{margin:0;padding:0;transform:translate(-50%,-50%)}.tutorial-viewport-callout{position:fixed;right:auto;bottom:auto;max-width:none}.tutorial-viewport-callout[data-placement="above"]{transform:translate(-50%,-100%)}.tutorial-viewport-callout[data-placement="below"]{transform:translate(-50%,0)}.tutorial-step-early .modal.tutorial-mode{position:fixed;left:50%;top:50%;z-index:32;transform:translate(-50%,-50%)}

/* Phase 4A-1.1c.2b: the Step 3 mock shares the real arena control's bottom-right layout. */
.early-wave-control{position:absolute;right:8px;bottom:8px;z-index:9;min-width:120px;min-height:44px;max-width:156px;padding:6px 9px}.tutorial-early-mock{display:block;pointer-events:none;opacity:.92;background:#edf9d9ee;color:#47603d;border-color:#9fae81}.tutorial-early-mock b{display:block;font-size:12px}.tutorial-early-mock small{display:block;margin-top:2px;font-size:11px}

/* Phase 4A-1.1c.3: compact Result Hub and guest rank motivation. */
.result-mode .result-mvp{min-height:142px;height:clamp(142px,23dvh,200px)}.guest-rank-preview{display:grid;gap:2px;margin:0 0 7px;padding:7px 10px;border:1px solid #a9d9cc;border-radius:10px;background:linear-gradient(135deg,#eafaf4,#e5f5f5);color:#2c625d;text-align:left}.guest-rank-preview strong,.guest-rank-preview span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guest-rank-preview strong{font-size:14px}.guest-rank-preview span{font-size:11px;color:#50706c}.guest-rank-preview+.line-login{margin-top:0}@media(max-width:350px),(max-height:600px){.result-mode .result-mvp{min-height:128px;height:128px}.guest-rank-preview{margin-bottom:5px;padding:6px 8px}.guest-rank-preview strong{font-size:12px}.guest-rank-preview span{font-size:10px}}
/* Phase 5.1 local preview only. Keep official Crystal presentation unchanged. */
html[data-theme="neon_glass_city"] #arena {background:linear-gradient(#101c41,#294774);}
html[data-theme="neon_glass_city"] #arena::before {background-image:none;}
.prototype-home h1 {font-size:1.7rem;margin:.6rem 0;}
.prototype-home small {display:block;margin-top:1rem;color:#b7c8da;}
.prototype-home .primary {width:100%;margin-top:1rem;}

/* Gate 2 environment-only atmosphere; Crystal UI and colors are unchanged. */
html[data-theme="neon_glass_city"] #arena {background:radial-gradient(ellipse at 50% 25%,#31589a66,transparent 58%),radial-gradient(ellipse at 15% 80%,#6b56a744,transparent 58%),linear-gradient(#101e40,#254573 65%,#1b3458);}
html[data-theme="neon_glass_city"] #arena::before {background-image:radial-gradient(circle at 14% 10%,#d5f0ff 0 1px,transparent 1.5px),radial-gradient(circle at 73% 8%,#d5f0ff 0 1px,transparent 1.5px),radial-gradient(circle at 87% 26%,#c3daff 0 1px,transparent 1.5px);opacity:.65;}

html[data-theme="neon_glass_city"] #arena {background:#142d56;}
html[data-theme="neon_glass_city"] #arena::before {background:linear-gradient(#0d234b33,#10274b66),url('./assets/environment/neon-glass-city/city-backdrop.png') center/cover;opacity:1;filter:saturate(.78) brightness(.80);}

/* Keep the upper-left rift visible even when the Boss status is expanded. */
html[data-theme="neon_glass_city"] #boss-bar {left:auto;right:6px;top:6px;transform:none;width:49%;min-width:0;max-width:210px;background:#13284be8;color:#ecf7ff;border-color:#81b7d9;}
html[data-theme="neon_glass_city"] #boss-bar small {color:#c7daf4;}

html[data-theme="neon_glass_city"] #boss-bar span {display:block;white-space:nowrap;font-size:10px;}
html[data-theme="neon_glass_city"] #boss-bar #boss-hp {display:block;font-size:10px;margin-top:2px;}
/* Frosted-only presentation; legacy selectors and assets are unchanged. */
html[data-theme="frosted_garden"] #arena {background:radial-gradient(ellipse at 14% 20%,#f4e8f2 0,transparent 45%),radial-gradient(ellipse at 85% 75%,#ebfaf3 0,transparent 50%),linear-gradient(#a1c1d0,#d7e9e3 65%,#adced1);}
html[data-theme="frosted_garden"] #arena::before {background-image:radial-gradient(ellipse at 8% 70%,#f5fff7b0,transparent 35%),radial-gradient(ellipse at 94% 28%,#f5fff7c0,transparent 29%);opacity:1;filter:none;}
html[data-theme="frosted_garden"] #boss-bar {left:auto;right:6px;top:6px;transform:none;width:49%;min-width:0;max-width:210px;background:#edf7eeeF;color:#354e54;border-color:#b4c6b7;}
html[data-theme="frosted_garden"] #boss-bar span {display:block;white-space:nowrap;font-size:10px;}
html[data-theme="frosted_garden"] #boss-bar #boss-hp {display:block;font-size:10px;margin-top:2px;}
html[data-theme="frosted_garden"] #boss-bar small {color:#546d6a;}
html[data-theme="frosted_garden"] .pad {width:44px;height:44px;}
html[data-theme="frosted_garden"] .combat-pop {text-shadow:0 1px 2px #334b62,0 0 3px #334b62;}

/* Phase 5 additions only: accepted map selectors above remain byte-for-byte unchanged. */
html[data-theme="privacy_metro"] #arena{background:linear-gradient(#132037,#405170);}
html[data-theme="dust_skyport"] #arena{background:radial-gradient(ellipse at 15% 65%,#f4fafc 0,transparent 38%),linear-gradient(#91c1db,#dcecf0 70%,#b0ccd9);}
html[data-theme="crystal_forge"] #arena{background:radial-gradient(ellipse at 85% 45%,#efcda5 0,transparent 38%),linear-gradient(#a5bdca,#dce5e9 65%,#b0c4cf);}
html[data-theme="aurora_glass_temple"] #arena{background:linear-gradient(110deg,#233853,#547780 25%,#505575 45%,#637d8f 68%,#263d59);}
html:is([data-theme="privacy_metro"],[data-theme="dust_skyport"],[data-theme="crystal_forge"],[data-theme="aurora_glass_temple"]) #arena::before{background-image:radial-gradient(ellipse at 8% 75%,#f5fff733,transparent 32%),radial-gradient(ellipse at 92% 30%,#f5fff744,transparent 30%);opacity:1;filter:none;}
html:is([data-theme="privacy_metro"],[data-theme="dust_skyport"],[data-theme="crystal_forge"],[data-theme="aurora_glass_temple"]) .pad{width:44px;height:44px;}
html:is([data-theme="privacy_metro"],[data-theme="dust_skyport"],[data-theme="crystal_forge"],[data-theme="aurora_glass_temple"]) #boss-bar{left:auto;right:6px;top:6px;transform:none;width:49%;min-width:0;max-width:210px;background:#23334aed;color:#f2fcff;border-color:#9ec9d5;}
html:is([data-theme="privacy_metro"],[data-theme="dust_skyport"],[data-theme="crystal_forge"],[data-theme="aurora_glass_temple"]) #boss-bar span{display:block;white-space:nowrap;font-size:10px;}
html:is([data-theme="privacy_metro"],[data-theme="dust_skyport"],[data-theme="crystal_forge"],[data-theme="aurora_glass_temple"]) #boss-bar #boss-hp{display:block;font-size:10px;margin-top:2px;}
html:is([data-theme="privacy_metro"],[data-theme="dust_skyport"],[data-theme="crystal_forge"],[data-theme="aurora_glass_temple"]) #boss-bar small{color:#dbf0f6;}
/* Art revision 2 — world-specific atmosphere, static and inexpensive on mobile. */
html[data-theme="frosted_garden"] #arena{background:radial-gradient(ellipse at 22% 12%,#ddc3ea77,transparent 38%),radial-gradient(ellipse at 80% 66%,#7ccbb455,transparent 50%),linear-gradient(#325e72,#83b2a9 60%,#315d6e);}
html[data-theme="frosted_garden"] #arena::before{background:radial-gradient(ellipse at 0% 45%,#e9fff3aa,transparent 35%),radial-gradient(ellipse at 100% 80%,#dce9ff99,transparent 36%);}
html[data-theme="privacy_metro"] #arena{background:radial-gradient(ellipse at 52% 16%,#8162cf55,transparent 45%),linear-gradient(#080e23,#182340 65%,#090f23);}
html[data-theme="privacy_metro"] #arena::before{background:repeating-linear-gradient(90deg,transparent 0 49px,#72a9da0c 50px 51px),radial-gradient(ellipse at 7% 50%,#5277d455,transparent 28%);}
html[data-theme="dust_skyport"] #arena{background:radial-gradient(ellipse at 80% 6%,#ffe2a7aa,transparent 40%),linear-gradient(#376e9d,#77b5cf 48%,#d5e9ed);}
html[data-theme="dust_skyport"] #arena::before{background:radial-gradient(ellipse at 0% 55%,#f1f8ffe0,transparent 24%),radial-gradient(ellipse at 100% 76%,#f5ffffe0,transparent 29%),radial-gradient(ellipse at 15% 100%,#f8ffff,transparent 35%);}
html[data-theme="crystal_forge"] #arena{background:radial-gradient(ellipse at 50% 6%,#e8a15c88,transparent 35%),radial-gradient(ellipse at 100% 65%,#ee835c66,transparent 38%),linear-gradient(#283e4b,#526e79 55%,#293f51);}
html[data-theme="crystal_forge"] #arena::before{background:radial-gradient(ellipse at 5% 30%,#ffc67455,transparent 28%),radial-gradient(ellipse at 85% 92%,#e4b48666,transparent 32%);}
html[data-theme="aurora_glass_temple"] #arena{background:radial-gradient(ellipse at 60% 9%,#5263a366,transparent 48%),linear-gradient(#111c38,#293556 60%,#182640);}
html[data-theme="aurora_glass_temple"] #arena::before{background:linear-gradient(117deg,transparent 8%,#65e2c010 14%,#78f6db66 16%,#aa9bdf22 19%,transparent 24%,transparent 36%,#83dbe533 40%,#b5a0e455 42%,transparent 49%,transparent 70%,#77e3c355 76%,transparent 83%),radial-gradient(circle at 18% 14%,#d7edff 0 1px,transparent 2px),radial-gradient(circle at 72% 8%,#d7edff 0 1px,transparent 2px),radial-gradient(circle at 91% 33%,#d7edff 0 1px,transparent 2px);}
/* ART R3: production world backdrops, matching the accepted Day 1/2 layered presentation. */
html[data-theme="frosted_garden"] #arena::before{background:linear-gradient(#214d4a0a,#224b4518),url('./assets/environment/frosted-garden/world-backdrop-r3.webp') center/cover;opacity:1;filter:saturate(.82) brightness(.94);}
html[data-theme="privacy_metro"] #arena::before{background:linear-gradient(#17274110,#13234028),url('./assets/environment/privacy-metro/world-backdrop-r3.webp') center/cover;opacity:1;filter:saturate(.82) brightness(.84);}
html[data-theme="dust_skyport"] #arena::before{background:linear-gradient(#17394e08,#193e4c1c),url('./assets/environment/dust-skyport/world-backdrop-r3.webp') center/cover;opacity:1;filter:saturate(.82) brightness(.95);}
html[data-theme="crystal_forge"] #arena::before{background:linear-gradient(#19374510,#18344926),url('./assets/environment/crystal-forge/world-backdrop-r3.webp') center/cover;opacity:1;filter:saturate(.82) brightness(.88);}
html[data-theme="aurora_glass_temple"] #arena::before{background:linear-gradient(#1a2b4e10,#17244228),url('./assets/environment/aurora-glass-temple/world-backdrop-r3.webp') center/cover;opacity:1;filter:saturate(.83) brightness(.87);}

/* R4: three face-down talent cards; selection and reveal remain paused until confirmed. */
#modal.perk-mode{width:min(94vw,440px);padding:24px 16px;background:radial-gradient(ellipse at 50% 30%,#314969,#142138 70%);border:1px solid #bfcddd70;color:#eff8ff;border-radius:28px;box-shadow:0 25px 80px #03091299,inset 0 1px 0 #ffffff38;overflow:hidden}
.perk-draw{text-align:center}.perk-draw h2{margin:9px 0 7px;font-size:24px;color:#f2ead7}.perk-draw .eyebrow{font-size:11px;letter-spacing:.12em;color:#b3c6dd}.perk-draw-hint{font-size:13px;line-height:1.6;color:#c3d0e1;margin:0 0 20px}.perk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;perspective:900px;padding:6px 2px 16px}.mystery-card{position:relative;aspect-ratio:.62;min-width:0;padding:0;border:0;border-radius:15px;background:none;box-shadow:0 9px 16px #0005;cursor:pointer;-webkit-tap-highlight-color:transparent}.mystery-card:focus-visible{outline:3px solid #fff2b1;outline-offset:4px}.mystery-card:not(:disabled):hover{transform:translateY(-5px)}.card-rotator{position:absolute;inset:0;display:block;transform-style:preserve-3d}.card-back,.card-front{position:absolute;inset:0;border-radius:15px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.card-back{border:1px solid #d8c897;background:radial-gradient(ellipse at 35% 22%,#62799455,transparent 45%),linear-gradient(135deg,#233e61,#16253e 55%,#394769);box-shadow:inset 0 0 0 4px #1a304c,inset 0 0 0 5px #a99a7266}.card-back:before,.card-back:after{content:'';position:absolute;width:110%;height:75%;border:1px solid #c9b88240;border-radius:50%;transform:rotate(50deg)}.card-back:after{transform:rotate(-50deg)}.card-back-orbit{position:absolute;width:68%;aspect-ratio:1;border:1px solid #e4d09a80;border-radius:50%;box-shadow:0 0 18px #afc8e233,inset 0 0 16px #afc8e222}.card-back-gem{position:relative;color:#fff0be;font-size:47px;text-shadow:0 0 18px #ccdfffaa}.card-back-label{font-size:9px;letter-spacing:.24em;color:#d9d3b6;margin-top:4px}.card-back-number{position:absolute;bottom:12px;font-family:serif;color:#d1c49d;font-size:12px}.card-front{transform:rotateY(180deg);border:1px solid #f5dc9f;background:radial-gradient(ellipse at 50% 25%,#f7f0d9,#d6e8e7 65%,#8eafb9);color:#28495b;padding:8px;box-shadow:inset 0 0 0 4px #ffffff50}.card-front-icon{font-size:36px;color:#427481;margin-bottom:9px;text-shadow:0 2px 0 #fff}.card-front strong{font-size:13px;line-height:1.6}.card-front small{font-size:10px;margin-top:9px;color:#577984}.mystery-card.is-revealed{box-shadow:0 0 23px #ecd89b60;opacity:1}.mystery-card.is-revealed .card-rotator{transform:rotateY(180deg);animation:perk-flip .65s cubic-bezier(.2,.7,.2,1)}.mystery-card.is-unchosen{opacity:.40;transform:scale(.95)}.perk-reveal-result{min-height:96px;color:#f5ecd4;font-size:15px}.perk-reveal-result p{color:#cedce6;font-size:13px;margin:9px 0 17px;line-height:1.6}.perk-reveal-result>small{color:#aebfd0;font-size:11px}.perk-reveal-result .primary{width:100%;border-radius:15px;font-size:14px;background:linear-gradient(135deg,#f0dfb5,#cab279);color:#293b4d;border:1px solid #f2e7c4;min-height:46px}.perk-mode .is-revealed~.perk-reveal-result{animation:perk-result .8s ease-out}@keyframes perk-flip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}@keyframes perk-result{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mystery-card,.card-rotator{animation:none!important;transition:none!important}}
/* Review-only encounter cues: overlays never capture gameplay input. */
.encounter-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:12}.encounter-marker{position:absolute;transform:translate(-50%,-50%);width:68px;height:68px;border:2px solid #ffe6aa;border-radius:50%;display:grid;place-items:center;text-align:center;color:#fff3d6;font-size:11px;font-weight:800;text-shadow:0 1px 3px #18203b;background:radial-gradient(circle,transparent 42%,#ffe2a038);box-shadow:0 0 16px #fbd49760;animation:encounter-ring .8s ease-out infinite}.encounter-marker.warning{border:3px dashed #ffbe61;color:#fff;background:#9b471e40}.encounter-marker.seal{border-color:#cbbaff;background:#594a8b70;animation:none}.encounter-marker.summon{border-color:#8dffec;background:#49cabe30}.encounter-marker.active{width:90px;height:90px}.encounter-marker.death{width:100px;height:100px;border-color:#fff;animation:encounter-ring 1.2s ease-out}.encounter-aura{position:absolute;width:78px;height:78px;transform:translate(-50%,-50%);border:3px double #98eeff;border-radius:50%;box-shadow:0 0 17px #88dfff90,inset 0 0 12px #c6a7ff66;animation:encounter-glow 1.2s alternate infinite}.encounter-aura[data-phase="3"]{border-color:#dfbdff}.encounter-aura.final{box-shadow:0 0 24px #f6c0ff;animation-duration:.5s}.encounter-notice{position:absolute;top:112px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:6px 12px;border-radius:20px;background:#202c46e8;color:#f5dfb4;font-size:12px;font-weight:800;letter-spacing:1px;z-index:18;pointer-events:none;white-space:nowrap}.encounter-phase{display:block!important;font-size:10px!important;line-height:1.5;letter-spacing:0!important;white-space:normal;color:#d2efff!important}#boss-bar{pointer-events:none;max-width:calc(100% - 28px)}#boss-bar>div{background:linear-gradient(90deg,transparent 34.5%,#fff9 35%,transparent 35.5%,transparent 69.5%,#fff9 70%,transparent 70.5%),#20354d}#boss-bar>span{display:flex;justify-content:space-between;gap:6px}.intro-boss .intro-english{display:block;font-size:10px;letter-spacing:1px}.intro-knowledge{font-size:11px;line-height:1.45}.encounter-emphasis canvas{animation:encounter-camera .3s ease-out 2}@keyframes encounter-ring{from{opacity:1}to{opacity:.6;box-shadow:0 0 25px #fbd49720}}@keyframes encounter-glow{to{filter:brightness(1.4)}}@keyframes encounter-camera{25%{translate:1px 0}75%{translate:-1px 1px}}@media(max-width:350px){.encounter-notice{font-size:10px;top:108px}.encounter-phase{font-size:9px!important}.encounter-marker{width:58px;height:58px;font-size:10px}}@media(prefers-reduced-motion:reduce){.encounter-marker,.encounter-aura,.encounter-emphasis canvas{animation:none}}
/* Compact entrance remains below the fight; HP layout fits the 320px review viewport. */
.intro-card.intro-boss{position:absolute;bottom:8px;height:30%;max-height:190px;grid-template-columns:30% minmax(0,1fr);padding:8px 12px 8px 2px}.intro-boss .intro-title h2{font-size:20px}.intro-boss .intro-boss-traits{font-size:11px;margin-top:5px}.intro-boss .intro-trait{font-size:12px}.intro-boss .intro-eyebrow{font-size:11px;margin-bottom:4px}#boss-bar .encounter-phase{color:#514768!important}html[data-theme="neon_glass_city"] #boss-bar{left:14px;right:14px;top:6px;width:auto;max-width:none;transform:none}html[data-theme="neon_glass_city"] #boss-bar>span{display:flex;white-space:normal}html[data-theme="neon_glass_city"] #boss-bar .encounter-phase{color:#d2efff!important}@media(max-width:350px){.intro-boss .intro-title h2{font-size:18px}.intro-boss .intro-trait{font-size:11px}.intro-boss .intro-boss-traits{font-size:10px}}
.encounter-english{display:block;font-size:10px;line-height:1.25;letter-spacing:.04em;color:inherit;opacity:.88}#boss-bar{max-width:calc(100% - 28px)}.intro-monster .intro-english{font-size:10px;letter-spacing:.02em}.intro-monster .intro-title{gap:1px 6px}.intro-monster .intro-knowledge{font-size:11px;line-height:1.35}@media(max-width:350px){.encounter-english{font-size:9px}.intro-monster .intro-english{font-size:9px}.intro-monster .intro-knowledge{font-size:10px}}

/* Daily challenge metadata stays inside existing modal widths. */
.lobby-world{display:grid;gap:2px;margin:8px 0;font-size:14px;min-width:0}
.lobby-world strong,.lobby-world span,.lobby-world small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lobby-world small{font-size:11px;opacity:.75}
.result-world,.leaderboard-world{display:block;margin:3px 0 5px;font-size:11px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:350px){.lobby-world{font-size:13px;margin:5px 0;gap:1px}.result-world{font-size:10px}}