/* DGN Rewards — daily streak + blackjack.
   Header, footer and design tokens come from league.css; this file only adds
   the rewards-specific furniture. */

.rw{max-width:1180px;margin:0 auto;padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,3rem) 4rem}

/* The rules below set display on elements the script toggles with [hidden].
   Without this, `display:flex` wins over the UA's [hidden] rule and hidden
   elements stay on screen — which showed both account bars at once. */
.rw [hidden]{display:none !important}

/* --- Hero ---------------------------------------------------------------- */
.rw-hero{position:relative;overflow-x:clip;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:center;gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line)}
.rw-hero .eyebrow{font:800 .62rem var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--subtle)}
.rw-hero h1{margin:.5rem 0 0;font:900 clamp(2.4rem,6.5vw,4.2rem)/.98 var(--font-display);letter-spacing:-.03em;text-transform:uppercase}
.rw-hero h1 em{font-style:normal;color:var(--orange)}
.rw-hero .lede{margin:1rem 0 0;max-width:46ch;color:var(--muted)}
.rw-hero .lede b{color:var(--ink)}
.rw-free{margin:1.1rem 0 0;font:800 .6rem var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--subtle)}

.rw-coin-wrap{display:grid;place-items:center}
.rw-coin{width:100%;max-width:19rem;height:auto;filter:drop-shadow(0 12px 40px rgba(240,163,42,.3));animation:rw-float 6s ease-in-out infinite}
@keyframes rw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.rw-coin{animation:none}}

/* --- Account bar --------------------------------------------------------- */
.rw-account{margin:1.8rem 0 0}
.rw-acct-out,.rw-acct-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.3rem 1.5rem;border:1px solid var(--line);border-radius:.9rem;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.008)),var(--surface)}
.rw-acct-out h2{font:900 1.15rem var(--font-display);text-transform:uppercase;letter-spacing:-.01em}
.rw-acct-out p{margin:.3rem 0 0;color:var(--muted);font-size:.88rem}

.rw-bal{display:flex;align-items:center;gap:.9rem}
.rw-bal img{width:3.4rem;height:3.4rem;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(240,163,42,.35))}
.rw-bal .k,.rw-who .k{display:block;color:var(--subtle);font:800 .55rem var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.rw-bal .v{display:block;font:900 clamp(1.6rem,4vw,2.2rem)/1 var(--font-display);color:var(--orange);text-shadow:0 0 30px rgba(240,163,42,.3)}
.rw-who{text-align:right}
.rw-who .v{display:block;font:800 1rem var(--font-display)}
.rw-link{margin-top:.2rem;background:none;border:0;padding:0;color:var(--subtle);font:700 .72rem var(--font-body);text-decoration:underline;cursor:pointer}
.rw-link:hover{color:var(--accent)}

/* --- Buttons ------------------------------------------------------------- */
.rw-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.3rem;border:1px solid var(--line-2);border-radius:.6rem;background:var(--inset);color:var(--ink);font:800 .8rem var(--font-display);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.rw-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--accent)}
.rw-btn.primary{border-color:transparent;background:linear-gradient(var(--accent-bright),var(--accent));color:var(--accent-ink)}
.rw-btn.primary:hover:not(:disabled){box-shadow:0 6px 22px var(--accent-glow)}
.rw-btn:disabled{opacity:.4;cursor:not-allowed}
.rw-btn svg{width:1.05rem;height:1.05rem;fill:currentColor}

/* --- Panels -------------------------------------------------------------- */
.rw-panel{margin:1.6rem 0 0;padding:1.5rem;border:1px solid var(--line);border-radius:.9rem;background:var(--surface)}
.rw-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:1.2rem}
.rw-cap h2{font:900 1.25rem var(--font-display);text-transform:uppercase;letter-spacing:-.01em}
.rw-cap span{color:var(--subtle);font:700 .68rem var(--font-display);letter-spacing:.12em;text-transform:uppercase}

/* --- Streak ladder ------------------------------------------------------- */
.rw-days{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.7rem;margin:0;padding:0}
.rw-day{display:grid;justify-items:center;gap:.45rem;padding:.9rem .5rem;border:1px solid var(--line);border-radius:.7rem;background:var(--inset);text-align:center;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.rw-day .d{color:var(--subtle);font:800 .55rem var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.rw-day img{width:2.1rem;height:2.1rem;object-fit:contain;opacity:.45;transition:opacity .2s var(--ease)}
.rw-day .p{font:900 .95rem var(--font-display);color:var(--muted)}
.rw-day.claimed{border-color:rgba(180,247,36,.4)}
.rw-day.claimed img{opacity:1}
.rw-day.claimed .p{color:var(--accent)}
.rw-day.claimed .d::after{content:" ✓";color:var(--accent)}
.rw-day.current{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 8px 26px rgba(240,163,42,.18)}
.rw-day.current img{opacity:1}
.rw-day.current .p{color:var(--orange)}

.rw-claim-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.3rem}
.rw-note{color:var(--muted);font-size:.85rem}

/* --- Blackjack table -----------------------------------------------------
   Built mobile-first and centred: most of the audience is on a phone, where
   a left-aligned table wastes half the screen. Cards are sized off the
   viewport so they stay readable without zooming. */
.rw-table{position:relative;display:grid;justify-items:center;align-content:center;gap:clamp(.8rem,2.4vw,1.4rem);padding:clamp(1.4rem,4vw,2.4rem) clamp(.8rem,3vw,1.6rem);border:1px solid var(--line);border-radius:.9rem;background:radial-gradient(80% 70% at 50% 42%,rgba(180,247,36,.10),transparent 72%),linear-gradient(180deg,#0c1109,#080a08);min-height:clamp(22rem,52vw,26rem);overflow:hidden}

/* The shoe. Gives the deal somewhere to come from. */
.rw-shoe{position:absolute;top:clamp(.7rem,2.5vw,1.1rem);right:clamp(.7rem,2.5vw,1.1rem);width:2.6rem;height:3.6rem}
.rw-shoe i{position:absolute;inset:0;border-radius:.35rem;border:1px solid rgba(180,247,36,.22);background:repeating-linear-gradient(45deg,#1b2716,#1b2716 4px,#223018 4px,#223018 8px);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.rw-shoe i:nth-child(2){transform:translate(2px,-2px)}
.rw-shoe i:nth-child(3){transform:translate(4px,-4px)}
.rw-shoe i:nth-child(4){transform:translate(6px,-6px)}
.rw-table.dealing .rw-shoe i:nth-child(4){animation:rw-shoe-pull .35s var(--ease)}
@keyframes rw-shoe-pull{50%{transform:translate(10px,-12px) rotate(6deg)}}

.rw-seat{display:grid;justify-items:center;gap:.55rem;width:100%}
.rw-seat-label{color:var(--subtle);font:800 .62rem var(--font-display);letter-spacing:.16em;text-transform:uppercase;text-align:center}
.rw-seat-label b{display:inline-block;min-width:1.6rem;color:var(--ink);font-size:1.25rem;margin-left:.4rem;vertical-align:-2px}
.rw-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.35rem,1.4vw,.55rem);min-height:calc(clamp(4.6rem,17vw,6.4rem) * 1.4)}

/* Cards flip on a 3D axis so the hole card reveal reads as a real turn. */
.rw-card{position:relative;width:clamp(4.6rem,17vw,6.4rem);aspect-ratio:5/7;perspective:700px;animation:rw-deal .34s var(--ease) both}
.rw-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s var(--ease)}
.rw-card.facedown .rw-card-inner{transform:rotateY(180deg)}
.rw-face,.rw-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:.45rem;box-shadow:0 5px 16px rgba(0,0,0,.55)}
.rw-face{background:linear-gradient(160deg,#fdfdfb,#e8e9e4);color:#15150f;display:grid;place-items:center;font:900 clamp(1.6rem,6vw,2.4rem)/1 var(--font-display)}
.rw-card.red .rw-face{color:#c8241f}
.rw-back{transform:rotateY(180deg);border:1px solid rgba(180,247,36,.25);background:repeating-linear-gradient(45deg,#1b2716,#1b2716 5px,#223018 5px,#223018 10px)}
.rw-face .rank{position:absolute;top:.3rem;left:.42rem;font-size:clamp(.72rem,2.4vw,.95rem);line-height:1}
.rw-face .suit{position:absolute;bottom:.3rem;right:.42rem;font-size:clamp(.72rem,2.4vw,.95rem);line-height:1;transform:rotate(180deg)}
@keyframes rw-deal{from{opacity:0;transform:translate(40%,-70%) rotate(12deg) scale(.9)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .rw-card{animation:none}
  .rw-card-inner{transition:none}
  .rw-table.dealing .rw-shoe i:nth-child(4){animation:none}
}

.rw-outcome{min-height:1.8rem;text-align:center;font:900 clamp(1.1rem,4vw,1.5rem) var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.rw-outcome.win{color:var(--accent);text-shadow:0 0 26px var(--accent-glow)}
.rw-outcome.lose{color:#e2564d}
.rw-outcome.push{color:var(--orange)}

.rw-side-results{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.rw-side-chip{padding:.35rem .7rem;border-radius:999px;font:800 .6rem var(--font-display);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-2);background:var(--inset);color:var(--muted)}
.rw-side-chip.hit{border-color:var(--accent);color:var(--accent)}

/* --- Bet controls -------------------------------------------------------- */
.rw-controls{display:grid;gap:1.1rem;margin-top:1.2rem}
.rw-bets{display:flex;flex-wrap:wrap;align-items:end;gap:.9rem}
.rw-stake label{display:block;margin-bottom:.4rem;color:var(--subtle);font:800 .55rem var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.rw-stake-input{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:.6rem;overflow:hidden;background:var(--inset)}
.rw-stake-input button{width:2.6rem;border:0;background:rgba(255,255,255,.04);color:var(--ink);font:900 1.1rem var(--font-display);cursor:pointer}
.rw-stake-input button:hover:not(:disabled){background:rgba(180,247,36,.16)}
.rw-stake-input button:disabled{opacity:.35;cursor:not-allowed}
.rw-stake-input input{width:5.5rem;border:0;background:transparent;color:var(--ink);text-align:center;font:900 1.05rem var(--font-display);padding:.6rem .3rem;-moz-appearance:textfield;appearance:textfield}
.rw-stake-input.small input{width:3.4rem}
.rw-stake-input input::-webkit-outer-spin-button,.rw-stake-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rw-total-bet{margin-left:auto;color:var(--subtle);font:800 .6rem var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.rw-total-bet b{display:block;margin-top:.2rem;color:var(--orange);font-size:1.5rem}
.rw-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.rw-msg{min-height:1.3rem;margin-top:.9rem;color:var(--orange);font-size:.85rem}

@media(max-width:560px){
  .rw-bets{gap:.6rem}
  .rw-stake{flex:1 1 auto}
  .rw-stake-input input{width:100%}
  .rw-total-bet{flex:1 0 100%;margin-left:0;text-align:center}
  .rw-actions .rw-btn{flex:1 1 8rem}
}

/* --- Provably fair ------------------------------------------------------- */
.rw-fair{margin-top:1.3rem;border-top:1px solid var(--line);padding-top:1rem}
.rw-fair>summary{cursor:pointer;list-style:none;color:var(--subtle);font:800 .6rem var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.rw-fair>summary::-webkit-details-marker{display:none}
.rw-fair>summary::after{content:" +"}
.rw-fair[open]>summary::after{content:" –"}
.rw-fair>summary:hover{color:var(--accent)}
.rw-fair p{margin:.7rem 0 0;color:var(--muted);font-size:.84rem;max-width:70ch}
.rw-fair-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem;margin-top:.9rem}
.rw-fair-grid dt{color:var(--subtle);font:800 .52rem var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.rw-fair-grid dd{margin:.2rem 0 0;font:600 .72rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);word-break:break-all}

/* --- About --------------------------------------------------------------- */
.rw-about ul{list-style:none;display:grid;gap:.7rem;padding:0;margin:.4rem 0 0}
.rw-about li{position:relative;padding-left:1.2rem;color:var(--muted);font-size:.9rem}
.rw-about li::before{content:"";position:absolute;left:0;top:.55rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--accent)}
.rw-about li b{color:var(--ink)}
.rw-about a.inline{color:var(--accent);text-decoration:underline}

/* --- Responsive ---------------------------------------------------------- */
@media(max-width:900px){
  .rw-hero{grid-template-columns:1fr;text-align:left}
  .rw-coin-wrap{order:-1;justify-items:start}
  .rw-coin{max-width:11rem}
  .rw-who{text-align:left}
  .rw-days{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rw-controls{flex-direction:column;align-items:stretch}
  .rw-actions{justify-content:stretch}
  .rw-actions .rw-btn{flex:1 1 auto}
  .rw-stake-input input{flex:1 1 auto;width:auto}
}
@media(max-width:560px){
  .rw-days{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rw-card{width:3.2rem;height:4.6rem;font-size:1.25rem}
  .rw-acct-in,.rw-acct-out{flex-direction:column;align-items:flex-start}
}

/* --- Shop ---------------------------------------------------------------- */
.rw-shop{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem;margin:0;padding:0}
.rw-shop-item{display:grid;grid-template-rows:auto 1fr auto;gap:.6rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:.8rem;background:var(--inset);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.rw-shop-item:hover{border-color:rgba(180,247,36,.32);transform:translateY(-2px)}
.rw-shop-item.locked{opacity:.55}
.rw-shop-item.locked:hover{transform:none;border-color:var(--line)}
.rw-shop-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.rw-shop-name{font:900 1rem var(--font-display);text-transform:uppercase;letter-spacing:-.01em}
.rw-shop-cost{display:flex;align-items:center;gap:.3rem;color:var(--orange);font:900 1.05rem var(--font-display);white-space:nowrap}
.rw-shop-cost img{width:1.1rem;height:1.1rem;object-fit:contain}
.rw-shop-desc{color:var(--muted);font-size:.82rem;line-height:1.45}
.rw-shop-meta{display:flex;flex-wrap:wrap;gap:.35rem}
.rw-shop-tag{padding:.25rem .5rem;border-radius:.35rem;background:rgba(255,255,255,.05);color:var(--subtle);font:800 .52rem var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.rw-shop-tag.warn{color:var(--orange)}
.rw-shop-item .rw-btn{width:100%}
.rw-shop-note{width:100%;margin-top:.2rem;padding:.55rem .7rem;border:1px solid var(--line-2);border-radius:.5rem;background:var(--bg);color:var(--ink);font:600 .8rem var(--font-body)}
.rw-shop-note::placeholder{color:var(--subtle)}

.rw-orders{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.5rem}
.rw-order{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:.5rem;background:var(--inset);font-size:.82rem}
.rw-order b{font:800 .82rem var(--font-display)}
.rw-order .st{font:800 .55rem var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.rw-order .st.fulfilled{color:var(--accent)}
.rw-order .st.cancelled{color:#e2564d}

/* --- Weekly raffle tickets (League DP, not DGN Points) -------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rw-ticket-wallet{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem;margin:1.1rem 0 0}
.rw-ticket-wallet>div{padding:.8rem .9rem;border:1px solid var(--line);border-radius:.6rem;background:var(--inset)}
.rw-ticket-wallet .k{display:block;color:var(--subtle);font:800 .55rem var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.rw-ticket-wallet .v{display:block;margin-top:.25rem;font:900 1.25rem var(--font-display);color:var(--ink)}
.rw-ticket-wallet>div:first-child .v{color:var(--accent)}
.rw-ticket-buy{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.rw-select{flex:0 1 12rem;padding:.7rem .8rem;border:1px solid var(--line-2);border-radius:.6rem;background:var(--inset);color:var(--ink);font:800 .85rem var(--font-display)}
@media(max-width:560px){.rw-ticket-buy .rw-select,.rw-ticket-buy .rw-btn{flex:1 1 100%}}

/* --- DP standings -------------------------------------------------------- */
.rw-board-wrap{overflow-x:auto}
.rw-board{width:100%;border-collapse:collapse;font-size:.9rem}
.rw-board th{padding:.5rem .7rem;border-bottom:1px solid var(--line);color:var(--subtle);font:800 .55rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;text-align:left;white-space:nowrap}
.rw-board td{padding:.6rem .7rem;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap}
.rw-board .r{text-align:right}
.rw-board tbody tr:last-child td{border-bottom:0}
.rw-board .pos{color:var(--subtle);font:900 .85rem var(--font-display)}
.rw-board .who{font:700 .9rem var(--font-body);color:var(--ink);white-space:normal}
.rw-board .season{font:900 .95rem var(--font-display);color:var(--ink)}
.rw-board .spend{font:900 .95rem var(--font-display);color:var(--accent)}
.rw-board tr.top .pos{color:var(--orange)}
.rw-board-empty{color:var(--muted);text-align:center;padding:1.2rem}

/* --- Bet chips ----------------------------------------------------------
   Presets rather than steppers. Repeated taps on a stepper were triggering
   the double-tap zoom on iOS; touch-action below kills that outright, and
   one tap per bet size means far less tapping in the first place. */
.rw-bets button,.rw-chip,.rw-actions .rw-btn{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.rw-stake.main{flex:1 1 100%}
/* flex:1 1 0 on the chips keeps all five on one row at 360px. */
.rw-chips{display:flex;flex-wrap:nowrap;gap:.4rem}
.rw-chip{flex:1 1 0;min-width:2.6rem;min-height:2.9rem;padding:.6rem .5rem;border:1px solid var(--line-2);border-radius:.6rem;background:var(--inset);color:var(--ink);font:900 1rem var(--font-display);cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.rw-chip:hover:not(:disabled){border-color:var(--accent)}
.rw-chip.is-on{border-color:transparent;background:linear-gradient(var(--accent-bright),var(--accent));color:var(--accent-ink)}
.rw-chip:disabled{opacity:.4;cursor:not-allowed}
.rw-stake-input input[readonly]{cursor:default}

/* --- Split hands --------------------------------------------------------
   Two hands sit side by side; the one being played is highlighted so it is
   obvious which set of cards Hit and Stand apply to. */
.rw-split-seats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.6rem,3vw,1.6rem);width:100%}
.rw-split-seats .rw-seat{width:auto;flex:0 1 auto;padding:.5rem .7rem;border:1px solid transparent;border-radius:.7rem;transition:border-color .2s var(--ease),opacity .2s var(--ease)}
.rw-split-seats .rw-seat.is-acting{border-color:var(--orange);box-shadow:0 0 22px rgba(240,163,42,.16)}
.rw-split-seats .rw-seat.is-done{opacity:.5}
.rw-split-seats .rw-cards{min-height:calc(clamp(4.6rem,17vw,6.4rem) * 1.4)}
@media(max-width:560px){
  .rw-split-seats .rw-card{width:clamp(3.4rem,13vw,4.6rem)}
  .rw-split-seats .rw-cards{min-height:calc(clamp(3.4rem,13vw,4.6rem) * 1.4)}
}

/* --- Control order: action first, then bets --------------------------------
   Deal is the button people reach for every round, so it sits at the top and
   spans the full width. Bet sizes follow, then the two side bets share a row
   since they are the least used control on the table. */
.rw-controls{display:grid;gap:1rem}
.rw-controls .rw-actions{order:-1;display:flex;flex-wrap:wrap;gap:.6rem}
.rw-controls .rw-actions .rw-btn{flex:1 1 8rem;min-height:3.2rem;font-size:.92rem}
.rw-bets{display:grid;gap:.85rem}
.rw-bets .rw-stake.main{flex:none;width:100%}
.rw-side-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.rw-side-row .rw-stake{min-width:0}
.rw-side-row .rw-stake-input{width:100%}
.rw-side-row .rw-stake-input input{flex:1 1 auto;width:auto;min-width:0}
.rw-total-bet{margin:0;text-align:center}

/* Errors sit directly under the table, above the buttons. Below the controls
   they fell off the bottom of a phone screen, so a failed action looked like
   a button that simply did nothing. */
.rw-msg{min-height:1.3rem;margin:.9rem 0 0;color:var(--orange);font-size:.88rem;text-align:center}
.rw-msg:empty{min-height:0;margin:0}

/* --- Card backs ---------------------------------------------------------
   DGN coin on the back of every card and on the shoe. The coin sits over the
   existing weave rather than replacing it, so the back still reads as a card
   at a glance. */
.rw-back{
  background:
    url('/brand-kit/dgn-points-coin-sm.webp') no-repeat center / 56% auto,
    repeating-linear-gradient(45deg,#1b2716,#1b2716 5px,#223018 5px,#223018 10px);
}
.rw-shoe i:nth-child(4){
  background:
    url('/brand-kit/dgn-points-coin-sm.webp') no-repeat center / 62% auto,
    repeating-linear-gradient(45deg,#1b2716,#1b2716 4px,#223018 4px,#223018 8px);
}

/* --- Insurance as a modal ------------------------------------------------
   The insurance UI injects itself into the action row and injects its own
   styles at runtime, so these selectors carry an extra `body` to outrank
   them without touching that file. The panel becomes a centred dialog and
   its ::before is the backdrop, since the markup has no wrapper to use. */
body #rwInsurancePanel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:200;width:min(23rem,calc(100vw - 2rem));
  display:grid;gap:1.1rem;margin:0;padding:1.5rem;
  border:1px solid rgba(240,163,42,.45);border-radius:.9rem;
  background:linear-gradient(160deg,#14180f,#0b0d0a);
  /* The second shadow is the backdrop: a spread large enough to cover the
     viewport. A ::before overlay gets trapped by the panel's own stacking
     context, whereas a shadow always paints with the element. */
  box-shadow:0 24px 70px rgba(0,0,0,.72),0 0 40px rgba(240,163,42,.12),
             0 0 0 100vmax rgba(3,5,3,.76);
  animation:rw-ins-in .22s var(--ease) both;
}
body #rwInsurancePanel[hidden]{display:none}
body #rwInsurancePanel .rw-insurance-copy{text-align:center;gap:.4rem}
body #rwInsurancePanel .rw-insurance-copy b{color:var(--orange);font-family:var(--font-display)}
body #rwInsurancePanel .rw-insurance-buttons{grid-template-columns:1fr}
body #rwInsurancePanel .rw-btn{min-height:3rem}
@keyframes rw-ins-in{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}
                     to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){body #rwInsurancePanel{animation:none}}