:root{color-scheme:dark;--ink:#edf4df;--muted:#a9bba4;--gold:#f0cc7a;--mint:#9be8bc;--panel:#10251ff2;--line:#92b99a35}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}body{background:#091510;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;justify-content:center;align-items:center;overflow:hidden;background-image:radial-gradient(ellipse at 40% 30%,#1c382b 0%,transparent 65%)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:disabled{cursor:default}#app{position:relative;width:min(100%,500px);height:100%;max-height:940px;isolation:isolate;background:#304e35;box-shadow:0 0 100px #0008;overflow:hidden}canvas#world{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated}#vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px 12px #0a20164d;z-index:1}.hud{position:absolute;inset:0 0 auto;padding:max(15px,env(safe-area-inset-top)) 18px 15px;pointer-events:none;z-index:2;background:linear-gradient(#091912eb,#0919129c 78%,transparent)}.topline{display:flex;align-items:center;justify-content:space-between;gap:10px}.smallcap{font-size:10px;letter-spacing:2.3px;font-weight:750;text-transform:uppercase;color:#b5c5a5}.hearts{font-size:21px;letter-spacing:1px;line-height:1.15;color:#f28b79;white-space:nowrap;max-width:72%;overflow:hidden}.empty{color:#577155}.hudright{display:flex;align-items:center;gap:12px}.timer{font-variant-numeric:tabular-nums;font-size:17px;font-weight:700}.iconbtn{background:#f2ffdf0e;color:var(--ink);border:1px solid var(--line);border-radius:11px;width:40px;height:40px;display:grid;place-items:center;font-size:17px;pointer-events:auto}.xp-label{display:flex;justify-content:space-between;margin:10px 1px 6px;font-size:10px;color:#c0d1b1;font-weight:650}.xp-label strong{color:var(--gold)}.xp-track{height:5px;overflow:hidden;border-radius:10px;background:#081c15b0;border:1px solid #d4ecab14}.xp-track i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#7ecb9a,#c5ed9c);transition:width .18s linear}.subhud{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.chips{display:flex;gap:6px}.chip{font-size:11px;padding:5px 9px;background:#0d271eaa;border:1px solid #d7ebaa25;border-radius:7px;font-weight:600;color:#d3e9cb}.chip b{color:var(--gold)}#bossbar{margin:10px 0 0;background:#0c211ad9;padding:8px 11px;border-radius:9px;border:1px solid #e7b56555}#bossbar .name{font-size:10px;letter-spacing:1.5px;font-weight:700;margin-bottom:5px;color:#f3cb8c}#bossbar .track{height:5px;background:#26372d;border-radius:4px;overflow:hidden}#bossfill{height:100%;width:100%;background:#e7b565}.bottomhud{position:absolute;bottom:0;left:0;right:0;padding:16px 18px max(22px,env(safe-area-inset-bottom));z-index:2;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none;background:linear-gradient(transparent,#10251f90)}.controlhint{max-width:66%;font-size:11px;line-height:1.65;color:#d8e5c9;text-shadow:0 1px 4px #000;font-weight:500}.controlhint b{font-size:10px;letter-spacing:1px;color:#eef3d1}#dash{pointer-events:auto;width:70px;height:70px;border-radius:24px;border:1px solid #e3e8ba72;background:#10251fe0;color:#f2e5b2;box-shadow:inset 0 0 20px #c3df8512;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;touch-action:none}#dash .glyph{font-size:25px;line-height:27px}#dash .label{font-size:9px;letter-spacing:1px;margin-top:3px}#dash:disabled{border-color:#dcebd025;color:#90a389;background:#182e26bb}.overlay{position:absolute;inset:0;z-index:5;background:#06171099;display:flex;align-items:center;justify-content:center;padding:22px;overflow:auto;backdrop-filter:blur(3px)}.overlay[hidden],[hidden]{display:none!important}.panel{width:100%;max-width:394px;padding:28px;border:1px solid #bdcca84d;border-radius:24px;background:linear-gradient(160deg,#193729f5,#0d241f 72%);box-shadow:0 24px 65px #0006;position:relative}.panel::before{content:"";position:absolute;top:-1px;left:26px;right:26px;height:1px;background:linear-gradient(90deg,transparent,#e9c77a,transparent)}.eyebrow{display:flex;gap:9px;align-items:center;text-transform:uppercase;font-size:9px;font-weight:750;letter-spacing:2px;color:#d3be89}.eyebrow .dot{width:6px;height:6px;background:#e6c985;border-radius:50%;box-shadow:0 0 12px #d9ce6d80}h1{font-size:49px;letter-spacing:-2.2px;line-height:1.02;margin:22px 0 12px;font-weight:900;color:#f3ecd5}h1 span{color:#b8d9a7}h2{font-size:29px;line-height:1.1;letter-spacing:-.7px;margin:17px 0 10px}p{font-size:13px;line-height:1.65;color:#bacbb7;margin:0 0 16px}.preview-row{display:flex;gap:15px;align-items:center;padding:15px 0;margin:6px 0 15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#portrait{width:64px;height:72px;image-rendering:pixelated;border-radius:12px;background:#071e184f;border:1px solid #a7be8538}.preview-row strong{display:block;font-size:13px;color:#e6eccf}.preview-row small{display:block;font-size:11px;color:#a7bea2;line-height:1.6;margin-top:4px}.primary{width:100%;min-height:53px;background:linear-gradient(#f3d895,#dfb964);border:1px solid #f6e0a6;border-radius:12px;color:#253427;font-weight:800;font-size:14px;box-shadow:0 5px 0 #7a633c45;transition:transform .12s}.primary:active{transform:translateY(2px)}.secondary{width:100%;min-height:44px;border:1px solid var(--line);border-radius:11px;color:#c8d7c0;background:#a4cfac0b;font-size:12px;margin-top:10px}.mini-note{font-size:10px;line-height:1.6;text-align:center;margin:14px 0 0;color:#8fa68f}.controls{font-size:11px;line-height:1.8;color:#b9cdb0;margin:0 0 20px}kbd{font:600 10px system-ui;display:inline-block;padding:1px 5px;border:1px solid #68836b66;border-radius:4px;color:#dce5c7;background:#132a21}.choice-list{display:grid;gap:10px;margin:18px 0 7px}.choice{width:100%;text-align:left;display:flex;gap:13px;align-items:center;border:1px solid #c4d8a544;background:#9cc7960b;border-radius:13px;padding:15px;color:#e8efda;min-height:86px}.choice:hover{background:#bfe79319;border-color:#e3d199}.choice .symbol{font-size:25px;display:grid;place-items:center;width:43px;flex-shrink:0;color:#f0d08a}.choice strong{display:block;font-size:13px;margin-bottom:5px}.choice small{display:block;color:#b3c8aa;font-size:11px;line-height:1.45}.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;padding:16px 5px;margin:21px 0;text-align:center}.stats b{display:block;font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums}.stats small{font-size:9px;display:block;color:#a3baa0;margin-top:3px}.stats>div+div{border-left:1px solid var(--line)}#toast{position:absolute;top:34%;left:20px;right:20px;z-index:4;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s;transform:translateY(-50%)}#toast strong{display:inline-block;padding:12px 18px;border-radius:10px;background:#10271ee8;border:1px solid #e0cc854d;color:#f6dd98;font-size:15px;box-shadow:0 8px 24px #0004}#toast.visible{opacity:1}#version{position:absolute;bottom:9px;left:0;right:0;text-align:center;pointer-events:none;z-index:6;font-size:8px;letter-spacing:1px;color:#d0dfbf58}@media(min-width:700px){#app{height:calc(100% - 36px);border:1px solid #8eac8d40;border-radius:25px}.overlay{padding:28px}}@media(max-height:680px){.panel{padding:20px}.overlay{padding:15px}h1{font-size:39px;margin-top:15px}.preview-row{padding:8px 0;margin-bottom:10px}#portrait{height:57px;width:54px}.controls{margin-bottom:12px}.panel p{margin-bottom:10px;font-size:12px}.mini-note{margin-top:10px}.choice{padding:10px;min-height:72px}.choice-list{gap:7px;margin-top:12px}h2{font-size:24px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Telegram Edition: desktop, phones and both screen orientations. */
html,body{height:100%;min-height:100dvh}body{height:var(--tg-viewport-stable-height,100dvh)}
#app{width:100%;height:100%;max-height:none}
.hud{padding-top:max(15px,env(safe-area-inset-top),var(--safe-top,0px))}
.bottomhud{padding-bottom:max(22px,env(safe-area-inset-bottom),var(--safe-bottom,0px))}
.overlay{align-items:safe center;padding-top:max(20px,var(--safe-top,0px));padding-bottom:max(20px,var(--safe-bottom,0px))}
.connection-box{border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:14px;background:#071b174d}
.cloud-badge{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:#b6edc6}
.cloud-badge[data-mode="error"]{color:#f3bd89}.connection-box p{font-size:11px;line-height:1.5;margin:5px 0 0;color:#c2d1b8}
.menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.menu-actions .secondary{font-size:11px}
.telegram-link,.privacy-link{display:block;text-align:center;font-size:11px;color:#c5e5d4;text-decoration:none;margin-top:14px}
.privacy-link{font-size:9px;color:#9eb79f;margin-top:10px}.telegram-link:hover,.privacy-link:hover{text-decoration:underline}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.profile-grid div{border:1px solid var(--line);border-radius:12px;padding:18px 8px;text-align:center}
.profile-grid strong{display:block;color:var(--gold);font-size:30px}.profile-grid span{display:block;font-size:10px;color:#b4c7ab;margin-top:5px}
#networkToast{position:absolute;z-index:12;left:16px;right:16px;bottom:max(18px,var(--safe-bottom,0px));background:#152c22f5;border:1px solid #eccb8c80;border-radius:12px;padding:14px 18px;color:#f1d3a0;font-size:12px;text-align:center;box-shadow:0 8px 25px #0008;pointer-events:none}
@media(min-width:760px) and (min-height:570px){#app{width:min(calc(100% - 32px),1280px);height:calc(100% - 32px);border-radius:22px}.overlay{padding:28px}.hud{padding-left:26px;padding-right:26px}.bottomhud{padding-left:26px;padding-right:26px}.controlhint{font-size:12px}}
@media(pointer:coarse){#app{border-radius:0;border:0;width:100%;height:100%}#dash{width:76px;height:76px}.controlhint{max-width:62%}}
@media(max-height:740px){#startScreen .panel{padding:20px}#startScreen h1{font-size:38px;margin:15px 0 10px}.preview-row{padding:8px 0;margin-bottom:10px}#portrait{width:50px;height:57px}.connection-box{padding:8px 10px;margin-bottom:10px}.controls{margin-bottom:10px}.mini-note{margin-top:10px}.secondary{min-height:39px}.primary{min-height:48px}}
@media(max-height:520px) and (orientation:landscape){#app{height:100%;width:100%;border-radius:0}.overlay{padding:12px;align-items:flex-start}.overlay .panel{max-width:520px}.hud{padding:8px 14px}.xp-label{margin-top:3px}.subhud{margin-top:5px}.bottomhud{padding:8px 14px}.hearts{font-size:17px}#dash{width:58px;height:58px;border-radius:19px}#startScreen h1{font-size:31px;margin:10px 0}#startScreen h1 br{display:none}.preview-row{display:none}.controls{font-size:10px;margin:6px 0}.panel p{font-size:11px;margin-bottom:8px}.eyebrow{font-size:8px}.connection-box p{margin:4px 0 0}.menu-actions{gap:6px}}
/* 0.3.2: use the current visual viewport, not the stale portrait stable-height. */
html,body{width:100%;height:100%;min-height:0;overflow:hidden;margin:0;padding:0}
body{position:fixed;inset:0;width:var(--app-width,100vw);height:var(--app-height,100dvh);min-height:0;display:flex;align-items:center;justify-content:center}
#app{position:relative;width:100%;height:100%;min-height:0;max-height:100%;border-radius:0;margin:0;border:0;overflow:hidden}
#world{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.hud{padding:calc(10px + var(--safe-top,0px)) calc(12px + var(--safe-right,0px)) 16px calc(12px + var(--safe-left,0px))}
.hudright{gap:8px}.hearts{font-size:18px;max-width:none}.subhud{gap:6px;flex-wrap:wrap}.subhud .smallcap{letter-spacing:1px;font-size:9px}.chips{flex-shrink:0}
.bottomhud{padding:8px calc(12px + var(--safe-right,0px)) calc(10px + var(--safe-bottom,0px)) calc(12px + var(--safe-left,0px));align-items:flex-end;gap:8px}
.hero-switch{display:flex;gap:5px;pointer-events:auto}.hero-switch button{min-width:52px;min-height:48px;border:1px solid var(--line);border-radius:11px;background:#132a22e8;color:#c7d9bd;font-size:18px;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-switch span{font-size:10px}.hero-switch button.selected,.hero-picker button.selected{border-color:#efda8c;background:#37513be8;color:#fff1bd}.hero-switch button:disabled{opacity:.65}
.controlhint{font-size:10px;max-width:38%;margin-left:auto}.controlhint b{display:none}#dash{flex-shrink:0;width:68px;height:68px;min-width:44px;min-height:44px}
.hero-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.hero-picker button{min-height:56px;border:1px solid var(--line);background:#162c24;color:#d5e8c9;border-radius:10px;padding:8px 2px}.hero-picker b{font-size:12px;display:block}.hero-picker small{display:block;font-size:9px;margin-top:5px;color:#b7c9ad}
#continueSaved{margin-bottom:10px;background:linear-gradient(#bde6bc,#81bf9a)}
.overlay{box-sizing:border-box;padding:calc(10px + var(--safe-top,0px)) calc(10px + var(--safe-right,0px)) calc(10px + var(--safe-bottom,0px)) calc(10px + var(--safe-left,0px));align-items:flex-start;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.overlay .panel{max-height:100%;overflow:auto;overscroll-behavior:contain;flex-shrink:0;margin:auto;scrollbar-width:thin;padding:20px}.panel::before{display:none}.panel h1{font-size:38px;margin:12px 0}.preview-row{padding:8px 0;margin:6px 0}.controls{margin-bottom:10px}.connection-box{margin-bottom:10px}.connection-box p{margin:4px 0}.secondary{min-height:44px}
.wallet-display{border:1px solid var(--line);border-radius:10px;padding:10px;margin:10px 0;color:#f3d68a;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}.shop-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:12px 0}.shop-tabs button{flex:1;min-height:40px;font-size:10px;border:1px solid var(--line);background:#122c23;color:#cae0be;border-radius:8px}.shop-tabs button.selected{background:#3b563c;color:#f7e6b6}.shop-card{border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0;background:#10271e80}.shop-card h3{margin:0 0 6px;font-size:14px}.shop-card p{font-size:11px;margin:0 0 8px}.shop-card button{min-height:44px;padding:8px 14px;background:#cfb66d;color:#142c24;border:0;border-radius:9px;font-size:12px;font-weight:700}.shop-card button:disabled{opacity:.5}.shop-card small{display:block;color:#b6c8ab;font-size:10px}.terms-accept{display:flex;align-items:flex-start;gap:10px;font-size:12px;margin:12px 0;line-height:1.5}.terms-accept input{width:20px;height:20px;flex:none}.terms-accept a,.shop-panel a{color:#e7d699}.shop-panel .primary{margin-top:12px}.shop-panel{max-width:540px}.mini-note[role=status]{overflow-wrap:anywhere}#version{z-index:4}
@media (pointer:coarse){.controlhint{display:none}.bottomhud{justify-content:space-between}}
@media (min-width:1000px) and (min-height:650px) and (pointer:fine){#app{width:min(1280px,calc(100% - 24px));height:calc(100% - 24px);border-radius:18px;border:1px solid #526848}.overlay .panel{max-width:470px}}
@media (orientation:landscape) and (max-height:540px){
 .hud{padding-top:calc(5px + var(--safe-top,0px));padding-bottom:8px}.hearts{font-size:15px}.timer{font-size:14px}.iconbtn{width:42px;height:40px}.hudright{gap:7px}.xp-label{margin:2px 0 3px;font-size:9px}.subhud{margin-top:3px;gap:4px}.chip{padding:3px 6px;font-size:10px}.bottomhud{padding-bottom:calc(5px + var(--safe-bottom,0px));padding-top:4px}.controlhint{display:none}.hero-switch button{min-height:44px;min-width:58px}#dash{height:54px;width:62px;border-radius:17px}#dash .glyph{font-size:20px;line-height:20px}#dash .label{font-size:8px}.overlay .panel{max-width:580px;padding:14px}#startScreen .preview-row,.controls{display:none}#startScreen h1{font-size:26px;line-height:1;margin:8px 0}#startScreen h1 br{display:none}.hero-picker{margin:8px 0}.hero-picker button{min-height:48px}#toast{top:50%}#bossbar{position:absolute;top:calc(72px + var(--safe-top,0px));left:27%;right:27%;padding:4px 8px;margin:0}#bossbar .name{font-size:8px;letter-spacing:1px}.choice-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.choice{padding:10px 8px;display:block;min-height:106px}.choice .symbol{font-size:18px;width:auto;display:block;margin-bottom:4px}.choice strong{font-size:11px}.choice small{font-size:10px}#upgradeScreen h2{font-size:20px;margin:5px 0}#upgradeScreen p{font-size:10px;line-height:1.3;margin:4px 0}
}
@media (max-width:370px){.hearts{font-size:15px}.hudright{gap:4px}.hero-switch button{min-width:48px}.subhud .smallcap{max-width:100%;font-size:8px}}
/* Status messages do not cover the touch controls. */
#networkToast{bottom:calc(88px + var(--safe-bottom,0px));left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 32px - var(--safe-left,0px) - var(--safe-right,0px));max-width:600px;padding:9px 12px;font-size:11px;line-height:1.4}
@media(orientation:landscape) and (max-height:540px){#networkToast{bottom:calc(65px + var(--safe-bottom,0px));max-width:550px}}
/* Equipment expansion: readable touch targets and independent panel scrolling. */
.shop-panel{max-width:620px!important}.shop-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.shop-heading button{background:#284336;color:#ead8a5;border:1px solid var(--line);border-radius:10px;min-width:44px;min-height:44px;font-size:23px}
.shop-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.shop-tabs button{font-size:11px;min-height:44px;padding:5px 2px}.shop-tabs button.selected{border-color:#dcc581}.shop-card{overflow:hidden}.shop-card h3{line-height:1.45}.shop-card button{margin:5px 5px 0 0}.shop-card.legendary-card{border-color:#b9954b;background:linear-gradient(125deg,#55482a66,#10271e)}
.item-art{display:grid;place-items:center;color:#abc2a5;width:64px;height:72px;background:radial-gradient(ellipse,#6e8e562e,transparent 70%);flex-shrink:0}.item-art svg{width:100%;height:100%}.item-art.legendary{color:#f6d687;filter:drop-shadow(0 0 7px #f7c66333)}.item-art.epic{color:#cdb0ef}.item-art.rare{color:#93cfe1}.shop-card>.item-art{float:right;margin:0 0 8px 8px}.offer-timer{display:block;font-size:24px;font-variant-numeric:tabular-nums;color:#f2d586;letter-spacing:1px;margin:8px 0 12px}
.character-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.character-picker button{padding:12px 4px;min-height:46px;border:1px solid var(--line);border-radius:10px;background:#19342b;color:#d3e3c8}.character-picker .selected{color:#ffe4a8;border-color:#debd6c;background:#46563b}.gear-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.gear-stats div{border:1px solid var(--line);border-radius:8px;padding:10px 5px}.gear-stats small{font-size:9px}.gear-stats strong{display:block;font-size:17px;color:#e8d797;margin-top:5px}.loadout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.loadout-slot{padding:10px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:6px;background:#102b2388}.loadout-slot>small{font-size:10px;color:#9db59b}.loadout-slot>span{font-size:13px;color:#77927d;min-height:44px;display:flex;align-items:center}.loadout-slot.legendary{border-color:#b99650}.slot-name{background:transparent;border:0;text-align:left;color:#e7e2bd;padding:5px 0;min-height:44px;font-size:12px}
.inventory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.inventory-item{color:#d9e8cc;background:#102b22;border:1px solid #536c57;border-radius:10px;padding:8px 5px;display:flex;align-items:center;flex-direction:column;gap:5px}.inventory-item .item-art{width:42px;height:48px}.inventory-item strong{font-size:11px;line-height:1.4}.inventory-item small{font-size:9px;color:#acbea3}.inventory-item.legendary{border-color:#b18f4b}.inventory-item.selected{outline:2px solid #f6d988;outline-offset:1px}.item-detail{border-color:#b8bd7a}.shop-card button.quiet,.quiet{color:#cadbc1;background:#274337;border:1px solid #526d56;font-size:10px;padding:7px 9px;border-radius:8px;min-height:44px}.gem-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin-top:5px}.gem-insert{display:flex;align-items:center;gap:6px;margin-top:10px}.gem-insert select{min-width:0;flex:1;min-height:44px;border:1px solid #607453;border-radius:8px;background:#163429;color:#e1e7cb;font-size:12px;padding:5px}.shop-panel .mini-note{font-size:11px;text-align:left}#shopNote{min-height:1.5em;color:#e9d29a;font-size:12px}
@media(max-width:370px){.overlay .shop-panel{padding:12px}.gear-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-tabs button{font-size:10px}.inventory-grid{gap:5px}.inventory-item strong{font-size:10px}}
@media(orientation:landscape) and (max-height:540px){.shop-panel{max-width:680px!important}.shop-tabs{grid-template-columns:repeat(8,minmax(0,1fr))}.shop-tabs button{font-size:10px}.gear-stats{grid-template-columns:repeat(7,minmax(0,1fr))}.loadout-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.inventory-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Upgrade rarity uses a label as well as color, including the 2D fallback. */
.choice[data-rarity]{--rarity:#acbaaa;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;min-height:82px;padding:12px 14px;border:1px solid #a4b79b38;border-left:3px solid var(--rarity);background:#9cc79608;box-shadow:none}
.choice[data-rarity="rare"]{--rarity:#92b1c7}
.choice[data-rarity="epic"]{--rarity:#b39abd}
.choice[data-rarity="legendary"]{--rarity:#c5b184}
.choice[data-rarity] .symbol{width:28px;font-size:23px;color:var(--rarity);margin:0}
.choice[data-rarity] .choice-copy{min-width:0}
.choice[data-rarity] strong{margin:0 0 3px;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.choice[data-rarity] .choice-rarity{display:inline-block;color:var(--rarity);font-size:9px;font-weight:600;letter-spacing:.35px;line-height:1.4;margin:0 0 5px}
.choice[data-rarity] small{color:#b8c6b0;font-size:11px;line-height:1.4}
.choice[data-rarity]:hover{background:#bfe7930e;border-color:#a4b79b66;border-left-color:var(--rarity)}
.choice[data-rarity]:focus-visible{outline:2px solid #9eaf97;outline-offset:3px}
@media(orientation:landscape) and (max-height:600px){
 .choice[data-rarity]{display:block;min-height:132px;padding:10px}
 .choice[data-rarity] .symbol{display:none}
 .choice[data-rarity] strong{font-size:12px}
 .choice[data-rarity] small{font-size:10px}
}

/* 0.5 — equipment that fills its slots; readable combat actions on small screens. */
.loadout-slot.epic{border-color:#ac80d0}.loadout-slot.recommended{border-color:#98dfb1;box-shadow:inset 0 0 0 1px #9de4b644}.loadout-slot .slot-item{border:0;background:transparent;color:#e6e9d1;display:flex;align-items:center;gap:8px;text-align:left;padding:0;min-height:72px;width:100%}.slot-item strong{font-size:11px;overflow-wrap:anywhere}.slot-item .item-art{flex:0 0 46px;width:46px;height:58px;margin:0}.slot-item .item-art svg{width:42px;height:52px}.empty-slot-icon{border:1px dashed #87a58d;border-radius:9px;padding:12px;font-size:23px;color:#bad0b9}.upgrade-tip{color:#a6f0be!important;font-size:12px!important}.loadout-slot button.upgrade-tip{background:#244b3b;border:1px solid #77b892;border-radius:7px;min-height:36px}.set-card{padding:15px;background:linear-gradient(130deg,#382e4c,#122b26);border:1px solid #9f7bb5;border-radius:12px;margin:10px 0}.set-card h3{margin:0 0 8px;font-size:16px;color:#e0c8ff}.set-card>strong{font-size:13px;color:#f2d794}.set-card p{font-size:10px;margin:8px 0 0}.set-steps{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.set-steps span{font-size:10px;padding:5px;border:1px solid #576757;border-radius:5px;color:#a5b9a7}.set-steps .active{border-color:#d8ba79;background:#5f5333;color:#ffedb3}.autofill-button{border:1px solid #8dae8b;border-radius:9px;background:#365844;color:#e5f6cd;width:100%;padding:12px;margin:8px 0}
#ability{pointer-events:auto;flex:0 0 76px;width:76px;height:68px;min-height:44px;border-radius:19px;border:1px solid #d2aaf0;background:#39274be8;color:#f6dbff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;touch-action:manipulation}#abilityGlyph{font-size:25px}#abilityLabel{font-size:9px;font-weight:800;max-width:70px}#ability:disabled{color:#b0a1b9;border-color:#776286;background:#2b2634db}.bottomhud{gap:6px}.bottomhud .controlhint{display:none}.hero-switch{margin-right:auto}
#interact{position:absolute;bottom:calc(88px + var(--safe-bottom,0px));left:50%;transform:translateX(-50%);z-index:3;max-width:90%;min-height:44px;padding:10px 17px;background:#604081ed;color:#f5eaff;border:1px solid #d7b3ff;border-radius:12px;font-weight:700;font-size:12px}
#portalHint{position:absolute;top:calc(158px + var(--safe-top,0px));left:12px;z-index:2;padding:5px 8px;background:#231c35db;border:1px solid #ae8dc470;border-radius:7px;color:#e0caff;font-size:10px;pointer-events:none;max-width:65%}
#eliteBar{position:absolute;top:calc(194px + var(--safe-top,0px));left:12px;right:12px;z-index:2;padding:7px 10px;background:#301c34e8;border:1px solid #c796dc;border-radius:7px;pointer-events:none}#eliteBar b{display:block;font-size:9px;color:#efc7ff;margin-bottom:5px}#eliteBar>div{height:5px;background:#51404d}#eliteFill{display:block;height:100%;background:linear-gradient(90deg,#a265d2,#e8b2ec)}
#lootNotice{position:absolute;bottom:calc(139px + var(--safe-bottom,0px));left:12px;z-index:3;max-width:80%;min-height:36px;padding:7px 10px;background:#274b39ef;color:#ceefae;border:1px solid #95c19a;border-radius:8px;font-size:11px}
@media(max-width:370px){.bottomhud{padding-left:7px;padding-right:7px;gap:4px}.hero-switch{gap:3px}.hero-switch button{min-width:43px;font-size:17px}.hero-switch span{font-size:9px}#ability{width:70px;flex-basis:70px}#dash{width:60px;min-width:60px}.slot-item .item-art{flex-basis:36px;width:36px}.slot-item .item-art svg{width:34px}}
@media(orientation:landscape) and (max-height:540px){#ability{height:54px;flex-basis:82px;width:82px;border-radius:15px}#abilityGlyph{font-size:21px;line-height:21px}#abilityLabel{font-size:9px}#portalHint{top:calc(107px + var(--safe-top,0px));left:14px;max-width:37%}#eliteBar{top:calc(110px + var(--safe-top,0px));left:43%;right:14px;padding:5px 8px}#interact{bottom:calc(65px + var(--safe-bottom,0px));min-height:38px;padding:6px 12px}#lootNotice{bottom:calc(62px + var(--safe-bottom,0px));left:12px;font-size:10px;max-width:31%}#eliteBar b{font-size:8px}}
/* Shared realm and safe city. Server simulation continues while any player is fighting. */
#sharedScreen{position:absolute;inset:0;z-index:7;background:#234333;color:#e8ecd8}#sharedCanvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated}.realm-top{position:absolute;top:0;left:0;right:0;padding:calc(8px + var(--safe-top,0px)) calc(10px + var(--safe-right,0px)) 12px calc(10px + var(--safe-left,0px));background:linear-gradient(#10271ff5,#10271fd9,transparent);pointer-events:none}.realm-heading,.realm-vitals{display:flex;align-items:center;gap:8px;justify-content:space-between}.realm-heading>b{font-size:14px}.realm-heading>span{font-size:11px;color:#a0e3c5}.realm-heading button{pointer-events:auto;width:36px;height:36px;border-radius:9px;border:1px solid #70977a;background:#18392f;color:#f0e8cf}.realm-vitals{margin-top:4px;font-size:11px}.realm-vitals>b{color:#ffb6a5;white-space:nowrap;font-size:14px}.realm-vitals>span{font-size:10px;text-align:right}.realm-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:9px;pointer-events:auto}.realm-tabs button{min-height:40px;border:1px solid #678875;border-radius:8px;background:#16362de8;color:#dbeacd;font-size:11px;padding:3px}.realm-tabs .selected{background:#536745;border-color:#e4c880;color:#fff0b1}#realmBuffs{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}#realmBuffs span{font-size:10px;background:#4a355ada;border:1px solid #ab83c9;border-radius:6px;padding:4px 6px}
.realm-controls{position:absolute;bottom:calc(9px + var(--safe-bottom,0px));left:calc(10px + var(--safe-left,0px));right:calc(10px + var(--safe-right,0px));display:flex;align-items:flex-end;gap:6px;pointer-events:none}.realm-controls button{pointer-events:auto;min-width:48px;min-height:52px;border:1px solid #96a578;border-radius:12px;background:#15362dea;color:#e9e5c3;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:22px;touch-action:manipulation}.realm-controls button small{font-size:9px}.realm-controls button:disabled{opacity:.55}#realmHeroes{display:flex;gap:4px;margin-right:auto}#realmHeroes .selected{border-color:#f6d98d;background:#597047}#realmDash,#realmAbility{height:65px;width:65px;flex:0 0 65px;border-radius:19px}#realmAbility{background:#503058e8;border-color:#dcaceb;font-weight:750}#realmNotice{position:absolute;bottom:calc(86px + var(--safe-bottom,0px));left:12px;right:12px;text-align:center;pointer-events:none;padding:9px;background:#192d24e8;border:1px solid #b3bb80;border-radius:10px;font-size:12px;color:#f4dda0}#realmReconnect{position:absolute;inset:35% 18px auto;background:#172f28;padding:20px;border:1px solid #d6ab83;border-radius:13px;z-index:4}#realmReconnect button{padding:10px 16px;background:#e0c57f;color:#233328;border:0;border-radius:8px}
#socialPanel{position:absolute;inset:calc(120px + var(--safe-top,0px)) 10px calc(84px + var(--safe-bottom,0px));z-index:3;padding:14px;background:linear-gradient(135deg,#1a392eeF,#102920f8);border:1px solid #799a7c;border-radius:17px;overflow:auto;overscroll-behavior:contain}.social-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:-14px;background:#19362deb;z-index:2}.social-heading h2{font-size:22px;margin:9px 0 12px}.social-heading button{border:1px solid #83a288;background:#2b4939;border-radius:9px;color:#f1e2bf;width:36px;height:36px;flex-shrink:0}#socialMessage{font-size:12px;color:#f3d798}#socialBody p{font-size:12px}.social-wallet{color:#f0d58e;font-weight:700}.social-card{padding:13px;border:1px solid #5a816e;border-radius:11px;margin:10px 0;background:#112d24a8}.social-card h3{font-size:15px;margin:0 0 8px}.social-card p{margin:5px 0 10px}.social-card label{display:block;font-size:11px;color:#c4d5bc;margin-top:8px}.social-card input,.social-card select{width:100%;min-height:39px;padding:8px;border:1px solid #799273;border-radius:8px;background:#122b24;color:#ece8cf;font:inherit}.social-card button,#socialBody>button{min-height:42px;padding:8px 12px;margin:8px 5px 0 0;border-radius:8px;border:1px solid #d3b773;background:#dbbf7c;color:#1d3326;font-weight:700;font-size:11px}.social-card button:disabled{opacity:.5}.rank-ladder{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.rank-ladder span{padding:6px 8px;border:1px solid #64776a;border-radius:7px;font-size:10px}#socialBody table{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}#socialBody th,#socialBody td{text-align:left;border-bottom:1px solid #54745d;padding:8px 4px;overflow-wrap:anywhere}#socialBody .mine{background:#5c593b;color:#ffedb5}
@media(max-width:370px){.realm-tabs button{font-size:10px}.realm-controls{left:7px;right:7px;gap:4px}.realm-controls button{min-width:43px}#realmDash,#realmAbility{flex-basis:60px;width:60px}#socialPanel{padding:10px}.social-heading h2{font-size:19px}}
@media(orientation:landscape) and (max-height:540px){.realm-top{padding-top:calc(4px + var(--safe-top,0px));padding-bottom:4px}.realm-heading{max-width:50%}.realm-heading button{height:30px;width:30px}.realm-vitals{position:absolute;right:calc(10px + var(--safe-right,0px));top:calc(11px + var(--safe-top,0px));max-width:47%;gap:10px}.realm-vitals>span{max-width:240px}.realm-tabs{margin-top:4px;max-width:650px}.realm-tabs button{min-height:33px}.realm-controls{bottom:calc(5px + var(--safe-bottom,0px))}.realm-controls button{min-height:44px}#realmDash,#realmAbility{height:50px;flex-basis:75px;width:75px}#socialPanel{top:calc(80px + var(--safe-top,0px));bottom:calc(62px + var(--safe-bottom,0px));max-width:720px;left:50%;width:calc(100% - 30px - var(--safe-left,0px) - var(--safe-right,0px));transform:translateX(-50%)}#realmNotice{bottom:calc(65px + var(--safe-bottom,0px));left:25%;right:25%;font-size:11px}#realmBuffs{position:absolute;right:15px;top:72px;max-width:30%}}

.realm-heading #realmOnline{width:auto;height:28px;padding:3px 7px;min-width:58px;color:#a0e3c5;font-size:10px;white-space:nowrap}
.realm-dialog{position:absolute;inset:0;z-index:10;background:#071e18cf;display:grid;place-items:center;padding:20px;overflow:auto}.realm-dialog[hidden]{display:none}.realm-dialog>div{width:100%;max-width:370px;background:#193c30;border:1px solid #d6c084;border-radius:16px;padding:20px;box-shadow:0 12px 60px #0008}.realm-dialog h2{font-size:22px;color:#f0d89b;margin:0 0 14px}.realm-dialog p{font-size:14px;line-height:1.5}.realm-dialog button{width:100%;margin-top:10px;min-height:40px;border-radius:10px;border:1px solid #b8ba8c;background:#e1c57f;color:#17392a;font-weight:700}.realm-dialog pre{white-space:pre-wrap;font:13px/1.6 system-ui}
#realmNetworkWarning{position:absolute;left:12px;right:12px;top:calc(130px + var(--safe-top,0px));z-index:6;background:#513828ed;color:#ffebbe;padding:8px;border:1px solid #dab784;border-radius:8px;font-size:12px;text-align:center;pointer-events:none}
@media(orientation:landscape) and (max-height:540px){#realmNetworkWarning{top:calc(85px + var(--safe-top,0px));left:20%;right:20%}.realm-dialog{padding:8px}.realm-dialog>div{padding:12px;max-width:480px}.realm-dialog h2{font-size:18px;margin-bottom:6px}.realm-dialog p{font-size:12px;margin:4px 0}.realm-dialog button{width:auto;padding:8px 15px;margin:8px 5px 0 0}.realm-dialog pre{margin:3px 0;font-size:11px}}
/* 0.8.6 shop: quiet rarity accents, complete bundle contents and compact navigation. */
.shop-panel .shop-tabs{display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#627661 #142b21;padding:2px 1px 8px;touch-action:pan-x;max-width:100%}
.shop-panel .shop-tabs button{flex:0 0 auto;padding:8px 13px;white-space:nowrap;min-height:44px;font-size:11px}
.shop-panel .wallet-display{font-size:12px;line-height:1.6;color:#dacb9a;overflow-wrap:anywhere}
.shop-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 14px}
.shop-filters label{min-width:0;display:flex;flex-direction:column;gap:5px}
.shop-filters label>span{font-size:10px;color:#adbea5}
.shop-filters select{width:100%;min-width:0;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#193328;color:#dce7cf;font:inherit;font-size:12px}
.shop-panel .equipment-note{margin:10px 0 16px;color:#b1c2aa;line-height:1.65}
.shop-section-heading{margin:22px 0 11px}
.shop-section-heading h3{font-size:14px;margin:0 0 5px;color:#e2dec6;line-height:1.5}
.shop-section-heading p{font-size:11px;margin:0;color:#a9bca3}
.product-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.shop-panel .product-card{display:flex;flex-direction:column;min-width:0;margin:0;padding:13px;border-color:#8da38540;background:#152b2280;overflow-wrap:anywhere}
.product-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.product-heading>div:first-child{min-width:0}
.shop-panel .product-heading h3{font-size:14px;font-weight:650;line-height:1.45;margin:0 0 6px}
.product-heading .item-art{width:38px;height:42px;float:none;margin:0;filter:none;background:none}
.shop-panel .product-quality{font-size:10px;line-height:1.6;color:#a9bca3}
.shop-panel .product-quality.rare{color:#a0c7cb}.shop-panel .product-quality.epic{color:#c0add3}.shop-panel .product-quality.legendary{color:#d7c18a}
.shop-panel .product-description,.shop-panel .product-stats{font-size:11px;line-height:1.55;margin:0 0 8px;color:#b7c7af}
.product-contents{border-top:1px solid #8da38526;margin-top:auto}
.product-contents summary{cursor:pointer;min-height:44px;padding:13px 1px;color:#d0d8bd;font-size:11px;line-height:1.5}
.product-contents summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.product-contents ul{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:9px}
.product-contents li{display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.45}
.product-contents .product-slot{font-size:9px;color:#98af99}
.product-contents strong{font-weight:500;color:#d1dfc6}
.shop-panel .product-card>button{width:100%;min-height:44px;font-size:12px;line-height:1.5;background:#718365;color:#f4efd9;border:1px solid #8f9d79;margin:6px 0 0;padding:9px 8px}
.shop-panel .product-card>button:disabled{opacity:.5}
.product-expiry{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 5px}
.shop-panel .product-expiry .offer-timer{font-size:12px;font-weight:650;letter-spacing:0;margin:0;color:#d1c398}
.shop-panel .payment-note{margin-top:0}
.shop-panel .terms-accept{margin:10px 0 15px;font-size:11px;align-items:center;min-height:44px}
.all-bundles-button{width:100%;min-height:44px;margin:11px 0 0;border:1px solid var(--line);border-radius:10px;background:#284333;color:#e1ddbf;font-size:12px}
.shop-empty{font-size:12px;padding:15px 0;color:#b8c7af}
.shop-panel .autofill-button{min-height:44px;padding:10px 14px;border:1px solid #849578;border-radius:10px;background:#435e42;color:#f0e7bd;font-size:12px}
@media(min-width:600px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:370px){.shop-filters{gap:7px}.shop-filters select{font-size:11px;padding:8px}.shop-panel .product-card{padding:12px}.shop-panel .shop-tabs button{padding:8px 11px}}
.shop-panel .product-piece-stats{font-size:9px;color:#a2b69c;line-height:1.55}
.shop-pending{border:1px solid #a99c6766;border-radius:10px;padding:12px;margin:12px 0;background:#51442c26}
.shop-panel .shop-pending p{font-size:11px;margin:0 0 7px}
.shop-panel .salvage-controls{margin:18px 0;background:#172e2480;border-color:#75886a55}
.salvage-auto{display:flex;align-items:center;gap:10px;min-height:44px;font-size:12px;line-height:1.5;margin:6px 0}
.salvage-auto input{width:20px;height:20px;flex:none;accent-color:#889e6d}
.shop-panel .salvage-controls .mini-note{line-height:1.65;color:#adbea4}
.salvage-preview{margin-top:14px;border-top:1px solid #87966e55;padding-top:14px}
.salvage-preview ul{list-style:none;padding:0;margin:8px 0 12px;max-height:210px;overflow:auto;overscroll-behavior:contain}
.salvage-preview li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:11px;line-height:1.5;border-bottom:1px solid #87966e22}
.salvage-preview li span{min-width:0;overflow-wrap:anywhere}.salvage-preview li strong{flex:none;font-weight:500;color:#cfbe8e}
.salvage-total{display:block;margin:10px 0;font-size:13px;color:#decb94}
.shop-panel .salvage-confirm{background:#8b8560;color:#f8f0d8;border:1px solid #b1a477}
.salvage-item-actions{margin:12px 0;padding:9px 0;border-top:1px solid #82946c44;border-bottom:1px solid #82946c44}
.shop-panel .salvage-reason{margin:8px 0 0;line-height:1.6}.inventory-item .item-protected{color:#d1c08f}
@media(max-width:370px){.salvage-preview li{gap:8px}.shop-panel .salvage-controls>button{width:100%;margin-right:0}.salvage-item-actions button{max-width:100%}}