/* One board component for every replica. The generic windows retain their
   six-pixel layout border; specialist coordinate surfaces have no CSS border.
   Both place the actual board at (6,6), exactly like Passive Runes. */
.presentation-page .client-window { isolation:isolate; border-image:none !important; background:none !important; box-shadow:none; }
.presentation-page .client-window::before { content:none !important; }
.presentation-page .client-window > .replica-board-top { display:none !important; }
.presentation-page .client-window > .replica-board { position:absolute; inset:0 0 1px; z-index:-1; pointer-events:none; }
.presentation-page .client-window:is([data-replica=rune],[data-replica=prestige],[data-replica=titles],[data-replica=skillcolor],[data-replica=pets]) > .replica-board { inset:6px 6px 7px; }
.presentation-page .client-window > .replica-board i { display:block; position:absolute; margin:0; padding:0; image-rendering:pixelated; }
.replica-tile-base { inset:0; background:url('assets/ui/game/pattern_board_base.png') 0 0/128px 128px repeat; }
.replica-tile-top,.replica-tile-bottom { left:32px; right:32px; height:32px; }
.replica-board > .replica-tile-top { display:block !important; top:0; background:url('assets/ui/game/pattern_board_line_top.png') 0 0/128px 32px repeat-x; }
.replica-tile-bottom { bottom:0; background:url('assets/ui/game/pattern_board_line_bottom.png') 0 0/128px 32px repeat-x; }
.replica-tile-left,.replica-tile-right { top:32px; bottom:32px; width:32px; }
.replica-tile-left { left:0; background:url('assets/ui/game/pattern_board_line_left.png') 0 0/32px 128px repeat-y; }
.replica-tile-right { right:0; background:url('assets/ui/game/pattern_board_line_right.png') 0 0/32px 128px repeat-y; }
.replica-tile-lefttop,.replica-tile-righttop,.replica-tile-leftbottom,.replica-tile-rightbottom { width:32px; height:32px; }
.replica-tile-lefttop { left:0; top:0; background:url('assets/ui/game/pattern_board_corner_lefttop.png'); }
.replica-tile-righttop { right:0; top:0; background:url('assets/ui/game/pattern_board_corner_righttop.png'); }
.replica-tile-leftbottom { left:0; bottom:0; background:url('assets/ui/game/pattern_board_corner_leftbottom.png'); }
.replica-tile-rightbottom { right:0; bottom:0; background:url('assets/ui/game/pattern_board_corner_rightbottom.png'); }
.presentation-page .client-window .replica-titlebar { top:5px !important; left:6px !important; right:5px !important; }
.presentation-page .client-window:is([data-replica=rune],[data-replica=prestige],[data-replica=titles],[data-replica=skillcolor],[data-replica=pets]) .replica-titlebar { top:11px !important; left:12px !important; right:11px !important; }
.presentation-page .client-window > :is(.native-page,.showcase-body,.filter-web-body) { left:11px; right:11px; }
.presentation-page .client-window > .native-tabs { left:11px; right:11px; bottom:11px; }
.presentation-page .client-window[data-replica=xetass] .showcase-body { left:11px; right:11px; bottom:11px; }
.presentation-page .client-window[data-replica=xetass] .web-island-map { padding:6px 0; grid-template-rows:repeat(5,69px); }
.presentation-page .client-window[data-replica=xetass] .island-rank { display:none; }
.presentation-page .client-window[data-replica=xetass] .showcase-body > .atlas-stats { bottom:0; height:18px; margin:0; padding:0 3px; display:flex; align-items:baseline; justify-content:space-between; line-height:14px; }
/* The title has no overlaid ornament. */
.presentation-page .client-window[data-replica=filter] .replica-title-label img { display:none; }
/* All three controls use the Prestige tier-chip component. */
.presentation-page :is(#prestige,#pets,#mounts) .client-presets { margin:0 auto 7px; width:fit-content; max-width:100%; }
.presentation-page :is(#prestige,#pets,#mounts) .client-presets :is(.native-levels,.prestige-milestones) { display:flex; justify-content:center; flex-wrap:nowrap; gap:3px; margin:0; padding:0; }
.presentation-page :is(#prestige,#pets,#mounts) .client-presets button { width:auto; min-width:35px; height:19px; min-height:0; padding:1px 3px; border:1px solid #635438; border-image:none; border-radius:0; background:#19170f; color:#bcb29a; font:400 10px/1 Tahoma,Verdana,sans-serif; white-space:nowrap; }
.presentation-page :is(#prestige,#pets,#mounts) .client-presets button[aria-pressed=true] { border-color:#b1904b; color:#e7c46e; }
.presentation-page #bounty .bounty-reward .reward-chest { left:auto; right:12px; bottom:12px; width:32px; height:32px; padding:0; background:url('assets/ui/game/public_slot_base.png') center/32px 32px; image-rendering:pixelated; object-fit:contain; filter:none; z-index:2; }
.presentation-page :is(#pets,#mounts) .native-section { row-gap:0; }
/* Center the opaque character pixels and the ring's actual 30..246 art bounds.
   Both share the feet pivot, including wheel zoom. */
.presentation-page .sc-window .sc-character { left:calc(50% - 50px); top:20px; height:132px; transform-origin:50% 100%; }
.presentation-page .sc-window .sc-effect { left:23px; right:auto; top:-7px; bottom:auto; transform-origin:138px 133px; }
/* Loot Calculator: native flat controls and palette from uicraftkit.py. */
.presentation-page .lootcalc-window { border:0; padding:0; }
.presentation-page .lootcalc-window > .replica-board { inset:6px 6px 7px; }
.presentation-page .lootcalc-window .replica-titlebar { left:12px !important; right:11px !important; top:11px !important; }
.presentation-page .lootcalc-window .loot-content { top:32px; left:14px; width:302px; bottom:44px; }
.presentation-page .lootcalc-window .client-strip { height:21px; padding:3px 0; }
.presentation-page .lootcalc-window .loot-top { height:55px; }
.presentation-page .lootcalc-window .loot-top > .client-strip { margin-top:3px; }
.presentation-page .lootcalc-window .loot-actions { gap:3px; margin-top:4px; }
.presentation-page .lootcalc-window :is(.loot-actions button,.loot-bottom button,.history-dates button) { height:22px; padding:0 2px; border:1px solid #5a4a30; border-image:none; border-radius:0; background:#2b241b; color:#e8d9b5; font:400 12px/14px Tahoma,Verdana,sans-serif; }
.presentation-page .lootcalc-window :is([data-loot-start],[data-history-search]) { border-color:#d4a64a; background:#4a3a1c; color:#f5cc6b; }
.presentation-page .lootcalc-window :is(.loot-actions button,.loot-bottom button,.history-dates button):hover { background:#3a3022; }
.presentation-page .lootcalc-window :is([data-loot-start],[data-history-search]):hover { background:#5a4722; }
.presentation-page .lootcalc-window :is(.loot-actions button,.loot-bottom button,.history-dates button):active { background:#1f1a13; }
.presentation-page .lootcalc-window .loot-activity { height:64px; }
.presentation-page .lootcalc-window .activity-counters { gap:3px; padding-top:3px; }
.presentation-page .lootcalc-window .activity-counters div { height:36px; border:1px solid #5a4a30; background:#1f1a14; padding-top:3px; color:#f5cc6b; }
.presentation-page .lootcalc-window .activity-counters small { font-size:12px; color:#8f8a80; margin-top:3px; }
.presentation-page .lootcalc-window .loot-drop { margin-top:0; }
.presentation-page .lootcalc-window .drop-row { height:24px; padding:0 6px 0 2px; border:0; background:#18140f; color:#e6decc; }
.presentation-page .lootcalc-window .loot-drop .client-strip { margin-bottom:3px; }
.presentation-page .lootcalc-window .drop-row img { width:18px; height:18px; box-sizing:content-box; border:1px solid #6b523a; background:#0d0b08; margin-right:5px; }
.presentation-page .lootcalc-window .drop-row output { font-size:12px; color:#b5aa94; }
.presentation-page .lootcalc-window .loot-item-heading { margin-top:2px; }
.presentation-page .lootcalc-window .loot-sort { height:28px; gap:3px; padding-top:3px; align-items:flex-start; }
.presentation-page .lootcalc-window .loot-sort label { display:flex; align-items:center; width:calc((100% - 3px)/2); height:22px; padding:0 3px 0 8px; border:1px solid #3a3937; background:#0d0b08; font-size:12px; white-space:nowrap; }
.presentation-page .lootcalc-window .loot-sort input { width:16px; height:16px; border:0; margin:0 4px 0 0; background:url('assets/game-ui/lootcalc/uncheck.png') center/16px 16px no-repeat; }
.presentation-page .lootcalc-window .loot-sort input:checked::after { content:''; position:absolute; inset:0; background:url('assets/game-ui/lootcalc/check.png') center/16px 16px no-repeat; }
.presentation-page .lootcalc-window .loot-sort input { position:relative; }
.presentation-page .lootcalc-window .loot-items { position:absolute; left:0; right:0; top:340px; bottom:51px; height:auto; border:1px solid #5a4a30; background:#0d0b08; }
.presentation-page .lootcalc-window .item-rows { height:100%; }
.presentation-page .lootcalc-window .item-rows > p { padding-top:10px; color:#8f8a80; }
.presentation-page .lootcalc-window .loot-item { height:24px; padding:1px 4px; margin:2px; background:#18140f; border:0; gap:5px; }
.presentation-page .lootcalc-window .loot-item img { width:20px; height:20px; border:1px solid #6b523a; background:#0d0b08; }
.presentation-page .lootcalc-window .loot-item span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.presentation-page .lootcalc-window .loot-total { position:absolute; left:0; right:0; bottom:26px; height:22px; padding:3px 7px; border:1px solid #5a4a30; background:#262019; color:#f5cc6b; }
.presentation-page .lootcalc-window .loot-bottom { position:absolute; bottom:0; left:0; right:0; gap:3px; padding:0; height:22px; }
.presentation-page .lootcalc-window > .client-tabs { left:10px; right:10px; bottom:11px; height:30px; padding:2px; border:1px solid #77776f; }
.presentation-page .lootcalc-window > .client-tabs button { height:24px; padding:0; color:#e6decc; background:#121110; }
.presentation-page .lootcalc-window > .client-tabs button[aria-selected=true] { background:#2e261a; color:#f5cc6b; border-bottom:2px solid #c8a24a; }
.presentation-page .lootcalc-window > .client-tabs button + button { border-left:1px solid #3a3937; }
.presentation-page .lootcalc-window .is-history .loot-top { height:75px; }
.presentation-page .lootcalc-window .is-history .loot-actions button { height:20px; }
.presentation-page .lootcalc-window .history-dates { position:relative; height:23px; padding-top:4px; gap:3px; }
.presentation-page .lootcalc-window .history-dates input { width:72px; height:18px; padding:0 2px; font-size:12px; }
.presentation-page .lootcalc-window .history-dates input[size='2'] { width:26px; }
.presentation-page .lootcalc-window .history-dates button { height:18px; flex:none; width:66px; }
.presentation-page .lootcalc-window .history-dates > * { flex-shrink:0; }
.presentation-page .lootcalc-window .is-history .loot-items { top:360px; bottom:25px; }
.presentation-page .lootcalc-window .is-history .loot-total { bottom:0; }
/* Keep content inside the board's common inner gutter. */
.presentation-page .client-window[data-replica] > :is(.native-page,.showcase-body,.filter-web-body) { left:11px; right:11px; bottom:11px; }
.presentation-page .client-window[data-replica] > .native-page { bottom:43px; }
.presentation-page .client-window[data-replica=atlas] .atlas-game-layout { left:11px; right:11px; bottom:11px; }
.presentation-page .client-window[data-replica=influence] .influence-left { left:11px; width:231px; }
.presentation-page .client-window[data-replica=influence] .influence-bands { width:307px; }
.presentation-page .client-window[data-replica=synth] :is(.synth-slots,.synth-candidates,.synth-footer) { left:11px; width:262px; }
.presentation-page .client-window[data-replica=synth] .synth-footer { height:27px; }
.presentation-page .client-window[data-replica=synth] .synth-footer button { height:21px; }
.presentation-page .client-window[data-replica=dps] > :is(.dps-duration,.dps-totals,.dps-chart,.dps-settings,.dps-actions) { left:11px; right:11px; }
.presentation-page .client-window[data-replica=dps] .dps-actions { bottom:11px; }
.presentation-page .client-window[data-replica=dps] .dps-settings { bottom:36px; }
.presentation-page .sc-window .sc-skills { left:17px; top:37px; width:212px; height:491px; }
.presentation-page .sc-window .sc-class-tabs { left:17px; width:212px; }
.presentation-page .sc-window .sc-preview { top:37px; height:246px; }
.presentation-page .sc-window .sc-colors { top:37px; width:210px; height:525px; }
.presentation-page .sc-window .sc-palette { width:200px; }
.presentation-page .sc-window .sc-preset { left:17px; width:766px; }
.presentation-page .sc-window .sc-footer { left:17px; width:766px; height:36px; }
.presentation-page #titles .st-frames { left:17px; top:37px; width:270px; height:528px; }
.presentation-page #titles :is(.st-preview,.st-style) { width:402px; }
.presentation-page #titles .st-preview { top:37px; height:167px; }
.presentation-page #titles .st-style { height:351px; }
.presentation-page #titles .st-preview-box { width:390px; }
.presentation-page #titles .st-list { width:248px; }
.presentation-page #titles .st-frame-row { width:248px; }
.presentation-page #titles .st-scrollbar { left:256px; }
.presentation-page #titles .st-preset { left:9px; right:10px; }
.presentation-page .client-window[data-replica=prestige] .prestige-client-footer { left:17px; width:232px; background:url('assets/game-ui/prestige/windows_char_tab_01.png') center top/232px 34px no-repeat; border:0; bottom:17px; top:auto; height:30px; }
.presentation-page #pets .pet-window .replica-titlebar { top:11px !important; right:11px !important; }
.presentation-page .sc-window .sc-character { top:26px; height:100px; }
.presentation-page .lootcalc-window .loot-content { left:17px; width:296px; top:35px; bottom:47px; }
.presentation-page .lootcalc-window > .client-tabs { left:17px; right:17px; bottom:17px; }
.presentation-page .lootcalc-window .loot-content > .loot-item-heading { margin-top:2px; }
.presentation-page .lootcalc-window .loot-sort label { padding-left:6px; }
.presentation-page .lootcalc-window .history-dates { gap:2px; }
.presentation-page .lootcalc-window .history-dates input { width:70px; }
.presentation-page .lootcalc-window .history-dates button { width:62px; }
.presentation-page .sc-window .sc-mode-row { grid-template-columns:65px 30px 45px 30px; }
.presentation-page .sc-window .sc-slider { grid-template-columns:65px 91px 31px; }
.presentation-page .sc-window .sc-slider input { width:91px; }
.presentation-page .sc-window .sc-footer { gap:5px; }
.presentation-page .sc-window .sc-cost { width:66px; }
.presentation-page .lootcalc-window .loot-actions [data-loot-start],
.presentation-page .lootcalc-window .history-dates [data-history-search] { background:#4a3a1c; border-color:#d4a64a; color:#f5cc6b; }
.presentation-page .lootcalc-window .loot-actions [data-loot-start]:hover,
.presentation-page .lootcalc-window .history-dates [data-history-search]:hover { background:#5a4722; }
.presentation-page .lootcalc-window .loot-actions [data-loot-start]:active,
.presentation-page .lootcalc-window .history-dates [data-history-search]:active { background:#3a2d16; }
/* The portrait used to cover the board corner and the shared title bar. */
.presentation-page .client-window[data-replica=prestige] .prestige-portrait-frame { left:17px; top:34px; width:30px; height:30px; }
.presentation-page .client-window[data-replica=prestige] .prestige-portrait { left:19px; top:36px; width:26px; height:26px; }
.presentation-page .client-window[data-replica=prestige] :is(.prestige-exp-panel,.prestige-colour-tabs,.prestige-points-bar) { left:17px; width:232px; }
/* The common inner gutter is the Rune panel's native x=15. Generic boards
   count their six-pixel transparent layout border in that coordinate. */
.presentation-page .client-window { --replica-inner-gutter:15px; }
.presentation-page .client-window[data-replica] > :is(.native-page,.showcase-body,.filter-web-body) { left:9px; right:9px; top:31px; bottom:9px; }
.presentation-page .client-window[data-replica] > .native-page { bottom:41px; }
.presentation-page .client-window > .native-tabs { left:9px; right:9px; bottom:9px; }
.presentation-page .client-window[data-replica=atlas] .atlas-game-layout { top:31px; left:9px; right:9px; bottom:9px; }
.presentation-page .client-window[data-replica=influence] .influence-left { left:9px; width:233px; }
.presentation-page .client-window[data-replica=influence] .influence-bands { width:309px; }
.presentation-page .client-window[data-replica=synth] :is(.synth-slots,.synth-candidates,.synth-footer) { left:9px; width:266px; }
.presentation-page .client-window[data-replica=dps] > :is(.dps-duration,.dps-totals,.dps-chart,.dps-settings,.dps-actions) { left:9px; right:9px; }
.presentation-page .client-window[data-replica=dps] .dps-actions { bottom:9px; }
.presentation-page .sc-window .sc-skills { left:15px; width:214px; }
.presentation-page .sc-window .sc-class-tabs { left:15px; width:214px; }
.presentation-page .sc-window .sc-colors { width:212px; }
.presentation-page .sc-window :is(.sc-preset,.sc-footer) { left:15px; width:770px; }
.presentation-page .sc-window .sc-footer { height:38px; }
.presentation-page #titles .st-frames { left:15px; width:272px; height:530px; }
.presentation-page #titles :is(.st-preview,.st-style) { width:404px; }
.presentation-page #titles .st-style { height:353px; }
.presentation-page .lootcalc-window .loot-content { left:15px; width:300px; top:37px; bottom:45px; }
.presentation-page .lootcalc-window > .client-tabs { left:15px; right:15px; bottom:15px; }
.presentation-page .client-window[data-replica=prestige] .prestige-client-footer { left:15px; width:236px; bottom:15px; background-size:236px 34px; }
.presentation-page .client-window[data-replica=prestige] .prestige-portrait-frame { left:15px; }
.presentation-page .client-window[data-replica=prestige] .prestige-portrait { left:17px; }
.presentation-page .client-window[data-replica=prestige] :is(.prestige-exp-panel,.prestige-colour-tabs,.prestige-points-bar) { left:15px; width:234px; }
.presentation-page .client-window[data-replica=prophecy] .prophecy-game-columns > div:first-child,
.presentation-page .client-window[data-replica=prophecy] .prophecy-game-detail { height:340px; }
.presentation-page .client-window[data-replica=prophecy] .prophecy-detail-copy { height:306px; }