/* Jamelgos supplied sprite UI, v1.
   Each source sheet contains a primary 48x48 resizable frame in its top-left
   quadrant plus smaller atlas variants. The primary frame is extracted beside
   the original sheet so CSS border-image can preserve its corners and rails. */

/* Preserve the hard 1px source pixels whenever these panels are scaled. */
html body .board,
html body .status-panel,
html body .control-panel,
html body .bounty-lane,
html body .bounty-center,
html body .side-zone,
html body .hand-area,
html body .drawer,
html body .opponent-sprite,
html body .winner-banner,
html body .match-result-box,
html body .player-option-btn {
  image-rendering: pixelated;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 2 — Board. The former frame used 18/20px padding. The 12px sprite rail
   replaces that space, leaving the bounty content at the same inset. */
html body .board {
  box-sizing: border-box;
  border: 12px solid transparent !important;
  border-image-source: url("board-frame.png?v=1") !important;
  border-image-slice: 12 fill !important;
  border-image-width: 12px !important;
  border-image-repeat: stretch !important;
  background: none !important;
  padding: 6px 8px !important;
}

/* 16 — Status panel. Keep the old 18/25px content inset after adding the rail. */
html body .status-panel.rpgui-container,
html body .status-panel {
  box-sizing: border-box;
  border: 12px solid transparent !important;
  border-image-source: url("status-panel-frame.png?v=1") !important;
  border-image-slice: 12 fill !important;
  border-image-width: 12px !important;
  border-image-repeat: stretch !important;
  background: none !important;
  padding: 6px 13px !important;
}

/* The lower control panel uses the same supplied sprite as the status panel.
   The padding preserves its previous 14px vertical and 30px horizontal inset. */
html body .control-panel.rpgui-container,
html body .control-panel {
  box-sizing: border-box;
  border: 12px solid transparent !important;
  border-image-source: url("status-panel-frame.png?v=1") !important;
  border-image-slice: 12 fill !important;
  border-image-width: 12px !important;
  border-image-repeat: stretch !important;
  background: none !important;
  padding: 2px 18px !important;
}

/* 4 — Bounty lane. */
html body .bounty-lane {
  box-sizing: border-box;
  border: 8px solid transparent !important;
  border-image-source: url("bounty-lane-frame.png?v=1") !important;
  border-image-slice: 8 fill !important;
  border-image-width: 8px !important;
  border-image-repeat: stretch !important;
  background: none !important;
  padding: 3px !important;
}
html body .bounty-lane:last-child {
  border-image-source: url("bounty-lane-frame.png?v=1") !important;
  padding: 3px !important;
}
html body .bounty-lane.active-target {
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(121, 208, 162, .55));
}

/* 15 — Side zones holding the played cards. */
html body .bounty-lane .side-zone,
html body .side-zone {
  box-sizing: border-box;
  border: 8px solid transparent !important;
  border-image-source: url("side-zone-frame.png?v=1") !important;
  border-image-slice: 8 fill !important;
  border-image-width: 8px !important;
  border-image-repeat: stretch !important;
  background: none !important;
  padding: 0 !important;
}

/* 3/5/6 — Bounty state plates. Their height remains the existing fixed 64px. */
html body .bounty-center,
html body .bounty-center.contested {
  box-sizing: border-box;
  border: 8px solid transparent !important;
  border-image-source: url("contested-bounty-frame.png?v=1") !important;
  border-image-slice: 8 fill !important;
  border-image-width: 8px !important;
  border-image-repeat: stretch !important;
  background: none !important;
  padding: 0 2px !important;
}
html body .bounty-center.won-self,
html body .bounty-center.won-player,
html body .bounty-center.won-p1,
html body .bounty-center.won-p2 {
  border-image-source: url("won-bounty-frame.png?v=1") !important;
  background: none !important;
}
html body .bounty-center.lost-self,
html body .bounty-center.won-ai {
  border-image-source: url("lost-bounty-frame.png?v=1") !important;
  background: none !important;
}

/* 9 — Hand area. The cards and fan geometry stay untouched. */
html body .hand-area {
  box-sizing: border-box;
  border: 8px solid transparent !important;
  border-image-source: url("hand-area-frame.png?v=1") !important;
  border-image-slice: 8 fill !important;
  border-image-width: 8px !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

/* 8 — Both edge drawers. */
html body .drawer {
  box-sizing: border-box;
  border: 10px solid transparent !important;
  border-image-source: url("drawer-frame.png?v=1") !important;
  /* The sheet is an open-book frame. Its centre contains the book's spine, so
     stretching that centre with `fill` turns the spine into vertical stripes.
     Keep only the supplied rails/corners and give the page area one parchment fill. */
  border-image-slice: 10 !important;
  border-image-width: 10px !important;
  border-image-repeat: stretch !important;
  background: #e7b37f !important;
  color: #4b281f !important;
}
html body .drawer h3,
html body .drawer h4,
html body .drawer li,
html body .drawer .effect-name,
html body .drawer .effect-desc {
  color: #4b281f !important;
  text-shadow: none !important;
}
/* The fixed vertical tabs sit over the page edge. Reserve their width so the
   first/last words in the drawer are never hidden underneath the tab. */
html body .rules-drawer { padding-left: 54px !important; }
html body .specials-drawer { padding-right: 54px !important; }

/* 11 — Opponent portrait frame. The speech bubble keeps its prior parchment sprite. */
html body .opponent-sprite {
  box-sizing: content-box;
  border: 6px solid transparent !important;
  border-image-source: url("opponent-sprite-frame.png?v=1") !important;
  border-image-slice: 6 fill !important;
  border-image-width: 6px !important;
  border-image-repeat: stretch !important;
  background: none !important;
  padding: 0 !important;                /* no inset: the portrait fills the frame */
  margin-left: 20px !important;         /* nudge the portrait off the score box */
}

/* 1 — Both single-player and PvP result banners. */
html body .winner-banner,
html body .match-result-box {
  box-sizing: border-box;
  border: 8px solid transparent !important;
  border-image-source: url("winner-banner-frame.png?v=1") !important;
  border-image-slice: 8 fill !important;
  border-image-width: 8px !important;
  border-image-repeat: stretch !important;
  background: none !important;
  padding: 20px 16px !important;
}
html body .match-result-box {
  width: min(430px, calc(100% - 40px)) !important;
}
html body .winner-banner h2,
html body .winner-banner p,
html body .match-result-box h2,
html body .match-result-box p {
  color: #542e32 !important;
  text-shadow: none !important;
}

/* 7 — PvP connection title: deliberately NOT skinned here.

   This rule used to give `.connection-screen h1` its own frame
   (`connection-title-frame.png`) and, because these selectors are `html body …`
   and carry `!important`, it BEAT `jamelgos-banner-v5.css` — which already lists
   `.connection-screen h1` beside `.title`. The result was that the PvP page
   carried a different heading treatment from the main menu's "Jamelgos Battle!"
   banner even though the banner stylesheet was linked and half-applied (its
   type came through; its artwork, killed by `background: none !important`, did
   not). The PvP heading now gets the same banner as the main title. Do not
   re-add a frame for it here: the shared banner owns both headings. */

/* 12/13/14 — Main-menu option states. The source frame supplies both the
   border and black panel surface; existing figures, labels and lock badge remain. */
html body .player-options .player-option-btn {
  box-sizing: border-box;
  border: 12px solid transparent !important;
  border-image-source: url("player-option-enabled-frame.png?v=1") !important;
  border-image-slice: 12 fill !important;
  border-image-width: 12px !important;
  border-image-repeat: stretch !important;
  background: none !important;
}
html body .player-options .player-option-btn.coming-soon {
  border-image-source: url("player-option-disabled-frame.png?v=1") !important;
  background: none !important;
  opacity: .72 !important;
  filter: none;
}
html body .player-options .player-option-btn.pvp-option {
  border-image-source: url("player-option-pvp-frame.png?v=1") !important;
  background: none !important;
}
html body .player-options .player-option-btn:hover,
html body .player-options .player-option-btn.selected {
  filter: brightness(1.18);
}

/* The new board frame adds 12px above each lane. Extend the existing slide by
   12px so opponent cards still begin at the same page/board entry point. */
@keyframes opp-slide-in-tl {
  0%   { translate: -100px -192px; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes opp-slide-in-top {
  0%   { translate: 0 -192px; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes opp-slide-in-tr {
  0%   { translate: 100px -192px; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}

@media (max-width: 800px) {
  html body .board {
    border-width: 8px !important;
    border-image-width: 8px !important;
    padding: 4px !important;
  }
  html body .status-panel.rpgui-container,
  html body .status-panel {
    border-width: 8px !important;
    border-image-width: 8px !important;
    padding: 4px 6px !important;
  }
  html body .control-panel.rpgui-container,
  html body .control-panel {
    border-width: 8px !important;
    border-image-width: 8px !important;
    padding: 6px 22px !important;
  }
  html body .drawer {
    border-width: 8px !important;
    border-image-width: 8px !important;
  }
  /* The PvP heading's narrow-screen inset is the banner's business now -- see §7. */
}