/* ============================================================= island.css ==

   The island skin: a map for a menu, chunky 3D controls, round type and a
   parrot. Loaded after themes.css, so it overrides tokens and components
   without editing the sheets underneath — deleting the <link> to this file
   restores the previous look exactly.

   The art lives in img/art/ as SVG. Every image is referenced from here or
   from index.html by path, so replacing a drawing is replacing a file.

   The one recipe used everywhere: a "3D" control is a gradient face, a hard
   shadow of the same hue below it for thickness, and a thin light line on its
   top edge. Pressing it moves the face down by the thickness and removes it.
============================================================================ */

/* ------------------------------------------------------------- tokens -- */

:root {
  --font-display: 'Fredoka', 'Assistant', 'Segoe UI', Arial, sans-serif;
  --font-ui: 'Nunito', 'Assistant', 'Segoe UI', Arial, sans-serif;
  --font-he: 'Fredoka', 'Assistant', 'Segoe UI', Arial, sans-serif;

  --r-card: 30px;
  --r-panel: 22px;
  --r-control: 16px;

  /* The outline every illustrated title wears. */
  --outline: #2b2672;

  --card-w: min(74vw, 320px);
}

:root,
:root[data-theme="main"] {
  --bg-void: #1f1a55;
  --bg-deep: #2a2470;
  --bg-lift: #332c85;
  --bg-glow: #3a3296;
  --felt: #2d2775;
  --felt-lift: #3a338f;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .22);
  --text-2: #c9c6f0;
  --text-3: #9d99d6;

  --surface: #ffffff;
  --surface-edge: #ebe9ff;
  --ink: #1f1d4a;
  --ink-soft: #3d3a78;
  --ink-faint: #6b67a8;

  --yes: #2fd3b7;
  --yes-deep: #0e8a79;
  --no: #ff5d8f;
  --no-deep: #d42a63;
  --no-ink: #ff8fb0;

  --primary-ink: #ffffff;
  --primary-a: #ff8a6b;
  --primary-b: #ec4a3f;
  --primary-glow: rgba(236, 74, 63, .45);
}

/* The lights in the room are stars now, not drifting blobs. */
.ambient__blob { display: none; }

body {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 64% 44%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 26% 62%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 40% 88%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(2px 2px at 8% 80%, rgba(255, 190, 120, .55), transparent),
    radial-gradient(2px 2px at 92% 34%, rgba(255, 190, 120, .5), transparent),
    radial-gradient(140% 90% at 50% -18%, var(--bg-glow) 0%, transparent 58%),
    linear-gradient(178deg, var(--bg-deep) 0%, var(--bg-void) 100%);
  background-size: 260px 320px, 260px 320px, 260px 320px, 260px 320px, 260px 320px, 260px 320px, 260px 320px, 260px 320px, auto, auto;
}

/* ------------------------------------------------------------ buttons -- */

.btn--primary,
.btn--ghost,
.btn--review,
.btn--continue,
.btn--speak {
  position: relative;
  border: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .09s ease-out, box-shadow .09s ease-out, filter .15s ease;
}

.btn--primary,
.btn--continue {
  padding: 15px 30px;
  border-radius: 20px;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(120, 20, 20, .35);
  background: linear-gradient(180deg, #ff8f6f 0%, #ef5043 55%, #dc3b33 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    0 6px 0 #a3282a,
    0 12px 20px -6px rgba(0, 0, 0, .45);
}

.btn--ghost {
  padding: 14px 24px;
  border-radius: 20px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(180deg, #5a53c4 0%, #433caa 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .25),
    0 6px 0 #25206a,
    0 12px 20px -6px rgba(0, 0, 0, .45);
}

.btn--ghost.btn--danger { color: #ffc2d1; }

.btn--review {
  border-radius: 20px;
  color: #06332d;
  background: linear-gradient(180deg, #5eead4 0%, #22c1a6 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    0 6px 0 #0d7e6d,
    0 12px 20px -6px rgba(0, 0, 0, .45);
}

.btn--primary:active,
.btn--ghost:active,
.btn--review:active,
.btn--continue:active {
  transform: translateY(5px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 1px 0 rgba(0, 0, 0, .35);
}

@media (hover: hover) {
  .btn--primary:hover, .btn--ghost:hover, .btn--review:hover, .btn--continue:hover { filter: brightness(1.06); }
  .btn--ghost:hover { background: linear-gradient(180deg, #635cd0 0%, #4a43b5 100%); }
}

/* A round glass button: back, sound, settings. */
.iconBtn,
.roundBtn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 10px -4px rgba(0, 0, 0, .5);
}

.iconBtn svg { width: 20px; height: 20px; stroke-width: 2.4; }
.iconBtn--quiet { color: var(--text-2); }

.roundBtn {
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s var(--ease-snap);
}

.roundBtn:active { transform: scale(.92); }

.roundBtn svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ================================================================= MENU == */

.screen--menu {
  gap: 10px;
  padding-bottom: 0;
  background: linear-gradient(180deg, #62d6d3 0%, #45bcd8 30%, #2f9fd2 70%, #2a8cc6 100%);
}

.menuBar { position: relative; z-index: 2; }

.menuBar .roundBtn {
  background: rgba(20, 60, 110, .28);
  border-color: rgba(255, 255, 255, .45);
}

/* ---------- The trophy pill ---------- */

.coinPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px 5px 6px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(22, 40, 96, .45);
  color: #fff;
  cursor: pointer;
  font: 600 20px/1 var(--font-display);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 10px -4px rgba(0, 0, 0, .4);
  touch-action: manipulation;
}

.coinPill:active { transform: scale(.96); }

.coinPill__coin {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe27a, #ffb21e 60%, #e98a00);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 2px 0 #b86a00;
}

.coinPill__coin svg {
  width: 17px; height: 17px;
  fill: none; stroke: #8a4b00; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- The logo ---------- */

.logo {
  margin: -6px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(40px, 12.5vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  /* An outline made of four hard shadows, then the depth under it. Works on
     gradient-filled text, where a stroke would not. */
  filter:
    drop-shadow(0 2.5px 0 var(--outline))
    drop-shadow(0 -2.5px 0 var(--outline))
    drop-shadow(2.5px 0 0 var(--outline))
    drop-shadow(-2.5px 0 0 var(--outline))
    drop-shadow(0 5px 0 #1b1850)
    drop-shadow(0 10px 10px rgba(0, 0, 0, .25));
}

.logo span {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logo__a { background-image: linear-gradient(180deg, #b6fff0 0%, #45e0c7 50%, #19b3a8 100%); }
.logo__b { background-image: linear-gradient(180deg, #fff3a6 0%, #ffc93c 45%, #ff8a1f 100%); }

/* ---------- Level bar ---------- */

.player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  border: 0;
  background: none;
  box-shadow: none;
}

.player__level {
  font: 600 20px/1 var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  text-shadow:
    0 2px 0 var(--outline), 0 -1px 0 var(--outline),
    1.5px 0 0 var(--outline), -1.5px 0 0 var(--outline);
  white-space: nowrap;
}

.player__track {
  position: relative;
  height: 20px;
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: #1a2f63;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, .35), 0 3px 0 rgba(27, 24, 80, .5);
  overflow: hidden;
}

.player__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe07a 0%, #ffb52e 55%, #f08c14 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55);
  transition: width .6s var(--ease-out);
}

/* ---------- The map ---------- */

.map {
  position: relative;
  flex: none;
  height: clamp(470px, 66vh, 580px);
  margin-inline: calc(var(--gutter) * -1);
}

.map__ground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  /* The sea fades into the sky above it rather than starting on a line. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px);
  mask-image: linear-gradient(180deg, transparent 0, #000 70px);
}

.map__mascot {
  position: absolute;
  left: 34%;
  top: 36%;
  width: 26%;
  max-width: 124px;
  pointer-events: none;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .25));
  animation: mascot-bob 3.2s ease-in-out infinite;
}

@keyframes mascot-bob {
  50% { transform: translateY(-6px) rotate(-2deg); }
}

/* ---------- Stations ---------- */

.station,
.duelCta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  font: inherit;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.station {
  position: absolute;
  width: 41%;
  max-width: 172px;
}

.station--zen    { left: 5%;  top: 3%; }
.station--time   { right: 4%; top: 18%; }
.station--death  { left: 3%;  top: 35%; }
.station--review { left: 8%;  top: 64%; }
.station--duel   { right: 5%; top: 55%; }

.duelCta { width: 100%; }

.station__art {
  width: 86%;
  pointer-events: none;
  user-select: none;
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .22));
  transition: transform .22s var(--ease-snap), filter .2s ease;
}

.station__plate {
  display: grid;
  gap: 1px;
  position: relative;
  z-index: 1;
  margin-top: -12px;
  padding: 4px 10px 5px;
  border-radius: 14px;
  background: rgba(24, 30, 66, .82);
  box-shadow: 0 4px 0 rgba(10, 12, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.station__name {
  font: 600 18px/1.1 var(--font-display);
  letter-spacing: .01em;
}

/* The map is looked at, not read: one word per station on screen. The
   description stays in the page for screen readers (and in the button's
   accessible name, which app.js writes). */
.station__desc,
.bankMeta,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Entries left, best score, words waiting: a tag hung on the art. */
.station__meta {
  position: absolute;
  top: 0;
  right: 4px;
  z-index: 1;
  max-width: 70%;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--outline);
  font: 800 12px/1.2 var(--font-ui);
  letter-spacing: .02em;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station__meta:empty { display: none; }

.station--zen .station__meta,
.station--death .station__meta,
.station--review .station__meta { right: auto; left: 6px; }

@media (hover: hover) {
  .station:not(:disabled):hover .station__art,
  .duelCta:not(:disabled):hover .station__art { transform: translateY(-5px) scale(1.03); }
}

.station:active .station__art,
.duelCta:active .station__art { transform: translateY(2px) scale(.96); }

.station:disabled,
.duelCta:disabled { cursor: default; }

.station:disabled .station__art,
.duelCta:disabled .station__art { filter: grayscale(.85) brightness(.85) drop-shadow(0 6px 6px rgba(0, 0, 0, .22)); }

.station:disabled .station__plate,
.duelCta:disabled .station__plate { opacity: .7; }

@keyframes float {
  50% { translate: 0 -4px; }
}

.station--time .station__art { animation-delay: -1.5s; }
.station--death .station__art { animation-delay: -3s; }
.station--review .station__art { animation-delay: -4.5s; }
.station--duel .station__art { animation-delay: -2.2s; }

/* Where the keyboard is, said loudly: the map has no other borders. */
.station:focus-visible,
.duelCta:focus-visible,
.duelPractice:focus-visible,
.coinPill:focus-visible,
.roundBtn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  border-radius: 18px;
  box-shadow: 0 0 0 6px rgba(20, 40, 90, .55);
}

.station:focus-visible .station__plate,
.duelCta:focus-visible .station__plate { background: rgba(24, 30, 66, 1); }

/* The duel station is a block of two buttons, not one. */
.station--duel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.duelBlock { margin: 0; }

.duelPractice {
  position: relative;
  min-height: 30px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd35a, #f5a623);
  color: #4a2a00;
  font: 800 12px/1.2 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 #b86f00;
  cursor: pointer;
}

/* Drawn small, touched at 48px. */
.duelPractice::after {
  content: '';
  position: absolute;
  inset: -9px -4px;
}

.duelPractice:active { transform: translateY(2px); box-shadow: 0 1px 0 #b86f00; }
.duelPractice:disabled { opacity: .5; }

/* ---------- Notice ---------- */

.screen--menu .notice {
  position: relative;
  z-index: 2;
  margin-top: -6px;
  border-radius: 14px;
  background: rgba(24, 30, 66, .85);
  color: #fff;
}

/* ---------- The settings sheet ---------- */

.setup {
  position: relative;
  z-index: 2;
  gap: 14px;
  margin: -36px calc(var(--gutter) * -1) 0;
  padding: 18px calc(var(--gutter) + 4px) max(20px, env(safe-area-inset-bottom));
  border: 0;
  border-top: 2px solid rgba(255, 255, 255, .25);
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(32, 78, 150, .94) 0%, rgba(24, 56, 118, .97) 100%);
  box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
}

.setup__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.setup__label {
  font: 600 18px/1.2 var(--font-display);
  letter-spacing: .01em;
  text-transform: none;
  color: #fff;
}

/* ---------- Sliders ----------
   Still a row of buttons. The track and the thumb are the container's own
   pseudo-elements, placed from --pos (0 to 1), which app.js writes. */

.setup .segmented {
  --pos: 0;
  --inset: 13px;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0;
  padding: 34px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.setup .segmented::before {
  content: '';
  position: absolute;
  top: 9px;
  left: var(--inset);
  right: var(--inset);
  height: 14px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #4fd8ea, #8fe38a) 0 0 / calc(var(--pos) * 100%) 100% no-repeat,
    #13295a;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .12);
  transition: background-size .3s var(--ease-out);
}

.setup .segmented::after {
  content: '';
  position: absolute;
  top: 3px;
  left: calc(var(--inset) + (100% - var(--inset) * 2) * var(--pos));
  width: 26px; height: 26px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #dfe9f7 70%);
  box-shadow: 0 3px 0 #9fb3d1, 0 6px 10px -2px rgba(0, 0, 0, .45);
  transition: left .32s var(--ease-snap);
  pointer-events: none;
}

.setup .segmented__opt {
  position: relative;
  flex: none;
  min-height: 24px;
  padding: 2px 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: rgba(255, 255, 255, .8);
  font: 700 15px/1.3 var(--font-ui);
}

/* Each option is pressable well beyond its word: up over the track and out
   to the sides, which is where a thumb actually lands. */
.setup .segmented__opt::after {
  content: '';
  position: absolute;
  inset: -34px -10px -10px;
}

.setup .segmented__opt:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.setup .segmented__opt.is-active {
  color: #fff;
  background: none;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}

.setup .segmented__opt.is-locked { color: rgba(255, 255, 255, .7); }
.setup .segmented__opt:disabled { opacity: .5; cursor: default; }

@media (hover: hover) {
  .setup .segmented__opt:not(.is-active):hover { color: #fff; background: none; }
}

.setup .segmented__opt[dir="rtl"] { font-family: var(--font-he); font-weight: 600; }


.lockTip { color: var(--text-1); }

/* ---------- Dialogs ---------- */

.screen--menu .modal { position: fixed; }

.modal { background: rgba(14, 12, 44, .72); }

.modal__panel {
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 26px;
  background: linear-gradient(180deg, #3a3394 0%, #2a2476 100%);
  box-shadow: 0 8px 0 #1a1654, 0 24px 50px -10px rgba(0, 0, 0, .6);
}

.modal__title { font-family: var(--font-display); font-weight: 600; font-size: 26px; }
.modal__actions { gap: 14px; }

/* ================================================================= GAME == */

.screen--game { gap: 10px; }

.topbar { gap: 10px; }

.modeTag { display: none; }

.hud {
  flex: 1;
  justify-content: flex-end;
  gap: 8px;
  margin-left: 0;
}

/* "Score: 1250" — label first, in a glass pill. */
.stat {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: baseline;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.stat__value {
  font: 600 18px/1 var(--font-display);
  color: #fff;
}

.stat__label {
  font: 700 15px/1 var(--font-ui);
  letter-spacing: 0;
  text-transform: capitalize;
  color: var(--text-2);
}

.stat__label::after { content: ':'; }

/* The card counter is the title of the screen, not a pill. */
#statProgress {
  margin-inline-end: auto;
  padding: 0;
  background: none;
  box-shadow: none;
}

#statProgress .stat__label { display: none; }
#statProgress .stat__value { font-size: 26px; font-weight: 500; color: #e7e5ff; }

/* Centre it between the back button and the pills, as a heading sits. */
.hud:has(#statProgress:not([hidden])) { justify-content: space-between; }
.hud:has(#statProgress:not([hidden])) #statProgress { margin-inline: auto; }

.life {
  width: 16px; height: 14px;
  border-radius: 0;
  background: var(--life);
  box-shadow: none;
  filter: drop-shadow(0 0 5px var(--life));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1 14 1 7a5.5 5.5 0 0 1 11-1.6A5.5 5.5 0 0 1 23 7c0 7-11 14-11 14z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1 14 1 7a5.5 5.5 0 0 1 11-1.6A5.5 5.5 0 0 1 23 7c0 7-11 14-11 14z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.life.is-lost { filter: none; }

.multiplier { font-family: var(--font-display); }

/* ---------- Clock ---------- */

.clock__track {
  height: 16px;
  border: 3px solid rgba(10, 16, 50, .7);
  border-radius: 999px;
  background: rgba(10, 16, 50, .55);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4);
}

.clock__fill { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45); }
.clock__value { font-family: var(--font-display); font-weight: 600; font-size: 20px; }

/* ---------- Arena ---------- */

/* The doors made way for the parrot; the card's own tint and stamp still say
   which way it is going. Hidden rather than removed: the arena is a
   three-column grid, and taking the first door out of it slid the card into
   the door's column, off the middle of the screen. */
.gate { visibility: hidden; }

.arena { position: relative; }

.arena__mascot {
  position: absolute;
  right: -10px;
  bottom: 2%;
  z-index: 5;
  width: 108px;
  pointer-events: none;
  transform: scaleX(-1);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4));
  transition: opacity .2s ease, translate .3s var(--ease-snap);
  animation: peek 3.6s ease-in-out infinite;
}

@keyframes peek {
  50% { translate: 0 -6px; }
}

/* Out of the way while a card is thrown across it, and gone while the card
   is teaching — the sad one on the card takes over. */
.arena:has(.card.is-dragging) .arena__mascot { opacity: .3; }
.arena:has(.card.is-revealed) .arena__mascot { opacity: 0; translate: 40px 0; }

@media (max-width: 360px) {
  .arena__mascot { width: 88px; right: -14px; }
}

/* ---------- The card arriving ---------- */

/* Scale only, and no fill after it ends: opacity (or any lingering effect)
   on this preserve-3d element would flatten it and break the flip. */
.card__inner { animation: card-pop .5s var(--ease-snap) backwards; }

@keyframes card-pop {
  from { scale: .9; }
}

/* ---------- Celebrations (js/juice.js) ---------- */

.juice {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  pointer-events: none;
}

.juice__bit {
  position: absolute;
  display: block;
  box-shadow: 0 0 6px rgba(255, 255, 255, .35);
  will-change: transform, opacity;
}

/* ---------- The card, front ---------- */

.card__face {
  border-radius: var(--r-card);
}

.card__face--front {
  align-items: center;
  text-align: center;
  padding: 26px 20px;
  border: 9px solid #d6d3fa;
  background:
    radial-gradient(120% 70% at 30% 0%, #ffffff 0%, transparent 60%),
    linear-gradient(170deg, var(--surface) 0%, var(--surface-edge) 100%);
  box-shadow:
    0 0 0 2px #a59fe6,
    inset 0 0 0 2px rgba(255, 255, 255, .9),
    0 12px 0 #6a63b8,
    0 26px 40px -12px rgba(0, 0, 0, .65);
}

.card__face--front .card__word {
  order: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 11vw, 48px);
  letter-spacing: -.01em;
  color: var(--ink);
}

.card__face--front .card__phonetic { order: 2; margin-top: 2px; font-size: 13px; }

.card__face--front .card__meaning {
  order: 3;
  margin-top: 10px;
  text-align: center;
  color: var(--ink);
}

.card__face--front .card__meaning[dir="rtl"] {
  font-family: var(--font-he);
  font-size: clamp(30px, 9vw, 38px);
  font-weight: 500;
  line-height: 1.2;
}

/* A definition is a sentence, not a headline. */
[data-content="definition"] .card__face--front .card__meaning {
  font: 700 17px/1.45 var(--font-ui);
  color: var(--ink-soft);
}

.card__face--front .card__usage {
  order: 4;
  margin-top: 22px;
  font: 600 16px/1.45 var(--font-ui);
  font-style: normal;
  color: var(--ink-soft);
  text-wrap: balance;
}

.card__usage b { box-shadow: none; color: var(--ink); font-weight: 800; }

.card__face--front .card__divider,
.card__face--front .card__label--front { display: none; }

.card__stamp { font-family: var(--font-display); font-weight: 700; }

/* ---------- The card, back ---------- */

.card__face--back {
  padding: 0 0 16px;
  overflow-y: auto;
  border: 4px solid #ff6b5e;
  background: linear-gradient(175deg, #fffaf8 0%, #ffece7 100%);
  box-shadow:
    0 0 0 3px rgba(255, 107, 94, .3),
    0 0 36px rgba(255, 90, 80, .6),
    0 10px 0 #b8392f;
}

.card__face--back > :not(.card__banner),
.card__face--back .card__gloss > * { margin-inline: 18px; }

.card__banner {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 11px 16px;
  background: linear-gradient(180deg, #ff7a6b, #e8453c);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.card__kicker,
.card__kicker--miss {
  font: 800 11.5px/1.2 var(--font-ui);
  letter-spacing: .03em;
  color: #fff;
}

.card__head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid rgba(31, 29, 74, .1);
}

.card__headText { flex: 1; min-width: 0; }

.card__word--back {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 8.5vw, 36px);
  color: var(--ink);
}

.card__face--back .card__meaning--truth {
  /* Under the word, on the word's edge — a pair, not two ends of a line. */
  text-align: left;
  font-family: var(--font-he);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

.card__face--back .card__meaning--truth:not([dir="rtl"]) {
  font: 700 16px/1.4 var(--font-ui);
}

.card__mascot {
  flex: none;
  width: 72px;
  height: 84px;
  margin-top: -4px;
  background: url("../img/art/parrot-sad.svg") center / contain no-repeat;
  transform: scaleX(-1);
}

.card__face--back .card__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  margin-bottom: 3px;
  font: 800 12.5px/1.2 var(--font-ui);
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.card__face--back .card__label::before {
  content: '';
  width: 18px; height: 18px;
  flex: none;
  background: var(--ink-faint);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.card__label--english {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E");
}

.card__label--sentence {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E");
}

.card__face--back .card__definition,
.card__face--back .card__example {
  font: 600 15px/1.45 var(--font-ui);
  font-style: normal;
  color: var(--ink-soft);
}

.card__actions { padding-top: 14px; gap: 10px; }

.btn--continue { flex: 1; padding: 13px 20px; font-size: 20px; }

.btn--speak {
  padding: 0 14px;
  border-radius: 18px;
  color: var(--ink-soft);
  background: linear-gradient(180deg, #ffffff, #ece9fb);
  box-shadow: inset 0 2px 0 #fff, 0 5px 0 #c9c4ec, 0 10px 16px -8px rgba(0, 0, 0, .3);
}

.btn--speak:active { transform: translateY(4px); box-shadow: 0 1px 0 #c9c4ec; }

/* The banner says what the line under the card used to, and Continue is the
   only thing to press. */
.stage:has(.card.is-revealed) .feedback { visibility: hidden; }
.screen--game:has(.card.is-revealed) .controls { visibility: hidden; }

.feedback { font: 700 14px/1.3 var(--font-ui); }

/* ---------- Answer buttons ---------- */

.controls { gap: 40px; padding-top: 6px; }

.btn--gate {
  width: 100px;
  height: 86px;
  border: 0;
  border-radius: 24px;
  transition: transform .09s ease-out, box-shadow .09s ease-out, filter .15s ease;
}

.btn--no {
  color: #7c1640;
  background: linear-gradient(180deg, #ff8ab8 0%, #f0508f 55%, #d93a78 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .45),
    inset 0 -4px 0 rgba(0, 0, 0, .08),
    0 8px 0 #9c2256,
    0 16px 22px -8px rgba(0, 0, 0, .55),
    0 0 calc(clamp(0, calc(var(--swipe) * -1), 1) * 30px) #ff5d8f;
}

.btn--yes {
  color: #07574d;
  background: linear-gradient(180deg, #6ff0da 0%, #2fd3b7 55%, #19b39c 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .45),
    inset 0 -4px 0 rgba(0, 0, 0, .08),
    0 8px 0 #0e7a6b,
    0 16px 22px -8px rgba(0, 0, 0, .55),
    0 0 calc(clamp(0, var(--swipe), 1) * 30px) #2fd3b7;
}

.btn--gate svg { width: 46px; height: 46px; stroke-width: 5; }

.btn--no:active,
.btn--yes:active {
  transform: translateY(7px);
  background-image: none;
}

.btn--no:active {
  background: linear-gradient(180deg, #f0508f, #d93a78);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 1px 0 #9c2256;
}

.btn--yes:active {
  background: linear-gradient(180deg, #2fd3b7, #19b39c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 1px 0 #0e7a6b;
}

@media (hover: hover) {
  .btn--gate:not(:disabled):hover { filter: brightness(1.07); border: 0; }
  .btn--no:not(:disabled):hover {
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 8px 0 #9c2256, 0 16px 22px -8px rgba(0, 0, 0, .55);
  }
  .btn--yes:not(:disabled):hover {
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 8px 0 #0e7a6b, 0 16px 22px -8px rgba(0, 0, 0, .55);
  }
}

.btn--gate:disabled { opacity: .35; }

/* ============================================================== SUMMARY == */

.summary__mascot {
  justify-self: center;
  width: 110px;
  margin-bottom: -6px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
  animation: mascot-bob 3.2s ease-in-out infinite;
}

.summary__title { font-family: var(--font-display); font-weight: 600; }

.summary__score {
  font-family: var(--font-display);
  font-weight: 700;
  color: #ffd35a;
  text-shadow: 0 3px 0 var(--outline), 0 -2px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 6px 0 #16133f;
}

.summary__cell {
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 0 rgba(0, 0, 0, .25);
}

/* ================================================================ OTHER == */

.brand__name,
.board__title { font-family: var(--font-display); font-weight: 600; }

.panel { border-radius: var(--r-panel); }

@media (prefers-reduced-motion: reduce) {
  .map__mascot, .arena__mascot, .summary__mascot,
  .station__art, .card__inner { animation: none; }
}