/* Evermarch shared UI kit.
   One place that defines how framed panels, tab strips, buttons, icon buttons and section headings look,
   so every page reads as one painted-fantasy interface: midnight-blue surfaces, ivory text, thin gold frames with an inner rule.
   No animation is used anywhere in this file.

   How to use it on a new screen (add the class, or add your class to the lists below):
     .uk-card        framed panel (gold line + inner rule); .uk-card-light for small panels
     .uk-tabs        tab strip; put buttons directly inside, mark the current one with aria-selected, aria-pressed, aria-current or .active
     .uk-btn         secondary button (also every plain .secondary button)   .uk-btn-primary gold button   .uk-btn-danger red button
     .uk-icon-btn    44px rounded-square icon button with a gold ring; put IRPUiIcons.svg('name') inside and keep aria-label + title
     .uk-heading     section heading with a small ornament rule
     .uk-disclosure  <details> with a framed summary
   Existing class names are mapped in the lists below so old markup inherits the look without being rewritten. */

:root{
 --uk-gold:#d6b575;--uk-gold-hi:#f0ce83;--uk-gold-dim:#8f7645;--uk-gold-text:#ffe1aa;
 --uk-ivory:#eadbb9;--uk-ivory-dim:#c9c3b4;--uk-focus:#f4cd86;
 --uk-navy-0:#0c1723;--uk-navy-1:#101a2a;--uk-navy-2:#152131;--uk-navy-3:#29374a;
 --uk-radius:4px;--uk-radius-card:6px;--uk-radius-icon:8px;--uk-tap:44px;
 --uk-rule:inset 0 0 0 2px var(--uk-navy-0),inset 0 0 0 3px #b8955a3d;
 --uk-surface:linear-gradient(180deg,var(--uk-navy-3),var(--uk-navy-2));
 --uk-surface-hover:linear-gradient(180deg,#35455b,#1c2c40);
 --uk-surface-lit:linear-gradient(180deg,#77602f,#3a2f22);
 --uk-tab-surface:linear-gradient(180deg,#1e2c41,#111b2c);
}

/* ---- 1. Panels and cards -------------------------------------------------------------------- */
.uk-card,
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.squire-idle-reminder,.world-spawn-banner,.map-invitation,.raid-companion-builds,.raid-boss-guide,.attribute-panel,.gather-log,.gather-materials,.gather-coming,.crown-alpha-notice,.quest-records){
 position:relative;border:1px solid var(--uk-gold-dim);border-radius:var(--uk-radius-card);
 background:var(--uk-card-bg,linear-gradient(150deg,#1c2b40,#101a2b));
 box-shadow:var(--uk-rule),0 6px 16px #0004;color:var(--realm-ink,#e6e3d9);
}
.uk-card-light{border:1px solid #6f5d3c;border-radius:var(--uk-radius-card);background:linear-gradient(150deg,#182438,#0f1928);box-shadow:inset 0 0 0 2px var(--uk-navy-0),inset 0 0 0 3px #b8955a26}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .squire-idle-reminder{--uk-card-bg:linear-gradient(110deg,#253127,#111c2b);border-top:2px solid var(--uk-gold)}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .world-spawn-banner{--uk-card-bg:linear-gradient(105deg,#20364a,#15202e);border-color:#9a8556}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .crown-alpha-notice{border-width:1px;border-left:1px solid var(--uk-gold-dim)}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .quest-records{border-inline:1px solid var(--uk-gold-dim);padding-inline:12px}
.uk-panel{position:relative;background:linear-gradient(135deg,#25313880,transparent 65%),#121e24;border:18px solid transparent;border-image:url('/art/interface/panel-frame-v1.webp') 18% / 18px / 0 stretch}

/* ---- 2. Tab strips (sub-tabs, segmented buttons) ------------------------------------------------ */
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.section-tabs,.region-tabs,.market-tabs,.rank-tabs,.notice-board-tabs,.workshop-service-tabs,.inventory-tabs,.inventory-dialog-tabs,.dev-tabs,.crown-categories,.chat-channels,.tree-toolbar>nav,.uk-tabs):not(.market-category-group):not(.chat-channels){
 gap:6px;background:transparent;border:0;border-bottom:1px solid #b69a6044;box-shadow:none;
}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.section-tabs,.region-tabs,.market-tabs,.rank-tabs,.notice-board-tabs,.workshop-service-tabs,.inventory-tabs,.inventory-dialog-tabs,.dev-tabs,.crown-categories,.chat-channels,.tree-toolbar>nav,.uk-tabs)>:is(button,a),
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .market-category-group>button{
 position:relative;min-height:var(--uk-tap);padding:9px 14px;border:1px solid var(--uk-gold-dim);border-radius:var(--uk-radius);
 background:var(--uk-tab-surface);color:#d9d3c2;font:600 .8125rem/1.3 system-ui;text-decoration:none;
 box-shadow:var(--uk-rule);cursor:pointer;
}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.section-tabs,.region-tabs,.market-tabs,.rank-tabs,.notice-board-tabs,.workshop-service-tabs,.inventory-tabs,.inventory-dialog-tabs,.dev-tabs,.crown-categories,.chat-channels,.tree-toolbar>nav,.uk-tabs)>:is(button,a):hover:not(:disabled),
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .market-category-group>button:hover:not(:disabled){
 border-color:var(--uk-gold);background:linear-gradient(180deg,#2a3b55,#16233a);color:#fff0c8;
}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.section-tabs,.region-tabs,.market-tabs,.rank-tabs,.notice-board-tabs,.workshop-service-tabs,.inventory-tabs,.inventory-dialog-tabs,.dev-tabs,.crown-categories,.chat-channels,.tree-toolbar>nav,.uk-tabs)>:is(button,a):is(.active,.selected,.chosen,[aria-selected="true"],[aria-pressed="true"],[aria-current="page"],[aria-current="true"]),
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .market-category-group>button:is(.active,.selected,[aria-selected="true"],[aria-pressed="true"],[aria-current="page"]){
 border-color:#e0bd73;background:var(--uk-surface-lit);color:#fff1cc;
 box-shadow:inset 0 -3px 0 #e6c889,inset 0 0 0 2px var(--uk-navy-0),inset 0 0 0 3px #e6c88955;
}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.section-tabs,.region-tabs,.market-tabs,.rank-tabs,.notice-board-tabs,.workshop-service-tabs,.inventory-tabs,.inventory-dialog-tabs,.dev-tabs,.crown-categories,.chat-channels,.tree-toolbar>nav,.uk-tabs)>:is(button,a):is(:disabled,[aria-disabled="true"]){
 opacity:.5;cursor:not-allowed;border-color:#5b5040;color:#9c9788;background:var(--uk-tab-surface);filter:none;
}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.section-tabs,.region-tabs,.market-tabs,.rank-tabs,.notice-board-tabs,.workshop-service-tabs,.inventory-tabs,.inventory-dialog-tabs,.dev-tabs,.crown-categories,.chat-channels,.tree-toolbar>nav,.uk-tabs)>:is(button,a):focus-visible,
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .market-category-group>button:focus-visible{outline:3px solid var(--uk-focus);outline-offset:2px;z-index:2}
/* The old tab underline pseudo-elements would double the new gold underline. */
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.region-tabs,.market-tabs,.rank-tabs,.section-tabs)>button::after{content:none}
/* Bag and character-sheet tabs used to run edge to edge with important overrides; keep them as framed tabs. */
.inventory-panel .inventory-tabs,.mmo-shell .inventory-panel .inventory-tabs{margin:0 0 12px;gap:6px;border-bottom:1px solid #b69a6044}
.inventory-tabs>button,.inventory-tabs>button.selected{border:1px solid var(--uk-gold-dim)!important;border-radius:var(--uk-radius)!important;background:var(--uk-tab-surface)!important;color:#d9d3c2!important;box-shadow:var(--uk-rule)!important}
.inventory-tabs>button.selected,.inventory-tabs>button[aria-pressed="true"],.inventory-tabs>button[aria-selected="true"]{border-color:#e0bd73!important;background:var(--uk-surface-lit)!important;color:#fff1cc!important;box-shadow:inset 0 -3px 0 #e6c889,inset 0 0 0 2px var(--uk-navy-0),inset 0 0 0 3px #e6c88955!important}
/* Page-level tab strip lines up with the page padding instead of touching the sidebar frame. */
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .section-tabs{padding:10px clamp(14px,2.5vw,36px)}
/* Category lists (Auction House): left-aligned rows that keep their words whole. */
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .market-category-group>button{display:flex;align-items:center;gap:8px;text-align:left;padding:8px 10px;overflow-wrap:normal;word-break:normal;hyphens:none}
/* Chat channel tabs are a compact row inside the chat header band. */
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .community-chat .chat-channels>button{min-height:44px;padding:6px 10px;white-space:nowrap}
/* Skill-tree focus row keeps each branch colour on its label and sits inside the toolbar without its own rule. */
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .tree-toolbar>nav{border-bottom:0;padding:0}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .tree-toolbar>nav>button:not([aria-pressed="true"]){color:var(--branch-tone,#d9d3c2)}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .tree-zoom>button{min-width:var(--uk-tap);min-height:var(--uk-tap);padding:6px 12px;border:1px solid var(--uk-gold-dim);border-top:2px solid var(--uk-gold);border-radius:var(--uk-radius);background:var(--uk-surface);color:var(--uk-ivory);font:600 .875rem/1 system-ui;box-shadow:var(--uk-rule)}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .tree-zoom>button:hover:not(:disabled){border-color:var(--uk-gold-hi);background:var(--uk-surface-hover);color:#fff0c8}
.uk-tabs,.crown-categories{display:flex;flex-wrap:wrap}
.crown-categories>a,.uk-tabs>a{display:inline-flex;align-items:center;justify-content:center}
.crown-categories{margin:14px 0}
.uk-tabs>:is(button,a){flex:1 1 110px;min-width:0}

/* ---- 3. Buttons: secondary, primary, danger ----------------------------------------------------- */
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.secondary,.uk-btn,.handbook-button){
 min-height:var(--uk-tap);padding:9px 16px;border:1px solid var(--uk-gold-dim);border-top:2px solid var(--uk-gold);border-radius:var(--uk-radius);
 background:var(--uk-surface);color:var(--uk-ivory);font:600 .8125rem/1.3 system-ui;text-decoration:none;
 box-shadow:var(--uk-rule),0 2px 5px #0004;cursor:pointer;
}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.secondary,.uk-btn,.handbook-button):hover:not(:disabled){border-color:var(--uk-gold-hi);background:var(--uk-surface-hover);color:#fff0c8}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.secondary,.uk-btn,.handbook-button):where([aria-pressed="true"],.selected,.active){border-color:#e0bd73;background:var(--uk-surface-lit);color:#fff1cc}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.secondary,.uk-btn,.handbook-button):disabled,:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.secondary,.uk-btn,.handbook-button)[aria-disabled="true"]{border-color:#5b5040;border-top-color:#6d6047;color:#a5a191;cursor:not-allowed;filter:none}
.uk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.red-button,.uk-btn-primary){
 min-height:var(--uk-tap);padding:9px 18px;border:1px solid #e6c98f;border-radius:var(--uk-radius);
 background:linear-gradient(180deg,#c9a468,#8f6f3c);color:#1b1509;font:700 .8125rem/1.3 system-ui;text-decoration:none;
 box-shadow:inset 0 1px 0 #fff2c95c,inset 0 0 0 2px #8a682f66,0 2px 5px #0005;cursor:pointer;
}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.red-button,.uk-btn-primary):hover:not(:disabled){border-color:#fbe3ac;background:linear-gradient(180deg,#d8b674,#9c7a44)}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.red-button,.uk-btn-primary):disabled{border-color:#7a6b4c;color:#3a3427;filter:none}
.uk-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(button.danger,a.danger,.uk-btn-danger){
 border:1px solid #b9705c;border-top:2px solid #d99a83;border-radius:var(--uk-radius);
 background:linear-gradient(180deg,#7d2e2a,#4a1a1c);color:#ffe6d6;
 box-shadow:inset 0 0 0 2px #240d0e,inset 0 0 0 3px #d99a8340,0 2px 5px #0005;
}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(button.danger,a.danger,.uk-btn-danger):hover:not(:disabled){border-color:#f0b7a2;background:linear-gradient(180deg,#943730,#5a2022);color:#fff}
.uk-btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--uk-tap);padding:9px 16px;font:600 .8125rem/1.3 system-ui;cursor:pointer}

/* ---- 4. Icon buttons ---------------------------------------------------------------------------- */
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices,.topbar) :is(.icon-button,.uk-icon-btn,.notice-close){
 display:inline-grid;place-items:center;box-sizing:border-box;min-width:var(--uk-tap);min-height:var(--uk-tap);padding:0;
 border:1px solid #b8985b;border-radius:var(--uk-radius-icon);
 background:radial-gradient(circle at 50% 28%,#24364e,#111b2b 78%);color:var(--uk-gold);
 box-shadow:inset 0 0 0 2px var(--uk-navy-0),inset 0 0 0 3px #b8985b40,0 2px 5px #0005;cursor:pointer;line-height:1;
}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices,.topbar) :is(.icon-button,.uk-icon-btn,.notice-close):hover:not(:disabled){border-color:var(--uk-gold-hi);color:var(--uk-gold-text);background:radial-gradient(circle at 50% 28%,#2f4665,#16233a 78%)}
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices,.topbar) :is(.icon-button,.uk-icon-btn,.notice-close):focus-visible{outline:3px solid var(--uk-focus);outline-offset:2px}
:is(.icon-button,.uk-icon-btn) .uk-icon,.uk-icon{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.notice-close{font:600 1.125rem/1 system-ui}
.uk-icon-btn[aria-pressed="true"]{border-color:#e0bd73;color:#fff1cc;background:radial-gradient(circle at 50% 28%,#77602f,#2e2618 78%)}
/* Sidebar and top bar: the utility icons sit on one row and stay on the sidebar's gold-framed glass. */
.shell .nav-account .account-block>.icon-button{padding:0}
.shell .nav-account .sidebar-character-portrait,.shell .sidebar-character-portrait:has(img){border-radius:var(--uk-radius-icon);border-color:#b8985b}

/* ---- 5. Section headings ---------------------------------------------------------------------- */
.uk-heading,
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.exp-panel,.inventory-panel,.gather-log,.gather-materials,.attribute-panel)>h2:first-child{
 padding-bottom:12px;margin-bottom:14px;
 background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 .5 8.500 4.500 4.500 8.500.5 4.500Z' fill='%23d6b575'/%3E%3C/svg%3E") 0 100%/9px 9px no-repeat,
  linear-gradient(90deg,#b69a60,#b69a6055 55%,transparent) 15px calc(100% - 5px)/calc(100% - 15px) 1px no-repeat;
}

/* ---- 6. Disclosures ---------------------------------------------------------------------------- */
.uk-disclosure>summary,
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.settings-help,.settings-danger,.release-archive,.character-limit-details,.character-attribute-details,.tree-build-management,.storage-materials,.gather-rules,.skill-calculation,.path-rank-preview,.companion-abilities,.raid-company>details,.raid-card-copy>details,.stormgrave-card>details)>summary{
 min-height:var(--uk-tap);padding:10px 14px;border:1px solid #6f5d3c;border-radius:var(--uk-radius);
 background:linear-gradient(180deg,#182438,#0f1928);box-shadow:inset 0 0 0 2px var(--uk-navy-0),inset 0 0 0 3px #b8955a26;cursor:pointer;
}
.uk-disclosure>summary::marker,:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.settings-help,.settings-danger,.release-archive,.character-limit-details,.character-attribute-details,.tree-build-management,.storage-materials,.gather-rules,.skill-calculation,.path-rank-preview,.companion-abilities,.raid-company>details,.raid-card-copy>details,.stormgrave-card>details)>summary::marker{color:var(--uk-gold)}
.uk-disclosure>summary:hover,:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.settings-help,.settings-danger,.release-archive,.character-limit-details,.character-attribute-details,.tree-build-management,.storage-materials,.gather-rules,.skill-calculation,.path-rank-preview,.companion-abilities,.raid-company>details,.raid-card-copy>details,.stormgrave-card>details)>summary:hover{border-color:var(--uk-gold)}

/* ---- 7. Narrow screens --------------------------------------------------------------------------- */
@media(max-width:760px){:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .section-tabs{padding-inline:10px}}
@media(max-width:700px){
 /* Region tabs: two per row on phones, the last one spans the row. */
 :is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .region-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 :is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .region-tabs>button{min-width:0;padding:8px 6px}
 :is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .region-tabs>button:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:480px){
 /* Tab words never break mid-word; tabs wrap onto extra rows instead. */
 :is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.market-tabs,.rank-tabs,.notice-board-tabs,.workshop-service-tabs,.dev-tabs,.crown-categories,.uk-tabs)>:is(button,a){flex:1 1 auto;min-width:min(100%,max-content);padding:8px 10px;white-space:normal;overflow-wrap:normal;word-break:normal;text-align:center}
 :is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .section-tabs>:is(button,a){padding:8px 10px;white-space:normal;overflow-wrap:normal;word-break:normal;text-align:center}
 :is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.secondary,.red-button,.uk-btn,.uk-btn-primary){white-space:normal;max-width:100%}
}

/* Item hover cards must appear above the side menu (500), top bar, action bar, chat and inventory toolbar; below help tips (5000). */
.item-hover,.item-hover.market-hover{z-index:3000}

/* =====================================================================================================
   UI KIT V1 (2026-10-03): header, stat strip, card grid, progress, chips, painted frame, icon art,
   gear slots, event card. Contract and markup examples: docs/UI_KIT_V1_2026-10-03.md.
   Everything below is NEW and prefixed .uk-: it does nothing until a screen uses the class.
   The older kit classes above (.uk-btn, .uk-tabs, .uk-card, .uk-heading) still need an ancestor
   .shell / .modal-backdrop / .handbook (as in the game); the classes below work anywhere.
   ===================================================================================================== */

/* ---- 8. Kit v1 tokens: state colours, painted frame, type ---------------------------------------- */
:root{
 /* State colours. Never use colour alone: every state also has a word (.uk-state). */
 --uk-done:#7fc58a;--uk-done-dim:#3d7a52;--uk-done-bg:linear-gradient(150deg,#173223,#0f1c22);
 --uk-current:var(--uk-gold);--uk-current-bg:linear-gradient(150deg,#2f2c27,#111b2b);
 --uk-locked:#6c7788;--uk-locked-text:#9aa3b0;--uk-locked-bg:linear-gradient(150deg,#141c28,#0e1520);
 --uk-danger:#c9604f;--uk-danger-text:#ffe6d6;
 /* Rarity colours (same as the game item rarities). */
 --uk-rarity-common:#c6ced2;--uk-rarity-superior:#9ae867;--uk-rarity-rare:#76bdff;--uk-rarity-epic:#f2c865;--uk-rarity-heroic:#ff808e;
 /* Art and type. */
 --uk-frame-img:url('/art/interface/panel-frame-v1.webp');
 --uk-art-sheet:url('/art/interface/navigation-v2.webp');
 --uk-serif:Georgia,'Times New Roman',serif;--uk-sans:system-ui,-apple-system,'Segoe UI',sans-serif;
 --uk-gap:10px;--uk-pad:12px;
}

/* ---- 9. Page shell (standalone pages only; the game already has .shell) ------------------------- */
.uk-page{margin:0;min-height:100vh;color:var(--uk-ivory);font:.9375rem/1.5 var(--uk-sans);
 background:radial-gradient(ellipse at 14% 0%,#26395a55,transparent 55%),radial-gradient(ellipse at 100% 60%,#5e3c1b25,transparent 65%),var(--uk-navy-0)}
.uk-page :where(h1,h2,h3,h4){margin:0;font-family:var(--uk-serif);font-weight:500;letter-spacing:.02em;color:var(--uk-gold-text);text-wrap:balance}
.uk-page :focus-visible{outline:3px solid var(--uk-focus);outline-offset:2px}
.uk-wrap{box-sizing:border-box;max-width:1120px;margin:0 auto;padding:14px clamp(10px,3vw,28px) 40px}
.uk-stack{display:grid;gap:14px;min-width:0}
.uk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- 10. Painted frame: does NOT depend on interface-art.js decorate() ---------------------------
   Same technique as .realm-frame-light: a 9-slice of panel-frame-v1.webp drawn on ::after.
   Add .uk-frame to any box; leave the inside padding to the frame. */
.uk-frame{--uk-frame-w:18px;position:relative;box-sizing:border-box;padding:calc(var(--uk-frame-w) + 4px);
 background:linear-gradient(150deg,#1c2b40,#101a2b);box-shadow:0 6px 16px #0004;color:var(--uk-ivory)}
.uk-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 border:var(--uk-frame-w) solid transparent;border-image:var(--uk-frame-img) 18% / var(--uk-frame-w) / 0 stretch}
.uk-frame-sm{--uk-frame-w:12px}
@media(max-width:540px){.uk-frame{--uk-frame-w:14px}.uk-frame-sm{--uk-frame-w:10px}}

/* ---- 11. Painted icons: 16 pictograms from navigation-v2.webp (4 x 4 sheet) -------------------- */
.uk-art{display:inline-block;flex:0 0 auto;width:40px;height:40px;vertical-align:middle;
 background:var(--uk-art-sheet) var(--uk-ax,0%) var(--uk-ay,0%)/400% 400% no-repeat;filter:drop-shadow(0 2px 2px #0009)}
.uk-art-sm{width:24px;height:24px}.uk-art-md{width:32px;height:32px}.uk-art-lg{width:64px;height:64px}
.uk-art-journey{--uk-ax:0%;--uk-ay:0%}.uk-art-raids{--uk-ax:33.3333%;--uk-ay:0%}.uk-art-overview{--uk-ax:66.6667%;--uk-ay:0%}.uk-art-town{--uk-ax:100%;--uk-ay:0%}
.uk-art-party{--uk-ax:0%;--uk-ay:33.3333%}.uk-art-guild{--uk-ax:33.3333%;--uk-ay:33.3333%}.uk-art-gathering{--uk-ax:66.6667%;--uk-ay:33.3333%}.uk-art-auction{--uk-ax:100%;--uk-ay:33.3333%}
.uk-art-shop{--uk-ax:0%;--uk-ay:66.6667%}.uk-art-journal{--uk-ax:33.3333%;--uk-ay:66.6667%}.uk-art-leaderboards{--uk-ax:66.6667%;--uk-ay:66.6667%}.uk-art-guide{--uk-ax:100%;--uk-ay:66.6667%}
.uk-art-combat{--uk-ax:0%;--uk-ay:100%}.uk-art-inventory{--uk-ax:33.3333%;--uk-ay:100%}.uk-art-settings{--uk-ax:66.6667%;--uk-ay:100%}.uk-art-account-chest{--uk-ax:100%;--uk-ay:100%}

/* ---- 12. Screen header: icon + title + one-line help + strip of 2-3 key numbers ------------------ */
.uk-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:center;min-width:0;isolation:isolate;overflow:hidden;background:var(--uk-navy-1)}
/* Optional painted banner: <img class="uk-head-art" src="/art/interface/banner-x-v1.webp" alt=""> as the first child. */
.uk-head>.uk-head-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:right center}
.uk-head::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0c1723f2,#0c1723d6 52%,#0c172366)}
.uk-head-icon{display:grid;place-items:center;width:64px;height:64px}
.uk-head-text{min-width:0}
.uk-head-text h1{font-size:clamp(1.55rem,5.2vw,2.15rem);line-height:1.1}
.uk-head-help{margin:4px 0 0;color:var(--uk-ivory);font-size:.95rem;line-height:1.4;text-shadow:0 1px 3px #000}
.uk-head>.uk-stats{grid-column:1/-1;padding-top:10px;border-top:1px solid #b69a6055}
@media(min-width:900px){
 .uk-head{grid-template-columns:auto minmax(0,1fr) minmax(300px,36%);min-height:112px}
 .uk-head>.uk-stats{grid-column:auto;padding:0 0 0 16px;border-top:0;border-left:1px solid #b69a6055}
}
.uk-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:0;min-width:0}
.uk-stat{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:2px;min-width:0;padding:0 6px;text-align:center}
.uk-stat+.uk-stat{border-left:1px solid #b69a6040}
.uk-stat dd{margin:0;max-width:100%;font:600 clamp(1.15rem,5.4vw,1.55rem)/1.1 var(--uk-serif);color:var(--uk-gold-text);overflow-wrap:anywhere}
.uk-stat dt{max-width:100%;font:600 .72rem/1.25 var(--uk-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--uk-ivory-dim)}
.uk-stat.is-done dd{color:var(--uk-done)}

/* ---- 13. Tabs with icons (use inside .uk-tabs; the look comes from the tab rules above) -------------- */
.uk-tabs>.uk-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.uk-tab .uk-tab-icon{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.uk-tab .uk-art{width:26px;height:26px;margin:-2px 0}
.uk-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--uk-gold);color:var(--uk-navy-0);font:700 .72rem/1 var(--uk-sans)}
@media(max-width:480px){
 .uk-tabs>.uk-tab{flex-direction:column;gap:2px;min-height:56px;padding:6px 4px}
 .uk-tabs>.uk-tab .uk-tab-label{font-size:.8rem}
}

/* ---- 14. Card grid: auto-fill, two columns at 320 px --------------------------------------------- */
.uk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--uk-card-min,136px)),1fr));gap:var(--uk-gap);min-width:0;margin:0;padding:0;list-style:none}
@media(max-width:480px){.uk-grid{gap:8px}}

/* ---- 15. Card parts (.uk-card is the framed card above; these sit inside it) --------------------- */
.uk-grid>.uk-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 0;container-type:inline-size}
@media(min-width:600px){.uk-grid{--uk-card-min:200px}}
.uk-card>:is(.uk-card-head,.uk-card-value,.uk-progress,.uk-chips,.uk-card-foot,.uk-card-note){margin-inline:var(--uk-pad)}
.uk-card-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
@container (min-width:200px){.uk-card-head{flex-direction:row;align-items:center;gap:10px}}
.uk-card-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #b8985b66;border-radius:var(--uk-radius-icon);background:radial-gradient(circle at 50% 30%,#24364e,#0f1826 80%)}
.uk-card-icon .uk-art{width:34px;height:34px}
.uk-card-title{margin:0;min-width:0;font:600 1rem/1.25 var(--uk-serif);letter-spacing:.01em;color:var(--uk-ivory);overflow-wrap:break-word;text-wrap:balance}
.uk-card-value{display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:wrap;margin-block:0}
.uk-card-number{font:600 1.35rem/1.1 var(--uk-serif);color:var(--uk-gold-text);overflow-wrap:anywhere}
.uk-card-number small{font:500 .85rem var(--uk-sans);color:var(--uk-ivory-dim)}
.uk-card-note{margin-block:0;font-size:.82rem;line-height:1.35;color:var(--uk-ivory-dim)}
.uk-card-foot{margin-top:auto;display:grid;gap:6px}
.uk-state{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border:1px solid currentColor;border-radius:10px;font:700 .72rem/1.5 var(--uk-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--uk-gold-text);white-space:nowrap}

/* State by colour: green = done, gold = current, dim = locked. */
.uk-card.is-current{border-color:var(--uk-gold-hi);background:var(--uk-current-bg);box-shadow:var(--uk-rule),0 0 0 1px #f0ce8340,0 0 18px #d6b57530,0 6px 16px #0004}
.uk-card.is-done{border-color:var(--uk-done-dim);background:var(--uk-done-bg);box-shadow:var(--uk-rule),0 0 0 1px #7fc58a33,0 6px 16px #0004}
.uk-card.is-done .uk-card-number{color:var(--uk-done)}
.uk-card.is-done .uk-card-icon{border-color:var(--uk-done-dim)}
.uk-card.is-done .uk-state{color:var(--uk-done)}
.uk-card.is-locked{border-color:var(--uk-locked);background:var(--uk-locked-bg);box-shadow:var(--uk-rule)}
.uk-card.is-locked .uk-card-title,.uk-card.is-locked .uk-card-number,.uk-card.is-locked .uk-card-number small{color:var(--uk-locked-text)}
.uk-card.is-locked .uk-card-icon{border-color:var(--uk-locked)}
.uk-card.is-locked .uk-card-icon .uk-art{filter:grayscale(1) brightness(.6)}
.uk-card.is-locked .uk-state{color:var(--uk-locked-text)}
.uk-card.is-locked .uk-chip{border-color:var(--uk-locked);color:var(--uk-locked-text)}

/* ---- 16. Progress bar ------------------------------------------------------------------------------ */
.uk-progress{position:relative;height:12px;box-sizing:border-box;border:1px solid var(--uk-gold-dim);border-radius:var(--uk-radius);background:var(--uk-navy-0);box-shadow:inset 0 1px 3px #000a;overflow:hidden}
.uk-progress>span{display:block;height:100%;min-width:0;border-radius:2px;background:linear-gradient(180deg,var(--uk-gold-hi),var(--uk-gold-dim));box-shadow:inset 0 1px 0 #fff4}
.uk-progress.is-done>span,.uk-card.is-done .uk-progress>span{background:linear-gradient(180deg,var(--uk-done),var(--uk-done-dim))}
.uk-card.is-done .uk-progress{border-color:var(--uk-done-dim)}
.uk-progress.is-locked,.uk-card.is-locked .uk-progress{border-color:var(--uk-locked)}
.uk-progress.is-locked>span,.uk-card.is-locked .uk-progress>span{background:var(--uk-locked)}
.uk-progress-lg{height:16px}

/* ---- 17. Reward chips ------------------------------------------------------------------------------ */
.uk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-block:0;padding:0;list-style:none}
.uk-chip{display:inline-flex;align-items:center;gap:5px;min-height:26px;box-sizing:border-box;max-width:100%;padding:2px 9px 2px 4px;border:1px solid #b69a6066;border-radius:13px;background:var(--uk-navy-0);color:var(--uk-gold-text);font:600 .75rem/1.2 var(--uk-sans)}
.uk-chip .uk-art{width:18px;height:18px}
.uk-chip-plain{padding-left:10px}
.uk-chip-done{border-color:var(--uk-done-dim);color:var(--uk-done)}

/* ---- 18. Button layout helpers (the look comes from .uk-btn / .uk-btn-primary / .uk-btn-danger) ------- */
.uk-btn-block{display:flex;width:100%;box-sizing:border-box}
.uk-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.uk-actions>*{flex:1 1 140px}

/* ---- 19. Event card: strong colour, art, a short bullet list, two clear buttons ------------------------ */
.uk-event{--uk-accent:#c8732f;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;overflow:hidden;
 background:linear-gradient(115deg,color-mix(in srgb,var(--uk-accent) 46%,#0c1723),#0c1723 72%)}
.uk-event-art{display:none;width:100%;height:100%;min-height:150px;object-fit:cover;object-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.uk-event-body{display:grid;gap:10px;min-width:0}
.uk-event-eyebrow{margin:0;font:700 .72rem/1.3 var(--uk-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--uk-gold-text)}
.uk-event :is(h2,h3){font-size:1.4rem;line-height:1.15}
.uk-bullets{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.uk-bullets>li{position:relative;padding-left:20px;line-height:1.4}
.uk-bullets>li::before{content:"";position:absolute;left:3px;top:.5em;width:8px;height:8px;background:var(--uk-gold);transform:rotate(45deg)}
@media(min-width:700px){
 .uk-event{grid-template-columns:minmax(0,1fr) minmax(160px,30%);align-items:center}
 .uk-event-art{display:block;align-self:stretch}
}

/* ---- 20. Character doll: big art in the middle, gear slots around it ---------------------------------- */
.uk-doll{--uk-slot:68px;display:grid;grid-template-columns:var(--uk-slot) minmax(0,1fr) var(--uk-slot);gap:10px;align-items:stretch;min-width:0}
.uk-doll-col{display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.uk-doll-art{position:relative;display:grid;align-items:end;justify-items:center;min-width:0;min-height:340px;overflow:hidden;border-radius:var(--uk-radius-card);
 isolation:isolate;background:var(--uk-navy-0)}
/* Optional backdrop: <img class="uk-doll-bg" src="/art/interface/guildhall-v1.webp" alt=""> as the first child. */
.uk-doll-art>.uk-doll-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% center;opacity:.55}
.uk-doll-art::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 92%,#d6b57555,transparent 58%),linear-gradient(180deg,#0c172380,#0c1723e0)}
.uk-doll-art>.uk-doll-hero{display:block;width:auto;max-width:100%;height:100%;max-height:420px;object-fit:contain;transform:scale(1.16);transform-origin:50% 100%;filter:drop-shadow(0 8px 10px #000a)}
.uk-doll-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.uk-doll-name{grid-column:1/-1;display:grid;gap:6px;text-align:center}
.uk-doll-name h2{font-size:1.5rem}
.uk-doll-name p{margin:0;color:var(--uk-ivory-dim);font-size:.9rem}
.uk-slot{--uk-rarity:var(--uk-rarity-common);position:relative;display:grid;place-items:center;box-sizing:border-box;width:var(--uk-slot);height:var(--uk-slot);min-width:var(--uk-tap);min-height:var(--uk-tap);padding:0;
 border:1px solid var(--uk-rarity);border-radius:var(--uk-radius-icon);background:var(--uk-navy-0);box-shadow:0 0 0 1px var(--uk-navy-0),0 2px 6px #0007;color:var(--uk-ivory);cursor:pointer;overflow:hidden}
.uk-slot:hover{box-shadow:0 0 0 1px var(--uk-navy-0),0 0 10px var(--uk-rarity)}
/* Item icon: a cell of a painted atlas. Pick the atlas class; set --uk-sw/--uk-sh (atlas size in %) and --uk-sx/--uk-sy (cell position in %). */
.uk-slot-icon{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:var(--uk-sw,100%) var(--uk-sh,100%);background-position:var(--uk-sx,0%) var(--uk-sy,0%)}
.uk-atlas-armor{background-image:url('/assets/items-v2/armor.webp')}.uk-atlas-accessories{background-image:url('/assets/items-v2/accessories.webp')}
.uk-atlas-weapons{background-image:url('/assets/items-v2/weapons.webp')}.uk-atlas-class-weapons{background-image:url('/assets/items-v2/class-weapons.webp')}.uk-atlas-light-armor{background-image:url('/assets/items-v2/light-armor.webp')}
.uk-slot.is-empty{border:1px dashed var(--uk-locked);background:var(--uk-locked-bg);box-shadow:none;color:var(--uk-locked-text)}
.uk-slot.is-empty svg{width:70%;height:70%}
.uk-slot-label{position:absolute;inset:auto 0 0;padding:1px 2px;background:#0c1723d9;font:600 .7rem/1.2 var(--uk-sans);text-align:center;color:var(--uk-ivory);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uk-r-common{--uk-rarity:var(--uk-rarity-common)}.uk-r-superior{--uk-rarity:var(--uk-rarity-superior)}.uk-r-rare{--uk-rarity:var(--uk-rarity-rare)}.uk-r-epic{--uk-rarity:var(--uk-rarity-epic)}.uk-r-heroic{--uk-rarity:var(--uk-rarity-heroic)}
@media(max-width:480px){.uk-doll{--uk-slot:52px;gap:6px}.uk-doll-art{min-height:300px}.uk-slot-label{display:none}}

/* ---- 21. One stats panel: label left, number right, grouped under small headings ----------------------- */
.uk-rows{display:grid;gap:0;margin:0}
.uk-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:32px;padding:4px 2px;border-bottom:1px solid #b69a6030}
.uk-rows>div:last-child{border-bottom:0}
.uk-rows dt{margin:0;color:var(--uk-ivory)}
.uk-rows dd{margin:0;font:600 1.05rem/1.2 var(--uk-serif);color:var(--uk-gold-text);text-align:right}
.uk-rows-group{margin:14px 0 4px;font:700 .72rem/1.3 var(--uk-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--uk-ivory-dim)}
.uk-rows-group:first-child{margin-top:0}
.uk-attrs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0}
.uk-attrs>div{display:flex;flex-direction:column-reverse;align-items:center;gap:1px;padding:6px 2px;border:1px solid #b69a6055;border-radius:var(--uk-radius);background:var(--uk-navy-0)}
.uk-attrs dd{margin:0;font:600 1.15rem/1.1 var(--uk-serif);color:var(--uk-gold-text)}
.uk-attrs dt{font:700 .72rem/1.2 var(--uk-sans);letter-spacing:.08em;color:var(--uk-ivory-dim)}
.uk-attrs>.is-primary{border-color:var(--uk-gold)}

/* ---- 22. Layout helpers: two-column screen body, labelled meter ------------------------------------------- */
.uk-split{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start;min-width:0}
@media(min-width:900px){.uk-split{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.uk-meter{display:grid;gap:5px}
.uk-meter-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--uk-ivory-dim)}
.uk-meter-line b{font:600 .95rem var(--uk-serif);color:var(--uk-gold-text)}

/* ---- 23. Painted icon sheets v1 (UI icons pass): quests, rewards, stats, empty slots, actions ----------
   Five 4 x 4 sheets in /art/ui/ (256 px cells, transparent). Use them with ANY of:
     <span class="uk-art uk-ico-day">      same sizes and the same tab/chip/card sizing as the navigation icons (.uk-art-sm|md|lg)
     <span class="uk-ico uk-ico-day">      standalone: 40 px, .uk-ico-sm 24, .uk-ico-md 32, .uk-ico-lg 64
   An icon class only sets three custom properties (sheet, column, row); it never sets a size. Decorative: aria-hidden="true". */
:root{
 --uk-sheet-quests:url('/art/ui/icons-quests-v1.webp');--uk-sheet-rewards:url('/art/ui/icons-rewards-v1.webp');--uk-sheet-stats:url('/art/ui/icons-stats-v1.webp');
 --uk-sheet-slots:url('/art/ui/icons-slots-v1.webp');--uk-sheet-actions:url('/art/ui/icons-actions-v1.webp');
}
.uk-ico{display:inline-block;flex:0 0 auto;width:40px;height:40px;vertical-align:middle;
 background:var(--uk-art-sheet) var(--uk-ax,0%) var(--uk-ay,0%)/400% 400% no-repeat;filter:drop-shadow(0 2px 2px #0009)}
.uk-ico-sm{width:24px;height:24px}.uk-ico-md{width:32px;height:32px}.uk-ico-lg{width:64px;height:64px}
.uk-tab .uk-ico{width:26px;height:26px;margin:-2px 0}
.uk-card-icon .uk-ico{width:34px;height:34px}
.uk-chip .uk-ico{width:18px;height:18px}
.uk-card.is-locked .uk-card-icon .uk-ico{filter:grayscale(1) brightness(.6)}
.uk-head-icon .uk-ico{width:64px;height:64px}
/* quests sheet, row by row */
.uk-ico-day{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:0%;--uk-ay:0%}.uk-ico-week{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:33.3333%;--uk-ay:0%}.uk-ico-month{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:66.6667%;--uk-ay:0%}.uk-ico-monsters{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:100%;--uk-ay:0%}
.uk-ico-boss{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:0%;--uk-ay:33.3333%}.uk-ico-boss-hunt{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:33.3333%;--uk-ay:33.3333%}.uk-ico-raid-boss{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:66.6667%;--uk-ay:33.3333%}.uk-ico-gather-trip{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:100%;--uk-ay:33.3333%}
.uk-ico-craft-order{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:0%;--uk-ay:66.6667%}.uk-ico-workshop{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:33.3333%;--uk-ay:66.6667%}.uk-ico-salvage{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:66.6667%;--uk-ay:66.6667%}.uk-ico-market-sale{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:100%;--uk-ay:66.6667%}
.uk-ico-quest-tree{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:0%;--uk-ay:100%}.uk-ico-enchant{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:33.3333%;--uk-ay:100%}.uk-ico-alchemy{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:66.6667%;--uk-ay:100%}.uk-ico-tavern{--uk-art-sheet:var(--uk-sheet-quests);--uk-ax:100%;--uk-ay:100%}
/* rewards sheet, row by row */
.uk-ico-gold{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:0%;--uk-ay:0%}.uk-ico-xp{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:33.3333%;--uk-ay:0%}.uk-ico-guild-coin{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:66.6667%;--uk-ay:0%}.uk-ico-material{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:100%;--uk-ay:0%}
.uk-ico-quest-point{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:0%;--uk-ay:33.3333%}.uk-ico-key{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:33.3333%;--uk-ay:33.3333%}.uk-ico-rune{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:66.6667%;--uk-ay:33.3333%}.uk-ico-charm{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:100%;--uk-ay:33.3333%}
.uk-ico-check{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:0%;--uk-ay:66.6667%}.uk-ico-lock{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:33.3333%;--uk-ay:66.6667%}.uk-ico-gem{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:66.6667%;--uk-ay:66.6667%}.uk-ico-chest{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:100%;--uk-ay:66.6667%}
.uk-ico-hourglass{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:0%;--uk-ay:100%}.uk-ico-star{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:33.3333%;--uk-ay:100%}.uk-ico-heart{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:66.6667%;--uk-ay:100%}.uk-ico-shield{--uk-art-sheet:var(--uk-sheet-rewards);--uk-ax:100%;--uk-ay:100%}
/* stats sheet, row by row */
.uk-ico-attack{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:0%;--uk-ay:0%}.uk-ico-health{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:33.3333%;--uk-ay:0%}.uk-ico-defense{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:66.6667%;--uk-ay:0%}.uk-ico-critical{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:100%;--uk-ay:0%}
.uk-ico-speed{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:0%;--uk-ay:33.3333%}.uk-ico-dodge{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:33.3333%;--uk-ay:33.3333%}.uk-ico-recovery{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:66.6667%;--uk-ay:33.3333%}.uk-ico-resource{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:100%;--uk-ay:33.3333%}
.uk-ico-strength{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:0%;--uk-ay:66.6667%}.uk-ico-intelligence{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:33.3333%;--uk-ay:66.6667%}.uk-ico-dexterity{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:66.6667%;--uk-ay:66.6667%}.uk-ico-vitality{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:100%;--uk-ay:66.6667%}
.uk-ico-endurance{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:0%;--uk-ay:100%}.uk-ico-luck{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:33.3333%;--uk-ay:100%}.uk-ico-magic-power{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:66.6667%;--uk-ay:100%}.uk-ico-danger{--uk-art-sheet:var(--uk-sheet-stats);--uk-ax:100%;--uk-ay:100%}
/* slots sheet, row by row */
.uk-ico-slot-helmet{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:0%;--uk-ay:0%}.uk-ico-slot-body{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:33.3333%;--uk-ay:0%}.uk-ico-slot-gloves{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:66.6667%;--uk-ay:0%}.uk-ico-slot-pants{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:100%;--uk-ay:0%}
.uk-ico-slot-boots{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:0%;--uk-ay:33.3333%}.uk-ico-slot-amulet{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:33.3333%;--uk-ay:33.3333%}.uk-ico-slot-ring{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:66.6667%;--uk-ay:33.3333%}.uk-ico-slot-weapon{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:100%;--uk-ay:33.3333%}
.uk-ico-slot-shield{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:0%;--uk-ay:66.6667%}.uk-ico-slot-charm{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:33.3333%;--uk-ay:66.6667%}.uk-ico-slot-rune{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:66.6667%;--uk-ay:66.6667%}.uk-ico-slot-shoulders{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:100%;--uk-ay:66.6667%}
.uk-ico-slot-belt{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:0%;--uk-ay:100%}.uk-ico-slot-cloak{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:33.3333%;--uk-ay:100%}.uk-ico-slot-bag{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:66.6667%;--uk-ay:100%}.uk-ico-slot-bracers{--uk-art-sheet:var(--uk-sheet-slots);--uk-ax:100%;--uk-ay:100%}
/* actions sheet, row by row */
.uk-ico-help{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:0%;--uk-ay:0%}.uk-ico-guide-book{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:33.3333%;--uk-ay:0%}.uk-ico-back{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:66.6667%;--uk-ay:0%}.uk-ico-close{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:100%;--uk-ay:0%}
.uk-ico-info{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:0%;--uk-ay:33.3333%}.uk-ico-claim{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:33.3333%;--uk-ay:33.3333%}.uk-ico-act-lock{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:66.6667%;--uk-ay:33.3333%}.uk-ico-upgrade{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:100%;--uk-ay:33.3333%}
.uk-ico-trade{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:0%;--uk-ay:66.6667%}.uk-ico-filter{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:33.3333%;--uk-ay:66.6667%}.uk-ico-search{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:66.6667%;--uk-ay:66.6667%}.uk-ico-refresh{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:100%;--uk-ay:66.6667%}
.uk-ico-add{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:0%;--uk-ay:100%}.uk-ico-edit{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:33.3333%;--uk-ay:100%}.uk-ico-notify{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:66.6667%;--uk-ay:100%}.uk-ico-favourite{--uk-art-sheet:var(--uk-sheet-actions);--uk-ax:100%;--uk-ay:100%}

/* Empty gear slot: a dim silhouette of what goes there (replaces the inline dashed SVG). Put it inside .uk-slot.is-empty. */
.uk-slot-ghost{display:block;width:78%;height:78%;opacity:.5;pointer-events:none;
 background:var(--uk-art-sheet) var(--uk-ax,0%) var(--uk-ay,0%)/400% 400% no-repeat}
.uk-slot.is-empty:hover .uk-slot-ghost,.uk-slot.is-empty:focus-visible .uk-slot-ghost{opacity:.8}

/* Stat rows and attribute tiles with an icon. Row: <dt class="has-ico"><span class="uk-art uk-art-sm uk-ico-attack"></span>Attack power</dt>.
   Tile: add the icon as the LAST child of the tile div (the tile is column-reverse, so it shows on top). */
.uk-rows dt.has-ico{display:inline-flex;align-items:center;gap:8px}
.uk-rows>div:has(>dt.has-ico){align-items:center}
.uk-rows dt.has-ico>.uk-art,.uk-rows dt.has-ico>.uk-ico{width:30px;height:30px}
.uk-rows-group.has-ico{display:flex;align-items:center;gap:8px}
.uk-attrs>div>.uk-art,.uk-attrs>div>.uk-ico{width:34px;height:34px;margin-bottom:2px}

/* ---- 24. Guide link .uk-help: a small gold "?" medallion that opens the Guide at one topic ------------------
   <a class="uk-help" href="/guide.html#daily-quests" data-guide-topic="daily-quests" aria-label="Open the Guide: Daily, weekly and monthly quests"></a>
   The medallion is 26 px; the link box is 44 x 44 (negative margin keeps the layout footprint at 26 px), so keep 8 px of gap around it.
   Always visible, never hover-only. In the game, app.js binds [data-guide-topic] and opens the topic inside the game; without that script
   the href opens /guide.html on that topic. Use it next to a screen header or a card title when a mechanic needs explaining, NOT on every card. */
.uk-help{position:relative;display:inline-block;flex:0 0 auto;box-sizing:border-box;width:var(--uk-tap);height:var(--uk-tap);margin:-9px;vertical-align:middle;
 border-radius:50%;text-decoration:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.uk-help::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
 background:var(--uk-sheet-actions) 0% 0%/400% 400% no-repeat;filter:drop-shadow(0 1px 2px #000a)}
.uk-help:hover::before{filter:drop-shadow(0 1px 2px #000a) brightness(1.25) saturate(1.1)}
.uk-help:focus-visible{outline:0}
.uk-help:focus-visible::before{outline:3px solid var(--uk-focus);outline-offset:2px}
.uk-help-lg::before{width:32px;height:32px;margin:-16px 0 0 -16px}

/* Small helpers for the icon pass: a state mark inside .uk-state, and a title row that carries a .uk-help link. */
.uk-state .uk-art,.uk-state .uk-ico{width:16px;height:16px;margin:-2px 0;filter:none}
.uk-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.uk-title-row>:is(h1,h2,h3){min-width:0}
.uk-stat>.uk-art,.uk-stat>.uk-ico{width:26px;height:26px;margin-bottom:2px}

/* Phone: the "Ranking rules" and "Storage guide" help links were 15 and 25 px tall; give them the 44 px touch size. */
@media(max-width:760px){
 .rankings-page footer a[data-guide-topic],.account-storage>header a[data-guide-topic]{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- 25. Kit additions 2 (2026-10-04): list row, rank badge, price block, form controls, pinned row, slot badges, wrapping state ----
   Written for the Leaderboards and Auction House samples. Additions only: nothing above this line was edited, so every older component computes the same styles.
   Same gating as sections 8 to 24: these are NEW .uk- classes that do nothing until a screen puts them in its markup (a screen only does that behind its IRP_UI_<SCREEN>_VERSION switch).
   Every selector piece below starts with a .uk- class (an element name may come first), no :is() / :where() lists. No animation, no transition. Contract and markup: docs/UI_KIT_V1_2026-10-03.md section 10.

   .uk-rank                    round rank number; .is-top (or an .is-top row) gives ranks 1 to 3 the gold look
   .uk-row-list > .uk-row      one list row: .uk-row-main (flex line) holds .uk-rank, .uk-row-media, .uk-row-body (.uk-row-title, .uk-row-sub, .uk-row-extra), .uk-row-end (.uk-row-num + .uk-row-unit), .uk-row-caret
                               .uk-row-main may be a <summary> (tap-open row with .uk-row-drawer) or a plain <div>; .uk-row-foot is a price + button line under it
                               modifiers: .is-top  .is-you  .is-pinned  .is-current  .is-done  .is-locked  .has-edge (rarity colour on the left edge, with .uk-r-<rarity>)
   .uk-row-gap                 dotted break between the top of a list and your own pinned row
   .uk-price                   coin + serif number + small note; .is-big  .is-short
   .uk-field .uk-label .uk-hint   label above a control, helper line below it (.is-error)
   .uk-select  .uk-input       44 px controls, 16 px text (phones do not zoom in); .uk-input.is-big for a price; .uk-input-wrap puts a coin icon inside the field
   .uk-stepper                 minus, number, plus (44 px each)
   .uk-seg                     equal-width joined buttons with aria-pressed or aria-checked, optional small second line
   .uk-slot-badge              corner badge on a .uk-slot: count (bottom right), .is-tl lock or hourglass icon, .is-bl, .is-tr
   .uk-slot.is-selected        gold ring plus a tick in the top right corner (shape, not colour alone)
   .uk-state.is-wrap           state tag that may wrap and never spills out of a narrow card */

/* 25.1 Rank badge */
.uk-rank{display:inline-grid;place-items:center;flex:0 0 auto;box-sizing:border-box;min-width:34px;height:34px;padding:0 4px;border:1px solid var(--uk-gold-dim);border-radius:17px;background:var(--uk-navy-0);font:600 .95rem/1 var(--uk-serif);color:var(--uk-ivory);font-variant-numeric:tabular-nums}
.uk-rank.is-top,.uk-row.is-top .uk-rank{border-color:var(--uk-gold-hi);background:var(--uk-surface-lit);color:var(--uk-gold-text);font-size:1.05rem}
@media(max-width:480px){.uk-rank{min-width:30px;height:30px;border-radius:15px;font-size:.85rem}.uk-rank.is-top,.uk-row.is-top .uk-rank{font-size:.95rem}}

/* 25.2 List row. Container, states, the line inside it, the parts, the tap-open drawer, the price line. */
.uk-row-list{display:grid;gap:8px;min-width:0;margin:0;padding:0;list-style:none}
.uk-row{--uk-rarity:var(--uk-rarity-common);position:relative;box-sizing:border-box;min-width:0;margin:0;padding:0;border:1px solid var(--uk-gold-dim);border-radius:var(--uk-radius-card);
 background:var(--uk-card-bg,linear-gradient(150deg,#1c2b40,#101a2b));box-shadow:var(--uk-rule),0 4px 10px #0003;color:var(--uk-ivory);list-style:none}
.uk-row.is-current,.uk-row.is-you{border-color:var(--uk-gold-hi);background:var(--uk-current-bg);box-shadow:var(--uk-rule),0 0 0 1px #f0ce8340,0 0 18px #d6b57530,0 4px 10px #0003}
.uk-row.is-done{border-color:var(--uk-done-dim);background:var(--uk-done-bg);box-shadow:var(--uk-rule),0 0 0 1px #7fc58a33,0 4px 10px #0003}
.uk-row.is-done .uk-row-num{color:var(--uk-done)}
.uk-row.is-locked{border-color:var(--uk-locked);background:var(--uk-locked-bg);box-shadow:var(--uk-rule)}
.uk-row.is-locked .uk-row-title,.uk-row.is-locked .uk-row-num,.uk-row.is-locked .uk-price-num{color:var(--uk-locked-text)}
.uk-row.is-locked .uk-row-media{border-color:var(--uk-locked);filter:grayscale(1) brightness(.7)}
.uk-row.has-edge{border-left:4px solid var(--uk-rarity)}
/* Your own row when you are below the first page: the list ends with .uk-row-gap and this row. It stays at the bottom of the screen while the list is in view. */
.uk-row.is-pinned{position:sticky;bottom:calc(8px + max(var(--mobile-nav-height,0px),env(safe-area-inset-bottom,0px)));z-index:3;box-shadow:var(--uk-rule),0 0 0 1px #f0ce8340,0 -6px 16px #000b}
.uk-row-gap{margin:0;padding:0;line-height:1;text-align:center;list-style:none;color:var(--uk-gold-dim)}
.uk-row-gap::before{content:"\00b7\00a0\00b7\00a0\00b7";font-size:1.5rem;letter-spacing:.4em}

.uk-row-main{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-width:0;min-height:64px;margin:0;padding:9px 12px;list-style:none;color:inherit;text-decoration:none}
.uk-row.is-top .uk-row-main{min-height:76px}
summary.uk-row-main{cursor:pointer}
summary.uk-row-main::-webkit-details-marker{display:none}
summary.uk-row-main:focus-visible{outline:3px solid var(--uk-focus);outline-offset:-3px}
.uk-row-body{display:grid;flex:1 1 0;gap:3px;min-width:0}
.uk-row .uk-row-title{margin:0;font:600 1rem/1.2 var(--uk-serif);letter-spacing:0;color:var(--uk-ivory);overflow-wrap:anywhere}
.uk-row-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;font:600 .8rem/1.3 var(--uk-sans);color:var(--uk-ivory-dim)}
.uk-row-extra{display:flex;align-items:center;gap:8px;min-width:0;margin:0;font:600 .78rem/1.3 var(--uk-sans);color:var(--uk-ivory-dim)}
.uk-row-extra .uk-progress{flex:1 1 auto;height:8px;min-width:40px}
.uk-row-end{display:grid;flex:0 0 auto;justify-items:end;max-width:45%;margin:0;text-align:right}
.uk-row-num{font:600 1.5rem/1.05 var(--uk-serif);color:var(--uk-gold-text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.uk-row-unit{font:700 .72rem/1.2 var(--uk-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--uk-ivory-dim)}
.uk-row-media{display:grid;place-items:center;flex:0 0 auto;box-sizing:border-box;width:44px;height:44px;border:1px solid #b8985b66;border-radius:var(--uk-radius-icon);
 background:radial-gradient(circle at 50% 30%,#24364e,#0f1826 80%);overflow:hidden;color:var(--uk-gold-text);font:600 1.2rem/1 var(--uk-serif)}
.uk-row-media>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.uk-row-media.is-lg{width:64px;height:64px}
.uk-row-media.is-round{border-radius:50%}
.uk-row-media.is-rarity{border:2px solid var(--uk-rarity)}
.uk-row-caret{flex:0 0 auto;width:0;height:0;border:5px solid transparent;border-top:6px solid var(--uk-gold);border-bottom:0}
.uk-row details[open]>.uk-row-main .uk-row-caret{border-top:0;border-bottom:6px solid var(--uk-gold);border-width:0 5px 6px}
.uk-row-drawer{display:grid;gap:10px;min-width:0;padding:2px 12px 12px;border-top:1px solid #b69a6030}
.uk-row-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;min-width:0;padding:0 12px 10px}
.uk-row-foot>.uk-btn,.uk-row-foot>.uk-btn-primary{flex:1 1 140px;max-width:100%}
@media(min-width:560px){.uk-row-foot>.uk-btn,.uk-row-foot>.uk-btn-primary{flex:0 0 auto;min-width:140px}}
@media(max-width:480px){
 .uk-row-main{gap:8px;padding:9px 10px}
 .uk-row-media{width:40px;height:40px}.uk-row-media.is-lg{width:56px;height:56px}
 .uk-row-num{font-size:1.35rem}
 .uk-row-foot{padding:0 10px 10px}
}

/* 25.3 Price block: coin icon and serif number on one line, a small note under it (each price, "Need 120 more gold", time left). */
.uk-price{display:grid;gap:0;min-width:0;margin:0}
.uk-price-num{display:inline-flex;align-items:center;gap:6px;font:600 1.3rem/1.1 var(--uk-serif);color:var(--uk-gold-text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.uk-price-num .uk-ico,.uk-price-num .uk-art{width:24px;height:24px}
.uk-price-note{font:500 .8rem/1.3 var(--uk-sans);color:var(--uk-ivory-dim)}
.uk-price.is-big .uk-price-num{font-size:1.7rem}
.uk-price.is-big .uk-price-num .uk-ico,.uk-price.is-big .uk-price-num .uk-art{width:32px;height:32px}
.uk-price.is-short .uk-price-num{color:var(--uk-locked-text)}
.uk-price.is-short .uk-price-note{color:var(--uk-danger-text)}

/* 25.4 Form controls. The doubled class and the element name lift these over the older ".shell input" and ".wayfarer-shell input" rules (the kit is the last stylesheet). 16 px text: phones do not zoom in on focus. */
.uk-field{display:grid;align-content:start;gap:4px;min-width:0;margin:0}
.uk-label{display:block;margin:0;font:700 .72rem/1.3 var(--uk-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--uk-ivory-dim)}
.uk-hint{margin:0;font:500 .82rem/1.35 var(--uk-sans);color:var(--uk-ivory-dim)}
.uk-hint.is-error{color:var(--uk-danger-text)}
input.uk-input.uk-input,textarea.uk-input.uk-input,select.uk-select.uk-select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:var(--uk-tap);margin:0;padding:0 12px;
 border:1px solid var(--uk-gold-dim);border-radius:var(--uk-radius);background:var(--uk-navy-0);color:var(--uk-ivory);font:600 1rem/1.3 var(--uk-sans);box-shadow:inset 0 1px 3px #000a;color-scheme:dark}
textarea.uk-input.uk-input{min-height:88px;padding:10px 12px;line-height:1.4;resize:vertical}
select.uk-select.uk-select{padding-right:40px;-webkit-appearance:none;appearance:none;cursor:pointer;
 background-image:linear-gradient(45deg,transparent 50%,var(--uk-gold) 50%),linear-gradient(135deg,var(--uk-gold) 50%,transparent 50%),var(--uk-tab-surface);
 background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%,0 0;background-size:6px 6px,6px 6px,100% 100%;background-repeat:no-repeat}
select.uk-select option{background:var(--uk-navy-1);color:var(--uk-ivory)}
input.uk-input.uk-input::placeholder,textarea.uk-input.uk-input::placeholder{color:var(--uk-locked-text);opacity:1}
input.uk-input.uk-input:hover:not(:disabled),textarea.uk-input.uk-input:hover:not(:disabled),select.uk-select.uk-select:hover:not(:disabled){border-color:var(--uk-gold)}
input.uk-input.uk-input:focus-visible,textarea.uk-input.uk-input:focus-visible,select.uk-select.uk-select:focus-visible{outline:3px solid var(--uk-focus);outline-offset:2px;border-color:var(--uk-gold-hi)}
input.uk-input.uk-input:disabled,textarea.uk-input.uk-input:disabled,select.uk-select.uk-select:disabled{border-color:#5b5040;opacity:.55;cursor:not-allowed}
input.uk-input.uk-input[aria-invalid="true"],textarea.uk-input.uk-input[aria-invalid="true"],select.uk-select.uk-select[aria-invalid="true"],input.uk-input.uk-input.is-invalid,select.uk-select.uk-select.is-invalid{border-color:var(--uk-danger)}
input.uk-input.uk-input.is-big{min-height:56px;font:600 1.5rem/1.2 var(--uk-serif);color:var(--uk-gold-text);font-variant-numeric:tabular-nums}
.uk-input-wrap{position:relative;min-width:0}
.uk-input-wrap>.uk-ico,.uk-input-wrap>.uk-art{position:absolute;left:10px;top:50%;width:30px;height:30px;margin-top:-15px;pointer-events:none}
.uk-input-wrap>input.uk-input.uk-input{padding-left:46px}

/* Stepper: minus, number, plus. Buttons are 44 px; the number is a real input (inputmode numeric) so it can be typed. */
.uk-stepper{display:grid;grid-template-columns:var(--uk-tap) minmax(0,1fr) var(--uk-tap);gap:6px;align-items:stretch;min-width:0}
.uk-stepper>.uk-stepper-btn{display:grid;place-items:center;box-sizing:border-box;min-width:var(--uk-tap);min-height:var(--uk-tap);margin:0;padding:0;border:1px solid var(--uk-gold-dim);border-top:2px solid var(--uk-gold);border-radius:var(--uk-radius);
 background:var(--uk-surface);color:var(--uk-ivory);font:600 1.4rem/1 var(--uk-serif);box-shadow:var(--uk-rule),0 2px 5px #0004;cursor:pointer;-webkit-tap-highlight-color:transparent}
.uk-stepper>.uk-stepper-btn:hover:not(:disabled){border-color:var(--uk-gold-hi);background:var(--uk-surface-hover);color:var(--uk-gold-text)}
.uk-stepper>.uk-stepper-btn:focus-visible{outline:3px solid var(--uk-focus);outline-offset:2px;z-index:2}
.uk-stepper>.uk-stepper-btn:disabled{border-color:#5b5040;border-top-color:#6d6047;opacity:.5;cursor:not-allowed}
input.uk-input.uk-input.uk-stepper-input{padding:0 4px;text-align:center;-moz-appearance:textfield;appearance:textfield}
input.uk-stepper-input::-webkit-inner-spin-button,input.uk-stepper-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Segmented choice: two to four equal buttons joined into one control. Mark the chosen one with aria-pressed="true" (or aria-checked="true" on role="radio"). */
.uk-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);min-width:0;margin:0}
.uk-seg>.uk-seg-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-sizing:border-box;min-width:0;min-height:var(--uk-tap);margin:0 0 0 -1px;padding:6px 8px;
 border:1px solid var(--uk-gold-dim);border-radius:0;background:var(--uk-tab-surface);color:var(--uk-ivory);font:600 .8125rem/1.25 var(--uk-sans);text-align:center;overflow-wrap:break-word;box-shadow:var(--uk-rule);cursor:pointer;-webkit-tap-highlight-color:transparent}
.uk-seg>.uk-seg-btn:first-child{margin-left:0;border-radius:var(--uk-radius) 0 0 var(--uk-radius)}
.uk-seg>.uk-seg-btn:last-child{border-radius:0 var(--uk-radius) var(--uk-radius) 0}
.uk-seg>.uk-seg-btn:only-child{border-radius:var(--uk-radius)}
.uk-seg>.uk-seg-btn>small{display:block;font:500 .71875rem/1.2 var(--uk-sans);color:var(--uk-ivory-dim)}
.uk-seg>.uk-seg-btn:hover:not(:disabled){border-color:var(--uk-gold);background:linear-gradient(180deg,#2a3b55,#16233a);color:var(--uk-gold-text);z-index:1}
.uk-seg>.uk-seg-btn[aria-pressed="true"],.uk-seg>.uk-seg-btn[aria-checked="true"],.uk-seg>.uk-seg-btn.is-selected{z-index:1;border-color:var(--uk-gold-hi);background:var(--uk-surface-lit);color:var(--uk-gold-text);
 box-shadow:inset 0 -3px 0 var(--uk-gold-hi),inset 0 0 0 2px var(--uk-navy-0),inset 0 0 0 3px #e6c88955}
.uk-seg>.uk-seg-btn[aria-pressed="true"]>small,.uk-seg>.uk-seg-btn[aria-checked="true"]>small,.uk-seg>.uk-seg-btn.is-selected>small{color:var(--uk-ivory)}
.uk-seg>.uk-seg-btn:focus-visible{outline:3px solid var(--uk-focus);outline-offset:2px;z-index:2}
.uk-seg>.uk-seg-btn:disabled{border-color:#5b5040;opacity:.5;cursor:not-allowed}

/* 25.5 Slot corner badges and the selected state. A badge sits inside a .uk-slot: count at the bottom right, or a small icon (lock, hourglass, E for equipped) at a top corner. Badges are not tappable. */
.uk-slot-badge{position:absolute;right:2px;bottom:2px;z-index:1;box-sizing:border-box;min-width:18px;padding:0 4px;border:1px solid var(--uk-gold-dim);border-radius:9px;background:var(--uk-navy-0);color:var(--uk-gold-text);font:700 .72rem/1.5 var(--uk-sans);text-align:center;pointer-events:none}
.uk-slot-badge.is-tl,.uk-slot-badge.is-tr,.uk-slot-badge.is-bl{display:grid;place-items:center;width:22px;height:22px;min-width:0;padding:0;border-radius:11px;line-height:1}
.uk-slot-badge.is-tl{top:2px;left:2px;right:auto;bottom:auto}
.uk-slot-badge.is-tr{top:2px;right:2px;bottom:auto}
.uk-slot-badge.is-bl{left:2px;right:auto}
.uk-slot-badge .uk-ico,.uk-slot-badge .uk-art{width:16px;height:16px;margin:0}
/* Selected: a gold ring and a tick (shape and colour; the tick sits at the top right, so use the other three corners for badges). Also set aria-pressed="true" on the button. */
.uk-slot.is-selected{border-color:var(--uk-gold-hi);box-shadow:0 0 0 1px var(--uk-navy-0),0 0 0 3px var(--uk-gold-hi),0 0 12px #f0ce8366}
.uk-slot.is-selected::after{content:"\2713";position:absolute;top:2px;right:2px;z-index:1;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--uk-gold-hi);color:var(--uk-navy-0);font:700 .75rem/1 var(--uk-sans);pointer-events:none}

/* 25.6 State tag that may wrap: "Limit reached" or "Awaiting refund" in a two-column card at 320 px (the plain tag is nowrap). */
.uk-state.is-wrap{box-sizing:border-box;max-width:100%;padding:2px 8px;justify-content:center;border-radius:12px;line-height:1.35;white-space:normal;overflow-wrap:break-word;text-align:center}
/* ---- Tier 0 line on the item card: the gold highlight frame, one level above a normal card. Drawn only while IRP_T0_AFFIXES_VERSION is on
   (public/equipment-view.js tierZeroLine). Name, sentence and note are always visible; nothing is hover-only. Wraps at 320px. ---- */
.tier0-line{position:relative;margin:10px 0;padding:10px 12px;border:1px solid var(--uk-gold-hi);border-radius:var(--uk-radius-card);background:var(--uk-surface-lit);box-shadow:var(--uk-rule),0 0 10px #f0ce8333;color:var(--uk-ivory);overflow-wrap:anywhere}
.tier0-line .tier0-kicker{display:inline-block;margin-right:8px;padding:1px 6px;border:1px solid var(--uk-gold);border-radius:var(--uk-radius);color:var(--uk-gold-text);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.tier0-line strong{color:var(--uk-gold-text);font-size:1rem}
/* Round five (QA R3): the class is written twice so that this rule wins on WEIGHT (0,2,1), not on the order of the stylesheets, against any `.some-card p` rule (0,1,1). */
.tier0-line.tier0-line p{margin:6px 0 4px;font-size:.9375rem;line-height:1.5;color:#fff0c8}
/* Round six (fifth QA read R2): the Need / Greed / Pass window. The line's NAME sits in each card's existing detail line (the .tier0-tag below, beside class and rarity), and nothing else of the line is inside a card, so a Tier 0 card is exactly as high as any other card and its three buttons are where they are on every card. What the line does is written AFTER the last card (public/loot-roll-window.js notes()): one closed row per line, the name and ONE SHORT LINE, 44px high to tap; a tap opens the whole sentence (never hover-only). Closed, the row is one line (nowrap, ellipsis); open, it wraps. Every selector carries .tier0-roll-text, which is drawn only while IRP_T0_AFFIXES_VERSION is on. */
.loot-roll-window details.tier0-roll-text{margin:0;border-top:1px solid #ffffff20;color:#fff0c8;font-size:.8125rem}
.loot-roll-window details.tier0-roll-text summary{box-sizing:border-box;min-height:44px;padding:12px 0;line-height:1.25rem;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.loot-roll-window details.tier0-roll-text[open] summary{white-space:normal;overflow-wrap:anywhere}
.loot-roll-window details.tier0-roll-text summary strong{color:var(--uk-gold-text)}
.loot-roll-window details.tier0-roll-text p{margin:0 0 10px;color:#fff0c8;font-size:.875rem;line-height:1.45;overflow-wrap:anywhere}
.tier0-line small{display:block;color:var(--uk-ivory-dim);font-size:.8125rem;line-height:1.45}
/* Tier 0 in the Enchanter (round three): the line is a FIXED row, gold-framed like the card block, with a small closed lock where other rows have the lock button. Nothing is hover-only. */
/* Round five (QA R3): `.tier0-fixed` is written twice in the three rules below (frame, name, sentence) and in the note rule, so that they win on WEIGHT against `.workshop-page .enchanter-affix`, `.enchanter-sheet .enchanter-affix` (0,2,0) and `.workshop-page .enchanter-affix small` / `strong` (0,2,1) whatever the order of the stylesheets. */
.enchanter-affix.tier0-fixed.tier0-fixed{border:1px solid var(--uk-gold-hi);border-radius:var(--uk-radius-card);background:var(--uk-surface-lit);box-shadow:var(--uk-rule),0 0 10px #f0ce8333;color:var(--uk-ivory);padding:8px 10px;overflow-wrap:anywhere}
.enchanter-affix.tier0-fixed.tier0-fixed strong{color:var(--uk-gold-text)}
.enchanter-affix.tier0-fixed .tier0-kicker{display:inline-block;margin-right:6px;padding:1px 6px;border:1px solid var(--uk-gold);border-radius:var(--uk-radius);color:var(--uk-gold-text);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
/* Round four (QA N1): the row holds a sentence, so it must wrap. workshops-combat.css:141 makes .enchanter-affix-main a flex row and :143 sets white-space:nowrap on its small; both are undone here for the Tier 0 fixed row ONLY (every selector carries .tier0-fixed, so no other Enchanter row changes). The row is not a control: default cursor, text from the top. */
.enchanter-affix.tier0-fixed .enchanter-affix-main{display:block}
.enchanter-sheet .enchanter-affix.tier0-fixed,.enchanter-affix.tier0-fixed{cursor:default;align-items:flex-start}
.enchanter-affix.tier0-fixed .enchanter-affix-main strong{display:block;white-space:normal}
.enchanter-affix.tier0-fixed.tier0-fixed small{display:block;margin-top:4px;color:#fff0c8;font-size:.875rem;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.enchanter-affix.tier0-fixed .enchanter-affix-main small{white-space:normal}
.enchanter-affix.tier0-fixed.tier0-fixed small.tier0-fixed-note{color:var(--uk-ivory-dim);font-size:.8125rem}
.tier0-lock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:48px;color:var(--uk-gold-text);font-size:.75rem}
.tier0-lock svg{width:18px;height:20px}
/* Tier 0 marks outside the card (round three): the loot line, the bag tile and the comparison say "Tier 0" in gold, in words. */
.tier0-tag{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--uk-gold);border-radius:var(--uk-radius);color:var(--uk-gold-text);font-size:.75rem;letter-spacing:.04em;white-space:nowrap}
/* The gold Tier 0 frame on every tile, card and list row that uses the rarity class (bag, chests, market, inspection, salvage list, loot flight) and on
   the Enchanter's and Blacksmith's equipment list (public/workshop-view.js t0Tile). Nothing moves: an outline and shadows only.
   Tidy-up round: the frame wins on WEIGHT. The class is written four times (0,4,0), so it beats `.item-tile:has(.oath-gear)` (0,2,0, public/oath.css:
   box-shadow:none, which had left only a thin inner line on a bag tile), `.workshop-page .workshop-item[aria-pressed=true]` (0,3,0) and every other
   rarity, list or theme rule of a tile, whatever the order of the stylesheets.
   Seen at a glance, also on an Epic tile whose own border is gold: a pale ring 3 px wide just inside the tile's edge (an outline is painted over the item
   picture), and outside the edge a dark line, a gold ring and a gold glow. */
.tier0-item.tier0-item.tier0-item.tier0-item{outline:3px solid #fff1b8;outline-offset:-5px;box-shadow:0 0 0 1px #1a1206,0 0 0 3px #ffd86b,0 0 14px 4px #f0ce83b3}
/* The states the outline would otherwise hide, one level heavier (0,5,0): keyboard focus keeps the focus ring, a selected tile (market bag, account
   chest) keeps its selection ring outside the tile, and the chosen row of the equipment list keeps its gold bar on the left. */
.tier0-item.tier0-item.tier0-item.tier0-item:focus-visible{outline:3px solid var(--uk-focus);outline-offset:1px}
.tier0-item.tier0-item.tier0-item.tier0-item.selected{outline:2px solid #f0d38b;outline-offset:1px}
.workshop-item.tier0-item.tier0-item.tier0-item.tier0-item[aria-pressed=true]{box-shadow:inset 3px 0 #cfad6c,0 0 0 1px #1a1206,0 0 0 3px #ffd86b,0 0 14px 4px #f0ce83b3}
.tier0-compare-note{margin:6px 0;padding:6px 8px;border:1px solid var(--uk-gold);border-radius:var(--uk-radius);color:#fff0c8;font-size:.875rem;line-height:1.45;overflow-wrap:anywhere}
/* Closeable banners (public/banner-close.js): every [data-banner] gets a × that hides it until what it says changes. */
[data-banner][hidden],[data-banner-host][hidden]{display:none!important}
.banner-has-corner-close{position:relative;padding-right:58px!important}
.banner-has-corner-close>.banner-close{position:absolute;top:6px;right:6px;margin:0;width:44px;min-width:44px;min-height:44px;font:600 1.125rem/1 system-ui}
.next-step.banner-has-corner-close>.banner-close{top:50%;transform:translateY(-50%)}
/* Earned titles (IRP_EARNED_TITLES_VERSION): the title under the name, and the Titles list on the character screen. */
.uk-doll-name .uk-doll-title{color:var(--uk-gold,#e2b85c);font-style:italic}
.uc-titles .uc-title-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px;margin-top:8px}
.uc-title{display:grid;gap:2px;min-height:44px;padding:8px 10px;text-align:left;border:1px solid rgba(226,184,92,.35);border-radius:6px;background:rgba(0,0,0,.25);color:inherit}
.uc-title small{color:var(--uk-ivory-dim);font-size:.8rem}
.uc-title.is-selected{border-color:var(--uk-gold,#e2b85c);box-shadow:0 0 0 1px var(--uk-gold,#e2b85c) inset}
.uc-title.is-locked{opacity:.55}
/* Zone boss streak (IRP_ZONE_BOSS_STREAK_VERSION, default off; lib/zone-boss-streak.js): one small full-width line in the zone controls, only while a streak is live. */
.shell .field-controls>.field-streak,.field-controls>.field-streak{display:block;grid-column:1/-1;flex-basis:100%;min-width:0;margin:0;padding:2px 4px;color:#f0d38b;font-size:.75rem;line-height:1.35;text-align:center;overflow-wrap:anywhere}
.shell .field-controls>.field-streak[hidden],.field-controls>.field-streak[hidden]{display:none}
/* The level-up prompt and the first-fight card sit outside the page shell, so section 9 never reached them and they kept the old red button.
   They use the same gold main button (13 Oct pass). */
:is(.next-prompt-host,.combat-intro-card) :is(.red-button,.uk-btn-primary){min-height:var(--uk-tap);padding:9px 18px;border:1px solid #e6c98f;border-radius:var(--uk-radius);background:linear-gradient(180deg,#c9a468,#8f6f3c);color:#1b1509;font:700 .8125rem/1.3 system-ui;text-decoration:none;box-shadow:inset 0 1px 0 #fff2c95c,inset 0 0 0 2px #8a682f66,0 2px 5px #0005;cursor:pointer}
:is(.next-prompt-host,.combat-intro-card) :is(.red-button,.uk-btn-primary):hover:not(:disabled){border-color:#fbe3ac;background:linear-gradient(180deg,#d8b674,#9c7a44)}
:is(.next-prompt-host,.combat-intro-card) :is(.red-button,.uk-btn-primary):disabled{border-color:#7a6b4c;color:#3a3427;filter:none}
/* Release polish QA (14 Oct): the party invitation pop-up also sits outside the shell, so its Accept kept the old red; the same gold main button. */
#partyInvitations :is(.red-button,.uk-btn-primary){min-height:var(--uk-tap);padding:9px 18px;border:1px solid #e6c98f;border-radius:var(--uk-radius);background:linear-gradient(180deg,#c9a468,#8f6f3c);color:#1b1509;font:700 .8125rem/1.3 system-ui;text-decoration:none;text-shadow:none;box-shadow:inset 0 1px 0 #fff2c95c,inset 0 0 0 2px #8a682f66,0 2px 5px #0005;cursor:pointer}
#partyInvitations :is(.red-button,.uk-btn-primary):hover:not(:disabled){border-color:#fbe3ac;background:linear-gradient(180deg,#d8b674,#9c7a44)}
#partyInvitations :is(.red-button,.uk-btn-primary):disabled{border-color:#7a6b4c;color:#3a3427;filter:none}
/* The prompt keeps its narrow side padding, so Level N!, Spend points and the close button still share one line in its 360 px box. */
.next-prompt-host .next-prompt :is(.red-button,.uk-btn-primary){padding:0 12px}
/* Touch screens keep :hover on the last tapped tab, and the hover look (gold edge) then read as a second selected tab next to the real one
   (13 Oct pass, phone Town tabs). Where there is no real hover, an unselected tab keeps its resting look. */
@media(hover:none){:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) :is(.section-tabs,.region-tabs,.market-tabs,.rank-tabs,.notice-board-tabs,.workshop-service-tabs,.inventory-tabs,.inventory-dialog-tabs,.dev-tabs,.crown-categories,.chat-channels,.tree-toolbar>nav,.uk-tabs)>:is(button,a):hover:not(:disabled):not(.active,.selected,.chosen,[aria-selected="true"],[aria-pressed="true"],[aria-current="page"],[aria-current="true"]),
:is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices):is(.shell,.modal-backdrop,.handbook,.loot-roll-window,.adventure-notices) .market-category-group>button:hover:not(:disabled):not(.active,.selected,.chosen,[aria-selected="true"],[aria-pressed="true"],[aria-current="page"],[aria-current="true"]){border-color:var(--uk-gold-dim);background:var(--uk-tab-surface);color:#d9d3c2}}
/* Tier III Ultimates (IRP_SKILL_TIER3_VERSION=1; only Ultimate nodes and the Ultimate slot carry these classes, so with the switch off nothing matches).
   The tree node wears a gold double ring in every state, dimmer before it is learned (as other skills show available/learned), and the ability-bar slot header gets a native star glyph. */
.class-tree-skill.ultimate .class-tree-node:not(.selected){border-color:#8f7643!important;box-shadow:0 3px 9px #000b,0 0 0 4px #0d1420,0 0 0 5.5px #a3854a99!important}
.class-tree-skill.ultimate.available .class-tree-node:not(.selected){border-color:#c9a254!important;box-shadow:0 3px 9px #000b,0 0 0 4px #0d1420,0 0 0 5.5px #c9a254cc,0 0 16px #c9a25444!important}
.class-tree-skill.ultimate.learned .class-tree-node:not(.selected){border-color:#f2d27e!important;box-shadow:0 0 0 4px #171b20,0 0 0 6.5px #e6bf62,0 0 26px #e6bf6270!important}
.class-tree-skill.ultimate.locked .class-tree-node:not(.selected){border-color:#6d6450!important;box-shadow:0 3px 9px #000b,0 0 0 4px #0d1420,0 0 0 5.5px #6d645099!important}
.ultimate-glyph{display:inline-block;flex:none;width:1.25em;height:1.25em;margin-right:.4em;vertical-align:-.3em;line-height:0}
.ultimate-glyph svg{width:100%;height:100%;fill:#f1cf78;stroke:#5a3f12;stroke-width:.8;stroke-linejoin:round;filter:drop-shadow(0 0 3px #e6bf6288)}
/* Sound settings (IRP_SOUND_VERSION; public/sound-fx.js panel()): the toggle sits in the dialog's .checkbox-row, the volume slider takes the gold accent and shows its value as a %. */
.sound-settings{display:grid;gap:6px;margin:4px 0 8px}
.sound-settings h3{margin:0}
.sound-settings .checkbox-row input{accent-color:#b99956}
.sound-settings .checkbox-row{margin:0}
.sound-settings .sound-volume{display:grid;gap:4px;min-height:44px;font-size:.8125rem;color:#e6dbc4}
.sound-settings .sound-volume-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sound-settings .sound-volume output{min-width:3.5ch;text-align:right;font-variant-numeric:tabular-nums;color:#e2c27f;font-weight:600}
.sound-settings input[type=range]{width:100%;min-height:32px;margin:0;accent-color:#b99956;cursor:pointer}
/* Earned titles on the default Hero screen (IRP_EARNED_TITLES_VERSION, IRP_UI_CHARACTER_VERSION off; public/expansion-ui.js earnedTitles): the chosen title under the name and the Titles list. */
.exp-heading .exp-heading-title{margin:2px 0 0;color:#e2b85c;font:italic 1.125rem/1.3 Georgia,'Times New Roman',serif;letter-spacing:.02em;text-shadow:0 1px 3px #000}
.legacy-titles{margin:0 0 18px;min-width:0}
.legacy-titles .uc-titles{border:1px solid var(--exp-border,#625337);border-radius:6px;background:linear-gradient(180deg,#14212acc,#0b1217e6);padding:0 14px}
.legacy-titles .uc-titles>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:1.0625rem/1.3 Georgia,'Times New Roman',serif;color:var(--exp-gold,#d2b576)}
.legacy-titles .uc-titles[open]{padding-bottom:14px}
.legacy-titles .uc-titles .small-note{margin:4px 0 0;color:#aaa28f;font-size:.8125rem}
.legacy-titles .uc-title{cursor:pointer;font:inherit;color:#e7ddc6}
.legacy-titles .uc-title b{font-family:Georgia,'Times New Roman',serif;font-weight:normal;color:#ead6a4}
.legacy-titles .uc-title small{color:#b8ae98}
.legacy-titles .uc-title.is-locked{cursor:default}
.legacy-titles .uc-title-list>.secondary{min-height:44px;grid-column:1/-1;justify-self:start}
/* QA 2026-10-16: on a phone the header text runs across the whole banner, so the painted right side (lamps, coins) sat under the words. Keep the veil strong across the full width there. */
@media(max-width:899px){.uk-head::before{background:linear-gradient(90deg,#0c1723f2,#0c1723e6 60%,#0c1723c4)}.uk-head-text h1{text-shadow:0 1px 4px #000}}
/* QA 2026-10-16: header stat numbers share one baseline when a label wraps to two lines (kept after section 25 because the kit above is frozen). */
.uk-stat{justify-content:flex-end}
/* Auction House buy-order picker: the chosen category and material (IRP_UI_BUY_CATEGORIES_VERSION). */
.shell .ah-page .ah-bcat.is-on,.shell .ah-page .ah-bmat.is-on{border-color:var(--uk-gold,#e0b85a);box-shadow:inset 0 0 0 2px var(--uk-gold,#e0b85a)}