/* Halloween Candy Swap Checker.
 *
 * The first version of this page was the Fake Deadline Generator's stylesheet
 * with a pumpkin dropped on top: thin serif headings, 0.6rem uppercase mono
 * labels, grey pills on near-black. That is a developer tool in a costume, and
 * it is being read by an eight-year-old on a phone in a front garden.
 *
 * So: chunky rounded display type, cards that sit *above* the background
 * rather than dissolving into it, buttons with a solid offset shadow you can
 * feel press down, and every candy coloured by its family — which is the single
 * biggest change here, because 74 identical grey pills is the thing that made
 * it look boring.
 */

:root {
  /* The night */
  --night:      #1b0f2b;
  --night-2:    #2a1742;
  --card-bg:    #35214f;
  --card-hi:    #3f2a5c;
  --card-edge:  #533a75;

  /* Ink */
  --paper:      #fff4e6;
  --dim:        rgba(255, 244, 230, 0.62);
  --dimmer:     rgba(255, 244, 230, 0.4);
  --on-bright:  #2a1342;   /* text that sits on a saturated fill */

  /* Candy */
  --pumpkin:    #ff8c1a;
  --pumpkin-d:  #c86206;
  --slime:      #a8ff4d;
  --slime-d:    #6cb81f;
  --grape:      #b46cff;
  --pink:       #ff5d8f;
  --red:        #ff6b5c;
  --red-d:      #c33c2d;

  /* One colour per candy family. Scanning 74 chips is a colour task, not a
     reading task — this is what turns the picker from a list into a shelf. */
  --fam-pb:        #ffa73d;
  --fam-chocolate: #cf9066;
  --fam-fruity:    #ff6ea0;
  --fam-sour:      #c9f24e;
  --fam-hard:      #b98cff;
  --fam-gum:       #63dcff;
  --fam-snack:     #e8c07a;
  --fam-sad:       #9a92ab;

  --display: "Chewy", "Comic Sans MS", "Segoe UI", system-ui, cursive;
  --ui-weight: 400;
  --ui: "Fredoka", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Family colour by class, so one declaration colours the chip, its points
   badge, its hover state and its row in the value table. */
.fam-pb        { --fam: var(--fam-pb); }
.fam-chocolate { --fam: var(--fam-chocolate); }
.fam-fruity    { --fam: var(--fam-fruity); }
.fam-sour      { --fam: var(--fam-sour); }
.fam-hard      { --fam: var(--fam-hard); }
.fam-gum       { --fam: var(--fam-gum); }
.fam-snack     { --fam: var(--fam-snack); }
.fam-sad       { --fam: var(--fam-sad); }

/* Devanagari has no Chewy. Baloo 2 is the matched display face, and it needs a
   real weight because its 400 is not a display weight the way Chewy's is. */
html[lang="hi"] {
  --display: "Baloo 2", "Nirmala UI", "Noto Sans Devanagari", system-ui, sans-serif;
  --ui-weight: 700;
}

html[lang="hi"] h1,
html[lang="hi"] .stamp-main,
html[lang="hi"] .primary-btn,
html[lang="hi"] .ruling-line,
html[lang="hi"] .basket-total strong,
html[lang="hi"] .score strong,
html[lang="hi"] .tastes-head,
html[lang="hi"] .table-section > h2,
html[lang="hi"] .deep-item > summary { font-weight: var(--ui-weight); }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- The night ----------
 *
 * Drawn, not downloaded. Pumpkin, bats, moon, cobwebs and a spider come to
 * about 3KB between them; one stock Halloween photograph is 200KB, loads late,
 * belongs to somebody else and cannot be recoloured with the palette.
 */

.night { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70vw 50vh at 50% -10%, rgba(255, 140, 26, 0.22), transparent 70%),
    radial-gradient(52vw 42vh at 88% 10%, rgba(180, 108, 255, 0.26), transparent 70%),
    radial-gradient(44vw 38vh at 6% 48%, rgba(168, 255, 77, 0.08), transparent 70%);
}

.moon {
  position: absolute;
  top: 4vh;
  right: 7vw;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffaf0, #f6e2ad 58%, #e2c173);
  box-shadow: 0 0 52px 12px rgba(255, 228, 160, 0.26);
}

.moon::before, .moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(186, 150, 88, 0.3);
}

.moon::before { width: 19px; height: 19px; top: 23px; left: 19px; }
.moon::after  { width: 12px; height: 12px; top: 50px; left: 46px; }

/* A bat is a black silhouette when the sky behind it is bright. This sky is
   nearly black, so a black bat is an invisible bat — the first pass used
   #241a34 and rendered as a smudge. Decoration on a dark theme has to be
   *lighter* than its background. */
.bat {
  position: absolute;
  width: 46px;
  color: #6b52a0;
  fill: currentColor;
  opacity: 0.9;
  will-change: transform;
}

.bat-1 { top: 13vh; animation: fly1 34s linear infinite; }
.bat-2 { top: 27vh; width: 30px; opacity: 0.6; animation: fly2 46s linear infinite 6s; }
.bat-3 { top: 6vh;  width: 22px; opacity: 0.45; animation: fly3 58s linear infinite 14s; }

@keyframes fly1 {
  0%   { transform: translateX(-12vw) translateY(0) scaleY(1); }
  25%  { transform: translateX(28vw) translateY(-4vh) scaleY(0.72); }
  50%  { transform: translateX(58vw) translateY(3vh) scaleY(1); }
  75%  { transform: translateX(86vw) translateY(-2vh) scaleY(0.78); }
  100% { transform: translateX(114vw) translateY(0) scaleY(1); }
}

@keyframes fly2 {
  0%   { transform: translateX(110vw) translateY(0) scaleY(1); }
  50%  { transform: translateX(45vw) translateY(6vh) scaleY(0.7); }
  100% { transform: translateX(-14vw) translateY(-2vh) scaleY(1); }
}

@keyframes fly3 {
  0%   { transform: translateX(-10vw) translateY(4vh) scaleY(0.8); }
  50%  { transform: translateX(52vw) translateY(-3vh) scaleY(1); }
  100% { transform: translateX(112vw) translateY(5vh) scaleY(0.8); }
}

.web {
  position: absolute;
  top: 0;
  width: clamp(110px, 18vw, 190px);
  height: clamp(110px, 18vw, 190px);
  color: rgba(214, 200, 240, 0.2);
}

.web-l { left: 0; }
.web-r { right: 0; transform: scaleX(-1); }

.spider {
  position: absolute;
  top: 0;
  left: 22%;
  width: 34px;
  text-align: center;
  animation: dangle 6s ease-in-out infinite;
  transform-origin: top center;
}

.spider .thread {
  display: block;
  width: 2px;
  height: 92px;
  margin: 0 auto;
  background: rgba(214, 200, 240, 0.28);
}

.spider svg { display: block; width: 34px; margin: -2px auto 0; }

@keyframes dangle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(14px) rotate(3deg); }
}

.wrap {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding: 52px 16px 72px;
}

/* ---------- Header ---------- */

header { text-align: center; margin-bottom: 26px; }

.pumpkin {
  width: clamp(112px, 26vw, 156px);
  margin: 0 auto 6px;
  filter: drop-shadow(0 0 30px rgba(255, 140, 26, 0.5));
}

.pumpkin svg { display: block; width: 100%; height: auto; }

.pumpkin .stem { fill: #5f8f3a; }
.pumpkin .lobe-back { fill: #cf5613; }
.pumpkin .lobe-mid { fill: #ec6d19; }
.pumpkin .lobe-front { fill: #ff8c33; }

/* The candle inside. Slow and shallow — it should read as lit, not compete
   with a child who is trying to choose a Kit Kat. */
.pumpkin .face {
  fill: #2a1206;
  filter: drop-shadow(0 0 7px rgba(255, 224, 130, 0.95));
  animation: flicker 3.4s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.86; }
  60%      { opacity: 1; }
  72%      { opacity: 0.9; }
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pumpkin);
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 10vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0 0 12px;
  /* A sticker edge. Two offsets rather than a stroke, because text-stroke
     thins the letterforms on Safari. */
  text-shadow: 0 4px 0 #3b1f5e, 0 7px 14px rgba(0, 0, 0, 0.45);
}

h1 em { font-style: normal; color: var(--pumpkin); }

.tagline {
  margin: 0 auto;
  max-width: 40ch;
  color: var(--dim);
  font-size: 1.02rem;
}

/* ---------- The table the swap happens on ---------- */

.panel {
  background: linear-gradient(180deg, var(--card-hi), var(--card-bg));
  border: 2px solid var(--card-edge);
  border-radius: 24px;
  padding: 18px;
  margin-bottom: 22px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}

.baskets {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: start;
}

.basket {
  min-width: 0;
  padding: 14px 13px 12px;
  border: 2px solid rgba(255, 244, 230, 0.12);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.26);
}

#basket-give { border-color: rgba(255, 140, 26, 0.42); }
#basket-get  { border-color: rgba(168, 255, 77, 0.38); }

.basket-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pumpkin);
}

#basket-get .basket-head { color: var(--slime); }

.basket-emoji {
  font-size: 1.7rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.basket-list { list-style: none; margin: 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 5px 8px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 244, 230, 0.13);
}

.row:last-child { border-bottom: none; }

.row-remove {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--dimmer);
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.row-remove:hover { color: var(--red); border-color: rgba(255, 107, 92, 0.5); }

.row-name {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.row-name.is-disliked {
  color: var(--dimmer);
  text-decoration: line-through;
  text-decoration-color: var(--red);
}

.row-val {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pumpkin);
}

#basket-get .row-val { color: var(--slime); }

.row-controls {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.row-size {
  padding: 3px 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 244, 230, 0.16);
  border-radius: 999px;
  cursor: pointer;
}

.row-size.size-full {
  color: var(--on-bright);
  background: #ffc46b;
  border-color: #ffc46b;
}

.row-size.size-king {
  color: var(--on-bright);
  background: var(--pumpkin);
  border-color: var(--pumpkin);
  box-shadow: 0 0 14px rgba(255, 140, 26, 0.5);
}

.qty { display: inline-flex; align-items: center; gap: 3px; }

.qty button {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.09);
  border: 2px solid rgba(255, 244, 230, 0.16);
  border-radius: 9px;
  cursor: pointer;
}

.qty button:hover { background: rgba(255, 255, 255, 0.18); }

.qty-count { min-width: 22px; text-align: center; font-weight: 700; }

.basket-empty { margin: 4px 0 0; font-size: 0.88rem; color: var(--dimmer); }

.basket-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 2px dashed rgba(255, 244, 230, 0.16);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.basket-total strong {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  color: var(--pumpkin);
}

#basket-get .basket-total strong { color: var(--slime); }

.swap-wrap { display: flex; align-items: center; height: 100%; padding-top: 42px; }

#swap-btn {
  width: 38px;
  height: 38px;
  font-size: 1.05rem;
  color: var(--paper);
  background: var(--card-edge);
  border: 2px solid rgba(255, 244, 230, 0.2);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 140ms;
}

#swap-btn:hover { color: var(--pumpkin); transform: rotate(180deg); }

/* ---------- Picking candy ---------- */

.picker { margin-top: 18px; }

.side-toggle { display: flex; gap: 8px; margin-bottom: 10px; }

.side-btn {
  flex: 1 1 0;
  padding: 11px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 244, 230, 0.14);
  border-radius: 14px;
  cursor: pointer;
}

.side-btn.is-on {
  color: var(--on-bright);
  background: var(--pumpkin);
  border-color: var(--pumpkin);
  box-shadow: 0 4px 0 var(--pumpkin-d);
}

#side-get.is-on {
  background: var(--slime);
  border-color: var(--slime);
  box-shadow: 0 4px 0 var(--slime-d);
}

.search {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 244, 230, 0.16);
  border-radius: 14px;
}

.search::placeholder { color: var(--dimmer); }

.search:focus {
  outline: none;
  border-color: var(--pumpkin);
  box-shadow: 0 0 0 4px rgba(255, 140, 26, 0.22);
}

.picker-grid {
  max-height: 330px;
  overflow-y: auto;
  margin-top: 12px;
  padding-right: 6px;
  scrollbar-color: var(--card-edge) transparent;
}

.picker-group h3 {
  display: flex;
  align-items: center;
  margin: 16px 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fam, var(--dimmer));
}

.picker-group:first-child h3 { margin-top: 0; }
.group-emoji { margin-right: 7px; font-size: 1.05rem; line-height: 1; }

.picker-row { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- Candy shapes ----------
 *
 * Product forms, never brand logos — the sprite in template.html carries the
 * reasoning. They are outline icons on purpose: a filled silhouette at 20px
 * turns into a blob, and an outline keeps the segment lines on a bar and the
 * flutes on a cup readable, which is the whole point of having them.
 *
 * currentColor means one declaration colours the icon with its family, so the
 * shape says what kind of object it is and the colour says what kind of candy.
 */
.pick-icon, .row-icon, .cell-icon {
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
}

/* Full family colour, not the dimmed text colour: the icon is the loudest
   thing in the chip and it is doing the identifying. */
.pick-icon { width: 23px; height: 23px; color: var(--fam, var(--dim)); }
.pick:hover .pick-icon { color: var(--paper); }

.row-icon {
  width: 19px;
  height: 19px;
  margin-right: 6px;
  vertical-align: -4px;
  color: var(--paper);
  opacity: 0.8;
}

.is-disliked .row-icon { opacity: 0.45; }

.cell-icon {
  width: 21px;
  height: 21px;
  margin-right: 8px;
  vertical-align: -4px;
  color: var(--fam, var(--pumpkin));
}

/* The chips. Coloured by family, because 74 identical grey pills is what made
   the first version look like a settings screen. */
.pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px 7px 10px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.07);
  background: color-mix(in srgb, var(--fam) 15%, transparent);
  border: 2px solid rgba(255, 244, 230, 0.18);
  border-color: color-mix(in srgb, var(--fam) 52%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 110ms, background 110ms;
}

.pick:hover {
  background: color-mix(in srgb, var(--fam) 32%, transparent);
  transform: translateY(-2px);
}

.pick:active { transform: translateY(0); }

.pick-val {
  padding: 1px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--on-bright);
  background: var(--fam, var(--dimmer));
  border-radius: 999px;
}

.picker-none { margin: 12px 0 0; font-size: 0.92rem; color: var(--dimmer); }

/* ---------- Do you actually like it ----------
 *
 * The honest part. Every serious write-up of candy trading says the same
 * thing — value is personal, a Kit Kat is worth five candy corns only to
 * someone who hates candy corn — so a calculator that ignores that is
 * answering a question nobody asked.
 */

.tastes {
  margin-top: 16px;
  padding: 14px 16px;
  border: 2px dashed rgba(168, 255, 77, 0.4);
  border-radius: 16px;
  background: rgba(168, 255, 77, 0.07);
}

.tastes-head {
  margin: 0 0 2px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--slime);
}

.tastes-note { margin: 0 0 10px; font-size: 0.86rem; color: var(--dim); }

.tastes-list { display: flex; flex-wrap: wrap; gap: 8px 16px; }

.taste {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--dim);
  cursor: pointer;
}

.taste input { width: 17px; height: 17px; accent-color: var(--red); }

/* ---------- The big button ---------- */

.primary-btn {
  width: 100%;
  margin-top: 18px;
  padding: 16px 20px 18px;
  font-family: var(--display);
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--on-bright);
  background: linear-gradient(180deg, #ffa543, var(--pumpkin));
  border: none;
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--pumpkin-d), 0 12px 26px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 90ms, box-shadow 90ms;
}

.primary-btn:hover { filter: brightness(1.05); }

/* It should feel like pressing a button, not clicking a div. */
.primary-btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--pumpkin-d), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.error {
  margin: 14px 0 0;
  padding: 12px 15px;
  border: 2px solid rgba(255, 107, 92, 0.5);
  border-radius: 14px;
  background: rgba(255, 107, 92, 0.14);
  font-size: 0.94rem;
}

/* ---------- The answer ---------- */

.ruling {
  position: relative;
  margin: 22px 0;
  padding: 30px 22px 20px;
  border: 2px solid var(--card-edge);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-hi), var(--card-bg));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* A candy-wrapper stripe across the top, so the answer card is recognisably a
   different kind of object from the panel above it. */
.wrapper-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: repeating-linear-gradient(
    115deg,
    var(--pumpkin) 0 14px,
    #ffc46b 14px 28px,
    var(--grape) 28px 42px,
    var(--pink) 42px 56px
  );
}

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.confetti span {
  position: absolute;
  top: -28px;
  font-size: 1.15rem;
  animation: drop 1.9s ease-in forwards;
}

@keyframes drop {
  to { transform: translateY(320px) rotate(300deg); opacity: 0; }
}

.ruling-head { margin-bottom: 12px; }

.ruling-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* A sticker, not a rubber stamp. The first pass borrowed the other site's
   bureaucratic FINAL–DO-NOT-EXTEND stamp, which is a joke for adults; the
   answer a child is looking for should look like something they would want
   stuck on the back of their hand. */
.stamp {
  position: absolute;
  top: 24px;
  right: 18px;
  padding: 10px 20px 12px;
  text-align: center;
  color: var(--on-bright);
  background: currentColor;
  border: 4px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  transform: rotate(-7deg);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.45);
  animation: pop 340ms cubic-bezier(.2, 1.6, .4, 1) both;
}

@keyframes pop {
  from { opacity: 0; transform: rotate(-7deg) scale(0.5); }
  to   { opacity: 1; transform: rotate(-7deg) scale(1); }
}

.stamp-main {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--on-bright);
}

.stamp-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-bright);
  opacity: 0.7;
}

.stamp-fair { color: var(--slime); }
.stamp-close { color: var(--pumpkin); }
/* The "nope" sticker is the one a child sees most, so it is a warm coral
   rather than an alarm red — it is asking for one more candy, not telling
   them off. */
.stamp-unfair { color: var(--red); }

.ruling-line {
  margin: 0 0 18px;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  line-height: 1.16;
}

.scoreline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 2px dashed rgba(255, 244, 230, 0.16);
  border-bottom: 2px dashed rgba(255, 244, 230, 0.16);
}

.score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.score-label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.score strong { font-family: var(--display); font-size: 1.5rem; font-weight: 400; }
#score-give { color: var(--pumpkin); }
#score-get { color: var(--slime); }
.score-vs { color: var(--dimmer); font-weight: 700; }

/* The line the whole site exists for. */
.counter {
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 2px solid rgba(168, 255, 77, 0.45);
  border-radius: 16px;
  background: rgba(168, 255, 77, 0.1);
  font-size: 1.05rem;
  font-weight: 500;
}

.counter::before { content: "👉"; flex: 0 0 auto; }

.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

.actions button {
  padding: 11px 18px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.09);
  border: 2px solid rgba(255, 244, 230, 0.18);
  border-radius: 14px;
  cursor: pointer;
}

.actions button:hover { border-color: var(--pumpkin); color: var(--pumpkin); }

.feedback {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slime);
}

.ruling-ref {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* ---------- The value table ---------- */

.table-section { margin: 36px 0 10px; }

.table-section > h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  text-shadow: 0 3px 0 #3b1f5e;
}

.table-intro, .table-foot { margin: 0 0 18px; font-size: 0.96rem; color: var(--dim); }
.table-foot { margin: 18px 0 0; font-size: 0.9rem; color: var(--dimmer); }

.table-group {
  display: flex;
  align-items: center;
  margin: 26px 0 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fam, var(--pumpkin));
}

.value-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.value-table th, .value-table td {
  padding: 9px 12px 9px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 244, 230, 0.09);
}

.value-table thead th {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dimmer);
  border-bottom: 2px solid color-mix(in srgb, var(--fam, var(--pumpkin)) 40%, transparent);
}

.value-table .col-name { width: 30%; font-weight: 600; }

.value-table .col-value {
  width: 12%;
  font-weight: 700;
  color: var(--fam, var(--pumpkin));
}

.value-table .col-note { color: var(--dim); }

/* ---------- The deeper reading, folded away ---------- */

.deep { margin: 36px 0 22px; }
.deep-intro { margin: 0 0 14px; font-size: 0.96rem; color: var(--dimmer); }

.deep-item { border-bottom: 1px solid rgba(255, 244, 230, 0.12); }
.deep-item:first-of-type { border-top: 1px solid rgba(255, 244, 230, 0.12); }

.deep-item > summary {
  position: relative;
  list-style: none;
  padding: 16px 36px 16px 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.24rem;
  line-height: 1.3;
  color: rgba(255, 244, 230, 0.9);
  transition: color 140ms;
}

/* The label is an <h2> so the page keeps a real outline for crawlers; it must
   look exactly like the plain text it replaced. */
.deep-item > summary > h2 {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  display: inline;
}

.deep-item > summary::-webkit-details-marker { display: none; }
.deep-item > summary:hover { color: var(--pumpkin); }

.deep-item > summary::after,
.deep-item > summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
  transition: transform 200ms ease;
}

.deep-item > summary::before { transform: translateY(-50%); }
.deep-item > summary::after { transform: translateY(-50%) rotate(90deg); }
.deep-item[open] > summary::after { transform: translateY(-50%) rotate(0deg); }
.deep-item[open] > summary { color: var(--pumpkin); }

.deep-body { padding: 0 0 18px; color: rgba(255, 244, 230, 0.74); }
.deep-body p { margin: 0 0 14px; font-size: 1rem; }
.deep-body p:last-child { margin-bottom: 0; }
.deep-body strong { color: var(--paper); font-weight: 600; }
.deep-body em { font-style: italic; }
.deep-body ul { margin: 0 0 14px; padding-left: 22px; }
.deep-body li { margin-bottom: 9px; }

.deep-body code {
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 0.86em;
  background: rgba(255, 244, 230, 0.09);
  border-radius: 6px;
}

/* The legal line. Present, findable, selectable, and not the first thing
   anyone's eye lands on. Small enough to recede, not so small it reads as
   something being hidden — and it keeps a real contrast ratio on hover and
   selection rather than being 6px grey-on-grey. */
.fine-print {
  margin: 26px 0 0;
  max-width: 70ch;
  font-size: 0.66rem;
  line-height: 1.55;
  color: rgba(255, 244, 230, 0.26);
  transition: color 200ms;
}

.fine-print:hover { color: rgba(255, 244, 230, 0.5); }

/* ---------- Money blocks ---------- */

.ad-slot { margin: 26px 0; min-height: 0; text-align: center; }

.ad-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.aff-box {
  margin: 26px 0;
  padding: 20px 22px;
  border: 2px solid rgba(255, 140, 26, 0.32);
  border-radius: 18px;
  background: rgba(255, 140, 26, 0.06);
}

.aff-box h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 6px;
}

.aff-intro { margin: 0 0 14px; font-size: 0.96rem; color: var(--dim); }
.aff-list { list-style: none; margin: 0; padding: 0; }
.aff-list li { padding: 9px 0; border-top: 1px solid rgba(255, 244, 230, 0.1); }
.aff-list li:first-child { border-top: none; }
.aff-list a { color: var(--pumpkin); font-weight: 600; text-decoration: none; }
.aff-list a:hover { text-decoration: underline; }
.aff-note { display: block; margin-top: 2px; font-size: 0.88rem; color: var(--dimmer); }

.aff-disclosure {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 244, 230, 0.1);
  font-size: 0.78rem;
  color: var(--dimmer);
}

.tip-link {
  display: inline-block;
  margin-bottom: 16px;
  padding: 10px 20px;
  border: 2px solid rgba(255, 140, 26, 0.5);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pumpkin);
  text-decoration: none;
}

.tip-link:hover { background: rgba(255, 140, 26, 0.14); }

/* ---------- Footer ---------- */

.foot-nav { display: flex; gap: 18px; justify-content: center; margin-bottom: 12px; }

.foot-nav a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}

.foot-nav a:hover { color: var(--pumpkin); }

footer {
  margin-top: 30px;
  text-align: center;
  font-size: 0.74rem;
  color: var(--dimmer);
}

.lang-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: center;
  margin: 0 0 14px;
  font-size: 0.82rem;
}

.lang-switcher a { color: var(--dimmer); text-decoration: none; }
.lang-switcher a:hover { color: var(--pumpkin); }
.lang-current { color: var(--pumpkin); font-weight: 600; }

.hidden { display: none; }

/* Bats crossing the sky, a dangling spider, a flickering candle and falling
   confetti are exactly what this setting exists to turn off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bat, .confetti { display: none; }
}

/* Two baskets side by side stop working somewhere around here. */
@media (max-width: 470px) {
  .wrap { padding-top: 40px; }
  .baskets { grid-template-columns: 1fr; }
  .swap-wrap { justify-content: center; padding: 0; }
  #swap-btn { transform: rotate(90deg); }
  #swap-btn:hover { transform: rotate(270deg); }
  .ruling { padding-top: 26px; }
  .stamp { position: static; display: inline-block; transform: rotate(-2deg); margin-bottom: 14px; }
  .value-table .col-name { width: 42%; }
  .value-table .col-note { display: none; }
  .side-btn { padding: 11px 6px; font-size: 0.68rem; letter-spacing: 0.02em; }
  /* 39px is under the 44px touch target, and the people tapping these are
     eight and holding the phone in one hand in the dark. */
  .pick { padding: 10px 10px 10px 12px; }
  /* At phone width the moon lands on top of the headline, and three bats in a
     narrow column is a swarm. */
  .moon { width: 54px; height: 54px; top: 1.5vh; right: 4vw; opacity: 0.72; }
  .moon::before { width: 12px; height: 12px; top: 14px; left: 12px; }
  .moon::after { width: 7px; height: 7px; top: 31px; left: 28px; }
  .bat-1 { width: 30px; }
  .bat-2, .bat-3 { display: none; }
  .spider { display: none; }
  .web { width: 96px; height: 96px; }
}

/* ---------- Right-to-left ----------
 *
 * Only the rules with a hard-coded side need flipping. The sticker is pinned
 * to a corner, the counter-offer has a border and an emoji on one side, the
 * cobwebs are mirrored, and the value table is left-aligned.
 */

[dir="rtl"] .value-table th,
[dir="rtl"] .value-table td,
[dir="rtl"] .deep-item > summary,
[dir="rtl"] .deep-body { text-align: right; }

[dir="rtl"] .value-table th,
[dir="rtl"] .value-table td { padding: 9px 0 9px 12px; }

[dir="rtl"] .stamp { right: auto; left: 18px; transform: rotate(7deg); }
[dir="rtl"] .stamp { animation-name: popRtl; }

@keyframes popRtl {
  from { opacity: 0; transform: rotate(7deg) scale(0.5); }
  to   { opacity: 1; transform: rotate(7deg) scale(1); }
}

[dir="rtl"] .counter::before { content: "👈"; }
[dir="rtl"] .web-l { transform: scaleX(-1); }
[dir="rtl"] .web-r { transform: none; }

[dir="rtl"] .deep-item > summary { padding: 16px 0 16px 36px; }
[dir="rtl"] .deep-item > summary::after,
[dir="rtl"] .deep-item > summary::before { right: auto; left: 6px; }

[dir="rtl"] .deep-body ul { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .group-emoji { margin-right: 0; margin-left: 7px; }

/* The swap reference is an ASCII code; it stays left-to-right inside an
   otherwise right-to-left page. */
[dir="rtl"] .ruling-ref { direction: ltr; text-align: left; }