/* Backpack window, nine-slice buttons, HUD breakpoints, title Continue panel, item comparison tooltips and pause-menu zoom rows. Linked after ui-hud.css. */

/* Shared windows retain their frame; the backpack owns a 14-column, ten-row grid (its body is in backpack.css). */
#characterWindow,#backpackWindow,body.character-paired #characterWindow { width:560px; height:720px; transform:scale(var(--cw-scale,1)); transform-origin:top left; }
#backpackWindow { width:744px; position:fixed; z-index:18; pointer-events:auto; color:#e7ddc7; font-size:16px; }
body.character-paired #panelL,body.single-panel #panelL { width:400px; height:720px; max-height:none; transform:scale(var(--cw-scale,1)); transform-origin:top left; display:block; }
.cw-gear-slot .cw-ghost { opacity:.45; filter:grayscale(1) brightness(.6) drop-shadow(0 0 2px #c6985555); }
.cw-body .ptitle,.cw-body .px { display:none; }

/* Nine-slice caps preserve the button artwork at every label width. */
button:not(.cw-tab):not(.cw-close):not(.challenge-close):not(.waypoint-row):not(.waypoint-close):not(.ui-close):not(.plus):not(.mini):not(#pointsPip),.mbtn { border:12px solid transparent; border-image:url('assets/gen/ui/button.webp') 38 90 fill / 12px 28px / 0 stretch; background:none; padding:2px 20px; }
button:not(.cw-tab):not(.cw-close):not(.challenge-close):not(.waypoint-row):not(.waypoint-close):not(.ui-close):not(.plus):not(.mini):not(#pointsPip):hover,.mbtn:hover { border-image-source:url('assets/gen/ui/button_hover.webp'); background-image:none; }
button:active,.mbtn:active { transform:scale(.96); }
.mbtn.small { border-image:none; border:1px solid #9a7741; background:linear-gradient(#46321f,#1c130d); padding:4px 8px; }
@media (max-width:1100px) and (min-width:760px) { #playerCard { width:285px; } #topbar.unit-card { width:280px; left:54%; } #hudCluster { width:calc(100vw - 32px); } #hudGold { bottom:calc(var(--hud-height) + 32px); left:16px; right:auto; } }
@media (max-width:759px) {
  :root { --hud-height:116px; --hud-bottom:8px; }
  #playerCard { left:12px; top:12px; transform:scale(.85); }
  #topbar.unit-card { top:128px; left:12px; transform:scale(.85); transform-origin:top left; }
  #buffs { left:12px; top:89px; transform:scale(.85); }
  #hudCluster { width:calc(100vw - 16px); padding:12px 6px 6px; grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:44px 44px; gap:6px 3px; }
  #hudCluster #abar { grid-column:1/10; grid-row:1; gap:3px; }
  #hudCluster #tpBtn { grid-column:10; grid-row:1; }
  #hudCluster #belt { grid-column:1/6; grid-row:2; padding:0; border:0; gap:5px; }
  #minis { right:12px; bottom:136px; transform:scale(.85); gap:3px; }
  #hudGold { right:20px; bottom:28px; }
  #msgs { bottom:181px; width:calc(100vw - 24px); max-width:none; font-size:15px; }
  #ui #voiceSubtitle { bottom:200px; max-width:calc(100vw - 32px); }
  #comboPips { top:87px; }
  #picker { bottom:181px; }
  .combat-level { bottom:220px; }
  body.character-paired #panelL { display:block; }
}
@media (prefers-reduced-motion:reduce) { .unit-bar.low,#xpfill::after { animation:none; } .unit-fill,.unit-trail,#xpfill { transition:none; } }
.quest-reduced-motion .unit-bar.low,.quest-reduced-motion #xpfill::after { animation:none; }
/* Reserve room for the resistance line within the characteristics box. */
.cw-characteristics { height:126px; }
#minis { bottom:16px; grid-template-columns:repeat(6,34px); gap:3px; }
#minis .mini { width:34px; height:40px; }
#hudGold { bottom:63px; }
@media (max-width:1400px) { #minis { bottom:calc(var(--hud-height) + 24px); } #hudGold { bottom:18px; } }
@media (max-width:1100px) and (min-width:760px) { #hudGold { bottom:calc(var(--hud-height) + 32px); } }
@media (max-width:759px) { #minis { bottom:136px; } #hudGold { bottom:28px; } }
/* Keep complete ornamental buttons at their native 259:120 ratio. Small controls use a plain bronze edge. */
button:not(.cw-tab):not(.cw-close):not(.plus):not(.mini):not(#pointsPip),button:not(.cw-tab):not(.cw-close):not(.plus):not(.mini):not(#pointsPip):hover { border-image:none; border:1px solid #98703c; background:linear-gradient(#43301e,#21170f); padding:7px 14px; }
.mbtn,.mbtn:hover { width:206px; min-height:96px; border:0; border-image:none; padding:18px 30px; background: url('assets/gen/ui/button.webp') center/contain no-repeat; }
.mbtn:hover { background-image:url('assets/gen/ui/button_hover.webp'); }
.mbtn.small,.mbtn.small:hover { width:72px; min-height:40px; background:linear-gradient(#43301e,#21170f); border:1px solid #98703c; padding:4px 8px; }
.mbtn.del,.mbtn.del:hover { width:40px; min-width:40px; }
#tbFill { position:absolute; }
#minis { grid-template-columns:repeat(6,40px); }
#minis .mini { width:40px; }
@media (min-width:1401px) and (max-width:1600px) { #minis { bottom:calc(var(--hud-height) + 24px); } #hudGold { bottom:18px; } }
#windowStack { display:contents; }
@media (max-width:759px) {
 body.character-paired #windowStack { display:block; position:fixed; z-index:18; inset:8px 8px calc(var(--hud-height) + 24px); overflow:auto; pointer-events:auto; scrollbar-width:thin; scrollbar-color:#98703c #1b130b; }
 body.character-paired #windowStack::after { content:''; display:block; height:var(--stack-height); pointer-events:none; }
 body.character-paired #characterWindow,body.character-paired #backpackWindow,body.character-paired #panelL { position:absolute; }
}

@media (max-width:759px) {
 :root { --hud-height:164px; }
 #playerCard { width:240px; }
 #topbar.unit-card { top:207px; }
 #hudCluster { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(3,44px); }
 #hudCluster #abar { display:contents; }
 #hudCluster #tpBtn { grid-column:5; grid-row:2; }
 #hudCluster #belt { grid-column:1/6; grid-row:3; }
 #minis { bottom:184px; }
 #hudGold { bottom:199px; left:14px; right:auto; }
 #msgs,#picker { bottom:235px; }
 #ui #voiceSubtitle { bottom:255px; }
 .combat-level { bottom:280px; }
}
#xpfill { position:relative; overflow:hidden; box-shadow:0 0 7px #e3ab4580; }
#xpfill::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 15%,#fff6c745 50%,transparent 85%); }
/* Icon tabs and square close controls must not inherit ornamental button hover art. */
.cw-tab:hover { background-image:linear-gradient(135deg,#312419,#100d0a); }
.cw-tab.active:hover { background-image:linear-gradient(135deg,#574023,#21160e); }
.cw-close:hover { background-image:linear-gradient(#61301d,#260b07); }

/* Art buttons: labels centered inside the plank (the art's rim is thicker at the top), brighter text. */
.mbtn:not(.small), .mbtn:not(.small):hover { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; line-height: 1; color: #fff0cc; }
/* Side-by-side item comparison: hovered item, then each equipped item for that slot with an "if you swap" summary. */
#tooltip.tt-wide { max-width: none; }
.tt-side { display: flex; align-items: flex-start; gap: 16px; }
.tt-side > .tt-col { width: 270px; }
.tt-side > .tt-eq { padding-left: 16px; border-left: 1px solid rgba(214, 160, 72, .35); }
.tt-compare-label { margin: 0 0 6px; color: #c9a860; font: 700 12px/1.2 Cinzel, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.tt-delta { margin-top: 9px; padding-top: 7px; border-top: 1px dashed rgba(214, 160, 72, .35); font-size: 14.5px; line-height: 1.35; }
.tt-delta-title { margin-bottom: 3px; color: #b9a684; font: 700 11px/1.2 Cinzel, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.tt-delta .up { color: #86e07e; } .tt-delta .down { color: #ff7f6e; }

/* Pause menu: view zoom and interface size */
.zoomrows { max-width: 480px; margin: 8px auto 10px; padding: 8px 0 2px; border-top: 1px solid rgba(214, 170, 92, .22); border-bottom: 1px solid rgba(214, 170, 92, .22); }
.zoomrow { display: grid; grid-template-columns: 1fr auto 70px auto; align-items: center; gap: 8px; margin: 4px 0; color: #eadfc4; font-size: 18px; text-align: left; }
.zoomrow b { font: 700 18px Cinzel, Georgia, serif; color: #ffe6a6; text-align: center; font-variant-numeric: tabular-nums; }
.menubox .zoomrow .mbtn.small, .menubox .zoomrow .mbtn.small:hover { min-width: 58px; min-height: 40px; margin: 0; padding: 0 12px 2px; font: 700 22px/1 Cinzel, Georgia, serif; }
.menubox .zoomhint { margin: 6px 0 4px; max-width: none; color: #b9ae96; font-size: 14px; text-align: center; }