/* Bridgeroo SLAM RUN - bridge roguelike run chrome. Layers on top of play.css
   (shared felt table, procedural cards, btn-deal 9-slice buttons, Lingo feed).
   Only the run-specific bits live here: the ante/target HUD, the gadget + deal-
   edit build, your 13-card hand + the proposed contract, the resolved-board
   reveal, the floating score pop, and the shop / run-over overlays. Palette
   tokens come from style.css (--corn gold, --lime felt-green, --sky card-red,
   --magenta/--grape indigo, --berry, --tangerine). */

.play-head { display: flex; align-items: center; gap: 10px; }
.play-head .logo {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-size: 1.4rem; color: var(--text); text-decoration: none;
}
.play-head .logo .wm-a { color: var(--corn); }
.play-head .logo .wm-b { color: var(--grape); }
.mode-tag {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-size: 0.62rem;
    color: var(--lime);
    letter-spacing: 0.08em;
    padding: 0.15em 0.6em;
    border-radius: 8px;
    background: rgba(46, 230, 160, 0.14);
    border: 1px solid rgba(46, 230, 160, 0.5);
    text-shadow: 0 0 12px rgba(46, 230, 160, 0.5);
}

/* ---- dealer / opponent hero ---- */
#opponent { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
#bot-face {
    width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(0,0,0,0.35));
    border: 2px solid var(--bot-color, var(--corn));
    box-shadow: 0 0 16px -2px var(--bot-color, var(--corn));
    transition: transform 0.14s ease;
}
#bot-face.react { animation: botpop 0.4s ease; }
@keyframes botpop { 0%,100%{transform:scale(1)} 40%{transform:scale(1.14)} }
#bot-name { font-family: 'Titan One', sans-serif; font-size: 1rem; color: var(--corn); }
#bot-tier { font-size: 0.78rem; color: var(--text-dim); }
#dealer-speech {
    min-height: 1.3em; font-size: 0.88rem; font-style: italic;
    color: var(--text-dim); line-height: 1.4; margin: 4px 0 6px;
}
#dealer-speech.spicy { color: var(--sky); font-style: normal; font-weight: 600; }
#dealer-speech.pop { animation: speechpop 0.4s ease; }
@keyframes speechpop { 0%{opacity:0.2; transform:translateY(4px)} 100%{opacity:1; transform:translateY(0)} }

/* ---- run status ---- */
#run-status .ante-line {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.55rem;
}
.ante-label { font-family: 'Titan One', sans-serif; font-size: 1.05rem; color: var(--corn); text-shadow: 0 0 10px rgba(255,210,63,0.4); }
.hands-left { font-size: 0.85rem; color: var(--text-dim); }
.hands-left span { color: var(--sky); font-weight: 800; }

.blind-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.55rem; }
.blind-tag {
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.82rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    background: rgba(46, 230, 160, 0.16); border: 1px solid rgba(46, 230, 160, 0.5); color: var(--lime);
}
.blind-tag.blind-big { background: rgba(255,210,63,0.16); border-color: rgba(255,210,63,0.55); color: var(--corn); }
.blind-tag.blind-boss { background: rgba(255,59,107,0.18); border-color: var(--sky); color: var(--sky); }
.blind-dots { display: flex; gap: 0.3rem; }
.blind-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); }
.blind-dot.on { background: var(--lime); box-shadow: 0 0 8px rgba(46,230,160,0.6); }
.blind-dot.boss.on { background: var(--sky); box-shadow: 0 0 8px rgba(255,59,107,0.6); }

.target-row { margin-bottom: 0.6rem; }
.target-bar {
    height: 14px; border-radius: 999px; background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.22); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
#target-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--tangerine), var(--corn));
    box-shadow: 0 0 10px rgba(255,210,63,0.6);
    transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
}
#target-fill.full { background: linear-gradient(90deg, var(--lime), #7dffce); box-shadow: 0 0 12px rgba(46,230,160,0.7); }
.target-nums { margin-top: 0.3rem; text-align: right; font-weight: 700; font-size: 0.9rem; color: var(--text-dim); }
.target-nums span:first-child { color: var(--corn); }

.run-meta { display: flex; gap: 0.5rem; }
.run-meta span {
    flex: 1; padding: 0.35rem 0.5rem; border-radius: 10px;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.18);
    font-size: 0.8rem; color: var(--text-dim); text-align: center;
}
.run-meta span span { font-weight: 800; }
.money-pill span { color: var(--lime); }
.redeal-pill span { color: var(--sky); }
.score-pill span { color: var(--berry); }

#boss-banner {
    margin-top: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,59,107,0.22), rgba(163,17,44,0.28));
    border: 1px solid var(--sky); box-shadow: 0 0 14px rgba(255,59,107,0.35);
    display: flex; flex-direction: column; gap: 0.15rem;
}
#boss-banner .boss-name { font-family: 'Titan One', sans-serif; color: var(--sky); font-size: 0.95rem; text-shadow: 0 0 8px rgba(255,59,107,0.5); }
#boss-banner .boss-text { font-size: 0.8rem; color: var(--text-dim); }
/* FEAT-0009: the "boss ahead" telegraph is dimmer + amber, a heads-up not a live threat. */
#boss-banner.boss-ahead {
    background: linear-gradient(180deg, rgba(255,210,63,0.14), rgba(0,0,0,0.28));
    border-color: rgba(255,210,63,0.55); box-shadow: 0 0 12px -2px rgba(255,210,63,0.4);
}
#boss-banner.boss-ahead .boss-ahead-tag {
    align-self: flex-start; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em;
    padding: 0.05rem 0.4rem; border-radius: 999px; background: rgba(255,210,63,0.2); color: var(--corn);
}
#boss-banner.boss-ahead .boss-name { color: var(--corn); text-shadow: 0 0 8px rgba(255,210,63,0.4); }

/* ---- tier levels ---- */
.hand-levels { display: flex; flex-direction: column; gap: 0.2rem; }
.hl-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0.4rem; border-radius: 8px; font-size: 0.8rem; }
.hl-row.leveled { background: rgba(46,230,160,0.1); }
.hl-name { color: var(--text-dim); font-weight: 700; }
.hl-lvl { color: var(--corn); font-weight: 800; font-size: 0.75rem; }
.hl-row.leveled .hl-lvl { color: var(--lime); }
.hl-stat { color: var(--sky); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- the build ---- */
.slot-count { color: var(--text-dim); font-weight: 700; }
.gadgets { display: flex; flex-direction: column; gap: 0.4rem; }
.build-empty { font-size: 0.85rem; color: var(--text-dim); font-style: italic; }
.gadget {
    padding: 0.45rem 0.6rem; border-radius: 10px;
    background: linear-gradient(180deg, rgba(179,79,255,0.16), rgba(0,0,0,0.28));
    border: 1px solid rgba(179,79,255,0.5); box-shadow: 0 0 10px -3px rgba(179,79,255,0.5);
}
.gadget-name { font-weight: 800; color: var(--berry); font-size: 0.9rem; }
.gadget-desc { font-size: 0.78rem; color: var(--text-dim); line-height: 1.3; }
.gadget-controls { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.gadget-sell {
    margin-left: auto; padding: 0.18rem 0.55rem; border-radius: 999px; cursor: pointer;
    font-family: 'Titan One', sans-serif; font-size: 0.68rem; letter-spacing: 0.03em;
    color: var(--lime); background: rgba(46,230,160,0.14); border: 1px solid rgba(46,230,160,0.5);
}
.gadget-sell:hover:not(:disabled) { background: rgba(46,230,160,0.26); }
.gadget-sell:disabled { opacity: 0.45; cursor: default; }
.gadget-move {
    padding: 0.1rem 0.4rem; border-radius: 7px; cursor: pointer; line-height: 1;
    font-size: 0.7rem; color: var(--berry);
    background: rgba(179,79,255,0.14); border: 1px solid rgba(179,79,255,0.5);
}
.gadget-move:hover:not(:disabled) { background: rgba(179,79,255,0.28); }
.gadget-move:disabled { opacity: 0.35; cursor: default; }
/* FEAT-0046: gadget editions (shiny variants). A tinted border on the item plus a
   small pill badge naming the edition and its bonus. Three flavours: foil (silver
   /blue chips), holo (magenta mult), polychrome (rainbow x-mult). */
.gadget-edition, .si-edition {
    display: inline-block; border-radius: 999px; font-weight: 800; letter-spacing: 0.02em;
    line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.gadget-edition { margin-left: 0.4rem; padding: 0.02rem 0.4rem; font-size: 0.62rem; vertical-align: middle; }
.si-edition { padding: 0.1rem 0.5rem; font-size: 0.7rem; align-self: flex-start; }
.edition-foil       { border-color: #7fd3ff !important; box-shadow: 0 0 12px -2px rgba(127,211,255,0.7) !important; }
.edition-holo       { border-color: #ff6bd0 !important; box-shadow: 0 0 12px -2px rgba(255,107,208,0.7) !important; }
.edition-polychrome { border-color: #b34fff !important; box-shadow: 0 0 14px -1px rgba(179,79,255,0.8) !important; }
.gadget-edition.edition-foil, .si-edition.edition-foil { background: linear-gradient(90deg,#8fd8ff,#d9f3ff); color: #06304a; }
.gadget-edition.edition-holo, .si-edition.edition-holo { background: linear-gradient(90deg,#ff6bd0,#ffb3e6); color: #4a0630; }
.gadget-edition.edition-polychrome, .si-edition.edition-polychrome {
    background: linear-gradient(90deg,#ff5c8a,#ffd23f,#2ee6a0,#7fd3ff,#b34fff); color: #0a0018;
}
.deck-edits { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.deck-edit {
    padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(255,210,63,0.16);
    border: 1px solid rgba(255,210,63,0.5); font-size: 0.75rem; font-weight: 700; color: var(--corn); cursor: default;
}

/* ---- Vouchers (permanent run-wide upgrades, FEAT-0003) ---- */
.vouchers { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.voucher-pill {
    padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(108,92,231,0.18);
    border: 1px solid rgba(108,92,231,0.6); font-size: 0.75rem; font-weight: 700; color: var(--magenta); cursor: default;
}
.shop-item.voucher { border-color: rgba(108,92,231,0.6); box-shadow: 0 0 14px -3px rgba(108,92,231,0.55); }
.shop-item.voucher .si-tag { color: var(--magenta); }
.shop-item.pack { border-color: rgba(179,79,255,0.6); box-shadow: 0 0 14px -3px rgba(179,79,255,0.55); }
.shop-item.pack .si-tag { color: var(--berry); }

/* ---- Booster pack picker (FEAT-0004) ---- */
.pack-picker {
    margin-top: 0.75rem; padding: 0.75rem; border-radius: 12px;
    background: linear-gradient(180deg, rgba(179,79,255,0.16), rgba(0,0,0,0.32));
    border: 1px solid rgba(179,79,255,0.55); box-shadow: 0 0 18px -4px rgba(179,79,255,0.5);
}
.pack-head { text-align: center; font-weight: 800; letter-spacing: 0.06em; color: var(--berry); margin-bottom: 0.6rem; }
.pack-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.pack-choice {
    display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 8rem; max-width: 12rem;
    padding: 0.55rem; border-radius: 10px; background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.14);
}
.pack-choice .pc-name { font-weight: 700; }
.pack-choice .pc-desc { font-size: 0.75rem; color: var(--text-dim); flex: 1; }
.pack-choice .pc-pick { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
#pack-skip { display: block; margin: 0.6rem auto 0; }

/* ---- Convention Cards (one-shot tactical consumables, FEAT-0001) ---- */
.tactics { display: flex; flex-direction: column; gap: 0.4rem; }
.tactic {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.55rem; border-radius: 10px;
    background: linear-gradient(180deg, rgba(46,230,160,0.14), rgba(0,0,0,0.28));
    border: 1px solid rgba(46,230,160,0.5); box-shadow: 0 0 10px -3px rgba(46,230,160,0.45);
}
.tactic-body { flex: 1; min-width: 0; }
.tactic-name { font-weight: 800; color: var(--lime); font-size: 0.9rem; }
.tactic-desc { font-size: 0.76rem; color: var(--text-dim); line-height: 1.3; }
.tactic-use { flex: none; padding: 0.3rem 0.6rem; font-size: 0.72rem; }
.tactic-use:disabled { opacity: 0.45; cursor: default; }

/* ---- the felt: contract badge, hand, dummy, reveal ---- */
.rogue-table {
    position: relative; min-height: 460px; display: flex; flex-direction: column;
    padding: 18px; border-radius: 22px;
    background: radial-gradient(circle at 50% 40%, #1c9e6d 0%, #128a5c 44%, #0c6b47 100%);
    box-shadow: inset 0 0 60px rgba(0,0,0,0.45), 0 18px 40px rgba(0,0,0,0.4);
    border: 3px solid #0a5238;
}
#hand-eval {
    align-self: center; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    padding: 0.4rem 1.2rem; border-radius: 999px; background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.18); min-height: 2.1rem; justify-content: center; margin-bottom: 10px;
}
#eval-name { font-family: 'Titan One', sans-serif; font-size: 1.1rem; color: var(--corn); text-shadow: 0 0 10px rgba(255,210,63,0.4); }
#eval-score { font-size: 0.82rem; color: var(--text-dim); }

.contract-badge {
    align-self: center; display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Titan One', sans-serif; font-size: 1.6rem; color: var(--text);
    padding: 0.2rem 1rem; border-radius: 14px; background: rgba(0,0,0,0.3);
    border: 1px solid var(--corn); box-shadow: 0 0 16px -4px var(--corn); margin-bottom: 10px;
}
.contract-badge .cb-strain.red { color: var(--sky); }
.contract-badge .cb-pushed { font-size: 0.7rem; color: var(--tangerine); font-family: 'Outfit', sans-serif; font-weight: 800; }

.hand-block { margin-top: 8px; }
.hand-label { font-weight: 700; color: var(--text-dim); margin-bottom: 6px; font-size: 0.9rem; text-align: center; }
.hand-label .hcp { color: var(--corn); font-weight: 700; margin-left: 6px; }
.rogue-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; min-height: 74px; }
.rogue-hand .card { width: 46px; height: 64px; }
.rogue-hand .card .rk { font-size: 1.05rem; }
.hand-block.dummy .rogue-hand .card { width: 38px; height: 54px; opacity: 0.96; }
.hand-block.dummy { margin-top: 12px; }

#result-panel {
    align-self: center; text-align: center; margin-top: 10px; min-height: 1.2em;
    font-weight: 700; color: var(--text-dim);
}
#result-panel .made { color: var(--lime); }
#result-panel .set { color: var(--sky); }
#result-panel .slam { color: var(--berry); }

/* ---- score pop ---- */
#score-pop { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; text-align: center; z-index: 4; }
#score-pop .sp-total { font-family: 'Titan One', sans-serif; font-size: 2.4rem; color: var(--lime); text-shadow: 0 0 18px rgba(46,230,160,0.7), 0 2px 4px rgba(0,0,0,0.6); line-height: 1; }
#score-pop .sp-break { font-size: 0.85rem; font-weight: 700; color: var(--corn); text-shadow: 0 2px 4px rgba(0,0,0,0.7); }
#score-pop.go { animation: score-rise 1.4s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes score-rise {
    0% { transform: translate(-50%, 14px) scale(0.6); opacity: 0; }
    18% { transform: translate(-50%, -4px) scale(1.15); opacity: 1; }
    72% { transform: translate(-50%, -34px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -66px) scale(0.95); opacity: 0; }
}

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

/* ---- action buttons ---- */
.actions { display: flex; flex-direction: column; gap: 6px; }
.actions .btn-deal { width: 100%; }
.btn-deal.push {
    border-image-source: url('/img/ui/btnbg-gold.png'); color: #3a2a00;
}
.btn-deal.redeal {
    border-image-source: url('/img/ui/btnbg-blue.png'); color: #071f33;
}
.btn-deal:disabled { filter: grayscale(0.7) brightness(0.8); opacity: 0.6; cursor: default; }

/* FEAT-0048: skip-blind offer. Sits under the action buttons; the SKIP button uses
   the green felt tone and the blurb names the tag you would bank. */
.skip-offer {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 6px;
    padding: 0.4rem 0.5rem; border-radius: 10px;
    background: rgba(46,230,160,0.1); border: 1px dashed rgba(46,230,160,0.5);
}
.btn-deal.skip { border-image-source: url('/img/ui/btnbg-green.png'); color: #06331f; flex: 0 0 auto; }
.skip-desc { font-size: 0.74rem; color: var(--lime); line-height: 1.25; }

/* ---- shop + run overlays ---- */
#shop-overlay, #run-overlay {
    position: absolute; inset: 0; display: none; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.7rem; padding: 1.2rem;
    border-radius: 22px; background: rgba(6,16,10,0.92); z-index: 6; text-align: center; overflow-y: auto;
}
#shop-overlay.show, #run-overlay.show { display: flex; }
#shop-overlay h2, #run-overlay h2 { font-family: 'Titan One', 'Arial Black', sans-serif; color: var(--corn); font-size: 1.7rem; }
#run-overlay h2.win { color: var(--lime); }
#run-overlay h2.loss { color: var(--sky); }
.shop-sub { color: var(--text-dim); font-size: 0.9rem; }
.shop-money { font-family: 'Titan One', sans-serif; color: var(--lime); font-size: 1.1rem; }
.shop-money span { font-weight: 800; }
.shop-items { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; width: 100%; max-width: 620px; }
.shop-sold { color: var(--text-dim); font-style: italic; }
/* FEAT-0070: boss-drop banner + the boss-bounty call-out in the clear status. */
.boss-drop {
    font-family: 'Titan One', sans-serif; font-size: 0.82rem; letter-spacing: 0.04em;
    color: #2a0a00; padding: 0.3rem 0.9rem; border-radius: 999px;
    background: linear-gradient(90deg,#ffd23f,#ff9d3f,#ffd23f);
    box-shadow: 0 0 16px -2px rgba(255,210,63,0.8);
}
.bounty { color: var(--corn); font-weight: 800; }
.shop-item {
    flex: 1 1 170px; max-width: 200px; display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.8rem 0.7rem; border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0,0,0,0.3));
    border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.shop-item.gadget { border-color: rgba(179,79,255,0.55); box-shadow: 0 0 14px -3px rgba(179,79,255,0.5); }
.shop-item.deck { border-color: rgba(255,210,63,0.55); box-shadow: 0 0 14px -3px rgba(255,210,63,0.5); }
.shop-item.system { border-color: rgba(46,230,160,0.55); box-shadow: 0 0 14px -3px rgba(46,230,160,0.5); }
.si-tag { align-self: center; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(0,0,0,0.35); color: var(--text-dim); }
.shop-item.gadget .si-tag { color: var(--berry); }
.shop-item.deck .si-tag { color: var(--corn); }
.shop-item.system .si-tag { color: var(--lime); }
.shop-item.tactic { border-color: rgba(46,230,160,0.55); box-shadow: 0 0 14px -3px rgba(46,230,160,0.5); }
.shop-item.tactic .si-tag { color: var(--lime); }
.si-name { font-family: 'Titan One', sans-serif; font-size: 1rem; color: var(--corn); }
.si-desc { font-size: 0.82rem; color: var(--text-dim); line-height: 1.35; flex: 1; }
.shop-item .si-buy { margin-top: 0.3rem; border-width: 14px 18px 18px 16px; font-size: 0.85rem; }
.shop-actions { display: flex; gap: 0.7rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.btn-deal.reroll { border-image-source: url('/img/ui/btnbg-blue.png'); color: #071f33; }

#run-score { display: flex; flex-direction: column; align-items: center; }
#run-score .rs-label { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
#run-score .rs-total { font-family: 'Titan One', sans-serif; font-size: 3rem; color: var(--berry); text-shadow: 0 0 20px rgba(179,79,255,0.6); line-height: 1; }
#run-overlay p, #shop-overlay p { color: var(--text-dim); max-width: 380px; }

/* FEAT-0110 meta-progression: run-over unlock toast + lifetime stats. */
#run-unlocks { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 380px; }
#run-unlocks .unlock {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(46,230,160,0.12); border: 1px solid rgba(46,230,160,0.45);
    animation: unlockpop 0.45s cubic-bezier(0.2,1.4,0.4,1) both;
}
#run-unlocks .unlock .u-tag { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); font-weight: 700; }
#run-unlocks .unlock .u-name { color: var(--text); font-weight: 600; }
@keyframes unlockpop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#run-stats { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; max-width: 380px; }
#run-stats .rstat { display: flex; flex-direction: column; align-items: center; }
#run-stats .rstat .rv { font-family: 'Titan One', sans-serif; font-size: 1.3rem; color: var(--corn); line-height: 1; }
#run-stats .rstat .rl { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-top: 3px; }

/* FEAT-0116 run history panel: lifetime summary + recent run log. */
.lifetime { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 0.8rem; color: var(--text-dim); }
.lifetime b { color: var(--corn); font-weight: 700; }
.run-log { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.run-log .rl-empty { color: var(--text-dim); font-size: 0.85rem; }
.run-log .rl-row {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--text-dim);
}
.run-log .rl-row.win { border-left-color: var(--lime); }
.run-log .rl-row.loss { border-left-color: var(--sky); }
.run-log .rl-outcome { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.run-log .rl-row.win .rl-outcome { color: var(--lime); }
.run-log .rl-row.loss .rl-outcome { color: var(--sky); }
.run-log .rl-mid { display: flex; flex-direction: column; min-width: 0; }
.run-log .rl-mid .rl-ante { font-size: 0.8rem; color: var(--text); }
.run-log .rl-mid .rl-dealer { font-size: 0.68rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-log .rl-score { font-family: 'Titan One', sans-serif; font-size: 1rem; color: var(--corn); }

/* FEAT-0117 feats: in-run badge pop + the Feats card grid + run-over feat toast. */
#feat-pop {
    position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none; z-index: 6;
}
.feat-badge {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 18px; border-radius: 14px; text-align: center;
    background: linear-gradient(180deg, rgba(108,92,231,0.95), rgba(108,92,231,0.75));
    border: 1px solid var(--corn); box-shadow: 0 8px 26px rgba(0,0,0,0.45);
}
.feat-badge.go { animation: featpop 0.5s cubic-bezier(0.2,1.5,0.4,1) both; }
.feat-badge .fb-tag { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--corn); font-weight: 700; }
.feat-badge .fb-name { font-family: 'Titan One', sans-serif; font-size: 1.15rem; color: #fff; }
.feat-badge .fb-desc { font-size: 0.72rem; color: rgba(255,255,255,0.85); }
@keyframes featpop { from { transform: scale(0.6) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

#run-feats { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 380px; }
#run-feats .unlock.feat {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(108,92,231,0.14); border: 1px solid rgba(108,92,231,0.5);
    animation: unlockpop 0.45s cubic-bezier(0.2,1.4,0.4,1) both;
}
#run-feats .unlock.feat .u-tag { color: var(--magenta); }

.achievements { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.ach {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--text-dim);
}
.ach.earned { border-left-color: var(--magenta); background: rgba(108,92,231,0.1); }
.ach.locked { opacity: 0.5; }
.ach .ach-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.ach.earned .ach-name { color: #fff; }
.ach .ach-desc { font-size: 0.68rem; color: var(--text-dim); }

/* FEAT-0111 daily run: badge, starter button, share card. */
.daily-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    font-size: 0.6rem; letter-spacing: 0.12em; font-weight: 700; vertical-align: middle;
    color: #0c1b12; background: var(--corn); text-transform: uppercase;
}
.run-mode-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; flex-wrap: wrap; }
.daily-btn {
    font-family: 'Titan One', sans-serif; font-size: 0.78rem; letter-spacing: 0.04em;
    padding: 7px 14px; border-radius: 10px; cursor: pointer; color: #0c1b12;
    background: linear-gradient(180deg, var(--corn), #d9a520); border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.daily-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.daily-hint { font-size: 0.68rem; color: var(--text-dim); flex: 1; min-width: 120px; }

/* ---- Endless run (FEAT-0118): spade-indigo to read distinct from the gold daily ---- */
.endless-btn { background: linear-gradient(180deg, #fff3b0, var(--corn) 45%, #e8a800); color: #3a2400; }
.btn-deal.endless { border-image-source: url('/img/ui/btnbg-gold.png'); color: #3a2400; }

/* ---- Ascension stakes (FEAT-0020) ---- */
.stake-row { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.stake-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--corn); }
.stake-select {
    flex: 1; min-width: 130px; max-width: 100%;
    font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 600;
    padding: 5px 8px; border-radius: 8px; cursor: pointer;
    color: var(--text); background: rgba(0,0,0,0.35); border: 1px solid rgba(255,210,63,0.4);
}
.stake-select:focus { outline: none; border-color: var(--corn); }
.stake-hint { font-size: 0.66rem; color: var(--text-dim); flex-basis: 100%; }
.stake-badge {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 800; text-transform: uppercase;
    color: #0c1b12; background: linear-gradient(180deg, var(--corn), #d9a520);
}
.run-over-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn-deal.daily { background: linear-gradient(180deg, var(--corn), #d9a520); color: #0c1b12; }
.btn-deal.share { border-image-source: url('/img/ui/btnbg-gold.png'); color: #3a2400; }
#run-share { font-size: 0.8rem; color: var(--corn); text-align: center; max-width: 380px; }

@media (max-width: 920px) {
    .arena { grid-template-columns: 1fr; }
    .panel { order: 2; }
}

/* FEAT-0113 first-run coach: full-screen click-blocker + a spotlight ring that
   dims everything but the highlighted control, plus the inline callout card. */
.coach-veil { position: fixed; inset: 0; z-index: 9998; background: transparent; }
.coach-ring {
    position: fixed; z-index: 9999; border-radius: 12px; pointer-events: none;
    border: 2px solid var(--corn);
    box-shadow: 0 0 0 9999px rgba(4,10,7,0.74), 0 0 18px rgba(255,210,63,0.55);
    transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease;
}
.coach-card {
    position: fixed; z-index: 10000; width: min(320px, calc(100vw - 24px));
    padding: 16px 18px 14px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(14,26,18,0.98), rgba(8,18,12,0.98));
    border: 1px solid var(--corn); box-shadow: 0 14px 40px rgba(0,0,0,0.55);
    transition: left 0.22s ease, top 0.22s ease;
}
.coach-card .coach-title {
    font-family: 'Titan One', sans-serif; color: var(--corn);
    font-size: 1.05rem; margin-bottom: 6px;
}
.coach-card .coach-body { font-size: 0.85rem; line-height: 1.45; color: var(--text); }
.coach-card .coach-foot {
    display: flex; align-items: center; gap: 12px; margin-top: 14px;
}
.coach-card .coach-count { font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.08em; }
.coach-card .coach-skip {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 0.78rem; text-decoration: underline;
}
.coach-card .coach-skip:hover { color: var(--text); }
.coach-card .coach-next {
    padding: 7px 16px; font-size: 0.8rem;
}

/* FEAT-0115 run feel: sound toggle, animated score tally, run-over brag card. */

/* Sound toggle, tucked into the run-status header. */
.sound-toggle {
    float: right; cursor: pointer; font-family: 'Outfit', sans-serif;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
    padding: 2px 8px; border-radius: 999px; color: var(--lime);
    background: rgba(46,230,160,0.14); border: 1px solid rgba(46,230,160,0.5);
}
.sound-toggle.muted { color: var(--text-dim); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.sound-toggle:hover { filter: brightness(1.15); }

/* The chips x mult x outcome tally: each factor pops as it lights up. */
#eval-score .tf {
    display: inline-block; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--text-dim); transition: color 0.12s ease;
}
#eval-score .tf-chips.lit { color: var(--sky); }
#eval-score .tf-mult.lit { color: var(--berry); }
#eval-score .tf-out.lit { color: var(--corn); }
#eval-score .tf.lit { animation: tally-pop 0.34s cubic-bezier(0.2,1.6,0.4,1) both; }
#eval-score .tx { margin: 0 0.28em; color: var(--text-dim); opacity: 0.7; }
@keyframes tally-pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* Score pop escalates for a made slam (bigger, gold, a harder glow). */
#score-pop.slam .sp-total { color: var(--corn); font-size: 3rem; text-shadow: 0 0 26px rgba(255,210,63,0.85), 0 2px 6px rgba(0,0,0,0.7); }
#score-pop.set .sp-total { color: var(--sky); font-size: 2rem; }

/* Run-over: the dealer you finished against (mugshot + name) and the brag line. */
#run-dealer { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#run-dealer .rd-face {
    width: 66px; height: 66px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 2.1rem;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.2), rgba(0,0,0,0.4));
    border: 2px solid var(--rd-color, var(--corn)); box-shadow: 0 0 20px -2px var(--rd-color, var(--corn));
}
#run-dealer .rd-name { font-family: 'Titan One', sans-serif; font-size: 0.95rem; color: var(--rd-color, var(--corn)); }
#run-dealer .rd-verb { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#run-brag {
    font-family: 'Titan One', sans-serif; font-size: 1.05rem; color: var(--berry);
    text-shadow: 0 0 14px rgba(179,79,255,0.5); margin: 0;
}

/* 1v1 CLASH seat (/rogue?duel=ID): the run starters and practice-only chrome hide;
   the clash is one capped run, decided by duel-overlay.js. */
.duel-only { display: none; }
body.in-duel .duel-only { display: inline-block; }
body.in-duel .solo-only,
body.in-duel .run-mode-row,
body.in-duel .stake-row,
body.in-duel .run-over-actions,
body.in-duel #league-box,
body.in-duel #history-card { display: none !important; }
.nav-clash { color: var(--corn); font-weight: 700; }