/* v45: compact field HUD and expandable, data-driven item / technique sheets. */
#game header{height:90px;padding:9px 9px 5px;gap:7px;align-items:flex-start;pointer-events:none}
#game header button{pointer-events:auto}
#game header .portrait{width:44px;height:49px;margin-top:15px;border-radius:22px 22px 8px 8px;position:relative;background-size:132px 88px}
#game header .portrait.rosterPortrait{background-size:264px 176px}
#game header #level{position:absolute;bottom:-7px;left:-2px;width:44px;border:1px solid #b9a063;background:#16372cf2;line-height:14px;border-radius:3px;font-size:10px;font-weight:700}
#game header .identity{flex:none;width:128px;margin-top:10px}
#game header .identity strong{font-size:12px;line-height:15px;max-width:128px}
.powerLine{display:flex;gap:5px;align-items:center;height:17px;color:#ffe5a2}.powerLine span{font-size:9px!important}.powerLine b{font:700 12px var(--font-ui)}
#game .bars{display:grid;gap:2px;margin:0;height:auto;border:0;background:none;overflow:visible;border-radius:0}
.resourceBar{position:relative;height:10px;background:#081a18e0;border:1px solid #b3a07088;overflow:hidden;line-height:8px}
#game .bars i{position:absolute;left:0;top:0;bottom:0;height:100%;border-radius:0;background:linear-gradient(90deg,#962d29,#e3744c);width:0;transition:width .18s}
#game .bars #mp{background:linear-gradient(90deg,#265e89,#69bcd0)}#game .bars #exp{background:linear-gradient(90deg,#837924,#d4cf6f)}
#game .resourceBar label,#game .resourceBar span{position:absolute;z-index:1;font:700 8px/9px var(--font-ui);text-shadow:0 1px 2px #000;top:0;color:#fff6d9}#game .resourceBar label{left:3px}#game .resourceBar span{right:3px}
.currencies{position:absolute;right:7px;top:6px;display:flex;gap:5px;max-width:53%;align-items:center}
#game header .currency{position:static;max-width:none;background:#0b241955;border:0;border-radius:3px;padding:0;display:flex;gap:2px;align-items:center;min-width:30px;height:20px;flex:none}
#game header .currency b{font-size:11px;font-variant-numeric:tabular-nums}.currencyIcon{display:block}.currencyIcon .menuSymbol,#game header .currency .artIcon{height:17px;width:17px;min-width:0;border-radius:50%}.diamondCurrency{color:#85deed}.protectionCurrency{color:#e7c98b}
.headerActions{right:8px;top:32px;gap:7px}.headerActions button,.headerActions #menu{width:29px;height:30px;padding:3px;border:1px solid #c9a96655;border-radius:4px;background:#132c2188;box-shadow:none}.headerActions .menuSymbol{width:24px;height:24px}.headerActions button[hidden]{display:none}
#game .fieldHud{position:absolute;left:9px;right:9px;top:calc(env(safe-area-inset-top) + 97px);width:auto;display:block;pointer-events:none}
#game .fieldHud>*{pointer-events:auto}
#game .fieldHud .location{position:absolute;top:-27px;right:0;left:auto;width:calc(100% - 185px);min-height:23px;padding:3px 5px;margin:0;border:1px solid #bea26777;border-radius:3px;background:#123329b3;display:flex;flex-wrap:nowrap;gap:3px;justify-content:center;font:11px/15px var(--font-ui);color:#eee1b6;text-shadow:0 1px 2px #071b15}
#game .location span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}.location .locationDivider,.location span:last-child{display:none}
#game .fieldHud #quest{position:relative;inset:auto;width:218px;max-width:calc(100% - 105px);padding:5px 6px;border:0;border-left:2px solid #cfb47a;border-radius:0;min-height:0;background:linear-gradient(90deg,#102f23bc,#102f2366);text-align:left}
#game #quest small{font-size:9px;line-height:12px;color:#e5ca8c}#game #quest strong{font-size:11px;line-height:14px;letter-spacing:0;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#game #questProgress{font-size:10px;line-height:13px;color:#dedfca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#game #questRewards{display:flex;align-items:center;gap:4px;margin-top:4px}#game #questRewards[hidden]{display:none}#questRewards>small{color:#bcc6ad!important;font-size:8px!important}.questReward{display:block;position:relative;width:25px;height:25px;flex:none;border:1px solid #b7a46d;background:#10291c;border-radius:3px}#quest .questReward .artIcon{display:block;width:100%;height:100%;border:0;border-radius:2px}#quest .questReward b{position:absolute;bottom:-1px;right:1px;color:#fff5d6;font:700 9px var(--font-ui);text-shadow:0 1px 3px #000,1px 0 2px #000}
#game .questAutoBox{display:flex;width:218px;max-width:calc(100% - 105px);padding:2px 0;gap:5px;background:none;border:0;align-items:center;min-height:0}
#game #questAuto,#game #questAutoHelp,#game .fieldHud #fieldEntry{font-size:10px;line-height:14px;min-height:23px;min-width:0;width:auto;border:1px solid #bba16b88;border-radius:3px;padding:3px 8px;background:#153c2dd1;color:#f1d59f;margin:0}
#game #questAuto[aria-pressed=true]{background:#405c38dd;color:#f3eeb9}#game #questAutoStatus{display:none}#game .questAutoBox.needsAttention #questAuto{border-color:#eea56b}#game .sessionStatus{display:none}
#game .fieldHud #fieldEntry{position:static;inset:auto;background:#20382c99}
#game #bossHud{position:absolute;left:0;right:104px;top:93px;font-size:11px;padding:5px;background:#252b1aca}#bossHud strong{font-size:12px}
#game #mapRail{top:calc(env(safe-area-inset-top) + 99px);right:8px;width:89px;gap:4px}
#game #miniMapToggle{font-size:10px;line-height:14px;min-height:24px;padding:4px}#game #miniMapOpen{height:85px;min-height:0}#game #miniMapCanvas{height:85px;min-height:0}
#game #mapRail #travel{min-height:37px;padding:4px 2px}#game #travel .travelText{font-size:10px;line-height:13px}#game #travel .travelState{font-size:9px;line-height:11px}
#game .fieldShortcuts{display:none}#game #partyMini{font-size:10px;min-height:25px}
#game .side{inset:auto 12px 212px auto;display:block}#game .side [data-panel]{display:none}#game .side #herb{width:37px;height:43px;font-size:10px;border-width:1px}#game .side #herb>.artIcon{height:26px;width:26px}
/* Small translucent bottom sheets. The world never receives a full-screen dimmer. */
#panel.compactArtPanel,#panel.utilityPanel{inset:auto 6px max(5px,env(safe-area-inset-bottom));height:min(490px,60%);max-height:calc(100% - 130px);border:1px solid #bea16bc9;border-radius:5px;background:linear-gradient(145deg,#173c2ceb,#0b2119de)!important;color:#f1e6c8;box-shadow:inset 0 0 0 2px #0b1c1844,0 3px 15px #0005;display:flex;flex-direction:column;overflow:hidden}
#panel.compactArtPanel .panelHead,#panel.utilityPanel .panelHead{padding:2px 7px;min-height:32px;flex:none;background:#1b392bd9;border-bottom:1px solid #b29a6455;gap:5px}
#panel.compactArtPanel #panelTitle,#panel.utilityPanel #panelTitle{font-size:16px;line-height:1.3;display:flex;align-items:center;gap:5px}
#panel.compactArtPanel #panelTitle .artIcon{width:22px;height:22px}#panel.compactArtPanel .panelHead button,#panel.utilityPanel .panelHead button{width:28px;height:28px;font-size:21px;line-height:1}
#panel.compactArtPanel #panelBody{padding:6px 8px;min-height:0;overflow:auto;flex:1;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ab986480 transparent}
.bagSheet{display:flex;flex-direction:column;min-height:100%}.equipmentStage{position:relative;height:150px;min-height:150px;background:radial-gradient(ellipse at 50% 90%,#82945a22,transparent 66%);border-bottom:1px solid #a5986544}
.paperDoll{position:absolute;inset:0 57px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:end;pointer-events:none}.paperDoll canvas{width:142px;height:142px;position:absolute;bottom:15px}.paperDoll strong{z-index:1;font:700 13px var(--font-display);color:#e7d59e}.paperDoll>span{font-size:10px;line-height:15px;color:#c7d1b5}
.equipSocket{position:absolute;width:39px;height:33px;padding:0;border:1px solid #a99865a6;border-radius:3px;background:#122f2399}.equipSocket .artIcon{width:31px;height:31px;border:0;margin:0}.equipSocket small{position:absolute;top:9px;font-size:10px;white-space:nowrap;color:#dddfc2;line-height:14px}.equipSocket:nth-of-type(odd){left:2px}.equipSocket:nth-of-type(even){right:2px}.equipSocket:nth-of-type(odd) small{left:44px}.equipSocket:nth-of-type(even) small{right:44px}.socket0,.socket1{top:0}.socket2,.socket3{top:37px}.socket4,.socket5{top:74px}.socket6,.socket7{top:111px}.equipSocket b{position:absolute;bottom:0;right:0;font-size:8px;line-height:10px;background:#294b35;color:#dddca6;font-weight:400}.emptySocket .artIcon{opacity:.23;filter:grayscale(1)}.equipSocket.grade1{border-color:#74b8c5}.equipSocket.grade2{border-color:#b88bd3}.equipSocket.grade3{border-color:#dcc374}
.bagMeta{display:flex;justify-content:space-between;font-size:10px;padding:4px 1px;color:#c2ccb3}
#panel.compactArtPanel .gearFilters{display:flex;flex-wrap:nowrap;gap:3px;margin:0;padding:0;border-bottom:1px solid #b7a16d77;flex:none}.compactArtPanel .gearFilters button{flex:1;min-width:0;min-height:27px!important;margin:0;padding:4px 6px;font-size:11px!important;background:#132b23;border:1px solid #96825755;border-radius:3px 3px 0 0}.compactArtPanel .gearFilters button[aria-pressed=true]{background:#2a5947!important;color:#f7e4aa!important}.compactArtPanel .gearFilters .slotFilter{flex:none;color:#b5d6b6;font-size:10px!important}
.bagInventory{min-height:99px;max-height:143px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bdaa7288 transparent;padding:5px 0}
#panel.compactArtPanel .inventoryGrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:0}
.compactArtPanel .itemTile,.emptyCell{position:relative;min-width:0;height:45px;padding:0;gap:0;border-radius:3px;background:#0e241d77;border:1px solid #929c744a;display:block;overflow:hidden}
#panel.compactArtPanel .itemTile .artIcon{width:100%;height:100%;border-radius:2px;border:0}.compactArtPanel .itemTile small{position:absolute;bottom:0;right:2px;font-size:9px;line-height:11px;color:#efe4bd;text-shadow:0 1px 2px #000}.equippedMark{position:absolute;top:1px;left:2px;font-size:9px;background:#335537;color:#eaf0b5;padding:0 2px}.compactArtPanel .itemTile[aria-pressed=true]{outline:1px solid #ffdda5;outline-offset:-2px;box-shadow:inset 0 0 0 2px #e8c784}
.bagFoot{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#c0ccb6;padding:3px 0;border-bottom:1px solid #a3916b44}.bagFoot button{padding:3px 5px;background:none;border:1px solid #a38e6055;color:#e2d7ad;border-radius:3px;font-size:10px;min-height:23px}
#panel.compactArtPanel .card{padding:6px 7px;margin:5px 0 0;border-color:#8b9c6c55;border-radius:3px;background:#18382b66;box-shadow:none}
#panel.compactArtPanel .card p{font-size:11px!important;line-height:1.4;margin:3px 0}#panel.compactArtPanel .card button{padding:4px 9px;font-size:11px;min-height:27px;margin-top:3px;border-radius:3px}
#panel.compactArtPanel .card h3{font-size:13px!important;line-height:1.3;margin:1px 0!important}
#panel.compactArtPanel .gearItemTop{margin:0 0 3px;font-size:9px}#panel.compactArtPanel .gearGrade,#panel.compactArtPanel .gearItemTop small{font-size:9px}.compactArtPanel .itemDetailHead{gap:6px}.compactArtPanel .itemDetailHead .artIcon{width:30px;height:30px}.compactArtPanel .gearCompare{padding:3px 0;margin:2px 0!important;border:0}.compactArtPanel .gearItem{position:relative;padding-right:91px!important;min-height:87px}.compactArtPanel .gearItem>[data-equip-item]{position:absolute;right:6px;top:25px;width:80px;line-height:15px;word-break:keep-all}.supplyDetail .itemDetailHead span:not(.artIcon){font-size:11px;color:#ddc685}.bagEmpty{font-size:11px;margin:10px 3px;color:#cad1b5}
/* Skills stay grouped as the catalog grows; only the selected technique has detail. */
.martialToolbar{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:10px;margin:0 0 4px;color:#ccd5b8}.martialToolbar b{font-weight:400}.compactArtPanel .martialAuto{min-height:27px!important;font-size:10px!important;padding:4px 7px;margin:0;background:#335841;border:1px solid #aa9465;border-radius:3px;white-space:nowrap;color:#eee6be}
.martialCatalog{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-height:235px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.skillGroup{border:1px solid #8c9b7150;border-radius:3px;padding:5px;background:#102c2180;min-width:0}.skillGroup:last-child{grid-column:span 2}.skillGroup h3{font-size:12px!important;font-family:var(--font-display);margin:0 0 4px!important;display:flex;justify-content:space-between;align-items:center}.skillGroup h3 small{font:9px var(--font-ui);color:#bbc8ac}
#panel.compactArtPanel .techniqueGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0}.skillGroup:last-child .techniqueGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#panel.compactArtPanel .techniqueTile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 0;border:1px solid transparent;background:transparent;text-align:center;border-radius:3px;min-width:0}
#panel.compactArtPanel .techniqueTile .artIcon{width:40px;height:40px;flex:none;grid-row:auto;border:1px solid #96966e;border-radius:3px}#panel.compactArtPanel .techniqueTile strong{font-size:10px!important;line-height:13px;align-self:center;white-space:nowrap}#panel.compactArtPanel .techniqueTile small{font-size:9px!important;line-height:12px;align-self:center}.compactArtPanel .techniqueTile[aria-pressed=true]{background:#3e604140!important;border-color:#d4bb79!important}.compactArtPanel .techniqueTile.unlearned .artIcon{filter:saturate(.6);opacity:.7}
#panel.compactArtPanel .techniqueTop{gap:6px;flex-wrap:nowrap;min-height:30px}.compactArtPanel .techniqueTop>.artIcon{width:30px;height:30px;flex:none}#panel.compactArtPanel .techniqueTop small{font-size:9px}#panel.compactArtPanel .techniqueState{font-size:9px;margin-left:auto;white-space:nowrap}
#panel.compactArtPanel .techniqueStats{font-size:10px;padding:3px 0;display:flex;justify-content:space-between;border:0;margin:0}.skillActions{display:flex;align-items:center;gap:6px}.skillActions button{flex:1}.skillRequirement,.passiveApplied{font-size:10px;color:#d8d9ac}.passiveApplied{padding:5px 0}.compactArtPanel .bookSources{margin:3px 0;padding:3px 5px;border-radius:2px}#panel.compactArtPanel .bookSources summary{font-size:10px;line-height:15px}.compactArtPanel .bookSources p{font-size:10px!important}.compactArtPanel .card [data-learn-reason]{font-size:10px!important;color:#d2caaa!important;line-height:13px}.compactArtPanel .card [data-learn-reason]:empty{display:none}
.manualSkillBar{display:flex;align-items:center;gap:6px;padding:6px 0 2px;margin-top:3px;border-top:1px solid #aa98614d;font-size:9px;color:#c1caae}.manualSkillBar .artIcon{width:31px;height:31px;border:1px solid #bbac76;border-radius:3px}.manualSkillBar span{font-size:9px}.manualSkillBar b{display:block;font-size:11px;line-height:16px;color:#ead8a5}.manualSkillBar small{font-size:9px;line-height:13px;margin-left:auto;text-align:right}.compactArtPanel .martialGuide{font-size:10px;line-height:1.5;margin-top:4px}.compactArtPanel .martialGuide summary{font-size:10px;color:#c7c8aa}.compactArtPanel .martialGuide p{margin:4px 0}
#panel.utilityPanel{height:auto;max-height:43%}.utilityPanel #panelBody{padding:8px;overflow:auto}.utilitySheet article{display:flex;align-items:center;gap:9px;padding:8px;border-bottom:1px solid #a4a16c55}.utilitySheet article>.artIcon,.utilitySheet article>.menuSymbol{width:30px;height:30px;flex:none}.utilitySheet article>div{flex:1}.utilitySheet h3{font-size:13px;line-height:1.5;margin:0;color:#ecd6a0}.utilitySheet p{font-size:11px;line-height:1.6;margin:2px 0;color:#d2d8bd}.utilitySheet button{font-size:11px;padding:6px;min-height:30px;border:1px solid #bfa265;background:#29503c;border-radius:3px}.utilityCaption{font-size:10px!important;padding:2px 5px}.upcomingShop{display:flex;align-items:center;gap:9px;padding:8px;color:#b9c2ab}.upcomingShop b{display:block;font-size:12px}.upcomingShop small{font-size:10px}.emptyMailbox{text-align:center;padding:13px 4px}.emptyMailbox .menuSymbol{margin:0 auto 6px;color:#c7b07c}.emptyMailbox small{font-size:10px;color:#bcc4a8}.walletSheet h3 b{float:right}.walletSheet article{align-items:start}
@media(max-width:370px){#game header .identity{width:112px}#game header .identity strong{max-width:112px}.headerActions{gap:4px}.headerActions button,.headerActions #menu{width:27px;height:29px}.currencies{gap:3px}#game header .currency b{font-size:10px}.currencyIcon .menuSymbol,#game header .currency .artIcon{width:14px;height:14px}#game .fieldHud .location{width:calc(100% - 168px);font-size:10px}#game .fieldHud #quest,#game .questAutoBox{max-width:calc(100% - 100px)}#panel.compactArtPanel #panelBody{padding:5px 6px}.compactArtPanel .itemTile,.emptyCell{height:40px}.bagInventory{min-height:89px;max-height:132px}.martialToolbar{font-size:9px}.compactArtPanel .martialAuto{font-size:9px!important}}
@media(max-height:700px){#panel.compactArtPanel{height:59%;max-height:calc(100% - 120px)}.equipmentStage{height:117px;min-height:117px}.equipSocket{height:26px;width:33px}.equipSocket .artIcon{width:24px;height:24px}.equipSocket small{top:5px;font-size:9px}.equipSocket:nth-of-type(odd) small{left:38px}.equipSocket:nth-of-type(even) small{right:38px}.socket2,.socket3{top:29px}.socket4,.socket5{top:58px}.socket6,.socket7{top:87px}.paperDoll canvas{width:112px;height:112px;bottom:15px}.bagInventory{max-height:93px;min-height:85px}.martialCatalog{max-height:178px}#game .side{bottom:200px}}
@media(prefers-reduced-motion:reduce){#game .bars i{transition:none}}
#game .fieldHud{max-width:none}.artPanel .supplyDetail .itemDetailHead{flex-wrap:wrap}
/* Leave the field's center above the sheet; only long collections/details scroll. */
#panel.compactArtPanel{height:min(430px,49%)}
.equipmentStage{height:117px;min-height:117px}.equipSocket{height:26px;width:33px}.equipSocket .artIcon{width:24px;height:24px}.equipSocket small{top:5px;font-size:9px}.equipSocket:nth-of-type(odd) small{left:38px}.equipSocket:nth-of-type(even) small{right:38px}.socket2,.socket3{top:29px}.socket4,.socket5{top:58px}.socket6,.socket7{top:87px}.paperDoll canvas{width:112px;height:112px;bottom:15px}
.bagInventory{min-height:89px;max-height:99px}.compactArtPanel .itemTile,.emptyCell{height:40px}.bagMeta{padding:3px 1px}.compactArtPanel .gearItem{min-height:74px!important}.compactArtPanel .gearItem .itemDetailHead .artIcon{width:25px;height:25px}
.skillGroup:last-child{display:flex;align-items:center;gap:7px}.skillGroup:last-child h3{display:block;min-width:47px}.skillGroup:last-child h3 small{display:block;margin-top:4px}.skillGroup:last-child .techniqueGrid{flex:1}.skillGroup:last-child .techniqueTile .artIcon{width:30px!important;height:30px!important}.martialCatalog{max-height:190px}
#game .martialToolbar>span{white-space:nowrap;font-size:10px}.martialToolbar .martialAuto{width:auto!important;flex:none}.manualSkillBar{padding:4px 0 0}.manualSkillBar .artIcon{width:25px;height:25px}#game #miniMapToggle{height:25px}#game .headerActions #menu:after{display:none}
@media(max-height:700px){#panel.compactArtPanel{height:49%}.bagInventory{max-height:88px}.martialCatalog{max-height:178px}}
/* Compact boss name/HP row and dodge guidance, below the character HUD. */
#game .fieldHud #bossHud{position:relative;inset:auto;width:242px;max-width:calc(100% - 100px);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 5px;padding:4px 6px;border-radius:3px;background:#201d29c9;font-size:10px;line-height:1.25;pointer-events:none}
#game .fieldHud #bossHud[hidden]{display:none}
#game #bossName{font-size:11px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#game #bossHp{font-size:9px;line-height:14px;white-space:nowrap}
#game #bossHud .bossHpBar{grid-column:1/-1;height:4px;margin:0 0 1px}
#game #bossCast,#game #bossHint,#game #bossPhaseHint{grid-column:1/-1;font-size:10px;line-height:13px;margin:0;word-break:keep-all;overflow-wrap:anywhere}
#game #bossPhaseHint{font-size:9px;line-height:12px;color:#c9decf}
#game #bossHud.warning{border-left-color:#ffba92;background:#352124d4}