/* v0.32 — Moonlit fantasy interface, shared across every game screen. */
:root{--game-gold:#edcc80;--game-edge:#937647;--game-panel:#142033;--game-blue:#9bcae9;--game-soft:#abc0d5}
body{background:linear-gradient(#040a15d9,#030711ed),url('assets/media-v20/forest.png') center/cover fixed}
button{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:filter .12s,transform .12s,box-shadow .12s}
button:active,button[data-held]{transform:translateY(2px);filter:brightness(1.15)}
button:focus-visible{outline:3px solid #b2eaff;outline-offset:3px}
button:disabled{cursor:default;transform:none;filter:none}
.game-icon{display:block;width:32px;height:32px;flex:none;filter:drop-shadow(0 2px 1px #060b1580)}
#app,body[data-screen=summon] #app,#app:has(#page-battle:not(.hidden)){max-width:1080px;height:100dvh;border-inline:1px solid #b798573c;background:linear-gradient(#0b1422c9,#0b1525f5 65%),url('assets/media-v20/sky.png') 50% 0/auto 800px;box-shadow:0 0 90px #0008;grid-template-rows:auto minmax(0,1fr) auto auto}
body:not([data-screen=battle]) #app{grid-template-rows:auto minmax(0,1fr) auto}
body:not([data-screen=battle]) #journey-status{display:none!important}
.app-header,body[data-screen=summon] .app-header,#app:has(#page-battle:not(.hidden)) .app-header{grid-template-columns:54px minmax(0,1fr) 42px;gap:0 8px;padding:8px 10px 6px;padding-top:max(8px,env(safe-area-inset-top));background:linear-gradient(#1d2c43,#10192c);border-bottom:2px solid #9e814b;position:relative;z-index:3;box-shadow:0 3px 12px #03071380}
.app-header .brand{display:none!important}
.commander-portrait{grid-column:1;grid-row:1/3;width:52px;height:54px;position:relative;border:2px solid #ddb96d;border-radius:13px 13px 18px 18px;background:radial-gradient(ellipse at 50% 30%,#9184a5,#253149 70%);box-shadow:inset 0 0 0 2px #161e32,0 2px 0 #57442c;padding:0;overflow:visible}
.commander-portrait canvas{width:50px;height:50px;object-fit:contain;position:absolute;left:-1px;top:-3px}
.commander-portrait #player-level{position:absolute;bottom:-3px;left:3px;right:3px;font-size:10px;line-height:15px;background:#1b2031;border:1px solid #a88d5c;border-radius:4px;color:#ffe4a1;padding:0;z-index:1}
.app-header .wallet,#app:has(#page-battle:not(.hidden)) .wallet,body[data-screen=summon] .app-header .wallet{grid-column:2;grid-row:1;display:flex;gap:8px;align-items:center;justify-content:stretch;min-width:0;font-size:13px;padding-top:2px}
.wallet .currency{display:flex;align-items:center;gap:4px;min-width:0;flex:1;border:1px solid #63728d79;border-radius:16px;background:linear-gradient(#080f1e,#162339);height:32px;padding:0 6px 0 1px;box-shadow:inset 0 2px 5px #0005}
.wallet .currency .game-icon{width:29px;height:29px;flex:none}
.wallet .currency b,#app:has(#page-battle:not(.hidden)) .wallet b{font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wallet .gold{color:#ffe1a0}.wallet .diamond{color:#b9e5ff}
.app-header #sound,body[data-screen=summon] .app-header #sound,#app:has(#page-battle:not(.hidden)) #sound{grid-column:3;grid-row:1/3;width:40px;height:40px;min-height:40px;border-radius:10px;background:linear-gradient(#354660,#19263d);border:1px solid #75879d;color:#e8d9af;font-size:21px;box-shadow:inset 0 1px #ffffff25,0 3px #090f1c}
.app-header .xp-track,body[data-screen=summon] .app-header .xp-track,#app:has(#page-battle:not(.hidden)) .xp-track{grid-column:2;grid-row:2;height:4px;margin:5px 2px 0;background:#050e20;border:1px solid #42617b;border-radius:5px;overflow:hidden}
.xp-track i{background:linear-gradient(90deg,#5eb8b9,#b6e9bb);box-shadow:0 0 8px #a7f5c2}
#screens{padding:10px 12px;position:relative}
.page-heading{min-height:42px;border-bottom:1px solid #d6b9764a;margin-bottom:5px;padding-bottom:6px}
.page-heading h1{font-size:21px;letter-spacing:-.7px;color:#ffebbf;text-shadow:0 2px 3px #0006}
.page-heading h1:before{content:'◆';font-size:10px;vertical-align:middle;color:#d4b572;margin-right:9px}
.page-heading>span{font-size:11px;color:#b9cce0}
.page button:not(.primary):not(.result-card):not(.codex-card):not(.dungeon-portal):not(.summon-select):not(.equipment-slot):not(.equipped-slot):not(.party-chip):not([data-upgrade]):not([data-dungeon-level]){box-shadow:inset 0 1px #dceafb12,0 2px #060c1870}
button.primary,.growth-row button:not(:disabled),#page-summon .summon-actions .primary:not(:disabled){border:1px solid #ffe2a0!important;background:linear-gradient(#ffe7a2 0,#f5ca69 16%,#e9b448 85%,#cc9137)!important;color:#382719!important;box-shadow:inset 0 2px #fff4c5,inset 0 -2px #a1692c,0 3px #694520,0 5px 10px #0005!important;text-shadow:0 1px #fff2bb80;font-weight:900;border-radius:9px}
button.primary:disabled,.growth-row button:disabled,#page-summon .summon-actions button:disabled{background:linear-gradient(#334055,#273247)!important;border-color:#536178!important;color:#8e9bad!important;box-shadow:inset 0 1px #8390a130,0 2px #0a1425!important;text-shadow:none;opacity:1}
.segments{background:#091525;border:1px solid #6b738457;padding:3px;border-radius:10px;gap:3px}
.segments button{font-size:12px;color:#a8bed4;background:transparent;border:1px solid transparent;box-shadow:none!important;border-radius:7px}
.segments button.active{background:linear-gradient(#6d5d43,#3b382e);border-color:#d9b979;color:#ffe6b2;box-shadow:inset 0 1px #fde2a83b!important}
#navigation,#app:has(#page-battle:not(.hidden)) #navigation{position:relative;z-index:5;gap:1px;padding:3px 5px calc(5px + env(safe-area-inset-bottom));background:linear-gradient(#31415a 0,#17233b 12%,#0c1425 100%);border-top:2px solid #b69355;box-shadow:0 -6px 24px #040816a6}
#navigation button,#app:has(#page-battle:not(.hidden)) #navigation button{gap:2px;min-height:64px;padding:2px 0!important;overflow:visible;font-size:10px!important;font-weight:800;border-radius:8px;background:none;border:1px solid transparent;color:#a8bdd5;box-shadow:none}
#navigation button:before{display:none!important}
.nav-medallion{width:38px;height:37px;display:grid;place-items:center;position:relative;border-radius:11px;background:radial-gradient(ellipse,#3c5074 0,#18263c 65%);border:1px solid #72839755;box-shadow:0 2px 0 #060c19}
.nav-medallion .game-icon{width:31px;height:31px;filter:saturate(.65) brightness(.9) drop-shadow(0 2px 2px #0008)}
#navigation button.active{color:#ffe4a0;background:linear-gradient(#ffe5a014,#ffe5a005);box-shadow:inset 0 -2px #ebc575;border-color:#d7af5d55}
#navigation button.active .nav-medallion{border-color:#f0d18a;background:radial-gradient(ellipse at 50% 25%,#ba9258,#65503b 70%);box-shadow:inset 0 0 0 2px #ffe19b22,0 0 13px #ecc56a3d,0 3px #090e1b;transform:translateY(-4px)}
#navigation button.active .game-icon{filter:drop-shadow(0 2px 1px #332c1e)}
#navigation .action-badge,#navigation .badge{top:1px;right:8px;width:8px;height:8px;min-width:8px;z-index:2;border:1px solid #fff1c5;background:#f9c85d;box-shadow:0 0 7px #ffdf8f;padding:0;font-size:0}
#navigation #mail-badge{background:#ff827b;border-color:#ffc1a9}
/* Illustrated growth board: the important numbers stay directly beside the action. */
#page-growth{gap:9px}
.growth-hero{height:115px;min-height:115px;position:relative;overflow:hidden;border:1px solid #a68a5b;border-radius:14px 14px 5px 5px;background:linear-gradient(90deg,#0b182feb 22%,#0b182f30),url('assets/media-v20/sky.png') 65% 41%/cover;padding:17px 15px;box-shadow:inset 0 0 0 3px #edd7a30d}
.growth-hero:after{content:'✧';position:absolute;right:14px;top:9px;color:#fff0bb;font-size:25px;text-shadow:0 0 18px #fbefb5}
.growth-hero canvas{width:145px;height:141px;object-fit:contain;position:absolute;right:-9px;bottom:-12px;filter:drop-shadow(0 0 14px #a2c4ff60)}
.growth-hero>div{position:relative;z-index:1;width:74%}.growth-hero small{font:700 9px system-ui;letter-spacing:2px;color:#c1c3e3}.growth-hero h2{font-size:21px;color:#fff0cc;margin:6px 0 8px;letter-spacing:-.7px}.growth-hero p{font-size:10px;margin:0;color:#c2d4eb}.growth-hero strong{color:#fff0b5;font-size:14px;margin:0 8px 0 3px}
#page-growth .growth-hold-note{font-size:10px;color:#aebfd1;margin:1px 0;text-align:right;line-height:1.4}
#growth-quantity{background:linear-gradient(#142338,#0b1628);border-color:#8b774f6b;min-height:41px;border-radius:8px;top:-1px}
#growth-quantity button{min-height:35px;font-size:12px}
.growth-rows{gap:8px}
.growth-row{position:relative;grid-template-columns:44px minmax(0,1fr) 78px;gap:9px;min-height:90px;padding:10px 9px;background:linear-gradient(115deg,#27334af5,#152033f5);border:1px solid #8793a150;border-left:3px solid #a3b6c8;border-radius:10px;box-shadow:inset 0 1px #e1ebff12,0 3px 7px #0002;overflow:hidden}
.growth-row:after{content:'';position:absolute;bottom:0;left:0;height:2px;width:var(--growth,0%);background:linear-gradient(90deg,#e5bc69,#fff1b0);box-shadow:0 0 6px #f9d385}
.growth-icon{height:48px;width:44px;border:1px solid #8097b159;border-radius:11px;background:radial-gradient(ellipse at 50% 25%,#576c8a,#1b293f);box-shadow:inset 0 0 0 3px #0b162640,0 2px #0c1221}
.growth-icon .game-icon{width:34px;height:34px}.growth-icon.critDamage{background:radial-gradient(ellipse at 50% 20%,#785166,#302037)}
.growth-row h2{font-size:13px;line-height:1.4;margin:0 0 4px;letter-spacing:-.3px}.growth-row h2 small{display:block;margin:2px 0 0;font-size:9px;color:#8fa5c0;letter-spacing:0}
.growth-row strong{font-size:14px;font-weight:900;line-height:1.3;color:#fff0c9}.growth-row em{font-size:11px;color:#a4eac7}.growth-row p{display:none}
.growth-row button{min-height:57px;gap:4px;padding:5px;font-size:12px;border-radius:8px}.growth-row button span{font-size:10px;font-variant-numeric:tabular-nums}
.promotion-card{margin-top:2px;background:linear-gradient(110deg,#3a2c48,#1b2340);border:1px solid #a78dba80;border-radius:11px}.promotion-card b{font-size:16px}.promotion-card small{color:#c5abd8}.promotion-card p,.promotion-card span{font-size:10px}
/* Both summon banners keep their illustrations, costs and odds together. */
#page-summon{padding:1px 0 16px;gap:11px}
#summon-heading{font-size:23px;letter-spacing:-.8px}.summon-heading-note{display:none}
.summon-gallery-tools{gap:7px}.summon-gallery-tools #summon-learn{background:linear-gradient(#243e46,#182e3a);border:1px solid #74b7b260;border-radius:9px;color:#b6e5d3;font-size:10px;min-height:37px;padding:6px 9px}.summon-gallery-tools #rates{font-size:10px;color:#c1c9d4;min-height:37px}
.summon-gallery{gap:15px}
.summon-panel,.summon-panel.item{isolation:isolate;border:1px solid #c3a465b0;border-radius:15px;padding:17px 13px 15px;background:linear-gradient(#14213293 0,#101d3350 35%,#101a2ad9 65%,#111e30 82%),url('assets/media-v20/forest.png') 58% 42%/cover;box-shadow:inset 0 0 0 4px #efd69a0a,0 5px 18px #030a1a66}
.summon-panel.item{background:linear-gradient(#271d3da3 0,#221c3c40 36%,#181a32df 65%,#171f34 82%),url('assets/media-v16/summon-chamber-v16.png') center 38%/cover;border-color:#b49bcbbb}
.summon-panel:before{content:'';position:absolute;inset:5px;border:1px solid #e9ca8620;border-radius:10px;pointer-events:none;z-index:-1}
.summon-panel .summon-kicker{font-size:8px;color:#d8c799;margin:0;letter-spacing:2.1px}.summon-select{min-height:19px}.summon-select.action-ready:after{display:none}
.summon-panel h2{font-size:27px;color:#ffebbd;margin:4px 0 3px;letter-spacing:-.9px;text-shadow:0 2px 6px #07121c}
.summon-panel .summon-copy{font-size:10px;color:#d0d9d1;line-height:1.5;margin:0}
.summon-illustration{height:195px;margin:0 0 4px}
.summon-illustration:before{width:157px;height:157px;border:2px solid #edda8760;outline:1px solid #edd58135;outline-offset:9px;background:radial-gradient(ellipse,#e6d88540,#e6d88508 58%,transparent 70%);box-shadow:0 0 22px #dacb8226,inset 0 0 25px #dacb8226;transform:rotate(-15deg)}
.summon-panel.item .summon-illustration:before{border-color:#d3b5fe77;background:radial-gradient(ellipse,#b5a0fc4d,transparent 65%);box-shadow:0 0 35px #c9a0fa30}
.summon-illustration canvas{width:53%;left:23%;max-height:187px;bottom:0;filter:drop-shadow(0 5px 9px #06131eaa)}
.summon-illustration canvas.summon-side{width:40%;max-height:144px;bottom:0}.summon-illustration canvas.summon-side.right{width:41%}
.summon-illustration:after{font-size:21px;right:11%;top:27px}
.summon-panel .summon-rule{min-height:18px;margin:0 0 11px;font-size:9px;color:#e4d4b1}.summon-panel.item .summon-rule{color:#cfbfdc}
.summon-panel .summon-actions{grid-template-columns:1fr 1.65fr;gap:8px}.summon-panel .summon-actions button{min-height:58px;font-size:13px;border-radius:9px;background:linear-gradient(#344761,#1c2f46);border:1px solid #9dacc6;color:#edf5ff;box-shadow:inset 0 1px #d8edff29,0 3px #101b2d;gap:6px}.summon-panel .summon-actions button span{font-size:10px}
.summon-collection{margin-top:15px}.summon-collection>div,.item .summon-collection>div{font-size:9px;color:#b9c7da}.summon-collection-track{height:4px;margin-top:6px;background:#030c1b99;border:1px solid #d1deec18}.summon-collection-track i,.item .summon-collection-track i{background:linear-gradient(90deg,#8ba8c6,#efd991)}
.summon-collection-link{min-height:57px;padding:11px;background:linear-gradient(100deg,#25354b,#142136);border-color:#c4ab6e50;border-radius:10px;color:#e4d2a3;font-size:11px;gap:9px}.summon-collection-link small{font-size:9px;color:#afc0d2}.summon-collection-link b{margin-bottom:3px}.summon-collection-link em{font-size:9px}
.summon-common-rules{font-size:9px;color:#97aec6;line-height:1.7;margin:0}
/* Collection power is visible on the roster and on every catalog card. */
#page-collection{overflow:auto;gap:8px}#page-collection>*{flex-shrink:0}
.collection-power{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;min-height:104px;padding:12px;border:1px solid #b29a67;border-radius:13px;background:linear-gradient(100deg,#223244ed,#173335cc),url('assets/media-v20/forest.png') center/cover}
.collection-power>.game-icon{height:43px;width:43px;filter:drop-shadow(0 0 11px #ead79560)}
.collection-power small{display:block;font-size:9px;letter-spacing:1px;color:#a4d4c5}.collection-power b{display:block;font-size:14px;color:#ffe8b7;margin:5px 0}.collection-power p{font-size:10px;color:#c5d6e2;margin:3px 0}.collection-power em{font-style:normal;color:#f8d77e;font-size:22px}
.collection-power span{font-size:10px;color:#a2b8c9}.collection-power .collection-gain{color:#b4f0c7;font-weight:800}
#page-collection #team-note{font-size:10px;line-height:1.5;color:#abc3d8}
#page-collection #party-slots{flex:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:9px}
#page-collection #party-slots button{min-height:181px;background:radial-gradient(ellipse at 50% 35%,#43516e66,transparent 65%),linear-gradient(#293950,#152039);border:1px solid var(--rarity,#587089);border-radius:12px;padding:8px 5px;overflow:hidden}
#page-collection #party-slots canvas{flex:none;width:100%;height:89px;max-height:89px;min-height:89px}
#page-collection #party-slots .rarity{font-size:10px}#page-collection #party-slots b{font-size:13px}#page-collection #party-slots small,#page-collection #party-slots .party-power{font-size:10px}#page-collection #party-slots .role-tag{font-size:9px}
#page-collection #party-slots .locked-slot{border-color:#3b4d66;background:linear-gradient(#182538,#111d2f);color:#758ba3}
#page-collection #party-slots .empty-slot{border-style:dashed;color:#dbcb9f}
.codex-card{position:relative;background:radial-gradient(ellipse at 50% 30%,#51617b33,transparent 70%),linear-gradient(#25354d,#131d30);border-color:var(--rarity,#617083);box-shadow:inset 0 0 0 3px #f2e0b20a}
.codex-card.unowned{border-color:#5b6a80;box-shadow:none}.codex-card.unowned canvas{filter:grayscale(.85) brightness(.6);opacity:.72}
.codex-perk{display:block;font-size:9px!important;color:#a9e5bd!important;line-height:1.4!important;padding:4px 2px 0;border-top:1px solid #dce7b722;width:100%;text-align:center}
.codex-card.unowned .codex-perk{color:#9eafbf!important}
.collection-bonus{border-color:#b29a6780;background:linear-gradient(110deg,#3a3842,#182b39);gap:5px;padding:12px}
.collection-bonus b{font-size:13px;color:#ffe2a5}.collection-bonus span{font-size:13px;color:#c5f0cc}.collection-bonus small{font-size:10px;line-height:1.6}
.collection-bonus-banner{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid #c6b478;border-radius:9px;background:linear-gradient(105deg,#354c40,#172c39);flex:none}
.collection-bonus-banner .game-icon{width:31px;height:31px}.collection-bonus-banner b{display:block;font-size:12px;color:#fff0bd}.collection-bonus-banner small{display:block;margin-top:3px;color:#b1e9c0;font-size:10px}.collection-bonus-banner em{font-style:normal;font-size:17px;color:#bdecc5}
.unit-collection-perk{margin:0;padding:8px 10px;border:1px solid #a2bd7755;border-radius:8px;color:#bfeac9;font-size:11px;background:#27483b44;text-align:center}
/* Existing dungeon art becomes the navigation, with readable learning content. */
.learning-intro{background:linear-gradient(90deg,#142b38f2,#112536a0),url('assets/media-v20/forest.png') center 42%/cover;border-color:#77b3aa77;border-radius:14px;box-shadow:inset 0 0 0 4px #baf2d309}
.learning-intro>b{font-size:19px;color:#fff0c4}.learning-intro>p{font-size:11px;color:#bdd1df}
.dungeon-portal{position:relative;isolation:isolate;background:linear-gradient(90deg,#152c3ae8,#1a2f3ca3),url('assets/media-v20/forest.png') center/cover;border-color:#87a89b66;border-radius:12px;min-height:79px;overflow:hidden}
.dungeon-portal.grammar{background:linear-gradient(90deg,#27344be8,#1c2d40a3),url('assets/media-v20/glacier.png') center 45%/cover}
.dungeon-portal.sentence{background:linear-gradient(90deg,#302a4ae8,#24244390),url('assets/media-v20/sky.png') center 30%/cover}
.dungeon-portal.selected{border-color:#efd592;box-shadow:inset 0 0 0 1px #cfb47255,0 0 15px #ccad5517;background-color:#374431}
.portal-mark{border:1px solid #e8d59d70!important;background:linear-gradient(#75837766,#243d40)!important;box-shadow:inset 0 0 0 3px #eae9b80a,0 3px #071223;border-radius:10px!important;color:#f6e1a1!important;text-shadow:0 1px #060b17}
.dungeon-levels button{background:linear-gradient(#2d3d56,#16233c);border-color:#76849c66;border-radius:9px;box-shadow:inset 0 2px #d2dded0d,0 3px #091123}
.dungeon-levels button.selected{background:linear-gradient(#6e5b3a,#3c3835);border-color:#efcd83}
.dungeon-entry{border-color:#bca57280;background:linear-gradient(120deg,#302f39,#15273b);border-radius:13px}
.quiz-arena{border-color:#c9ab6a77}.quiz-card{border-color:#798fa565}.quiz-options button{box-shadow:0 3px #06101e,inset 0 1px #e6f3ff10!important}
.equipment-slot{background:radial-gradient(ellipse at 50% 37%,#758ab128,transparent 65%),linear-gradient(#2d3a52,#18243a);border:1px solid #91a1b757;border-radius:12px;box-shadow:inset 0 0 0 3px #b3cee309}.equipment-slot .item-art{filter:drop-shadow(0 3px 8px #0009)}
#page-items #item-slots{flex:none;min-height:0}#page-items .equipment-slot{min-height:163px}#page-items .equipment-slot .item-art{width:75px}
.armory-banner{flex:none;padding:17px 15px;min-height:88px;position:relative;border:1px solid #ada07873;border-radius:12px;background:linear-gradient(90deg,#292438ee,#182b43bb),url('assets/media-v20/glacier.png') center 40%/cover;margin:0 0 5px}
.armory-banner small{display:block;font-size:9px;letter-spacing:2px;color:#a8c6e4}.armory-banner b{display:block;margin-top:6px;font-size:19px;color:#f8e4b9}.armory-banner .game-icon{position:absolute;width:57px;height:57px;right:17px;top:12px;filter:drop-shadow(0 0 13px #c7d2ff50)}
.mail-card{border-color:#9a8a6766;background:linear-gradient(120deg,#29384f,#142338);box-shadow:inset 0 1px #edd9af11}.mail-card h3{color:#f5ddb0}.mail-card .mail-bottom button{background:linear-gradient(#e8d294,#c2a466);color:#293042;border-color:#ffe6b0}
/* Battle HUD and modal chrome retain the existing game layout and hit targets. */
#page-battle>.page-heading{border:0;margin:0;padding:0}
#page-battle>.page-heading button{border:1px solid #b99a62aa;background:linear-gradient(#273b50ec,#152239ee);border-radius:9px;box-shadow:inset 0 1px #f4ddb62a,0 2px #040b1770;color:#f3dcae}
#page-battle #stage-title{font-size:13px;padding:6px 9px}#page-battle #battle-learn{font-size:10px;color:#d4f2d7;background:linear-gradient(#30514e,#1d3d42)}
#page-battle #battle-hud>div:first-child{padding:6px 9px;background:#0a1428ba;border:1px solid #8b9dba66;border-radius:8px}
.hp-track{background:#171326;border:1px solid #77978677;box-shadow:inset 0 2px 3px #0005}.hp-track i{background:linear-gradient(#b9edbb,#62b586 48%,#38845e);box-shadow:inset 0 1px #e8ffdf}
#page-battle .party-chip{border-color:var(--rarity,#b7a477);background:linear-gradient(#23344be8,#0e1d32e8);box-shadow:inset 0 1px #ffedc019}
#page-battle #skill.skill{background:linear-gradient(110deg,#51416d,#2b3557 65%,#192943);border:1px solid #bfaddb;box-shadow:inset 0 1px #e8d7ff3d,0 3px #101727;border-radius:10px;color:#ede3ff;position:relative;overflow:hidden}
#page-battle #skill.skill:before{content:'☾';font-size:32px;color:#fff0b4;position:absolute;left:12px;top:3px;text-shadow:0 0 14px #dcc7ff}
#page-battle #skill.ready{border-color:#fff1b7;background:linear-gradient(110deg,#85674a,#66516f,#344b69);box-shadow:inset 0 1px #fff1bb66,0 0 16px #e0c18233}
#page-battle>.action-row.thirds button{background:linear-gradient(#34435a,#1c2c43);border:1px solid #7b8ca36b;border-radius:8px;font-size:12px;color:#d2deee}
#page-battle .battle-objective{border-color:#c8a3617a;background:linear-gradient(90deg,#38422df5,#1c303cf5);color:#e8dfb0;border-radius:7px;font-size:10px}
#journey-status{background:#0f2030;border-color:#57687d60;font-size:9px!important}#journey-status button{min-height:28px!important;font-size:10px!important}
.overlay-shell{border:1px solid #c7a46d80;background:linear-gradient(#24354b,#111d30 45%,#14243b);box-shadow:inset 0 0 0 4px #edddc20a,0 15px 70px #000b;border-radius:16px}
.overlay-heading{border-bottom:1px solid #ba9c665f}.overlay-heading h2{color:#ffe6b6;font-size:20px}.overlay-back-row button{background:linear-gradient(#263851,#17253b);border-color:#8e98aa60;border-radius:8px;font-size:14px}
#overlay[data-type=portal] .overlay-back-row,#overlay[data-type=portal] #overlay-actions{display:none}
#overlay[data-type=portal] .overlay-heading{text-align:center;justify-content:center}#overlay[data-type=portal] .overlay-heading h2{font-size:18px}
.moon-descent{cursor:pointer}.portal-rarity{font-size:12px;text-align:center;color:#e3d3ac}.summon-touch-hint{position:absolute;bottom:17px!important;left:0!important;right:0!important;width:100%!important;font-size:11px!important;color:#e0e8fa!important;letter-spacing:1px;pointer-events:none}
#hold-status{position:fixed;z-index:10000;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:92vw;padding:8px 16px;border:1px solid #f7d188;border-radius:24px;background:#142138ed;color:#ffe9ba;font-size:11px;white-space:nowrap;pointer-events:none;box-shadow:0 4px 20px #0008}
@media(min-width:720px){
  .app-header,body[data-screen=summon] .app-header,#app:has(#page-battle:not(.hidden)) .app-header{grid-template-columns:58px minmax(0,1fr) 46px;gap:10px;padding-inline:20px}.app-header .wallet{max-width:490px}.wallet .currency{height:34px}.wallet .currency b{font-size:15px}#screens{padding:13px 22px}.page-heading h1{font-size:25px}
  .growth-hero{height:144px;min-height:144px;padding:24px 25px}.growth-hero canvas{width:220px;height:190px;right:16px;bottom:-22px}.growth-hero h2{font-size:30px}.growth-hero p{font-size:12px}.growth-hero strong{font-size:18px}.growth-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.growth-row{min-height:94px;grid-template-columns:48px minmax(0,1fr) 95px;padding:12px}.growth-row h2{font-size:15px}.growth-row strong{font-size:16px}.growth-row em{font-size:13px}.growth-row button{min-height:61px;font-size:14px}.growth-row button span{font-size:11px}.growth-icon{width:48px;height:50px}
  #navigation{padding-inline:16px}#navigation button{min-height:72px;font-size:12px!important}.nav-medallion{width:42px;height:40px}.nav-medallion .game-icon{width:35px;height:35px}
  #page-summon{padding:0 0 20px;gap:12px}.summon-panel{padding:20px 20px 17px}.summon-panel h2{font-size:30px}.summon-illustration{height:222px}.summon-illustration canvas{max-height:218px}.summon-illustration canvas.summon-side{max-height:172px}.summon-panel .summon-actions button{min-height:62px}.summon-panel .summon-copy{font-size:12px}.summon-panel .summon-rule{font-size:10px}
  #page-collection #party-slots{grid-template-columns:repeat(5,minmax(0,1fr))}#page-collection #party-slots button{min-height:222px}#page-collection #party-slots canvas{height:111px;max-height:111px;min-height:111px}.collection-power{min-height:105px}.collection-power b{font-size:18px}.collection-power p{font-size:13px}.collection-power span{font-size:12px}.collection-power small{font-size:10px}
  .codex-card canvas{height:120px}.codex-perk{font-size:11px!important}#page-items .equipment-slot{min-height:210px}#page-items .equipment-slot .item-art{width:105px}
}
@media(max-width:380px){
  #screens{padding:8px}.app-header,body[data-screen=summon] .app-header,#app:has(#page-battle:not(.hidden)) .app-header{gap:0 6px;padding-inline:7px;grid-template-columns:50px minmax(0,1fr) 37px}.commander-portrait{width:47px;height:50px}.commander-portrait canvas{width:45px;height:47px}.wallet .currency{padding-right:4px;gap:1px}.wallet .currency b{font-size:12px!important}.wallet .currency .game-icon{width:25px;height:25px}.app-header #sound{width:36px!important;height:38px!important;min-height:38px!important}
  .growth-row{grid-template-columns:40px minmax(0,1fr) 75px;gap:7px;padding:9px 8px;min-height:89px}.growth-icon{width:40px;height:45px}.growth-icon .game-icon{width:31px;height:31px}.growth-row h2{font-size:12px}.growth-row strong{font-size:13px}.growth-row em{font-size:10px}.growth-hero{height:107px;min-height:107px;padding:14px 12px}.growth-hero h2{font-size:19px}.growth-hero canvas{right:-19px;width:136px}.growth-hero p{font-size:9px}.growth-hero strong{font-size:12px}
  .summon-panel{padding:16px 11px 13px}.summon-panel h2{font-size:26px}.summon-illustration{height:171px}.summon-illustration canvas{max-height:170px}.summon-illustration canvas.summon-side{max-height:127px}.summon-panel .summon-actions button{min-height:55px;font-size:12px}.summon-panel .summon-rule{font-size:9px}#summon-heading{font-size:21px}
  .nav-medallion{width:35px;height:34px}.nav-medallion .game-icon{width:29px;height:29px}#navigation button,#app:has(#page-battle:not(.hidden)) #navigation button{min-height:60px;font-size:9px!important}.collection-power{grid-template-columns:37px minmax(0,1fr) auto;gap:7px;padding:11px 9px}.collection-power>.game-icon{width:35px;height:35px}.collection-power b{font-size:13px}
}
@media(max-height:570px){
  .app-header,body[data-screen=summon] .app-header,#app:has(#page-battle:not(.hidden)) .app-header{padding-top:3px;padding-bottom:3px}.commander-portrait{height:43px;width:43px}.commander-portrait canvas{width:40px;height:42px}.nav-medallion{width:26px;height:24px}.nav-medallion .game-icon{height:24px;width:24px}#navigation button,#app:has(#page-battle:not(.hidden)) #navigation button{min-height:45px;padding:1px 0!important;gap:1px;font-size:9px!important}
  .growth-hero{min-height:84px;height:84px;padding:8px 15px}.growth-hero>div{display:grid;gap:2px;align-content:center;height:100%}.growth-hero small{display:block;line-height:12px}.growth-hero h2{font-size:18px;line-height:22px;margin:0}.growth-hero p{font-size:10px;line-height:18px}.growth-hero strong{font-size:14px}.growth-hero canvas{height:110px;width:130px}.overlay-heading h2{font-size:15px}.overlay-shell{border-radius:9px}.summon-illustration{height:150px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}.game-icon{animation:none}}

.promotion-card{grid-template-columns:56px minmax(0,1fr) 67px;gap:8px}.promotion-avatar{height:86px;position:relative;border-radius:10px;background:radial-gradient(ellipse,#b9a6ff38,transparent 70%)}.promotion-avatar canvas{width:72px;height:78px;position:absolute;left:-8px;bottom:7px;object-fit:contain}.promotion-avatar small{position:absolute;bottom:-1px;left:0;right:0;text-align:center;font:800 8px system-ui;color:#e6d6ff;letter-spacing:1px}.promotion-card button{padding:6px;font-size:12px}.growth-hero.promoted{animation:promotion-glow 1.2s ease-out}.promotion-card p{font-size:10px}.promotion-card span{font-size:9px}@keyframes promotion-glow{0%,30%{box-shadow:inset 0 0 60px #fcebc7aa,0 0 30px #fce3a6}100%{box-shadow:none}}@media(prefers-reduced-motion:reduce){.growth-hero.promoted{animation:none}}