/* Pokattack - craftpix poker-kit skin (552281). ADDITIVE layer: loaded AFTER
   play.css + rogue.css so it only swaps in the real kit panel/plate art on top
   of the existing structure. No layout or logic changes - pure chrome. Revert =
   remove the <link> in rogue.html. Our neon felt-green palette (play.css tokens)
   is kept; the kit art just replaces the CSS-faked panels, slots and overlays.
   Assets live in /img/kit/ui (curated + web-optimized from the kit). */

/* ---- Room backdrop behind the felt (kit green-room art, dimmed to our vibe) */
body {
    background:
        radial-gradient(circle at 100% 15%, rgba(255, 210, 63, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 0% 55%, rgba(255, 71, 87, 0.10) 0%, transparent 42%),
        linear-gradient(180deg, rgba(8, 18, 12, 0.72) 0%, rgba(6, 16, 10, 0.86) 100%),
        url('/img/kit/ui/room-bg.webp') center top / cover no-repeat,
        #08120c;
    background-attachment: fixed;
}

/* ---- Shark hero: frame the persona portrait in the kit avatar plate ---- */
.arena-table #opponent .bot-face {
    border: none;
    border-radius: 14px;
    padding: 0;
    box-shadow:
        0 0 0 4px rgba(0, 0, 0, 0.35),
        0 10px 26px rgba(0, 0, 0, 0.5),
        0 0 30px -6px var(--bot-color, transparent);
    outline: 2px solid var(--bot-color, rgba(255, 210, 63, 0.55));
    outline-offset: -2px;
}

/* ---- Target track: the kit progress plate instead of the CSS bar -------- */
.target-bar {
    height: 20px;
    border: none;
    background: url('/img/kit/ui/target-track.png') center / 100% 100% no-repeat;
    box-shadow: none;
    padding: 3px 4px;
    display: flex;
    align-items: center;
}
#target-fill {
    height: 12px;
    box-shadow: 0 0 10px rgba(255, 210, 63, 0.6);
}

/* ---- HUD money/chip pills on the real kit score plates ------------------ */
.run-meta .money-pill,
.shop-money {
    background: url('/img/kit/ui/hud-money-panel.png') center / 100% 100% no-repeat;
    border: none;
    box-shadow: none;
    padding: 0.5rem 0.7rem;
}
.run-meta .money-pill { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

/* ---- Shop overlay: kit desk backdrop (item cards keep the neon CSS look;
   the kit has no clean item-plate - background-purchase bakes in "PURCHASE"
   text that would clash with our per-item BUY buttons). ------------------- */
#shop-overlay {
    background:
        linear-gradient(180deg, rgba(6, 16, 10, 0.86), rgba(6, 16, 10, 0.92)),
        url('/img/kit/ui/shop-desk.webp') center bottom / cover no-repeat,
        rgba(6, 16, 10, 0.9);
}

/* ---- Run-over overlay: WIN / LOSE kit panels, titles, coins + stars ----- */
#run-overlay {
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(0, 0, 0, 0) 0%, rgba(6, 16, 10, 0.4) 70%),
        rgba(6, 16, 10, 0.9);
}
#run-overlay .ro-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: min(92%, 560px);
    padding: clamp(2rem, 6vw, 3.4rem) clamp(1.4rem, 5vw, 2.6rem);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#run-overlay.won  .ro-panel { background-image: url('/img/kit/ui/win-panel.webp'); }
#run-overlay.lost .ro-panel { background-image: url('/img/kit/ui/lose-panel.webp'); }

/* Replace the text H2 with the kit title art (keeps the text for a11y). */
#run-overlay h2 {
    width: min(70%, 320px);
    height: 2.4rem;
    text-indent: -9999px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#run-overlay.won  h2 { background-image: url('/img/kit/ui/win-title.png'); }
#run-overlay.lost h2 { background-image: url('/img/kit/ui/lose-title.png'); }

/* Stars flank a win; a coin burst sits behind the score on a win. */
#run-overlay.won .ro-panel::before,
#run-overlay.won .ro-panel::after {
    content: '';
    position: absolute;
    top: 8%;
    width: 86px;
    height: 86px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.95;
    pointer-events: none;
}
#run-overlay.won .ro-panel::before { left: 4%;  background-image: url('/img/kit/ui/stars-left.png'); }
#run-overlay.won .ro-panel::after  { right: 4%; background-image: url('/img/kit/ui/stars-right.png'); }