/* SYLVARA 1.0.38 — approved ivory/champagne painted interface.
   Layout, font families/sizes, art, bars, cooldown masks and click handlers stay
   in their owning modules. Only shared surface paint lives here. The source
   styles use these tokens, including stylesheets loaded after this one.
   Text is always live HTML; the five frame assets contain no lettering. */
:root{
 --ui-paper:#f6f0e3;--ui-inset:#e5d9c6;--ui-header:#6b5140;
 --ui-ink:#865337;--ui-muted:#7d5c43;--ui-button-ink:#61371f;--ui-line:#b99b71;
 --ui-accent:#ba7c2e;--ui-selected:#edbd69;--ui-danger:#a0382c;
 --ui-success:#496d36;--ui-light:#fff1d7;
 --ui-shadow:0 10px 34px #38241638;
 --ui-panel-image:url('assets/ui138/panel.png');
 --ui-header-image:url('assets/ui138/header.png');
 --ui-primary-image:url('assets/ui138/button-primary.png');
 --ui-secondary-image:url('assets/ui138/button-secondary.png');
 --ui-slot-image:url('assets/ui138/panel.png');
 --ui-tab-image:url('assets/ui138/button-secondary.png');
 --ui-close-image:url('assets/ui138/close.png');
}
/* Dialogs and floating content sheets share one stretch-safe painted frame. */
dialog:not(.syl-product-info-overlay),
.syl-product-info-card,.entry-panel,.sylvara-loading-inner,#sylvara-update,
.controls,.city-bottom,.farm-toolbar,.duel-result,.solo-network,.pvp-lobby-actions,
#loading,#hint,#city-notice,#farm-toast,#city-harvest-status,
#library-map-status,#library-raid-options,.pvp-lobby-card{
 --ui-frame:var(--ui-panel-image) 16% fill / 14px / 0 stretch;
 background-color:var(--ui-paper);color:var(--ui-ink);text-shadow:none;
 color-scheme:light;
}
/* Small controls keep their existing physical sizes and hit targets. */
button{--ui-ink:var(--ui-button-ink)}
button:where(:not(#cast,.boss-notice,.syl-shop-info-button)),
.city-link,.pvp-link,.back-link,.farm-top a,.duel-top a,
.library-header a,#library-asset-grid a,.guild-header>a,
input:not([type=checkbox],[type=radio],[type=range],[type=color]),select{
 --ui-frame:var(--ui-secondary-image) 28% 10% fill / 7px / 0 stretch;
 background-color:var(--ui-paper);color:var(--ui-ink);text-shadow:none;
}
button:not(:disabled):active{filter:brightness(.96)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible{outline-color:var(--ui-accent);outline-offset:2px}
input:not([type=checkbox],[type=radio],[type=range],[type=color]),select{
 background:var(--ui-inset);--ui-frame:var(--ui-secondary-image) 28% 10% / 6px / 0 stretch;
 color-scheme:light;
}
input::placeholder{color:var(--ui-muted);opacity:.85}
option{color:var(--ui-ink);background:var(--ui-paper)}
/* Primary actions and selected tabs receive the amber face, not extra glows. */
button.primary,button.farm-primary,button.forge-primary,button.pet-primary,
button.skill-save,button.duel-start,#farm-quick-claim-all,
[data-startup-enter],[data-update-start],[data-cosmetic-buy],
.bag-action-buttons [data-act=confirm],.quantity-footer [data-key=apply],
.detail-actions>button:first-child,
.syl-service-actions>button:last-child,.pet-inline-actions>button:first-child,
button[aria-pressed=true],button[aria-selected=true],button.selected,
button.active,.library-menu button{
 --ui-frame:var(--ui-primary-image) 28% 10% fill / 7px / 0 stretch;
}
.bag-tabs button,.forge-tabs button,.guild-tabs button,.farm-tabs button,
.syl-service-tabs button,.syl-shop-tabs button,.syl-cosmetic-tabs button,
.equipment-loadouts button,.skill-panel-tabs button,.appearance-gallery nav button{
 --ui-frame:var(--ui-tab-image) 28% 10% fill / 6px / 0 stretch;
}
.bag-tabs button[aria-selected=true],.forge-tabs button[aria-selected=true],
.guild-tabs button[aria-selected=true],.farm-tabs button[aria-selected=true],
.syl-service-tabs button[aria-selected=true],.syl-shop-tabs button[aria-selected=true],
.syl-cosmetic-tabs button[aria-selected=true],.equipment-loadouts button[aria-pressed=true],
.skill-panel-tabs button[aria-pressed=true],.appearance-gallery nav button[aria-pressed=true]{
 --ui-frame:var(--ui-primary-image) 28% 10% fill / 6px / 0 stretch;
}
/* Content headers: existing titles, descriptions and close glyphs stay separate. */
.inventory-header,.syl-forge>header,.syl-service>header,#city-function-panel>header,
.farm-sheet-head,.character-skills>header,.appearance-gallery>header,
.syl-product-info-card>header,.library-assets-heading,.farm-quick-header{
 --ui-frame:var(--ui-header-image) 35% 10% / 7px / 0 stretch;
 background:var(--ui-header);color:var(--ui-light);text-shadow:none;
}
:root .inventory-header :is(h2,h3,small,.eyebrow),
:root .syl-forge>header :is(h2,small,p),
:root .syl-service>header h2,:root #city-function-panel>header h2,
:root .farm-sheet-head h2,:root .character-skills>header h3,
:root .appearance-gallery>header h2,:root .syl-product-info-card>header h3,
:root .library-assets-heading :is(h2,p),:root .farm-quick-header h2{
 color:var(--ui-light);text-shadow:none;
}
/* Headers without their own padding need a small text inset inside the frame. */
.farm-sheet-head,.syl-product-info-card>header,.appearance-gallery>header,
.character-skills>header,.farm-quick-header{padding:8px 10px}
:root :is(.bag-close,.close-dialog,.forge-close,.farm-close,.social-close,
.appearance-gallery-close),:root .syl-service>header button,
:root #city-function-panel>header button,:root .game-settings>header button,
:root .syl-product-info-card>header button,:root .character-skills header [data-close],
#close-panel{
 --ui-frame:var(--ui-close-image) 18% fill / 7px / 0 stretch;
 background:var(--ui-paper);color:var(--ui-ink);text-shadow:none;
}
/* Reusable slot faces. Item art and rarity indicators remain separate. */
.item-cell,.socket-cell,.reward-slot,
button.skill-slot,.pet-card,.pet-merge-slot,.farm-plot,.activation-item,
.social-equipment button,#library-asset-grid figure{
 --ui-frame:var(--ui-slot-image) 16% fill / 7px / 0 stretch;
 background-color:var(--ui-inset);
}
.item-cell.green{outline:1px solid #789450;outline-offset:-3px}
.item-cell.purple{outline:1px solid #af87ba;outline-offset:-3px}
.item-cell.gold{outline:1px solid #d6b75f;outline-offset:-3px}
.item-cell.white{outline:1px solid #aca998;outline-offset:-3px}
.pet-card.SR{outline:1px solid #86aac9;outline-offset:-3px}
.pet-card.SSR{outline:1px solid #c6a660;outline-offset:-3px}
:root .pet-card.selected,:root .syl-forge .item-cell.selected,
:root .farm-plot[aria-pressed=true],:root .pet-merge-slot.active{
 outline:2px solid var(--ui-accent);outline-offset:-3px;
}
/* Cards within larger dialogs retain their grids and scrolling containers. */
.pet-detail,.pet-merge-preview,.forge-preview,.star-preview,.action-totals,
.bulk-level-picker,.trade-column,.trade-bag,.social-stats,
#city-function-panel .card,#city-function-panel .stat,
#city-function-panel .boss-invitation,#city-function-panel .city-ranking,
.guild-panel .card,.guild-panel .stat,.game-diagnostics,
.character-activations .activation-summary,.character-skills .skill-description,
.appearance-gallery-picker,.appearance-gallery-stage,.library-creature-stage,
.farm-quick-row{
 --ui-frame:var(--ui-panel-image) 16% fill / 9px / 0 stretch;
 background-color:var(--ui-paper);color:var(--ui-ink);
}
/* Toolbars and their decorative labels use the same material in every map. */
:root .controls,:root .city-bottom,:root .farm-toolbar{color:var(--ui-ink)}
:root .character-heading,:root .vital-name,:root #distance,
:root .duel-status,:root .pvp-lobby-title{color:var(--ui-ink);text-shadow:none}
:root .side-slots button>span:last-child,
:root .city-actions button>span:last-child{background:#6b5140dc;color:var(--ui-light)}
:root .side-slots .skill-page>[data-page-label]{background:transparent;color:var(--ui-ink)}
.duel-top>span,.city-zones,#map-name,.render-diagnostics-meter{
 --ui-frame:var(--ui-secondary-image) 28% 10% fill / 7px / 0 stretch;
 background:var(--ui-paper);color:var(--ui-ink);text-shadow:none;
}
.skill-slot .skill-number,.skill-slot .cooldown-value,
.skill-slot .skill-duration,.skill-slot .basic-label{
 color:#fff7e7;text-shadow:0 1px 2px #27170c,1px 0 2px #27170c;
}
/* Mini/map overlays intentionally remain translucent over the city scene. */
:root .city-minimap,:root .city-map-expanded{
 --ui-frame:var(--ui-secondary-image) 28% 10% / 6px / 0 stretch;
 background:#6b514034;
}
:root .city-map-destination rect{fill:#6b514075;stroke:#e6ceb0}
:root .city-map-destination.is-current rect{fill:#b5813d88;stroke:#ffe1a0}
:root .city-map-destination:active rect{fill:#b5813daa}
/* Scene input targets are deliberately not skinned or made opaque. */
#city-dots button,#cast,.boss-notice,.syl-shop-info-button{
 --ui-frame:none;background:transparent;box-shadow:none;
}
:root .stage-choice{--ui-frame:var(--ui-secondary-image) 28% 10% fill / 8px / 0 stretch}
:root .stage-choice[data-scene=ice]{box-shadow:inset 4px 0 #668da8}
:root .stage-choice[data-scene=grass]{box-shadow:inset 4px 0 #879254}
:root .stage-choice[data-scene=autumn]{box-shadow:inset 4px 0 #a36a42}
:root .stage-number{background:#cfb38a55;color:var(--ui-ink)}
/* Contrast corrections for formerly pale text on the new ivory surfaces.
   Font families and sizes remain unchanged pending the separate text decision. */
:root .entry-panel,:root .entry-panel p,:root #login-message,
:root .sylvara-loading-inner,:root .sylvara-loading-inner p,
:root #sylvara-update,:root #sylvara-update :is(h2,strong,p,small){color:var(--ui-ink);text-shadow:none}
:root .item-quality.green{color:#486a2d}
:root .item-quality.purple{color:#785091}
:root .item-quality.gold{color:#876017}
:root .pet-rank{color:#685641}
:root .pet-rank.SR{color:#366c91}
:root .pet-rank.SSR{color:#8a6319}
:root .item-set .active{color:var(--ui-success)!important}
:root .stat-enchant{color:#826124}
:root .stat-base{color:var(--ui-ink)}
:root .socket-cell>span,:root .skill-empty-symbol{color:var(--ui-muted)}
/* Library is a UI page; world/canvas previews retain the original scene. */
html:has(#library){color-scheme:light;background:#e7dcc9;color:var(--ui-ink)}
body:has(#library){background:radial-gradient(ellipse at 50% 0,#fff9ed,#e7dcc9 70%);color:var(--ui-ink)}

/* Icon backgrounds are artwork; only the edge is painted, never its center. */
:root .skill-panel-icon{--ui-frame:var(--ui-slot-image) 16% / 5px / 0 stretch}
.side-slots .skill-page svg{fill:var(--ui-ink)}
.side-slots .skill-page svg path{stroke:var(--ui-ink)}
:root .material-symbol{color:var(--ui-ink);text-shadow:none}
:root .socket-cell small{color:var(--ui-light)}
:root .raid-ranking{--ui-frame:var(--ui-panel-image) 16% fill / 10px / 0 stretch;background:var(--ui-paper);color:var(--ui-ink)}
:root .sylvara-egg-preview134 :is(.egg-phone,.egg-tiers,.egg-result,.egg-status){--ui-frame:var(--ui-panel-image) 16% fill / 9px / 0 stretch;background:var(--ui-paper);color:var(--ui-ink);box-shadow:none}
:root .sylvara-egg-preview134 .egg-open{--ui-frame:var(--ui-primary-image) 28% 10% fill / 8px / 0 stretch;background:var(--ui-selected);color:var(--ui-ink);text-shadow:none;box-shadow:none}
#fishing-action-status{--ui-frame:var(--ui-panel-image) 16% fill / 9px / 0 stretch}
/* New lobby / remote farm sheets use the same chrome as existing dialogs. */
.pvp-lobby-card,.pvp-lobby-actions{border:1px solid transparent}
:root #farm-quick-panel>header{
 --ui-frame:var(--ui-header-image) 35% 10% / 7px / 0 stretch;
 background:var(--ui-header);color:var(--ui-light);padding:8px 10px;
}
:root #farm-quick-panel>header h2{color:var(--ui-light)}
:root #farm-quick-panel>header button{
 --ui-frame:var(--ui-close-image) 18% fill / 7px / 0 stretch;
 color:var(--ui-button-ink);background:var(--ui-paper);
}
:root #farm-quick-panel .farm-quick-row{padding:12px 9px;margin-top:8px}

/* Specific ancestors in the bag own text colors; retain contrast in their header. */
:root #inventory-panel .inventory-header :is(h2,h3,small,.eyebrow){color:var(--ui-light)}
:root #inventory-panel .bag-close{color:var(--ui-button-ink)}
:root .library-map-header{--ui-frame:var(--ui-header-image) 35% 10% / 7px / 0 stretch;background:var(--ui-header);color:var(--ui-light)}
:root .appearance-gallery-rear-status{color:var(--ui-ink);text-shadow:none}

/* The only cascade lock is this paint property. Existing modules may append a
   border shorthand later; layout, focus outlines and resource bars stay local.
   Only these explicit surfaces receive a frame, so nested art is unaffected. */
dialog:not(.syl-product-info-overlay),
.syl-product-info-card,.entry-panel,.sylvara-loading-inner,#sylvara-update,
.controls,.city-bottom,.farm-toolbar,.duel-result,.solo-network,.pvp-lobby-actions,
#loading,#hint,#city-notice,#farm-toast,#city-harvest-status,
#library-map-status,#library-raid-options,.pvp-lobby-card,
button:where(:not(#cast,.boss-notice,.syl-shop-info-button)),
.city-link,.pvp-link,.back-link,.farm-top a,.duel-top a,
.library-header a,#library-asset-grid a,.guild-header>a,
input:not([type=checkbox],[type=radio],[type=range],[type=color]),select,
input:not([type=checkbox],[type=radio],[type=range],[type=color]),select,
button.primary,button.farm-primary,button.forge-primary,button.pet-primary,
button.skill-save,button.duel-start,#farm-quick-claim-all,
[data-startup-enter],[data-update-start],[data-cosmetic-buy],
.bag-action-buttons [data-act=confirm],.quantity-footer [data-key=apply],
.detail-actions>button:first-child,
.syl-service-actions>button:last-child,.pet-inline-actions>button:first-child,
button[aria-pressed=true],button[aria-selected=true],button.selected,
button.active,.library-menu button,
.bag-tabs button,.forge-tabs button,.guild-tabs button,.farm-tabs button,
.syl-service-tabs button,.syl-shop-tabs button,.syl-cosmetic-tabs button,
.equipment-loadouts button,.skill-panel-tabs button,.appearance-gallery nav button,
.bag-tabs button[aria-selected=true],.forge-tabs button[aria-selected=true],
.guild-tabs button[aria-selected=true],.farm-tabs button[aria-selected=true],
.syl-service-tabs button[aria-selected=true],.syl-shop-tabs button[aria-selected=true],
.syl-cosmetic-tabs button[aria-selected=true],.equipment-loadouts button[aria-pressed=true],
.skill-panel-tabs button[aria-pressed=true],.appearance-gallery nav button[aria-pressed=true],
.inventory-header,.syl-forge>header,.syl-service>header,#city-function-panel>header,
.farm-sheet-head,.character-skills>header,.appearance-gallery>header,
.syl-product-info-card>header,.library-assets-heading,.farm-quick-header,
:root :is(.bag-close,.close-dialog,.forge-close,.farm-close,.social-close,
.appearance-gallery-close),:root .syl-service>header button,
:root #city-function-panel>header button,:root .game-settings>header button,
:root .syl-product-info-card>header button,:root .character-skills header [data-close],
#close-panel,
.item-cell,.socket-cell,.reward-slot,
button.skill-slot,.pet-card,.pet-merge-slot,.farm-plot,.activation-item,
.social-equipment button,#library-asset-grid figure,
.pet-detail,.pet-merge-preview,.forge-preview,.star-preview,.action-totals,
.bulk-level-picker,.trade-column,.trade-bag,.social-stats,
#city-function-panel .card,#city-function-panel .stat,
#city-function-panel .boss-invitation,#city-function-panel .city-ranking,
.guild-panel .card,.guild-panel .stat,.game-diagnostics,
.character-activations .activation-summary,.character-skills .skill-description,
.appearance-gallery-picker,.appearance-gallery-stage,.library-creature-stage,
.farm-quick-row,
.duel-top>span,.city-zones,#map-name,.render-diagnostics-meter,
:root .city-minimap,:root .city-map-expanded,
#city-dots button,#cast,.boss-notice,.syl-shop-info-button,
:root .stage-choice,
:root .skill-panel-icon,
:root .raid-ranking,
:root .sylvara-egg-preview134 :is(.egg-phone,.egg-tiers,.egg-result,.egg-status),
:root .sylvara-egg-preview134 .egg-open,
#fishing-action-status,
:root #farm-quick-panel>header,
:root #farm-quick-panel>header button,
:root .library-map-header{border-image:var(--ui-frame,none)!important}
button:disabled{opacity:.5;cursor:default}
:root .item-caption{background:#4b3429de;color:var(--ui-light)}
:root .item-level{background:#4b3429b8;color:var(--ui-light)}
:root .item-bound{background:#4b3429a6;color:var(--ui-light)}
:root .socket-cell small{background:#4b3429ba;color:var(--ui-light)}
.social-stats{padding:10px}