/* ==========================================================================
   Choose Your Opponent - halved build (opponent-v1.css)
   --------------------------------------------------------------------------
   The section is built at 0.5x end to end: the frame sprites are the -sm
   (0.5x LANCZOS) cuts at their native size, every box/padding/margin is half of
   the first build, and the card text scales with the card via cqw. At 1440 the
   panel is 540x~256, the cards ~127x166 and the button ~265x52 - half of the
   previous 1080x513 / 253x332 / 522x104.
   The 1:1 sheets (op-bg-sheet.png, op-title-sheet.png, op-btn-sheet.png) stay
   deployed but unreferenced: pointing this file back at them with the
   44/117/56/108 insets is the one-file way to go large again.

   Art (cut from the supplied sprites by build_assets.py / stitch_sheets.py):
     op-bg-sheet-sm.png    200x245  panel frame, 9-slice insets 22 / 58 / 28 / 54
     op-title-sheet-sm.png 118x44   plaque, 3-slice caps 45 / mid 28
     op-btn-sheet-sm.png    60x52   button, 3-slice caps 26 / mid 8
     op-card.png           257x337  opponent card (parchment window + name plate)
     op-avatar-*.png                Joy Wilo / Seto Calvo / Yogi Moto

   Measured 2x2 block uniformity: frame art 88-99% (not a clean 2x pixel render)
   and the portrait sheet 1% (smooth) - so the 0.5x cut is LANCZOS and
   image-rendering stays `auto`.

   Card geometry from opcard_824533.png:
     window      x 24..240, y  20..248  ->  left 9.34%  top 5.93%  w 84.44%  h 67.95%
     name plate  x 24..240, y 269..324  ->  left 9.34%  top 79.82% w 84.44%  h 16.62%
   ========================================================================== */

.opponent-panel {
    position: relative;
    /* 502px, not 540px: the cards are one third of (width - 160), so 502 lands them at
       114px against the old 126.7px - the ~10% reduction that lifts the Easy/Normal/Hard
       captions clear of the bottom frame. */
    width: min(502px, 96vw);
    margin: 29px auto 6px;
    /* 14px, not 4px: the label row is the panel's last content, so the caption to frame
       clearance IS this padding - at 4px the captions sat on the border. */
    padding: 20px 11px 14px;
    box-sizing: border-box;
    border: 22px solid transparent;
    border-width: 22px 58px 28px 54px;
    /* longhands, not the shorthand: `fill` has to be part of border-image-slice, and the
       sheet's middle region IS the panel's green interior - without it the page backdrop
       shows through the frame */
    border-image-source: url('op-bg-sheet-sm.png');
    border-image-slice: 22 58 28 54 fill;
    border-image-repeat: repeat;
    /* Hidden until the 2-player square is picked - and `display: none`, not
       visibility/opacity: the panel is out of the layout when it is not shown, so it
       cannot leave a reserved-but-empty frame reading as a gap between the mode squares
       and the START BATTLE button. The section is shown only while VS CPU is selected. */
    display: none;
}

.opponent-panel.visible {
    display: block;
}

/* plaque straddling the panel's top edge, like the reference */
.opponent-title {
    position: absolute;
    left: 50%;
    top: -23px;
    transform: translateX(-50%);
    margin: 0;
    height: 44px;
    padding: 0 8px;
    border: 0 solid transparent;
    border-width: 0 45px;
    /* 0 top/bottom insets: the plaque's own inner bar is the middle region, so it
       only paints with `fill` - without it the plaque's centre is transparent */
    border-image-source: url('op-title-sheet-sm.png');
    border-image-slice: 0 45 0 45 fill;
    border-image-repeat: repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Dogica", sans-serif;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #f3d7a0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
    pointer-events: none;
}

.opponent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    width: 100%;
}

.opponent-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.opponent-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 257 / 337;
    background: url('op-card.png') center / 100% 100% no-repeat;
    container-type: inline-size;
    transition: filter .15s ease;
}

.opponent-avatar {
    position: absolute;
    left: 9.34%;
    top: 5.93%;
    width: 84.44%;
    height: 67.95%;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.opponent-name {
    position: absolute;
    left: 9.34%;
    top: 79.82%;
    width: 84.44%;
    height: 16.62%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 10.1cqw;
    font-weight: 700;
    line-height: 1;
    color: #f6f6f8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
    white-space: nowrap;
}

.opponent-level {
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(.62rem, .78vw, .88rem);
    line-height: 1;
    color: #e8e0cd;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* the three supplied portraits, cropped from opponents_294fd0.png */
.opponent-option[data-level="easy"] .opponent-avatar { background-image: url('op-avatar-joy.png'); }
.opponent-option[data-level="normal"] .opponent-avatar { background-image: url('op-avatar-seto.png'); }
.opponent-option[data-level="hard"] .opponent-avatar { background-image: url('op-avatar-yogi.png'); }

.opponent-option:hover .opponent-card {
    filter: brightness(1.1);
}

.opponent-option.selected .opponent-card {
    filter: brightness(1.14) drop-shadow(0 0 7px rgba(255, 208, 110, .75));
}

.opponent-option.selected .opponent-level {
    color: #ffd978;
}

.opponent-option:focus-visible .opponent-card {
    outline: 2px solid #ffd978;
    outline-offset: 3px;
}

/* the real value carrier the game reads in startGame() */
.opponent-panel .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Start Battle, re-skinned with the supplied button sprite ---------- */
.start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* a little more air between the squares (or the opponent section) and the button:
       the mode grid / panel keep their own 6px bottom margin, this adds the rest.
       Declared here, not in choose-path-v2.css, because this sheet loads later and both
       style .start-btn. */
    margin: 35px auto 0;
    height: 52px;
    padding: 0 12px;
    border: 0 solid transparent;
    border-width: 0 26px;
    /* same trap as the plaque: the button's face is the fill region */
    border-image-source: url('op-btn-sheet-sm.png');
    border-image-slice: 0 26 0 26 fill;
    border-image-repeat: repeat;
    background: none;
    box-shadow: none;
    font-family: "Dogica", sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #f7db92;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
    cursor: pointer;
}

.start-btn:hover:not(:disabled) {
    filter: brightness(1.08);
}

.start-btn:disabled {
    /* clearly dimmer than the live state, but the wood must still read as wood */
    filter: brightness(.88) saturate(.72);
    cursor: not-allowed;
    color: #cbb488;
}

/* ---- narrow breakpoints ---------------------------------------------- */
@media (max-width: 560px) {
    .opponent-title {
        font-size: 12px;
    }
    .opponent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    /* the third opponent sits centred under the first two */
    .opponent-option:nth-child(3) {
        grid-column: 1 / -1;
        width: calc(50% - 5px);
        justify-self: center;
    }
    .opponent-level {
        font-size: .7rem;
    }
}

@media (max-width: 420px) {
    /* the plaque must stay narrower than the panel at the smallest widths */
    .opponent-title {
        font-size: 10.5px;
        padding: 0 6px;
    }
}