/* rektpot · pot demo (phone)
   pairs with js/pot-demo.js. every class is .pd- prefixed.
   colours, radii, outlines and shadows come from the tokens in site.css :root.
   flat fills only. no gradients. hard shadows. */

.pd-root,
.pd-root *,
.pd-root *::before,
.pd-root *::after { box-sizing: border-box; }

.pd-root {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
}

.pd-root :where(p, h3, dl, dd, ol) { margin: 0; padding: 0; }
.pd-root :where(ol) { list-style: none; }
:where(.pd-root) :where(svg) { display: block; overflow: visible; }

/* svg paint */
.pd-s { stroke: var(--ink); }
.pd-f-lav { fill: var(--lav); }
.pd-f-pink { fill: var(--pink); }
.pd-f-rim { fill: var(--pink-dark); }
.pd-f-white { fill: var(--white); }
.pd-f-ink { fill: var(--ink); }
.pd-f-gold { fill: var(--gold); }
.pd-f-mint { fill: var(--mint); }
.pd-f-sky { fill: var(--sky); }

.pd-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- stage + phone ---------- */
.pd-stage {
  container: pd-stage / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding-top: 6px;
}

.pd-phone {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  padding: 30px 10px 14px;
  background: var(--ink);
  border-radius: 46px;
  box-shadow: 0 8px 0 var(--ink);
}
/* speaker slot */
.pd-phone::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  width: 62px;
  height: 8px;
  margin-left: -31px;
  background: var(--muted);
  border-radius: 999px;
}

.pd-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  overflow: hidden;
  background: var(--sky);
  border-radius: 34px;
}

.pd-ribbon {
  position: relative;
  z-index: 3;
  padding: 7px 14px;
  background: var(--gold);
  border-bottom: var(--outline);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.pd-views {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.pd-view {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 16px;
  overflow: hidden;
}
.pd-view[hidden] { display: none; }

.pd-view--pot { background: var(--sky); }
.pd-view--enter { background: var(--cream); }
.pd-view--draw { background: var(--sky); }
.pd-view--win { background: var(--gold); }
.pd-view--lose { background: var(--lav-light); }

/* ---------- shared bits ---------- */
.pd-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pd-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
}
.pd-rekt--mini { width: 32px; height: auto; }

.pd-pill {
  display: inline-block;
  padding: 3px 10px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.pd-card {
  background: var(--white);
  border: var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.pd-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.pd-unit {
  font-size: 14px;
  font-weight: 700;
}

.pd-round {
  display: inline-block;
  padding: 3px 11px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.pd-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.pd-title:focus,
.pd-round:focus { outline: none; }

/* chunky outlined headline text, like the hero */
.pd-title--xl,
.pd-title--l,
.pd-title--m,
.pd-bignum,
.pd-amount-num > span:first-child,
.pd-gain-amt {
  color: var(--white);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
}
.pd-title--xl { font-size: 60px; line-height: 1; letter-spacing: -0.01em; }
.pd-title--l { font-size: 30px; line-height: 1.08; }
.pd-title--m { font-size: 25px; line-height: 1.1; -webkit-text-stroke-width: 2.5px; }

.pd-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: auto;
  padding: 13px 16px;
  appearance: none;
  /* primary, same as .btn-pink on the site: white on deep pink (5.6:1) */
  background: var(--pink-deep);
  color: var(--white);
  border: var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
}
.pd-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.pd-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

.pd-root :is(button, input):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- 1 · pot ---------- */
.pd-potcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 12px 14px;
  /* light pink keeps the small ink labels easy to read (13.1:1) */
  background: var(--pink-light);
  text-align: center;
}
.pd-potcard .pd-round { margin-bottom: 4px; }
.pd-bignum {
  margin: 2px 0 4px;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.pd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pd-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px 8px;
  border-radius: var(--radius-sm);
}
.pd-stat dt { font-size: 14px; font-weight: 600; }
.pd-stat dd { font-size: 24px; font-weight: 700; line-height: 1.05; }

.pd-clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  background: var(--gold-light);
  border-radius: var(--radius-sm);
}
.pd-cd-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
}
.pd-cd {
  min-width: 36px;
  padding: 3px 5px 2px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: 19px;
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pd-cd--s { background: var(--pink-deep); color: var(--white); }
.pd-cd-sep { font-size: 17px; }

.pd-prizes {
  padding: 9px 12px 11px;
  border-radius: var(--radius-sm);
}
.pd-prizes .pd-label { margin-bottom: 6px; }
.pd-prize-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-prize {
  display: grid;
  /* fixed amount column so the three bar tracks are the same length */
  grid-template-columns: 38px minmax(0, 1fr) 6.6em;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.pd-place {
  padding: 2px 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.pd-place--1 { background: var(--gold); }
.pd-place--2 { background: var(--lav); }
.pd-place--3 { background: var(--pink-light); }
.pd-bar {
  display: block;
  height: 12px;
  overflow: hidden;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.pd-bar > span {
  display: block;
  height: 100%;
  background: var(--pink);
  border-right: 2px solid var(--ink);
}
.pd-bar--1 > span { width: 100%; border-right: 0; }
.pd-bar--2 > span { width: 50%; }
.pd-bar--3 > span { width: 25%; }
.pd-prize-amt {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- 2 · enter ---------- */
.pd-titlerow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.pd-back {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  appearance: none;
  background: var(--white);
  border: var(--outline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.pd-back:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.pd-arrow { width: 22px; height: 22px; }

.pd-amount {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px 12px;
  background: var(--gold-light);
}
.pd-amount-num {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.pd-amount-num > span:first-child {
  font-size: 44px;
  letter-spacing: -0.01em;
}

/* chunky slider: a flat track + fill drawn behind a transparent native range */
.pd-range-wrap {
  --pd-thumb: 30px;
  --pd-pct: 0;
  position: relative;
  height: 34px;
}
.pd-range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 16px;
  margin-top: -8px;
  overflow: hidden;
  background: var(--white);
  border: var(--outline);
  border-radius: 999px;
}
.pd-range-fill {
  display: block;
  width: calc(var(--pd-thumb) / 2 + (100% - var(--pd-thumb)) * var(--pd-pct));
  height: 100%;
  background: var(--pink);
}
.pd-range {
  position: relative;
  display: block;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.pd-range::-webkit-slider-runnable-track {
  height: 34px;
  background: transparent;
  border: 0;
}
.pd-range::-moz-range-track {
  height: 34px;
  background: transparent;
  border: 0;
}
.pd-range::-webkit-slider-thumb {
  width: var(--pd-thumb);
  height: var(--pd-thumb);
  margin-top: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--gold);
  border: var(--outline);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.pd-range::-moz-range-thumb {
  width: var(--pd-thumb);
  height: var(--pd-thumb);
  background: var(--gold);
  border: var(--outline);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.pd-range:active::-webkit-slider-thumb { background: var(--white); }
.pd-range:active::-moz-range-thumb { background: var(--white); }
.pd-range:focus-visible { outline-offset: 2px; border-radius: 999px; }

.pd-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.pd-chip {
  min-height: 38px;
  padding: 6px 0;
  appearance: none;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 0 var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.pd-chip[aria-pressed='true'] { background: var(--gold); box-shadow: 0 2px 0 var(--ink), inset 0 0 0 1px var(--ink); }
.pd-chip:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }

.pd-calc {
  padding: 8px 12px 10px;
}
.pd-calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 15px;
}
.pd-calc-row dt { font-weight: 600; }
.pd-calc-row dd {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pd-calc-row--big {
  align-items: center;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 2px dashed var(--ink);
}
.pd-gain {
  display: inline-block;
  padding: 3px 10px;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 18px;
  white-space: nowrap;
}

/* ---------- 3a · drawing ---------- */
.pd-view--draw {
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-inline: 20px;
  text-align: center;
}
.pd-drawart {
  position: relative;
  width: 150px;
  padding-top: 46px;
}
.pd-rekt--draw { width: 150px; height: auto; }
.pd-drop {
  position: absolute;
  top: 0;
  z-index: 0;
}
.pd-drop--1 { left: 34px; }
.pd-drop--2 { left: 62px; top: 14px; }
.pd-drop--3 { left: 90px; top: 4px; }
.pd-view--draw .pd-title { max-width: 14ch; }
/* keep the words above the drifting clouds (clouds are positioned, so they
   would otherwise paint over plain text) */
.pd-view--draw .pd-title,
.pd-note { position: relative; z-index: 1; }
.pd-note {
  max-width: 24ch;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.pd-cloud {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
}
.pd-cloud--a { top: 34px; left: -10px; width: 84px; }
.pd-cloud--b { right: -14px; bottom: 24px; width: 100px; }
.pd-cloud--c { top: 26px; right: -16px; width: 92px; }
.pd-cloud--d { top: 150px; left: -30px; width: 64px; }

/* ---------- 3b/3c · result ---------- */
.pd-result {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
  text-align: center;
}
.pd-resart {
  position: relative;
  width: 112px;
  margin-top: 2px;
}
.pd-rekt--result { width: 112px; height: auto; }
.pd-view--win .pd-resart { padding-top: 16px; }
.pd-burst {
  position: absolute;
  top: 0;
}
.pd-burst--1 { left: -8px; top: 20px; }
.pd-burst--2 { left: 43px; top: -10px; }
.pd-burst--3 { right: -8px; top: 14px; }

.pd-view--win .pd-title,
.pd-view--lose .pd-title {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding-inline: 6px; /* keeps the outlined letters off the screen edge */
  text-wrap: balance;
}

.pd-gaincard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px 12px;
  background: var(--mint);
  border-radius: var(--radius);
  line-height: 1.1;
}
.pd-gain-amt {
  font-size: 32px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.pd-gain-place {
  padding: 2px 12px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.pd-pill--next {
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd-recap {
  position: relative;
  z-index: 1;
  padding-block: 6px 8px;
  border-radius: var(--radius-sm);
}
.pd-recap .pd-calc-row { font-size: 14px; padding: 2px 0; }

.pd-confetti {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- coins + deco ---------- */
.pd-coin {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  background: var(--gold);
  border: var(--outline);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.pd-coin::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.pd-coin--sm { width: 26px; height: 26px; box-shadow: 0 2px 0 var(--ink); }
.pd-coin--sm::after { inset: 4px; }

.pd-deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.pd-deco--c { top: -2px; left: 0; }
.pd-star { width: 38px; height: 38px; }
/* side coins only when there is room beside the phone, so they never cover the screen */
.pd-deco--a,
.pd-deco--b { display: none; }
@container pd-stage (min-width: 396px) {
  .pd-deco--a,
  .pd-deco--b { display: block; }
  .pd-deco--a { top: 132px; right: 0; }
  .pd-deco--b { top: 360px; left: 4px; }
  .pd-deco--c { top: 0; left: 8px; }
  .pd-star { width: 44px; height: 44px; }
}

/* ---------- tabs under the phone ---------- */
.pd-tabs {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  background: var(--white);
  border: var(--outline);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.pd-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 14px;
  appearance: none;
  background: transparent;
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pd-tab-dot {
  width: 12px;
  height: 12px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.pd-tab:hover:not(:disabled) { background: var(--cream); }
.pd-tab[aria-current='true'] {
  background: var(--gold);
  border-color: var(--ink);
  box-shadow: 0 2px 0 var(--ink);
}
.pd-tab[aria-current='true'] .pd-tab-dot { background: var(--pink); }
.pd-tab:disabled {
  color: var(--muted);
  cursor: not-allowed;
}
/* second cue that doesn't rely on colour: the dot goes dashed (no opacity, so the label keeps 9:1) */
.pd-tab:disabled .pd-tab-dot { border-color: var(--muted); border-style: dashed; }

@media (max-width: 359px) {
  /* keep the balance pill from running into the brand on 320px phones */
  .pd-brand { font-size: 15px; gap: 4px; }
  .pd-rekt--mini { width: 28px; }
  .pd-pill { padding-inline: 8px; font-size: 13px; }
  .pd-tab { padding-inline: 10px; gap: 5px; }
  .pd-bignum { font-size: 46px; }
  .pd-title--xl { font-size: 52px; }
}

/* ---------- motion: only for people who haven't asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pd-btn,
  .pd-chip,
  .pd-back,
  .pd-tab { transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; }
  .pd-range-fill { transition: width 0.08s linear; }

  .pd-view.pd-in { animation: pd-rise 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }

  .pd-deco--a { animation: pd-float 3.6s ease-in-out infinite; }
  .pd-deco--b { animation: pd-float 4.4s ease-in-out -1.2s infinite; }
  .pd-deco--c .pd-star { animation: pd-spin 12s linear infinite; }

  .pd-view--pot .pd-cd--s { animation: pd-tick 1s steps(1) infinite; }

  .pd-view--draw.pd-in .pd-rekt--draw { animation: pd-wobble 0.5s ease-in-out infinite; transform-origin: 50% 100%; }
  .pd-view--draw.pd-in .pd-drop { animation: pd-drop 0.9s cubic-bezier(0.5, 0, 0.9, 0.6) infinite; }
  .pd-view--draw.pd-in .pd-drop--2 { animation-delay: 0.3s; }
  .pd-view--draw.pd-in .pd-drop--3 { animation-delay: 0.6s; }

  .pd-view--win.pd-in .pd-burst { animation: pd-burst 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; }
  .pd-view--win.pd-in .pd-burst--2 { animation-delay: 0.08s; }
  .pd-view--win.pd-in .pd-burst--3 { animation-delay: 0.16s; }
  .pd-view--win.pd-in .pd-gaincard { animation: pd-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; }
  .pd-view--lose.pd-in .pd-title { animation: pd-thud 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
}

@keyframes pd-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pd-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}
@keyframes pd-spin {
  to { transform: rotate(360deg); }
}
@keyframes pd-tick {
  0% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}
@keyframes pd-wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes pd-drop {
  0% { opacity: 0; transform: translateY(-30px); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(58px); }
}
@keyframes pd-burst {
  0% { opacity: 0; transform: translateY(40px) scale(0.4); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pd-pop {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pd-thud {
  0% { opacity: 0; transform: translateY(-14px) scale(1.15); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}