/**
 * Exploding Hamsters.
 *
 * Play sits on the shared stage (.pd-play-area): a fixed 430px column the
 * platform scales to the screen. Sizes here are plain px.
 *
 * Each of the three hamsters is one frame of hamsters.webp (a pre-cut 8×4
 * grid), drawn onto its own 200px canvas. --cell is the on-stage size of the
 * 181px square the hamster stands in, at the bottom centre of its frame.
 */

.game-hamsters {
  --ink: #161613;
  --muted: #6e6e68;
  --card: #f3f2ed;
  --card-hover: #e8e5dc;
  --good-bg: #e5f6ea;
  --good-ink: #146c3a;
  --bad-bg: #fde8e6;
  --bad-ink: #a33b34;
  --mark: #1a1a1a;
  --glow: rgba(255, 214, 140, 0.9);
  --field: #ffffff;
  --line: #dcd8cd;
  --font-ui: var(--pd-font-ui, "Source Sans 3", system-ui, sans-serif);
  --font-display: var(--pd-font-heading, "Baloo 2", system-ui, sans-serif);
  --cell: 110px;
  color: var(--ink);
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

html[data-theme="dark"] .game-hamsters {
  --ink: #dddace;
  --muted: #8e8e86;
  --card: #22221e;
  --card-hover: #2c2c27;
  --good-bg: #1a3326;
  --good-ink: #8ed4ae;
  --bad-bg: #3a2220;
  --bad-ink: #f0a09c;
  --mark: var(--pd-colour-heading, #f5f4ed);
  --glow: rgba(90, 62, 28, 0.55);
  --field: #1b1b18;
  --line: #3a3a34;
}

.game-hamsters * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.game-hamsters [hidden] {
  display: none !important;
}

.game-hamsters button,
.game-hamsters input {
  font-family: inherit;
}

body.pd-game:not(.pd-done):not(:has(.is-done)) .game-hamsters :is(.eh-content, .eh-shell) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: visible;
}

.game-hamsters.is-done .eh-content,
.game-hamsters.is-done .eh-shell,
.game-hamsters.is-done .pd-play-area {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* --- Top bar ------------------------------------------------------------ */

.game-hamsters .eh-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
  flex: 0 0 auto;
}

.game-hamsters .eh-score {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 40px;
  margin: 16px auto 0;
  padding: 4px 18px 4px 16px;
  border-radius: 999px;
  background: var(--card);
  white-space: nowrap;
  transition: background 0.3s ease;
}

.game-hamsters .eh-score[hidden] {
  display: none;
}

.game-hamsters .eh-score.is-up {
  background: var(--good-bg);
}

.game-hamsters .eh-score-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.game-hamsters .eh-score b {
  display: inline-block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.game-hamsters .eh-score b.is-bump {
  color: var(--good-ink);
  animation: eh-bump 0.26s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.game-hamsters .eh-result .eh-score {
  margin: -4px auto 0;
  animation: eh-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@keyframes eh-bump {
  from { transform: scale(1.45); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .game-hamsters .eh-score b.is-bump,
  .game-hamsters .eh-result .eh-score {
    animation: none;
  }
}

.game-hamsters .eh-topbar-end {
  display: flex;
  align-items: center;
}

.game-hamsters .help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--mark);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.game-hamsters .help-btn svg {
  width: 30px;
  height: 30px;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .game-hamsters .help-btn:hover {
    opacity: 0.7;
  }
}

.game-hamsters .eh-sound-btn[aria-pressed="true"] .eh-sound-off,
.game-hamsters .eh-sound-btn[aria-pressed="false"] .eh-sound-on {
  display: none;
}

.game-hamsters .eh-sound-off {
  opacity: 0.6;
}

/* --- Play --------------------------------------------------------------- */

/* The hamsters, the question and the answer are all --gap apart. --feet is
   the empty canvas below a standing hamster, taken back so the gaps match
   what you see. */
.game-hamsters .eh-play {
  --gap: 20px;
  --feet: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  padding: 14px 16px 10px;
  overflow: visible;
}

/* Three hamsters in a row, taking turns left to right. The panicked
   drawings fill their frame edge to edge, so the slots need a real gap. */
.game-hamsters .eh-row {
  display: grid;
  grid-template-columns: repeat(3, var(--cell));
  justify-content: center;
  align-items: end;
  gap: 8px;
  width: 100%;
  margin: 0 0 calc(var(--feet) * -1);
  overflow: visible;
}

.game-hamsters .eh-slot {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  min-height: var(--cell);
  overflow: visible;
}

/* The glow is a fixed gradient behind the slot, not a filter on the
   canvas: a drop-shadow would re-blur on every trembling and exploding
   frame, which weak phones can't keep up with. */
.game-hamsters .eh-slot::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6%;
  right: -6%;
  top: 18%;
  bottom: -12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow) 55%, transparent);
  transform-origin: 50% 100%;
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}

.game-hamsters .eh-slot.is-gone::before {
  transform: scale(0.9, 0.42);
  opacity: 0.7;
}

/* Its own layer, so the tremble is moved by the GPU without repainting. */
.game-hamsters .eh-slot.is-active {
  will-change: translate, rotate;
}

/* A 200px frame keeps its hamster at the scale of the 181px --cell. The
   frame's extra room above and either side spills out of the slot, so the
   slot and the hamster's feet stay put. */
.game-hamsters .eh-ham {
  display: block;
  flex: none;
  width: calc(var(--cell) * 200 / 181);
  height: calc(var(--cell) * 200 / 181);
  margin-top: calc(var(--cell) * -19 / 181);
}

.game-hamsters .eh-ham.is-boom {
  animation: eh-shake 0.1s linear infinite;
}

.game-hamsters .eh-ham.is-pop {
  animation: eh-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.game-hamsters .eh-slot:nth-child(2) .eh-ham.is-pop { animation-delay: 0.05s; }
.game-hamsters .eh-slot:nth-child(3) .eh-ham.is-pop { animation-delay: 0.1s; }
@keyframes eh-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  75% { transform: translate(2px, -1px); }
}

@keyframes eh-pop {
  from { transform: scale(0.84); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .game-hamsters .eh-ham.is-boom,
  .game-hamsters .eh-ham.is-pop {
    animation: none;
  }
}

.game-hamsters .eh-round {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Sits just above the question rather than a full --gap away. */
.game-hamsters .eh-progress {
  margin: 0 0 calc(var(--gap) * -1);
  color: var(--muted);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.game-hamsters .eh-question {
  margin: 6px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.game-hamsters .eh-question.eh-error {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
}

/* --- Start screen ------------------------------------------------------- */

.game-hamsters .eh-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  margin: 0;
  text-align: center;
  animation: eh-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.game-hamsters .eh-intro-title {
  max-width: 360px;
  margin: 0;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.game-hamsters .eh-intro-sub {
  max-width: 300px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.game-hamsters .eh-intro-head,
.game-hamsters .eh-intro-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.game-hamsters .eh-intro-head {
  gap: 10px;
}

.game-hamsters .eh-pill {
  margin: 0;
  padding: 3px 10px;
  border: 1.5px solid var(--good-ink);
  border-radius: 999px;
  background: var(--good-bg);
  color: var(--good-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.game-hamsters .eh-intro-actions {
  gap: 12px;
}

.game-hamsters .eh-cta {
  min-width: 220px;
}

.game-hamsters .eh-intro-actions .eh-cta {
  width: 100%;
  max-width: 340px;
}

.game-hamsters .eh-intro-links {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
}

.game-hamsters .eh-intro-links.is-special {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

.game-hamsters .eh-intro-links:has(#ehUnlimitedBtn:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.game-hamsters .eh-intro-links:has(#ehUnlimitedBtn:not([hidden])) #ehSpecialsBtn {
  grid-column: 1 / -1;
}

.game-hamsters .eh-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease;
}

.game-hamsters .eh-link-btn span {
  white-space: nowrap;
}

.game-hamsters .eh-link-btn svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

.game-hamsters .eh-link-btn[hidden] {
  display: none;
}

.game-hamsters .eh-link-btn:active {
  transform: scale(0.98);
}

.game-hamsters .eh-end-links {
  margin: 12px auto 0;
}

.game-hamsters .eh-complete-links {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 10px;
  width: 100%;
  max-width: 340px;
}

.game-hamsters .eh-complete-links.is-special {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

.game-hamsters .eh-complete-links .pd-c-next-btn {
  min-width: 0;
  width: 100%;
  padding-inline: 10px;
}

.game-hamsters .eh-complete-links .pd-c-next-btn span {
  white-space: nowrap;
}

.game-hamsters .pd-c-share-btn[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .game-hamsters .eh-link-btn:hover {
    background: var(--card-hover);
  }
}

/* --- Special editions modal ---------------------------------------------
   The modal sits outside .game-hamsters, so these use the site colours. */

.eh-specials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eh-special {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: #f3f2ed;
  color: var(--pd-colour-text, #1a1a1a);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.eh-special[aria-current="true"] {
  box-shadow: inset 0 0 0 2px var(--pd-colour-accent, #2e9e5b);
}

.eh-special-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--pd-colour-surface, #fff);
  font-size: 26px;
  line-height: 1;
}

.eh-special-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.eh-special-name {
  font-family: var(--pd-font-heading, system-ui, sans-serif);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
}

.eh-special-blurb {
  color: var(--pd-colour-muted, #6b6b66);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.eh-special-status {
  margin-top: 2px;
  color: var(--pd-colour-accent, #2e9e5b);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.eh-special-status[data-tone="progress"] {
  color: #c77700;
}

.eh-special-status[data-tone="new"] {
  color: var(--pd-colour-muted, #6b6b66);
  font-weight: 700;
}

html[data-theme="dark"] .eh-special-status[data-tone="progress"] {
  color: #f5a524;
}

html[data-theme="dark"] .eh-special {
  background: #22221e;
}

html[data-theme="dark"] .eh-special-icon {
  background: #2c2c27;
}

@media (hover: hover) and (pointer: fine) {
  .eh-special:hover {
    background: #e8e5dc;
  }

  html[data-theme="dark"] .eh-special:hover {
    background: #2c2c27;
  }
}

/* --- Answer box --------------------------------------------------------- */

/* The answer box and the result take turns in this slot. The height is the
   result's, so swapping them never changes the stage height. On a desktop
   the stage is centred, and a taller stage would slide the hamsters up. */
.game-hamsters .eh-dock {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 140px;
}

/* Unlimited's score sits under the input and inside the result. */
.game-hamsters .eh-dock.is-scored {
  height: 184px;
}

.game-hamsters .eh-form {
  width: 100%;
  margin: 0;
}

.game-hamsters .eh-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.game-hamsters .eh-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--field);
  overflow: hidden;
  transition: border-color 0.15s;
}

.game-hamsters .eh-field:focus-within {
  border-color: var(--ink);
}

.game-hamsters .eh-field.is-shake {
  animation: eh-nudge 0.32s ease;
}

.game-hamsters .eh-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 8px 0 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  caret-color: var(--ink);
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-overflow: ellipsis;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
}

.game-hamsters .eh-input::placeholder {
  color: var(--muted);
  opacity: 0.75;
  font-weight: 600;
}

.game-hamsters .eh-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0 6px 0 4px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--field);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.12s, opacity 0.15s;
}

.game-hamsters .eh-input:placeholder-shown + .eh-go {
  opacity: 0.25;
}

.game-hamsters .eh-go svg {
  width: 22px;
  height: 22px;
}

.game-hamsters .eh-go:active {
  transform: scale(0.92);
}

.game-hamsters .eh-go:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* A miss shows inside the emptied box rather than under it. */
.game-hamsters .eh-note {
  position: absolute;
  inset: 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--field);
  color: var(--bad-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.game-hamsters .eh-note:empty {
  display: none;
}

.game-hamsters .eh-note.is-in {
  animation: eh-rise 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Result ------------------------------------------------------------- */

/* The answer, the rescued line and the Next button arrive together. */
.game-hamsters .eh-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.game-hamsters .eh-answer,
.game-hamsters .eh-verdict {
  margin: 0;
  text-align: center;
}

.game-hamsters .eh-answer {
  color: var(--good-ink);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  animation: eh-stamp 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

.game-hamsters .eh-answer:empty {
  display: none;
}

/* The answer's tall line box leaves more air under it than the verdict's
   does, so the verdict sits 4px higher to look evenly spaced. The margins
   cancel out, keeping the result's height. */
.game-hamsters .eh-verdict {
  margin: -4px 0 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  animation: eh-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.game-hamsters .eh-result.is-saved .eh-verdict {
  color: var(--good-ink);
}

.game-hamsters .eh-result.is-lost .eh-verdict {
  color: var(--bad-ink);
}

.game-hamsters .eh-result-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  animation: eh-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.game-hamsters button.eh-next {
  min-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
}

.game-hamsters .eh-answers-btn {
  min-height: 52px;
  padding: 0 22px;
  font-size: 17px;
}

@keyframes eh-nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

@keyframes eh-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes eh-stamp {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .game-hamsters .eh-field.is-shake,
  .game-hamsters .eh-note.is-in,
  .game-hamsters .eh-intro,
  .game-hamsters .eh-result .eh-answer,
  .game-hamsters .eh-result .eh-verdict,
  .game-hamsters .eh-result-actions {
    animation: none;
  }
}

.game-hamsters .eh-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Results ------------------------------------------------------------ */

.game-hamsters #ehComplete.pd-complete-panel {
  margin-top: 20px;
  opacity: 1;
  transform: none;
  transition: none;
}

.game-hamsters #ehComplete.pd-complete-panel:not(.is-shown) {
  visibility: hidden;
  pointer-events: none;
}

.game-hamsters #ehComplete.pd-complete-panel.is-shown {
  visibility: visible;
  pointer-events: auto;
}

.game-hamsters .eh-c-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.game-hamsters .eh-c-stage.is-in {
  opacity: 1;
  transform: none;
}

.game-hamsters #ehComplete.pd-complete-panel.is-instant .eh-c-stage {
  transition: none;
}

/* Questions played, under the thanks footer. Rows use the shared .pd-c-word-list styles. */

.game-hamsters .eh-q-text {
  margin: 0 0 4px;
  font-family: var(--pd-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #616162;
}

html[data-theme="dark"] .game-hamsters .eh-q-text {
  color: var(--muted);
}

.game-hamsters .eh-q-list .def-item.missed .def-word {
  font-style: italic;
}

.game-hamsters .eh-q-saved.is-good {
  color: var(--pd-colour-accent, #2e9e5b);
}

.game-hamsters .eh-q-saved.is-mid {
  color: #c9852a;
}

.game-hamsters .eh-q-saved.is-bad {
  color: var(--pd-colour-danger, #f22f2c);
}

.game-hamsters .eh-q-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 0 -4px;
  padding: 4px;
  border: 0;
  background: none;
  color: #8a8a8b;
  font-family: var(--pd-font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.game-hamsters .eh-q-toggle svg {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.game-hamsters .eh-q-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .game-hamsters .eh-q-toggle:hover {
    color: var(--ink);
  }
}

.game-hamsters .eh-q-panel[hidden] {
  display: none;
}

.game-hamsters .eh-q-all {
  max-height: 220px;
  margin: 4px 0 2px;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 2px solid color-mix(in srgb, var(--pd-colour-heading, #161613) 12%, transparent);
}

.game-hamsters .eh-q-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px;
  color: var(--ink);
  font-family: var(--pd-font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.game-hamsters .eh-q-row.is-yours {
  color: var(--pd-colour-accent, #2e9e5b);
  font-weight: 800;
}

.game-hamsters .eh-q-tag {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .game-hamsters .eh-q-toggle svg {
    transition: none;
  }
}

/* Answers list. The modal is mounted on the page, outside .game-hamsters.
   The question is the modal title; the list underneath is A to Z. */

.eh-answers-modal .pd-modal-scroll {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.eh-answers-modal .pd-modal-title {
  flex: none;
  margin: 2px 0 16px;
  font-size: 22px;
  line-height: 1.25;
  text-wrap: balance;
}

.eh-answers-modal .pd-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.eh-answers {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  text-align: left;
}

.eh-answers-scroll {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: min(52vh, 460px);
  margin: 0 -10px;
  padding: 4px 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--pd-colour-heading, #161613) 12%, transparent);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.eh-answers-spacer {
  position: relative;
  width: 100%;
}

.eh-answers-window {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.eh-answers-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 4px;
  padding: 0 10px;
  box-sizing: border-box;
  border-bottom: 1px solid color-mix(in srgb, var(--pd-colour-heading, #161613) 8%, transparent);
}

.eh-answers-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pd-colour-heading, #161613);
}

.eh-answers-yours {
  display: none;
  flex: none;
  color: var(--pd-colour-accent, #2e9e5b);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eh-answers-row.is-yours {
  border-bottom-color: transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pd-colour-accent, #2e9e5b) 14%, transparent);
}

.eh-answers-row.is-yours .eh-answers-yours {
  display: inline;
}

@media (max-width: 768px) {
  .eh-answers-modal .pd-modal-scroll::before,
  .eh-answers-modal .pd-modal-scroll::after {
    display: none;
  }

  .eh-answers-scroll {
    max-height: none;
  }
}