of the kit screen), so it does nothing until IRP_UI_AUCTION_VERSION draws that markup. Markup: public/ui-auction.js. Plan and map: docs/NEXT_UI_AUCTION_2026-10-04.md. Rules in this file beat the kit's own button rules (same specificity, kit loads last) by starting with ".shell .ah-page". Colours, frames and shadows come from public/ui-kit.css tokens only (no colour literal here). Phones: no fixed width over 320 px, nothing wider than the screen, 44 px targets (buttons, tabs, fields and slots get theirs from the kit). */ .shell .ah-page{display:grid;gap:14px;align-content:start;min-width:0;container:ahpage/inline-size} .shell .ah-page>*{min-width:0} .shell .ah-page [hidden]{display:none!important} .shell .ah-page label{margin:0} .shell .ah-page .ah-panel{display:grid;gap:14px;align-content:start;min-width:0;container:ahp/inline-size} .shell .ah-page .ah-h{margin:0;font:600 1.2rem/1.2 var(--uk-serif);color:var(--uk-ivory);overflow-wrap:anywhere} .shell .ah-page .ah-sec{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0} /* Header: title row (guide link and refresh), one help line, the three numbers. */ .shell .ah-page .uk-title-row>h1{flex:0 1 auto;overflow-wrap:anywhere} .shell .ah-page .ah-head{margin:0} .shell .ah-page .ah-add-slots{margin-top:8px} .shell .ah-page .ah-tabs{margin:0} @container ahpage (max-width:560px){.shell .ah-page .ah-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}} /* Browse: search, category tiles, type buttons, two drop-downs, then the result count and the rows. */ .shell .ah-page .ah-filters{display:grid;gap:12px;min-width:0} .shell .ah-page .ah-search{position:relative} .shell .ah-page .ah-suggest{display:grid;gap:4px;max-height:320px;padding:4px;overflow:auto;border:1px solid var(--uk-gold-dim);border-radius:var(--uk-radius);background:var(--uk-navy-0)} .shell .ah-page .ah-suggest button{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 10px;border:0;border-radius:var(--uk-radius);background:var(--uk-navy-1);color:var(--uk-ivory);text-align:left;cursor:pointer} .shell .ah-page .ah-suggest button[aria-selected="true"]{outline:3px solid var(--uk-focus);outline-offset:-3px} .shell .ah-page .ah-suggest button:focus-visible{outline:3px solid var(--uk-focus);outline-offset:-3px} .shell .ah-page .ah-suggest .gear-icon{flex:0 0 38px;width:38px;height:40px} .shell .ah-page .ah-suggest strong,.shell .ah-page .ah-suggest small{display:block;white-space:normal;overflow-wrap:anywhere} .shell .ah-page .ah-suggest small{font-size:.71875rem;color:var(--uk-ivory-dim)} /* The line under the name already says Unique, Set, Charm or Rune; the corner badge wrapped and hid the art in this small box. */ .shell .ah-page .ah-suggest .item-tier-badge{display:none} .shell .ah-page .ah-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .shell .ah-page .ah-cat{flex-direction:row;justify-content:flex-start;gap:8px;min-width:0;min-height:48px;padding:4px 8px;text-align:left} .shell .ah-page .ah-cat-ico{display:block;flex:0 0 28px;width:28px;height:32px} .shell .ah-page .ah-cat-ico>*{display:block;width:100%;height:100%;font-size:1rem} .shell .ah-page .ah-cat-ico .item-tier-badge,.shell .ah-page .ah-cat-ico b{display:none} .shell .ah-page .ah-cat-t{min-width:0;overflow-wrap:anywhere} .shell .ah-page .ah-types{display:flex;flex-wrap:wrap;gap:6px} .shell .ah-page .ah-type{flex:0 1 auto;min-width:0;gap:6px;padding:6px 12px} .shell .ah-page .ah-type small{font:500 .71875rem/1 var(--uk-sans);color:var(--uk-ivory-dim)} .shell .ah-page .ah-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .shell .ah-page .ah-results{display:grid;gap:12px;align-content:start;min-width:0} .shell .ah-page .ah-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;min-width:0;color:var(--uk-ivory-dim)} .shell .ah-page .ah-count{margin:0;font:600 .9rem/1.3 var(--uk-sans);overflow-wrap:anywhere} .shell .ah-page .ah-count b{color:var(--uk-gold-text)} .shell .ah-page .ah-tip,.shell .ah-page .ah-foot{margin:0} @container ahp (min-width:480px){ .shell .ah-page .ah-cats{grid-template-columns:repeat(4,minmax(0,1fr))} .shell .ah-page .ah-cat{flex-direction:column;justify-content:center;gap:3px;min-height:68px;padding:5px 4px;text-align:center;font-size:.71875rem} .shell .ah-page .ah-cat-ico{flex:0 0 auto} } @container ahp (min-width:860px){.shell .ah-page .ah-cats{grid-template-columns:repeat(8,minmax(0,1fr))}} @container ahp (max-width:419px){.shell .ah-page .ah-pair{grid-template-columns:minmax(0,1fr)}.shell .ah-page .ah-pair.is-num{grid-template-columns:repeat(2,minmax(0,1fr))}} /* A listing row: item picture, name (a button that opens the details), rarity word, class and level, seller and time; price and the one action on the line below. */ .shell .ah-page .ah-lots{grid-template-columns:minmax(0,1fr)} .shell .ah-page .ah-lot .uk-row-main{align-items:flex-start} .shell .ah-page .ah-ico{display:block;flex:0 0 auto;width:64px;height:64px} .shell .ah-page .ah-ico.is-lg{width:72px;height:72px} .shell .ah-page .ah-ico>*{display:block;width:100%;height:100%;max-height:none;font-size:1.9rem} .shell .ah-page .ah-name{display:block;box-sizing:border-box;width:100%;min-height:var(--uk-tap);margin:-12px 0 -14px;padding:12px 0 14px;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;text-align:left;cursor:pointer} .shell .ah-page .ah-name:hover .uk-row-title{color:var(--uk-gold-text)} .shell .ah-page .ah-name:focus-visible{outline:3px solid var(--uk-focus);outline-offset:-3px} .shell .ah-page .uk-row-sub{overflow-wrap:anywhere} .shell .ah-page .ah-rar{color:var(--uk-rarity);font-weight:700} .shell .ah-page .ah-tags{margin-top:2px} .shell .ah-page .ah-lot .uk-row-foot>.uk-btn,.shell .ah-page .ah-lot .uk-row-foot>.uk-state{flex:1 1 96px;min-width:96px;max-width:200px;margin-left:auto} .shell .ah-page .ah-lot .uk-row-foot>.uk-price{flex:0 1 auto} .shell .ah-page .ah-extra{border-top:1px solid var(--uk-navy-3)} .shell .ah-page .ah-time{display:grid;gap:3px} .shell .ah-page .ah-time-text{font:500 .8rem/1.3 var(--uk-sans);color:var(--uk-ivory-dim)} .shell .ah-page .ah-sentence{margin:0;font-size:.9rem;line-height:1.4;color:var(--uk-ivory)} .shell .ah-page .ah-note{flex:1 0 100%;margin:0} .shell .ah-page .ah-block{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;margin:0;padding:12px} .shell .ah-page .ah-block>.uk-ico{width:30px;height:30px} .shell .ah-page .ah-ico .item-tier-badge,.shell .ah-page .ah-slot-art .item-tier-badge,.shell .ah-page .ah-ico b,.shell .ah-page .ah-slot-art b,.shell .ah-page .ah-order .uk-card-icon b{font-size:.71875rem} .shell .ah-page .uk-label{font-size:.71875rem} .shell .ah-page .ah-block p{margin:0;line-height:1.4} .shell .ah-page .ah-block .uk-btn{margin-top:10px} @container ahp (min-width:880px){.shell .ah-page .ah-lots{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.shell .ah-page .ah-ico{width:56px;height:56px}.shell .ah-page .ah-ico.is-lg{width:64px;height:64px}} /* Sell: the bag grid beside the chosen item and its price form. */ .shell .ah-page .ah-sell{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start} .shell .ah-page .ah-bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;margin:0;padding:0;list-style:none} .shell .ah-page .ah-slot{--uk-slot:100%;width:100%;height:auto;aspect-ratio:1;min-width:56px;min-height:56px} .shell .ah-page .ah-slot-art{display:block;width:100%;height:100%} .shell .ah-page .ah-slot-art>*{display:block;width:100%;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;font-size:1.6rem} .shell .ah-page .ah-slot.is-selected .ah-slot-art .item-tier-badge{display:none} .shell .ah-page .ah-selection{max-width:none;margin:0} .shell .ah-page .ah-sel-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center} .shell .ah-page .ah-sel-text{display:grid;gap:4px;min-width:0} .shell .ah-page .ah-actions{display:flex;flex-wrap:wrap;gap:8px} .shell .ah-page .ah-actions>*{flex:1 1 140px} .shell .ah-page .ah-form{display:grid;gap:14px;align-items:stretch;min-width:0;padding:0;border:0} .shell .ah-page .ah-stats-body{padding:8px 4px;overflow-wrap:anywhere} @container ahpage (min-width:860px){.shell .ah-page .ah-sell{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} /* Buy orders: the form beside your orders and the other buyers' orders. */ .shell .ah-page .ah-orders{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start} .shell .ah-page .ah-panel-stack{display:grid;gap:14px;min-width:0} .shell .ah-page .ah-order-grid{--uk-card-min:240px} .shell .ah-page .ah-order .uk-card-icon>*{display:block;width:34px;height:34px;font-size:1.2rem} @container ahpage (min-width:860px){.shell .ah-page .ah-orders{grid-template-columns:minmax(0,340px) minmax(0,1fr)}} /* Other buyers sits behind a tap (closed by default); quantity boxes have minus and plus buttons (kit .uk-stepper). */ .shell .ah-page .ah-others>summary{cursor:pointer;list-style:none;min-height:44px} .shell .ah-page .ah-others>summary::-webkit-details-marker{display:none} .shell .ah-page .ah-others>summary::before{content:'\25B8';color:var(--uk-gold)} .shell .ah-page .ah-others[open]>summary::before{transform:rotate(90deg)} .shell .ah-page .ah-others[open]>summary{margin-bottom:10px} .shell .ah-page .ah-matpick{display:grid;gap:8px;min-width:0} .shell .ah-page .ah-bcats{display:flex;flex-wrap:wrap;gap:8px} .shell .ah-page .ah-bcat{min-height:44px;display:inline-flex;align-items:center;gap:8px} .shell .ah-page .ah-bmats{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px} .shell .ah-page .ah-bmat{min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 6px;text-align:center;cursor:pointer} .shell .ah-page .ah-bmat-name{min-width:0;overflow-wrap:break-word} /* Browse > Materials: open buy orders of other players, above the listings. */ .shell .ah-page .ah-wanted{margin:12px 0} .shell .ah-page .ah-wanted .uk-btn{margin-top:10px} .shell .ah-page .ah-wanted-art{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden} .shell .ah-page .ah-wanted-art>*{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain} /* Header stat tiles (found by the live-switches play, 5 Oct): "Your gold" with six or more digits broke in the middle of the number ("500,00" over "0") because the kit lets a stat value wrap anywhere and the three tiles share one narrow column equally. Scoped to the Auction House header: the gold tile takes the width its number needs, the other two share the rest, and a value never wraps. Phones use the smaller size of the Hunts and Guild tiles. */ .shell .ah-page .ah-head .uk-stats{grid-template-columns:max-content minmax(0,1fr) minmax(0,1fr)} .shell .ah-page .ah-head .uk-stat dd{overflow-wrap:normal;white-space:nowrap;font-size:clamp(1rem,2.4vw,1.35rem)} @media(max-width:480px){.shell .ah-page .ah-head .uk-stat{padding:0 3px}.shell .ah-page .ah-head .uk-stat dd{font-size:1rem}} /* /ui-affixmarks.css */ /* Prefix / suffix marks: page-local LAYOUT for public/ui-affixmarks.js (docs/NEXT_UI_AFFIXMARKS_2026-10-03.md). WRITTEN, NEVER RUN. Every rule needs a class that exists only in markup written while IRP_UI_AFFIXMARKS_VERSION is on (.am-kind, .am-strip), so with the switch off nothing here matches. Linked before ui-kit.css (the kit stays last). Colours are kit tokens only: Prefix is the kit's gold chip, Suffix the same chip in the kit's dim ivory, Tier 0 the kit's gold badge fill (--uk-gold with --uk-navy-0 text, as .uk-badge), a full side the kit's done chip. Prefix and Suffix differ by their WORD first. */ /* The chip beside a modifier line. Specificity (0,2,0) so it beats the old '.gear-affixes span' rule (uppercase, margin, colour) that also matches a span in the list. */ .am-kind.uk-chip{display:inline-flex;margin:0 0 0 8px;min-height:22px;padding:1px 9px;text-transform:none;letter-spacing:0;font:600 .72rem/1.2 var(--uk-sans,system-ui);white-space:nowrap;vertical-align:middle} .am-kind.am-prefix{border-color:var(--uk-gold-dim);color:var(--uk-gold-text)} .am-kind.am-suffix{border-color:var(--uk-ivory-dim);color:var(--uk-ivory-dim)} .am-kind.am-tier0{border-color:var(--uk-gold-hi);background:var(--uk-gold);color:var(--uk-navy-0)} /* In a narrow line the chip drops below the text as a whole (it never breaks inside). */ .gear-affixes>li>.am-kind.uk-chip{margin-top:2px} /* The slot strip under the item name. */ .am-strip.uk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;padding:0;list-style:none} .am-strip .am-cap.uk-chip{display:inline-flex;align-items:baseline;gap:5px;margin:0;min-height:26px;padding:3px 10px;text-transform:none;letter-spacing:0;font:600 .78rem/1.3 var(--uk-sans,system-ui);color:var(--uk-gold-text)} .am-strip .am-cap b{font-weight:700;font-variant-numeric:tabular-nums;color:inherit} .am-strip .am-cap.am-full{color:var(--uk-done)} .am-strip .am-cap-state{font:700 .74rem/1.3 var(--uk-sans,system-ui);letter-spacing:0;text-transform:none} .am-strip .am-fixed{color:var(--uk-ivory-dim)} .am-strip .am-cap.am-t0.uk-chip{border-color:var(--uk-gold-hi);color:var(--uk-gold-text);white-space:normal} /* The one-line text form (comparison, salvage rows): plain words, a full side in the kit's done colour plus the word. */ .am-line{margin:2px 0 0;font:600 .74rem/1.45 var(--uk-sans,system-ui);color:var(--uk-ivory-dim)} .am-line .am-part{display:inline-block;margin-right:10px;overflow-wrap:anywhere} .am-line b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--uk-gold-text)} .am-line .am-part-full,.am-line .am-part-full b{color:var(--uk-done)} /* Enchanter list: the chip stands first in the row's main line, the name next to it, the tier at the end. */ .enchanter-affix-main>.am-kind.uk-chip{order:-1;flex:none;align-self:center;margin:0} .enchanter-affix-main.am-has-kind{flex-wrap:wrap;gap:3px 8px} .enchanter-affix-main.am-has-kind>strong{flex:1 1 8em;margin-right:auto} /* The pool of possible modifiers: each name carries its side. */ .enchanter-pool>span .am-kind.uk-chip{margin-left:6px} .enchanter-pool>span.am-has-kind{display:inline-flex;align-items:center;flex-wrap:wrap} /* Salvage prompt: the text line sits under the item name. */ .salvage-review .salvage-item-list li.am-has-line{flex-wrap:wrap} .salvage-review .salvage-item-list li>.am-line{flex:1 0 100%;margin:0} /* Comparison: one text line under each item name. */ .compare-items>div>.am-line{margin:0;min-width:0;max-width:100%} .compare-items>div>.am-line .am-part{display:block;margin:0} /* Tier 0 frame, narrow screens (fixes after Dev 1 run): the gold frame of an item card (.tier0-item: a 3 px rail 5 px inside the card edge) sat on the first characters of the strip and of every modifier line at 320 px, where the inventory dialog gives the card no padding. 14 px clears the rail with room to spare. Scoped to the card of a Tier 0 item, and to the strip and the list that follows it (no parent-state selector). */ @media(max-width:480px){ .item-details.tier0-item .am-strip.uk-chips{padding-inline:14px} .item-details.tier0-item .am-strip~.gear-affixes>li{padding-inline:14px} } /* Tier 0 frame, narrow screens, round 2 (F2): the same rail still sat on the first letters of the title block (rarity, name, kind, tier, item level and requirements), of "Which stats can this slot roll?", of the base box and of the Sell-for-gold line, which also have no padding at the edge. Same 14 px as the two rules above, only on the card of a Tier 0 item. */ @media(max-width:480px){ .item-details.tier0-item .item-detail-title{padding-inline:14px} .item-details.tier0-item>.text-button{margin-inline:14px} .item-details.tier0-item>.gear-base{margin-inline:14px} .item-details.tier0-item>.az-inline-form{padding-inline:14px} } /* Tier 0 frame, wider screens (found by the live-switches play, 5 Oct): the 14 px gap above is only inside the narrow media query, but the gold rail (3 px, 5 px inside the card edge) also sat on the "+" of every modifier line and on the first letters of the strip, the "Which stats can this slot roll?" link and the base box at 481 px and wider (desktop, tablet, a phone on its side). The same six rules for the other widths; at 480 px and narrower nothing changes. Scoped to the card of a Tier 0 item; no parent-state selector. */ @media(min-width:481px){ .item-details.tier0-item .am-strip.uk-chips{padding-inline:14px} .item-details.tier0-item .am-strip~.gear-affixes>li{padding-inline:14px} .item-details.tier0-item .item-detail-title{padding-inline:14px} .item-details.tier0-item>.text-button{margin-inline:14px} .item-details.tier0-item>.gear-base{margin-inline:14px} .item-details.tier0-item>.az-inline-form{padding-inline:14px} } /* Capacity chip at 320 px (switch IRP_T0_SLOT_VERSION, 2026-10-05): 'Prefixes 3 / 3 (includes Tier 0) No free slot' broke inside the word 'Prefixes' and inside the count. The label and the count never break; the chip may wrap BETWEEN its parts, so the includes note goes to its own line. Only chips of the capacity strip (am- classes); nothing else changes. */ .am-strip .am-cap.uk-chip{flex-wrap:wrap;max-width:100%} .am-strip .am-cap-name,.am-strip .am-cap b{white-space:nowrap} /* /expedition-bar.css */ /* Compact expedition bar (IRP_UI_EXPEDITION_BAR_VERSION). Every rule is scoped to .arena-heading.ex-bar, a class public/expedition-bar.js adds only while the switch is on: with the switch off nothing here matches. One row of about 58 px (XP per hour left, the zone in the middle, gold per hour right); at 480 px and narrower two rows. Colours come from the ui-kit tokens; no gradient, no glow, no motion: the bar is never animated. */ .arena-column>.arena-heading.ex-bar{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:center;column-gap:14px;row-gap:2px;min-height:0;padding:6px 12px;background:var(--uk-navy-1);box-shadow:none;border-bottom:1px solid var(--uk-gold-dim)} .arena-heading.ex-bar>#adventureRates.ex-rates{display:contents} .arena-heading.ex-bar>#formationStatus{grid-column:1/-1;grid-row:2;margin:0;padding:0;border:0;font:.71875rem/1.2 var(--uk-sans);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .arena-heading.ex-bar .ex-xp,.arena-heading.ex-bar .ex-gold{display:grid;gap:0;min-width:0;grid-row:1;align-items:center;padding:0} .arena-heading.ex-bar .ex-xp{grid-column:1;justify-items:start} .arena-heading.ex-bar .ex-gold{grid-column:3;justify-items:end;text-align:right} .arena-heading.ex-bar .ex-rates small{font:500 .71875rem/1.2 var(--uk-sans);letter-spacing:0;color:var(--uk-ivory-dim)} .arena-heading.ex-bar .ex-rates strong{font:700 1rem/1.25 var(--uk-sans);color:var(--uk-gold-text);font-variant-numeric:tabular-nums;white-space:nowrap} .arena-heading.ex-bar .ex-rates .ex-note{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .arena-heading.ex-bar .zone-badge.ex-zone{grid-column:2;grid-row:1;position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px) max-content minmax(0,1fr);column-gap:0;row-gap:1px;align-items:center;width:auto;max-width:100%;min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none;text-align:center;white-space:normal} .arena-heading.ex-bar .ex-zone>*{grid-column:1/-1;min-width:0} .arena-heading.ex-bar .ex-zone>span:first-child{margin:0;font:600 1rem/1.2 var(--uk-serif);letter-spacing:0;color:var(--uk-ivory);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .arena-heading.ex-bar .ex-zone>#modeBadge{display:block;margin:0;font:500 .71875rem/1.15 var(--uk-sans);letter-spacing:0;color:var(--uk-ivory-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .arena-heading.ex-bar .ex-zone>.ex-track{grid-column:2;display:block;height:6px;margin:2px 0;border-radius:3px;background:var(--uk-navy-3);overflow:hidden} .arena-heading.ex-bar .ex-zone>.ex-track[hidden]{display:none} .arena-heading.ex-bar .ex-track>.ex-fill{display:block;width:0;height:100%;border-radius:3px;background:var(--uk-gold)} .arena-heading.ex-bar .ex-zone>.ex-count{grid-column:3;margin:0 0 0 8px;font:600 .71875rem/1 var(--uk-sans);letter-spacing:0;color:var(--uk-gold-text);white-space:nowrap} .arena-heading.ex-bar .ex-zone>.ex-track[hidden]+.ex-count{grid-column:1/-1;margin:0;overflow:hidden;text-overflow:ellipsis} .arena-heading.ex-bar .ex-zone>#killCounter{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media(max-width:480px){ .arena-column>.arena-heading.ex-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:4px;padding:5px 10px} .arena-heading.ex-bar .ex-xp,.arena-heading.ex-bar .ex-gold{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px} .arena-heading.ex-bar .ex-xp{grid-column:1;justify-content:flex-start} .arena-heading.ex-bar .ex-gold{grid-column:2;justify-content:flex-end} .arena-heading.ex-bar .zone-badge.ex-zone{grid-column:1/-1;grid-row:2} .arena-heading.ex-bar>#formationStatus{grid-row:3} } /* /item-view.css */ /* Simpler item view (switch IRP_ITEM_VIEW_VERSION, public/item-view.js). Every rule is scoped to classes that exist only while the switch is on (.item-view-v1, .iv-*), so with the switch off nothing here matches. */ /* Header: a smaller picture, the requirements as two quiet chips. */ .item-view-v1 .item-detail-title{gap:16px;align-items:center;padding-bottom:14px;margin-bottom:12px} .item-view-v1 .item-detail-title>.gear-icon{width:84px;height:84px;flex:0 0 84px} .item-view-v1 .item-detail-title h2,.item-view-v1 .item-detail-title h3{margin:2px 0 4px;font-size:clamp(1.25rem,1rem + 1vw,1.6rem);line-height:1.15} .item-view-v1 .item-detail-title .item-kind{margin:0;font-size:.9rem} .item-view-v1 .item-detail-title .item-model-name{margin:2px 0 0;font-size:.8rem;opacity:.8} .item-view-v1 .item-requirements{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0} .item-view-v1 .item-requirements>div{display:flex;gap:6px;align-items:baseline;padding:3px 9px;border:1px solid #5a4b33;border-radius:999px;background:#0f1315;font-size:.78rem} .item-view-v1 .item-requirements dt{margin:0;opacity:.75} .item-view-v1 .item-requirements dd{margin:0;font-weight:700} /* Actions straight under the name: one compact row that wraps, every target at least 44px tall. Salvage is set apart in a warmer colour. */ .item-view-v1 .iv-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:10px;border:1px solid #4a3f2d;border-radius:8px;background:#0e1214} :is(.item-inspector,.item-hover) .item-view-v1 .iv-actions>button,.item-view-v1 .iv-actions>button{flex:1 1 auto;min-height:44px;min-width:0;margin:0;padding:6px 12px;font-size:.85rem;line-height:1.15;white-space:normal} .item-view-v1 .iv-actions>button[data-realm="salvage"]{border-color:#8a4a3a;color:#f1c3b4} /* The main action (Equip, Unequip, Move to my inventory) leads the row in the gold of the old sticky footer, so a new player sees it first. */ .item-view-v1 .iv-primary-row{display:flex;flex:1 1 100%;gap:6px} :is(.item-inspector,.item-hover) .item-view-v1 .iv-primary-row>button,.item-view-v1 .iv-primary-row>button{flex:1 1 0;min-height:44px;min-width:0;margin:0;padding:6px 12px;font-size:.95rem;font-weight:700;border-color:#b69b61;color:#f2dca7} .item-view-v1 .iv-primary-row>button:not(:disabled){background:linear-gradient(#bca16d,#957340);color:#10151e} .item-view-v1 .item-protection-note{margin:-6px 0 14px;font-size:.8rem} .item-view-v1 .stash-reason{flex-basis:100%;margin:2px 0 0;font-size:.78rem} /* Folded sections share one look: a summary row with a chevron. */ .item-view-v1 details.iv-section,.item-view-v1 details.iv-set,.item-view-v1 details.affix-roll-details{margin:12px 0;border:1px solid #3d382e;border-radius:8px;background:#101416} .item-view-v1 details.iv-section>summary,.item-view-v1 details.iv-set>summary,.item-view-v1 details.affix-roll-details>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;cursor:pointer;list-style:none;color:#e9d8ae} .item-view-v1 :is(details.iv-section,details.iv-set,details.affix-roll-details)>summary::-webkit-details-marker{display:none} .item-view-v1 :is(details.iv-section,details.iv-set,details.affix-roll-details)>summary::after{content:"";margin-left:auto;flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s} .item-view-v1 :is(details.iv-section,details.iv-set,details.affix-roll-details)[open]>summary::after{transform:rotate(-135deg) translateY(-2px)} .item-view-v1 :is(details.iv-section,details.affix-roll-details)>:not(summary){margin-left:12px;margin-right:12px} .item-view-v1 details.iv-section[open],.item-view-v1 details.affix-roll-details[open]{padding-bottom:10px} /* Set card: name, worn count and a pip per bonus threshold in the summary; the bonus lines, active ones lit, when opened. */ .item-view-v1 details.iv-set{border-color:#2f6b58;background:linear-gradient(180deg,#0f1d1a,#0f1416)} .item-view-v1 .iv-set-title{display:flex;flex-direction:column;min-width:0} .item-view-v1 .iv-set-title strong{font-family:Georgia,serif;font-size:1.05rem;color:#9fe6c9} .item-view-v1 .iv-set-title small{font-size:.78rem;color:#b9c6bf} .item-view-v1 .iv-set-pips{display:flex;gap:4px;margin-left:auto} .item-view-v1 .iv-set-pips i{display:grid;place-items:center;width:22px;height:22px;border:1px solid #3f7d68;border-radius:50%;font-style:normal;font-size:.72rem;color:#9cbcb0} .item-view-v1 .iv-set-pips i.on{background:#74d9b1;border-color:#74d9b1;color:#0b1a15;font-weight:700} .item-view-v1 .iv-set>summary::after{margin-left:6px} .item-view-v1 .iv-set-sub{margin:0 12px 8px;font-size:.8rem;color:#b9c6bf} .item-view-v1 .iv-set-bonuses{list-style:none;margin:0 12px;padding:0;display:grid;gap:6px} .item-view-v1 .iv-set-bonuses li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:start;margin:0;padding:8px;border:1px solid #26332f;border-radius:6px;font-size:.88rem;line-height:1.35;color:#c9d2cd} .item-view-v1 .iv-set-bonuses li:not(.is-active){opacity:.82} .item-view-v1 .iv-set-bonuses li.is-active{border-color:#4fae8b;background:#123029;color:#eaf7f1} .item-view-v1 .iv-pc{display:flex;flex-direction:column;align-items:center;justify-content:center;height:36px;border-radius:6px;background:#1b2a26;font-weight:700;color:#9fe6c9;line-height:1} .item-view-v1 .iv-pc small{font-size:.6rem;font-weight:400;opacity:.8} .item-view-v1 .iv-set-bonuses em{font-style:normal;font-size:.7rem;padding:1px 6px;border-radius:999px;background:#2f6b58;color:#e6fff5} .item-view-v1 .iv-active{font-size:.7rem;font-weight:700;color:#74d9b1;text-transform:uppercase;letter-spacing:.04em} .item-view-v1 .iv-set-foot{margin:8px 12px 12px;font-size:.78rem;color:#aab3ae} .item-view-v1 .iv-set-foot p{margin:4px 0;font-size:inherit;color:inherit} /* Stats: the base line as a small card, rolled modifiers in two columns where there is room. */ .item-view-v1 .gear-base{margin:10px 0} .item-view-v1 .gear-affixes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px 16px;margin:8px 0} .item-view-v1 .gear-affixes li{margin:0;padding:6px 0;border-bottom:1px solid #2a2722} .item-view-v1>.text-button[data-guide-topic]{font-size:.78rem} /* Comparison: the "Equipping now" line stays, the full table folds. */ .item-view-v1 .gear-comparison{margin-top:14px} .item-view-v1 .gear-comparison>h3{font-size:1rem} .item-view-v1 .iv-compare-full>summary{font-size:.92rem} /* The folded table keeps the fold's side margins instead of running 24px past its right edge. */ .item-view-v1 .iv-compare-full>.compare-table{width:calc(100% - 24px);max-width:calc(100% - 24px)} /* Quick menu (right-click / long-press on a bag item). */ .iv-quick-menu{position:fixed;z-index:1200;display:flex;flex-direction:column;min-width:200px;max-width:min(280px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:6px;border:1px solid #92754b;border-radius:8px;background:#171a1c;box-shadow:0 14px 40px #000c} .iv-quick-menu>button{display:block;width:100%;min-height:44px;margin:0;padding:8px 12px;border:0;border-radius:5px;background:transparent;color:#eadfc6;font:inherit;font-size:.9rem;text-align:left;cursor:pointer} .iv-quick-menu>button:hover:not([disabled]),.iv-quick-menu>button:focus-visible{background:#2a2a24;outline:none} .iv-quick-menu>button:focus-visible{box-shadow:inset 0 0 0 2px #f2ce85} .iv-quick-menu>button[disabled]{opacity:.45;cursor:not-allowed} .iv-quick-menu>button:first-child{font-weight:700;border-bottom:1px solid #3a352b;border-radius:5px 5px 0 0} .iv-quick-menu>button[data-realm="salvage"]{color:#f1b9a8} .iv-quick-menu .stash-reason{display:none} html.iv-on .item-tile[data-item]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} @media(max-width:600px){ .item-view-v1 .item-detail-title>.gear-icon{width:68px;height:68px;flex-basis:68px} .item-view-v1 .iv-actions{padding:8px} :is(.item-inspector,.item-hover) .item-view-v1 .iv-actions>button,.item-view-v1 .iv-actions>button{flex:1 1 calc(50% - 6px);font-size:.82rem;padding:6px 8px} .item-view-v1 .gear-affixes{grid-template-columns:minmax(0,1fr)} } /* /gem-ui.css */ /* Defensive gem sockets (switch IRP_GEM_SOCKETS_VERSION, default off). Socket dots, card lines and the Gemcutter screen. */ .gear-icon.has-gems{position:relative} .gem-dots{position:absolute;left:5%;bottom:5%;display:flex;gap:2px;pointer-events:none;z-index:2} .gem-dot{display:inline-block;width:7px;height:7px;border-radius:50%;box-sizing:border-box;vertical-align:middle} .gem-dot.filled{background:var(--gem-fill);border:1px solid rgba(0,0,0,.75);box-shadow:0 0 3px rgba(255,255,255,.35)} .gem-dot.open{border:1.5px solid #e7ddc6;background:rgba(0,0,0,.45)} .gem-dot.closed{border:1px solid rgba(231,221,198,.35);background:rgba(0,0,0,.25)} .gem-lines{list-style:none;margin:.4rem 0;padding:0;display:grid;gap:.25rem}.gem-lines li{display:flex;align-items:center;gap:.4rem;font-size:.85rem} .gem-stone{position:relative;display:inline-grid;place-items:center;width:var(--gem-size);height:var(--gem-size);flex:0 0 var(--gem-size);border-radius:50%;background:var(--gem-fill);box-shadow:inset -3px -4px 6px rgba(0,0,0,.45),inset 3px 3px 5px rgba(255,255,255,.45),0 0 0 2px rgba(0,0,0,.6);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)} .gem-stone b{font:700 calc(var(--gem-size)*.38)/1 Arial,sans-serif;color:#111;text-shadow:0 0 3px rgba(255,255,255,.8)} .gem-stone.gem-t1,.gem-stone.gem-t2{filter:saturate(.6) brightness(.85);border-radius:40%} .gem-stone.gem-t6,.gem-stone.gem-t7,.gem-stone.gem-t8{filter:drop-shadow(0 0 4px var(--gem-glow,#fff8))} .gem-stone.gem-t9,.gem-stone.gem-t10{filter:drop-shadow(0 0 7px #fff) saturate(1.2)} .gemcutter .gem-head{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between}.gemcutter .gem-head h1{margin:0;color:var(--gold)}.gemcutter .gem-head p{margin:0;flex:1 1 260px} .gem-tabs{display:flex;gap:.5rem;justify-content:center;margin:.75rem 0;border-bottom:1px solid #bfa16b36}.gem-tabs button{min-height:44px;min-width:96px} .gem-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem} .gem-panel{border:1px solid var(--line);border-radius:8px;padding:.75rem;background:rgba(0,0,0,.25);min-width:0}.gem-panel h3{margin:.1rem 0 .6rem} .gem-panel select{width:100%;min-height:44px} /* Phones cut the native select's text, so the full label of the chosen item is repeated under it (gem QA, 14 Oct). */ .gem-item-chosen{display:none} @media (max-width:640px){.gem-item-chosen{display:block;margin-top:6px;color:var(--muted,#c9b996);line-height:1.35}} .gem-item-head{display:flex;flex-direction:column;align-items:center;margin:.75rem 0 .25rem} .gem-sockets{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:.75rem 0} .gem-socket{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:118px;text-align:center} .gem-socket .gem-ring{width:52px;height:52px;border-radius:50%;border:4px solid #9a8a6a;background:radial-gradient(#000a,#0004)} .gem-socket.closed{opacity:.9}.gem-socket.closed>span{font-size:.8rem;color:var(--muted);border:2px dashed #6b5a3a;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;padding:4px} .gem-socket button{min-height:44px;width:100%;font-size:.8rem}.gem-socket small{font-size:.75rem;color:var(--muted)} .gem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem} .gem-cell{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-height:84px;padding:.4rem;border:2px solid #555;border-radius:8px;background:rgba(0,0,0,.3)} .gem-cell.selected{border-color:var(--gold);box-shadow:0 0 0 2px #dab36b55}.gem-cell span{font-size:.72rem}.gem-cell small{font-size:.7rem;color:var(--muted)} .gem-merge-row{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.75rem 0;font-size:1.4rem} .gem-odds{height:16px;border:1px solid #888;border-radius:8px;overflow:hidden;background:#222}.gem-odds i{display:block;height:100%;background:linear-gradient(90deg,#3a8f4a,#7fd36a)} .gem-odds-text{font-size:.85rem}.gem-boosters{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.5rem 0}.gem-boosters button{min-width:44px;min-height:44px} .gem-last.ok{color:#7fd36a}.gem-last.bad{color:#f08b7f} .gemcutter button.danger{border-color:#c0574b} /* Painted gems (public/assets/gems/): the stone over its tier's frame plate, and painted socket rings on the Gemcutter screen. */ .gem-stone.painted{background:none;box-shadow:none;clip-path:none;filter:none;border-radius:0;overflow:visible} .gem-stone.painted img{position:absolute;inset:2%;width:96%;height:96%;object-fit:contain;pointer-events:none;user-select:none} .gem-stone.painted .gem-plate{inset:0;width:100%;height:100%}.gem-stone.painted.framed .gem-art{inset:17%;width:66%;height:66%} .gem-socket .gem-ring{border:0;border-radius:0;background:url(/assets/gems/socket-open.webp) center/contain no-repeat} .gem-socket.closed>span{border:0;border-radius:0;background:url(/assets/gems/socket-closed.webp) center/contain no-repeat;color:#e7ddc6;text-shadow:0 1px 2px #000,0 0 4px #000} .gem-socket.filled>.gem-stone{background:url(/assets/gems/socket-setting.webp) center/contain no-repeat} .gem-socket.filled>.gem-stone .gem-plate{display:none}.gem-socket.filled>.gem-stone .gem-art{inset:24%;width:52%;height:52%} /* Painted header (as the Blacksmith and Enchanter), page tabs that look like the other section tabs, and gold main actions instead of the browser's plain grey. */ .gem-welcome .npc-greeting>button{align-self:flex-start;margin-top:.5rem} .gem-welcome .gem-quote{font-family:Georgia,serif;font-size:1.1rem;color:#e4d2b1;font-style:italic}.gem-welcome .gem-portrait{background-image:url('/assets/town/gemcutter-v1.webp');background-size:auto 96%;background-position:center bottom;background-color:#1d1a16}@media(max-width:480px){.gem-welcome .gem-portrait{background-size:auto 94%;background-position:center bottom}} .gemcutter .gem-tabs .section-tab{padding:9px 18px}.gemcutter .gem-tabs .section-tab:disabled{opacity:.55;cursor:default} .gemcutter button:not(.secondary):not(.section-tab):not(.gem-cell):not(.red-button):not(:disabled){background:linear-gradient(#bca16d,#957340);color:#10151e;border:1px solid #d9bd83;border-radius:5px;font-weight:600;min-height:44px;padding:9px 18px} .gemcutter button:not(.secondary):not(.section-tab):not(.gem-cell):not(.red-button):disabled{background:#26303a;color:#9aa3a6;border:1px solid #4f5a55;border-radius:5px;min-height:44px;padding:9px 18px} /* Gem hover card */ .gem-tip{display:flex;gap:12px;align-items:center}.gem-tip h4{margin:2px 0;font-family:Georgia,serif;font-size:1.1rem;color:#f0dfb5} .gem-tip-kind{margin:0;font-size:.8rem;color:#bca169;text-transform:uppercase;letter-spacing:.06em}.gem-tip-stat{margin:2px 0 0;color:#9fe0a0;font-weight:600} .gem-tip-note{margin:10px 0 0;font-size:.85rem;line-height:1.4;color:#c9c2b0} .gem-lines-head{margin:12px 0 4px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#bca169} .gem-cost-part{white-space:nowrap} .gem-socket small.gem-cost-missing{display:block;color:#e8a07a} /* /desktop-fit.css */ /* Desktop fit (player report, 10 Oct 2026): on 1080p and 1440p monitors the battle scene grew with the screen and pushed the action bar and enemies below the fold, the sidebar ran off the bottom, and chat floated over the game. Desktop sidebar layout only (min-width:1180px); phones and tablets are unchanged. */ @media(min-width:1001px){ /* Height already used above the battle: header strip plus the gap under it. The dismissible alpha notice adds its own height while it shows. */ .shell.mmo-shell{--fit-top:64px;--fit-heading:153px;--fit-controls:330px} .shell.mmo-shell:has(>.alpha-notice:not([hidden])){--fit-top:148px} /* The scene keeps a fixed budget from the viewport (never from its contents, so casts and status chips still can't resize it), leaving room for the controls. */ .shell.mmo-shell .combat-grid>.arena-column{ grid-template-rows:auto clamp(260px,calc(100vh - var(--fit-top) - var(--fit-heading) - var(--fit-controls)),1100px) auto; grid-template-rows:auto clamp(260px,calc(100svh - var(--fit-top) - var(--fit-heading) - var(--fit-controls)),1100px) auto} .shell.mmo-shell .combat-grid .battlefield{min-height:260px} .shell.mmo-shell .combat-grid>.party-rail{max-height:calc(100svh - var(--fit-top) - 12px);overflow-y:auto;overscroll-behavior:contain} /* When the window is too short for the whole menu, the menu scrolls but the account block (Chat, Bag, Settings) stays pinned to the bottom. */ .shell.mmo-shell.wayfarer-shell>.topbar>nav>.nav-account{position:sticky;bottom:-22px;z-index:2;margin-bottom:-22px;padding-bottom:22px;background:#0b1319} } /* Chat docks beside the game instead of covering it, when there is room for both. */ @media(min-width:1180px){ .shell.wayfarer-shell{--chat-dock:clamp(300px,22vw,420px)} .shell.wayfarer-shell:has(>.community-chat){padding-right:var(--chat-dock)} .shell.wayfarer-shell>.community-chat{inset:0 0 0 auto;width:var(--chat-dock);border-width:0 0 0 1px;border-radius:0;box-shadow:none} /* Notices sit outside the shell; keep them clear of the docked chat's input and Send. */ body:has(.shell.wayfarer-shell>.community-chat) .adventure-notices{right:calc(clamp(300px,22vw,420px) + 18px)} } /* Short desktop windows with a mouse: tighten the sidebar so Chat, Bag, Settings and Discord stay on screen. Touch screens keep the 44px targets and scroll. */ @media(min-width:1180px) and (max-height:1120px) and (pointer:fine){ .shell.mmo-shell.wayfarer-shell>.topbar>nav .nav-button{min-height:36px;padding-top:2px;padding-bottom:2px} .shell.mmo-shell.wayfarer-shell>.topbar>nav .nav-button>:is(.fantasy-icon,.icon,img){max-height:28px} .shell.mmo-shell .nav-account .sidebar-actions{gap:5px} .shell.mmo-shell .nav-account .sidebar-actions>button,.shell.mmo-shell .nav-account .sidebar-actions>a,.shell.mmo-shell .nav-account .sidebar-actions>.chat-access>button{min-height:36px;padding-top:6px;padding-bottom:6px} .shell.mmo-shell .nav-account .account-block>.icon-button,.shell.mmo-shell .nav-account .sidebar-character-portrait{width:38px;height:38px;min-width:38px;min-height:38px} } @media(min-width:1180px) and (max-height:900px) and (pointer:fine){ .shell.mmo-shell>.topbar>nav>.nav-brand .nav-brand-emblem{width:36px;height:36px} /* Patch notes, Settings and Discord share one row of icons. */ .shell.mmo-shell .nav-account .sidebar-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))} .shell.mmo-shell .nav-account .sidebar-actions>:is(.chat-access,.nav-inventory){grid-column:1/-1} .shell.mmo-shell .nav-account .sidebar-actions>:is([data-action="patch-notes"],[data-action="settings"],.nav-discord){justify-content:center;padding-left:0;padding-right:0;font-size:0;gap:0} .shell.mmo-shell .nav-account .sidebar-actions>:is([data-action="patch-notes"],[data-action="settings"],.nav-discord)>span:not(.change-log-symbol):not(.patch-new){display:none} } /* Character sheet: each attribute took three lines (name, Effect, buttons), so Review fell far below the fold. The buttons now sit on the Effect line. */ @media(min-width:1180px){ .attribute-panel .attribute-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:2px;align-items:center;padding:8px 0} .attribute-panel .attribute-row>div:first-child{display:contents} .attribute-panel .attribute-row>div:first-child>*:not(details):first-child{grid-column:1;grid-row:1} .attribute-panel .attribute-row>div:first-child>*:not(details):not(:first-child){grid-column:2;grid-row:1;justify-self:end} .attribute-panel .attribute-row>div:first-child>details{grid-column:1/-1;grid-row:2;align-self:start;min-height:44px;display:block} .attribute-panel .attribute-row>div:first-child>details>summary{display:inline-flex;align-items:center;min-height:44px} .attribute-panel .attribute-row>.attribute-controls{grid-column:2;grid-row:2;align-self:start;justify-self:end;margin:0} } /* QA 2026-10-16: at 390px a long Welcome back summary pushed the Continue button off screen. The footer now stays pinned. */ @media(max-width:550px){.return-dialog>footer{position:sticky;bottom:0;z-index:1}} /* /tutorial-tour.css */ /* Interactive tour (public/tutorial-tour.js). Above every dialog (the phone bag sits at 99999), below the studio splash. */ .tour-ring{position:fixed;z-index:2147482000;pointer-events:none;border:3px solid var(--uk-gold-hi,#f0ce83);border-radius:10px;box-shadow:0 0 0 2px rgba(10,16,20,.9),0 0 18px 4px rgba(240,206,131,.55);animation:tour-pulse 1.6s ease-in-out infinite;transition:left .18s,top .18s,width .18s,height .18s} .tour-ring.tour-ring-dim{box-shadow:0 0 0 2px rgba(10,16,20,.9),0 0 18px 4px rgba(240,206,131,.55),0 0 0 200vmax rgba(4,7,10,.5)} .tour-card{position:fixed;z-index:2147482001;box-sizing:border-box;width:360px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:16px 18px 14px;border:1px solid var(--uk-gold,#d6b575);border-radius:12px;background:linear-gradient(180deg,#1b2a33,#101a20);color:#eadfc8;box-shadow:0 12px 32px rgba(0,0,0,.6);font-size:15px;line-height:1.45} .tour-card.tour-dim{box-shadow:0 12px 32px rgba(0,0,0,.6),0 0 0 200vmax rgba(4,7,10,.5)} .tour-card[hidden],.tour-ring[hidden]{display:none} .tour-card h2{margin:0 0 6px;font-size:19px;color:var(--uk-gold-text,#ffe1aa);font-family:inherit} .tour-card p{margin:0 0 8px} .tour-card .tour-count{margin:0 0 2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#b9a77f} .tour-card .tour-via{font-weight:600;color:var(--uk-gold-hi,#f0ce83)} .tour-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px} .tour-actions button{min-height:44px;min-width:44px;padding:0 16px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer} .tour-primary{border:1px solid var(--uk-gold-hi,#f0ce83);background:linear-gradient(180deg,#d9b46a,#a9813f);color:#1a1206} .tour-secondary{border:1px solid var(--uk-gold-dim,#8f7645);background:#1a2830;color:#eadfc8} .tour-skip{margin-left:auto;border:0;background:none;color:#c7bba2;text-decoration:underline;padding:0 6px} .tour-actions button:focus-visible{outline:3px solid var(--uk-gold-hi,#f0ce83);outline-offset:2px} @keyframes tour-pulse{50%{border-color:#fff3d2}} @media (prefers-reduced-motion:reduce){.tour-ring{animation:none;transition:none}} @media (max-width:540px){.tour-card{font-size:14px;padding:14px}.tour-card h2{font-size:17px}} /* /chat-refresh.css */ /* Chat refresh (October 2026). Loaded after every older chat sheet and before ui-kit.css. One readable log: a fixed time column with wrapped lines hanging under the message, a colour per channel, day lines, mentions marked in gold, and a one-line composer that grows. */ .shell.wayfarer-shell .community-chat{ --chat-accent:#e0c27f;--chat-bg:#0e171d;--chat-band:#132029;--chat-line:#ffffff10;--chat-muted:#8e9ea6;--chat-text:#dde4e4; background:var(--chat-bg);border-color:#6f6248; } .shell.wayfarer-shell .community-chat:has(#chat-tab-party[aria-selected=true]){--chat-accent:#86b8f5} .shell.wayfarer-shell .community-chat:has(#chat-tab-guild[aria-selected=true]){--chat-accent:#83d39c} .shell.wayfarer-shell .community-chat:has(#chat-tab-whisper[aria-selected=true]){--chat-accent:#e7a2dc} .shell.wayfarer-shell .community-chat:has(#chat-tab-recruitment[aria-selected=true]){--chat-accent:#f0aa6c} .shell.wayfarer-shell .community-chat:has(#chat-tab-announcements[aria-selected=true]){--chat-accent:#f2d07c} /* Header: one compact band. */ .shell.wayfarer-shell .community-chat .chat-heading{padding:8px 10px 8px 14px;background:linear-gradient(120deg,#22343c,#15222a);border-bottom:1px solid #3c4a50} .shell.wayfarer-shell .community-chat .chat-heading h2{display:flex;align-items:baseline;gap:10px;font:500 1.15rem/1.2 Georgia,serif;color:#ffe3b4;margin:0} .shell.wayfarer-shell .community-chat .chat-heading h2 small{display:inline;margin:0;color:#9fcfb4;font:500 .6875rem system-ui;letter-spacing:.02em} .shell.wayfarer-shell .community-chat .chat-heading>button{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;font-size:1rem} /* Channel tabs: all six share one row at every width; the selected one carries the channel colour. */ .shell.wayfarer-shell .community-chat .chat-channels{display:flex;flex-wrap:nowrap;overflow:visible;gap:2px;padding:4px 6px 0;background:var(--chat-band);border-bottom:1px solid #2c3a42} .shell.wayfarer-shell .community-chat .chat-channels>button[role=tab]{flex:1 1 auto;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;gap:3px;padding:6px 5px;border:0;border-radius:6px 6px 0 0;background:transparent;box-shadow:none;color:#a8b6bd;font:600 .75rem/1.2 system-ui;white-space:nowrap} @media(hover:hover){.shell.wayfarer-shell .community-chat .chat-channels>button[role=tab]:hover{background:#ffffff0a;color:#eef0e8}} .shell.wayfarer-shell .community-chat .chat-channels>button[role=tab][aria-selected=true]{background:#ffffff0d;color:var(--chat-accent);box-shadow:inset 0 -3px 0 var(--chat-accent)} .shell.wayfarer-shell .community-chat .chat-channels>button[role=tab] [data-chat-count]{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#d8574f;color:#fff;font:700 .5625rem/16px system-ui;text-align:center;margin:0} .shell.wayfarer-shell .community-chat .chat-channels>button[role=tab] [data-chat-count][hidden]{display:none} /* The placeholder names the audience, so the separate destination line is for screen readers only. */ .shell.wayfarer-shell .community-chat .chat-destination{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0} .shell.wayfarer-shell .community-chat .chat-conversation{position:relative} /* Message log. */ .shell.wayfarer-shell .community-chat .chat-messages{padding:6px 6px 10px} .shell.wayfarer-shell .community-chat .chat-message,.shell.wayfarer-shell .community-chat .chat-message.own{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:6px;align-items:start;margin:0;padding:3px 8px 3px 4px;border:0;border-radius:4px;background:none;font:.8125rem/1.45 system-ui;overflow-wrap:anywhere} .shell.wayfarer-shell .community-chat .chat-message:nth-child(even){background:none} @media(hover:hover){.shell.wayfarer-shell .community-chat .chat-message:hover{background:#ffffff07}} .shell.wayfarer-shell .community-chat .chat-message>time{position:static;grid-column:1;justify-self:end;align-self:start;color:var(--chat-muted);font:.625rem/1.178rem system-ui;font-variant-numeric:tabular-nums;white-space:nowrap;margin:0} .shell.wayfarer-shell .community-chat .chat-message>div{grid-column:2;display:block;min-width:0;width:auto;padding:0;margin:0;border:0;border-radius:0;background:none} .shell.wayfarer-shell .community-chat .chat-message .chat-name,.shell.wayfarer-shell .community-chat .chat-message .chat-author{position:relative;display:inline;min-height:0;max-width:none;padding:0;margin:0 6px 0 0;border:0;background:none;box-shadow:none;color:var(--chat-accent);font:700 .8125rem/1.45 system-ui;vertical-align:baseline;cursor:pointer} .shell.wayfarer-shell .community-chat .chat-message .chat-author{cursor:default} .shell.wayfarer-shell .community-chat .chat-message .chat-name:hover{text-decoration:underline;text-underline-offset:3px} .shell.wayfarer-shell .community-chat .chat-message .chat-name::after{content:":";color:var(--chat-muted);font-weight:400} .shell.wayfarer-shell .community-chat .chat-message .chat-author::after{content:":";color:var(--chat-muted);font-weight:400} /* Touch screens: the name keeps a full 44px tap area without spacing the lines apart. */ @media(pointer:coarse){.shell.wayfarer-shell .community-chat .chat-message .chat-name::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}} .shell.wayfarer-shell .community-chat .chat-message p{display:inline;margin:0;color:var(--chat-text);font:.8125rem/1.45 system-ui;white-space:pre-wrap} .shell.wayfarer-shell .community-chat .chat-message.own .chat-author{color:#8fd6c8} .shell.wayfarer-shell .community-chat .chat-message.own{background:#8fd6c808} .shell.wayfarer-shell .community-chat .chat-message.mention{background:#e0c27f17;box-shadow:inset 3px 0 #e0c27f} .shell.wayfarer-shell .community-chat .chat-message.system{margin:4px 0;background:#f2d07c0b;box-shadow:inset 3px 0 #f2d07c66} .shell.wayfarer-shell .community-chat .chat-message.system .chat-author{color:#f2d07c} .shell.wayfarer-shell .community-chat .chat-message.system p{color:#d8d2bf} .shell.wayfarer-shell .community-chat .chat-message.unique-drop{background:#ff747412;box-shadow:inset 3px 0 #ff7474} .shell.wayfarer-shell .community-chat .chat-message.unique-drop>div>p,.shell.wayfarer-shell .community-chat .chat-message.unique-drop>div>p strong{color:#ff8a8a} .shell.wayfarer-shell .community-chat .chat-message.tier0-drop{box-shadow:inset 3px 0 #f0ce83} .shell.wayfarer-shell .community-chat .chat-message.tier0-drop>div>p{color:#f0ce83} .shell.wayfarer-shell .community-chat .chat-message.legendary-forged{background:#ff8c2a14;box-shadow:inset 3px 0 #ffb85a} .shell.wayfarer-shell .community-chat .chat-message.legendary-forged>div>p{color:#ffb85a} .shell.wayfarer-shell .community-chat .chat-dev-badge{margin:0 .35em 0 .25em} /* A day line wherever the date changes. */ .shell.wayfarer-shell .community-chat .chat-day{display:flex;align-items:center;gap:10px;margin:8px 4px 4px;color:var(--chat-muted);font:600 .625rem/1 system-ui;letter-spacing:.08em;text-transform:uppercase} .shell.wayfarer-shell .community-chat .chat-day::before,.shell.wayfarer-shell .community-chat .chat-day::after{content:"";flex:1;height:1px;background:var(--chat-line)} /* Linked items sit inline and open as a small card. */ .shell.wayfarer-shell .community-chat .chat-item>summary{min-height:0;padding:0} .shell.wayfarer-shell .community-chat .chat-item[open]{border-radius:6px} /* The opened card's icon and lines stack as blocks; the chat's inline paragraph rule must not flow them around the icon. */ .shell.wayfarer-shell .community-chat .chat-item>div>.gear-icon{display:block;margin:2px 0 6px} .shell.wayfarer-shell .community-chat .chat-item>div>p{display:block;margin:0 0 6px} .shell.wayfarer-shell .community-chat .chat-message.unique-drop .chat-item>div>p,.shell.wayfarer-shell .community-chat .chat-message.unique-drop .chat-item>div>p strong{color:var(--chat-text);font-weight:400} /* Empty state. */ .shell.wayfarer-shell .community-chat .chat-empty{gap:8px;padding:24px 16px} .shell.wayfarer-shell .community-chat .chat-empty>span{color:var(--chat-accent)} .shell.wayfarer-shell .community-chat .chat-empty>strong{font-size:1.2rem} /* Jump to latest floats over the bottom of the log instead of taking a row. */ .shell.wayfarer-shell .community-chat .chat-jump{position:relative;z-index:2;align-self:center;min-height:36px;margin:-44px auto 8px;padding:6px 14px;border-radius:18px;border:1px solid var(--chat-accent);background:#16252ef2;color:var(--chat-accent);font:600 .75rem system-ui;box-shadow:0 4px 14px #0008} .shell.wayfarer-shell .community-chat .chat-jump[hidden]{display:none} /* Whisper picker: name box and recent conversations with their unread counts. */ .shell.wayfarer-shell .community-chat .whisper-route{display:flex;gap:6px;padding:8px 10px;margin:0;border-bottom:1px solid var(--chat-line)} .shell.wayfarer-shell .community-chat .whisper-route input{flex:1;min-width:0;min-height:44px;padding:8px 10px;border-radius:8px;font-size:1rem} .shell.wayfarer-shell .community-chat .chat-recent{order:-1;display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 0} .shell.wayfarer-shell .community-chat .chat-recent>button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:18px;border:1px solid #4a5a62;background:#1b2a33;color:#e2d6ee;font:600 .75rem system-ui} .shell.wayfarer-shell .community-chat .chat-recent>button[aria-pressed=true]{border-color:var(--chat-accent);background:#e7a2dc1c;color:var(--chat-accent)} .shell.wayfarer-shell .community-chat .chat-recent-unread{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d8574f;color:#fff;font:700 .625rem/18px system-ui;text-align:center} @media(pointer:coarse){.shell.wayfarer-shell .community-chat .chat-recent>button{min-height:44px}} /* Composer: Item, a one-line message box that grows, and Send on one row. */ .shell.wayfarer-shell .community-chat #chatForm{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:4px 6px;padding:8px 8px 6px;background:var(--chat-band);border-top:1px solid #2f3e46;max-height:60%;overflow:auto} .shell.wayfarer-shell .community-chat #chatForm>label.sr-only{position:absolute} .shell.wayfarer-shell .community-chat #chatForm .chat-command-suggestion{grid-column:1/-1;grid-row:1;margin:0} .shell.wayfarer-shell .community-chat #chatForm textarea{grid-column:2;grid-row:2;display:block;width:100%;height:44px;min-height:44px;max-height:128px;margin:0;padding:11px 12px;border:1px solid #4d5d64;border-radius:10px;background:#0a1419;color:#eef2ee;font:400 .9375rem/1.4 system-ui;resize:none;overflow-y:auto} .shell.wayfarer-shell .community-chat #chatForm textarea:focus{border-color:var(--chat-accent);outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--chat-accent) 35%,transparent)} .shell.wayfarer-shell .community-chat .chat-compose-actions{display:contents} .shell.wayfarer-shell .community-chat .chat-compose-actions>button{min-height:44px;border-radius:10px;font:600 .75rem system-ui;white-space:nowrap} .shell.wayfarer-shell .community-chat [data-chat-attach]{grid-column:1;grid-row:2;padding:0 10px;background:transparent;border:1px solid #4d5d64;box-shadow:none;color:#c9d2d6} .shell.wayfarer-shell .community-chat [data-chat-attach][aria-expanded=true]{border-color:var(--chat-accent);color:var(--chat-accent)} .shell.wayfarer-shell .community-chat .chat-compose-actions [type=submit]{grid-column:3;grid-row:2;min-width:64px;padding:0 14px;background:var(--chat-accent);border:1px solid var(--chat-accent);color:#1d1810} .shell.wayfarer-shell .community-chat .chat-compose-actions [type=submit]:disabled{background:transparent;border-color:#4d5d64;color:#7e8d94;opacity:1} .shell.wayfarer-shell .community-chat #chatCounter{grid-column:3;grid-row:4;justify-self:end;color:var(--chat-muted);font:.6875rem system-ui} .shell.wayfarer-shell .community-chat #chatCounter[hidden]{display:none} .shell.wayfarer-shell .community-chat .chat-attachment{grid-column:1/-1;grid-row:3;display:flex;flex-direction:column;gap:4px;margin:2px 0 0;font-size:.75rem;color:#b9c6cc} .shell.wayfarer-shell .community-chat .chat-attachment[hidden]{display:none} .shell.wayfarer-shell .community-chat .chat-input-help{grid-column:1/3;grid-row:4;margin:0;color:var(--chat-muted);font:.6875rem system-ui} .shell.wayfarer-shell .community-chat #chatError{grid-column:1/-1;grid-row:5;margin:0;font-size:.75rem;color:#e7c98b} .shell.wayfarer-shell .community-chat #chatError:empty{display:none} @media(pointer:coarse){.shell.wayfarer-shell .community-chat .chat-input-help{display:none}} .shell.wayfarer-shell .community-chat .chat-readonly{padding:8px 12px;background:var(--chat-band)} /* Options fold away under the composer. */ .shell.wayfarer-shell .community-chat .chat-privacy{padding:0 12px;background:#0b141a;border-top:1px solid #26333a;font-size:.75rem} .shell.wayfarer-shell .community-chat .chat-privacy summary{min-height:36px;display:flex;align-items:center;color:#9fb0b7} @media(pointer:coarse){.shell.wayfarer-shell .community-chat .chat-privacy summary{min-height:44px}} @media(max-width:360px){.shell.wayfarer-shell .community-chat .chat-channels>button[role=tab]{font-size:.6875rem}.shell.wayfarer-shell .community-chat .chat-message,.shell.wayfarer-shell .community-chat .chat-message.own{grid-template-columns:44px minmax(0,1fr)}} /* A long audience line ("Whisper to Phoneshaman…") stays on the box's one line and ends in an ellipsis. */ .shell.wayfarer-shell .community-chat #chatForm textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* /combat-hud.css */ /* Combat HUD polish (12 Oct 2026). Presentation only: party frames, battlefield plates, enemy cards and the combat meter. Loaded last so it can refine the older layers without editing them. No layout here changes size while a fight runs, so the battle screen does not jump as health, casts or deaths change. */ .mmo-shell .combat-grid{--hud-tank:#6d9be0;--hud-healer:#6cc893;--hud-dps:#df7a5c;--hud-hp-a:#6fd36f;--hud-hp-b:#2f8d3f;--hud-low-a:#ff7656;--hud-low-b:#b42a1c;--hud-track:#081015} /* Party frames: a role stripe, a taller green health bar that turns red under 35%, and coloured resource bars. */ .mmo-shell .combat-grid .compact-party-card{border-radius:6px;border-left-width:4px;background:linear-gradient(160deg,#1d2a30,#11191e 70%);box-shadow:0 2px 8px #0008,inset 0 1px #ffffff0d} .mmo-shell .combat-grid .compact-party-card.role-tank{border-left-color:var(--hud-tank)} .mmo-shell .combat-grid .compact-party-card.role-healer{border-left-color:var(--hud-healer)} .mmo-shell .combat-grid .compact-party-card.role-dps{border-left-color:var(--hud-dps)} .mmo-shell .combat-grid .compact-party-card .raid-frame-title small{letter-spacing:.02em} .mmo-shell .combat-grid .compact-party-card .hud-bar{height:18px;min-height:18px;margin:5px 0 3px;border:1px solid #000b;border-radius:4px;background:var(--hud-track);box-shadow:inset 0 1px 3px #000d,0 0 0 1px #ffffff10} .mmo-shell .combat-grid .compact-party-card .hud-bar>i{border-radius:3px 0 0 3px} .mmo-shell .combat-grid .compact-party-card .hud-bar.health>i{background:linear-gradient(#8ae889,var(--hud-hp-a) 35%,var(--hud-hp-b));box-shadow:inset 0 1px #ffffff55} .mmo-shell .combat-grid .compact-party-card .hud-bar em{font:600 11px/18px system-ui;letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000} .mmo-shell .combat-grid .compact-party-card .hud-bar.resource{height:13px;min-height:13px;margin:0 0 4px} .mmo-shell .combat-grid .compact-party-card .hud-bar.resource em{font:600 9.5px/13px system-ui} .mmo-shell .combat-grid .compact-party-card .hud-bar.resource>i{background:linear-gradient(#6ab7ff,#2463d6)} .mmo-shell .combat-grid .compact-party-card .hud-bar.resource[title=Rage]>i{background:linear-gradient(#f0775e,#a8291c)} .mmo-shell .combat-grid .compact-party-card .hud-bar.resource:is([title=Focus],[title=Energy])>i{background:linear-gradient(#f6d76a,#c08b1c)} .mmo-shell .combat-grid .compact-party-card:not(.fallen):has(.hud-bar.health>i.low){box-shadow:0 2px 8px #0008,inset 0 0 0 1px #ff5a3c88,inset 0 0 14px #ff3b2033} .mmo-shell .combat-grid .compact-party-card .hud-bar.health>i.low{background:linear-gradient(#ff9b80,var(--hud-low-a) 35%,var(--hud-low-b))} .mmo-shell .combat-grid .compact-party-card.fallen{opacity:.6} .mmo-shell .combat-grid .compact-party-card.fallen .party-status-portrait{filter:grayscale(1)} /* Battlefield plates. Ordinary enemies keep their slim bar (it had shrunk to a 6px square), and party members now carry the same slim bar over their heads so you can see who is hurt without looking away from the fight. */ .dungeon-battlefield .enemy-unit:not(.rare-unit):not(.boss-unit):not(.focus-target) .unit-hp, .dungeon-battlefield .hero-unit .unit-hp{height:5px;margin:0;border:1px solid #000c;border-radius:2px;box-shadow:0 1px 2px #000,0 0 0 1px #ffffff1a} .dungeon-battlefield .hero-unit .unit-name{display:block;width:44px!important;left:-22px!important} .dungeon-battlefield .hero-unit .unit-name>:not(.unit-hp){display:none} .dungeon-battlefield .hero-unit .unit-hp>i{background:linear-gradient(#8ae889,#2f8d3f)} /* Enemy cards: health reads inside a thicker bar, elites stand out, the focus target glows. */ .mmo-shell .combat-grid .enemy-card{border-radius:6px;background:linear-gradient(160deg,#1e2a2f,#121b20 70%);box-shadow:0 2px 6px #0007} .mmo-shell .combat-grid .enemy-card.focused{border-color:#f2c86e;box-shadow:0 0 0 1px #f2c86e,0 0 12px #f2c86e55} .mmo-shell .combat-grid .enemy-card.fallen{opacity:.5} .mmo-shell .combat-grid .enemy-identity>span{display:grid;grid-template-columns:minmax(0,1fr);align-content:center} .mmo-shell .combat-grid .enemy-identity [data-enemy-health]{grid-row:4;grid-column:1;z-index:1;margin:2px 0 0;text-align:center;font:600 10px/14px system-ui;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000} .mmo-shell .combat-grid .enemy-identity .enemy-health{grid-row:4;grid-column:1;height:14px;margin-top:2px;border:1px solid #000b;border-radius:3px;background:#1d0d0b;box-shadow:inset 0 1px 3px #000d,0 0 0 1px #ffffff10} .mmo-shell .combat-grid .enemy-health i{background:linear-gradient(#ff8a68,#d24a33 40%,#8f2216)} /* Defeated enemies move after the living ones, so on a phone the enemy still fighting is the first card you see. */ .mmo-shell .combat-grid .enemy-card.fallen{order:1} .mmo-shell .combat-grid .enemy-card.fallen :is(.enemy-health,[data-enemy-health]){visibility:hidden} /* A waiting enemy's cast line stays in place but reads quietly; its effects get one fixed row that scrolls. */ .mmo-shell .combat-grid .enemy-card .portrait-cast:not(.casting){border-color:#ffffff14;background:#0000002e;color:#9fb0b2} /* Effects wrap onto up to three rows, then scroll, so two-line chips like "Doom ×3 / Until guards fall" and chips at a phone card's right edge are never cut off. */ .mmo-shell .combat-grid .enemy-card .portrait-effects{flex-wrap:wrap;align-items:flex-start;height:auto;min-height:30px;max-height:79px;margin-top:4px;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:auto;scrollbar-width:thin} .mmo-shell .combat-grid .enemy-card .portrait-effect{flex-shrink:0;max-width:100%} /* Combat meter: one bar per person, filled in their class colour, with the numbers on the bar. The whole row opens the breakdown, so each row is still a full-size touch target. */ .mmo-shell .combat-grid .damage-meter header{align-items:baseline} .mmo-shell .combat-grid .damage-meter header h3{font-size:1rem;margin:0} .mmo-shell .combat-grid .damage-meter header>strong{font-size:.9375rem} /* Tabs fill the row in equal columns of at least 72px, so Damage, Healing, Threat and Reset never cut off: two by two in a narrow party rail, one row where there is room. */ .mmo-shell .combat-grid .damage-meter .meter-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:4px;margin:10px 0 8px} .mmo-shell .combat-grid .damage-meter .meter-tabs button{min-width:0;padding:0 4px;border-radius:4px;font-size:.8125rem;white-space:nowrap} .mmo-shell .combat-grid .damage-meter .meter-tabs [data-meter-reset]{background:transparent;color:#c9b88f} .mmo-shell .combat-grid [data-meter-rows] .meter-row{position:relative;align-items:center;gap:6px;min-height:44px;box-sizing:border-box;margin:3px 0;padding:4px 8px 4px 6px;border-radius:4px;background:#0a151b;box-shadow:inset 0 0 0 1px #ffffff0d;overflow:hidden} .mmo-shell .combat-grid [data-meter-rows] .meter-track{position:absolute;inset:0;height:auto;margin:0;border-radius:4px;background:transparent} .mmo-shell .combat-grid [data-meter-rows] .meter-track i{border-radius:0;background:linear-gradient(90deg,color-mix(in srgb,var(--meter-color) 18%,transparent),color-mix(in srgb,var(--meter-color) 48%,transparent))} .mmo-shell .combat-grid [data-meter-rows] .meter-person{position:static} .mmo-shell .combat-grid [data-meter-rows] :is(.meter-rank,.meter-person>div:first-child,.meter-totals){position:relative;z-index:1} .mmo-shell .combat-grid [data-meter-rows] .meter-rank{min-width:1ch;padding:0;font:600 .6875rem system-ui;color:#c9d2d2;text-shadow:0 1px 2px #000} .mmo-shell .combat-grid [data-meter-rows] .meter-person>div:first-child{align-items:baseline} .mmo-shell .combat-grid [data-meter-rows] .meter-name{min-height:0;padding:0;font:700 .8125rem/1.3 system-ui;text-decoration:none;color:var(--meter-color);text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mmo-shell .combat-grid [data-meter-rows] .meter-name::after{content:'';position:absolute;inset:-4px -8px -4px -30px} .mmo-shell .combat-grid [data-meter-rows] .meter-name:focus-visible{outline:none} .mmo-shell .combat-grid [data-meter-rows] .meter-row:has(.meter-name:focus-visible){outline:2px solid #f2c86e;outline-offset:1px} .mmo-shell .combat-grid [data-meter-rows] .meter-row:has(.meter-name:hover){box-shadow:inset 0 0 0 1px #ffffff33} .mmo-shell .combat-grid [data-meter-rows] .meter-person b{font-size:.8125rem;color:#fff;text-shadow:0 1px 2px #000} .mmo-shell .combat-grid [data-meter-rows] .meter-totals{color:#d0d8d8;text-shadow:0 1px 2px #000;margin-top:1px} .mmo-shell .combat-grid .damage-meter .meter-note{margin-top:8px} /* Dungeon floors and boss arenas narrower than the stage (Prison Cellar, Tautra, world bosses) leave empty space beside the painting. Fill that space with a dim, blurred copy of the same painting so the arena never sits in dark strips. */ .mmo-shell .battlefield.dungeon-battlefield::before{content:'';position:absolute;inset:-40px;z-index:-1;pointer-events:none;background:var(--arena-backdrop,none) center/cover no-repeat;filter:blur(14px) brightness(.8) saturate(.85)} .mmo-shell .battlefield.dungeon-battlefield .arena-background{box-shadow:0 0 28px 10px #05080a99} /* A fallen member's ability slots stay greyed; the card already shows the revive timer, so no placeholder dash. */ .path-portrait-skill[data-skill-state=defeated] small{visibility:hidden} /* Landscape phones (about 390px tall): the top bar took three rows and pushed the battlefield below the fold. Put the page buttons and the account buttons on one row, and tighten the battle heading. */ @media (orientation:landscape) and (max-height:500px){ /* The nav is a five-track grid everywhere else; with the More menu and the account block it has six children, so one row needs a flex row. */ .shell.mmo-shell>.topbar>nav{display:flex!important;flex-wrap:nowrap;align-items:center;gap:4px;padding-top:4px;padding-bottom:4px} .shell.mmo-shell>.topbar>nav>.nav-button{flex:1 1 0;min-width:0;min-height:44px} .shell.mmo-shell>.topbar>nav>.nav-more{flex:0 0 auto} .shell.mmo-shell>.topbar>nav>.nav-account,.shell.mmo-shell.wayfarer-shell>.topbar>nav>.nav-account{flex:0 0 auto;width:auto;margin-left:auto;grid-column:auto} .shell.mmo-shell>.topbar>nav>.nav-account .account-block{flex:0 0 auto;width:max-content} /* The battle heading keeps the zone name, mode, rates and the hero bar; the boss modifier line and the points banner wait for portrait (the Hero badge still counts the points). */ .mmo-shell .combat-grid .arena-heading{padding-top:4px;padding-bottom:4px} .mmo-shell .combat-grid .arena-heading .zone-badge .challenge-threat-summary{display:none} .mmo-shell .combat-grid .arena-heading>.battle-goals{display:none} } /* Phones: the round minimap sat over boss nameplates near the top of the field. Plates sit above heads, so dock it bottom right. */ @media(max-width:600px){.shell.mmo-shell .battlefield .battle-minimap{top:auto;bottom:8px}.mmo-shell .combat-grid .enemy-card .portrait-effects{max-height:72px}} /* Unique Find callout (lib/unique-find.js decided): a Unique that only dropped because of the find bonus says so on its flight. */ .loot-flight.by-unique-find::after{content:'Unique Find';position:absolute;left:50%;top:-20px;transform:translateX(-50%);white-space:nowrap;padding:1px 6px;border-radius:3px;background:#2a1d08e6;border:1px solid #e0b25a;color:#ffd98a;font:600 11px/16px var(--ui,Arial,sans-serif);letter-spacing:.3px} /* /raid-finder.css */ /* Raid Finder: floating eye and pop-up. Kit colours only. */ .rf{position:fixed;right:14px;bottom:20px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:calc(100vw - 28px)} .rf[hidden]{display:none} @media (max-width:820px){.rf{bottom:calc(84px + env(safe-area-inset-bottom,0px))}} .rf-eye{position:relative;width:52px;height:52px;min-width:44px;min-height:44px;border-radius:50%;border:2px solid var(--uk-gold-dim);background:var(--uk-navy-0);color:var(--uk-gold);display:grid;place-items:center;padding:0;cursor:pointer} .rf-eye svg{width:28px;height:28px} .rf-eye.is-lit,.rf-eye.is-in{border-color:var(--uk-gold);color:var(--uk-gold-hi)} .rf-eye.is-lit{animation:rf-pulse 2.4s ease-in-out infinite} @keyframes rf-pulse{0%,100%{opacity:1}50%{opacity:.72}} @media (prefers-reduced-motion:reduce){.rf-eye.is-lit{animation:none}} .rf-eye:focus-visible,.rf-btn:focus-visible,.rf-x:focus-visible,.rf-toast:focus-visible{outline:2px solid var(--uk-focus);outline-offset:2px} .rf-badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--uk-gold);color:var(--uk-navy-0);font:700 12px/22px var(--uk-sans);text-align:center} .rf-toast{display:flex;flex-direction:column;gap:2px;text-align:left;max-width:280px;padding:10px 14px;border:1px solid var(--uk-gold-dim);border-radius:var(--uk-radius);background:var(--uk-navy-0);color:var(--uk-ivory);font:14px/1.3 var(--uk-sans);cursor:pointer;min-height:44px} .rf-toast strong{color:var(--uk-gold-text);font-family:var(--uk-serif)} .rf-toast span{color:var(--uk-ivory-dim);font-size:13px} .rf-pop{width:min(340px,calc(100vw - 28px));max-height:min(70vh,520px);display:flex;flex-direction:column;border:1px solid var(--uk-gold-dim);border-radius:var(--uk-radius);background:var(--uk-navy-0);color:var(--uk-ivory);font:14px/1.35 var(--uk-sans)} .rf-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 14px;border-bottom:1px solid var(--uk-gold-dim)} .rf-bar h2{margin:0;font:600 17px var(--uk-serif);color:var(--uk-gold-text)} .rf-x{width:44px;height:44px;border:0;background:none;color:var(--uk-ivory);font-size:24px;cursor:pointer} .rf-body{overflow-y:auto;padding:10px 14px 14px;display:flex;flex-direction:column;gap:10px} .rf-queues,.rf-members{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .rf-queue{padding:8px 0;border-bottom:1px solid var(--uk-locked);display:flex;flex-direction:column;gap:6px} .rf-queue.is-invited .rf-qtop strong{color:var(--uk-gold-hi)} .rf-qtop,.rf-head2,.rf-qmid{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .rf-count{color:var(--uk-gold-text);font-weight:700} .rf-meta,.rf-note{color:var(--uk-ivory-dim);font-size:13px;margin:0} .rf-warn{color:var(--uk-danger-text)} .rf-pips{display:flex;gap:8px} .rf-pip{display:inline-flex;align-items:center;gap:3px;font-size:13px} .rf-pip svg{width:16px;height:16px} .rf-pip.is-full{color:var(--uk-done)}.rf-pip.is-open{color:var(--uk-gold-text)} .rf-pip i{font-style:normal;opacity:.85} .rf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .rf-row{display:flex;flex-wrap:wrap;gap:8px} .rf-btn{min-height:44px;flex:1 1 auto} .rf-btn.is-off{opacity:.5;cursor:not-allowed} .rf-member{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rf-member .rf-kick{flex:0 0 auto;min-height:44px} .rf-member em{font-style:normal;color:var(--uk-gold-text);font-size:12px} .rf-name{font-weight:600} .rf-dot{width:8px;height:8px;border-radius:50%;background:var(--uk-locked)}.rf-dot.is-on{background:var(--uk-done)} .rf-invite{display:flex;gap:8px}.rf-invite input{flex:1 1 120px;min-height:44px;min-width:0} .rf-open{display:flex;flex-direction:column;gap:6px} .rf-queues{gap:0;border:1px solid var(--uk-locked);border-radius:var(--uk-radius)} .rf-queues li+li{border-top:1px solid var(--uk-locked)} .rf-row-q{width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;font:inherit} .rf-row-q.is-sel{background:var(--uk-locked-bg);outline:1px solid var(--uk-gold)} .rf-row-q:focus-visible{outline:2px solid var(--uk-focus);outline-offset:-2px} .rf-qtext{display:flex;flex-direction:column;min-width:0} .rf-qtext strong{color:var(--uk-gold-text);font:600 15px var(--uk-serif);overflow-wrap:anywhere} .rf-qtext small{color:var(--uk-ivory-dim);font-size:12px} .rf-slots{display:flex;flex-wrap:wrap;gap:2px;justify-content:flex-end;max-width:116px} .rf-slot{width:20px;height:20px;border-radius:50%;border:1px solid var(--uk-gold-dim);display:grid;place-items:center;color:var(--uk-gold-text)} .rf-slot svg{width:12px;height:12px} .rf-slot.is-empty{border-color:var(--uk-locked);background:none} .rf-empty{margin:0;padding:18px 0;text-align:center;color:var(--uk-ivory-dim)} .rf-foot{display:flex;flex-direction:column;gap:8px} .rf-tools{display:flex}.rf-refresh{font-size:20px} /* Polish: painted gold frame, glowing eye, framed buttons */ .rf-eye{width:56px;height:56px;border:2px solid var(--uk-gold);background:radial-gradient(circle at 50% 40%,#24344d,#0b111d 72%);box-shadow:0 0 0 3px #0b111d,0 0 0 4px var(--uk-gold-dim),0 6px 16px rgba(0,0,0,.6)} .rf-eye.is-lit{box-shadow:0 0 0 3px #0b111d,0 0 0 4px var(--uk-gold),0 0 18px rgba(240,200,110,.55),0 6px 16px rgba(0,0,0,.6);animation:rf-glow 2.4s ease-in-out infinite} @keyframes rf-glow{0%,100%{box-shadow:0 0 0 3px #0b111d,0 0 0 4px var(--uk-gold),0 0 10px rgba(240,200,110,.35),0 6px 16px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 3px #0b111d,0 0 0 4px var(--uk-gold),0 0 24px rgba(240,200,110,.8),0 6px 16px rgba(0,0,0,.6)}} @media (prefers-reduced-motion:reduce){.rf-eye.is-lit{animation:none}} .rf-badge{border:2px solid #0b111d;box-shadow:0 0 0 1px var(--uk-gold-dim)} .rf-pop,.rf-toast{background:linear-gradient(180deg,#16213a,#0b111d);border:2px solid var(--uk-gold-dim);box-shadow:inset 0 0 0 1px #0b111d,inset 0 0 0 2px rgba(200,160,80,.35),0 12px 28px rgba(0,0,0,.65)} .rf-toast{border-color:var(--uk-gold);animation:rf-in .35s ease-out} @keyframes rf-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){.rf-toast{animation:none}} .rf-bar{background:linear-gradient(180deg,rgba(200,160,80,.18),rgba(200,160,80,0));border-bottom:1px solid var(--uk-gold-dim)} .rf-bar h2{letter-spacing:.04em;text-transform:uppercase;font-size:15px} .rf-x{color:var(--uk-gold-text)} .rf-queues{border:1px solid var(--uk-gold-dim);background:rgba(5,9,16,.55)} .rf-queues li+li{border-top:1px solid rgba(200,160,80,.25)} .rf-row-q.is-sel{background:linear-gradient(90deg,rgba(200,160,80,.28),rgba(200,160,80,.06));outline:1px solid var(--uk-gold)} .rf-slots{max-width:104px;gap:3px} .rf-slot{width:18px;height:18px;border:1px solid var(--uk-gold);background:rgba(200,160,80,.14)} .rf-slot.is-Tank{color:#8fb7e8;border-color:#8fb7e8;background:rgba(110,160,220,.16)} .rf-slot.is-Healer{color:#7fd29a;border-color:#7fd29a;background:rgba(90,190,130,.16)} .rf-slot.is-DPS{color:#e58a7c;border-color:#e58a7c;background:rgba(220,110,95,.16)} .rf-slot.is-empty{border:1px dashed rgba(154,163,176,.55);background:none} .rf .rf-btn{border:1px solid var(--uk-gold-dim);background:linear-gradient(180deg,#22304a,#121b2d);color:var(--uk-ivory);font:600 14px var(--uk-sans);border-radius:var(--uk-radius)} .rf .rf-btn.is-primary{border-color:var(--uk-gold);background:linear-gradient(180deg,#e2bb6a,#a97d32);color:#1a1206} .rf .rf-btn.is-danger{border-color:var(--uk-danger-text);color:var(--uk-danger-text)} .rf .rf-btn.is-on{border-color:var(--uk-done);color:var(--uk-done)} .rf .rf-btn.is-off{opacity:.45;filter:grayscale(.6)} .rf-invite input{background:#0b111d;border:1px solid var(--uk-gold-dim);color:var(--uk-ivory);padding:0 10px;border-radius:var(--uk-radius);font:14px var(--uk-sans)} .rf-pip{padding:1px 6px;border:1px solid currentColor;border-radius:10px} .rf-member .rf-kick{margin-left:auto;min-height:36px;padding:0 12px}.rf-badge{white-space:nowrap} /* Painted pass: the game's own gold frame and raid banner art */ .rf-pop{position:relative;padding:16px;border:0;background:linear-gradient(180deg,#141d33,#0a1020);box-shadow:0 14px 34px rgba(0,0,0,.7)} .rf-pop::after,.rf-toast::after{content:"";position:absolute;inset:0;pointer-events:none;border:16px solid transparent;border-image:url('/art/interface/panel-frame-v1.webp') 18% / 16px / 0 stretch} .rf-bar{margin:-2px -2px 0;border:1px solid var(--uk-gold-dim);border-radius:2px;min-height:64px;padding:8px 4px 8px 14px;background:linear-gradient(90deg,rgba(8,12,22,.78),rgba(8,12,22,.12) 65%,rgba(8,12,22,.45)),url('/art/interface/banner-raids-v1.webp') center/cover} .rf-bar h2{font-size:18px;letter-spacing:.08em;color:var(--uk-gold-hi);text-shadow:0 2px 6px #000} .rf-body{padding:12px 0 2px} .rf-queues{border:0;background:none;gap:8px} .rf-queues li+li{border:0} .rf-row-q{min-height:58px;padding:9px 12px;border:1px solid rgba(200,160,80,.35);border-radius:3px;background:linear-gradient(180deg,rgba(34,48,74,.75),rgba(14,22,38,.85));transition:border-color .15s,background .15s} .rf-row-q.is-sel{outline:0;border-color:var(--uk-gold);background:linear-gradient(90deg,rgba(214,170,84,.34),rgba(34,48,74,.8));box-shadow:inset 3px 0 0 var(--uk-gold),0 0 12px rgba(240,200,110,.25)} .rf-qtext strong{font-size:16px;text-shadow:0 1px 3px #000} .rf-qtext small{font-size:12.5px} .rf-slots{max-width:112px;gap:4px} .rf-slot{width:19px;height:19px;box-shadow:inset 0 0 4px rgba(0,0,0,.6)} .rf-slot.is-empty{background:rgba(0,0,0,.35)} .rf-empty{padding:26px 8px;font:italic 15px var(--uk-serif);background:rgba(0,0,0,.25);border:1px dashed rgba(200,160,80,.35);border-radius:3px} .rf-toast{position:relative;padding:14px 16px 14px 18px;min-height:64px;max-width:300px;border:0;background:linear-gradient(90deg,rgba(8,12,22,.8),rgba(8,12,22,.25)),url('/art/interface/event-raid-opening-v1.webp') center/cover;box-shadow:0 10px 26px rgba(0,0,0,.7),0 0 18px rgba(240,200,110,.3)} .rf-toast strong{font-size:16px;color:var(--uk-gold-hi);text-shadow:0 2px 4px #000} .rf-toast span{color:var(--uk-ivory);font-size:13px} .rf-eye{width:60px;height:60px;background:radial-gradient(circle at 50% 35%,#34486b,#0b111d 70%)} .rf-eye svg{width:30px;height:30px;filter:drop-shadow(0 0 4px rgba(240,200,110,.6))} .rf .rf-btn.is-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.5);text-shadow:0 1px 0 rgba(255,255,255,.25)} .rf-members .rf-member{padding:6px 8px;border-radius:3px;background:rgba(0,0,0,.25)} .rf-head2 strong{font:600 17px var(--uk-serif);color:var(--uk-gold-text)} .rf-pip{background:rgba(0,0,0,.3)} /* /ui-kit.css */ /* 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

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:

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:

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: same sizes and the same tab/chip/card sizing as the navigation icons (.uk-art-sm|md|lg) 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:

Attack power

. 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 ------------------ 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__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

(tap-open row with .uk-row-drawer) or a plain

; .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-) .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)}