/* Rune Passives only. Fixed game coordinates; the existing client stage scales
   the whole 608 x 637 surface uniformly on narrow screens. */
.presentation-page .client-window[data-replica=rune] {
  padding: 0; border: 0; background: none; box-shadow: none;
  color: #e6decc; text-shadow: 1px 1px #000; overflow: hidden;
}
.presentation-page .client-window[data-replica=rune]::before {
  content: ''; position: absolute; inset: 0;
  background: url('assets/game-ui/rune-passive-board.svg') 0 0/608px 637px no-repeat;
  pointer-events: none;
}
.presentation-page .client-window[data-replica=rune] :is(button,input) { border-radius: 0; text-shadow: 1px 1px #000; }
.presentation-page .client-window[data-replica=rune] :is(small,span) { margin: 0; }
.presentation-page .client-window[data-replica=rune] .web-ui-title {
  top: 12px; left: 12px; right: 12px; height: 22px; min-height: 0; padding: 0 42px;
  border: 0; background: url('assets/game-ui/rune-passive-title.svg') left top/584px 32px no-repeat;
  font-size: 10px; color: #dedbd3;
}
.presentation-page .client-window[data-replica=rune] .game-close { top: 0; right: 1px; background-image:url('assets/ui/game/public_close_button_01.png'); }
.presentation-page .client-window[data-replica=rune] .game-close:hover { background-image:url('assets/ui/game/public_close_button_02.png'); }
.presentation-page .client-window[data-replica=rune] .game-close:active { background-image:url('assets/ui/game/public_close_button_03.png'); }
.presentation-page .client-window[data-replica=rune] .rune-web-body {
  position: absolute; inset: 0; padding: 0; background: none; pointer-events: none;
}
.presentation-page .client-window[data-replica=rune] .rune-web-body > * { pointer-events: auto; }
.presentation-page .client-window[data-replica=rune] .rp-panel {
  position: absolute; left: 15px; right: 15px; padding: 0;
  border: 1px solid #77776f; outline: 1px solid #050605; outline-offset: -3px;
  background: url('assets/ui/game/pattern_border_a_center.png');
}
.presentation-page .client-window[data-replica=rune] .rp-heading {
  position: absolute; top: 2px; left: 2px; right: 2px; height: 20px;
  display: grid; place-items: center; color: #c7c7c7;
  background: linear-gradient(#ffffff10,#ffffff10),url('assets/ui/game/pattern_border_a_center.png');
  border: 0; font-size: 12px;
}
.presentation-page .client-window[data-replica=rune] .rp-slots-panel { top: 37px; height: 121px; }
.presentation-page .client-window[data-replica=rune] .rune-web-slots {
  position: absolute; top: 28px; left: 7px; right: 7px; height: 62px;
  display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px;
  padding: 0; border: 0;
}
.presentation-page .client-window[data-replica=rune] .rune-slot {
  position: relative; display: block; height: 62px; min-height: 0; padding: 0;
  border: 0; border-bottom: 3px solid #4a4436; background: #18140f; color: #e6decc;
}
.presentation-page .client-window[data-replica=rune] .rune-slot.is-missing { border-bottom-color: #c0503a; }
.presentation-page .client-window[data-replica=rune] .rune-slot[aria-pressed=true] { background: #30261a; border-bottom-color: #c8a24a; }
.presentation-page .client-window[data-replica=rune] .rune-slot:hover { background: #241d15; }
.presentation-page .client-window[data-replica=rune] .rune-slot > small {
  display: block; position: absolute; top: 2px; left: 4px; padding: 0; color: #8f8a80; font-size: 10px;
}
.presentation-page .client-window[data-replica=rune] .rp-slot-icon {
  position: absolute; top: 6px; left: calc(50% - 16px); width: 32px; height: 32px;
  background: url('assets/ui/game/public_slot_base.png') center/32px 32px;
}
.presentation-page .client-window[data-replica=rune] .passive-glyph { display: block; width: 32px; height: 32px; max-width: none; }
.presentation-page .client-window[data-replica=rune] .is-missing .rp-slot-icon img { filter: url('#rp-missing-tint'); }
.presentation-page .client-window[data-replica=rune] .rune-slot-name {
  position: absolute; top: 42px; left: 2px; right: 2px; height: 14px;
  color: #e6decc; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.presentation-page .client-window[data-replica=rune] .rune-slot.is-empty .rune-slot-name { color: #8f8a80; }
.presentation-page .client-window[data-replica=rune] .rune-unlocked {
  position: absolute; top: 97px; left: 9px; color: #f5cc6b; font-size: 10px; height: 15px; padding: 0;
}
.presentation-page .client-window[data-replica=rune] .rp-tabs {
  top: 167px; height: 30px; display: flex; gap: 0; padding: 2px;
}
.presentation-page .client-window[data-replica=rune] .rp-tabs button {
  flex: 1; height: 24px; min-height: 0; padding: 0; border: 0; border-bottom: 2px solid transparent;
  background: #121110; color: #e6decc; font-size: 10px;
}
.presentation-page .client-window[data-replica=rune] .rp-tabs button + button { border-left: 1px solid #3a3937; }
.presentation-page .client-window[data-replica=rune] .rp-tabs button:hover { background: #1e1b16; }
.presentation-page .client-window[data-replica=rune] .rp-tabs button[aria-pressed=true] { background: #2e261a; border-bottom-color: #f6a800; }
.presentation-page .client-window[data-replica=rune] .rp-list-panel { top: 205px; height: 250px; }
.presentation-page .client-window[data-replica=rune] .passive-web-list {
  position: absolute; top: 28px; left: 3px; right: 3px;
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(5,40px);
  grid-auto-flow: column; gap: 3px 6px; height: auto; padding: 0; border: 0;
}
.presentation-page .client-window[data-replica=rune] .passive-web-row {
  display: block; position: relative; padding: 0; height: 40px; min-height: 0; border: 0;
  background: #18140f; color: #e6decc; text-align: left;
}
.presentation-page .client-window[data-replica=rune] .passive-web-row::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 0; width: 3px; background: #4a4436;
}
.presentation-page .client-window[data-replica=rune] .passive-web-row.is-slotted::before { background: #c0503a; }
.presentation-page .client-window[data-replica=rune] .passive-web-row.is-unlocked::before { background: #4a4436; }
.presentation-page .client-window[data-replica=rune] .passive-web-row:hover { background: #241d15; }
.presentation-page .client-window[data-replica=rune] .passive-web-row .passive-glyph { position: absolute; top: 4px; left: 8px; }
.presentation-page .client-window[data-replica=rune] .passive-web-row.is-locked .passive-glyph { filter: brightness(.35); }
.presentation-page .client-window[data-replica=rune] .rp-name {
  position: absolute; left: 48px; right: 3px; top: 4px; color: #e6decc; font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.presentation-page .client-window[data-replica=rune] .is-slotted .rp-name { color: #f5cc6b; }
.presentation-page .client-window[data-replica=rune] .is-locked .rp-name { color: #8f8a80; }
.presentation-page .client-window[data-replica=rune] .rp-state {
  position: absolute; left: 48px; right: 3px; top: 21px; color: #e6decc; font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.presentation-page .client-window[data-replica=rune] .is-slotted .rp-state { color: #e66b59; }
.presentation-page .client-window[data-replica=rune] .is-locked .rp-state { color: #8f8a80; }
.presentation-page .client-window[data-replica=rune] .rp-presets { top: 464px; height: 139px; }
.presentation-page .client-window[data-replica=rune] .rp-no-sets {
  position: absolute; left: 8px; right: 8px; top: 59px; text-align: center; color: #8f8a80; font-size: 10px;
}
.presentation-page .client-window[data-replica=rune] .rp-preset-grid {
  position: absolute; left: 5px; right: 5px; top: 28px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px;
}
.presentation-page .client-window[data-replica=rune] .rp-preset { display: flex; height: 34px; min-width: 0; background: #18140f; }
.presentation-page .client-window[data-replica=rune] .rp-preset button { padding: 3px; border: 0; background: none; color: #e6decc; font-size: 10px; }
.presentation-page .client-window[data-replica=rune] .rp-preset [data-rune-load] { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.presentation-page .client-window[data-replica=rune] .rp-actions { position: absolute; left: 5px; right: 5px; top: 109px; display: flex; align-items: center; gap: 6px; }
.presentation-page .client-window[data-replica=rune] .rp-actions input { flex: 1; min-width: 0; height: 19px; padding: 1px 3px; color: #e6decc; font-size: 10px; border: 1px solid #aaa99e; background: #000; }
.presentation-page .client-window[data-replica=rune] .rp-actions input::placeholder { color: #e6decc; opacity: 1; }
.presentation-page .client-window[data-replica=rune] .rp-actions button { flex: 0 0 59px; width: 59px; height: 21px; border: 0; padding: 0; background: url('assets/ui/game/public_middle_button_01.png') center/59px 21px no-repeat; color: #e6decc; font-size: 10px; }
.presentation-page .client-window[data-replica=rune] .rp-actions button:hover { background-image: url('assets/ui/game/public_middle_button_02.png'); }
.presentation-page .client-window[data-replica=rune] .rp-actions button:active { background-image: url('assets/ui/game/public_middle_button_03.png'); }
.presentation-page .client-window[data-replica=rune] .rp-footer { position: absolute; top: 610px; left: 17px; right: 15px; color: #8f8a80; font-size: 10px; white-space: nowrap; }
.presentation-page .client-window[data-replica=rune] .rp-status { position: absolute; z-index: 8; left: 25px; right: 25px; top: 489px; color: #f5cc6b; background: #121110; padding: 3px; font-size: 10px; }
.presentation-page .client-window[data-replica=rune] .rp-status:empty { display: none; }
.presentation-page .client-window[data-replica=rune] .rp-tooltip { display: none; position: absolute; z-index: 9; left: 20px; right: 20px; top: 454px; padding: 8px; border: 1px solid #77776f; background: #080908f5; color: #e6decc; font-size: 12px; pointer-events: none; }
.presentation-page .client-window[data-replica=rune] .rp-tooltip.is-visible { display: block; }
.presentation-page .client-window[data-replica=rune] .rp-tooltip strong { color: #f5cc6b; }