/* 운림기 · 한지와 먹. Reading surfaces are opaque; only field HUD is translucent. This stylesheet changes presentation only, after legacy component styles. */ #game{ --ui-paper:#f2eee4;--ui-sheet:#faf7ef;--ui-wash:#e7e1d4;--ui-line:#c9c0ae; --ui-ink:#302f2b;--ui-muted:#5b5850;--ui-accent:#425264;--ui-brass:#765523; --ui-red:#a63434;--ui-green:#31654a;--ui-field:rgba(25,28,30,.83); } #game #panel,#game #panel.floatingPanel{ color:var(--ui-ink)!important;background:var(--ui-paper)!important; border:1px solid #a49b89;border-radius:3px;box-shadow:0 10px 28px #0005;backdrop-filter:none; } #game #panel .panelHead,#game #panel.floatingPanel .panelHead{ color:var(--ui-ink);background:#e6dfd1;border-bottom:1px solid #bbb09b;box-shadow:none; } #game #panel .panelHead #panelTitle{color:var(--ui-ink);font-family:var(--font-display);font-weight:700;letter-spacing:0;text-shadow:none} #game #panel.floatingPanel #panelTitle:after{content:none} #game #panel .panelHead :is(#panelBack,#panelReset,#close){color:var(--ui-ink);background:transparent;border:1px solid transparent;border-radius:2px;box-shadow:none} #game #panel .panelHead :is(#panelBack,#panelReset,#close):hover{background:#d8cebb;border-color:#b9ab91} #game #panel #panelBody{color:var(--ui-ink);scrollbar-color:#a79c88 #e6dfd2;line-height:1.5} #game #panel #panelBody :is(h2,h3,h4){color:var(--ui-ink);text-shadow:none;letter-spacing:0} #game #panel #panelBody :is(input:not([type=checkbox]):not([type=range]),select,textarea){color:var(--ui-ink);background:var(--ui-sheet);border:1px solid #b7ad98;border-radius:2px;box-shadow:none;color-scheme:light} #game #panel #panelBody input::placeholder,#game #panel #panelBody textarea::placeholder{color:#79756b} #game #panel #panelBody :is(button,.button):where(:not(.weaponShopBanner):not(.transformShopBanner):not(.gameMenuTile):not(.transformCard):not(.techniqueTile):not(.itemTile):not(.atlasPin)){color:var(--ui-ink)!important;background:#e9e2d3!important;border-color:#baad94;border-radius:3px;box-shadow:none;text-shadow:none;font-weight:600} #game #panel #panelBody button:disabled{opacity:.48;cursor:default;box-shadow:none} #game #panel #panelBody button:focus-visible,#game #panel .panelHead button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px} #game #panel #panelBody button:not(:disabled):hover{border-color:#6b6b60;filter:brightness(.98)} /* Paper sections: one line per grouping instead of a stack of gold frames. */ #game #panel #panelBody :is(.card,.communityCard,.communityRows article,.communityConfirm,.communityHero,.huntingSummary,.huntingRegion,.soundCard,.nowPlaying,.dailyCard,.dailyIntro,.dailyWarning,.characterGuide,.characterIdentity,.attributeCard,.attributeDetailsNote,.attributeFooter,.alignmentStatus,.itemDetail,.inventoryHead,.equipmentBox,.bagSection,.gearPresetBar,.workWallet,.workshopCard,.workSummary,.enhanceStock article,.enhanceTray article,.batchCost,.batchEnhance,.mainEnhance,.craftCard,.craftRecipe,.potionCard,.supplyDetail,.lootGuide,.codexCard,.codexHeading,.transformSetCard,.transformSetSummary,.transformIntro,.transformActive,.transformDetail,.transformQuickActions,.transformSummon,.transformConfirm,.transformMilestones,.mythicTrialNotice,.arenaDailyReward,.arenaOpponent,.arenaHero,.arenaHistory article,.rankingMine,.rankRow,.seasonCard,.pkSummary,.pkRules,.bossCard,.bossHero,.bossGuide,.atlasRow,.atlasModeHelp,.guideObjective,.areaGuideNow,.areaGuideNext,.areaTrail,.expeditionCard,.clanRecruit,.clanGrowthCard,.clanVaultSummary,.accountLinkForm,.performanceCard,.huntSettingCard,.npcShopCard,.npcForge,.npcServiceCard,.npcDialogue,.mailCard,.commerceConfirm,.couponEntry,.coinSummon,.passTier,.commerceWallet,.passLabels,.beginnerLesson,.fusionRecipe,.fusionResult,.fusionCard,.fusionSummary,.fusionTray,.enhanceModeTabs button){ color:var(--ui-ink);background:var(--ui-sheet);border-color:var(--ui-line);border-radius:3px;box-shadow:none;text-shadow:none; } #game #panel #panelBody :is(.communityHero,.dailyIntro,.transformIntro,.arenaHero,.characterIdentity,.codexHeading,.mailIntro){border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:transparent} #game #panel #panelBody :is(.characterGuide,.attributeFooter,.workWallet,.batchCost,.commerceWallet,.clanRecruit,.guideObjective,.transformQuickActions,.transformSetSummary){background:var(--ui-wash)} #game #panel #panelBody :is(.characterSheet,.communityPanel,.bagSheet,.workshop,.transformationPanel,.lootGuide,.atlasShell,.fusionPanel,.npcPanel,.commerceShell,.rankingView,.soundIntro,.potionIntro,.huntIntro){color:var(--ui-ink)} /* Secondary copy has a single readable ink tone; reward art and rarity labels keep their colors below. */ #game #panel #panelBody :is(.card,.characterSheet,.communityPanel,.bagSheet,.workshop,.transformationPanel,.lootGuide,.atlasShell,.fusionPanel,.npcPanel,.commerceShell,.rankingView,.soundCard,.soundIntro,.potionIntro,.potionCard,.dailyCard,.dailyIntro,.huntIntro,.huntSettingCard,.performanceCard) :is(p,small,dt,label){color:var(--ui-muted)} #game #panel #panelBody :is(.attributeStat,.attributeName,.attributePointSummary,.attributeStats,.attributeIntro,.attributeEffectHint,.attributeDetailsNote,.characterIdentity,.alignmentStatus,.workWallet,.itemDetailHead,.itemStats,.gearSetSummary,.batchCost,.transformActive,.transformQuickHeading,.transformRole,.transformCompare,.transformHelp,.transformNotice,.transformStory,.transformSetHelp,.transformSetEffects,.transformSetMembers,.codexCount,.codexHint,.codexDetail,.lootSourceRows,.dailyState,.dailyProgress b,.dailyNumber,.dailyReward,.dailyFoot,.commerceWallet,.mailHeading,.mailBottom,.mailIntro,.commerceHint,.commerceStatus,.passLabels,.pityLine,.coinSummon,.oddsGrid,.memberDaily,.arenaDescription,.arenaRules,.arenaScore,.arenaDailyHeading,.arenaDailyReward p,.arenaDailyReward>small,.rankingHeader,.rankingRule,.rankingMine,.rankPerson,.rankValue,.rankingStamp,.communityToolbar,.communityEmpty,.communityWallet,.communityPanel>small,.clanJoinTag,.chatContext,.chatMeta,.chatFoot,.chatHistoryHint,.chatPreferences,.reportBox,.reportItem,.reportNotice,.soundFoot,.soundStatus,.nowPlaying,.npcCopy,.npcWallet,.npcIntro,.performanceNote,.accountSettingLinks,.huntSettingsHelp){color:var(--ui-muted)} #game #panel #panelBody :is(.characterIdentity h3,.attributeName strong,.attributeStat b,.attributePointSummary strong,.itemDetailHead h3,.itemDetailHead strong,.itemStats b,.workWallet b,.batchCost b,.transformActive strong,.transformDetail h4,.transformCard b,.transformQuickHeading,.transformSetSummary b,.codexCard h3,.codexHeading h3,.dailyCardHead h3,.dailyProgress b,.mailHeading strong,.passTier b,.arenaHero b,.arenaDailyHeading strong,.rankingMine strong,.rankPerson b,.rankValue,.communityHero h3,.communityEmpty h3,.nowPlaying strong,.npcCopy h3,.performanceCard h3){color:var(--ui-ink)!important} /* Tabs are quiet until selected. A solid slate fill and underline carry selection. */ #game #panel #panelBody :is(.lootTabs,.codexCategories,.transformPageTabs,.transformFilters,.transformQuickLinks,.commerceTabs,.workTabs,.enhanceModeTabs,.chatTabs,.chatFilters,.rankingTabs,.arenaTabs,.clanTabs,.marketTabs,.fusionTabs,.atlasModes,.atlasTabs,.pkTabs,.accountTabs,.communityTabs) button{ color:#5c5c55!important;background:#e6dfd1!important;border:1px solid #c1b6a1!important;border-radius:2px;box-shadow:none!important;text-shadow:none; } #game #panel #panelBody :is(.lootTabs,.codexCategories,.transformPageTabs,.transformFilters,.transformQuickLinks,.commerceTabs,.workTabs,.enhanceModeTabs,.chatTabs,.chatFilters,.rankingTabs,.arenaTabs,.clanTabs,.marketTabs,.fusionTabs,.atlasModes,.atlasTabs,.pkTabs,.accountTabs,.communityTabs) :is(button[aria-pressed=true],button[aria-selected=true],button.selected,button.active){ color:#fffaf0!important;background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;box-shadow:inset 0 -2px #ba9c64!important; } #game #panel #panelBody :is(.lootTabs,.chatTabs,.chatFilters) button[aria-pressed=true]::before{content:none} #game #panel #panelBody :is(.enhanceModeTabs small,.enhanceModeTabs b){color:inherit!important} #game #panel #panelBody :is(.itemActions,.dailyActions,.dialogueActions,.batchActions,.communityConfirm,.reportActions) button:first-child, #game #panel #panelBody :is(#attributeApply,.arenaMatch,.commerceUseButton,[data-mail-claim],[data-codex-detail],.codexBack,.chatCompose button){color:#fffaf0!important;background:var(--ui-accent)!important;border-color:var(--ui-accent)} /* Menu overview: existing painted icons, simple rows and ample touch targets. */ #game #panel #panelBody .menuGroup{border-color:var(--ui-line);margin-bottom:12px} #game #panel #panelBody .menuGroup h3{color:var(--ui-muted);font:600 11px/1.4 var(--font-ui);margin:4px 0 8px;letter-spacing:.04em} #game #panel #panelBody .gameMenuTile{border:0;border-radius:2px;background:transparent;padding:5px 2px;color:var(--ui-ink);box-shadow:none} #game #panel #panelBody .gameMenuTile strong{font-size:12px;font-weight:500;color:var(--ui-ink)} #game #panel #panelBody .menuTileArt{border:0;background:transparent;box-shadow:none} #game #panel #panelBody .gameMenuTile:hover{background:#e2dac8} #game #panel #panelBody .gameMenuTile.planned{opacity:.55} #game #panel #panelBody .communityMenuTile{background:transparent!important;color:var(--ui-ink)!important;border:0!important} #game #panel #panelBody .menuLegend{color:var(--ui-muted);border-color:var(--ui-line)} /* Inventory art stays framed in its own darker well, with readable ink outside it. */ #game #panel #panelBody :is(.inventorySlot,.gearSlot,.supplyTile){background:#e4dfd5;border-color:#b6ad9a;border-radius:3px;box-shadow:none;color:var(--ui-ink)} #game #panel #panelBody :is(.inventorySlot.selected,.gearSlot.selected){outline:2px solid #6e5834;outline-offset:-2px;background:#ded2ba} #game #panel #panelBody :is(.gearSlotName,.inventoryName,.gearSlot small,.bagSummary,.inventoryFilters,.gearPresetBar,.itemDetailHint,.itemDetailStats,.itemMeta,.itemSupplyCount){color:var(--ui-muted)} #game #panel #panelBody :is(.inventorySlot,.gearSlot) .artIcon{background-color:#22272a;border-radius:2px} #game #panel #panelBody .transformCard{background:#e9e3d7;border-color:#c1b6a1;border-radius:3px;box-shadow:none} #game #panel #panelBody .transformCard.selected{outline:2px solid #695a3e;outline-offset:-2px;background:#ded1b7} #game #panel #panelBody .transformCard .transformPortrait{background-color:#d6cdbc;border:0;border-radius:1px} #game #panel #panelBody .transformCard span:last-child{color:var(--ui-muted)} #game #panel #panelBody .transformSetCard.complete{border-color:#829075;background:#eef0e5} #game #panel #panelBody .transformSetEffects span{color:#355e44;background:#e1e7d9;border-color:#a6b49b} #game #panel #panelBody .transformSetMembers .missing small{color:#8a7871} /* Paper-safe category and rarity colors; chromatic edges remain on the art itself. */ #game #panel #panelBody .rarityControl{color:color-mix(in srgb,var(--grade-color) 38%,#191713)!important;background:#f8f4e9!important;border-color:color-mix(in srgb,var(--grade-color) 58%,#6b6253)!important;box-shadow:none!important;color-scheme:light} #game #panel #panelBody .rarityControl[aria-pressed=true]{background:color-mix(in srgb,var(--grade-color) 18%,#ede5d4)!important;box-shadow:inset 0 -2px color-mix(in srgb,var(--grade-color) 38%,#191713)!important} #game #panel #panelBody .rarityControl option{color:color-mix(in srgb,var(--grade-color) 38%,#191713)!important;background:#f8f4e9!important} /* Maps, chat and reward records. Field art is not recolored. */ #game #panel.atlasPanel #panelBody .atlasShell[data-view-mode] .atlasRow.here{background:#e9dfc7;border-color:#8a6b32;box-shadow:inset 3px 0 #8a6b32} #game #panel.atlasPanel #panelBody .atlasRow.here .atlasGo strong{color:#453d2d} #game #panel #panelBody .atlasHereBadge{background:#79603b;color:#fff9e9} #game #panel #panelBody .atlasGo{background:transparent;color:var(--ui-ink);box-shadow:none} #game #panel #panelBody .atlasGo :is(strong,small){color:var(--ui-ink)} #game #panel #panelBody :is(.chatLog,.reportBox,.reportReceipt){background:#faf7ef;border-color:#c9c0ae;color:var(--ui-ink)} #game #panel #panelBody .chatAnnouncement{background:#e6dfce;border-color:#b8aa8e;color:#6b522c} #game #panel #panelBody .chatMessage{border-color:#d6cdbd} #game #panel #panelBody .chatMessage p{color:var(--ui-ink)} #game #panel #panelBody .chatMeta strong{color:#425264} #game #panel #panelBody .chatMessage.self{border-color:#6c7b84} #game #panel #panelBody .chatMeta time{color:#777368} #game #panel #panelBody .chatStatus{color:var(--ui-red)} #game #panel #panelBody :is(.mailCard.claimed,.passClaimed){background:#e5e2da;opacity:.8} #game #panel #panelBody :is(.arenaDailyTiers>div,.arenaDailyRow.isSelf){background:#e8e1d3} #game #panel #panelBody :is(.arenaDailyTiers span,.arenaDailyRow>strong){color:#215d84} #game #panel #panelBody .arenaDailyRow{border-color:#d6cdbd} #game #panel #panelBody .rankTop{background:#e7dfcc;border-color:#b8a06f} #game #panel #panelBody .rankPlace{color:#79613b;background:transparent;box-shadow:none} #game #panel #panelBody :is(.rankPlace small,.rankPerson small,.rankingStamp){color:var(--ui-muted)} #game #panel #panelBody .rankRow.isSelf{border-color:#7b8d92;background:#e5e9e7} #game #panel #panelBody details>summary{color:#454b52;border-color:var(--ui-line)} #game #panel #panelBody details>summary::after{background:#435264;color:#fff9ed;border-color:#435264;border-radius:2px;box-shadow:none} #game #panel #panelBody progress{accent-color:#617582} #game #panel #panelBody :is(.error,.warning,.commerceStatus.error,.workWarning,.fusionWarning,.pkDanger){color:var(--ui-red)} /* Keep battle-space overlays charcoal, thin-edged and still readable on bright maps. */ #game header{background:linear-gradient(#171a1cce,#171a1c75,transparent);border-color:#b9aa8755;box-shadow:none} #game :is(#questCard,.questAutoBox,#miniMapBox,#partyMini){background:var(--ui-field);border-color:#b8ad8d70;border-radius:3px;box-shadow:none;backdrop-filter:none} #game :is(#miniMapToggle,#miniMapOpen,#questFold){background:#202527d9;color:#eee8db;border-color:#90856a50;box-shadow:none} #game #mapTravelOpen{background:#e5dcc5;color:#353732;border-color:#b4a585;box-shadow:none;border-radius:0} #game #chatHud{background:#202426ae;border:0;box-shadow:none;border-radius:2px} #game .dock{background:#171c20d9;border-top:1px solid #aaa18c66;box-shadow:none} #game .dock button{background:transparent;border-color:#c9c0a92a;color:#e8e3d6;box-shadow:none} #game .headerActions button{background:#202426a6;border-color:#a79d805c;color:#eee5cc;box-shadow:none;border-radius:3px} #game :is(#alphaContribution,#networkLatency){background:#202426ab;border-color:#a99c7340;box-shadow:none} /* Reading dialogs share paper; account backdrop keeps approved loading artwork. */ #game .accountCard,#game #dialogue,#game .bookConfirmCard{background:var(--ui-paper);color:var(--ui-ink);border:1px solid #aca08b;border-radius:4px;box-shadow:0 12px 30px #0006} #game :is(.accountCard,#dialogue,.bookConfirmCard) :is(h1,h2,p,label,small,.accountEyebrow,.accountFootnote){color:var(--ui-ink);text-shadow:none} #game .accountCard :is(input:not([type=checkbox]),select){background:var(--ui-sheet);color:var(--ui-ink);border-color:#b4aa97;border-radius:2px} #game :is(.accountCard,#dialogue,.bookConfirmCard) button{background:var(--ui-accent);color:#fff8e9;border-color:var(--ui-accent);border-radius:3px;box-shadow:none} #game .accountCard .accountTabs button:not(.selected){background:#ddd6c7;color:var(--ui-ink);border-color:#bfb49f} #game .accountCard :is(#accountError,#accountLinkError){color:var(--ui-red)} #game #dialogue .dialogueTop{border-color:var(--ui-line)} @media(prefers-reduced-motion:reduce){#game #panel,#game #panel *{scroll-behavior:auto}} /* Counters are painted on dark item wells, never on the paper text layer. */ #game #panel #panelBody :is(.itemTile,.inventorySlot,.gearSlot) small{color:#fff7e6;background:#242729e8;text-shadow:none} #game #panel #panelBody :is(.bagMeta,.bagFoot,.gearGrade){color:var(--ui-muted)} #game #panel #panelBody .gearItem.grade1 .gearGrade{color:#245a91} #game #panel #panelBody .gearItem.grade2 .gearGrade{color:#81438d} #game #panel #panelBody .gearItem.grade3 .gearGrade{color:#805b16} #game #panel #panelBody .gearItem.grade4 .gearGrade{color:#a33737} #game #panel #panelBody .inventoryTabs button[aria-pressed=true]{background:var(--ui-accent);color:#fffaf0;border-color:var(--ui-accent);box-shadow:inset 0 -2px #ba9c64} #game #panel #panelBody .menuGroup h3{display:block!important;padding:0;margin:4px 0 7px} #game #panel #panelBody .menuGroup{padding:7px 0 11px;margin:0;border-bottom:1px solid var(--ui-line)} /* Character, collection and workshop reading surfaces. */ #game #panel #panelBody :is(.characterSummary,.attributeStat,.attributeEquipment,.fusionBulk,.fusionRule,.fusionSelected,.forgeItem,.skillGroup,.masteryCard,.gradeCollectionRewards,.gradeCollectionRewards article){background:var(--ui-sheet);border-color:var(--ui-line);color:var(--ui-ink);box-shadow:none} #game #panel .techniqueCard .masteryTag{color:#694916;background:#f3e8c9;border-color:#b69b62} #game #panel #panelBody :where(.characterSummary b,.characterSummary span,.attributeStepper b,#attributePoints,#attributeBudget,.attributeEquipment strong,.attributeEquipment span,.walletBalance b,.forgeWallet,.forgeWallet b,.martialToolbar span,.martialToolbar b,.manualSkillBar span,.masteryCard strong){color:var(--ui-ink)!important} #game #panel #panelBody :is(.alignmentStatus b,.attributeCard>small,.attributeStat>span,.forgePanel p.muted,.martialSheet>.muted,.skillGroup h3 small,.techniqueStats span,.masteryCard p,.masteryCard span,.fusionBulk p,.transformSummon>div>span){color:var(--ui-muted)!important} #game #panel #panelBody .transcendStars{color:#816325} #game #panel #panelBody button.transformCard{background:var(--ui-sheet)!important;color:var(--ui-ink)!important;box-shadow:none!important} #game #panel #panelBody button.transformCard.selected{background:#e8deca!important;box-shadow:inset 0 -2px #927448!important} #game #panel #panelBody .transformCard small{color:color-mix(in srgb,var(--rarity) 38%,#171510)!important} #game #panel #panelBody button.rarityControl[aria-pressed=true]{color:color-mix(in srgb,var(--grade-color) 38%,#171510)!important;background:color-mix(in srgb,var(--grade-color) 18%,#ede5d4)!important;box-shadow:inset 0 -2px color-mix(in srgb,var(--grade-color) 38%,#171510)!important} #game #panel #panelBody button.techniqueTile{background:var(--ui-sheet)!important;color:var(--ui-ink)!important;box-shadow:none!important} #game #panel #panelBody button.techniqueTile[aria-pressed=true]{background:#e8deca!important;border-color:#927448!important;box-shadow:inset 0 -2px #927448!important} #game #panel #panelBody :is(.techniqueTile small,.techniqueState){color:#5c664c!important} #game #panel #panelBody .transformRates b[style*="#ccd8d3"]{color:#5a625e!important} #game #panel #panelBody .transformRates b[style*="#7ce5a0"]{color:#316e45!important} #game #panel #panelBody .transformRates b[style*="#71bcff"]{color:#285f92!important} #game #panel #panelBody .transformRates b[style*="#ef91ff"]{color:#823b90!important} #game #panel #panelBody .transformRates b[style*="#ffcc69"]{color:#805b17!important} #game #panel #panelBody .transformRates b[style*="#ff8c86"]{color:#a33e39!important} #game #panel #panelBody .transformRates b[style*="#fff4ad"]{color:#796519!important} /* Travel, social and service menus use the same paper rhythm. */ #game #panel #panelBody :is(.atlasRow,.bossCard,.partyRules,.helpTopic,.productCard,.coinSupplyShop,.passTier,#huntSettingsForm fieldset,#potionSettings fieldset){background:var(--ui-sheet)!important;border-color:var(--ui-line)!important;color:var(--ui-ink);box-shadow:none} #game #panel #panelBody :where(.atlasToolbar strong,.atlasToolbar b,.atlasNumber,.dailyIntro strong,.pkSummary b,.marketSummary,.passProgress,.mailIntro b,.rewardChip b,.settingsLead,.hudSizeCurrent,.nowPlaying #musicTitle,.soundCard output){color:var(--ui-ink)!important} #game #panel #panelBody :is(.atlasFoot,.atlasFoot span,.dailyState,.bossJournal .muted,#bossStatusTime,.pkRule,.pkFilterLabel,.pkEmpty,#pkPanelStatus,.partyEyebrow,.partyRules p,.chatCount,.marketSummary b,.commerceHint,.mailCleanup span,.commerceFooter span,.helpTopic p,.settingsNote,.potionHelp,.hudSettings>small,.performanceSettings details small,#soundStatus){color:var(--ui-muted)!important} #game #panel #panelBody .dailyState{background:var(--ui-wash);border-color:var(--ui-line)} #game #panel #panelBody section>h3>small{color:var(--ui-muted)} #game #panel.atlasPanel #panelBody .atlasShell[data-view-mode] .atlasRow.here{background:#e9dfc7!important;border-color:#8a6b32!important;box-shadow:inset 3px 0 #8a6b32} #game #panel.atlasPanel #panelBody .atlasShell[data-view-mode] .atlasGo :is(strong,b,em,span,small){color:var(--ui-ink)!important} #game #panel.atlasPanel #panelBody .atlasShell[data-view-mode] .atlasRow .atlasInfo{color:var(--ui-accent)!important;background:transparent!important} #game #panel.atlasPanel #panelBody .atlasGo .atlasHereBadge{background:#79603b!important;color:#fff9e9!important} #game #panel #panelBody .atlasModeHelp strong{color:var(--ui-ink)} #game #panel #panelBody :is(.atlasModes,.atlasModeSwitch) button small{color:inherit!important} #game #panel #panelBody .passLabels span{color:#784a88} #game #panel #panelBody #huntSettingsForm fieldset :is(legend,p){color:var(--ui-muted)} #game #panel #panelBody :is(.weaponShopBanner,.transformShopBanner) small{color:#e4ddcc!important} #game #panel #panelBody .productCopy{background:var(--ui-sheet)} #game #panel #panelBody .productCopy :is(h3,p){color:var(--ui-ink)} #game #panel #panelBody .summonButtons button span{color:inherit} #game #panel #panelBody .commerceTabs{background:transparent;border-color:var(--ui-line)} /* Table headers and service bars replace the former green gradients. */ #game #panel #panelBody :is(.marketHead,.marketHeader,.marketWallet,.marketTableHead,.marketTable thead,.communityWallet){background:var(--ui-wash);color:var(--ui-ink);border-color:var(--ui-line);text-shadow:none} #game #panel #panelBody :is(.marketHead,.marketHeader,.marketWallet,.marketTableHead,.communityWallet) :is(b,strong,span,small){color:inherit} #game #panel #panelBody header{background:none;box-shadow:none;color:var(--ui-ink)} #game #panel #panelBody .marketBalance{background:var(--ui-wash);padding:8px;border:0;border-bottom:1px solid var(--ui-line)} #game #panel #panelBody .marketBalance b{color:var(--ui-ink);text-shadow:none} #game #panel #panelBody .marketBalance .currency-coins{color:#765724} #game #panel #panelBody .marketBalance .currency-diamonds{color:#246681} #game #panel #panelBody .marketSummary span{color:var(--ui-muted)} /* Numeric reading blocks and book details stay flat and free of inherited text glows. */ #game #panel #panelBody :is(.characterSummary>div,.attributeStats h4,.attributeStats>small,.bookSources){background:var(--ui-wash);border-color:var(--ui-line);color:var(--ui-ink);text-shadow:none} #game #panel #panelBody .characterSheet *{text-shadow:none} #game #panel #panelBody :is(.fusionRule strong,.fusionBulk span,.forgeItem small,.forgeItem p){color:var(--ui-muted)} #game #panel #panelBody :is(.gearFilters,.inventoryTabs) button[aria-pressed=true]{background:var(--ui-accent)!important;color:#fffaf0!important;border-color:var(--ui-accent)!important} #game #panel #panelBody .dailyNumber{background:var(--ui-wash)!important;color:var(--ui-brass)!important;border-color:var(--ui-line)!important} #game #panel #panelBody :is(.soundCardHead button[aria-pressed=true],.batchActions>button:first-child){background:var(--ui-accent)!important;color:#fffaf0!important} /* Paper never uses the shadow intended to outline text over a moving field. */ #game #panel #panelBody *{text-shadow:none!important} #game #panel #panelBody :is(.chatTabs,.chatFilters){background:transparent;border:0} #game #panel #panelBody .chatMessage.self{background:#e6ebea} #game #panel #panelBody .chatMessage.system.celebration{color:#76551e;background:#eee5d4} #game #panel #panelBody .chatMessage.system.pk{color:#9c2e35;background:#f1dfdd} #game #panel #panelBody .chatMessage.system.failure{color:#755578} #game #panel #panelBody .chatMessage.system.connection{color:#31654a} #game #panel #panelBody .chatMessage.system :is(p,b){color:inherit} #game #panel #panelBody :is(.bossCards>article,.passTier>b){background:var(--ui-wash);color:var(--ui-ink);border-color:var(--ui-line);box-shadow:none} #game #panel #panelBody :is(.bossCards p,.bossCardHead small,.bossCardHead b,.lootSourceRows strong,#potionSettings legend,.qualityCurrent,.qualityChoices span){color:var(--ui-muted)} #game #panel #panelBody .helpTopic a{color:#285d87} #game #panel #panelBody .settingApplied{color:var(--ui-brass)} #game #panel #panelBody :is(.hudSizeChoices,.fieldViewChoices,.qualityChoices) button[aria-pressed=true]{background:#e4d8bd!important;border-color:#8a6832;box-shadow:inset 0 -2px #8a6832} #game #panel #panelBody .atlasTabs button small{color:inherit!important} #game #panel.atlasPanel #panelBody .atlasShell[data-view-mode] .atlasGo .atlasHereBadge{background:#79603b!important;color:#fff9e9!important} #game #panel #panelBody .alignmentStatus b{color:color-mix(in srgb,var(--alignment) 50%,#141719)!important} #game #panel #panelBody .alignmentStatus{border-color:color-mix(in srgb,var(--alignment) 40%,#9b9587)} /* One charcoal plate per field group, instead of overlapping green plates. */ #game #questCard #quest,#game #questCard .questAutoBox{background:transparent;border:0;box-shadow:none} #game #questCard .questAutoBox button{background:#343a3add;border-color:#a79d805c;color:#eee8dc;box-shadow:none} #game #questCard #questAuto[aria-pressed=true]{background:#526459;border-color:#c2b287;color:#fff4d7} #game #questCard{padding:3px} #game .dock button{border-radius:0} #game #panel #panelBody .dangerButton{background:#7d3937!important;color:#fff6eb!important;border-color:#7d3937!important} /* Enhancement choices keep rarity on their edge, not behind reading text. */ #game #panel #panelBody :is(.enhanceTray,.enhanceStock article,.enhanceTray article){background:var(--ui-sheet)!important;color:var(--ui-ink);box-shadow:none} #game #panel #panelBody :is(.enhanceTray p,.enhanceStock small,.enhanceTray small){color:var(--ui-muted)} #game #panel #panelBody :is(th,td){color:var(--ui-ink);border-color:var(--ui-line)} #game #panel #panelBody th{background:var(--ui-wash);color:var(--ui-muted)} #game #panel #panelBody :is(button,select).rarityControl{color:color-mix(in srgb,var(--grade-color) 38%,#171510)!important;background:#f8f4e9!important;border-color:color-mix(in srgb,var(--grade-color) 58%,#6b6253)!important} #game #panel #panelBody button.rarityControl[aria-pressed=true]{background:color-mix(in srgb,var(--grade-color) 18%,#ede5d4)!important} #game #panel #panelBody .forgeMaterials button.missing b{color:var(--ui-red)} #game #panel #panelBody .guideExits strong{color:var(--ui-ink)} #game #panel #panelBody .statPreviewTag{color:var(--ui-muted);background:var(--ui-wash)} #game #panel #panelBody .transformIntro small{display:none} #game #panel #panelBody .transformIntro h3{margin:3px 0} #game #panel #panelBody .transformSummon button{background:var(--ui-accent)!important;color:#fff9eb!important;border-color:var(--ui-accent)} #game #panel #panelBody .atlasSelection{background:var(--ui-accent);color:#fff9eb} #game #panel #panelBody .atlasModeSwitch{background:var(--ui-wash);color:var(--ui-ink);border-color:var(--ui-line)} #game #panel #panelBody .atlasModeSwitch :is(span,b){color:var(--ui-ink)} #game #panel #panelBody .announcementGrade.hero{color:#833b90} #game #panel #panelBody .announcementGrade.legendary{color:#805b17} #game #panel #panelBody .announcementGrade.mythic,#game #panel #panelBody .announcementGrade.manual{color:#a43434} #game #panel #panelBody .announcementGrade.unique{color:#786318} /* Confirmation overlays are deliberately plain: cost, consequence, then action. */ #game #transformConfirmOverlay{background:#10191b99;backdrop-filter:none} #game #transformConfirmOverlay .transformConfirm{background:var(--ui-paper);color:var(--ui-ink);border-color:#aaa08c;border-radius:4px;box-shadow:0 14px 36px #0006;padding:20px 16px} #game #transformConfirmOverlay .transformConfirm :is(h3,span){color:var(--ui-ink);text-shadow:none} #game #transformConfirmOverlay .transformConfirm button{background:var(--ui-accent);color:#fff8ec;border-color:var(--ui-accent);border-radius:3px;box-shadow:none} #game #transformConfirmOverlay #transformCancel{background:var(--ui-sheet);color:var(--ui-ink);border-color:var(--ui-line)} #game .bookConfirmCard .bookConfirmItem{background:var(--ui-wash);color:var(--ui-ink);border-color:var(--ui-line)} #game .bookConfirmCard #bookYes{background:var(--ui-accent);color:#fff8ec;border-color:var(--ui-accent)} /* NPC services retain their portraits, with one paper row per product. */ #game #panel #panelBody :is(.npcProduct,.npcWallet,.npcService,.npcServiceHero){background:var(--ui-sheet);color:var(--ui-ink);border-color:var(--ui-line);box-shadow:none;border-radius:3px} #game #panel #panelBody .npcSheet :is(p,small,span,label){color:var(--ui-muted)} #game #panel #panelBody .npcSheet :is(b,strong){color:var(--ui-ink)} #game #panel #panelBody .npcGreeting>div>small{color:var(--ui-brass)} #game #panel #panelBody .npcCheckout button{background:var(--ui-accent)!important;color:#fff9eb!important} #game #panel #panelBody .npcQuantities button[aria-pressed=true]{background:var(--ui-accent)!important;color:#fff9eb!important} #game #panel #panelBody .enhanceCard{background:var(--ui-sheet)!important;color:var(--ui-ink);border-color:var(--ui-line);border-radius:3px;box-shadow:none} #game #panel #panelBody .enhanceCard :is(small,span,caption){color:var(--ui-muted)} #game #panel #panelBody .enhanceCard :is(strong,b,h3,h3 span){color:var(--ui-ink)} #game #panel #panelBody :is(.enhanceGain,.enhanceSafe){color:var(--ui-green)} #game #panel #panelBody .enhanceRisk{background:#f1e1da;color:var(--ui-red);border-color:#c2988e} #game #panel #panelBody .enhanceRisk :is(strong,b,small,span){color:inherit} #game #panel #panelBody .enhanceCard button{background:var(--ui-accent)!important;color:#fff9eb!important} #game #panel #panelBody .npcForgeLinks i{color:var(--ui-accent)} #game #panel #panelBody .rankingHeader span{color:var(--ui-muted)} #game #panel #panelBody .rankPerson em{color:var(--ui-green)} #game #panel #panelBody :is(.communityToolbar span,.clanGrowthTitle strong){color:var(--ui-ink)} #game #panel #panelBody .clanBuffs :is(b,span){color:var(--ui-green)} #game #panel #panelBody .clanAchievements>span{background:var(--ui-wash);color:var(--ui-ink);border-radius:3px} #game #panel #panelBody .communityCard form output{color:var(--ui-ink)} #game #panel #panelBody :is(.vaultBalances article,.vaultGear,.vaultHistory li){background:var(--ui-sheet);border-color:var(--ui-line);color:var(--ui-ink)} #game #panel #panelBody .vaultBalances strong{color:var(--ui-ink)} #game #panel #panelBody .menuGroup h3{position:static;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;white-space:normal;font:600 10px/1.4 var(--font-ui)!important;letter-spacing:.04em;color:var(--ui-muted);margin:0 0 6px!important;padding:0!important} #game #accountGate .accountTabs button:not(.selected){background:#ddd6c7;color:var(--ui-ink);border-color:#bfb49f} #game #accountGate .accountTabs button.selected{background:var(--ui-accent);color:#fff9eb;border-color:var(--ui-accent);box-shadow:inset 0 -2px #ba9c64} /* Item details use rarity on the border; names and actual stats stay on paper. */ #game #panel #panelBody .card.gearItem{background:var(--ui-sheet)!important;color:var(--ui-ink);box-shadow:none;border-radius:3px} #game #panel #panelBody .gearItem :is(h3,p,small){color:var(--ui-ink)} #game #panel #panelBody .gearItem .gearCompare{color:var(--ui-muted);border-color:var(--ui-line)} #game #panel #panelBody .gearItem .statGain{color:var(--ui-green)} #game #panel #panelBody .gearItem .statLoss{color:var(--ui-red)} /* Functional emphasis: paper remains quiet; actions, currencies and risks do not. */ #game{--ui-diamond:#17618e;--ui-event:#ad323e;--ui-coin:#805718;--ui-stone:#70478a} #game #panel .panelHead,#game #panel.floatingPanel .panelHead{display:grid;grid-template-columns:58px minmax(0,1fr)30px 32px;align-items:center;gap:6px;height:auto;min-height:42px;padding:4px 7px} #game #panel .panelHead #panelTitle{min-width:0;align-self:center;margin:0;padding:0;line-height:1.25} #game #panel .panelHead #panelBack,#game #panel.floatingPanel .panelHead #panelBack{display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;height:32px;min-height:32px;margin:0;padding:0 5px;font:700 12px/1 var(--font-ui);white-space:nowrap;color:#fff9eb;background:#425264;border:1px solid #344455;border-radius:3px;box-shadow:inset 0 1px #ffffff20;cursor:pointer} #game #panel .panelHead :is(#panelReset,#close){position:static;display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;height:32px;min-height:32px;margin:0;padding:0;background:#f4efe4;border:1px solid #b7a98c;color:#514b40;font:22px/1 var(--font-ui)} #game #panel .panelHead #panelBack:hover{background:#344455;border-color:#344455} #game #panel #panelBody button:where(:not(.weaponShopBanner):not(.transformShopBanner):not(.gameMenuTile):not(.transformCard):not(.techniqueTile):not(.itemTile):not(.atlasPin)){border-style:solid;border-width:1px} #game #panel #panelBody :is(.primaryAction,[data-confirm-go],[data-fusion-confirm],[data-fusion-bulk],[data-commerce-op="mailAll"],[data-commerce-op="mail"],[data-coupon-form] button[type=submit],.forgeAction button){color:#fff9eb!important;background:#425d71!important;border:1px solid #2c4559!important;box-shadow:inset 0 1px #ffffff20!important} #game #panel #panelBody :is([data-confirm-cancel],[data-workshop="cancel"]){color:#545047!important;background:#f7f2e8!important;border:1px solid #b8aa90!important;box-shadow:none!important} #game #panel #panelBody [data-confirm-go].dangerButton{color:#fff6ef!important;background:#973d3d!important;border-color:#7f2e31!important} #game #panel #panelBody .coinSupplyShop{border:1px solid #c1aa7b!important;border-left:3px solid #a07b36!important;padding:8px} #game #panel #panelBody [data-supply-buy]{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;min-height:36px;padding:6px 9px;background:#f1e0b8!important;border:1px solid #ac8340!important;box-shadow:inset 0 1px #fff7df!important} #game #panel #panelBody [data-supply-buy] .purchaseAction{background:#806025;color:#fff9eb;border-radius:2px;padding:3px 7px;line-height:1.2;font-size:12px} #game #panel #panelBody [data-supply-buy] .purchasePrice{font-size:12px;font-weight:700;white-space:nowrap} #game #panel #panelBody .productCopy :is([data-product],[data-commerce-op="membership"]){background:#e2edf3!important;color:#18597d!important;border:1px solid #7191a6!important;min-height:34px;font-weight:700} #game #panel #panelBody :is(.summonButtons button,.transformSummon [data-transform-draw]){background:#e5eef4!important;color:#24465e!important;border:1px solid #7797ae!important;box-shadow:inset 0 1px #fff9!important} #game #panel #panelBody .coinSummon .summonButtons button{background:#f3e6c7!important;color:#725122!important;border-color:#b4975c!important} #game #panel #panelBody .transformSummon [data-transform-draw]{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 7px;line-height:1.3} #game #panel #panelBody .summonButtons :is(span,em){font-style:normal;font-weight:700} #game #panel #panelBody .commerceConfirm{border:1px solid #9f987f;border-top:3px solid #425d71;padding:12px;background:#fbf7ec} #game #panel #panelBody .commerceConfirm>div{display:flex;justify-content:flex-end;gap:8px} #game #panel #panelBody .commerceConfirm>div>button{min-width:78px;min-height:34px} #game :is(#panel #panelBody,#transformConfirmOverlay) .confirmCost{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;background:#e9e5d9;border:1px solid #c4baa6;border-radius:3px;padding:10px;margin:10px 0;font-size:16px;font-weight:700;color:#655e50} #game #transformConfirmOverlay .transformConfirm{border-top:4px solid #425d71} #game #transformConfirmOverlay .confirmCount{margin:6px 0;color:#425264;font-weight:700} #game #transformConfirmOverlay .confirmPaymentHint{display:block;color:#8d3d49;margin:0 0 12px;font-size:12px} #game :is(#panel #panelBody,#transformConfirmOverlay) :is(.currency-diamonds,.currency-diamonds b,.currency-diamonds strong){color:var(--ui-diamond)!important;font-weight:700} #game :is(#panel #panelBody,#transformConfirmOverlay) :is(.currency-eventDiamonds,.currency-eventDiamonds b,.currency-eventDiamonds strong){color:var(--ui-event)!important;font-weight:700} #game :is(#panel #panelBody,#transformConfirmOverlay) :is(.currency-coins,.currency-coins b,.currency-coins strong){color:var(--ui-coin)!important;font-weight:700} #game :is(#panel #panelBody,#transformConfirmOverlay) :is(.currency-stones,.currency-stones b,.currency-ticket,.currency-ticket b){color:var(--ui-stone)!important;font-weight:700} #game #panel #panelBody :is(.uiRestriction,.enhanceError,.forgeReason,.npcCondition:not(:empty):not([data-complete])){color:#a12d35!important;font-weight:700} #game #panel #panelBody .uiRestriction{display:inline-block;padding:2px 5px;background:#f4e1df;border:1px solid #c78f8d;border-radius:2px;line-height:1.35} #game #panel #panelBody .uiAllowed{color:#32664d!important;font-weight:600} #game #panel #panelBody .enhanceRisk{border-left:3px solid #a12d35;padding:8px 10px;font-weight:700} #game #panel #panelBody .enhanceSafe{color:#2d6849!important;background:#e5ede2;border-left:3px solid #60906f;padding:6px 9px;font-weight:700} #game #panel #panelBody .enhanceStats .enhanceGain{color:#286841!important;font-weight:700} #game #panel #panelBody .workWallet{display:flex;gap:5px 10px;flex-wrap:wrap} #game #panel #panelBody .card.gearItem{--item-color:#5a635c;border:1px solid var(--item-color)!important;border-top:3px solid var(--item-color)!important;padding:10px} #game #panel #panelBody .card.gearItem.grade1,#game #panel #panelBody .enhanceCard.grade1{--item-color:#286591} #game #panel #panelBody .card.gearItem.grade2,#game #panel #panelBody .enhanceCard.grade2{--item-color:#884095} #game #panel #panelBody .card.gearItem.grade3,#game #panel #panelBody .enhanceCard.grade3{--item-color:#805b17} #game #panel #panelBody .card.gearItem.grade4,#game #panel #panelBody .enhanceCard.grade4{--item-color:#b03442} #game #panel #panelBody .card.gearItem :is(.itemDetailHead h3,.gearGrade){color:var(--item-color)!important;font-weight:800} #game #panel #panelBody .card.gearItem .gearGrade{display:inline-block;padding:2px 6px;border:1px solid var(--item-color);border-radius:2px;background:color-mix(in srgb,var(--item-color) 8%,var(--ui-sheet));font-size:12px} #game #panel #panelBody .card.gearItem .itemDetailHead{padding-block:4px;border-bottom:1px solid color-mix(in srgb,var(--item-color) 25%,transparent);margin-bottom:8px} #game #panel #panelBody .npcQuantity button[aria-pressed=true]{background:#425d71!important;color:#fff9eb!important;border-color:#2c4559!important;box-shadow:inset 0 -2px #bfa16b!important} #game #panel #panelBody :is(.npcUnitPrice,.npcCheckout b){color:var(--ui-coin)!important;font-weight:700} #game #panel #panelBody .fusionRule>strong{color:#864596!important;font-weight:800} #game #panel #panelBody .fusionCandidates button b{color:color-mix(in srgb,var(--grade-color,#596858) 55%,#242020)} #game #accountGate .accountCard{padding-top:16px} #game #accountGate .accountEyebrow{margin:0 0 3px;line-height:1.3} #game #accountGate #accountTitle{font-size:28px;line-height:1.2;margin:3px 0 12px} #game #accountGate .accountTabs{margin-top:0} @media(max-width:370px){ #game #panel .panelHead,#game #panel.floatingPanel .panelHead{grid-template-columns:48px minmax(0,1fr)27px 29px;gap:4px;padding:4px 5px;min-height:40px} #game #panel .panelHead #panelBack,#game #panel.floatingPanel .panelHead #panelBack{font-size:11px;height:30px;min-height:30px;padding:0 3px} #game #panel .panelHead :is(#panelReset,#close){height:30px;min-height:30px} #game #panel #panelBody [data-supply-buy]{padding:5px 6px;gap:4px} #game #panel #panelBody .coinSupplyShop{gap:6px;padding:7px} #game :is(#panel #panelBody,#transformConfirmOverlay) .confirmCost{font-size:15px;padding:8px} } #game #panel .panelHead #panelBack{gap:4px} #game #panel .panelHead #panelBack .backArrow{flex:none;width:10px;height:12px} #game #transformConfirmOverlay .transformConfirm :is(.confirmCount,.confirmCost,.confirmPaymentHint){grid-column:1/-1;min-width:0} #game #panel #panelBody .npcCondition[data-complete]{color:var(--ui-green)!important;font-weight:700} #game #panel #panelBody .enhanceCard .enhanceHero :is(h3,h3 span,small){color:var(--item-color,var(--ui-ink))!important} /* v938: set each reading surface and its ink together. Artwork captions stay light. */ #game #panel #panelBody :is(.forgeIntro,.forgeRecipe,.marketSettlement,.contributionBreakdown>div,.worldBossCard,.bossAlertToggle,.oddsGrid){background:var(--ui-sheet);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:3px;box-shadow:none} #game #panel #panelBody :is(.forgeIntro,.marketSettlement,.contributionBreakdown>div){background:var(--ui-wash)} #game #panel #panelBody :is(.forgeIntro p,.forgeWallet,.forgeIngredients summary,.contributionBreakdown small,.marketSettlement small,.marketMine small,.worldBossCard p,.worldBossCard small){color:var(--ui-muted)} #game #panel #panelBody .forgeAction>span{color:var(--ui-coin);font-weight:700} #game #panel #panelBody .forgeMaterials button span{color:var(--ui-ink)} #game #panel #panelBody .forgeMaterials button b{color:var(--ui-green)} #game #panel #panelBody .forgeMaterials button.missing b{color:var(--ui-red)} #game #panel #panelBody .forgeRecipe.grade2 .forgeItem h3{color:#884095} #game #panel #panelBody .forgeRecipe.grade3 .forgeItem h3{color:#805b17} #game #panel #panelBody .forgeRecipe.grade4 .forgeItem h3{color:#a43434} #game #panel #panelBody :is(.contributionBreakdown b,[data-contribution-clock]){color:#425264;font-weight:700} #game #panel #panelBody .worldBossCard strong{color:var(--ui-green)} #game #panel #panelBody :is(.commerceStatus,.npcReceipt,.communityStatus,.workshopNotice){background:#e5eee3;color:#27583b!important;border:1px solid #7f9e80;border-left:3px solid #477850;border-radius:3px;padding:8px 10px;font-size:12px;font-weight:600;line-height:1.5} #game #panel #panelBody :is(.commerceStatus.error,.npcReceipt.error,.communityStatus.error,.workshopNotice.error){background:#f7e4e0;color:#942e35!important;border-color:#c58e89;border-left-color:#a63e43} #game #panel #panelBody :is(.commerceStatus,.npcReceipt,.communityStatus,.workshopNotice) :is(p,small,b,strong,span){color:inherit} #game #panel #panelBody .passBanner :is(h3,small,span){color:#fff1cf!important} #game #panel #panelBody .productArt>small{color:#fff1cf!important;background:#152724ed;border-radius:2px;padding:2px 4px} #game #panel #panelBody .marketTabs [data-market-tab=buy]{--tab-ink:#275d7c;--tab-fill:#dce9f0} #game #panel #panelBody .marketTabs [data-market-tab=sell]{--tab-ink:#76521b;--tab-fill:#f0e3c3} #game #panel #panelBody .marketTabs [data-market-tab=mine]{--tab-ink:#704687;--tab-fill:#eaddf0} #game #panel #panelBody .marketTabs button{color:var(--tab-ink)!important;background:var(--tab-fill)!important;border-color:var(--tab-ink)!important} #game #panel #panelBody .marketTabs button[aria-pressed=true]{color:#fffaf0!important;background:var(--tab-ink)!important;box-shadow:inset 0 -3px #fff1c4!important} #game #panel #panelBody :is([data-community=marketBuy],[data-community=marketCollect]){color:#fffaf0!important;background:#425d71!important;border-color:#2c4559!important} /* Keep the map's outer touch target clear; only the numbered inner disc is painted. */ #game #panel.atlasPanel #panelBody .atlasShell[data-view-mode] .paintedAtlas button.atlasPin{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:50%;color:inherit!important} #game #panel.atlasPanel #panelBody .atlasShell[data-view-mode] .atlasPin.here b{background:#805e23;color:#fffaf0} #game #panel #panelBody .chatMeta time{color:var(--ui-muted)} #game #panel #panelBody .settingApplied{color:#6c4d1c} #game #panel #panelBody .transcendStars{color:#75571d} #game #panel #panelBody :is(.summonArt,.transformShopArt) :is(h3,p,small,span){color:#fff1cf!important} #game #panel #panelBody .rewardChip b{color:#fff9eb!important;background:#232b2ced;padding:1px 3px;border-radius:2px} #game #panel #panelBody .paperDoll{background:var(--ui-wash);border-color:var(--ui-line)} #game #panel #panelBody .paperDoll strong{color:var(--ui-ink)} #game #panel #panelBody .paperDoll>span{color:var(--ui-muted)} #game #panel #panelBody #equipBest b{color:var(--ui-green)} #game #panel #panelBody .fusionEmpty{background:#e6dfd1;color:var(--ui-muted)} #game #panel #panelBody :is(.forgeAction button,[data-commerce-op],[data-product],[data-pass-buy],.worldBossCard button):disabled{opacity:1;filter:none;color:#655f54!important;background:#e2ddd2!important;border-color:#bcb4a4!important;box-shadow:none!important} #game #panel #panelBody .marketExchange .marketRow{background:var(--ui-sheet)!important;color:var(--ui-ink)} #game #panel #panelBody .marketExchange .marketRow:nth-child(odd){background:var(--ui-paper)!important} #game #panel #panelBody .marketExchange .marketRow.marketHead{background:var(--ui-wash)!important} #game #panel #panelBody .marketExchange .marketRow.grade2 .marketItem b{color:#884095} #game #panel #panelBody .marketExchange .marketRow.grade3 .marketItem b{color:#805b17} #game #panel #panelBody .marketExchange .marketRow.grade4 .marketItem b{color:#a43434} #game #panel #panelBody :is(.forgeRecipe,.vaultGear,.summonResult article){background:var(--ui-sheet)!important;color:var(--ui-ink)} #game #panel #panelBody .summonResult :is(strong,small){color:var(--ui-ink)} #game #panel #panelBody :is(.vaultGear,.summonResult article).grade4 :is(b,strong){color:#a43434} #game #panel[data-kind="relics"] .relicIntro,#game #panel .relicTabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:5px 0} #game #panel .relicTabs button{flex:1;min-height:40px} #game #panel #panelBody .relicTabs button[aria-pressed=true]{background:#425264!important;color:white!important} #game #panel .relicForm{display:grid;gap:5px} #game #panel .relicForm label{display:grid;min-width:0} #game #panel .relicForm :is(select,button){width:100%;max-width:100%;min-width:0;min-height:44px} #game #panel .relicForm select{font-size:16px} #game #panel[data-kind="relics"] fieldset{min-width:0} /* The cabinet and the paper inventory share the game's ink-and-brass palette. */ #game #panel #panelBody .vaultExhibit,#game #panel #panelBody .vaultDrawer{min-width:0;margin:0 0 9px} #game #panel #panelBody :is(.vaultTitle,.drawerHead,.vaultActions,.vaultPages,.vaultDetailTitle,.vaultCopies){display:flex;align-items:center;gap:6px;min-width:0} #game #panel #panelBody .vaultTitle{justify-content:space-between;padding:6px 2px 4px;border-bottom:1px solid #9a8055} #game #panel #panelBody .vaultTitle small{color:#715534;font:10px/1.2 serif;letter-spacing:.1em} #game #panel #panelBody .vaultTitle h3{font:700 21px/1.1 "Noto Serif KR",serif;color:#37332c;margin:2px 0 0;letter-spacing:.1em} #game #panel #panelBody .vaultTitle>span{font-size:12px;color:#645941} #game #panel #panelBody .vaultCabinet{position:relative;isolation:isolate;display:grid;grid-template:repeat(2,minmax(0,1fr))/repeat(3,minmax(0,1fr));aspect-ratio:1.58;width:100%;max-width:490px;margin:4px auto 0;padding:5.8% 7.8% 10%;row-gap:5%;column-gap:4%;box-sizing:border-box;background:#132725 url("assets/relic-vault-v948.webp") center/100% 100% no-repeat;border:1px solid #594326;border-radius:3px} #game #panel #panelBody .vaultCabinet .vaultSlot{position:relative;display:flex;flex-flow:column;align-items:stretch;justify-content:flex-end;min-height:40px;min-width:0;padding:0 1px;margin:0;background:transparent!important;color:#ffedc6!important;border:0!important;box-shadow:none!important;border-radius:3px;touch-action:manipulation} #game #panel #panelBody .vaultSlot:focus-visible,#game #panel #panelBody .vaultSlot[aria-pressed=true]{outline:2px solid #e1c78c;outline-offset:1px} #game #panel #panelBody .mount{display:grid;place-items:end center;position:relative;flex:1;min-height:0} #game #panel #panelBody .restRing{position:absolute;bottom:0;left:13%;right:13%;height:12%;border:1px solid #c1aa6e88;border-radius:50%;background:#100e0b88} #game #panel #panelBody .emptySeal{align-self:center;margin-bottom:-5px;font:normal 23px/1 Georgia,serif;color:#c8b78988} .vaultIcon{display:inline-block;aspect-ratio:1;width:34px;flex:none;background:transparent url("assets/relic-icons-v948.webp") no-repeat;background-size:400% 200%;pointer-events:none} #game #panel #panelBody .mount .vaultIcon{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:95%;aspect-ratio:1;z-index:1;filter:drop-shadow(0 2px 1px #080c0d)} #game #panel #panelBody .vaultPlate{display:flex;align-items:center;justify-content:center;gap:3px;align-self:center;max-width:100%;padding:1px 4px;line-height:1.25;background:#1c201c;border:1px solid #977b4f;border-radius:2px} #game #panel #panelBody .vaultPlate b{font:600 clamp(10px,2.7vw,13px)/1.27 serif;color:#fff0ce!important;word-break:keep-all;white-space:nowrap} #game #panel #panelBody .vaultPlate small{font:10px/1 Georgia,serif;color:var(--gem)!important} #game #panel #panelBody .vaultSlot.empty .vaultPlate{background:#292a23b8;border-color:#746348} #game #panel #panelBody .vaultSlot.empty .vaultPlate b{color:#ded1ad!important;font-weight:400} #game #panel #panelBody .vaultHint{font-size:11px;line-height:1.45;color:#655c4b;margin:4px 1px} #game #panel #panelBody .vaultLedger{border-block:1px solid #c9bea8;background:#ebe5d5;padding:4px 7px} #game #panel #panelBody .vaultLedger>div{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:2px 5px;padding:3px 0;font-size:12px;line-height:1.4} #game #panel #panelBody .vaultLedger>div+div{border-top:1px solid #cec4b0} #game #panel #panelBody .vaultLedger>div>b{grid-column:1;color:#534c37;font-family:serif} #game #panel #panelBody .vaultLedger p{grid-column:2;margin:0;display:flex;align-items:center;gap:6px;color:#4b473b} #game #panel #panelBody .resMarks{display:inline-flex;gap:2px;flex:none} #game #panel #panelBody .resMarks i{width:4px;height:6px;background:#cdc3ab} #game #panel #panelBody .resMarks i:nth-child(4){margin-left:2px} #game #panel #panelBody .resMarks i.lit{background:#816528} #game #panel #panelBody .vaultTotals{font-size:12px;color:#514b3e;margin:5px 0} #game #panel #panelBody .vaultTotals summary{cursor:pointer;padding:4px 0} #game #panel #panelBody .vaultTotals>div{display:flex;flex-wrap:wrap;gap:3px 10px} #game #panel #panelBody .drawerHead{justify-content:space-between;padding-block:5px;border-top:2px solid #807457} #game #panel #panelBody .drawerHead h4{font:700 16px/1.25 serif;margin:0} #game #panel #panelBody :is(.drawerHead,.vaultCopies) select{max-width:100%;font-size:16px;min-height:34px;color:#38372f} #game #panel #panelBody .vaultTileGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px} #game #panel #panelBody .vaultTileGrid>p{grid-column:1/-1;margin:5px;font-size:12px} #game #panel #panelBody .vaultTile{position:relative;display:grid;align-content:start;justify-items:stretch;min-width:0;min-height:44px;padding:2px;border:1px solid #c4b9a5!important;background:#f7f2e6!important;border-radius:2px;box-shadow:none!important} #game #panel #panelBody .vaultTile[aria-pressed=true]{border-color:#62491c!important;outline:1px solid #94703a} #game #panel #panelBody .drawerArt{position:relative;display:grid;place-items:center;min-height:48px;background:#27302f;border-bottom:2px solid var(--gem)} #game #panel #panelBody .drawerArt .vaultIcon{width:36px} #game #panel #panelBody .drawerArt small,#game #panel #panelBody .drawerArt>i:not(.vaultIcon){position:absolute;background:#151d1efa;color:var(--gem)!important;font:600 9px/1.3 sans-serif;z-index:1;padding:0 2px} #game #panel #panelBody .drawerArt small{bottom:0;left:0} #game #panel #panelBody .drawerArt>i:not(.vaultIcon){top:0;right:0;color:white!important} #game #panel #panelBody .vaultTile>strong{display:block;padding:3px 0 1px;font:600 11px/1.3 sans-serif;text-align:center;white-space:nowrap;color:#37362e} #game #panel #panelBody .vaultTile>em{position:absolute;top:2px;left:2px;background:#29483f;color:#ede7cd;font:600 9px/1.35 sans-serif;padding:0 2px} #game #panel #panelBody .vaultPages{justify-content:center;margin:5px 0} #game #panel #panelBody .vaultDetail{border:1px solid #b8a77e;background:#f4eddc;margin:0 0 5px;padding:5px} #game #panel #panelBody .vaultDetailTitle{flex-wrap:wrap} #game #panel #panelBody .vaultDetailTitle>div{display:grid;flex:1;min-width:min(114px,100%)} #game #panel #panelBody .vaultDetailTitle small{font-size:10px;color:#675b44} #game #panel #panelBody .vaultDetailTitle strong{font-size:13px;word-break:keep-all} #game #panel #panelBody .vaultDetailTitle>b{font-size:11px;color:#495d4c} #game #panel #panelBody .vaultActions{margin-top:4px} #game #panel #panelBody .vaultActions button{flex:1;min-width:0;min-height:38px} #game #panel #panelBody .vaultCopies{margin-top:4px;font-size:11px} #game #panel #panelBody .vaultCopies select{min-width:0;flex:1} #game #panel #panelBody .vaultBagImprint{display:flex;align-items:center;gap:5px;flex-wrap:wrap;width:100%;min-height:42px;padding:4px 6px;color:#f3e6bc!important;background:#243530!important;border:1px solid #8c7855!important;text-align:left} #game #panel #panelBody .vaultBagImprint>strong{font:600 12px/1.3 serif;color:#f0dfa9} #game #panel #panelBody .vaultBagImprint>span:last-child{margin-left:auto} #game #panel #panelBody .imprintMark{display:inline-flex;align-items:center;position:relative;padding:0 3px;gap:3px;font-size:11px;color:#f5eacb} #game #panel #panelBody .imprintMark .vaultIcon{width:24px} #game #panel #panelBody :is(.imprint3,.imprint6) :is(.vaultIcon,.restRing){filter:drop-shadow(0 0 3px #9edcc7)} #game #panel #panelBody .imprint6 :is(.vaultIcon,.restRing){filter:drop-shadow(0 0 3px #edb45e) drop-shadow(0 0 2px #f7e9ad)} #game #panel #panelBody :is(.vaultSlot,.imprintMark):is(.imprint3,.imprint6)::after{content:"✦";position:absolute;pointer-events:none;right:8%;top:10%;font:14px/1 Georgia,serif;color:#a6e1ca;animation:vaultEmber 3s ease-in-out infinite alternate} #game #panel #panelBody :is(.vaultSlot,.imprintMark).imprint6::after{content:"✧ ✦";color:#ffe194} @keyframes vaultEmber{from{opacity:.48}to{opacity:1}} @media(prefers-reduced-motion:reduce){#game #panel #panelBody :is(.imprint3,.imprint6)::after{animation:none!important}} #game[data-quality=low] #panel #panelBody :is(.imprint3,.imprint6)::after{animation:none!important} #game #panel #panelBody .relicIntro{font-size:12px;color:#665e50;align-items:center;min-height:32px;gap:12px} #game #panel #panelBody .relicIntro>button{margin-left:auto;min-height:32px;padding:2px 7px} #game #panel #panelBody .vaultNotice{margin:2px 0;font-size:12px;color:#514c37} #game #panel #panelBody .vaultRates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 0;margin:0;gap:4px 7px} #game #panel #panelBody .vaultRates div{background:#ebe6d8;padding:4px} #game #panel #panelBody .vaultRates dd{margin:0;font-size:11px} #game #panel #panelBody .vaultTotals p{margin:4px 0} #game #panel #panelBody .vaultSwap{border-block:1px solid #cbbd9d;padding:4px 0;margin-top:5px;font-size:12px;line-height:1.4} #game #panel #panelBody .vaultSwapRow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(38px,auto);gap:4px;align-items:center;font-variant-numeric:tabular-nums} #game #panel #panelBody .vaultSwapRow em{font-style:normal;text-align:right} #game #panel #panelBody .vaultSwapRow .gain{color:#2b6049} #game #panel #panelBody .vaultSwapRow .loss,#game #panel #panelBody .vaultSwapNotice{color:#883f35} #game #panel #panelBody .vaultSwap small{color:#5f594c;font-size:10px} #game #panel #panelBody :is(.vaultTrait,.vaultSetDiff){color:#635026;margin:3px 0;font-size:12px} /* Compact, live preparation status in solo and cooperative dungeon menus. */ #game #panel #panelBody .dungeonPreparation{margin:8px 0;padding:9px;border:1px solid #c5b58c;background:#f6f0e1;color:#3c352b} #game #panel #panelBody .dungeonPreparation h4{margin:0 0 6px;font-size:14px;color:#3c352b} #game #panel #panelBody .preparationRows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px} #game #panel #panelBody .preparationRows button{display:grid;gap:3px;min-width:0;min-height:64px!important;padding:6px!important;text-align:left;white-space:normal!important;word-break:keep-all;line-height:1.35!important;background:#fffaf0!important;color:#3e483f!important;border:1px solid #b6b7a1!important} #game #panel #panelBody .preparationRows span{font-size:11px;color:#61564b} #game #panel #panelBody .preparationRows b{font-size:12px} #game #panel #panelBody .preparationRows small{font-size:11px;color:#61564b} #game #panel #panelBody .preparationRows button[data-tone=check]{border-color:#b88a39!important} #game #panel #panelBody .preparationRows button[data-tone=check] b{color:#815722} #game #panel #panelBody .preparationRows button[data-tone=danger]{border-color:#bd5243!important;background:#fff0e9!important} #game #panel #panelBody .preparationRows button[data-tone=danger] b{color:#ac3026} #game #panel #panelBody .dungeonPreparation p{margin:7px 0 0;font-size:12px;color:#61564b} #game #panel #panelBody .dungeonPatternGuide{padding:8px 10px;margin:8px 0;border-inline-start:3px solid #b57b32;background:#f5ecdc;color:#3e362d;font-size:12px;line-height:1.5} #game #panel #panelBody .dungeonPatternGuide p{margin:4px 0} #game #panel #panelBody .dungeonReport{margin:10px 0;padding:12px;border:1px solid #bd9789;border-left:4px solid #a44732;background:#fff7ef;color:#3d3028;min-width:0;overflow-wrap:anywhere} #game #panel #panelBody .dungeonReport[data-result=clear]{border-color:#a79a71;border-left-color:#4b7154;background:#f7f4e7} #game #panel #panelBody .dungeonReportHead{display:flex;flex-direction:column;gap:4px} #game #panel #panelBody .dungeonReport .dungeonReportHead strong{font-size:17px;color:#9b3627!important;line-height:1.35} #game #panel #panelBody .dungeonReport[data-result=clear] .dungeonReportHead strong{color:#325c3e!important} #game #panel #panelBody .dungeonReport h4{font-size:14px;margin:8px 0 4px;color:#3d3028} #game #panel #panelBody .dungeonReport p{font-size:13px;margin:6px 0;line-height:1.55;color:#493a30} #game #panel #panelBody .dungeonReport small{font-size:11px;color:#6d5948;line-height:1.5} #game #panel #panelBody .dungeonReport dl{display:grid;gap:3px;margin:8px 0;font-size:12px} #game #panel #panelBody .dungeonReport dl>div{display:flex;justify-content:space-between;gap:8px} #game #panel #panelBody .dungeonReport dt{flex-shrink:0;color:#6c5846} #game #panel #panelBody .dungeonReport dd{margin:0;text-align:right;color:#3d3028;min-width:0} #game #panel #panelBody .dungeonReport .dungeonReportReward{padding:8px;border:1px solid #d7c4a3;background:#efe5ce;color:#553e20;font-weight:700} #game #panel #panelBody .dungeonReport .dungeonReportReward[data-reward=pending]{border-color:#ad763c;background:#fff0d3;color:#814516} #game #panel #panelBody .dungeonReportActions{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap} #game #panel #panelBody .dungeonReportActions button{flex:1 1 90px;min-height:44px!important;margin:0;padding:7px 8px!important;background:#344e5b!important;color:#fff8e7!important;border:1px solid #263c48;font-size:13px;text-align:center;justify-content:center} /* v960: bounded, exact-copy purpose presets. */ #game #panel[data-kind="workshop"] #panelBody .purposePresets{display:grid;gap:12px;min-width:0} #game #panel #panelBody .purposeIntro{display:block;margin:0} #game #panel #panelBody .purposeIntro b{color:#253b49;font-size:15px} #game #panel #panelBody .purposePresets p{line-height:1.5;font-size:12px;overflow-wrap:anywhere;margin:5px 0} #game #panel #panelBody .purposeScope{border-left:3px solid #986d39;padding:6px 9px;background:#f2e7cd} #game #panel #panelBody .purposeCard{padding:10px;border:1px solid #bcaa85;background:#fffaf0;min-width:0;border-radius:5px} #game #panel #panelBody .purposeCard h3{display:flex;justify-content:space-between;gap:6px;align-items:center;margin:0 0 8px;color:#293d47;font-size:15px} #game #panel #panelBody .purposeCard h3 small{font-size:10px;color:#526450;font-weight:500} #game #panel #panelBody .purposeGear{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px} #game #panel #panelBody .purposeGear>div{display:flex;flex-direction:column;align-items:center;min-width:0;border:1px solid #d0bea0;border-radius:3px;padding:3px 0;background:#eee2ca;overflow:hidden} #game #panel #panelBody .purposeGear .artIcon,#panel .purposeEmpty{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center} #game #panel #panelBody .purposeGear small{font-size:9px;white-space:nowrap;color:#544632} #game #panel #panelBody .purposeGear b{font-size:10px;line-height:1.4;color:#744b13} #game #panel #panelBody .purposeCard dl{display:grid;grid-template-columns:56px minmax(0,1fr);gap:5px 7px;font-size:11px;line-height:1.5;margin:9px 0} #game #panel #panelBody .purposeCard dt{color:#70614c;font-weight:700} #game #panel #panelBody .purposeCard dd{margin:0;overflow-wrap:anywhere;color:#2a343a} #game #panel #panelBody .purposeActions{display:grid;grid-template-columns:1fr 1.3fr .65fr;gap:5px} #game #panel #panelBody .purposeActions button{min-width:0;min-height:44px;padding:5px 3px;font-size:11px;white-space:normal;text-align:center} #game #panel #panelBody .purposeActions [data-workshop="purposeApply"]{background:#344d60;color:#fff7e8;border-color:#7b8d96} #game #panel #panelBody .purposeActions button:disabled{opacity:.5} #game #panel #panelBody .purposeCard .purposeError{color:#a32b28;background:#f9e1d8;border-left:3px solid #b83b31;padding:5px 7px} #game #panel #panelBody .purposeDiff{display:grid;gap:8px} #game #panel #panelBody .purposeDiff article{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid #c5b394;border-radius:4px;background:#fffaf0;font-size:12px;overflow-wrap:anywhere} #game #panel #panelBody .purposeDiff span{color:#6c6254;font-size:11px} #game #panel #panelBody .purposeDiff strong{color:#a8352e;font-size:12px} #game #panel #panelBody .purposeBlank{min-height:26px;color:#786650} #game #panel[data-kind="workshop"] #panelBody .workshop .purposeIntro{position:static;inset:auto;padding:0;min-height:0;height:auto;display:block} #game #panel[data-kind="workshop"] #panelBody .workshop .purposeActions button{min-height:44px!important;height:auto!important;font-size:11px!important;line-height:1.4!important} #game #panel[data-kind="workshop"] #panelBody .workshop .purposeActions [data-workshop="purposeApply"]:not(:disabled){background:#344d60!important;color:#fff7e8!important;border-color:#7b8d96!important} #game #panel[data-kind="workshop"] #panelBody .workshop .workWallet[hidden]{display:none!important} /* v0.90.61: isolated 30-second practice comparison. Scoped above historic panel rules. */ #game #panel #panelBody .trainingCompare{color:#392f25;min-width:0;font-size:13px;line-height:1.5} #game #panel #panelBody .trainingIntro{padding:12px;border-left:3px solid #8e4935;background:#f3ead8;margin-bottom:12px} #game #panel #panelBody .trainingIntro b{font-size:16px!important;color:#53392e} #game #panel #panelBody .trainingIntro p{margin:4px 0 0} #game #panel #panelBody .trainingControls{display:grid;gap:8px;min-width:0} #game #panel #panelBody .trainingControls select{box-sizing:border-box;min-width:0;width:100%;font-size:16px!important;min-height:44px!important;color:#332c25!important;background:#fffaf0!important;border:1px solid #a99b7c;border-radius:4px;padding:7px 9px} #game #panel #panelBody .trainingTargets{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:0} #game #panel #panelBody .trainingTargets button,#game #panel #panelBody [data-training-run],#game #panel #panelBody [data-training-cancel],#game #panel #panelBody .purposeCompare{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px!important;height:auto!important;white-space:normal;line-height:1.35;font-size:13px;padding:8px;min-width:0} #game #panel #panelBody .trainingTargets button{color:#534d43!important;background:#f4f0e5!important;border:1px solid #b7aa91} #game #panel #panelBody .trainingTargets button[aria-pressed=true]{color:#fff7e8!important;background:#4a5d68!important;border:2px solid #b7934d!important} #game #panel #panelBody [data-training-run]{background:#883d32!important;color:#fff8eb!important;border:1px solid #613026!important;font-weight:800;font-size:15px!important} #game #panel #panelBody [data-training-run]:disabled{opacity:.55} #game #panel #panelBody [data-training-cancel]{background:#eee4d1!important;color:#44372d!important} #game #panel #panelBody [data-training-cancel][hidden],#game #panel #panelBody [data-training-stale][hidden]{display:none} #game #panel #panelBody .purposeCompare{width:100%;margin-top:8px;color:#fff8e9!important;background:#485c68!important;border:1px solid #2e424d;font-weight:700} #game #panel #panelBody .trainingWarning{color:#a2312c;font-weight:700;margin:0;overflow-wrap:anywhere} #game #panel #panelBody .trainingWarning:empty{display:none} #game #panel #panelBody .trainingScope{padding:10px 0;margin:6px 0;color:#58462d;font-weight:700;border-bottom:1px solid #cfc0a6} #game #panel #panelBody .trainingRules{font-size:12px;color:#665b4d;padding:8px 0} #game #panel #panelBody .trainingRules summary{cursor:pointer;color:#43596b;font-weight:700;min-height:32px;display:list-item} #game #panel #panelBody .trainingRules p{margin:6px 0} #game #panel #panelBody .trainingResult h3{margin:16px 0 0;font-size:17px;color:#392f25} #game #panel #panelBody .trainingTargetName{margin:4px 0 10px;color:#6c5d48} #game #panel #panelBody .trainingTotals{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0} #game #panel #panelBody .trainingTotals article{min-width:0;background:#faf6e9;border:1px solid #b6a783;border-top:3px solid #647382;border-radius:4px;padding:10px 8px} #game #panel #panelBody .trainingTotals article.trainingSaved{border-top-color:#a97632;background:#fff2d6} #game #panel #panelBody .trainingTotals article>b,#game #panel #panelBody .trainingTotals article>strong,#game #panel #panelBody .trainingTotals article>small{display:block;text-align:center;overflow-wrap:anywhere} #game #panel #panelBody .trainingTotals article>strong{font-size:22px;color:#69462c;line-height:1.3;font-variant-numeric:tabular-nums} #game #panel #panelBody .trainingTotals dl{display:grid;grid-template-columns:1fr;gap:1px;margin:10px 0 0;font-size:12px} #game #panel #panelBody .trainingTotals dt{color:#6b6153;text-align:center} #game #panel #panelBody .trainingTotals dd{margin:0 0 5px;font-weight:700;color:#354d61;text-align:center;font-variant-numeric:tabular-nums} #game #panel #panelBody .trainingDelta{font-size:12px;overflow-wrap:anywhere;padding:8px;background:#e9edf0;color:#354d61;border:1px solid #bec7cb} #game #panel #panelBody .trainingSkillRows{display:grid;gap:8px;margin-top:10px} #game #panel #panelBody .trainingSkillRows article{min-width:0;border:1px solid #c2b599;background:#fbf7eb;border-radius:4px;padding:8px} #game #panel #panelBody .trainingSkillRows h4{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-size:14px;color:#48372d;overflow-wrap:anywhere} #game #panel #panelBody .trainingSkillRows h4 .gameIcon,#game #panel #panelBody .trainingSkillRows h4 .containedIcon{width:24px;height:24px;flex:0 0 24px} #game #panel #panelBody .trainingRow{display:grid;grid-template-columns:30px 65px minmax(0,1fr) 47px;gap:3px;align-items:center;font-size:12px;text-align:right;padding:3px 0;color:#473c30;font-variant-numeric:tabular-nums} #game #panel #panelBody .trainingRow>*{min-width:0;overflow-wrap:anywhere} #game #panel #panelBody .trainingRow>b{text-align:left} #game #panel #panelBody .trainingRowHead{color:#766957;font-size:11px;border-bottom:1px solid #d6cbb6} #game #panel #panelBody .trainingSkillRows small,#game #panel #panelBody .trainingFootnote{display:block;font-size:11px;color:#78664f;line-height:1.5} #game #panel #panelBody [data-training-status][data-tone=ready]{color:#315d73} #game #panel #panelBody .trainingResult[data-stale=true] h3{color:#a2312c} /* v0.90.62: explicit loot review, bounded cards and exact +0 selections. */ #game #panel #panelBody .lootReview{min-width:0;color:#514a3e} #game #panel #panelBody .lootReview button,#game #panel #panelBody .bagLootReview{min-height:44px!important;height:auto!important;white-space:normal;line-height:1.35!important;text-align:center!important;font-size:12px!important;padding:6px 8px!important;display:flex;align-items:center;justify-content:center;gap:4px} #game #panel #panelBody .lootIntro p,#game #panel #panelBody .lootHelp p{font-size:12px;line-height:1.6;margin:6px 0} #game #panel #panelBody .lootTools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:10px 0} #game #panel #panelBody .lootTools nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px} #game #panel #panelBody .lootTools nav button[aria-pressed="true"]{background:#4a5d68!important;color:#fff7e8!important;border-color:#354b58!important} #game #panel #panelBody .lootTools label{display:flex;align-items:center;gap:6px;font-size:12px;min-width:0} #game #panel #panelBody .lootTools select{min-width:0;width:100%;font-size:16px!important;min-height:44px;padding:6px!important;background:#fffaf0;color:#514a3e;border:1px solid #c8b68e} #game #panel #panelBody .lootTray{background:#f1e8d4;border:1px solid #bca77f;padding:10px;margin:10px 0;display:grid;gap:8px} #game #panel #panelBody .lootTray>div:first-child{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px} #game #panel #panelBody .lootTrayActions{display:grid;grid-template-columns:1fr 1fr;gap:6px} #game #panel #panelBody .lootSubmit{background:#883d32!important;color:#fff8eb!important;border:1px solid #702d24!important;font-weight:bold} #game #panel #panelBody .lootCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px} #game #panel #panelBody .lootCard{min-width:0;border:1px solid #c8b68e;border-left:3px solid var(--loot-grade,#84796b);background:#fffbf0;padding:9px;border-radius:4px} #game #panel #panelBody .lootCard[data-selected="true"]{box-shadow:inset 0 0 0 2px #aa7b36} #game #panel #panelBody :is(.lootCard,.lootConfirmList li)[data-grade="1"]{--loot-grade:#346b94} #game #panel #panelBody :is(.lootCard,.lootConfirmList li)[data-grade="2"]{--loot-grade:#794993} #game #panel #panelBody :is(.lootCard,.lootConfirmList li)[data-grade="3"]{--loot-grade:#95600b} #game #panel #panelBody :is(.lootCard,.lootConfirmList li)[data-grade="4"]{--loot-grade:#ab3934} #game #panel #panelBody .lootCard .lootItemHead{display:flex;align-items:center;gap:9px} #game #panel #panelBody .lootCard .lootItemHead>.artIcon{width:44px!important;height:44px!important;flex:0 0 44px} #game #panel #panelBody .lootCard .lootItemHead>div{min-width:0} #game #panel #panelBody .lootCard h3{margin:0;font-size:14px;line-height:1.4;color:var(--loot-grade);overflow-wrap:anywhere} #game #panel #panelBody .lootCard h3 span{white-space:nowrap} #game #panel #panelBody .lootCard small{font-size:11px;line-height:1.5} #game #panel #panelBody .lootStats{font-size:12px;margin:8px 0;line-height:1.5} #game #panel #panelBody .lootComparison{border-top:1px solid #ddd1b5;padding-top:7px;font-size:11px;line-height:1.6} #game #panel #panelBody .lootComparison div{display:flex;gap:3px 9px;flex-wrap:wrap} #game #panel #panelBody .lootGain{color:#326747!important} #game #panel #panelBody .lootLoss{color:#a43831!important} #game #panel #panelBody .lootReason{margin:6px 0;font-size:11px;color:#81502f} #game #panel #panelBody .lootRowActions{display:flex;gap:6px;flex-wrap:wrap;justify-content:space-between;align-items:center} #game #panel #panelBody .lootRowActions>button{flex:1 1 70px} #game #panel #panelBody .lootRowActions>button[aria-pressed="true"]{background:#4a5d68!important;color:#fff7e8!important} #game #panel #panelBody .lootQuantity{display:flex;align-items:center;gap:2px;flex:0 0 auto} #game #panel #panelBody .lootQuantity button{min-width:36px!important;padding:6px!important} #game #panel #panelBody .lootQuantity span{min-width:27px;text-align:center;font-size:12px} #game #panel #panelBody .lootPages{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;margin:12px 0} #game #panel #panelBody .lootWarning{color:#9d352e!important;font-weight:bold;font-size:12px;line-height:1.5;background:#fbe9df;padding:8px;border-left:3px solid #a33e31} #game #panel #panelBody .lootWarning[hidden]{display:none} #game #panel #panelBody .lootConfirmList{padding:0;margin:8px 0;list-style:none} #game #panel #panelBody .lootConfirmList li{display:flex;align-items:center;gap:8px;border-bottom:1px solid #d6c9af;padding:7px 0;color:var(--loot-grade,#514a3e);font-size:13px} #game #panel #panelBody .lootConfirmList .artIcon{width:32px!important;height:32px!important;flex:0 0 32px} #game #panel #panelBody .lootConfirmList span{min-width:0;overflow-wrap:anywhere} #game #panel #panelBody .lootConfirmList b{display:block} #game #panel #panelBody .bagLootReview{width:100%;margin-bottom:8px} #game #panel #panelBody .lootTools label>span{white-space:nowrap;flex:0 0 auto} /* C02: readable paired seals. B05: a letter, not a compulsory combat overlay. */ #game #panel #panelBody .coopSealGuide{margin:10px 0;padding:12px;border:1px solid #a89776;border-radius:5px;background:#f6edda;color:#383f4a} #game #panel #panelBody .coopSealGuide>b{display:block;color:#294c67;font-size:15px} #game #panel #panelBody .coopSealGuide p{font-size:12px;line-height:1.55;margin:8px 0;overflow-wrap:anywhere} #game #panel #panelBody .coopSealPair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px} #game #panel #panelBody .coopSealPair>span{min-width:0;display:flex;flex-direction:column;gap:4px;padding:9px 5px;border:1px solid #afbbc3;border-radius:4px;background:#edf5f9;text-align:center} #game #panel #panelBody .coopSealPair>span[data-coop-seal="1"]{background:#fff1ce;border-color:#cbb273} #game #panel #panelBody .coopSealPair>span.isMine{outline:2px solid #a94c32;outline-offset:1px} #game #panel #panelBody .coopSealPair strong{font-size:13px;color:#2c5975} #game #panel #panelBody .coopSealPair [data-coop-seal="1"] strong{color:#835714} #game #panel #panelBody .coopSealPair small{font-size:11px;color:#514e46} #game #panel #panelBody .coopSealPair .isMine small{color:#a33929;font-weight:700} #game #panel #panelBody .coopSealPair progress{width:100%;height:7px;accent-color:#39759b} #game #panel #panelBody .coopSealPair [data-coop-seal="1"] progress{accent-color:#b5872f} #game #panel #panelBody [data-coop-walk]{width:100%;min-height:44px!important;background:#315970!important;color:#fff8e8!important;font-size:13px;text-align:center;display:block} #game #panel #panelBody [data-coop-walk][hidden]{display:none} #game #panel #panelBody .returnStory{flex:1 1 100%;min-width:0;margin-top:18px;padding-top:16px;border-top:2px solid #bba47a} #game #panel #panelBody .returnStory>small{color:#806738;font-size:11px} #game #panel #panelBody .returnStory h4{font-size:17px;color:#344c61;margin:6px 0 10px} #game #panel #panelBody .returnStory p{font-size:13px;line-height:1.7;overflow-wrap:anywhere} #game #panel #panelBody .returnStory button{min-height:44px;font-size:13px;line-height:1.4;white-space:normal;text-align:center} #game #panel #panelBody .returnStoryPaths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px} #game #panel #panelBody .returnStoryPaths>div{display:flex;flex-direction:column;gap:7px;min-width:0;padding:9px;border:1px solid #c8b58e;background:#fffbf1;border-radius:4px} #game #panel #panelBody .returnStoryPaths b{font-size:13px;color:#315970} #game #panel #panelBody .returnStoryPaths span{font-size:12px;line-height:1.6;flex:1} #game #panel #panelBody .returnStoryAnswer{padding:12px;border-left:3px solid #a88045;background:#f1e5cd} @media(max-width:380px){#game #panel #panelBody .returnStoryPaths{grid-template-columns:minmax(0,1fr)}} /* Paintings share the title line, keeping the actions visible on small screens. */ #game #panel .menuIllustration { display:block; object-fit:contain; flex:0 0 auto; pointer-events:none; } #game #panel .menuTileArt .menuIllustration, #game #panel .panelHead #panelTitle :is(.menuIllustration,.menuPaintedIcon) { width:24px; height:24px; flex:0 0 24px; } #game #panel #panelBody :is(.paintedCaption,.paintedSectionTitle,.attributeArtLabel) { display:flex; align-items:center; gap:10px; text-align:start; min-width:0; } #game #panel #panelBody .paintedCaption>div {min-width:0; flex:1;} #game #panel #panelBody .paintedCaption h4 {margin:3px 0 5px;} #game #panel #panelBody .coopSealPair .menuIllustration {width:58px; height:58px; align-self:center;} #game #panel #panelBody .attributeSteps {align-items:center; flex-wrap:wrap; gap:4px;} #game #panel #panelBody .attributeArtLabel {gap:5px; font-weight:700;} #game #panel #panelBody .attributeArtLabel small {display:block; font-size:11px;} #game #panel #panelBody .attributeUnits {display:inline-flex; gap:3px; align-items:center;} #game #panel #panelBody .attributeUnits button { min-height:44px!important; min-width:48px; margin:0; padding:3px 6px; font-size:13px; border:1px solid #b9a885; background:#f4ebdb; color:#443c30; } #game #panel #panelBody .attributeUnits button[aria-pressed="true"] { border:2px solid #926a31!important; background:#364c58!important; color:#fffaed!important; } #game #panel #panelBody .attributeStepper button {white-space:nowrap; font-size:14px; padding:0;} #game #panel #panelBody .marsEventHeading {padding:4px 6px;} @media(max-width:380px) { #game #panel #panelBody .paintedCaption>.menuIllustration {width:47px;height:47px;} #game #panel #panelBody .coopSealPair .menuIllustration {width:48px;height:48px;} }