:root{--bg:#0b1115;--panel:#111b20;--mint:#a2f5c0;--text:#edf4ee;--muted:#91a5a3;--line:#9fc4ba20;--mono:"SFMono-Regular",Consolas,monospace;font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px}.hidden{display:none!important}.mint{color:var(--mint)}.eyebrow{font:9px var(--mono);letter-spacing:1.8px;line-height:1.5}.eyebrow i,.prototype-tag i,.game-footer i,.demo-disclosure i,.hero-stat i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);margin-right:8px;box-shadow:0 0 12px #baf9cf55}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:25px;padding:0 30px;background:#0e171b}.brand{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:22px;font-weight:650;letter-spacing:-.9px}.brand img{border-radius:6px}.brand-divider{width:1px;height:17px;background:#8cb2a838;margin:0 10px}.playground-word{font-size:12px;font-weight:400;letter-spacing:1px;color:#abbbb4}.prototype-tag{font-size:9px;color:#8fa9a0;letter-spacing:.5px}.top-actions{display:flex;align-items:center;gap:13px;margin-left:auto}.energy-button{display:flex;align-items:center;gap:9px;padding:8px 11px;background:#17302a;border:1px solid #8decba3b;border-radius:6px;min-height:36px}.energy-bolt{font-size:22px;color:var(--mint);line-height:1}.energy-button strong{font:16px var(--mono);color:#d8ffe2}.energy-button>span:not(.energy-bolt){font-size:9px;color:#9ac2af}.energy-button>b{font-size:13px;padding-left:10px;border-left:1px solid #93c2a935}.icon-button{width:33px;height:33px;border:1px solid #a4c2b82b;background:#12201e;border-radius:50%;font-size:15px;color:#a7bab2}.icon-button[aria-pressed="true"]{color:var(--mint);border-color:#a2f5c088}.game-shell{display:grid;grid-template-columns:minmax(0,1fr) 242px;gap:22px;max-width:1700px;margin:22px auto 0;padding:0 28px}.arena{position:relative;height:calc(100dvh - 143px);min-height:630px;max-height:960px;border:1px solid #75999440;border-radius:11px;overflow:hidden;background:#101e23;isolation:isolate}#arena{display:block;width:100%;height:100%;touch-action:none;outline-offset:-5px!important}.arena-corners{pointer-events:none;position:absolute;inset:9px;border:1px solid #96d3ba14;border-radius:4px;z-index:1}.lobby-overlay{position:absolute;inset:0;padding:47px 43px 30px;background:linear-gradient(90deg,#0d181de8 0%,#0e1c2199 58%,#0e1c2122);display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;z-index:5}.lobby-main{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;align-items:center;flex:1;padding-bottom:24px}.lobby-copy{position:relative;z-index:2}.lobby-copy>.eyebrow{color:#9bb9ae;font-size:8px;letter-spacing:1.4px}.lobby-copy h1{font-size:68px;letter-spacing:-5px;line-height:1.1;margin-top:27px;font-weight:650;white-space:nowrap}.lobby-copy h1>span{color:var(--mint)}.lobby-subtitle{font:11px var(--mono);letter-spacing:5.4px;color:#89a89d;margin-top:15px}.lobby-description{font-size:13px;line-height:1.95;color:#a2b7b1;margin-top:24px}.lobby-tags{display:flex;gap:9px;margin-top:19px}.lobby-tags>span{font-size:9px;letter-spacing:.8px;padding:5px 9px;border:1px solid #a6d3b925;border-radius:3px;color:#afc8bc}.primary-button,.secondary-button{display:flex;align-items:center;justify-content:center;gap:20px;min-height:48px;border-radius:6px;padding:13px 20px;border:1px solid transparent;font-size:12px;transition:background .18s,transform .18s}.primary-button{background:var(--mint);color:#0b261b;font-weight:600}.primary-button:hover:not(:disabled){background:#c5ffda;transform:translateY(-1px)}.primary-button>span:last-child{margin-left:auto;font-size:20px;line-height:1}.secondary-button{background:#152b26;border-color:#8aaf9c4a;color:#c6ded0}.secondary-button:hover{background:#214135}.start-button{width:255px;margin-top:29px}.start-button>span:first-child{font-size:14px}.start-note{font-size:9px;color:#789a8a;margin-top:13px;line-height:1.8}.resume-link{display:block;border:0;background:none;color:#c8f4d6;font-size:11px;padding:14px 0 0;line-height:1.6}.lobby-hero{position:relative;align-self:stretch;min-height:330px;isolation:isolate}.guardian-sprite{width:310px;height:310px;position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) rotate(8deg);background:url('/assets/game/creatures.webp') left top/200% 200%;filter:drop-shadow(0 0 35px #7eedb023);animation:float 7s ease-in-out infinite}.hero-rings{position:absolute;width:285px;height:285px;border:1px solid #8ed1b535;border-radius:50%;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-25deg) scaleY(.65)}.hero-rings:before,.hero-rings:after{content:"";position:absolute;inset:22px;border:1px dashed #b9d9c325;border-radius:50%}.hero-rings:after{inset:-35px;border-style:solid;border-color:#a3ddc111}.hero-caption{position:absolute;bottom:20px;left:0;right:0;font:7px var(--mono);letter-spacing:1.5px;text-align:center;color:#698c7f}.hero-stat{position:absolute;right:-5px;top:35px;background:#10251fe6;border:1px solid #8dd3ac33;border-radius:4px;font-size:10px;padding:9px 11px;color:#ceecd7;white-space:nowrap}.hero-stat>span{display:block;font-size:8px;margin-top:6px;color:#88ac97}.loadout-section{border-top:1px solid #96c6b329;padding-top:22px;position:relative;z-index:2}.loadout-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.loadout-heading>.eyebrow{font-size:9px;color:#a7c8b5}.loadout-heading>span:last-child{font-size:8px;color:#799387}.loadout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.loadout{position:relative;border:1px solid #93b7a52b;border-radius:5px;background:#101f1dce;padding:15px 10px;display:flex;align-items:center;gap:7px;text-align:left;min-width:0}.loadout.selected{border-color:#9df2bb8c;background:#1b352bbf}.loadout:hover{border-color:#acd8bc77}.loadout.locked{opacity:.53}.loadout img{width:35px;height:42px;object-fit:contain}.loadout strong{display:block;font-size:10px;font-weight:600}.loadout small{display:block;font-size:7px;color:#91a99b;margin-top:7px;white-space:nowrap}.loadout>b{position:absolute;top:8px;right:8px;font:7px var(--mono);color:#779386;font-weight:400} /* Live arena */ .hud{position:absolute;inset:24px 28px auto;display:flex;justify-content:space-between;gap:20px;z-index:3;pointer-events:none}.hud-label{font-size:9px;color:#aac4bb;display:block;letter-spacing:.7px}.health-block{width:176px}.hud-label>strong{float:right;font:9px var(--mono);color:#bddbc9}.health-track{height:6px;background:#092019;border:1px solid #b0e2c828;margin-top:9px;border-radius:2px;overflow:hidden}.health-track>span{display:block;height:100%;width:100%;background:#a2f5c0;transition:width .1s}.health-track>span.low{background:#ff8d98}.level-text{display:block;font:9px var(--mono);margin-top:8px;color:#8fc6a6}.wave-block{text-align:center;position:absolute;top:-4px;left:50%;transform:translateX(-50%)}.wave-block>strong{display:block;font:29px var(--mono);letter-spacing:-1px;line-height:1.1;margin-top:6px;text-shadow:0 2px 10px #000}.wave-block>span:last-child{display:block;font-size:8px;color:#9ab3aa;margin-top:6px;letter-spacing:2px}.kills-block{position:relative;text-align:right;padding-right:39px}.kills-block>strong{font:25px var(--mono);display:block;margin-top:5px}.kills-block>button{position:absolute;top:2px;right:0;pointer-events:auto;width:29px;height:33px;background:#0e211dd9;border:1px solid #a8cbb72a;border-radius:4px;color:#bad1c6;font-size:14px}.xp-track{height:3px;position:absolute;left:0;right:0;top:76px;background:#7cbac016;overflow:hidden;border-radius:2px}.xp-track>span{display:block;height:100%;width:0;background:#8cbeff;box-shadow:0 0 15px #729df9}.boss-hud{position:absolute;top:121px;left:25%;right:25%;z-index:3}.boss-hud>span{display:block;text-align:center;font-size:10px;color:#ffc2ab;letter-spacing:2px}.boss-hud b{font:8px var(--mono);margin-left:8px;letter-spacing:0}.boss-hud>div{height:5px;margin-top:7px;background:#b9524625}.boss-hud i{display:block;height:100%;background:#eeaa82;transition:width .1s}.wave-banner{position:absolute;top:160px;left:50%;transform:translate(-50%,-8px);background:linear-gradient(90deg,transparent,#101f2533 24%,#101f2533 76%,transparent);padding:7px 24px;text-shadow:0 1px 3px #000,0 0 9px #071710;text-align:center;pointer-events:none;z-index:7;opacity:0;transition:opacity .3s,transform .3s;width:max-content;max-width:min(540px,calc(100% - 32px))}.wave-banner.visible{opacity:1;transform:translate(-50%,0)}.wave-banner>strong{display:block;font-size:20px;font-weight:550;letter-spacing:2px;color:#d9f9e5}.wave-banner>span{display:block;font-size:11px;margin-top:4px;color:#d3e7dc;line-height:1.6}.combat-tip{position:absolute;bottom:24px;left:27px;font-size:10px;max-width:65%;color:#bfd2c7;background:#0c1a20ba;padding:9px 12px;pointer-events:none}.dash-button{position:absolute;bottom:23px;left:27px;width:63px;height:63px;background:#102b25b5;border:1px solid #a1e3bd85;border-radius:50%;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:1px;z-index:4;touch-action:none;box-shadow:0 0 15px #6bcca610}.dash-button>span{font-size:23px;line-height:1}.dash-button>strong{font-size:9px;font-weight:500}.dash-button>small{font:6px var(--mono);color:#83a997;letter-spacing:1px}.dash-button.cooldown{border-color:#7c948844;color:#849d91;background:#102019ba}.combat-tip:not(.hidden)~.dash-button{bottom:78px}.state-overlay{position:absolute;inset:0;z-index:12;background:#061014df;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:32px;overflow-y:auto}.upgrade-dialog{text-align:center;width:100%;max-width:900px}.upgrade-dialog>h2{font-size:28px;letter-spacing:-.9px;margin:16px 0 13px}.upgrade-dialog>p:not(.eyebrow){font-size:11px;color:#8fae9e}.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:31px}.upgrade-card{background:#112820;border:1px solid #8cbe9d55;border-radius:8px;padding:23px 18px 17px;display:flex;align-items:flex-start;flex-direction:column;position:relative;text-align:left;min-width:0;transition:transform .2s,border-color .2s,background .2s}.upgrade-card:hover{transform:translateY(-7px);border-color:#b2ffcc;background:#1c3a2a}.upgrade-card.is-relic>.upgrade-type{color:#ebd499}.upgrade-type{font-size:8px;letter-spacing:1px;color:#9cb9ac}.upgrade-card>img{height:79px;width:79px;object-fit:contain;align-self:center;margin:14px 0 17px}.upgrade-card>strong{font-size:17px;letter-spacing:-.4px}.upgrade-level{font:8px var(--mono);color:#a7dfbc;margin-top:9px}.upgrade-card>p{font-size:10px;line-height:1.8;color:#9eb7a9;margin-top:15px;min-height:56px}.upgrade-card>small{font-size:8px;margin-top:20px;padding-top:14px;width:100%;border-top:1px solid #a9c5b426;color:#cbe7d5}.keyboard-hint{display:block;color:#6f9784;font-size:9px;margin-top:25px;line-height:1.6}.pause-dialog,.result-dialog{text-align:center;width:100%;max-width:570px}.pause-dialog>h2,.result-dialog>h2{font-size:30px;margin:20px 0;line-height:1.5;letter-spacing:-.8px}.pause-dialog>p:not(.eyebrow),.result-dialog>p:not(.eyebrow){font-size:12px;line-height:1.9;color:#93ad9e}.pause-dialog>.primary-button{width:260px;margin:30px auto 13px}.pause-dialog>.secondary-button{width:260px;margin:0 auto}.result-dialog>.primary-button{margin:29px auto 0;min-width:270px;max-width:100%}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #bad7c526;padding:25px 0;margin:28px 0}.result-stats>div+div{border-left:1px solid #b9decd20}.result-stats strong{display:block;font:28px var(--mono);color:#d1f6dc}.result-stats span{display:block;font-size:10px;color:#8fab98;margin-top:10px}.result-build{font-size:10px;color:#8fae9d;line-height:2}#result-unlock{margin-top:14px;color:#9ff2b6}.loading-error{position:absolute;inset:0;background:#0b171bea;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;font-size:12px;text-align:center;padding:20px} /* Field guide */ .field-guide{min-width:0;max-height:calc(100dvh - 143px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#496357 transparent;padding:10px 2px 0 0}.guide-top>.eyebrow{font-size:8px;color:#718d83}.guide-top h2{font-size:22px;font-weight:550;letter-spacing:-.5px;margin-top:17px}.guide-top>p:not(.eyebrow){font-size:10px;color:#7f9a8c;line-height:1.9;margin-top:12px}.map-meta{margin-top:22px}.map-meta>span{display:flex;align-items:center;justify-content:space-between;font-size:9px;margin-top:9px;color:#718b7e}.map-meta b{font-size:9px;color:#b0c4b7;font-weight:400}.guide-section{border-top:1px solid var(--line);margin-top:25px;padding-top:22px}.guide-heading{display:flex;justify-content:space-between;align-items:center}.guide-section h3{font-size:11px;font-weight:500;color:#b4c8bc;letter-spacing:.7px}.guide-heading>span{font:8px var(--mono);color:#6d9280}.build-list{margin-top:15px}.empty-build{font-size:10px;line-height:1.9;color:#789084}.build-item{display:flex;gap:7px;align-items:center;padding:5px 0}.build-item>img{width:22px;height:24px;object-fit:contain}.build-item>span{font-size:10px;color:#a6c4b2}.build-item>b{font:8px var(--mono);color:#90a997;margin-left:auto}.synergy{padding:14px 0 0}.synergy>strong{font-size:10px;color:#839d8d;font-weight:400}.synergy>small{display:block;font-size:8px;line-height:1.7;color:#5f7e6d;margin-top:6px}.synergy.active>strong{color:#a5f4c0}.synergy.active>small{color:#95c2a8}.record-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:19px}.record-grid strong{font:23px var(--mono);color:#bbd1c3}.record-grid span{display:block;font-size:8px;color:#729080;margin-top:7px}.records>p{font-size:8px;color:#718d7a;line-height:1.8;margin-top:15px}.guide-controls{display:flex;flex-wrap:wrap;gap:12px 14px;border-top:1px solid var(--line);margin-top:25px;padding-top:18px;font-size:8px;color:#7d9989}.guide-controls kbd{font:7px var(--mono);padding:4px;background:#17251e;border:1px solid #6b8c772f;color:#a7c4af;border-radius:3px;margin-right:3px}.guide-controls>small{display:block;font-size:8px;line-height:1.8;color:#597a69}.game-footer{display:flex;align-items:center;gap:20px;max-width:1700px;margin:0 auto;padding:15px 30px 16px;color:#6e8d7e;font-size:8px}.game-footer button{background:none;border:0;padding:3px;color:#809b8c;font-size:8px;margin-left:auto}.game-footer>a{color:#a1bba8}.game-footer i{width:4px;height:4px;margin-right:5px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,12px);z-index:100;max-width:calc(100vw - 40px);width:max-content;background:#d7f6df;color:#133a23;padding:13px 20px;font-size:12px;line-height:1.7;box-shadow:0 5px 30px #0008;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)} /* Explicit demo exchange */ dialog{background:#101f21;border:1px solid #8eb8a957;border-radius:12px;color:var(--text);padding:33px;width:min(510px,calc(100% - 32px));max-height:calc(100dvh - 35px);overflow-y:auto}dialog::backdrop{background:#040b10c9;backdrop-filter:blur(9px)}.dialog-close{position:absolute;right:11px;top:9px;border:0;background:none;width:32px;height:32px;font-size:25px;color:#9abaae}dialog>h2{font-size:25px;font-weight:550;letter-spacing:-.7px;margin-top:15px;line-height:1.4}dialog>p:not(.eyebrow){font-size:11px;color:#91ada1;line-height:1.9;margin-top:14px}.demo-disclosure{display:flex;align-items:flex-start;gap:1px;background:#87c9a00d;border:1px solid #85b19528;padding:11px 12px;margin-top:21px;border-radius:5px}.demo-disclosure>i{flex-shrink:0;margin-top:5px}.demo-disclosure>span{font-size:9px;color:#a5b8a9;line-height:1.8}.exchange-types{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:23px}.exchange-type{background:#152b25;border:1px solid #8ab49d28;border-radius:6px;padding:13px 5px;display:flex;align-items:center;flex-direction:column;gap:6px}.exchange-type.selected{border-color:#a2edb6;box-shadow:inset 0 0 20px #8edf9a09}.exchange-type img{width:39px;height:46px;object-fit:contain}.exchange-type>span{font-size:11px}.exchange-type>small{font-size:8px;color:#8dab98}.exchange-quantity{display:flex;align-items:center;justify-content:space-between;margin-top:22px}.exchange-quantity>label{font-size:11px;color:#a4c2af}.exchange-quantity>div{display:flex;align-items:center;border:1px solid #9bb8a237;border-radius:5px;overflow:hidden}.exchange-quantity button{border:0;background:#20362b;width:35px;height:35px;color:#cee5d4}.exchange-quantity input{width:55px;height:35px;text-align:center;border:0;background:#0e2418;color:#d4f0db;font:13px var(--mono);appearance:textfield;-moz-appearance:textfield}.exchange-quantity input::-webkit-inner-spin-button{appearance:none}.exchange-preview{display:flex;justify-content:space-between;align-items:center;background:#0e181b;padding:18px;margin-top:20px;border-radius:6px;border:1px solid #86b29920}.exchange-preview>div>span{font-size:9px;color:#789e88;display:block}.exchange-preview strong{display:block;font:20px var(--mono);margin-top:10px;color:#aaf2c0}.exchange-preview>span{font-size:20px;color:#8cab98}.exchange-balance{font-size:9px!important;color:#85a48d!important;text-align:center}.form-error{color:#ffb7b4!important;min-height:16px;font-size:10px!important}#confirm-exchange{width:100%;margin-top:13px}.help-list{padding-left:19px;margin-top:23px}.help-list>li{padding-left:5px;margin-bottom:18px;color:#9bd8ad;font-size:12px}.help-list strong{font-size:12px;font-weight:500;color:#c1ddc9}.help-list p{font-size:10px;color:#8aaa95;line-height:1.9;margin-top:7px}#help-done{width:100%;margin-top:20px}.confirm-actions{display:flex;gap:13px;justify-content:flex-end;margin-top:26px}.confirm-actions button{min-width:100px}.confirm-actions .primary-button{background:#d6edbb} @keyframes float{0%,100%{transform:translate(-50%,-50%) rotate(6deg)}50%{transform:translate(-50%,-53%) rotate(10deg)}} @media(min-width:1600px){.lobby-copy h1{font-size:84px}.lobby-copy>.eyebrow{font-size:9px}.lobby-hero .guardian-sprite{width:380px;height:380px}.lobby-description{font-size:14px}.lobby-overlay{padding-inline:60px}.loadout{padding-block:19px}.loadout strong{font-size:12px}.loadout small{font-size:9px}} @media(max-width:1250px){.game-shell{grid-template-columns:minmax(0,1fr) 210px;gap:18px;padding-inline:20px}.lobby-overlay{padding:32px 29px 25px}.lobby-copy h1{font-size:55px;letter-spacing:-3px}.lobby-copy>.eyebrow{font-size:7px;letter-spacing:1px}.lobby-subtitle{font-size:9px;letter-spacing:4px}.lobby-description{font-size:11px}.lobby-hero .guardian-sprite{width:240px;height:240px}.hero-rings{width:215px;height:215px}.hero-stat{right:-10px;top:55px;font-size:8px}.hero-stat>span{font-size:7px}.loadout-grid{gap:8px}.loadout{padding:14px 7px}.loadout img{width:29px}.loadout small{font-size:6px}.loadout strong{font-size:9px}.hero-caption{font-size:6px;letter-spacing:1px}.arena{min-height:590px}.upgrade-card{padding:20px 14px 15px}.upgrade-card>strong{font-size:15px}.upgrade-card>p{font-size:9px}.field-guide{max-height:calc(100dvh - 140px)}} @media(max-width:1000px){.topbar{padding-inline:21px;gap:18px}.game-shell{grid-template-columns:1fr;padding-inline:20px}.field-guide{max-height:none;overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:5px}.guide-top{display:none}.guide-section{margin:0;padding:20px 5px}.guide-controls{margin:0;padding:20px 5px}.synergy-guide{grid-row:span 2}.playing .field-guide{display:none}.arena{height:calc(100dvh - 136px);min-height:600px}.lobby-copy h1{font-size:68px}.lobby-copy>.eyebrow{font-size:8px}.guardian-sprite{width:290px!important;height:290px!important}.lobby-hero{min-height:340px}.hero-stat{top:40px;font-size:10px}.hero-stat>span{font-size:8px}.loadout strong{font-size:11px}.loadout small{font-size:8px}.loadout img{width:39px}.loadout{gap:9px;padding:16px 12px}.loadout-grid{gap:13px}.loadout>b{font-size:8px}.game-footer{padding-inline:20px}.prototype-tag{font-size:8px}.brand-divider{margin-inline:5px}.playground-word{font-size:11px}.lobby-description{font-size:13px}.field-guide .records{grid-column:1}.guide-controls{grid-column:1/-1}.guide-heading>span{font-size:9px}.empty-build{font-size:11px}.guide-section h3{font-size:12px}.synergy>strong{font-size:11px}.synergy>small{font-size:9px}} @media(max-width:680px){.topbar{height:61px;padding:0 14px;gap:0}.brand{font-size:20px}.brand img{width:26px;height:26px}.brand-divider,.playground-word{display:none}.prototype-tag{display:none}.top-actions{gap:8px}.energy-button{padding:7px 8px;gap:6px;min-height:32px}.energy-button>span:not(.energy-bolt){display:none}.energy-button strong{font-size:14px}.energy-bolt{font-size:20px}.energy-button>b{padding-left:7px;font-size:11px}.icon-button{height:28px;width:28px;font-size:12px}.game-shell{padding:0 10px;margin-top:11px;gap:10px}.arena{height:calc(100dvh - 118px);min-height:620px;max-height:none;border-radius:8px}.playing .arena{height:calc(100dvh - 110px);min-height:450px}.lobby-overlay{padding:31px 23px 24px;justify-content:flex-start}.lobby-main{display:block;flex:1;position:relative;padding-bottom:30px}.lobby-copy>.eyebrow{font-size:6px;letter-spacing:.7px;white-space:nowrap}.lobby-copy h1{font-size:53px;letter-spacing:-3px;margin-top:26px}.lobby-subtitle{font-size:8px;letter-spacing:3.8px;margin-top:14px}.lobby-description{font-size:12px;margin-top:25px;text-shadow:0 0 15px #0c161b}.lobby-tags{gap:7px;margin-top:16px}.lobby-tags>span{font-size:8px;padding:5px 7px;background:#0b1e18bb}.start-button{width:219px;margin-top:25px;min-height:46px}.start-button>span:first-child{font-size:13px}.start-note{font-size:8px;max-width:220px;margin-top:14px;line-height:1.9}.lobby-hero{position:absolute;right:-65px;bottom:-16px;width:230px;height:230px;min-height:0;z-index:0;opacity:.26;pointer-events:none}.lobby-hero .guardian-sprite{width:240px!important;height:240px!important;top:50%}.hero-stat,.hero-caption{display:none}.hero-rings{top:60%}.loadout-section{padding-top:18px;margin-top:0}.loadout-heading{display:block;margin-bottom:12px}.loadout-heading>.eyebrow{font-size:8px}.loadout-heading>span:last-child{display:block;font-size:7px;margin-top:7px}.loadout-grid{gap:7px}.loadout{display:flex;flex-direction:column;text-align:center;align-items:center;padding:14px 3px 12px;gap:8px}.loadout img{width:33px;height:40px}.loadout strong{font-size:9px;white-space:nowrap}.loadout small{font-size:6px;margin-top:6px;white-space:normal;line-height:1.7}.loadout>b{font-size:6px;right:5px;top:5px}.field-guide{padding:0 8px;gap:15px}.guide-section{padding-top:18px}.synergy-guide{grid-row:span 2}.game-footer{padding:12px 13px 18px;gap:9px;flex-wrap:wrap;line-height:1.6;font-size:7px}.game-footer>span{flex-basis:100%;font-size:7px}.game-footer button{margin-left:0;font-size:7px}.game-footer>a{margin-left:auto;font-size:7px}.playing .game-footer{padding-block:8px}.playing .game-footer>span{flex-basis:auto;font-size:6px}.playing .game-footer button{display:none}.playing .game-footer>a{font-size:6px}.hud{inset:18px 17px auto;gap:12px}.health-block{width:111px}.hud-label{font-size:7px;letter-spacing:.2px}.hud-label>strong{font-size:7px}.health-track{height:5px;margin-top:8px}.level-text{font-size:8px;margin-top:7px}.wave-block{top:-1px;left:53%}.wave-block>strong{font-size:24px;margin-top:6px}.wave-block>span:last-child{font-size:7px;letter-spacing:1px;margin-top:7px}.kills-block{padding-right:26px}.kills-block>strong{font-size:20px;margin-top:7px}.kills-block>button{width:22px;height:27px;font-size:12px}.xp-track{top:69px;height:2px}.boss-hud{top:112px;left:15%;right:15%}.boss-hud>span{font-size:8px;letter-spacing:1px}.boss-hud b{font-size:7px}.wave-banner{top:146px;padding:6px 15px}.wave-banner>strong{font-size:17px;letter-spacing:1px}.wave-banner>span{font-size:10px;max-width:270px}.dash-button{width:66px;height:66px;left:auto;right:23px;bottom:24px}.dash-button>small{display:none}.dash-button>span{font-size:25px}.dash-button>strong{font-size:10px}.combat-tip{left:15px;bottom:22px;max-width:58%;font-size:8px;line-height:1.7;padding:7px 9px}.combat-tip:not(.hidden)~.dash-button{bottom:24px}.state-overlay{padding:23px 17px}.upgrade-dialog>h2{font-size:23px;line-height:1.5;margin:12px 0}.upgrade-dialog>p:not(.eyebrow){font-size:10px}.upgrade-dialog>.eyebrow{font-size:8px}.upgrade-grid{grid-template-columns:1fr;gap:11px;margin-top:21px}.upgrade-card{display:grid;grid-template-columns:57px 1fr;column-gap:12px;padding:13px 14px;min-height:112px}.upgrade-type{grid-column:2;grid-row:1;font-size:7px;line-height:1.3}.upgrade-card>img{grid-column:1;grid-row:1/5;width:56px;height:68px;margin:0;align-self:center}.upgrade-card>strong{grid-column:2;grid-row:2;font-size:16px;margin-top:5px}.upgrade-level{position:absolute;right:13px;top:13px;font-size:7px;margin:0}.upgrade-card>p{grid-column:2;grid-row:3;font-size:9px;min-height:0;margin-top:7px;line-height:1.6}.upgrade-card>small{display:none}.keyboard-hint{font-size:8px;margin-top:19px}.upgrade-dialog>.keyboard-hint{display:none}.pause-dialog>h2,.result-dialog>h2{font-size:25px;line-height:1.4}.pause-dialog>p:not(.eyebrow),.result-dialog>p:not(.eyebrow){font-size:11px}.pause-dialog>.primary-button,.pause-dialog>.secondary-button{width:240px;max-width:100%}.result-stats{padding-block:20px;margin:23px 0}.result-stats strong{font-size:25px}.result-stats span{font-size:9px}.result-build{font-size:9px}.result-dialog>.primary-button{min-width:0;width:100%;padding-inline:14px;font-size:11px;gap:12px}.result-dialog>.primary-button>span{font-size:16px}dialog{padding:29px 22px;width:calc(100% - 26px)}dialog>h2{font-size:24px}dialog>.eyebrow{font-size:8px}.demo-disclosure{padding:10px}.demo-disclosure>span{font-size:8px}.exchange-types{gap:7px;margin-top:20px}.exchange-type{padding:10px 3px}.exchange-type img{width:34px;height:42px}.exchange-type>span{font-size:10px}.exchange-type>small{font-size:8px}.exchange-preview{padding:15px}.exchange-preview strong{font-size:20px}.exchange-balance{font-size:8px!important}.help-list p{font-size:10px}.toast{font-size:10px;padding:11px 14px;bottom:18px}} @media(max-width:374px){.lobby-overlay{padding-inline:18px}.lobby-copy h1{font-size:47px}.lobby-copy>.eyebrow{font-size:5.5px;letter-spacing:.5px}.lobby-subtitle{letter-spacing:3.2px}.lobby-description{font-size:11px}.loadout strong{font-size:8px}.loadout small{font-size:5.5px}.health-block{width:96px}.kills-block>strong{font-size:18px}.wave-block>strong{font-size:21px}.wave-block{left:53%}.arena{min-height:600px}.upgrade-card{padding:11px;grid-template-columns:46px 1fr;gap:0 9px}.upgrade-card>img{width:45px;height:58px}.upgrade-card>strong{font-size:14px}.upgrade-level{font-size:6px}.upgrade-dialog>h2{font-size:21px}.upgrade-card>p{font-size:8px}.brand{font-size:18px}.topbar{padding-inline:12px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}} .difficulty-select{display:flex;gap:6px;margin-top:19px}.difficulty-select>button{border:1px solid #a7cbb325;border-radius:4px;background:#101e19;padding:6px 9px;font-size:8px;color:#879f8e}.difficulty-select>button[aria-pressed="true"]{background:#284533;color:#d1f6dc;border-color:#aedaba66}.difficulty-select>button[aria-disabled="true"]{opacity:.6}.difficulty-select+.start-button{margin-top:20px}@media(max-width:680px){.difficulty-select{margin-top:15px}.difficulty-select>button{font-size:7px;padding:5px 8px}.lobby-overlay{padding-top:25px}.lobby-description{margin-top:19px}.lobby-main{padding-bottom:22px}.difficulty-select+.start-button{margin-top:18px}} /* V2: the arena owns the screen while the field journal is closed. */ #journal-close{display:none}.playing .game-shell{grid-template-columns:minmax(0,1fr)}.playing .field-guide{display:none}.playing.journal-visible .field-guide{display:block;position:fixed;z-index:30;right:18px;top:80px;bottom:24px;width:min(340px,calc(100vw - 36px));max-height:none;overflow:auto;background:#10201e;border:1px solid #648b7766;border-radius:12px;padding:22px;box-shadow:0 20px 90px #000b}.playing.journal-visible #journal-close{display:block;width:100%;margin-bottom:22px}.playing.journal-visible .guide-top{display:block}.playing.journal-visible .guide-section{margin-top:20px}.playing .arena{max-height:none}@media(max-width:680px){.top-actions{gap:5px}.playing.journal-visible .field-guide{top:72px;bottom:14px}} .loadout-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.skill-button{position:absolute;z-index:5;bottom:30px;right:126px;width:68px;height:68px;border:1px solid #94d4bc77;border-radius:50%;background:#163b34dd;color:#c3fbe0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;touch-action:none}.skill-button>span{font-size:17px}.skill-button>strong{font-size:11px}.upgrade-actions{display:flex;gap:12px;justify-content:center;margin-top:15px}.upgrade-actions button{font-size:11px;padding:8px 12px}.loadout strong{white-space:normal}@media(max-width:680px){.skill-button{right:105px;bottom:30px;width:55px;height:55px}.loadout strong{font-size:9px}.loadout small{font-size:6px}.upgrade-actions{gap:8px}.upgrade-actions button{font-size:9px}.upgrade-dialog{max-height:100%;overflow:auto}.lobby-overlay{padding-bottom:18px}} .playing .dash-button{left:auto;right:30px}.playing .skill-button{right:126px}@media(max-width:680px){.playing .dash-button{right:23px}.playing .skill-button{right:105px}} .character-picker{display:flex;align-items:center;gap:10px;font-size:10px;color:#b7cfc2;margin-top:18px}.character-picker select{max-width:210px;border:1px solid #92b8a544;border-radius:4px;color:#d2f4df;background:#13271f;padding:7px;font:inherit}.character-picker+.difficulty-select{margin-top:12px}@media(max-width:680px){.character-picker{font-size:8px;margin-top:12px;gap:6px}.character-picker select{max-width:176px;padding:5px}.lobby-main{padding-bottom:14px}.lobby-description{margin-top:15px}.lobby-copy h1{margin-top:20px}.loadout-section{padding-top:12px}} .playing .dash-button{bottom:30px}@media(max-width:680px){.playing .dash-button{bottom:24px}} .lobby-hero.emerald-guardian .guardian-sprite{background-image:url(/assets/website/guardian-emerald.webp);background-size:contain;background-position:center;background-repeat:no-repeat}.lobby-hero.emerald-guardian .hero-caption{font-size:0}.lobby-hero.emerald-guardian .hero-caption::after{content:"翠晶守护者 / 本机试玩";font-size:9px} /* Three expeditions retain the established dark crystal visual system. */ .map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px}.map-card{text-align:left;border:1px solid #91bda63b;border-radius:5px;padding:13px 10px;background:#102420;min-width:0}.map-card[aria-pressed=true]{border-color:#a2f5c0;background:#204538}.map-card[aria-disabled=true]{opacity:.48}.map-card small{display:block;font:7px var(--mono);letter-spacing:1px;color:#83b5a0}.map-card strong{display:block;font-size:13px;margin:8px 0}.map-card span{font-size:8px;color:#acc5b8}.map-description,.character-description{font-size:11px;line-height:1.8;color:#9dbbab;margin-top:10px;max-width:520px}.lobby-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}.lobby-links button{border:0;border-bottom:1px solid #81a98e44;padding:6px 0;background:none;color:#b3d7bf;font-size:10px}.lobby-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}.lobby-overlay{padding-top:30px}.lobby-copy h1{margin-top:16px;font-size:58px}.lobby-hero{min-height:360px}.lobby-description{margin-top:14px}.loadout-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.loadout{min-height:64px}.loadout small{white-space:normal}.loadout-section{padding-top:16px}.loadout-heading{flex-wrap:wrap}#catalog-dialog{width:min(820px,calc(100vw - 28px));max-height:85dvh;overflow:auto}#catalog-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}#catalog-content article{padding:18px;background:#11251f;border:1px solid #a1c9b522;border-radius:6px}#catalog-content h3{font-size:14px;margin-bottom:10px;color:#cdf4d9}#catalog-content p{font-size:11px;line-height:1.9;color:#a7bdb1}#result-next{margin:0 auto 12px;min-width:260px}.lobby-hero .guardian-sprite{background-repeat:no-repeat}.lobby-hero.emerald-guardian .hero-caption{font-size:9px}.lobby-hero.emerald-guardian .hero-caption::after{content:none} @media(max-width:1050px){.lobby-main{grid-template-columns:minmax(0,1fr)}.lobby-hero{display:none}.lobby-copy{max-width:650px}.lobby-copy h1{font-size:52px}.lobby-overlay{padding:28px}.loadout-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:680px){.lobby-overlay{padding:22px 18px}.lobby-copy h1{font-size:46px}.lobby-main{padding-bottom:22px}.lobby-description{font-size:11px}.map-grid{margin-top:18px;gap:5px}.map-card{padding:10px 7px}.map-card strong{font-size:12px}.map-card small{font-size:6px;letter-spacing:.4px}.map-card span{font-size:7px}.map-description,.character-description{font-size:10px}.lobby-links{gap:12px}.loadout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.loadout strong{font-size:12px}.loadout small{font-size:9px}.loadout{padding:12px}.loadout-heading>span:last-child{font-size:9px}.character-picker{font-size:10px}.start-button{width:100%}.lobby-copy>.eyebrow{font-size:7px}#catalog-content{grid-template-columns:1fr}.upgrade-level{position:static;grid-column:2;margin-top:5px}.upgrade-card>p{grid-row:4}.upgrade-card>img{grid-row:1/5}} .equipment-icon{display:inline-block;width:42px;height:42px;flex:0 0 42px;background-repeat:no-repeat;background-position:0 0}.loadout>.equipment-icon{width:38px;height:38px;flex-basis:38px}.build-item>.equipment-icon{width:28px;height:28px;flex-basis:28px}.upgrade-card>.equipment-icon{display:block;width:72px;height:72px;margin:18px 0}.skill-button>.equipment-icon{width:30px;height:30px;flex-basis:30px}.skill-button>strong{font-size:9px}#catalog-content .equipment-icon{float:right;width:50px;height:50px;margin:0 0 10px 10px}@media(max-width:680px){.upgrade-card>.equipment-icon{grid-column:1;grid-row:1/5;width:50px;height:50px;margin:0;align-self:center}.skill-button>.equipment-icon{width:23px;height:23px;flex-basis:23px}.skill-button{gap:2px}} .catalog-portrait{height:120px;width:120px;background-repeat:no-repeat;background-position:left top;margin:0 auto 15px}.lobby-hero .hero-caption{line-height:1.7} @media(max-width:374px){.topbar{padding:0 10px;gap:6px}.brand{font-size:17px;gap:5px}.brand img{width:24px;height:24px}.top-actions{gap:5px}.icon-button{width:27px;height:27px}.energy-button{gap:4px;padding:6px}.energy-button>b{padding-left:5px}} /* Fixed square atlas cells: a column flex basis used to compress 72px art to 42px. */ .upgrade-card>.equipment-icon{flex:0 0 auto;aspect-ratio:1;align-self:center} @media(max-width:680px){.upgrade-card>.equipment-icon{justify-self:center}} @media(max-width:374px){.upgrade-card>.equipment-icon{width:44px;height:44px}} .scene3d-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} .scene3d .lobby-hero{visibility:hidden}.scene3d .lobby-overlay{background:linear-gradient(90deg,#0c1d22f0,#0c1d2255)} .scene3d .lobby-copy{max-width:460px}.scene3d .prototype-tag{color:#b7e4ca} /* Phone combat fills the usable viewport; safe areas keep controls off the notch. */ .display-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}.display-controls .secondary-button{width:auto;margin:0;padding:10px 16px;min-height:44px}.display-controls label{font-size:12px;color:var(--muted)}.display-controls select{font:inherit;color:var(--text);background:#153027;border:1px solid #8decba55;border-radius:6px;min-height:44px;padding:8px}.screen-note{font-size:11px!important;line-height:1.7!important;color:#a4b8b0;margin-top:12px!important;max-width:460px}.pause-dialog .display-controls{justify-content:center} @media(pointer:coarse),(max-width:680px){ body.playing{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;height:var(--game-height,100dvh)} .playing .topbar,.playing .game-footer{display:none} .playing .game-shell{display:block;position:absolute;inset:0;max-width:none;margin:0;padding:0} .playing .arena{width:100%;height:100%;min-height:0;max-height:none;border:0;border-radius:0} .playing .hud{top:calc(18px + env(safe-area-inset-top));left:calc(17px + env(safe-area-inset-left));right:calc(17px + env(safe-area-inset-right))} .playing .boss-hud{top:calc(112px + env(safe-area-inset-top))} .playing .dash-button,.playing .skill-button{bottom:calc(24px + env(safe-area-inset-bottom))} .playing .dash-button{right:calc(23px + env(safe-area-inset-right))}.playing .skill-button{right:calc(105px + env(safe-area-inset-right))} .playing .state-overlay{padding:calc(20px + env(safe-area-inset-top)) calc(17px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(17px + env(safe-area-inset-left));align-items:safe center} .playing .toast{bottom:calc(18px + env(safe-area-inset-bottom))} } @media(pointer:coarse) and (orientation:landscape){.playing .hud{top:calc(10px + env(safe-area-inset-top))}.playing .boss-hud{top:85px}.playing .wave-banner{top:106px}.playing .combat-tip{display:none}.playing .pause-dialog{padding-block:5px}.playing .pause-dialog h2{font-size:24px}.playing .pause-dialog p{margin-block:10px}} .pause-tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}.pause-tools .secondary-button{font-size:11px;padding:8px 10px} /* R16 binding feedback shares the equipment footprint and never intercepts movement outside it. */ .relic-feedback{position:absolute;bottom:calc(100% + 7px);left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;padding:6px 9px;border:1px solid #91b9a766;border-radius:5px;background:#0a211df0;color:#d8ebdf;pointer-events:auto;touch-action:manipulation;text-align:left;box-shadow:0 2px 7px #0004} .relic-feedback-pair{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;line-height:16px} .relic-feedback-status{flex:none;font:10px/16px var(--mono);color:#b2cbbd;font-weight:500;white-space:nowrap} .relic-feedback[data-state="marked"]{border-color:#b6dec28c}.relic-feedback[data-state="marked"] .relic-feedback-status{color:#d5f4dd} .relic-feedback[data-state="triggered"]{background:#254d3df5;border-color:#d1ffe0;box-shadow:0 0 9px #b5f6ce35}.relic-feedback[data-state="triggered"] .relic-feedback-status{color:#e4ffea} .relic-feedback:focus-visible{outline:2px solid #e0f6e7;outline-offset:3px}.slot-resonance{position:absolute;left:2px;bottom:14px;z-index:1;padding:0 2px;border-radius:2px;background:#09221eeb;color:#e1f6e8;font:11px/12px var(--mono)} /* Combat equipment stays below the field of play; details still pause combat. */ .equipment-hud{position:absolute;z-index:4;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:flex-start;gap:10px;width:max-content;max-width:calc(100% - 32px);pointer-events:none} .equipment-group{display:flex;flex-direction:column;gap:5px;pointer-events:none}.equipment-heading{font-size:9px;line-height:1;color:#c1ddcd;letter-spacing:1px;text-shadow:0 1px 3px #000}.equipment-heading b{font:8px var(--mono);color:#91b8a5;margin-left:3px}.equipment-slots{display:flex;gap:4px}.equipment-slot{position:relative;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:47px;height:53px;padding:3px 1px;border:1px solid #a4d3b85c;border-radius:5px;background:linear-gradient(150deg,#234435ed,#091e1ded);box-shadow:0 2px 8px #0005,inset 0 1px #d5ffe00d;touch-action:manipulation;overflow:hidden}.equipment-slot:hover{border-color:#d4ffe0;background:#2b5041}.equipment-slot>.equipment-icon{width:30px;height:30px;flex-basis:30px;filter:drop-shadow(0 1px 2px #0009)}.equipment-slot>small{font-size:8px;line-height:11px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#e0f4e7}.equipment-slot.empty{border-style:dashed;border-color:#94b8a641;background:#0c1c1dbd}.equipment-slot.empty>small{color:#96b5a5}.slot-placeholder{height:28px;font-size:23px;line-height:26px;color:#8db99b80}.slot-level{position:absolute;right:3px;top:3px;font:9px var(--mono);color:#ebffef;text-shadow:0 1px 3px #000;background:#0c211bdb;border-radius:2px;padding:1px 2px}.slot-state{position:absolute;left:2px;top:2px;font-size:6px;line-height:9px;color:#c7fce5;background:#173b32ed;border-radius:2px;padding:0 2px}.slot-state.is-evolved{color:#fff0b9;background:#5a4721e8}.equipment-slot.evolved{border-color:#efcf77;box-shadow:0 0 9px #e9bb4026}.relic-group .equipment-heading,.relic-group .equipment-heading b{color:#e8ce8b}.relic-group .equipment-slot{border-color:#d5b76899;background:linear-gradient(150deg,#514223ed,#211c16ed)}.relic-group .equipment-slot.empty{border-color:#d5b7686b;background:#2c271aba}.relic-group .slot-placeholder{color:#d6b567b0}.relic-group .equipment-slot.empty>small{color:#d2bd88}.playing .boss-hud{top:121px}.skill-button>small{font-size:7px;line-height:1;color:#a4cfb9}.skill-button.cooldown{border-color:#78988a66;background:#172a27de}.skill-button.cooldown>.equipment-icon{opacity:.58} #equipment-dialog{width:min(440px,calc(100% - 28px))}#equipment-detail{margin-top:17px}#equipment-detail>.equipment-icon{float:right;width:64px;height:64px;flex-basis:64px;margin:0 0 12px 16px}#equipment-detail>p{font-size:12px;line-height:1.9;color:#afc8bb;margin-top:12px}#equipment-detail>.equipment-status{font:14px var(--mono);color:#d2f7df;margin:0 0 15px}#equipment-detail>.equipment-branch{color:#dbebdf;padding-top:10px;border-top:1px solid #9fc4ba20}.equipment-recipe{clear:both;display:grid;gap:9px;margin-top:18px;padding:15px;border:1px solid #c4aa6344;border-radius:7px;background:#c8b25f07}.equipment-recipe>strong{font-size:11px;color:#e4cc8f;font-weight:500;margin-bottom:3px}.equipment-recipe>span{font-size:11px;color:#98a89d}.equipment-recipe>span.ready{color:#b8eabe}#equipment-detail>.equipment-hint{font-size:10px;color:#8ea797}.screen-steps{padding-left:20px;line-height:1.9;color:#d7eadc;font-size:12px}.screen-steps>li{padding-left:4px;margin:12px 0}#equipment-done,#screen-done{width:100%;margin-top:22px} @media(pointer:coarse),(max-width:680px){ .playing .equipment-hud{top:auto;bottom:calc(8px + env(safe-area-inset-bottom));gap:7px;max-width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))} .equipment-slot{width:42px;height:51px}.equipment-slot>.equipment-icon{width:28px;height:28px;flex-basis:28px}.equipment-slots{gap:3px}.equipment-heading{font-size:8px;letter-spacing:.3px}.equipment-heading b{font-size:7px;margin-left:2px}.equipment-slot>small{font-size:7px}.playing .boss-hud{top:calc(112px + env(safe-area-inset-top))} .playing #pause-button{width:32px;height:34px;top:-2px;right:-4px}.playing .kills-block{padding-right:33px}.playing .skill-button{gap:2px} } @media(max-width:374px){.playing .equipment-hud{gap:5px}.equipment-slot{width:36px}.equipment-slot>.equipment-icon{width:26px;height:26px;flex-basis:26px}.equipment-slots{gap:2px}.equipment-heading b{margin-left:0}.equipment-slot>small{font-size:6px}} @media(pointer:coarse) and (orientation:landscape){ .playing .health-block{width:145px}.playing .hud .health-track{margin-top:6px}.playing .hud .level-text{margin-top:5px}.playing .hud .xp-track{top:47px}.playing .hud .wave-block{top:0;left:50%;display:flex;align-items:center;gap:10px;white-space:nowrap}.playing .hud .wave-block>strong{font-size:18px;margin:0}.playing .hud .wave-block>span:last-child{display:none} .playing .equipment-hud{top:auto;bottom:calc(8px + env(safe-area-inset-bottom));gap:7px}.playing .equipment-group{gap:3px}.playing .equipment-heading{font-size:7px;line-height:8px}.playing .equipment-slot{width:44px;height:47px}.playing .equipment-slot>.equipment-icon{width:27px;height:27px;flex-basis:27px}.playing .equipment-slot>small{font-size:7px;line-height:9px}.playing .equipment-hud~.boss-hud{top:calc(70px + env(safe-area-inset-top));left:30%;right:30%}.playing .hud .xp-track{right:auto;width:145px}.playing .wave-banner{top:calc(106px + env(safe-area-inset-top));padding-block:4px} .playing .dash-button{width:60px;height:60px;left:auto}.playing .skill-button{width:54px;height:54px;right:calc(98px + env(safe-area-inset-right))}.playing .dash-button,.playing .skill-button,.playing .combat-tip:not(.hidden)~.dash-button{bottom:calc(14px + env(safe-area-inset-bottom))} dialog{max-height:calc(var(--game-height,100dvh) - 20px);padding:23px 26px}.playing .state-overlay{overflow-y:auto;align-items:flex-start}.playing .pause-dialog{margin:auto}.playing .pause-dialog>.eyebrow{display:none}.playing .pause-dialog>.keyboard-hint{display:none}.playing .pause-dialog .display-controls{margin-top:10px;gap:7px}.playing .pause-dialog>.primary-button,.playing .pause-dialog>.secondary-button{min-height:40px;margin-top:8px;padding:9px 18px} } /* Lobby-only layout: one page scroll, with a quieter surface behind controls. */ .expedition-services{max-width:1644px;margin:24px auto 0;padding:0 28px;display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:12px}.expedition-services>div{padding:8px 0}.service-kicker{display:block;font-size:10px;color:#9cbdad;margin-bottom:7px}.expedition-services strong{font-size:22px}.expedition-services p{font-size:12px;line-height:1.7;color:#9fb8ad;margin-top:5px}.expedition-services button{background:#13271f;border:1px solid #a2f5c02b;border-radius:8px;text-align:left;padding:18px;font-size:14px}.expedition-services button:hover{border-color:#a2f5c099;background:#1a3328}.expedition-services button span{display:block;color:#a1bdac;font-size:11px;margin-top:10px}.playing .expedition-services{display:none} body:not(.playing) .arena{height:auto;max-height:none;min-height:0}body:not(.playing) #arena{position:absolute;inset:0}body:not(.playing) .lobby-overlay{position:relative;overflow:visible;background:linear-gradient(90deg,#0a1916f5 0%,#0a1916ed 46%,#0a19168a 100%);padding:34px 36px}body:not(.playing) .lobby-main{align-items:start}body:not(.playing) .lobby-copy h1{margin-top:18px}body:not(.playing) .lobby-description{max-width:430px}.lobby-links button{min-height:40px;font-size:12px}.lobby-copy .map-description,.lobby-copy .character-description{font-size:12px;line-height:1.8}.lobby-copy .start-note{font-size:11px;max-width:420px}.archive-empty{background:#152d24;border:1px solid #a2f5c033;border-radius:8px;padding:24px!important}.archive-empty .secondary-button,#catalog-content article>.secondary-button{margin-top:16px}#catalog-content article p{font-size:13px;line-height:1.9} @media(max-width:680px){.expedition-services{padding:0 14px;margin-top:16px;grid-template-columns:1fr 1fr;gap:8px}.expedition-services>div{grid-column:1/-1;padding:0 0 6px}.expedition-services>button:last-child{grid-column:1/-1}.expedition-services button{padding:13px;font-size:13px}.expedition-services button span{margin-top:6px}.expedition-services strong{font-size:20px}body:not(.playing) .lobby-overlay{padding:25px 18px;background:linear-gradient(90deg,#0a1916f5,#0a1916d9)}body:not(.playing) .lobby-copy h1{font-size:46px}.lobby-copy .start-button{width:100%}.lobby-copy .lobby-description{font-size:13px}.lobby-copy .start-note{max-width:none}.lobby-copy .lobby-links{flex-wrap:wrap}.loadout-heading>span:last-child{font-size:10px}.loadout strong{font-size:12px}.loadout small{font-size:10px}.energy-button{min-height:40px}.icon-button{min-width:32px;min-height:36px}.top-actions{gap:5px}} .lobby-copy .loadout-section{margin-top:18px;padding-top:16px}.lobby-copy .loadout-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.lobby-copy .loadout{min-height:64px;padding:10px;flex-direction:row;text-align:left}.lobby-copy .loadout strong{font-size:12px}.lobby-copy .loadout small{font-size:10px;white-space:normal;line-height:1.5}.lobby-copy .loadout-heading{display:block}.lobby-copy .loadout-heading>span:last-child{display:block;margin-top:6px;font-size:10px} @media(max-width:340px){body{min-width:0}} /* Release review: readable menus, deliberate desktop composition and touch targets. */ .skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;background:var(--mint);color:#10251a;border-radius:6px} .skip-link:focus{top:12px} body:not(.playing) .lobby-main{display:block;padding-bottom:0} body:not(.playing) .lobby-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;max-width:none} body:not(.playing) .lobby-hero{display:none} .lobby-intro,.lobby-preparation{min-width:0} .lobby-intro>.eyebrow{color:#b5cabe;font-size:10px;letter-spacing:1.4px} .lobby-preparation{border-left:1px solid var(--line);padding-left:28px} .lobby-preparation .loadout-section{border:0;padding:0;margin:0} .lobby-copy .display-controls,.lobby-copy .display-help{grid-column:1/-1;margin-top:0} .lobby-copy .display-help{font-size:12px;line-height:1.7;color:#b1c7bc} .lobby-copy .start-button{width:100%;margin-top:14px} .lobby-copy .resume-link{font-size:13px;line-height:1.6;min-height:44px;padding:12px 0;text-align:left} #resume-game{width:100%;padding:14px 16px;background:#214a37;border:1px solid #a2f5c088;border-radius:6px;margin-top:18px} #storage-status{color:#ffdeb0;max-width:360px} .topbar .icon-button{width:44px;height:44px;flex-shrink:0} .topbar .energy-button{min-height:44px} .topbar .prototype-tag{font-size:11px;color:#bed4c9} .lobby-tags>span{font-size:11px} .character-picker{font-size:13px} .character-picker select,.display-controls select{font:inherit;font-size:14px;min-height:44px} .difficulty-select button{min-height:44px;font-size:12px} .map-card{min-height:90px} .map-card>strong{font-size:15px}.map-card>span,.map-card>small{font-size:11px;line-height:1.6} .field-guide .guide-section h3,.field-guide .guide-heading h3{font-size:14px} .field-guide .synergy>strong{font-size:12px} .field-guide .synergy>small,.field-guide .empty-build,.field-guide #last-run,.field-guide #guide-map-description{font-size:12px;line-height:1.8;color:#b3c9be} .game-footer{font-size:11px;line-height:1.8}.game-footer>span,.game-footer button,.game-footer>a{font-size:11px}.game-footer button,.game-footer a{min-height:44px;display:inline-flex;align-items:center} button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px} dialog{width:min(660px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:32px;color:#edf4ee;background:#13211f;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable} dialog h2{font-size:26px;line-height:1.4;margin-right:25px} dialog>p:not(.eyebrow),dialog .help-list p,dialog .help-list li,dialog .screen-steps,dialog .screen-steps li,#catalog-content article p,.equipment-description{font-size:14px;line-height:1.85;color:#bdcec6} dialog .help-list strong,#catalog-content article h3{font-size:16px;line-height:1.5} dialog .eyebrow{font-size:10px;color:#a2f5c0} dialog .dialog-close{min-width:44px;min-height:44px;top:6px;right:6px;font-size:24px} dialog .primary-button,dialog .secondary-button{font-size:14px;min-height:48px} .demo-disclosure{font-size:13px;line-height:1.8;color:#c0d6c9} .exchange-type{min-height:108px}.exchange-type span{font-size:14px}.exchange-type small{font-size:12px;color:#b4cbbd} .exchange-quantity label,.exchange-balance,.exchange-preview>div>span{font-size:13px;line-height:1.7} .exchange-quantity input{font-size:16px;min-height:44px}.exchange-quantity button{min-width:44px;min-height:44px} .form-error{font-size:13px;color:#ffc2b4;line-height:1.7} .record-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0} .record-filters label{font-size:12px;color:#b7cdbf}.record-filters select{display:block;width:100%;min-height:44px;font-size:14px;padding:8px;margin-top:6px;background:#1b3027;border:1px solid #749883;border-radius:5px} .state-overlay .pause-dialog>p,.state-overlay .result-dialog>p,.state-overlay .upgrade-dialog>p{font-size:14px;line-height:1.85} .state-overlay .keyboard-hint,.state-overlay .result-build{font-size:12px;line-height:1.8} .upgrade-card>p{font-size:13px;line-height:1.75}.upgrade-card>strong{font-size:17px;line-height:1.5} .result-stats>div>span{font-size:12px} @media(max-width:1050px){body:not(.playing) .lobby-copy{grid-template-columns:minmax(0,1fr)}.lobby-preparation{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}} @media(max-width:680px){ .topbar{height:auto;min-height:64px;flex-wrap:wrap;padding:10px 14px;gap:8px}.topbar .brand{font-size:20px}.topbar .top-actions{gap:5px}.topbar .energy-button{padding-inline:8px} .topbar .icon-button{width:40px;height:44px}.topbar .energy-button>span:not(.energy-bolt){display:none} body:not(.playing) .lobby-copy{gap:22px}.lobby-copy .lobby-description{font-size:14px}.lobby-copy .map-description,.lobby-copy .character-description{font-size:13px} .lobby-copy .loadout strong{font-size:13px}.lobby-copy .loadout small{font-size:11px}.lobby-copy .loadout{min-height:76px} .lobby-copy .start-note{font-size:12px}.lobby-copy .loadout-heading>.eyebrow,.lobby-copy .loadout-heading>span:last-child{font-size:11px} .field-guide{grid-template-columns:1fr}.field-guide .synergy-guide{grid-row:auto}.field-guide .guide-section{grid-column:1} .game-footer{padding:14px;gap:8px}.game-footer>span{font-size:11px}.game-footer button,.game-footer>a{font-size:12px} dialog{padding:28px 20px;max-height:calc(100dvh - 24px)}dialog h2{font-size:23px} .exchange-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.exchange-type{min-height:96px} .upgrade-card>p{font-size:13px}.upgrade-card>strong{font-size:16px} .hud-label,.hud-label>strong{font-size:10px}.kills-block>button{width:40px;height:36px;right:0}.kills-block{padding-right:44px} } @media(max-width:374px){.topbar .top-actions{width:100%;justify-content:space-between}.topbar .energy-button>span:not(.energy-bolt){display:inline}.record-filters{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.lobby-overlay *{animation:none!important;transition:none!important}} .field-guide .guide-heading{display:block}.field-guide .guide-heading>span{display:block;font-size:11px;line-height:1.7;margin-top:8px} #catalog-content[data-view="records"]{display:block} dialog .dialog-close{position:sticky;top:0;float:right;z-index:2;margin:-16px -10px 0 0;background:#203a2e;border:1px solid #729883;border-radius:50%} #equipment-detail>p,#equipment-detail>.equipment-hint{font-size:14px;line-height:1.8;color:#bdcec6} .equipment-recipe>strong,.equipment-recipe>span{font-size:13px;line-height:1.6} #energy-dialog .demo-disclosure span,#energy-dialog .exchange-balance{font-size:13px;line-height:1.8} @media(max-height:520px) and (orientation:landscape){ body.playing{overflow:hidden}.playing .topbar,.playing .game-footer,.playing .field-guide:not([role="dialog"]){display:none} .playing .game-shell{display:block;margin:0;padding:0}.playing .arena{height:100dvh;min-height:0;max-height:none;border:0;border-radius:0} .playing .state-overlay{position:fixed;inset:0;overflow-y:auto;align-items:flex-start;padding:16px;background:#0c1918f5} .playing .pause-dialog{margin:auto;padding:8px 16px;max-width:560px}.playing .pause-dialog h2{font-size:24px} .playing .pause-dialog>.eyebrow,.playing .pause-dialog>.keyboard-hint{display:none} .playing .pause-dialog>p{font-size:13px;margin:10px 0}.playing .pause-dialog>.primary-button,.playing .pause-dialog>.secondary-button{min-height:40px;margin:8px auto;padding:8px 18px} .playing .pause-dialog .display-controls,.playing .pause-tools{margin-top:8px}.playing .pause-tools button{min-height:40px;padding:8px 12px} .playing .upgrade-dialog,.playing .result-dialog{margin:auto}.playing .upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .playing .upgrade-dialog h2,.playing .result-dialog h2{font-size:24px}.playing .upgrade-card{padding:14px}.playing .upgrade-card>p{font-size:12px} } .hud:before{content:"";position:absolute;inset:-20px -20px -20px;background:linear-gradient(#071610c9,#07161000);z-index:-1;pointer-events:none} .hud-label,.hud-label>strong,.level-text,.wave-block>span:last-child{font-size:10px;color:#e0f3e7;text-shadow:0 1px 3px #000} body:not(.playing) .loading-error{position:fixed;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100% - 32px));max-height:80dvh;overflow:auto;z-index:40;padding:28px;border:1px solid #8ba99a;border-radius:12px;background:#13261ff5;box-shadow:0 20px 80px #0009} .loading-error p{font-size:15px;line-height:1.8}.loading-error button{font-size:14px;min-height:48px} .network-mode #resume-game,.network-mode #reset-demo{display:none!important}.network-mode #network-status{position:fixed;bottom:12px;left:12px;right:12px;z-index:40;background:#422918;color:#fff3d8;padding:12px;border:1px solid #aa8053;border-radius:8px;font-size:14px}.network-mode #network-status[hidden]{display:none} /* Fit the playfield in short desktop windows so bottom equipment stays visible. */ .playing .arena{min-height:0} .playing .combat-tip:not(.hidden)~.dash-button{bottom:23px} /* Keep touch actions above the equipment row on narrow playfields. */ .playing .combat-tip{bottom:calc(94px + env(safe-area-inset-bottom));max-width:calc(100% - 235px);background:#0c1a2059;text-shadow:0 1px 3px #000} .playing .toast{bottom:calc(96px + env(safe-area-inset-bottom))} @media(max-width:1100px){ .playing .dash-button,.playing .skill-button,.playing .combat-tip:not(.hidden)~.dash-button{bottom:calc(84px + env(safe-area-inset-bottom))} } @media(pointer:coarse),(max-width:680px){ .playing .wave-banner{top:calc(146px + env(safe-area-inset-top))} .playing .dash-button,.playing .skill-button,.playing .combat-tip:not(.hidden)~.dash-button{bottom:calc(84px + env(safe-area-inset-bottom))} .playing .combat-tip{bottom:calc(94px + env(safe-area-inset-bottom));max-width:calc(100% - 190px)} } @media(pointer:coarse) and (orientation:landscape){ .playing .wave-banner{top:calc(106px + env(safe-area-inset-top));padding-block:4px} .playing .wave-banner>strong{font-size:16px}.playing .wave-banner>span{font-size:10px;margin-top:2px} } @media(pointer:coarse) and (orientation:landscape) and (min-width:700px){ .playing .dash-button,.playing .skill-button,.playing .combat-tip:not(.hidden)~.dash-button{bottom:calc(14px + env(safe-area-inset-bottom))} } /* Short landscape phones: keep the action buttons out of the battle view, reserving space beside the complete equipment row instead of stacking them. */ @media(max-height:520px) and (orientation:landscape) and (min-width:560px) and (max-width:699px){ .playing .equipment-hud{left:calc(50% - 56px)} .playing .dash-button,.playing .skill-button,.playing .combat-tip:not(.hidden)~.dash-button{bottom:calc(14px + env(safe-area-inset-bottom))} } /* Keep complete upgrade choices readable within desktop and phone viewports. */ :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-dialog{min-width:0;max-height:none;overflow:visible;margin-block:auto} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card{min-width:0;overflow-wrap:anywhere} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card>p{white-space:pre-line;min-height:0;margin-bottom:18px;line-height:1.65} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card>small{margin-top:auto} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-actions{flex-wrap:wrap} #relic-choice-overlay .upgrade-dialog{max-width:760px} #relic-choice-overlay .upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #relic-choice-save{min-height:44px;min-width:200px} @media(max-width:680px){ :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-grid{grid-template-columns:minmax(0,1fr)} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card{grid-template-columns:48px minmax(0,1fr);min-height:0;padding:12px;gap:0 12px} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card>p{margin-bottom:0;font-size:13px} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card>.equipment-icon{grid-row:1/5;width:44px;height:44px} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card>strong{font-size:16px} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-level{grid-row:3;font-size:11px} } @media(max-height:520px) and (min-width:681px){ :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-grid{margin-top:14px;gap:10px} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card{padding:12px} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card>.equipment-icon{width:42px;height:42px;margin:8px 0} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card>p{font-size:12px;margin:8px 0} } /* Distinguish branches by silhouette and explicit selection, never color alone. */ .branch-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;grid-column:1/-1;text-align:left} .branch-option{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px;align-content:start;padding:9px;border:1px solid #8ab7a333;border-radius:6px;background:#071e1c80;color:#a6bdb0} .branch-option.is-chosen{border-color:#c2e2b7;background:#284739;color:#e6f6dc} .branch-tag{grid-column:1/-1;font-size:10px;letter-spacing:1px}.branch-option>.equipment-icon{width:40px;height:40px;flex-basis:40px}.branch-option>b{align-self:center;font-size:12px;line-height:1.5}.branch-summary{grid-column:1/-1;font-size:11px;line-height:1.7}.branch-lock{display:block;grid-column:1/-1;color:#d7c598;font-size:10px;line-height:1.7;margin-bottom:10px} .upgrade-card.has-branch-preview>p{display:none} @media(max-width:680px){.branch-compare{grid-row:5;margin:10px 0 7px}.branch-lock{grid-row:6;margin-bottom:0}.branch-option{padding:8px;grid-template-columns:32px minmax(0,1fr)}.branch-option>.equipment-icon{width:32px;height:32px;flex-basis:32px}.branch-summary{font-size:12px}.branch-tag{font-size:10px}} @media(min-width:681px){#upgrade-grid:has(.has-branch-preview):not(:has(> :nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}.has-branch-preview .branch-summary{font-size:12px}} /* R18 selected crystal surface: fixed reading zones keep real copy from resizing cards. */ :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted){position:fixed;inset:0;z-index:40} :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted) .upgrade-dialog{max-width:1040px} #relic-choice-overlay:has(.is-painted) .upgrade-dialog{max-width:760px} :is(#upgrade-grid,#relic-choice-grid):has(.is-painted){gap:18px} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card.is-painted{ --card-edge:#9f7046;--card-accent:#efc398;--surface-x:0%; height:672px;min-height:672px;padding:18px;display:grid; grid-template-columns:minmax(0,1fr);grid-template-rows:20px 212px 52px 28px minmax(0,1fr)44px; align-items:start;gap:0;text-align:center;isolation:isolate; background:#081210;border:1px solid var(--card-edge);border-radius:9px; box-shadow:inset 0 0 0 4px #07110fcc,inset 0 0 0 5px var(--card-edge); transition:border-color .15s,box-shadow .15s; } :is(#upgrade-overlay,#relic-choice-overlay) .is-painted[data-card-theme="jade"]{--card-edge:#4d866b;--card-accent:#b8edcc;--surface-x:50%} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted[data-card-theme="frost"]{--card-edge:#547e9b;--card-accent:#b3dafa;--surface-x:100%} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted::before{ content:"";position:absolute;inset:5px;z-index:-1;border-radius:4px;pointer-events:none;opacity:.65; background-image:url('/assets/game/challenge/cards-r18/crystal-surfaces.png'); background-size:300% 100%;background-position:var(--surface-x) 0;background-repeat:no-repeat; } :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card.is-painted:hover,:is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card.is-painted:focus-visible{ transform:none;border-color:#f1ebcf;outline:2px solid #f1ebcf;outline-offset:2px; box-shadow:inset 0 0 0 4px #07110fcc,inset 0 0 0 5px #e5ddba; } :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-type{grid-area:1/1;text-align:left;color:var(--card-accent);font-size:11px;line-height:20px;letter-spacing:1px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.equipment-icon{grid-area:2/1;width:212px;height:212px;margin:0;align-self:center;justify-self:center;flex:none} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>strong{grid-area:3/1;align-self:center;font-size:22px;line-height:26px;margin:0;max-width:100%;color:#f3f1e7} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-level{grid-area:4/1;position:static;margin:0;font-size:12px;line-height:22px;color:var(--card-accent)} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-details{grid-area:5/1;min-width:0;min-height:0;align-self:stretch;text-align:left;padding:12px 0;display:flex;flex-direction:column;gap:10px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-details>*{flex-shrink:0} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .upgrade-details>p{margin:0;min-height:0;white-space:pre-line;color:#d4dfd7;font-size:14px;line-height:1.75} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .upgrade-details>.upgrade-branch-numbers{font-size:12px;line-height:1.6;color:var(--card-accent)} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .upgrade-branch-numbers:empty{display:none} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .branch-compare{margin:0;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .branch-option{padding:8px;gap:5px;grid-template-columns:32px minmax(0,1fr);background:#07110fc9;border-color:#899a8c44;color:#bfcdc4} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .branch-option.is-chosen{border-color:#eee6c2;background:#18261feb;color:#f0f0dc} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .branch-option>.equipment-icon{width:32px;height:32px;flex:none} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .branch-tag{font-size:10px;line-height:16px;letter-spacing:0} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .branch-option>b{font-size:12px;line-height:18px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .branch-summary{font-size:12px;line-height:19px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .branch-lock{margin:0;font-size:11px;line-height:18px;color:#dfcda8} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>small{grid-area:6/1;display:flex;align-items:center;justify-content:center;align-self:stretch;width:100%;margin:0;border:1px solid var(--card-edge);border-radius:4px;background:#07110fbb;color:#f3eee1;font-size:13px;line-height:20px;letter-spacing:1px} @media(max-width:1000px) and (min-width:681px){ :is(#upgrade-grid,#relic-choice-grid):has(.is-painted){grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:680px){ :is(#upgrade-grid,#relic-choice-grid):has(.is-painted){grid-template-columns:minmax(0,1fr);gap:14px} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card.is-painted{height:448px;min-height:448px;padding:16px;grid-template-columns:76px minmax(0,1fr);grid-template-rows:20px 52px 28px minmax(0,1fr)44px;column-gap:12px;text-align:left} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted::before{background-size:300% 100%;opacity:.4} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-type{grid-area:1/2;font-size:10px;letter-spacing:0} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.equipment-icon{grid-area:1/1/4/2;width:76px;height:76px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>strong{grid-area:2/2;font-size:18px;line-height:26px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-level{grid-area:3/2;font-size:11px;line-height:20px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-details{grid-area:4/1/5/3;padding:10px 0} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .upgrade-details>p{font-size:14px;line-height:1.7} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted .upgrade-details>.upgrade-branch-numbers{font-size:12px;line-height:1.6} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>small{grid-area:5/1/6/3;font-size:13px} } @media(max-width:374px){ :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card.is-painted{height:448px;min-height:448px;padding:14px;column-gap:10px;grid-template-columns:64px minmax(0,1fr)} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.equipment-icon{width:64px;height:64px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>strong{font-size:17px;line-height:25px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-level{font-size:10px} } @media(prefers-reduced-motion:reduce){:is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card.is-painted{transition:none}} /* Short landscape shows every primary choice immediately. Long effect text scrolls inside its card; secondary actions remain below the cards. */ @media(max-height:520px) and (orientation:landscape){ :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted){align-items:flex-start;padding:8px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain} :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted) .upgrade-dialog{margin:0 auto;max-height:none;overflow:visible} :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted) .upgrade-dialog>.eyebrow{display:none} :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted) .upgrade-dialog>h2{margin:2px 0;font-size:22px;line-height:1.2} :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted) .upgrade-dialog>p:not(.eyebrow){line-height:21px;max-height:42px;overflow-y:auto;overscroll-behavior:contain} :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted) .upgrade-dialog>p:not(.eyebrow)::after{content:" · 说明可上下滑动";font-size:12px;white-space:nowrap} :is(#upgrade-grid,#relic-choice-grid):has(.is-painted){grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px} #upgrade-grid:has(.is-painted):not(:has(> :nth-child(3))),#relic-choice-grid:has(.is-painted){grid-template-columns:repeat(2,minmax(0,1fr))} :is(#upgrade-overlay,#relic-choice-overlay) .upgrade-card.is-painted{height:calc(100dvh - 86px);min-height:0;padding:10px;grid-template-columns:40px minmax(0,1fr);grid-template-rows:20px minmax(26px,auto) auto minmax(0,1fr) 44px;column-gap:8px;text-align:left} #relic-choice-overlay .upgrade-card.is-painted{height:calc(100dvh - 107px)} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-type{grid-area:1/1/2/3;min-height:20px;font-size:11px;letter-spacing:0} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.equipment-icon{grid-area:2/1/4/2;width:40px;height:40px;margin:0} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>strong{grid-area:2/2;margin:0} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-level{grid-area:3/2;font-size:12px;line-height:22px} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>.upgrade-details{grid-area:4/1/5/3;padding:8px 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:var(--card-edge) #07110f} :is(#upgrade-overlay,#relic-choice-overlay) .is-painted>small{grid-area:5/1/6/3;min-height:44px;font-size:13px} :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted) .upgrade-actions{margin-top:12px} :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted) .upgrade-actions button{min-height:44px;font-size:13px} :is(#upgrade-overlay,#relic-choice-overlay):has(.is-painted) .keyboard-hint{margin-top:10px} } /* R20 result ceremony: the painted guardian and crystal surface retain the existing identity. */ .playing #result-overlay{position:fixed;inset:0;z-index:24;padding:clamp(12px,3vw,32px);overflow:hidden;background:#04110eef;align-items:center} #result-overlay .result-dialog{--result-accent:#b4ffd1;display:flex;flex-direction:column;width:100%;max-width:860px;max-height:100%;margin:auto;text-align:left;border:1px solid #8bbda44d;border-radius:16px;background:#0d211c;box-shadow:0 24px 100px #0009;overflow:hidden} #result-overlay .result-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:32px 36px 24px} #result-overlay .result-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:12px;align-items:center;isolation:isolate;min-height:190px} #result-overlay .result-hero:before{content:"";position:absolute;inset:-32px -36px -8px;z-index:-1;background-image:linear-gradient(90deg,#0d211cde,#0d211c22 85%),url('/assets/game/challenge/cards-r18/crystal-surfaces.png');background-size:auto,300% 100%;background-position:center,left center;opacity:.32;pointer-events:none} #result-overlay .result-eyebrow,#result-overlay .eyebrow{font-size:10px;color:var(--result-accent);letter-spacing:2px} #result-overlay .result-context{font-size:12px;line-height:1.7;color:#afc8ba;margin-top:16px} #result-overlay #result-title{font-size:clamp(28px,3.6vw,42px);font-weight:650;letter-spacing:-1.3px;line-height:1.35;margin:8px 0 12px;color:#f0fff4;outline:none} #result-overlay #result-message{font-size:13px;line-height:1.85;color:#aec9bb;max-width:520px} #result-overlay .result-crystal{width:160px;height:180px;object-fit:contain;filter:drop-shadow(0 0 22px #8cffb733);align-self:center;pointer-events:none} #result-overlay .result-seals{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px} #result-overlay .result-seals>*{font-size:11px;line-height:1.5;padding:5px 9px;background:#172f26;border:1px solid #b4ffd125;border-radius:4px;color:#c2decd;font-weight:500} #result-overlay .result-seals strong{color:var(--result-accent);border-color:#b4ffd165;background:#264c35} #result-overlay .result-stats{margin:25px 0 26px;padding:20px 0;gap:0;border-color:#a2d6b632} #result-overlay .result-stats>div{padding:0 16px;min-width:0} #result-overlay .result-stats>div:first-child{padding-left:0} #result-overlay .result-stats strong{margin-top:10px;font-size:clamp(26px,3vw,36px);letter-spacing:-1px;color:#e4ffed;white-space:nowrap} #result-overlay .result-stats span{margin:0;font-size:12px;color:#a1bdac} #result-overlay h3{font-size:13px;letter-spacing:.5px;font-weight:550;color:#d5ebdf;line-height:1.7} #result-overlay .result-achievements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;list-style:none;margin:12px 0 24px} #result-overlay .result-achievement{display:flex;align-items:flex-start;gap:12px;padding:15px 14px;background:#153026;border:1px solid #a2d6b625;border-radius:7px;min-width:0} #result-overlay .result-achievement.is-unlock{background:#1b3628;border-color:#a2d6b64a} #result-overlay .result-achievement-mark{font:22px var(--mono);width:22px;flex:0 0 22px;color:var(--result-accent);line-height:1.2} #result-overlay .result-achievement strong{font-size:14px;line-height:1.65;font-weight:550;color:#ddf9e7} #result-overlay .result-achievement p{font-size:12px;line-height:1.75;margin-top:5px;color:#a4c0ae;overflow-wrap:anywhere} #result-overlay .result-build-section h3{display:flex;justify-content:space-between;gap:10px;align-items:center} #result-overlay .result-build-section h3>span{color:#759785;font-size:10px;letter-spacing:0;font-weight:400} #result-overlay .result-build{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;list-style:none;padding:0;margin:14px 0 0} #result-overlay .result-build>li{display:flex;align-items:center;gap:10px;min-width:0} #result-overlay .result-build .equipment-icon{width:34px;height:34px;flex-basis:34px} #result-overlay .result-build strong{font-size:12px;color:#c1d8ca;display:block;font-weight:500;line-height:1.65} #result-overlay .result-build span:not(.equipment-icon){font-size:10px;color:#83a593;display:block;line-height:1.65;overflow-wrap:anywhere} #result-overlay .result-actions{flex:none;padding:15px 36px 22px;background:#0b1d18;border-top:1px solid #8bbda42b;box-shadow:0 -10px 24px #0c201847} #result-overlay .result-actions>p{font-size:11px;line-height:1.7;color:#91ae9d;margin:0 0 12px} #result-overlay .result-actions>div{display:flex;gap:12px} #result-overlay .result-actions button{margin:0;min-width:0;min-height:46px;flex:1;font-size:13px} #result-overlay[data-result=lost] .result-dialog{--result-accent:#acc9bd} #result-overlay[data-result=lost] .result-crystal{filter:saturate(.6) brightness(.82);opacity:.72} #result-overlay[data-result=pending] .result-dialog{--result-accent:#f0d19b} #result-overlay[data-result=pending] .result-crystal{filter:saturate(.4);opacity:.45} #result-overlay:not(.hidden) .result-hero-copy{animation:result-arrive .38s ease-out both} #result-overlay:not(.hidden) .result-crystal{animation:result-crystal-arrive .75s ease-out both} #result-overlay:not(.hidden) .result-stats{animation:result-arrive .4s .10s ease-out both} #result-overlay:not(.hidden) .result-achievement-section{animation:result-arrive .45s .20s ease-out both} #result-overlay:not(.hidden) .result-build-section{animation:result-arrive .45s .28s ease-out both} @keyframes result-arrive{from{opacity:.15;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}} @keyframes result-crystal-arrive{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}} @media(max-width:600px){ #result-overlay .result-scroll{padding:24px 20px 20px} #result-overlay .result-hero{grid-template-columns:minmax(0,1fr) 74px;gap:0;min-height:0} #result-overlay .result-hero-copy{grid-column:1/-1;grid-row:1;z-index:1} #result-overlay .result-crystal{grid-column:2;grid-row:1;width:86px;height:120px;align-self:start;margin-top:5px;opacity:.32!important} #result-overlay .result-hero:before{inset:-24px -20px -10px} #result-overlay .eyebrow{font-size:8px;letter-spacing:1.4px} #result-overlay .result-context{font-size:11px;padding-right:36px;margin-top:14px} #result-overlay #result-title{font-size:28px;letter-spacing:-.8px;margin:9px 0} #result-overlay #result-message{font-size:12px;line-height:1.8} #result-overlay .result-seals{margin-top:14px;gap:6px} #result-overlay .result-seals>*{font-size:10px;padding:4px 7px} #result-overlay .result-stats{margin:22px 0;padding:17px 0;grid-template-columns:1.5fr 1fr 1fr} #result-overlay .result-stats>div{padding:0 10px} #result-overlay .result-stats strong{font-size:22px;letter-spacing:-1px} #result-overlay .result-stats span{font-size:10px} #result-overlay .result-achievements{grid-template-columns:1fr;margin-bottom:22px;gap:8px} #result-overlay .result-achievement{padding:12px;gap:10px} #result-overlay .result-achievement strong{font-size:13px} #result-overlay .result-achievement p{font-size:11px} #result-overlay .result-build{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px} #result-overlay .result-build-section h3>span{display:none} #result-overlay .result-actions{padding:12px 20px 16px} #result-overlay .result-actions>div{gap:8px} #result-overlay .result-actions button{font-size:12px;padding:11px 8px;min-height:44px} #result-overlay .result-actions>p{font-size:10px;margin-bottom:9px} } @media(max-height:480px) and (min-width:601px){ .playing #result-overlay{padding:10px 20px} #result-overlay .result-dialog{max-width:820px} #result-overlay .result-scroll{padding:22px 28px 20px} #result-overlay .result-hero{min-height:150px;grid-template-columns:minmax(0,1fr) 110px} #result-overlay .result-crystal{width:110px;height:140px} #result-overlay #result-title{font-size:30px} #result-overlay .result-actions{padding:10px 28px 12px;display:flex;align-items:center;gap:20px} #result-overlay .result-actions>p{margin:0;max-width:240px;font-size:10px} #result-overlay .result-actions>div{flex:1} #result-overlay .result-actions button{min-height:42px;padding:9px;font-size:12px} } @media(max-width:374px){ #result-overlay .result-stats>div{padding-inline:7px} #result-overlay .result-stats>div:first-child{padding-left:0} #result-overlay .result-stats strong{font-size:20px} #result-overlay .result-build .equipment-icon{width:28px;height:28px;flex-basis:28px} #result-overlay .result-build>li{gap:7px} } /* R21 keeps three named modes legible within the existing crystal controls. */ .difficulty-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .difficulty-select>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:50px;padding:9px 6px;font-size:12px;line-height:1.4} .difficulty-select>button>span{white-space:nowrap} .difficulty-select .difficulty-lock{font-size:9px;line-height:1.4;color:#a6b6aa} .difficulty-select .difficulty-lock[hidden]{display:none} .difficulty-select>button[data-difficulty="2"][aria-pressed="true"]{background:#3a3026;border-color:#d2ad7866;color:#ffe3b8} .difficulty-select>button:focus-visible{outline-offset:2px} #catalog-content[data-view="records"] .record-filters{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:600px){#catalog-content[data-view="records"] .record-filters{grid-template-columns:1fr}} @media(max-width:374px){.difficulty-select>button{font-size:11px;padding-inline:4px}.difficulty-select .difficulty-lock{font-size:8px}} /* Only visible when a later-stage download has not caught up with play. */ #streaming-status{position:fixed;left:50%;top:88px;transform:translateX(-50%);z-index:35;width:min(560px,calc(100% - 32px));padding:16px 20px;border:1px solid #8ba99a;border-radius:8px;background:#13261ff5;color:#d5eadc;font-size:14px;line-height:1.7;box-shadow:0 12px 40px #0008}#streaming-status[hidden],body:not(.playing) #streaming-status{display:none}#streaming-status button{margin-top:10px;width:100%} .lobby-links a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid #81a98e44;color:#b3d7bf;font-size:12px;text-decoration:none}.lobby-links a[aria-current=page]{color:#e0ffe9;border-color:#a2f5c0;font-weight:700} .difficulty-select>[hidden],#network-abandon[hidden],#network-lobby-note[hidden]{display:none!important} .loading-progress{display:grid;gap:8px;margin-top:18px;padding:14px 16px;border:1px solid #9fc4ba35;border-radius:8px;background:#0a1916b8;font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums}.loading-progress strong{font-size:14px;color:var(--mint)}.loading-progress span{overflow-wrap:anywhere}.loading-progress progress{width:100%;height:7px;accent-color:var(--mint)}.loading-progress[hidden]{display:none} /* Shared battle abilities, available to both guest and App expeditions. */ #abilities-open{top:64px;right:0;width:80px;height:36px;font-size:12px;white-space:nowrap;pointer-events:auto;background:#153027ee;border-color:#8decba55} #abilities-dialog{width:min(560px,calc(100% - 28px))} #abilities-content{display:grid;gap:12px;margin:20px 0} .ability-entry{padding:14px;border:1px solid var(--line);border-radius:8px;background:#12251eee;min-width:0} .ability-entry>.equipment-icon{float:right;width:44px;height:44px;margin:0 0 8px 12px} .ability-entry>strong{font-size:14px;line-height:1.6;color:var(--mint)} .ability-entry>p{font-size:14px;line-height:1.8;margin-top:8px;color:#bdcec6;overflow-wrap:anywhere} @media(max-height:520px) and (orientation:landscape){#abilities-open{top:46px;width:76px;height:32px;font-size:11px}} /* Account balance is revealed only after the App connection is verified. */ #energy-open[hidden]{display:none!important} #energy-open{flex-shrink:0} #account-energy-dialog{width:min(560px,calc(100% - 28px))} #account-energy-status{margin-top:12px;min-height:24px} .account-energy-balances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0} .account-energy-bucket{min-width:0;padding:18px;border:1px solid #9fc4ba35;border-radius:8px;background:#10281f} .account-energy-bucket h3{font-size:14px;line-height:1.5;color:#caedd7} .account-energy-bucket>p{font-size:13px;line-height:1.8;color:#adbfba;overflow-wrap:anywhere} .account-energy-bucket .account-energy-amount{margin:12px 0;color:var(--mint)} .account-energy-amount strong{font:28px/1.2 var(--mono);font-variant-numeric:tabular-nums} .account-energy-amount>span{font-size:13px;color:#adbfba} .account-energy-bucket .account-energy-expiry{margin-top:8px;color:#d1e7d8} .account-energy-link{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:48px;padding:13px 18px} @media(max-width:520px){.account-energy-balances{grid-template-columns:1fr}.account-energy-bucket{padding:16px}} @media(max-height:520px) and (orientation:landscape){#account-energy-dialog{padding:20px 24px}#account-energy-dialog h2{font-size:22px}.account-energy-balances{margin:14px 0;gap:10px}.account-energy-bucket{padding:12px}.account-energy-bucket .account-energy-amount{margin:8px 0}}