/* Compact game canvas: spend space on Pokémon, decisions and the reel. */
body { min-height: 100svh; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1760px; padding: 18px 28px 22px; flex: 1; }
.game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; min-height: 32px; }
.steps { margin: 0; gap: 24px; font-size: 12px; }
.test-date { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); }
.test-date span { color: var(--mint); font-size: 11px; font-weight: 800; }
.test-date b { color: var(--text); }
.test-date small { font-size: 11px; }
.layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
.game-main { min-width: 0; }
.rival { padding: 16px 18px; margin-bottom: 16px; }
.rival-head { margin-bottom: 10px; align-items: center; }
.rival-name { gap: 10px; }
.rival-name .eyebrow { font-size: 9px; }
.rival-name h2 { font-size: 22px; margin-top: 3px; }
.avatar { width: 36px; height: 36px; font-size: 22px; }
.badge { font-size: 11px; }
.prepare-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; }
.prepare-head .badge { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rival-team { gap: 10px; }
.mini-mon { padding: 6px 8px 10px; }
.rival-ball { position: absolute; left: 8px; top: 8px; width: 25px; height: 25px; pointer-events: none; z-index: 1; }
.rival-ball .ball { transform: scale(.3); transform-origin: top left; }
.mini-mon img { width: 100px; height: 76px; }
.mini-mon strong { font-size: 18px; line-height: 1.3; }
.mini-mon .types { margin: 7px 0 0; }
.types { gap: 5px; flex-wrap: wrap; }
.type { font-size: 12px; padding: 5px 9px; letter-spacing: .25px; line-height: 1.15; color: var(--type-ink, #101827); }
.draft-stage { padding: 16px 18px; }
.draft-round { margin-bottom: 8px; }
.draft-round h2 { font-size: 19px; }
.round-label { font-size: 12px; padding: 7px 11px; }
.reels { gap: 14px; margin: 12px 0; }
.slot { height: 350px; }
.slot.empty small { font-size: 12px; }
.ball { width: 82px; height: 82px; }
.ball.great:before, .ball.ultra:before, .ball.master:before { top: 6px; }
.ball.master:before { font-size: 22px; }
.landed-label { font-size: 12px; }
.card { height: 350px; padding: 13px 12px; display: flex; flex-direction: column; align-items: center; }
.rarity-label { font-size: 11px; line-height: 1.3; }
.card img { height: 108px; flex-shrink: 0; }
.card h3 { font-size: 22px; line-height: 1.2; }
.card .types { margin: 8px 0 10px; }
.card .stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px 8px; width: 100%; font-size: 14px; color: #d3dced; }
.stat-cell { display: flex; flex-direction: column; gap: 2px; background: #ffffff05; border-radius: 5px; padding: 3px 2px; }
.stat-cell small { font-size: 11px; color: #a7b4cd; }
.stat-cell b { font-size: 18px; color: #f2f5fc; line-height: 1.2; }
.card .pick { font-size: 14px; margin-top: auto; padding-top: 8px; }
.card-ball { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; pointer-events: none; }
.card-ball .ball { transform: scale(.39); transform-origin: top left; }
.sprite-frame { --sprite-size: 128px; display: block; position: relative; height: var(--sprite-size); width: 100%; flex-shrink: 0; pointer-events: none; }
.card .sprite-frame img, .mini-mon .sprite-frame img, .outcome-mon .sprite-frame img, .companion .sprite-frame img { position: absolute; width: calc(var(--sprite-size) * var(--sprite-scale, 1)); height: calc(var(--sprite-size) * var(--sprite-scale, 1)); max-width: none; left: 50%; top: 50%; transform: translate(calc(-1 * var(--sprite-x, 50%)), calc(-1 * var(--sprite-y, 50%))); object-fit: contain; }
.mini-mon .sprite-frame { --sprite-size: 90px; }
.card .types { margin: 5px 0 7px; }
.card .stats { gap: 4px 8px; }
.selection-grid .sprite-frame, .bank-grid .sprite-frame { --sprite-size: 82px; }
.selection-grid .card-ball, .bank-grid .card-ball { left: 8px; top: 8px; width: 25px; height: 25px; }
.selection-grid .card-ball .ball, .bank-grid .card-ball .ball { transform: scale(.3); }
#app[data-stage="prepare"] .rival .sprite-frame { --sprite-size: 82px; }
.order-card { min-width: 0; }
.order-card[draggable="true"] { cursor: grab; }
.order-card.dragging { opacity: .45; }
.order-card.drop-target .card { outline: 3px solid var(--mint); outline-offset: 3px; }
.order-number { position: absolute; top: 8px; right: 8px; min-width: 24px; padding: 4px 5px; border-radius: 5px; background: #b7f86a; color: #182311; font-size: 11px; font-weight: 900; }
.benched .order-number { background: #48516a; color: #e5e9f2; font-size: 9px; }
.card-order-controls { display: flex; gap: 5px; margin-top: 3px; }
.card-order-controls button { flex: 1; border: 1px solid var(--line); background: #1d283b; padding: 7px 3px; border-radius: 5px; font-size: 11px; }
.card-order-controls button:hover:not(:disabled) { border-color: var(--mint); }
#app[data-stage="result"] .result-hero > .result-teams { grid-column: 1 / -1; grid-row: 6; }
.result-teams { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; margin-top: 12px; text-align: left; }
.result-team-label { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 12px; }
.result-team-label span { color: var(--muted); }
.outcome-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
.outcome-mon { background: #0c1523; border: 1px solid #2c3e35; border-radius: 8px; text-align: center; padding: 5px; }
.outcome-mon .sprite-frame { --sprite-size: 42px; }
.outcome-mon strong { display: block; font-size: 11px; margin: 3px 0; white-space: nowrap; }
.outcome-status { display: block; font-size: 10px; color: var(--mint); }
.outcome-hp { height: 3px; background: #253047; margin-top: 4px; border-radius: 3px; overflow: hidden; }
.outcome-hp i { display: block; height: 100%; background: var(--mint); }
.outcome-mon.fainted { border-color: #54313c; }
.outcome-mon.fainted .sprite-frame { filter: grayscale(1); opacity: .5; }
.outcome-mon.fainted .outcome-status { color: #fb8290; }
@media (min-width:1200px) {
  #app[data-stage="result"] .result-hero h1 { font-size: 36px; }
  #app[data-stage="result"] .result-numbers { margin: 8px 0; }
  .bank-grid .card { height: 245px; }
  .bank-grid .sprite-frame { --sprite-size: 64px; }
}
@media (max-width:900px) {
  .result-teams { grid-template-columns: 1fr; }
}
@media (max-width:600px) {
  .outcome-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .outcome-mon .sprite-frame { --sprite-size: 52px; }
}
.inspect { font-size: 12px; padding: 7px 0; }
.draft-actions { min-height: 46px; display: flex; align-items: center; justify-content: center; }
.draft-actions.offers-ready { display: none; }
.primary { font-size: 14px; padding: 12px 24px; }
.odds { padding-top: 10px; margin-top: 10px; gap: 18px; }
.odds span { font-size: 11px; }
.side-panel { padding: 17px; margin-bottom: 14px; }
.side-panel h3 { font-size: 16px; }
.roster { gap: 8px; margin-top: 12px; }
.roster-row { height: 62px; padding: 6px 8px; gap: 8px; }
.roster-pick { width: 100%; text-align: left; }
.roster-slot { display: flex; gap: 4px; min-width: 0; }
.roster-slot .roster-pick { flex: 1; min-width: 0; }
.roster-slot[draggable="true"] { cursor: grab; }
.roster-slot[draggable="true"] .roster-pick { cursor: grab; }
.roster-slot.dragging { opacity: .45; }
.roster-slot.drop-target .roster-pick { outline: 2px solid var(--mint); }
.roster-order-controls { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.roster-order-controls button { width: 24px; height: 25px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: #1b2638; font-size: 14px; }
.roster-hint { font-size: 11px; color: var(--muted); margin: 10px 0 0; }
.roster-benched .roster-pick { opacity: .55; }
.roster-benched .roster-number { font-size: 8px; }
.roster-companion { color: var(--mint); font-size: 9px; }
.companion-inspect { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.companion-inspect:hover h3 { color: var(--mint); }
.roster-pick:hover { border-color: var(--rarity); background: #ffffff08; }
.roster-ball { position: relative; width: 21px; height: 21px; margin-left: auto; flex-shrink: 0; pointer-events: none; }
.roster-ball .ball { transform: scale(.25); transform-origin: top left; }
.roster-row strong { font-size: 14px; }
.roster-row .types { justify-content: flex-start; margin: 4px 0 0; }
.roster-row .type { font-size: 9px; padding: 3px 5px; }
.roster-placeholder { font-size: 12px; }
.companion img { height: 80px; width: 100px; }
.companion p { font-size: 12px; margin-top: 8px; }
.companion-days { font-size: 13px; }
.tip { display: none; }
footer { width: 100%; max-width: 1760px; padding: 8px 28px; min-height: 40px; gap: 16px; font-size: 9px; }
footer .icon-button { padding: 6px 10px; font-size: 11px; margin-left: auto; }
footer button { font-size: 12px; }
.selection-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.selection-grid .card { height: 270px; padding: 10px 6px; }
.selection-grid .card > img { height: 64px; }
.selection-grid .card h3 { font-size: 17px; }
.selection-grid .type { font-size: 10px; padding: 4px 6px; }
.selection-grid .stat-cell b { font-size: 15px; }
.selection-grid .stat-cell small { font-size: 9px; }
.selection-grid .card .pick { font-size: 11px; }
.order { gap: 7px; margin: 12px 0; }
.order-item { padding: 5px; }
.notice { padding: 10px; }
#app[data-stage="prepare"] .draft-stage > p { margin: 8px 0; font-size: 12px; }
#app[data-stage="prepare"] .draft-stage > .eyebrow { display: none; }
#app[data-stage="prepare"] .draft-stage > .text-center { margin-top: 14px !important; }
#app[data-stage="prepare"] .draft-hint { display: none; }
#app[data-stage="prepare"] .rival { padding-top: 12px; padding-bottom: 12px; }
#app[data-stage="prepare"] .rival .mini-mon > img { height: 68px; }
.bank-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bank-grid { margin-top: 12px; }
#app[data-stage="result"] .draft-stage > .eyebrow { display: none; }
#app[data-stage="result"] .draft-stage > p { font-size: 12px; margin: 8px 0; }
#app[data-stage="result"] .draft-stage > .text-center { margin-top: 8px !important; }
#app[data-stage="result"] .draft-stage > .text-center .draft-hint { display: none; }
.bank-grid .card { height: 265px; padding: 10px 6px; }
.bank-grid .card > img { height: 64px; }
.bank-grid .card h3 { font-size: 17px; }
.bank-grid .stat-cell b { font-size: 15px; }
.bank-grid .stat-cell small { font-size: 9px; }
.bank-grid .type { font-size: 10px; padding: 4px 6px; }
.bank-grid .card .pick { font-size: 11px; }
.result-hero { padding: 16px; }
.result-hero h1 { font-size: 44px; margin: 8px 0; }
.result-hero > p { margin: 7px 0; }
.result-numbers { margin: 14px 0; }
.share-card { margin: 12px auto; padding: 12px 16px; max-width: 550px; }
.share-card pre { margin: 8px 0 16px; line-height: 1.5; }
.share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.share-actions > button { min-width: 0; margin: 0; padding: 11px 12px; font-size: 13px; line-height: 1.4; white-space: normal; }
.share-actions .share-review { grid-column: 1 / -1; justify-self: start; }
.share-actions #send-challenge, .share-actions #play-challenger { grid-column: 1 / -1; }
.share-card .eyebrow { display: none; }
@media (min-width: 1200px) {
  .result-hero { display: grid; grid-template-columns: minmax(0,1fr) 450px; gap: 0 24px; text-align: left; align-items: start; }
  .result-hero > :not(.share-card) { grid-column: 1; }
  .result-hero .share-card { grid-column: 2; grid-row: 1 / span 5; margin: 0; width: 100%; align-self: center; }
  .result-hero .result-numbers { justify-content: flex-start; }
  .result-hero > .team-pips { justify-content: flex-start !important; }
}
@media (max-width: 1350px) {
  main { padding: 16px 20px; }
  .layout { grid-template-columns: minmax(0,1fr) 260px; gap: 16px; }
  .mini-mon strong { font-size: 15px; }
  .mini-mon .type { font-size: 10px; padding: 4px 6px; }
  .mini-mon img { width: 80px; height: 70px; }
  .card h3 { font-size: 19px; }
  .card .type { font-size: 11px; padding: 5px 7px; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .test-date small { display: none; }
  .rival-team { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 600px) {
  main { padding: 12px; }
  .game-toolbar { gap: 10px; align-items: flex-start; margin-bottom: 12px; }
  .steps { gap: 10px; font-size: 10px; flex-wrap: wrap; }
  .test-date { gap: 4px; flex-direction: column; align-items: flex-end; font-size: 10px; flex-shrink: 0; }
  .test-date span { font-size: 9px; }
  .draft-stage, .rival { padding: 12px; }
  .rival-name h2 { font-size: 19px; }
  .mini-mon strong { font-size: 15px; }
  .mini-mon img { width: 78px; height: 68px; }
  .reels { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .draft-round h2 { font-size: 16px; }
  .round-label { font-size: 10px; padding: 6px 8px; }
  .card { height: 325px; padding: 12px 8px; }
  .card h3 { font-size: 18px; }
  .card img { height: 100px; }
  .stat-cell small { font-size: 10px; }
  .stat-cell b { font-size: 16px; }
  .odds { gap: 10px; }
  .odds span { font-size: 10px; }
  .selection-grid, .bank-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  footer { padding: 8px 12px; flex-wrap: wrap; }
  footer > span:last-child { width: 100%; text-align: center; font-size: 8px; }
  .sidebar { grid-template-columns: 1fr; }
}

/* Companion content has its own rows; inline labels cannot displace artwork. */
.companion { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.companion > .eyebrow { display: block; }
.companion .sprite-frame { --sprite-size: 80px; width: 100%; }
.companion h3, .companion .companion-days, .companion p { margin: 0; }




/* Team strips belong to the action area, aligned with each active fighter. */
.arena .battle-teams { display: flex; justify-content: space-between; gap: 30px; margin: 10px 0 0; }
.arena .battle-teams > div { width: 40%; min-width: 0; text-align: center; }
.arena .battle-teams p { font-size: 12px; margin: 0 0 8px; }
.arena .team-pips { justify-content: center; gap: 8px; }
.battle-pip { display: block; flex-shrink: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.battle-pip img { display: block; }
.battle-pip:hover { outline: 2px solid var(--mint); outline-offset: 2px; }
.battle-pip.fainted img { opacity: .25; filter: grayscale(1); }
.arena .fighter > .eyebrow { display: none; }
@media (max-width:760px) { .arena .battle-teams { gap: 10px; } .arena .battle-teams > div { width: 43%; } .arena .team-pips { gap: 3px; flex-wrap: wrap; } }

/* A small nod to the handheld HP display within the existing arena. */
.hp-panel { background: #f1f2d9; color: #26362e; border: 3px solid #485a45; border-radius: 12px 4px 12px 4px; padding: 12px 14px 9px; box-shadow: 4px 4px 0 #0b152a66, inset 0 0 0 2px #fffff4; text-align: left; }
.hp-panel .fighter-label { font-size: 21px; gap: 8px; margin-bottom: 10px; }
.hp-panel .fighter-label small { font-size: 14px; white-space: nowrap; }
.hp-meter { display: flex; align-items: center; gap: 8px; }
.hp-meter > b { color: #87621a; font-size: 16px; font-weight: 900; }
.hp-panel .hp-track { flex: 1; height: 17px; border: 3px solid #46584d; background: #c4c9b9; border-radius: 5px; box-shadow: inset 0 2px 2px #0003; }
.hp-panel .hp-fill { background: linear-gradient(#ffffff55 0 28%, transparent 28%), var(--hp-color); }
.hp-panel .hp-text { position: relative; color: #26362e; font-size: 19px; font-variant-numeric: tabular-nums; margin: 6px 0 0; line-height: 1.2; }
.hp-text strong { font-size: 24px; }
.hp-fainted { position: absolute; left: 0; bottom: 3px; font-size: 11px; color: #a02c28; margin: 0; }
.battle-controls { flex-wrap: wrap; gap: 10px; align-items: center; }
.battle-controls .primary { padding: 11px 18px; font-size: 14px; box-shadow: 0 3px 0 #5e8d32; }
.battle-controls .secondary { font-size: 13px; }
.battle-controls #automate[aria-pressed="true"] { border-color: #b7f86a88; color: var(--mint); }
.battle-controls #playback-hint { font-size: 12px; color: #bac6db; }
.battle-controls #skip { margin-left: auto; }
.battle-controls button:disabled { opacity: .4; cursor: default; }
.battle-controls button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.combat-log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 25px 9px; border-top: 1px solid var(--line); }
.combat-log-head h3 { font-size: 15px; margin: 0; }
.combat-log-head > span { font-size: 12px; }
.side-0 { color: #c3f893; }
.side-1 { color: #d5b5ff; }
.battle-log .log-name.side-0 { color: #c3f893; }
.battle-log .log-name.side-1 { color: #d5b5ff; }
.battle-log { height: 230px; padding: 0 25px 14px; font-size: 14px; line-height: 1.5; background: #0b1320; }
.battle-log .log-line { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 10px 12px; margin: 5px 0; border: 0; border-left: 3px solid #66748b; border-radius: 5px; color: #e4ebf5; background: #ffffff04; }
.battle-log .log-side-0 { border-left-color: #b7f86a; }
.battle-log .log-side-1 { border-left-color: #bc8bff; background: #bc8bff08; }
.log-side { font-size: 10px; font-weight: 900; letter-spacing: .5px; padding-top: 3px; }
.battle-log .log-move { display: inline-block; background: #ffffff09; border-bottom: 2px solid var(--move-color); border-radius: 3px; padding: 0 5px; color: #fff; }
.log-outcomes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.log-outcome { display: inline-block; color: #c8d3e4; background: #8fa6cb16; padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.log-outcome.damage { color: #fff; }
.log-outcome.heal { color: #b7f2c2; background: #37b67a20; }
.log-outcome.effective, .log-outcome.critical { color: #ffe092; background: #e9b52c19; }
.log-outcome.faint { color: #ffb3b8; background: #fb657520; margin-left: 8px; }
.log-turn { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #a3b3ca; padding: 10px 0 3px; font-weight: 800; }
@media (max-width:760px) {
 .arena { padding: 20px 12px; }
 .arena-field { gap: 8px; }
 .fighter { width: 45%; min-width: 0; }
 .hp-panel { padding: 9px 8px 7px; border-width: 2px; }
 .hp-panel .fighter-label { font-size: 16px; flex-wrap: wrap; gap: 3px 8px; }
 .hp-panel .fighter-label small { font-size: 11px; }
 .hp-meter { gap: 4px; }
 .hp-meter > b { font-size: 12px; }
 .hp-panel .hp-text { font-size: 15px; }
 .hp-text strong { font-size: 20px; }
 .vs { font-size: 16px; }
 .battle-controls { padding: 15px 12px; }
 .battle-controls #skip { margin-left: 0; }
 .combat-log-head { padding: 12px; }
 .battle-log { padding: 0 12px 12px; height: 260px; font-size: 13px; }
 .battle-log .log-line { grid-template-columns: 38px minmax(0,1fr); gap: 7px; padding: 9px 7px; }
}
.challenge-notice{display:flex;flex-wrap:wrap;gap:8px 20px;padding:14px 18px;margin:0 0 16px;border:1px solid #526b3e;border-radius:12px;background:#182a22;color:#d6e8c6}.challenge-notice span{color:#b8c9b0}.friend-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}

/* A separate layer keeps the Master pulse independent of card reveal animation. */
.slot.master-celebration { animation: none; border: 2px solid #d4a5ff; box-shadow: inset 0 0 32px #a45fff66, 0 0 18px #bc8bff88; }
.card.master-reveal { border: 2px solid #d4a5ff; box-shadow: 0 0 18px #bc8bff66; }
.master-aura { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; border: 2px solid #e5c7ff; box-shadow: inset 0 0 38px 8px #a45fff99, 0 0 26px #bc8bff99; opacity: .35; animation: masterAuraPulse 1s ease-in-out 3; }
@keyframes masterAuraPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .master-aura { animation: none; opacity: .55; } }



/* Focus the inspected turn while keeping the complete battle log available. */
.log-line.review-selected { background: rgba(118, 159, 255, .12); box-shadow: inset 3px 0 #8aaeff; }

/* Shiny is an independent cosmetic state, separate from ball rarity. */
/* Sparkles belong to the card, never to the sprite frame. */
.shiny-badge{position:absolute;top:8px;right:8px;z-index:3;display:grid;place-items:center;width:20px;height:20px;color:#ffe18a;font-size:20px;line-height:1;text-shadow:0 0 5px #ffe18a66;pointer-events:none}
.card,.mini-mon,.outcome-mon,.companion,.roster-row{position:relative}
.card>.shiny-badge{top:10px;right:10px}
.mini-mon>.shiny-badge,.outcome-mon>.shiny-badge{top:6px;right:6px;font-size:18px}
.companion>.shiny-badge{top:12px;right:12px}
.roster-row>.shiny-badge{top:5px;right:10px;width:16px;height:16px;font-size:15px}
.roster-row:has(>.shiny-badge) .roster-ball{align-self:flex-end}
.move-dialog .dialog-head>.shiny-badge{position:static;margin-left:auto;margin-right:10px}
.shiny-art img{filter:drop-shadow(0 0 5px #ffe38b80)}
.card.shiny-card{box-shadow:inset 0 0 0 2px #ffe18a,0 0 20px #ffe18a22}
.shiny-fighter{filter:drop-shadow(0 0 10px #ffe18a99)}
.battle-pip.shiny-pip{position:relative;box-shadow:inset 0 0 0 2px #ffe18a;color:#ffe18a;font-weight:900}
.shiny-odds{text-align:center;font-size:11px;color:#ffe18a;margin:12px 0 0}
.outcome-mon .sprite-frame{margin-top:22px}
/* Reserve one shared sparkle lane without changing sprite placement. */
.arena .team-pips{padding-bottom:20px;row-gap:23px}
.battle-pip{position:relative}
.battle-sparkle{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;width:14px;height:14px;display:grid;place-items:center;font-size:14px;line-height:1;pointer-events:none}
/* Oak's advice has its own mint accent, independent of rarity and shiny gold. */
.oak-panel{margin:8px 0 10px;padding:8px 12px;border:1px solid #b7f86a44;border-radius:10px;background:#b7f86a08}
.oak-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.oak-heading h3{font-size:14px;margin:0;line-height:1.3}
.oak-panel p{font-size:12px;line-height:1.45;margin:5px 0 0;color:#d2dfcb}
.oak-panel .oak-toggle{min-width:50px;margin:0;padding:5px 12px;font-size:12px;line-height:1.3}
.oak-toggle[aria-checked="true"]{background:var(--mint);border-color:var(--mint);color:#17230e}
.card.oak-recommended{outline:3px solid var(--mint);outline-offset:2px}
.card.oak-recommended:focus-visible{outline-width:5px;outline-offset:4px}
.card .oak-pick-label{color:var(--mint);font-weight:800;font-size:12px}