/* Soulshard Saga — responsive fantasy UI. Presentation only; unlocks stay separate. */
:root{--ui-ink:#f5f0ff;--ui-muted:#c6bddc;--ui-gold:#f4d690;--ui-edge:#9e844d;--ui-panel:linear-gradient(150deg,rgba(30,23,56,.96),rgba(12,12,30,.96));--ui-space:12px;--ui-radius:16px}
html,body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.5;color:var(--ui-ink);background:#090818}
html #app{max-width:none;box-shadow:0 0 60px #000b;color:var(--ui-ink);background:#100d24}
html #app *{box-sizing:border-box}html #app [hidden]{display:none!important}
html #app button,html #app input,html #app select,html #app textarea,html #app summary{font-family:inherit;font-size:14px;line-height:1.3}
html #app button,html #app summary{min-width:44px;min-height:44px;touch-action:manipulation}
html #app button{white-space:normal;overflow-wrap:anywhere}html #app button:focus-visible,html #app [role=button]:focus-visible{outline:3px solid #a9caff;outline-offset:2px}
html #app small,html #app .note,html #app .testbadge{font-size:12px;line-height:1.5;color:var(--ui-muted)}
html #app p{font-size:14px;line-height:1.55}html #app h2,html #app h3,html #app h4,html #app .uiSec,html #app .ui-heading{font-family:var(--fd),Georgia,serif;color:var(--ui-gold);line-height:1.35;letter-spacing:.3px}
html #app h2{font-size:17px;margin:20px 0 12px}html #app h3{font-size:21px;margin:4px 0 16px}html #app h4{font-size:16px;margin:18px 0 10px}
html #app .uiSec{font-size:14px;padding:8px 0;margin-bottom:8px;border-bottom:1px solid #a58a4b55;background:none}
html #app .uiPlate,html #app .ui-panel,html #app .row,html #app .story,html #app .tog{border:1px solid #8b765988!important;border-image:none!important;border-radius:var(--ui-radius)!important;background:var(--ui-panel)!important;color:var(--ui-ink);box-shadow:0 5px 18px #0004}
html #app .uiPlate::before,html #app .uiPlate::after{display:none!important}
html #app .ui-panel{padding:16px;margin-bottom:16px}
html #app .row{padding:14px;margin:0 0 12px;gap:12px;min-width:0;align-items:center}
html #app .row .grow{min-width:0}html #app .row .grow>b{font-size:15px;line-height:1.4;display:block}html #app .row .grow>small{display:block;margin-top:4px}
html #app .row .ic{flex:0 0 38px;width:38px;font-size:25px}html #app .row .ic .elimg{width:32px;height:32px}
html #app .row.done{opacity:.8}html #app .story{padding:16px;font-size:14px;line-height:1.6;margin-bottom:14px}
html #app .btn-s,html #app .bigbtn,html #app .btnPurple,html #app .btnBlue,html #app .btnGold{border:1px solid #a68acb!important;border-image:none!important;border-radius:12px!important;padding:12px 14px!important;min-height:48px;font-size:14px;line-height:1.35;box-shadow:inset 0 1px 0 #ffffff20,0 4px 12px #0005;background:linear-gradient(145deg,#543587,#2d2152)!important;color:#fff;filter:none;text-shadow:0 1px 2px #0005;animation:none}
html #app .btnGold,html #app .gold,html #app .bigbtn.gold{background:linear-gradient(145deg,#ffe0a0,#cea150)!important;border-color:#ffe6ac!important;color:#241829!important;text-shadow:none;box-shadow:0 0 15px #dba43d40,inset 0 1px 0 #fff8}
html #app .green{background:linear-gradient(145deg,#396b50,#234235)!important;border-color:#84b694!important;color:#f5fff7}
html #app .gray{background:linear-gradient(145deg,#302c45,#1d1b31)!important;border-color:#756987!important}
html #app button:disabled{cursor:default;opacity:.55;filter:none}
html #app .btns,html #app .btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}html #app .btns>*{flex:1 1 100px;min-width:0;margin:0}
html #app .chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}html #app .chips button{padding:10px 12px;min-height:44px;min-width:44px;border-radius:10px;border:1px solid #796694;background:#27203c;color:#f5edff;font-size:13px;line-height:1.3}
html #app .chips button.on{background:#d3ae67!important;color:#211627!important;border-color:#ffe4ae;font-weight:700}
html #app details.info{margin:12px 0;border:1px solid #615279;border-radius:12px;background:#151125bf;padding:0 12px;color:var(--ui-muted);font-size:14px;line-height:1.55}
html #app summary{padding:12px 0;font-size:14px;cursor:pointer;color:#e4d7ff}
html #app details[open]>summary{border-bottom:1px solid #61527966;margin-bottom:12px}html #app details.info>div,html #app details.info>p{padding-bottom:12px}
html #app input:not([type=range]),html #app select,html #app textarea{background:#100d20;color:#fff;border:1px solid #8a759f;border-radius:10px;padding:12px;min-height:44px;max-width:100%;user-select:text}
html #app input[type=range]{min-height:44px;width:100%}
/* Shared chrome: title + portrait, then two generous currency hit areas. */
html #shell .topbar{position:relative;flex:0 0 auto;display:flex!important;flex-direction:column!important;padding:calc(env(safe-area-inset-top) + 8px) 12px 10px!important;gap:8px;background:linear-gradient(#0a0818fa,#17112def)!important;border-bottom:1px solid #8b765944;z-index:5}
html #app .ui-title-row{display:flex;align-items:center;gap:8px;min-height:44px;width:100%;min-width:0}
html #app .ui-title-row .brand{flex:1;min-width:0;display:flex;gap:8px;align-items:center}
html #app .brand img{width:22px;height:30px}html #app .logo{font:600 17px/1.3 var(--fd);letter-spacing:0;background:none;color:#e5ceff;filter:none;visibility:visible!important;white-space:normal}
html #app .pageTitle{font:600 18px/1.3 var(--fd);color:var(--ui-gold);margin:0;flex:1;min-width:0;white-space:normal;overflow:visible;text-overflow:unset}
html #app .ui-title-row .chrome-back{width:44px;height:44px;flex:0 0 44px;padding:4px;background:#241c38;border:1px solid #7a648e;border-radius:12px;font-size:28px;line-height:1}
html #app .profbtn{position:relative!important;display:flex!important;flex:0 0 auto;align-items:center;gap:8px;padding:4px 8px 4px 4px;background:#21192f;border:1px solid #8a6fab;border-radius:12px;min-height:44px;width:auto;max-width:128px;box-shadow:none}
html #app .profbtn .av{width:34px;height:34px;flex:0 0 34px;border:1px solid #c8b17d;border-radius:50%;overflow:hidden}
html #app .profbtn .pname{font-size:12px!important;line-height:1.2;color:#eee3ff}html #app .profbtn .prank{display:none!important}html #app #profLv{position:static;width:auto;font-size:12px;background:none;border:0;padding:0;color:#ead8ac}
html #app .profbtn .pmeta{display:flex;flex-direction:column;gap:0;min-width:0}html #app .profbtn .dot{width:8px;height:8px;right:-2px;top:-2px}
html #app .ui-cur-row{display:flex;align-items:center;gap:8px;min-height:44px}
html #app #curBar{flex:1;display:flex;gap:8px!important;min-width:0}
html #app .cur .pill{flex:1;min-width:0;min-height:44px;height:44px;padding:6px 10px;border:1px solid #685582;border-image:none;background:#151123;border-radius:24px;display:flex;gap:8px;align-items:center;margin:0;font-size:14px!important;font-weight:600;overflow:hidden}
html #app .cur .pill .ci{width:23px;height:23px;margin:0;flex:0 0 23px}html #app .cur .pill [id]{flex:1;min-width:0;font-size:14px;white-space:nowrap}
html #app .cur .pill .plus{position:static;display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;margin:0;border:1px solid #b399d6;background:#5b388d;border-radius:50%}
html #app .cur .pill .plus::before{position:static;font-size:18px}
html #app .chrome-help{height:44px;width:44px;border-radius:12px;background:#2c2242;border:1px solid #86729d;font-size:19px;flex:0 0 44px;margin:0}
html #app #homeHead,html #app .home-chrome #homeHead,html #app .slim-chrome #homeHead{display:none!important}
html #app .pages{flex:1;min-height:0;margin:0!important;overflow:hidden}
html #app .page{padding:16px 14px 24px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#756087 #130f24;animation:none!important}
html #app #shell::after{background:linear-gradient(#0c091e30,#0a071650 50%,#0a0716d0)}
html #app .nav{flex:0 0 auto;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:8px 8px calc(env(safe-area-inset-bottom) + 8px)!important;border-top:1px solid #9f855559;background:#0c091bf5;box-shadow:0 -8px 18px #0005;z-index:12}
html #app .nav button{width:100%;min-width:0;min-height:58px!important;height:auto;margin:0!important;padding:6px 2px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #665080!important;border-radius:11px;background:linear-gradient(#2c2142,#171126)!important;color:#e4d9f7;font:500 12px/1.2 system-ui!important;letter-spacing:0!important}
html #app .nav button img{width:27px;height:27px;margin:0;transform:none}html #app .nav button span:not(.ndot){display:block;font-size:12px}
html #app .nav button.on{border-color:#debeff!important;background:linear-gradient(#7645bd,#49257d)!important;box-shadow:0 0 14px #a271ee55,inset 0 0 12px #ffffff13;color:#fff}
html #app .nav button.on::after,html #app .nav .nactive,html #app .nav .ndot{display:none!important}
/* Home: scenic art, four clear destinations, horizontal story CTA. */
html #app #pg-home.on{display:block;overflow-y:auto;padding-top:8px}
html #app .ui-home-lineup{height:clamp(190px,29dvh,285px);display:flex;gap:2px;align-items:stretch;position:relative;margin:0 -8px 14px}
html #app .ui-home-lineup .lhero{position:relative;flex:1;min-width:0;max-width:none!important;min-height:0;max-height:none;height:100%;background:none;border:0;padding:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
html #app .ui-home-lineup .fig{position:relative;width:100%;height:calc(100% - 44px);flex:1;min-height:0;display:block}
html #app .ui-home-lineup .por{position:absolute;inset:0}
html #app .ui-home-lineup .hf{--cz:1;--ty:.08}
html #app .ui-home-lineup .plate{position:relative;width:100%;min-height:44px;padding:5px 2px;display:flex;flex-direction:column;gap:0;align-items:center;background:#171025e8;border:1px solid #b19256aa;border-radius:12px;color:#fff;font-size:12px;line-height:1.3}
html #app .ui-home-lineup .hst{font-size:12px;color:#f6cd75;white-space:nowrap}html #app .ui-home-lineup .plate>b{font:600 13px var(--fb);white-space:normal;overflow-wrap:normal}
html #app .ui-home-lineup .elimg{width:14px;height:14px}
html #app .ui-feature{width:100%;display:flex;gap:12px;align-items:center;padding:14px;min-height:96px;margin-bottom:16px;overflow:hidden;text-align:left}
html #app .ui-feature .ui-event-icon{width:34px;height:44px;object-fit:contain;flex:0 0 34px}
html #app .ui-feature .ui-feature-copy{flex:1;min-width:0}html #app .ui-feature b{display:block;font:600 17px/1.3 var(--fb);color:var(--ui-gold);margin:3px 0}
html #app .ui-feature .ui-feature-art{width:66px;height:70px;object-fit:cover;border-radius:10px;flex:0 0 66px}
html #app .ui-home-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
html #app .ui-home-mode{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;min-height:96px;padding:10px 3px!important;border:1px solid #92765b;border-radius:12px;background:linear-gradient(#2d2341ed,#151025f5);color:#f4e5c2;font-size:12px;font-weight:600}
html #app .ui-home-mode img{width:36px;height:36px;object-fit:contain}html #app .ui-home-mode span{font-size:12px;line-height:1.3;min-height:30px;display:flex;align-items:center;text-align:center}
html #app .ui-story-cta{width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:14px;margin:0 0 14px}
html #app .ui-story-cta img{width:36px;height:36px;flex:0 0 36px}html #app .ui-story-cta b{display:block;font-family:var(--fd);font-size:15px;color:var(--ui-gold)}html #app .ui-story-cta small{display:block}
html #app .ui-story-cta .ui-arrow{margin-left:auto;font-size:26px;color:#e2b976}
html #app .ui-home-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}html #app .ui-home-secondary button{padding:12px 4px;border-radius:12px;border:1px solid #695378;background:#1c142dde;color:#dcccff;font-size:12px;min-height:48px}
/* Roster: art first; team and filters are optional accordions. */
html #app .rhead{display:none}html #app .rpanel{padding:12px;margin:0 0 14px}
html #app .ui-team-fold{margin:0;border:0;background:none}html #app .ui-team-fold>summary{padding:2px 0;display:flex;align-items:center;justify-content:space-between;font-size:15px;color:var(--ui-gold)}
html #app .ui-team-fold>summary::after{content:'⌄';font-size:20px}html #app .ui-team-fold[open]>summary::after{content:'⌃'}
html #app .rteam>.uiSec{display:none}html #app .rteam .racts{margin-top:6px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
html #app .rteam .teamrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:12px}html #app .rteam .mini{height:86px;min-height:0;aspect-ratio:unset;min-width:0}
html #app #powerTxt{font-size:14px;color:var(--ui-gold);padding:8px 0}html #app .syn{font-size:14px;line-height:1.6}
html #app #rosterTitle{font:600 18px/1.4 var(--fd)!important;text-align:left!important;margin:0 0 8px!important}
html #app .ui-roster-filters{margin:0 0 14px;background:#120e21;border:1px solid #665279;border-radius:12px;padding:0 12px}
html #app .ui-roster-filters summary{font-size:14px;color:#e2c890}html #app .rtools{display:block;margin:12px 0}html #app .rtools>small{font-size:13px!important;display:block;margin-bottom:6px}
html #app #rosterGrid,html #app .grid.codex,html #app #pfGrid,html #app #pfPickGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html #app .mini{position:relative;min-width:0;overflow:hidden;border-radius:13px;border-width:1.5px;min-height:110px}
html #app .rcard{height:175px!important;aspect-ratio:unset;min-width:0;box-shadow:0 4px 10px #0005}
html #app .rcard .por{position:absolute;inset:0 0 52px}html #app .rcard .rlv{top:7px;bottom:auto;left:5px;font-size:12px;line-height:1.5;padding:1px 4px;background:#120b24e8;border-radius:6px}
html #app .rcard .rbadge{top:7px;right:5px;font-size:12px;line-height:1.2;padding:2px 4px;letter-spacing:0}
html #app .rcard .eb{top:32px;left:5px;width:22px;height:22px}
html #app .rcard .tm{top:31px;right:5px;left:auto;font-size:12px}
html #app .rcard .rfoot{position:absolute;inset:auto 0 0;min-height:52px;padding:4px 3px;background:#120c21ed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
html #app .rcard .rnm{font:600 14px/1.2 var(--fb);color:#fff;max-height:none;white-space:normal;overflow:visible;text-align:center}
html #app .rcard .hst,html #app .mini .hst{font-size:12px;letter-spacing:0;line-height:1.3}html #app .rcard .rst{line-height:1.2}
html #app .mini .lv,html #app .mini .st,html #app .mini .tm,html #app .mini .dup,html #app .rbadge{font-size:12px;line-height:1.3}
html #app .ui-team-return{position:sticky;top:-16px;z-index:5;display:flex;align-items:center;gap:8px;padding:10px;background:#231a3cf5;border:1px solid #c2a167;border-radius:12px;margin:0 0 12px;box-shadow:0 5px 15px #0008}
html #app .ui-team-return b{flex:1;font-size:13px;color:var(--ui-gold)}html #app .ui-team-return button{font-size:13px;padding:8px!important}
/* All dialogs are safe, readable scroll surfaces. Details retain global chrome/nav. */
html #app #modal{padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px);background:#060414c4;backdrop-filter:blur(5px);overflow:hidden}
html #app #modal .box{max-width:min(520px,100%);max-height:100%;width:100%;padding:20px 16px;border:1px solid #b59a65;border-radius:18px;background:var(--ui-panel);color:var(--ui-ink);overflow-y:auto;overflow-x:hidden;font-size:14px;line-height:1.55;text-align:left;box-shadow:0 18px 60px #000a}
html #app #modal .box h3{text-align:center}html #app #modal .box .note{font-size:13px}html #app #modal .box .btns{padding-bottom:2px}
html #app #modal.hdOpen,html #app #modal.bpOpen{padding:0;background:#100c20;backdrop-filter:none}
html #app #modal.hdOpen .box{max-width:100%;border:0;border-radius:0;height:100%;padding:0;background:linear-gradient(#120e2490,#100b20),url(assets/ui/bg-courtyard.webp) center/cover;overflow-y:auto}
html #app .hd{display:block;height:auto;min-height:100%;text-align:left}
html #app .hd .hdtop{position:sticky;top:0;z-index:8;padding:10px 12px;background:#120e24f5;border-bottom:1px solid #8d724d66;display:flex;gap:10px}
html #app .hd .hdtop .back{min-height:44px;padding:10px 12px;background:#2f2245;border:1px solid #876ca6;border-radius:12px;color:#f5e6ff}
html #app .hd .hdbody{display:flex;flex-direction:column;position:static;min-height:0;overflow:visible}
html #app .hd .hart{position:relative;inset:auto;width:100%;height:340px;padding:12px 16px 14px;display:flex;align-items:center;justify-content:flex-end;margin:0;background:linear-gradient(#1b173000,#100c2066),url(assets/ui/bg-courtyard.webp) center 65%/cover;overflow:hidden;flex:0 0 auto}
html #app .hd .hart .fig{position:relative;flex:1;width:100%;height:260px;min-height:0;margin:0;mask:none!important;-webkit-mask:none!important;overflow:hidden;filter:drop-shadow(0 8px 10px #0008);animation:none}
html #app .hd .hart .fig .por{position:absolute;inset:0}html #app .hd .hart .hf{--cz:1;--ty:.06}
html #app .hd .hart .hf>img.hartist{--W:min(100cqw,100cqh*var(--ia));--H:calc(var(--W)/var(--ia));left:calc(50cqw - var(--W)/2);top:calc(100cqh - var(--H))}
html #app .hd .hart .ped,html #app .hd .hart .aura{display:none}html #app .hd .hart .hplate{font-size:13px;padding:5px 12px;margin:0;position:absolute;right:12px;top:12px}
html #app .hd .hart .evsrow{position:relative;max-width:300px;width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;height:50px;margin-top:10px}
html #app .hd .hart .evs{height:50px;min-height:44px;min-width:44px;aspect-ratio:unset;overflow:hidden;border:1px solid #ac8c60;border-radius:8px;cursor:pointer}html #app .hd .hart .evs b{font-size:12px;line-height:16px;background:#100a20d9}
html #app .hd .hpanel{position:relative;margin:0!important;width:100%;height:auto!important;max-height:none!important;overflow:visible!important;padding:18px 14px 24px!important;border:0!important;border-radius:0!important;background:#100d21ee!important}
html #app .hd .hname{font:600 26px/1.25 var(--fb);color:var(--ui-gold);text-align:left;margin-bottom:7px}
html #app .hd .hstars{text-align:left;font-size:20px;line-height:1.4;margin-bottom:6px}html #app .hd .hsub{font-size:13px!important;text-align:left;line-height:1.6;margin-bottom:16px}
html #app .hd .card{padding:14px;margin:0 0 14px;border:1px solid #79628e;border-radius:14px;background:#1b142c}
html #app .hd .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px!important}html #app .hd .stats div{gap:8px;flex-wrap:wrap}html #app .hd .stats b{font-size:17px}
html #app .hd .tree{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hd .tree .tn{font-size:13px!important;gap:8px!important}
html #app .hd .tree .ti{width:48px;height:48px}html #app .hd .tree .tn button{font-size:12px!important;min-height:54px;padding:8px 4px;background:#342449;border:1px solid #8c73a7;border-radius:10px}
html #app .hd .skl{font-size:14px;line-height:1.6;padding:12px;margin-top:12px}
html #app .hd .acts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}html #app .hd .acts button{font-size:13px;min-height:100px;padding:10px 4px;gap:7px;line-height:1.4}html #app .hd .acts button small{font-size:12px}
html #app .hd .slotbtns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}html #app .hd .slotbtns button{min-width:44px;min-height:44px;font-size:17px;padding:8px}
html #app .hd .flav{font-size:14px;color:#c7b9d7;line-height:1.6}
/* Summoning: one banner, art given room, rates remain always visible. */
html #app .ui-banner-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
html #app .ui-banner-tabs button{padding:12px;border:1px solid #836999;background:#1f1732;border-radius:12px;color:#d6c6e9}html #app .ui-banner-tabs button.on{background:linear-gradient(#62408d,#382253);border-color:#c7a0ee;color:#fff}
html #app .ui-summon-card{overflow:hidden;padding:0}.ui-summon-heading{padding:16px;text-align:center}html #app .ui-summon-heading h2{margin:3px 0 6px;font-size:20px}
html #app .ui-summon-art{position:relative;height:270px;background:radial-gradient(ellipse at 50% 70%,#7b48a955,#1a123200 70%);overflow:hidden}
html #app .ui-summon-art .por{position:absolute;inset:0}html #app .ui-summon-art .hf{--cz:1;--ty:.04}
html #app .ui-summon-art .hf>img.hartist{--W:min(100cqw,100cqh*var(--ia));--H:calc(var(--W)/var(--ia));left:calc(50cqw - var(--W)/2);top:calc(100cqh - var(--H))}
html #app .ui-summon-gallery{height:220px;display:flex;gap:4px;overflow:hidden}.ui-summon-gallery>div{position:relative;flex:1;min-width:0}.ui-summon-gallery .por{position:absolute;inset:0}
html #app .ui-summon-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}
html #app .ui-summon-actions button{min-height:64px;font-size:16px;font-family:var(--fb);font-weight:700;padding:10px!important}html #app .ui-summon-actions small{display:flex;justify-content:center;align-items:center;gap:4px;font:500 12px/1.5 system-ui;margin-top:5px;color:inherit}
html #app .ui-summon-actions img{width:18px;height:18px}
html #app .ui-pity{padding:0 16px 16px;text-align:center;font-size:13px;line-height:1.5;color:#e0d1ee}.ui-pity .bar{margin-top:10px}
html #app .ui-rates{padding:14px;margin-bottom:14px}.ui-rates h3{font-size:15px!important}.ui-rates .rates{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.ui-rates .rates span{font-size:13px!important;padding:5px 10px;border-radius:8px;border:1px solid #765685;background:#1a132b}
html #app #results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.results .mini{min-height:140px}
/* Guild: stack mobile sections, never squeeze boss actions beside the crest. */
html #app .gld{display:flex!important;flex-direction:column;gap:16px}html #app .gld .gtop{display:flex!important;flex-direction:column;gap:16px}
html #app .gcrest{display:grid;grid-template-columns:88px minmax(0,1fr);gap:3px 16px;align-items:center;text-align:left;padding:16px;background:#19122ab8;border:1px solid #8b765977;border-radius:16px}
html #app .gcrest>img{grid-row:1/span 6;width:88px;height:116px;animation:none;filter:drop-shadow(0 4px 8px #0008)}html #app .gcrest>b{font:600 21px/1.3 var(--fb);color:var(--ui-gold);margin:0}html #app .gcrest>small{font-size:13px!important;margin:0}html #app .gcrest .bar{grid-column:2;width:100%!important;margin:5px 0}
html #app .graid{padding:16px!important}.graid .gi{display:flex;gap:14px;align-items:center;margin:12px 0}
html #app .graid .gi>img{width:80px;height:80px;object-fit:contain;flex:0 0 80px;background:#110e20;border:1px solid #8b765977;border-radius:12px}
html #app .graid .gi b{font:600 17px/1.4 var(--fb);display:block;color:#f4dfb5}html #app .graid small{font-size:12px;line-height:1.6}
html #app .graid .hpb{height:22px;margin:9px 0 6px}html #app .graid .hpb span{font:600 12px/22px system-ui!important;white-space:nowrap}
html #app .gbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}html #app .gbtns button{font-size:14px;min-height:64px}html #app .gbtns button small{display:block;color:inherit;font-size:12px;margin-top:4px}
html #app .gbtm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}html #app .gbtm button{padding:12px 4px;background:#221831;border:1px solid #79618d;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;font-size:12px}
html #app .gbtm button img{width:32px;height:32px;background:none;border:0;padding:0}.gperks .pk{gap:10px}.gperks .pk div{font-size:13px!important;line-height:1.6}.gperks .lk{font-size:12px!important}.gmsgs{font-size:14px!important;line-height:1.6!important}
/* Preparation: one reading order; team before optional dense details. */
html #app #modal.bpOpen .box{height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;border-radius:0;background:#100d22;display:flex;overflow:hidden}
html #app .bp{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;text-align:left}
html #app .bp .bph{position:relative;flex:0 0 auto;min-height:114px!important;padding:16px 60px 14px 16px!important;display:flex;justify-content:flex-end;align-items:flex-start!important;border-bottom:1px solid #b6986755;background:linear-gradient(#100b2144,#100b21e8),url(assets/ui/vista-pass.webp) center/cover!important}
html #app .bp .bph h3{font:600 20px/1.35 var(--fb);text-align:left;margin:0 0 7px}.bp .bph .sub{font-size:12px!important;line-height:1.5;color:#e4d7ef}
html #app .bp .bph .x{position:absolute;top:12px;right:12px;width:44px;height:44px;background:#302244;border:1px solid #9d80b7;border-radius:50%;padding:0;font-size:20px}
html #app .bp .bpscroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 14px 24px;scrollbar-width:thin}
html #app .bp .vista.vstrip{margin:0 0 12px!important;padding:10px!important;min-height:0!important;height:auto!important;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border:1px solid #6e5378;border-radius:10px;background:#21162e!important}
html #app .bp .vista.vstrip .vb,html #app .bp .vista.vstrip .rec{position:static!important;font-size:12px!important;line-height:1.5;padding:0!important;white-space:normal}
html #app .bp .desc{font-size:14px;line-height:1.6;padding:0;margin:0 0 16px;color:#e2d8ed}
html #app .bp .two,html #app .bp .two+.two{display:flex;flex-direction:column;gap:14px;margin:0 0 14px}
html #app .bp .pnl{padding:14px;border:1px solid #6e587f;border-radius:14px;background:#1b142c}
html #app .bp .boss{display:flex;gap:12px;align-items:center}.bp .boss .bi{width:64px;height:64px;min-width:64px;font-size:38px}.bp .boss b{font:600 17px/1.4 var(--fb);color:var(--ui-gold)}.bp .boss small{font-size:12px!important;display:block}
html #app .bp .traits{font-size:13px;line-height:1.7;padding-left:18px;margin:12px 0 0}.bp .mobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.bp .mob{font-size:12px!important;line-height:1.4;text-align:center;padding:8px 4px}.bp .mob .mi{height:48px;font-size:30px}
html #app .bp .team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible}
html #app .ui-prep-hero{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #8e7167;border-radius:10px;background:#110e21;text-align:left;min-height:80px}
html #app .ui-prep-hero .por{position:relative;width:44px;height:64px;flex:0 0 44px;overflow:hidden;border-radius:6px}.ui-prep-hero .ui-prep-name{min-width:0;flex:1}.ui-prep-hero b{font-size:13px;color:#f2dbad;display:block}.ui-prep-hero small{font-size:12px!important}
html #app .bp .tp{font-size:14px;padding:12px 0 0;display:flex;justify-content:space-between;gap:12px}.bp .tp b{font-size:17px;color:var(--ui-gold)}
html #app .bp .rws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}.bp .rw1{aspect-ratio:auto;min-height:76px;font-size:13px!important;padding:10px;background:#120f22;border-color:#72587e}.bp .rw1 img{width:28px;height:28px}.bp .rw1 .em{font-size:24px}
html #app .bp .adv{font-size:14px;line-height:1.5;margin:14px 0;padding:12px;border:1px solid #67517c;border-radius:10px;display:block}.bp .adv .abar{height:30px;margin-top:8px}.bp .adv .abar span{font:500 12px/1.4 system-ui!important}
html #app .ui-support{border:1px solid #75608c;border-radius:12px;padding:0 12px;background:#19122a;margin:14px 0}html #app .ui-support summary{font-size:14px;color:var(--ui-gold)}
html #app #supGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}html #app #supGrid .mini{height:125px;aspect-ratio:unset;min-height:100px}html #app #supGrid small{font-size:12px!important;line-height:1.4!important;margin-top:6px}
html #app .bp .bpf{flex:0 0 auto;display:grid;grid-template-columns:1fr 1.45fr;gap:10px;padding:12px 14px!important;border-top:1px solid #a98b6066;background:#110e22;box-shadow:0 -6px 20px #0006;position:static}
html #app .bp .bpf button{font-size:14px!important;min-height:52px;padding:10px!important}html #app .bp .bpf #pbGo{grid-column:2;grid-row:1/span 2;min-height:104px;font:700 19px/1.3 var(--fb)!important;align-self:stretch;background:linear-gradient(#ffe5ab,#d5aa57)!important;box-shadow:0 0 15px #dba43d33}
html #app .bp .bpf .sw{grid-column:1;grid-row:2;font-size:12px!important;min-height:44px}.bp .bpf small{font-size:12px!important;color:inherit!important}
/* World / campaign maps and all remaining mode panels. */
html #app #pg-adventure{padding:0;overflow:hidden}html #app #pg-adventure .cwrap{inset:0;bottom:0;margin:0}
html #app #pg-adventure .cquick{display:none}html #app #pg-adventure .ccont,html #app #pg-adventure .cmore{bottom:12px;min-height:56px;border-radius:12px;padding:10px;background:#201632ed;border:1px solid #c1a16e}
html #app #pg-adventure .ccont{left:12px;width:calc(60% - 18px)}html #app #pg-adventure .cmore{right:12px;width:calc(40% - 18px);font-size:13px}html #app .ccont b{font-size:13px;white-space:normal}html #app .ccont small{font-size:12px;line-height:1.3}
html #app .mloc{font-size:12px!important;line-height:1.35;padding:3px 6px;max-width:160px;white-space:normal;text-align:center;background:#150f24ed;border:1px solid #b39660;border-radius:7px;color:#fae8c0}
html #app .mtoken{min-width:44px;min-height:44px}.mtoken small{font-size:12px!important}html #app .mhot{min-width:44px;min-height:44px}
html #app #advHub{max-height:94%!important;padding:12px 14px 24px!important;border:1px solid #a98b60;border-radius:18px 18px 0 0;background:#181125fa;scrollbar-width:thin;overflow-x:hidden}
html #app .ahead{position:sticky;top:-12px;z-index:5;background:#181125f5;padding:4px 0 8px}.ahead h2{font-size:18px!important;margin:10px 0!important}.ahead .x{width:44px;height:44px;border:1px solid #8a70a1;border-radius:12px;background:#312046;font-size:20px}
html #app .hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hub .tile2{padding:14px 10px;min-height:132px;border:1px solid #846a8d;border-radius:14px;background:#241a36;gap:8px}.hub .tile2 b{font-size:15px;line-height:1.4}.hub .tile2 small{font-size:12px!important;line-height:1.5}.tile2 .ic img{width:38px;height:38px}
html #app .mapnav{gap:12px;margin:12px 0}.mapnav b{font-size:17px!important;line-height:1.4}.mapnav small{font-size:12px!important;line-height:1.6}.mapnav button{width:44px;min-width:44px;padding:8px!important}.storydifficulty{justify-content:center}.storydifficulty small{font-size:12px!important}
html #app .storymap{height:670px;border:1px solid #8c744d;background:linear-gradient(#20364ce8,#18362c88),url(assets/ui/map-ground.webp) center/cover;border-radius:16px;overflow:hidden}
html #app .mapnode{width:47%;}.mapnode .stage{min-height:90px;padding:10px 8px!important;gap:6px;border:1px solid #ad915c;border-radius:12px;background:linear-gradient(#30243ef2,#15172af5)}.stage .num{width:30px;height:30px;font-size:16px}.stage .info b{font-size:14px!important;line-height:1.4}.stage .info small{font-size:12px!important;line-height:1.5}.noderewards{display:flex;flex-direction:column;gap:5px;align-items:center}.noderewards button{max-width:100%;font-size:12px!important;padding:8px!important}.stars3{font-size:14px!important}
html #app .mats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.mats>span{font-size:12px!important;padding:6px 10px;border-radius:10px;background:#181126;border:1px solid #635077}
html #app .sweephdr{padding:14px!important}.sweephdr b{font-size:14px!important}
html #app [id^=dun-].row{display:flex;flex-wrap:wrap;align-items:flex-start}.row[id^=dun-]>.grow{flex:1;min-width:200px}.row[id^=dun-] .grow>div{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;margin-top:12px!important}.row[id^=dun-] .grow>div>span{display:flex!important;min-width:0}.row[id^=dun-] .btn-s{width:100%;min-width:0;padding:10px 4px!important;font-size:12px!important}
html #app .passrow{grid-template-columns:32px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch;margin-bottom:10px}.passrow .tn{font-size:16px}.passrow .pr{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:12px 8px;font-size:13px;border:1px solid #715984;border-radius:12px;word-break:normal;overflow-wrap:anywhere}.passrow .pr button{font-size:13px!important;min-height:44px;padding:8px!important}.passrow .pr .elimg{width:18px;height:18px}
html #app .shopgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.shopgrid .pack{padding:18px 10px;min-height:180px;border:1px solid #8b7250;border-radius:14px;background:#24182fed}.shopgrid .pack b{font-size:17px}.shopgrid .pack .ic{font-size:32px}.shopgrid .pack small{font-size:12px!important}.pack .price{font-size:16px}.pack .testbadge{display:block;margin-top:8px;font-size:12px!important}.pack .x2{font-size:12px;padding:3px 7px}
html #app .testbox{padding:14px;border:1px solid #9e855e;border-radius:12px;background:#28203b;font-size:13px;line-height:1.6;margin-bottom:14px}.testbadge{white-space:normal}
html #app .cal{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.cal>div{padding:12px 5px;font-size:13px!important;line-height:1.6}.cal>div b{font-size:24px}
html #app .pfquick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pfquick button{padding:12px 4px;background:#2b1e3e;border:1px solid #8b719f;border-radius:12px;font-size:12px!important}.pfquick img{width:26px;height:26px}
html #app .oddtbl{width:100%;font-size:13px!important;border-collapse:collapse}.oddtbl td,.oddtbl th{padding:10px 5px;white-space:normal}.statline{flex-wrap:wrap}.flav{font-size:14px!important;line-height:1.6}
html #app .vibstyles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vibstyles button{min-height:44px!important;font-size:13px!important}.vibstyles button:last-child{grid-column:1/-1}.vibblock .note{font-size:12px!important}
html #app .lineav small,html #app .friendrow small,html #app .frrow small{font-size:12px!important}html #app .frrow{flex-wrap:wrap}
html #app .chestupgrade{min-height:44px;font-size:13px!important;padding:10px!important}.chestbutton{min-height:140px!important}.mine .note,.towerMine .note{font-size:13px!important}
html #app #toast{font-size:14px;line-height:1.5;white-space:normal;bottom:100px;border:1px solid #9174ad;border-radius:12px;text-align:center;padding:12px 16px;background:#151024f5;max-width:90%}
/* Combat: reserve enough room for enemy portrait, name and HP on short screens. */
html #app #battle{min-height:0;overflow:hidden;padding-top:env(safe-area-inset-top);background:#100c21}
html #app #enemyArea{flex:1 1 auto;min-height:174px;padding-top:0;overflow:hidden}
html #app .bhead{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:44px 22px;align-items:center;gap:4px 6px;padding:6px 8px 0;flex:0 0 auto;min-height:76px;background:linear-gradient(#0c091cef,#0c091c22)}
html #app .bhead #waveTxt{grid-column:1;grid-row:1;min-width:0;font-size:12px!important;padding:4px 8px;white-space:normal;line-height:1.3;border-radius:10px;border:1px solid #9c8358;background:#151025;max-height:44px;overflow:hidden}
html #app .bhead #wheelPill{grid-column:1/-1;grid-row:2;height:20px;padding:0 8px;justify-self:center;min-height:0;font-size:12px;border:0;background:#120e24bf}
html #app #wheelPill .elimg{width:16px;height:16px}html #app .bctl{grid-column:2;grid-row:1;display:flex;gap:4px}.bctl button{width:44px;height:44px;padding:4px!important;font-size:12px!important;background:#322247;border:1px solid #8c709f;border-radius:10px}
html #app .bhead .bset{grid-column:3;grid-row:1;gap:4px}html #app #battleGear,html #app #quitBtn{height:44px;width:44px;min-width:44px;background:#2d203f;border:1px solid #a38469;border-radius:12px;font-size:19px}
html #app #enemies{flex:1;min-height:98px;align-items:flex-end;justify-content:center;padding:8px 8px 10px;gap:12px;overflow:visible}
html #app .enemy{min-width:0;max-width:34%;cursor:pointer;padding-top:4px}html #app .enemy .emo,html #app .enemy.boss .emo{font-size:36px;line-height:1;min-height:46px;height:auto}html #app .enemy .emo .monart,html #app .enemy.boss .monart{width:46px;height:46px}
html #app .enemy .ename{font-size:12px;line-height:1.25;min-height:30px;max-width:100%;white-space:normal;overflow:visible;text-align:center;padding:2px 0}
html #app .enemy .eport{height:50px!important;width:64px!important;max-width:100%;padding:0!important;min-height:0!important}.enemy .eport .monart{width:44px!important;height:44px!important}
html #app .enemy .ehp{height:8px;margin-top:3px;flex-shrink:0}html #app .enemy .ecd{font-size:12px;right:0;padding:1px 4px;top:0}.enemy .eel{left:0!important;top:0!important;width:20px!important;height:20px!important}.enemy .eel img{width:16px!important;height:16px!important}
html #app #teamBar{flex:0 0 28px;min-height:28px;padding:2px 8px;gap:8px}html #app #hpbar{height:20px}html #app #hptext{font-size:12px;line-height:18px;color:#0a341a;text-shadow:none}html #app #chainPill,html #app #movesPill{font-size:12px;min-width:60px;padding:2px 6px;line-height:1.3}
html #app #cards{flex:0 0 auto;gap:6px;padding:4px 8px;height:72px}html #app #cards .hcard{height:64px;min-height:64px;border-width:1px;border-radius:10px}.hcard .atk{font-size:12px!important;bottom:6px!important;background:#100b25c9}.hcard .st{font-size:12px!important}.hcard .eb{width:17px!important;height:17px!important}.hcard .ready{font-size:12px!important;padding:0!important}
html #app #realmBar{flex:0 0 44px;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;background:#171126;border-top:1px solid #6b4f8144;font-size:12px}
html #app #realmStatus{font-size:12px;line-height:1.25;min-width:0}html #app #realmToggle{height:44px;min-height:44px;min-width:66px;margin:0;padding:8px;background:#302046;border:1px solid #8a6aa8;border-radius:10px;font-size:12px}
html #app #boardWrap{flex:0 0 auto;padding:4px 0 calc(env(safe-area-inset-bottom) + 8px);min-height:0;overflow:visible;background:#0d0a1c}
html #app #board{border-radius:12px;box-shadow:0 0 0 1px #8b6f9744;background:#0a0717}
html #app #combo{font-size:18px}html #app #combo span{font-size:14px}
@media(max-width:379px){html #app .profbtn{padding:4px;width:50px;min-width:50px;max-width:50px;justify-content:center}.profbtn .pmeta,html #app #profLv{display:none!important}html #app .ui-home-modes{grid-template-columns:repeat(2,minmax(0,1fr))}html #app .ui-home-mode{min-height:84px;display:grid;grid-template-columns:36px 1fr;padding:12px!important;gap:10px}html #app .ui-home-mode span{text-align:left;font-size:13px;min-height:0}html #app .ui-feature .ui-feature-art{width:50px;height:64px;flex-basis:50px}html #app .nav{gap:4px;padding-left:6px!important;padding-right:6px!important}}
@media(max-width:359px){html #app #rosterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}html #app .rcard{height:205px!important}html #app .bp .team{grid-template-columns:1fr}html #app .row{padding:12px;gap:8px}html #app .row>.btn-s{padding:10px!important}}
@media(min-width:600px){html #app .hd .hdbody{display:grid;grid-template-columns:44% 56%;align-items:start}.hd .hart{position:sticky!important;top:64px;height:560px!important}.hd .hpanel{margin:0!important}.ui-home-lineup{height:360px!important}.ui-home-modes{gap:14px!important}.ui-home-mode{min-height:120px!important}.gld .gtop{display:grid!important;grid-template-columns:40% 60%}.ui-summon-art{height:350px!important}html #app #rosterGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html #app *,html #app *::before,html #app *::after{animation:none!important;transition:none!important}}
html #app #shell #profBtn{display:flex!important}
html #app .storymap{height:840px!important}
html #app .mapnode .stage{min-height:100px}
html #app .profbtn .av .hf{--cz:3.2;--ty:.42}
html #app .profbtn .pmeta{flex:1;min-width:0;gap:2px}
html #app .profbtn .pname{overflow:hidden;text-overflow:ellipsis;max-width:100%;font-family:system-ui;font-weight:500}
html #app .profbtn #profLv{font:500 12px/1.2 system-ui;min-width:0;margin:0;text-align:left}
html #app .ui-enemy-details{border:1px solid #745c88;border-radius:12px;padding:0 12px;margin:12px 0 16px;background:#1b142c}
html #app .ui-enemy-details summary{color:var(--ui-gold);font-size:14px}
html #app .bp .team{grid-template-columns:repeat(2,minmax(0,1fr))}
html #app .bp .bph{min-height:94px!important}
html #app .bp .bpf{padding:10px 14px!important;gap:8px}
html #app .bp .bpf button{min-height:44px}
html #app .bp .bpf #pbGo{min-height:96px}
html #app .enemy::before,html #app .enemy::after{display:none!important}
html #app #pullFx.res{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;padding:calc(env(safe-area-inset-top) + 20px) 14px calc(env(safe-area-inset-bottom) + 16px);gap:14px}
html #app #pullFx.res>*{flex-shrink:0}
html #app .pf-title{font:600 22px/1.4 var(--fd);color:var(--ui-gold);margin:0;padding:12px}
html #app .pf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;align-items:stretch}
html #app .pf-grid .mini{height:190px;min-height:190px;aspect-ratio:unset}
html #app .pf-grid .mini .por{inset:0 0 58px}
html #app .pf-grid .mini .dup,html #app .results .mini .dup{bottom:18px;min-height:28px;display:flex;align-items:center;justify-content:center;font:600 12px/1.2 system-ui;padding:2px;white-space:normal;text-align:center;color:#cfe2ff;background:#1b2441}
html #app .ui-result-name{position:absolute;bottom:48px;left:0;right:0;text-align:center;font-size:14px;font-weight:600;background:#160f28e8;color:var(--ui-gold);line-height:1.4;padding:3px}
html #app .pf-done{position:sticky;bottom:0;min-width:180px;min-height:48px;margin:0 auto!important;border:1px solid #b390d7;box-shadow:0 0 20px #0b071a}
html #app #pullFx .pf-hint{font-size:14px}
html #app #wheelPill .wsep{font-size:12px}
html #app .enemy .ring{display:none!important}
html #app .enemy.tgt .eport{border-color:#ffe4a0;box-shadow:0 0 10px #ddac6266}
html #app .enemy.tgt .ename{color:#ffe0a0}
html #app .bp .bpf{grid-template-columns:1fr 1fr 1.4fr;align-items:stretch;gap:8px}
html #app .bp .bpf #pbEdit{grid-column:1;grid-row:1}
html #app .bp .bpf #pbGo{grid-column:3;grid-row:1;min-height:56px;font-size:17px!important}
html #app .bp .bpf .sw{grid-column:2;grid-row:1;min-height:56px}
html #app .testbadge{color:#36213e!important;font-weight:700}
html #app #expHeroes{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px}
html #app #expHeroes .mini{height:150px;aspect-ratio:unset}
html #app .rcard .rfoot{height:56px}
html #app .rcard .por{bottom:56px}
html #app .rcard .rlv{top:auto;bottom:59px;background:#100a20e8;line-height:1.5}
html #app .ui-event-chapter{flex-wrap:wrap}
html #app .ui-row-actions{display:flex;gap:10px;flex:1 1 100%;min-width:0}
html #app .ui-row-actions button{flex:1;min-width:0}
html #app .enemy .ename{overflow-wrap:anywhere}
html #app .enemy:only-child{min-width:180px;max-width:90%;flex:0 1 auto}
html #app .enemy .ehpn{font:600 12px/16px system-ui;white-space:nowrap}
html #app #shell .brand .logo{display:block!important}
@media(max-width:379px){html #app .ui-home-modes{grid-template-columns:repeat(4,minmax(0,1fr))}html #app .ui-home-mode{display:flex;flex-direction:column;min-height:96px;gap:7px;padding:10px 3px!important}html #app .ui-home-mode span{text-align:center;font-size:12px;min-height:30px}}
html #app #shell .logo{display:block!important;font-size:17px!important}
html #app #uiSummonFooter{flex:0 0 auto;z-index:5;background:#130e24;border-top:1px solid #9f855566;box-shadow:0 -6px 16px #0006}
html #app #uiSummonFooter .ui-summon-actions{padding:10px 14px;gap:10px}
html #app #uiSummonFooter button{min-height:58px;font-size:15px;padding:8px!important}