/* The wager 1v1 room: purple and gold instead of ranked red, so you can tell at a glance that items are on the line.
   Plus the hand-holding guide: a six-step tracker and one big "your move" card. Loads after wagers-sister.css and wagers-battle.css
   (those give the page its purple chrome variables and the gold logo). */

body.page-wager-match { background:
  radial-gradient(70% 45% at 50% -8%, rgba(112, 52, 196, .38), transparent 70%),
  repeating-linear-gradient(60deg, rgba(232, 180, 74, .035) 0 1px, transparent 1px 36px), repeating-linear-gradient(-60deg, rgba(232, 180, 74, .035) 0 1px, transparent 1px 36px),
  linear-gradient(180deg, #0c0617, #07030d); }

/* the room itself: every red accent becomes violet, gold trim stays */
body.page-wager-match .panel { border-color: rgba(232, 180, 74, .55); box-shadow: inset 0 0 0 3px #08030d, inset 0 0 0 4px rgba(232, 180, 74, .28), 0 12px 26px -14px #000; }
body.page-wager-match .mr-head { background: radial-gradient(ellipse at 50% -20%, rgba(160, 80, 240, .26), transparent 60%), linear-gradient(280deg, #07030d, #1a0c30 78%); }
body.page-wager-match .mr-kicker { color: #e8b44a; }
body.page-wager-match .mr-player.is-me { box-shadow: inset 0 0 0 2px #b04dff, 0 0 22px -8px #b04dff; }
body.page-wager-match .btn-primary { color: #2a1400; background: linear-gradient(180deg, #fff0b8, #ffc23a 55%, #c9830a); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #4a2a00, 0 10px 22px -10px rgba(232, 180, 74, .7); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
body.page-wager-match .mr-vs, body.page-wager-match .mr-vs b { text-shadow: 0 0 18px rgba(176, 77, 255, .7); }

/* ---------------------------------------------------------------- the guide */
.wg-guide { display: grid; gap: 16px; padding: 22px 22px 18px; background: radial-gradient(ellipse at 50% -20%, rgba(160, 80, 240, .22), transparent 60%), linear-gradient(280deg, #07030d, #1a0c30 78%); }
.wg-kicker { font: 800 .78rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: #e8b44a; }
.wg-deal { margin: 8px 0 0; font-size: .98rem; color: #e0d3f2; }
.wg-deal b { color: #fff; } .wg-deal em { font-style: normal; font-weight: 800; color: #ffe3a1; } .wg-deal span { margin: 0 6px; color: #b04dff; font-weight: 900; }

.wg-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: wg; }
.wg-steps li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 9px; text-align: center; border-radius: 14px; color: #9d8bb8; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.wg-steps li:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: calc(50% + 18px); width: calc(100% - 24px); height: 2px; background: rgba(255, 255, 255, .12); }
.wg-steps li.done:not(:last-child)::after { background: linear-gradient(90deg, #e8b44a, #e8b44a); }
.wg-steps i { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 900 .9rem/1 var(--label); font-style: normal; color: #cdbde6; background: #1d0e34; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); }
.wg-steps b { font: 900 .82rem/1.1 var(--label); letter-spacing: .06em; text-transform: uppercase; }
.wg-steps small { font: 700 .76rem/1.2 var(--label); }
.wg-steps li.done { color: #e8b44a; } .wg-steps li.done i { color: #2a1400; background: linear-gradient(180deg, #fff0b8, #e8b44a); box-shadow: inset 0 0 0 2px #7a4a00; }
.wg-steps li.now { color: #fff; background: linear-gradient(180deg, rgba(176, 77, 255, .3), rgba(0, 0, 0, .3)); box-shadow: inset 0 0 0 2px #b04dff, 0 0 24px -8px #b04dff; }
.wg-steps li.now i { color: #fff; background: linear-gradient(180deg, #b04dff, #6a24c0); box-shadow: inset 0 0 0 2px #e4c8ff; animation: wg-pulse 2.4s ease-in-out infinite; }
@keyframes wg-pulse { 50% { box-shadow: inset 0 0 0 2px #e4c8ff, 0 0 0 7px rgba(176, 77, 255, .25); } }

.wg-coach { display: grid; gap: 10px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(44, 20, 80, .85), rgba(14, 7, 28, .9)); box-shadow: inset 0 0 0 1.5px rgba(232, 180, 74, .6), inset 0 0 0 4px rgba(0, 0, 0, .5); }
.wg-coach.end { text-align: center; justify-items: center; }
.wg-now { justify-self: start; padding: 4px 12px; border-radius: 99px; font: 900 .78rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: #170a22; background: linear-gradient(180deg, #e4c8ff, #b04dff); }
.wg-coach h2 { margin: 0; font: 400 1.7rem/1.1 var(--display); letter-spacing: .04em; color: #ffe3a1; text-shadow: 0 2px 0 #5a3000; }
.wg-coach ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: wgc; }
.wg-coach ol li { position: relative; counter-increment: wgc; padding-left: 40px; min-height: 28px; font-size: 1rem; line-height: 1.4; color: #efe6ff; }
.wg-coach ol li::before { content: counter(wgc); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 900 .88rem/1 var(--label); color: #2a1400; background: linear-gradient(180deg, #fff0b8, #e8b44a); }
.wg-coach b { color: #fff; }
.wg-tip { margin: 0; font-size: .9rem; color: #cdbde6; }
.wg-alert { margin: 0; padding: 10px 14px; border-radius: 12px; font-weight: 800; color: #2a1400; background: linear-gradient(180deg, #ffe9a8, #e8b44a); }
.wg-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.wg-help { padding: 4px 4px 0; }
.wg-help summary { cursor: pointer; font-weight: 800; color: #e8b44a; }
.wg-help ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; color: #d9cbee; }

@media (max-width: 700px) { .wg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wg-steps li::after { display: none; } .wg-coach h2 { font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .wg-steps li.now i { animation: none; } }

/* the old five-step strip under the players: violet, with the current step lit */
body.page-wager-match .mr-steps li { background: rgba(120, 60, 200, .16); color: #cdbde6; }
body.page-wager-match .mr-steps li.past { background: rgba(176, 77, 255, .28); color: #fff; }
body.page-wager-match .mr-steps li.on { background: linear-gradient(180deg, #b04dff, #6a24c0); color: #fff; box-shadow: 0 0 18px -4px #b04dff; }

/* "Your move" bar: on every wager page while something is waiting on you */
.wg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; position: relative;
  background: linear-gradient(90deg, rgba(120, 50, 200, .55), rgba(30, 14, 56, .92)); box-shadow: inset 0 0 0 1.5px #b04dff, inset 0 0 0 4px rgba(0, 0, 0, .45), 0 0 30px -10px #b04dff; }
.wg-bar b { font: 900 1.05rem/1.2 var(--label); color: #fff; }
.wg-bar small { color: #cdbde6; font-weight: 700; }
.wg-bar .bp-button { margin-left: auto; }
#fruit-wagers .bwp-next.wg-coach { margin: 10px 0; }
#fruit-wagers .bwp-next.wg-coach p { margin: 0; color: #efe6ff; font-size: 1rem; line-height: 1.45; }
#fruit-wagers .wg-steps { margin: 10px 0 6px; }