/* ============================================================
   Draw Hall — play skin: the plugins' pages. The earn hub, the
   games catalogue and arena, scratch, spin, slot, daily bonus,
   offerwalls, watch & earn, eSIM and blog, and the helper classes
   the plugins' Draw Hall templates share.
   Loaded on every plugin page from functions.php; scoped
   "html body …". Each plugin's own sheets get Draw Hall variants under
   plugins/<p>/assets/css/themes/draw-hall/; this file holds what spans
   several of them and the page-level chrome.
   ============================================================ */

/* ── Helpers the plugin templates share ── */
html body .drh-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), var(--btn-bg) !important; color: var(--btn-ink) !important;
  border: 0 !important; border-radius: 10px !important;
  box-shadow: var(--btn-shadow);
  font-family: var(--font-ui); font-weight: 700 !important; letter-spacing: .02em;
  transition: background-color .2s ease, box-shadow .12s ease, transform .12s ease !important;
}
html body .drh-btn:hover:not(:disabled) { background-color: var(--btn-bg-hover) !important; box-shadow: var(--btn-shadow-hover); transform: translateY(-1px) !important; }
html body .drh-btn:active:not(:disabled) { transform: translateY(3px) !important; box-shadow: 0 0 0 var(--btn-side) !important; }
html body .drh-ink-gold { color: var(--drh-yellow-ink) !important; }
html body .drh-ink-red { color: var(--red) !important; }
html body .drh-ink-leaf { color: var(--drh-green-ink) !important; }
html body .drh-ink-dim { color: var(--ink-soft) !important; }
html body .drh-soft-gold { background: var(--drh-yellow-soft) !important; border-color: color-mix(in srgb, var(--drh-yellow) 35%, transparent) !important; }
html body .drh-soft-red { background: var(--red-soft) !important; border-color: color-mix(in srgb, var(--red) 30%, transparent) !important; }
html body .drh-soft-leaf { background: var(--drh-green-soft) !important; border-color: color-mix(in srgb, var(--drh-green) 30%, transparent) !important; }
html body .drh-bg-gold { background: var(--drh-blue) !important; }
html body .drh-dot { background: #ff1f4b; border-radius: 50%; box-shadow: 0 0 6px #ff1f4b; }
html body .drh-fill { background: var(--drh-meter) !important; }
html body .drh-fill--low { background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .2) 9px 11px), #ff1f4b !important; }
html body .drh-fill--new { background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .2) 9px 11px), var(--drh-green) !important; }
html body .drh-bg-red { background: var(--red) !important; }
html body .drh-chosen { background: var(--paper-2) !important; border-color: var(--drh-blue) !important; box-shadow: inset 0 3px 0 var(--drh-blue), 0 0 0 3px var(--drh-blue-soft) !important; }
html body .drh-seal-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff 0 34%, transparent 38%), #ff1f4b; box-shadow: 0 0 10px rgba(255, 31, 75, .7); vertical-align: middle; }
html body .drh-coin {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 46%, transparent 48%), radial-gradient(circle at 35% 30%, #ffe58f, #ffb800 62%, #d99a00);
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .35);
  color: #0b1433; font-family: var(--font-num); font-size: .7rem; font-weight: 700;
}
html body .drh-coin--big { width: 2.3rem; height: 2.3rem; font-size: .8rem; }

/* ── Daily bonus (plugins/earn-daily-bonus/themes/draw-hall) ──
   Seven balls along the results rack: the days already claimed carry a
   green tick, today's is lifted out of its cup and bobs, the rest wait
   dim. The streak is on a cell of the results board. */
html body .drh-db {
  position: relative; overflow: hidden;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow);
}
html body .drh-db__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.6rem 1.4rem 0; }
html body .drh-db__title { margin: 0; font-family: var(--font-display); font-stretch: 118%; font-size: clamp(1.6rem, 4.4vw, 2.1rem); font-weight: 900; line-height: 1.2; color: var(--ink); }
html body .drh-db__sub { margin: .45rem 0 0; font-size: .96rem; line-height: 1.6; color: var(--ink-soft); }
html body .drh-db__streak {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .6rem .95rem .55rem;
  border-radius: 8px; background: var(--drh-flap); color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 18px -10px rgba(0, 0, 0, .55);
}
html body .drh-db__score { display: grid; place-items: center; }
html body .drh-db__num { font-family: var(--font-num); font-size: 1.8rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #ffc21f; font-variant-numeric: lining-nums tabular-nums; }
html body .drh-db__days { font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #dfe6ff; white-space: nowrap; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body .drh-db__days { letter-spacing: 0; font-size: .86rem; }
html body .drh-db__max {
  display: flex; align-items: center; gap: .9rem;
  margin: 1.1rem 1.4rem 0; padding: .8rem 1rem;
  background: var(--drh-green-soft);
  border: 1px solid color-mix(in srgb, var(--drh-green) 40%, transparent);
  border-radius: 10px; box-shadow: inset 4px 0 0 var(--drh-green);
}
html body .drh-db__max :is(p) { color: var(--ink) !important; }
html body .drh-db__max p + p { color: var(--ink-2) !important; }
html body .drh-db__max-art { flex-shrink: 0; width: 4.8rem; }
html body .drh-db__max-art .drh-art { display: block; width: 100%; height: auto; }
html body .drh-db__week { position: relative; padding: 1.6rem 1rem .4rem; }
/* The rack the seven balls sit in */
html body .drh-db__week::before {
  content: ''; position: absolute; left: .6rem; right: .6rem; top: 1.6rem; height: 72px; border-radius: 40px;
  background: linear-gradient(180deg, #18224a, #0b1433); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 #040818;
}
html body .drh-db__grid { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
html body .drh-day { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .3rem 0 .6rem; border-radius: 12px; }
html body .drh-day__label { order: 3; margin-top: .55rem; font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
html body .drh-day__pot {
  position: relative;
  display: grid; place-items: center;
  width: min(54px, 100%); height: 58px;
  color: #ffffff; font-size: clamp(9px, 1.3vw, 12px);
}
html body .drh-day__medal { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
html body .drh-day__pot > :not(.drh-day__medal) { position: relative; z-index: 1; margin-top: 4px; }
html body .drh-day--later .drh-day__pot { opacity: .55; }
html body .drh-day--later .drh-day__pot > i { color: #535e7d; font-size: 10px; }
html body .drh-day__tick { width: 16px; height: 16px; color: #0b8a5c; }
html body .drh-day__reward { order: 2; display: inline-flex; align-items: center; gap: 2px; margin-top: 1.4rem; font-family: var(--font-num); font-size: .92rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); overflow-wrap: normal; font-variant-numeric: lining-nums; }
html body .drh-day--today .drh-day__label { color: var(--ink); }
html body .drh-day--today .drh-day__pot > i { color: #d0103b; }
html body .drh-day--today .drh-day__pot { transform: translateY(-8px); }
@media (prefers-reduced-motion: no-preference) {
  html body .drh-day--today .drh-day__pot { animation: drh-day-hop 1.8s ease-in-out infinite; }
}
@keyframes drh-day-hop { 0%, 100% { transform: translateY(-8px); } 40% { transform: translateY(-14px); } 60% { transform: translateY(-9px); } }
html body .drh-db__foot { padding: 1.1rem 1.4rem 1.5rem; }
html body .drh-db__foot .claim-btn { border-radius: 10px; }
html body .drh-db__wait {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem; border-radius: 12px;
  font-size: .92rem; font-weight: 700; color: var(--ink-soft);
  border: 1px dashed var(--rule); background: var(--paper-2);
}
@media (max-width: 479px) {
  html body .drh-db__head { padding: 1.4rem 1rem 0; }
  html body .drh-db__week { padding: 1.3rem .5rem .3rem; }
  html body .drh-db__week::before { top: 1.3rem; }
  html body .drh-db__grid { gap: .15rem; }
  html body .drh-db__foot { padding: 1rem 1rem 1.3rem; }
  html body .drh-db__max { margin: 1rem 1rem 0; }
  html body .drh-day__reward { font-size: .8rem; }
  html body .drh-day__label { letter-spacing: 0; font-size: 10.5px; }
}

/* ── Games catalogue hero (plugins/earn-games/themes/draw-hall) ──
   The studio wall (skin/system.css .drh-lamplit), the drum standing on
   the floor at its lower corner, clear of the words. */
html body .drh-glh { padding-bottom: 30px; }
html body .drh-glh__lamp {
  position: absolute; z-index: 0; inset-inline-end: 4%; bottom: 18px; width: 150px; height: 112px;
}
html body .drh-glh__lamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] body .drh-glh__lamp svg { transform: scaleX(-1); }
@media (max-width: 639px) { html body .drh-glh__lamp { width: 92px; height: 69px; inset-inline-end: 2%; } }
html body .drh-glh__inner { position: relative; z-index: 2; max-width: 52rem; margin: 0 auto; padding: 4rem 1rem 4.4rem; text-align: center; }
@media (max-width: 639px) { html body .drh-glh__inner { padding-top: 3rem; padding-bottom: 5.4rem; } }
html body .drh-glh__kicker {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; padding: .35rem .85rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #0b1433; background: #ffffff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: inset 4px 0 0 #ff1f4b;
}
html[dir="rtl"] body .drh-glh__kicker { clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%); box-shadow: inset -4px 0 0 #ff1f4b; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body .drh-glh__kicker { letter-spacing: 0; font-size: .9rem; }
html body .drh-glh__title { margin: 0; font-family: var(--font-display); font-stretch: 122%; font-size: clamp(2.2rem, 6.4vw, 3.8rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.06; color: #ffffff; overflow-wrap: break-word; }
html body .drh-glh__text { margin: 1.1rem auto 0; max-width: 36rem; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.7; color: var(--ink-2); }
html body .drh-glh__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.9rem; }
html body .drh-glh__chip { padding: .6rem 1.1rem; font-size: .94rem; font-weight: 700; border-radius: 10px; border: 0; color: #0b1433; background: #ffffff; box-shadow: 0 3px 0 #0b1a8a, 0 10px 18px -10px rgba(0, 0, 0, .4); }
html body .drh-glh__chip > span { font-family: var(--font-num); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; color: #d0103b; }

/* ── Earn hub ──
   The pill nav (#pillNavBar) sits on the page in both modes, never on
   a black band, the LED strip along its foot. */
html body #pillNavBar,
html.dark body #pillNavBar {
  background: color-mix(in srgb, var(--paper) 96%, transparent) !important;
  border-bottom: 0 !important;
  box-shadow: 0 10px 18px -16px rgba(11, 20, 51, .5);
}
html body #pillNavBar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: var(--drh-strip); box-shadow: var(--drh-strip-glow);
}
html body #pillNavBar :is(a, button) { border-radius: 10px; font-family: var(--font-ui); font-weight: 700; }
html body .earn-card { border-radius: 16px; }

/* ── Game arena (assets/css/game-arena.css) ──
   Not the generic dark "game screen": by day the board is a pale panel
   of the set in a navy bezel, the hero the studio wall, the clock and
   score on cells of the results board. The games take the palette
   contract in theme.css. */
html body .arena {
  --a-accent: var(--drh-red);
  --a-accent-deep: var(--theme-600);
  --a-accent-rgb: var(--theme-500-rgb);
  --a-coins: var(--game-arena-coins, #1a3be0);
  --a-win: var(--game-arena-win, #0b8a5c);
  --a-amber: #ffb800;
  --a-danger: var(--game-arena-danger, #e0103d);
  --a-screen: var(--game-bg, #e7ecf6);
  --a-paper: var(--paper);
  --a-ink: var(--ink);
  --a-radius: 14px;
  --a-radius-sm: 9px;
  font-family: var(--font-ui);
}
html.dark body .arena { --a-amber: #ffc93a; }
html body .arena :is(.arena-hero .copy h1, .arena-lb .sc, .arena-medal) { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; }
html body .arena :is(.arena-chip .num, .arena-pill b, .arena-clock .t, .arena-scorebox .s, .arena-gain, .arena-bigscore, .arena-tierlabel b, .arena-stepn, .arena-ticket code, .arena-prize .vl, .arena-mqcard .p) { font-family: var(--font-num); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
/* The clock and the score on the HUD are cells of the results board */
html body :is(.arena-clock, .arena-scorebox) {
  background: var(--drh-flap) !important;
  border: 0 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 16px -10px rgba(0, 0, 0, .6) !important;
}
html body :is(.arena-clock .t, .arena-scorebox .s) { color: #ffffff !important; }
html body .arena-clock .t { color: #ffc21f !important; }
html body :is(.arena-clock, .arena-scorebox) :not(.t):not(.s) { color: #c9d3f2 !important; }
html body .arena-hud { border-bottom: 0; box-shadow: 0 10px 18px -16px rgba(11, 20, 51, .5); }
html body .arena-hud::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--drh-strip); box-shadow: var(--drh-strip-glow); pointer-events: none; }
html body .arena-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
/* The hero: the studio wall with the floor's LED strip along its foot;
   the game's picture seen through a wash of the page's colour */
html body .arena-hero .fallback { background: var(--drh-wall); }
html body .arena-hero .grad { background: linear-gradient(to top, rgba(243, 245, 250, .97), rgba(243, 245, 250, .55) 55%, transparent 80%); }
html.dark body .arena-hero .grad { background: linear-gradient(to top, rgba(6, 10, 28, .96), rgba(6, 10, 28, .45) 55%, transparent 80%); }
html body .arena-hero .copy h1 { color: var(--ink); }
html body .arena-hero .copy :is(p, span):not(.cost-tag) { color: var(--ink-2); }
html body .arena-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; pointer-events: none;
  background: var(--drh-strip); box-shadow: var(--drh-strip-glow);
}
html body .arena-hero .cost-tag {
  padding: .36rem .85rem .4rem; border: 0;
  border-radius: 0;
  background: #ffffff; color: #0b1433;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: inset 4px 0 0 #1f45ff;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body .arena-hero .cost-tag { letter-spacing: 0; }
html body .arena-hero .cost-tag.paid { box-shadow: inset 4px 0 0 #ff1f4b; }
html body .arena-pill { border-radius: 9px; }
html body .arena-play {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), var(--btn-bg);
  color: var(--btn-ink); text-shadow: none;
  box-shadow: var(--btn-shadow);
  font-family: var(--font-ui); font-weight: 700; letter-spacing: .02em;
}
html body .arena-play:active { transform: translateY(3px); box-shadow: none; }
html body .arena-play .pic { background: rgba(255, 255, 255, .12); border-radius: 7px; }
html body .arena-play .cost { border-color: rgba(255, 255, 255, .25); }
html body .arena-again { background: var(--btn-bg); color: var(--btn-ink); text-shadow: none; box-shadow: var(--btn-shadow); border-radius: 10px; }
html body .arena-track, html body .arena-tierbar { background: var(--rule-soft); border-radius: 2px; }
html body .arena-fill { background: var(--drh-meter); }
html body .arena-fill.mid { background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .2) 9px 11px), #ffc21f; }
html body .arena-fill.low { background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .2) 9px 11px), #ff1f4b; }
html body .arena-tierfill { background: var(--drh-meter); box-shadow: none; }
html body .arena-mark.hit { background: #ff1f4b; border-color: #a80c2e; border-radius: 50%; box-shadow: 0 0 8px #ff1f4b; }
/* The cabinet: the board in a navy bezel with its tally on top */
html body .arena-cabinet {
  border: 0;
  padding: 0;
  background: var(--game-pattern, none), var(--a-screen);
  box-shadow: 0 18px 44px -24px rgba(11, 20, 51, .6);
  margin: 16px 12px 22px;
}
html body .arena-cabinet::after {
  content: ''; position: absolute; inset: -11px; border-radius: calc(var(--a-radius-sm) + 7px); pointer-events: none; z-index: 4;
  padding: 11px;
  background: linear-gradient(180deg, #1b2556, #0b1433);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html body .arena-cabinet::before { display: none; }
html body .arena-cabinet.urgent { animation: none; box-shadow: 0 0 0 22px rgba(255, 31, 75, .12), 18px 28px 44px -24px rgba(11, 20, 51, .55); }
html body .arena-brk { border-color: rgba(255, 31, 75, .45); }
html body .arena-scan { display: none; }
html body .arena-medallion {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 55%), #ff1f4b;
  border: 0; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 31, 75, .2), 0 0 24px -2px #ff1f4b;
  color: #ffffff;
}
html body .arena-ticket {
  position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--rule);
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
html body .arena-ticket::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--drh-topline); }
html body .arena-prize { border-style: dashed; border-color: var(--rule); }
html body .arena-prize .ic, html body .arena-mqcard .ic, html body .arena-wincard .ic, html body .arena-ctrl .ci { border-radius: 10px; }
html body .arena-stepn { border-radius: 9px; background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 50%), #1f45ff; color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #0e2bc2; }
html body .arena-medal.m1 { background: radial-gradient(circle at 35% 30%, #ffe58f, #ffb800 62%); color: #0b1433; border-radius: 50%; }
html body .arena-lb .n { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
html body .arena-livebadge { background: var(--drh-green); }
html body .arena-marquee { background: var(--paper-2); }
html body .arena-wincard .strip { height: 4px; background: var(--drh-topline) !important; }

/* ── Offerwalls, watch & earn: caption cards ── */
html body #section-offerwalls, html body #section-watch_earn, html body [id^="section-"].earn-card:not(.drh-db) {
  position: relative; overflow: hidden;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 16px !important;
}
html body :is(#section-offerwalls, #section-watch_earn)::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--drh-topline); pointer-events: none; }

/* ── eSIM (plugins/esim-store/themes/draw-hall) ──
   Plans are caption cards with a round lamp in their colour, the signal
   drawn as LED cells rising, the price in the results board's mono
   beside a ball. */
html body .drh-esim { max-width: 72rem; margin: 0 auto; padding: 2.2rem 1rem 4rem; color: var(--ink); }
html body .drh-esim--narrow { max-width: 48rem; }
html body .drh-esim__head { position: relative; margin-bottom: 1.9rem; padding-bottom: 1.6rem; }
html body .drh-esim__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--drh-red) 0 56px, transparent 56px 62px, var(--drh-blue) 62px, transparent); }
html body .drh-esim__head--row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; }
html body .drh-esim__title { margin: 0 0 .35rem; font-family: var(--font-display); font-stretch: 120%; font-size: clamp(1.9rem, 4.8vw, 2.6rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: break-word; }
html body .drh-esim__sub { margin: 0; font-size: 1rem; color: var(--ink-soft); }
html body .drh-esim__back { display: inline-flex; gap: .35rem; margin-bottom: 1rem; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; }
html body .drh-esim__back:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
html[dir="rtl"] body .drh-esim__back svg { transform: scaleX(-1); }
html body .drh-esim__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1.1rem; }
html body .drh-esim-card {
  --m: var(--drh-t1);
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .45rem;
  padding: 1.4rem 1.2rem 1.15rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
html body .drh-esim-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--drh-topline); }
html body .drh-esim-card::after { content: ''; position: absolute; top: 18px; inset-inline-end: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--m); box-shadow: 0 0 10px var(--m); }
html body .drh-esim-card:nth-child(4n+2) { --m: var(--drh-t3); }
html body .drh-esim-card:nth-child(4n+3) { --m: var(--drh-t2); }
html body .drh-esim-card:nth-child(4n+4) { --m: var(--drh-t4); }
html body .drh-esim-card:hover, html body .drh-esim-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); outline: none; }
@media (prefers-reduced-motion: reduce) { html body .drh-esim-card, html body .drh-esim-card:hover { transition: none; transform: none; } }
html body .drh-esim-card__top { display: flex; align-items: center; gap: .6rem; padding-inline-end: 1.2rem; }
html body .drh-esim-card__region { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); overflow-wrap: anywhere; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) body :is(.drh-esim-card__region, .drh-esim-k) { letter-spacing: 0; font-size: 12.5px; }
html body .drh-esim-card__name { font-family: var(--font-display); font-stretch: 112%; font-size: 1.25rem; font-weight: 800; line-height: 1.22; overflow-wrap: break-word; }
html body .drh-esim-card__sum { font-size: .88rem; color: var(--ink-soft); }
html body .drh-esim-card__price { position: relative; display: flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--rule); }
html body .drh-esim-card__num { font-family: var(--font-num); font-size: 1.45rem; font-weight: 700; letter-spacing: -.04em; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums; }
html body .drh-esim-card__unit { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
/* Signal strength: LED cells rising one above another */
html body .drh-signal { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; background: linear-gradient(transparent calc(100% - 1px), var(--rule) 0) 0 0 / 100% 100% no-repeat; }
html body .drh-signal i { width: 7px; height: 8px; border-radius: 1px; background: var(--drh-t1); box-shadow: 0 0 6px var(--drh-t1); }
html body .drh-signal i:nth-child(2) { height: 12px; }
html body .drh-signal i:nth-child(3) { height: 16px; }
html body .drh-signal i:nth-child(4) { height: 20px; }
html body .drh-signal--big { height: 32px; gap: 4px; }
html body .drh-signal--big i { width: 8px; }
html body .drh-esim-sheet {
  position: relative; overflow: hidden;
  padding: 2rem 1.4rem 2rem;
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: var(--shadow-md);
}
html body .drh-esim-sheet::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--drh-topline); }
html body .drh-esim-list .drh-esim-sheet { box-shadow: var(--shadow); }
html body .drh-esim-list .drh-esim-sheet.is-new { border-color: var(--ink-soft); }
html body .drh-esim-facts { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1rem 0 1.2rem; padding: .9rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
html body .drh-esim-k { margin-bottom: .3rem; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
html body .drh-esim-v { font-family: var(--font-num); font-size: 1.2rem; font-weight: 700; letter-spacing: -.03em; }
html body .drh-esim-cover { margin-bottom: 1.2rem; }
html body .drh-esim-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
html body .drh-esim-pill { padding: .22rem .7rem; font-size: .82rem; font-weight: 700; background: var(--drh-chip-bg); border-radius: 3px; box-shadow: inset 3px 0 0 var(--drh-blue); }
html body .drh-esim-more { padding: .2rem .3rem; font-size: .8rem; color: var(--ink-soft); }
html body .drh-esim-price { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-bottom: 1.2rem; }
html body .drh-esim-price__amt { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-num); font-size: clamp(1.7rem, 5.6vw, 2.2rem); font-weight: 700; letter-spacing: -.04em; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums; }
html body .drh-esim-note, html body .drh-esim-bal { font-size: .85rem; color: var(--ink-soft); }
html body .drh-esim-bal { text-align: center; margin: 0; }
html body .drh-esim-short { color: var(--red); font-weight: 600; }
html body .drh-esim-pay { display: grid; gap: .65rem; }
html body .drh-esim-btn { width: 100%; justify-content: center; }
html body .drh-esim-alert { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 10px; font-size: .92rem; font-weight: 600; }
html body .drh-esim-alert--bad { background: var(--red-soft); color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
html body .drh-esim-alert--good { background: var(--drh-green-soft); color: var(--drh-green-ink); box-shadow: inset 3px 0 0 var(--drh-green); }
html[dir="rtl"] body .drh-esim-alert--bad { box-shadow: inset -3px 0 0 var(--red); }
html[dir="rtl"] body .drh-esim-alert--good { box-shadow: inset -3px 0 0 var(--drh-green); }
html body .drh-esim-list { display: grid; gap: 1rem; }
html body .drh-esim-order__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; }
html body .drh-esim-order__name { margin: 0 0 .2rem; font-family: var(--font-display); font-stretch: 112%; font-size: 1.25rem; font-weight: 800; overflow-wrap: break-word; }
html body .drh-esim-order__meta { margin: 0; font-size: .85rem; color: var(--ink-soft); }
html body .drh-esim-install { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
html body .drh-esim-qr { flex: 0 0 auto; padding: 10px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--rule), 0 0 0 5px var(--paper-2), 0 0 0 7px #1f45ff; margin: 8px; }
html body .drh-esim-creds { flex: 1 1 15rem; font-size: .88rem; line-height: 1.75; }
html body .drh-esim-iccid { margin-top: .4rem; color: var(--ink-soft); overflow-wrap: anywhere; }
html body .drh-esim-mono { font-family: var(--font-num); overflow-wrap: anywhere; }
/* Plan facts mix Latin units and digits ("5 GB · 30 days"); in Arabic and
   Urdu they keep their own order. */
html body :is(.drh-esim__sub, .drh-esim-card__sum, .drh-esim-v, .drh-esim-order__meta, .drh-esim-note) { unicode-bidi: plaintext; }
html body .drh-esim-btn.ed-btn-primary { background: var(--btn-bg) !important; color: var(--btn-ink) !important; border-color: transparent !important; box-shadow: var(--btn-shadow); }
html body .drh-esim-btn.ed-btn-primary:hover:not(:disabled) { background: var(--btn-bg-hover) !important; }
html body .drh-esim-btn.ed-btn-secondary { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; }

/* Bid rows stack on phones; the plugin's RTL helper would otherwise force
   them into one squeezed row in Arabic and Urdu, clipping the lot's name. */
@media (max-width: 639px) {
  html[dir="rtl"] body #px-spa-content a.group.flex-col.rtl-flex-row-reverse { flex-direction: column !important; }
}

/* ── Scratch and spin ── */
html body .drh-slip-card { position: relative; overflow: visible !important; }
html body .drh-buy-art { width: 150px; margin-inline: auto; }
html body .drh-buy-art .drh-art { display: block; width: 100%; height: auto; }
/* The win modal: a caption card, the prize in a pool of spotlight */
html body .drh-win-modal { position: relative; overflow: hidden; background: var(--drh-gloss), var(--paper-2) !important; }
html body .drh-win-modal::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--drh-topline); pointer-events: none; }
html body .drh-win-modal__kicker { justify-content: center; margin-bottom: .6rem; }
html body #px-spa-content .ed-value-box.drh-win-modal__entry,
html body .ed-value-box.drh-win-modal__entry {
  margin-top: 0;
  background: var(--drh-face) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--drh-face-ring) !important;
}
html body .ed-value-box.drh-win-modal__entry #prizeLabel { color: #0b1433 !important; font-family: var(--font-display) !important; font-weight: 800 !important; font-stretch: 112%; }
html body #px-spa-content .ed-value-box.drh-win-modal__entry::after, html body .ed-value-box.drh-win-modal__entry::after { display: none; }

/* The slot arena's machine (/slot-arena) stands in a navy bezel */
html body .slot-machine, html body [class*="slot-cabinet"] { border-radius: 16px; box-shadow: 0 0 0 8px #0b1433, 0 0 0 9px rgba(93, 128, 255, .45), var(--shadow-md); }

/* Share buttons in the set's colours, lettered at full contrast */
html body #px-spa-content button.text-white[style*="#25D366"] { background: #0b8a5c !important; }
html body #px-spa-content button.text-white[style*="#229ED9"] { background: #1f45ff !important; }