@charset "utf-8";
/* md88my.app — mobile-first phone column.
 *
 * The whole site is a 540px column centred over a blurred violet field, identical on a monitor
 * and on a handset. There is no desktop layout and no breakpoint that introduces one, so every
 * measurement below is a phone measurement that simply stops growing.
 *
 * Scale: 6 / 12 / 18 / 26 / 38. Radii 14 on cards, 22 on pills, 9 on small chips.
 * Violet #8b5cf6 carries every action. Lime #a3e635 is reserved for money and appears nowhere
 * else, so an amount is readable without reading the label.
 */

:root {
  --back: #120b22;
  --col: #1b1033;
  --card: #241545;
  --card-2: #2c1a54;
  --line: #372358;
  --acc: #8b5cf6;
  --acc-lo: #6d35e0;
  --acc-hi: #a780ff;
  --cash: #a3e635;
  --ink: #f4f1fa;
  --dim: #9a8fb5;
  --col-w: 540px;
  --bar-h: 68px;
  --r-card: 14px;
  --r-pill: 22px;
  --r-chip: 9px;
  --lift: 0 10px 30px rgba(10, 4, 24, .55);
}

* { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--back);
  color: var(--ink);
  font: 400 16px/1.62 "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  overflow-x: clip;
}

/* The blurred field behind the column. A fixed pseudo-element rather than a background image:
   it costs nothing to download and it cannot shift the layout. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(42% 34% at 18% 12%, rgba(139, 92, 246, .42), transparent 70%),
    radial-gradient(38% 30% at 84% 26%, rgba(109, 53, 224, .34), transparent 72%),
    radial-gradient(50% 40% at 50% 96%, rgba(163, 230, 53, .12), transparent 70%);
  filter: blur(62px);
  pointer-events: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  min-width: 0;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ----------------------------------------------------------------- the column */
.d8-shell {
  width: 100%;
  max-width: var(--col-w);
  margin: 0 auto;
  background: var(--col);
  box-shadow: var(--lift);
  padding-bottom: calc(var(--bar-h) + 26px);
  min-height: 100vh;
}

/* ----------------------------------------------------------------- buttons */
.d8-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  min-width: 0;
}

.d8-btn.p {
  background: linear-gradient(135deg, var(--acc-hi), var(--acc-lo));
  color: #fff;
  box-shadow: 0 6px 18px rgba(109, 53, 224, .45);
}

.d8-btn.o {
  background: transparent;
  color: var(--acc-hi);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.d8-btn.g {
  background: var(--cash);
  color: #16210a;
}

.d8-btn.w {
  display: flex;
  width: 100%;
}

/* ----------------------------------------------------------------- header */
.d8-head {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 12px 18px 10px;
  background: rgba(27, 16, 51, .93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.d8-head .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.d8-head .acts {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.d8-head .tag {
  margin-top: 7px;
  color: var(--dim);
  font-size: 12.5px;
  letter-spacing: .02em;
}

.d8-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.d8-logo svg {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.d8-logo b {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
}

.d8-head .lang {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r-chip);
  background: rgba(55, 35, 88, .7);
}

/* The chips stay visually small but the tappable box is a full 44px: the language switcher is a
   control people actually use, and three 29px-tall targets in a row is how a thumb misses. */
.d8-head .lang a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 700;
}

.d8-head .lang a.on {
  background: var(--acc);
  color: #fff;
}

/* ----------------------------------------------------------------- carousel */
.d8-car { padding: 18px 0 0; }

.d8-car .track {
  display: flex;
  gap: 12px;
  padding: 0 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.d8-car .track::-webkit-scrollbar { display: none; }

.d8-car .sl {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  border-radius: var(--r-card);
  overflow: hidden;
  min-width: 0;
}

.d8-car .sl img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.d8-car .cap {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 44px 16px 16px;
  background: linear-gradient(to top, rgba(18, 11, 34, .95), rgba(18, 11, 34, 0));
}

.d8-car .cap b { font-size: 17px; line-height: 1.3; }
.d8-car .cap span { color: var(--dim); font-size: 12.5px; }
.d8-car .cap .d8-btn { min-height: 38px; padding: 0 16px; font-size: 13px; }

.d8-car .dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 0;
}

/* The button is a 44px target that paints nothing; the dot itself is drawn by ::after. Padding a
   button and clipping its background does not work here, because the active state changes the
   width and the clip then paints the whole padded box. */
.d8-car .dots button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.d8-car .dots button::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}

.d8-car .dots button.on::after {
  width: 20px;
  border-radius: 4px;
  background: var(--acc);
}

/* ----------------------------------------------------------------- jackpot */
.d8-jp {
  margin: 18px;
  padding: 16px;
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
}

.d8-jp .lb {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.d8-jp .lb span { color: var(--dim); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.d8-jp .lb em { color: var(--cash); font-size: 12.5px; font-style: normal; font-weight: 700; }

.d8-jp .dg {
  display: flex;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.d8-jp .dg b {
  flex: 0 1 auto;
  min-width: 0;
  padding: 9px 0;
  width: 30px;
  border-radius: 7px;
  background: #160d2a;
  box-shadow: inset 0 -2px 0 rgba(163, 230, 53, .25);
  color: var(--cash);
  font-size: 23px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.d8-jp .dg i {
  align-self: flex-end;
  padding-bottom: 10px;
  color: var(--dim);
  font-style: normal;
}

/* ----------------------------------------------------------------- sections */
.d8-sec { padding: 26px 18px 0; }

.d8-sec .sh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  min-width: 0;
}

.d8-sec .sh h2 {
  font-size: 17px;
  min-width: 0;
}

.d8-sec .sh .pill {
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(139, 92, 246, .16);
  color: var(--acc-hi);
  font-size: 12px;
  font-weight: 700;
}

/* ----------------------------------------------------------------- category tiles */
.d8-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.d8-chips .ch {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 14px 13px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--line);
}

.d8-chips .ch span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(167, 128, 255, .3), rgba(109, 53, 224, .3));
  color: var(--acc-hi);
  font-size: 17px;
}

.d8-chips .ch b {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- game grids */
.gg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.gc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.gc img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid var(--line);
}

.gc b {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gc small { color: var(--dim); font-size: 10.5px; }

.gc em {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--acc);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .05em;
}

/* ----------------------------------------------------------------- featured room */
.d8-feat {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
}

.d8-feat img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.d8-feat .bd {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
}

.d8-feat .bd b { font-size: 16px; }
.d8-feat .bd span { color: var(--dim); font-size: 13px; }

.d8-feat .tip {
  padding: 12px 13px;
  border-left: 3px solid var(--cash);
  border-radius: 0 9px 9px 0;
  background: rgba(163, 230, 53, .07);
}

.d8-feat .tip strong {
  display: block;
  margin-bottom: 6px;
  color: var(--cash);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.d8-feat .tip li {
  padding-left: 15px;
  margin-top: 5px;
  position: relative;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.55;
}

.d8-feat .tip li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cash);
}

/* ----------------------------------------------------------------- promo cards */
.d8-promos {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.pc {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
}

.pc img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.pc .bd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  min-width: 0;
}

.pc .tp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  min-width: 0;
}

.pc .tp em {
  flex: 0 1 auto;
  min-width: 0;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(139, 92, 246, .2);
  color: var(--acc-hi);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .07em;
  overflow-wrap: anywhere;
}

.pc .tp .val {
  flex: 0 0 auto;
  color: var(--cash);
  font-size: 22px;
  font-weight: 800;
}

.pc strong { font-size: 14.5px; }
.pc p { color: var(--dim); font-size: 13px; }

.pc .mt {
  height: 6px;
  border-radius: 3px;
  background: #160d2a;
  overflow: hidden;
}

.pc .mt i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--acc-lo), var(--acc-hi));
}

.pc small { color: var(--dim); font-size: 11px; }

/* ----------------------------------------------------------------- winners */
.d8-wins {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.wc {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--line);
}

.wc .av {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(139, 92, 246, .22);
  color: var(--acc-hi);
  font-size: 14px;
}

.wc .who {
  flex: 1 1 auto;
  min-width: 0;
}

.wc .who b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
}

.wc .who small,
.wc .amt small {
  display: block;
  color: var(--dim);
  font-size: 10.5px;
}

.wc .amt {
  flex: 0 0 auto;
  text-align: right;
}

.wc .amt b {
  color: var(--cash);
  font-size: 14px;
  font-weight: 800;
}

/* ----------------------------------------------------------------- tables */
.d8-tw {
  overflow-x: auto;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.d8-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.d8-tbl th,
.d8-tbl td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.d8-tbl thead th {
  background: var(--card-2);
  color: var(--acc-hi);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.d8-tbl tbody th {
  color: var(--ink);
  font-weight: 700;
}

.d8-tbl td { color: var(--dim); }
.d8-tbl td.y { color: var(--cash); font-weight: 600; }
.d8-tbl tbody tr:last-child th,
.d8-tbl tbody tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------- reviews */
.d8-revs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rv {
  margin: 0;
  padding: 15px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--line);
}

.rv .hd {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 10px;
}

.rv .av {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(167, 128, 255, .2);
  font-size: 14px;
}

.rv figcaption {
  flex: 1 1 auto;
  min-width: 0;
}

.rv figcaption b { display: block; font-size: 13px; }
.rv figcaption small { color: var(--dim); font-size: 11px; }

.rv .st {
  flex: 0 0 auto;
  color: var(--cash);
  font-size: 12px;
  letter-spacing: 1px;
}

.rv blockquote {
  margin: 0;
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.6;
}

.rv .ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.rv .ft span { color: var(--dim); font-size: 11px; }

.rv .ft em {
  flex: 0 0 auto;
  color: var(--cash);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .07em;
}

/* ----------------------------------------------------------------- article */
.d8-content { padding: 30px 18px 0; }

.d8-content h1 {
  font-size: 25px;
  line-height: 1.26;
  margin-bottom: 11px;
}

.d8-content h2 {
  margin: 26px 0 10px;
  font-size: 18px;
  line-height: 1.32;
}

.d8-content .lead {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.68;
}

.d8-content p {
  margin-top: 11px;
  color: var(--dim);
  font-size: 14.5px;
  line-height: 1.72;
}

.d8-content a { color: var(--acc-hi); text-decoration: underline; text-underline-offset: 3px; }

/* page hero */
.d8-ph { margin-bottom: 8px; }

.d8-ph img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-card);
  margin-bottom: 15px;
}

.d8-ph .eb {
  display: inline-block;
  margin-bottom: 9px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(139, 92, 246, .18);
  color: var(--acc-hi);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.d8-ph .act,
.d8-content .act {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  min-width: 0;
}

.d8-ph .act .d8-btn,
.d8-content .act .d8-btn { flex: 1 1 0; min-width: 0; }

.d8-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.d8-kpis div {
  padding: 13px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  min-width: 0;
}

.d8-kpis b {
  display: block;
  color: var(--cash);
  font-size: 20px;
  font-weight: 800;
}

.d8-kpis span { color: var(--dim); font-size: 11.5px; line-height: 1.4; }

.d8-steps {
  counter-reset: s;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.d8-steps li {
  counter-increment: s;
  position: relative;
  padding: 12px 13px 12px 44px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.6;
}

.d8-steps li::before {
  content: counter(s);
  position: absolute;
  left: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.d8-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.d8-faq details {
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
}

.d8-faq summary {
  padding: 13px 14px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
}

.d8-faq summary::-webkit-details-marker { display: none; }

.d8-faq summary::after {
  content: "+";
  float: right;
  color: var(--acc-hi);
  font-weight: 800;
}

.d8-faq details[open] summary::after { content: "\2212"; }

.d8-faq p {
  padding: 0 14px 14px;
  margin: 0;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.68;
}

.d8-band {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 28px;
  padding: 19px;
  border-radius: var(--r-card);
  background: linear-gradient(145deg, var(--acc-lo), #3c1a80);
  text-align: center;
}

.d8-band b { font-size: 15.5px; line-height: 1.5; }

/* ----------------------------------------------------------------- footer */
.d8-foot {
  margin-top: 34px;
  padding: 24px 18px 26px;
  border-top: 1px solid var(--line);
  background: #160d2a;
}

.d8-foot .brand p {
  margin-top: 10px;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.66;
}

.d8-foot .links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
}

.d8-foot .links a { color: var(--dim); font-size: 12.5px; }

.d8-foot .pay,
.d8-foot .trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  min-width: 0;
}

/* ONE chip for every mark in the wall: payment rails and certification badges alike. A solid
   near-white field, each logo in its own colour, nothing silhouetted and nothing lifted. The
   chip is opaque rather than translucent so no mark is judged against the violet behind it, and
   a fixed height keeps a tall badge and a wide wordmark optically the same size. */
.d8-foot .chip {
  flex: 0 1 auto;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border-radius: 7px;
  background: #f7f6fb;
}

.d8-foot .chip img {
  max-height: 23px;
  max-width: 100%;
  width: auto;
  min-width: 0;
}

.d8-foot .lic {
  margin-top: 17px;
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.64;
}

.d8-foot .legal {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 15px;
  min-width: 0;
}

.d8-foot .age {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--cash);
  color: var(--cash);
  font-size: 11px;
  font-weight: 800;
}

.d8-foot .legal p {
  min-width: 0;
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.56;
}

.d8-foot small {
  display: block;
  margin-top: 17px;
  color: #6d6190;
  font-size: 11px;
}

/* ----------------------------------------------------------------- bottom bar */
.d8-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--col-w);
  height: var(--bar-h);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-top: 15px;
  background: #170e2c;
  border-top: 1px solid var(--line);
}

.d8-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  color: var(--dim);
  font-size: 10px;
  text-align: center;
}

.d8-bar a .i { font-size: 17px; line-height: 1; }

/* The centre slot lifts into a coin that overhangs the bar's top edge, ringed in the bar's own
   background so it reads as a cut-out. The bar's padding-top is what stops it being clipped. */
.d8-bar .coin {
  position: relative;
}

.d8-bar .coin .i {
  position: absolute;
  top: -26px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--acc-hi), var(--acc-lo));
  border: 4px solid #170e2c;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  box-shadow: 0 7px 16px rgba(109, 53, 224, .5);
}

.d8-bar .coin em {
  margin-top: 25px;
  color: var(--acc-hi);
  font-style: normal;
  font-weight: 700;
}

/* One floating side button, parked clear of the bar. */
.d8-side {
  position: fixed;
  right: 50%;
  bottom: calc(var(--bar-h) + 18px);
  z-index: 45;
  margin-right: calc(var(--col-w) / -2 + 14px);
}

.d8-side a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 54px;
  padding: 9px 4px;
  border-radius: var(--r-chip);
  background: rgba(36, 21, 69, .95);
  border: 1px solid var(--line);
  color: var(--acc-hi);
  font-size: 9px;
  text-align: center;
}

.d8-side a span { font-size: 17px; }
.d8-side a em { font-style: normal; font-weight: 700; }

@media (max-width: 580px) {
  .d8-side {
    right: 14px;
    margin-right: 0;
  }
}

/* ----------------------------------------------------------------- entry sheet */
.d8-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: rgba(10, 5, 20, .78);
}

.d8-sheet[hidden] { display: none; }

.d8-sheet .bx {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow: hidden auto;
  border-radius: 20px 20px var(--r-card) var(--r-card);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 -12px 40px rgba(8, 3, 18, .7);
}

/* Inside the card, never hung off the top edge: .bx is overflow:hidden for its corners. */
.d8-sheet .x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 11, 34, .75);
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.d8-sheet .panes { min-width: 0; }

.d8-sheet .pane { display: none; }
.d8-sheet .pane.on { display: block; }

.d8-sheet .pane img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.d8-sheet .bd {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
}

.d8-sheet .bd em {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(139, 92, 246, .2);
  color: var(--acc-hi);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .07em;
}

.d8-sheet .bd b { font-size: 17px; line-height: 1.34; }
.d8-sheet .bd p { color: var(--dim); font-size: 13px; line-height: 1.62; }

.d8-sheet .pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px 10px;
  min-width: 0;
}

.d8-sheet .pg button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(55, 35, 88, .8);
  color: var(--acc-hi);
  font-size: 18px;
  cursor: pointer;
}

.d8-sheet .pg .dots {
  display: flex;
  gap: 6px;
}

/* Same treatment as the carousel dots: a 44px tall target painting a 7px dot. */
.d8-sheet .pg .dots button {
  width: 26px;
  height: 44px;
  border-radius: 0;
  background: none;
}

.d8-sheet .pg .dots button::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}

.d8-sheet .pg .dots button.on::after { background: var(--acc); }

.d8-sheet .pg .ct {
  color: var(--dim);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.d8-sheet .later {
  width: 100%;
  padding: 13px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
}

/* ----------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}