/* =============================================================== home.css ==

   The home screen, the player page and "my cards" — and the few rules the
   rest of the interface needs now that the page reads right to left.

   Loaded last. The island recipe still holds: a raised control is a gradient
   face, a hard shadow of its own hue for thickness, a thin light line on top.
============================================================================ */

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

:root {
  /* ---- The home background ------------------------------------------
     Set here, by the developers, and by nobody else. Each mode has its own
     backdrop (see "Mode backdrops" below), cross-faded as the carousel
     moves. A picture set here covers all of them. To use one, put it in
     img/home/ and point the variable at it:

         --home-bg-image: url("../img/home/background.jpg");

     The gradient shows before the backdrops fade in and wherever the
     picture is transparent, so the screen is never blank. */
  --home-bg-image: none;
  --home-bg:
    radial-gradient(120% 70% at 50% 0%, rgba(125, 211, 252, .55) 0%, transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(236, 72, 153, .35) 0%, transparent 70%),
    radial-gradient(80% 50% at 0% 90%, rgba(45, 212, 191, .35) 0%, transparent 70%),
    linear-gradient(180deg, #4d63e0 0%, #3a3aa8 45%, #26206e 100%);

  /* ---- Bands --------------------------------------------------------
     The colour a card wears says how hard its word is. */
  --band-easy: #9aa3b5;
  --band-medium: #3b82f6;
  --band-hard: #8b5cf6;
  --band-veryHard: #f97316;
}

[data-band="easy"]     { --band: var(--band-easy); --band-ink: #3e4556; }
[data-band="medium"]   { --band: var(--band-medium); --band-ink: #123a8a; }
[data-band="hard"]     { --band: var(--band-hard); --band-ink: #3f1d8a; }
[data-band="veryHard"] { --band: var(--band-veryHard); --band-ink: #7a3100; }
[data-band="any"]      { --band: #ffffff; --band-ink: var(--outline); }

/* ------------------------------------------------------------ Hebrew -- */

/* Tracking is a Latin habit; Hebrew letters spread apart read as broken. */
html[dir="rtl"] body * { letter-spacing: normal !important; }

.field__label,
.stat__label,
.summary__kicker,
.board__count { text-transform: none; }

.field__label { font-size: 14px; }

/* "Back" points the way the page came from, which is right in Hebrew. */
html[dir="rtl"] .iconBtn--back svg { transform: scaleX(-1); }

.iconBtn svg,
.roundBtn svg,
.modes__arrow svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================================================================ HOME == */

.screen--home {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  isolation: isolate;          /* the backdrop sits behind everything here */
  background-color: #26206e;
  background-image: var(--home-bg);
}

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

/* ---------- Mode backdrops ----------
   One layer per mode. home.js sets each layer's opacity from how close its
   card is to the centre, so the mood follows the finger. Kept quiet on
   purpose: the card is the subject, the backdrop only sets the tone.
   Only the layers on screen animate. */

@property --mode-tint {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(20, 24, 80, .38);
}

.screen--home { transition: --mode-tint .5s ease; }
.screen[data-mode="duel"]        { --mode-tint: rgba(74, 16, 92, .42); }
.screen[data-mode="zen"]         { --mode-tint: rgba(8, 64, 84, .4); }
.screen[data-mode="timeAttack"]  { --mode-tint: rgba(110, 40, 6, .42); }
.screen[data-mode="suddenDeath"] { --mode-tint: rgba(70, 6, 16, .5); }
.screen[data-mode="review"]      { --mode-tint: rgba(22, 52, 130, .4); }

.homeBg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* A developer's picture, over every mode. */
.homeBg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--home-bg-image) center / cover no-repeat;
}

.homeBg.is-shaking { animation: bg-shake .42s cubic-bezier(.36, .07, .19, .97) both; }

@keyframes bg-shake {
  15% { transform: translate(-4px, 1px) rotate(-.4deg); }
  30% { transform: translate(4px, -1px) rotate(.4deg); }
  45% { transform: translate(-3px, 1px); }
  60% { transform: translate(3px, 0); }
  75% { transform: translate(-1px, 0); }
}

.homeBg__layer {
  position: absolute;
  inset: -12px;                /* room for the shake */
  opacity: 0;
  overflow: hidden;
  transition: opacity .5s ease;
}

.homeBg__layer::before,
.homeBg__layer::after {
  content: '';
  position: absolute;
  animation-play-state: paused;
}

.homeBg__layer.is-live::before,
.homeBg__layer.is-live::after { animation-play-state: running; }

/* The same rule the two pseudo-elements above already follow, extended to the
   art inside the layer — which is where nearly all of it is.

   Five backdrops exist at once and four of them are at opacity 0, but their
   hundred-odd pieces of art went on animating behind the one being looked at:
   work with no viewer, paid for in the same budget as the work that has one.
   On a desktop that is invisible. Added to the home screen on an iPhone, where
   a web app gets a smaller memory budget than a Safari tab, it was the
   difference between a running app and one WebKit killed a second and a half
   after it loaded, over and over.

   `content-visibility` is the half that actually gives the memory back: paused
   animations still hold the layers they were promoted to. Both are keyed on
   `is-live`, which home.js already toggles the moment a backdrop starts
   fading in — so a layer is only skipped while it is genuinely invisible, and
   the cross-fade between stations still has both halves of it to draw. */
.homeBg__layer:not(.is-live) {
  content-visibility: hidden;
}

.homeBg__layer:not(.is-live) * {
  animation-play-state: paused;
}

/* Duel: two colours squaring up across a flickering seam. */
.homeBg__layer[data-mode="duel"] {
  background:
    radial-gradient(90% 55% at 105% 85%, rgba(56, 189, 248, .38) 0%, transparent 70%),
    radial-gradient(90% 55% at -5% 15%, rgba(255, 95, 162, .38) 0%, transparent 70%),
    linear-gradient(165deg, #3b1466 0%, #22093f 55%, #12041f 100%);
}

.homeBg__layer[data-mode="duel"]::before {
  inset: 0;
  background: linear-gradient(118deg,
    transparent 46%, rgba(255, 255, 255, .06) 49%, rgba(255, 220, 245, .22) 50%,
    rgba(255, 255, 255, .06) 51%, transparent 54%);
  animation: seam 4.6s ease-in-out infinite;
}

.homeBg__layer[data-mode="duel"]::after {
  inset: 0;
  background:
    radial-gradient(38% 30% at 22% 38%, rgba(255, 95, 162, .3) 0%, transparent 70%),
    radial-gradient(38% 30% at 78% 62%, rgba(56, 189, 248, .28) 0%, transparent 70%);
  animation: square-up 6s ease-in-out infinite;
}

@keyframes seam {
  0%, 100% { opacity: .55; }
  46% { opacity: .9; }
  50% { opacity: .4; }
  54% { opacity: 1; }
}

/* Scaling round the centre moves both glows out, then both in. */
@keyframes square-up {
  0%, 100% { transform: scale(1.12); }
  50% { transform: scale(.9); }
}

/* Zen: still water, a slow swell, a few motes drifting up. */
.homeBg__layer[data-mode="zen"] {
  background:
    radial-gradient(110% 60% at 50% -5%, rgba(167, 243, 208, .32) 0%, transparent 65%),
    linear-gradient(180deg, #0f6a82 0%, #0b4a68 55%, #07304a 100%);
}

.homeBg__layer[data-mode="zen"]::before {
  inset: 0 -20%;
  background:
    radial-gradient(60% 22% at 30% 100%, rgba(94, 234, 212, .22) 0%, transparent 70%),
    radial-gradient(70% 18% at 75% 88%, rgba(255, 255, 255, .08) 0%, transparent 70%),
    radial-gradient(80% 20% at 40% 76%, rgba(94, 234, 212, .1) 0%, transparent 70%);
  animation: swell 16s ease-in-out infinite alternate;
}

.homeBg__layer[data-mode="zen"]::after {
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .5) 0 1.5px, transparent 2.5px) 0 0 / 120px 160px,
    radial-gradient(circle, rgba(167, 243, 208, .4) 0 1px, transparent 2px) 50px 70px / 90px 130px;
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 90%);
  mask-image: linear-gradient(0deg, #000 30%, transparent 90%);
  animation: drift-up 90s linear infinite;
}

@keyframes swell {
  to { transform: translateX(8%) translateY(-2%); }
}

/* 2080px is a whole number of both tiles, so the loop has no seam. */
@keyframes drift-up {
  to { background-position: 0 -2080px, 50px -2010px; }
}

/* Time Attack: warm light, rays turning like a clock hand, speed lines. */
.homeBg__layer[data-mode="timeAttack"] {
  background:
    radial-gradient(70% 45% at 50% 45%, rgba(255, 190, 60, .3) 0%, transparent 70%),
    linear-gradient(170deg, #8a3208 0%, #5a1d05 55%, #321002 100%);
}

.homeBg__layer[data-mode="timeAttack"]::before {
  left: 50%;
  top: 45%;
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  background: repeating-conic-gradient(rgba(255, 210, 63, .09) 0deg 5deg, transparent 5deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 38%);
  mask-image: radial-gradient(circle, #000 0%, transparent 38%);
  animation: turn 40s linear infinite;
}

.homeBg__layer[data-mode="timeAttack"]::after {
  inset: 0;
  background:
    linear-gradient(135deg, transparent 48.5%, rgba(255, 240, 200, .07) 49.5% 50.5%, transparent 51.5%) 0 0 / 90px 90px,
    linear-gradient(135deg, transparent 49%, rgba(255, 240, 200, .05) 49.6% 50.4%, transparent 51%) 0 0 / 150px 150px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 35% 65%, #000);
  mask-image: linear-gradient(90deg, #000, transparent 35% 65%, #000);
  animation: rush 6s linear infinite;
}

@keyframes turn {
  to { transform: rotate(360deg); }
}

@keyframes rush {
  to { background-position: -450px 450px, -450px 450px; }
}

/* Sudden Death: near-black red, a heartbeat of light, embers rising. */
.homeBg__layer[data-mode="suddenDeath"] {
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%, transparent 35%, rgba(0, 0, 0, .7) 100%),
    radial-gradient(60% 40% at 50% 100%, rgba(255, 70, 40, .22) 0%, transparent 70%),
    linear-gradient(180deg, #2a040b 0%, #3d0712 50%, #1a0206 100%);
}

.homeBg__layer[data-mode="suddenDeath"]::before {
  inset: 0;
  background: radial-gradient(55% 40% at 50% 52%, rgba(255, 40, 70, .42) 0%, transparent 70%);
  animation: heartbeat 1.5s ease-out infinite;
}

.homeBg__layer[data-mode="suddenDeath"]::after {
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 150, 60, .75) 0 1.2px, transparent 2.4px) 0 0 / 110px 140px,
    radial-gradient(circle, rgba(255, 90, 60, .55) 0 1px, transparent 2px) 40px 60px / 70px 100px;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 75%);
  mask-image: linear-gradient(0deg, #000 10%, transparent 75%);
  animation: embers 24s linear infinite;
}

/* Lub-dub, then rest. */
@keyframes heartbeat {
  0%, 60%, 100% { opacity: .35; transform: scale(1); }
  10% { opacity: .85; transform: scale(1.05); }
  22% { opacity: .45; transform: scale(1.01); }
  32% { opacity: .75; transform: scale(1.04); }
}

@keyframes embers {
  to { background-position: 0 -1400px, 40px -1340px; }
}

/* Review: calm blue and mint, dashed rings turning, faint cards. */
.homeBg__layer[data-mode="review"] {
  background:
    radial-gradient(100% 55% at 50% 0%, rgba(167, 243, 208, .3) 0%, transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='120'%3E%3Crect x='14' y='16' width='34' height='46' rx='6' fill='none' stroke='white' stroke-opacity='.06' stroke-width='2' transform='rotate(-8 31 39)'/%3E%3C/svg%3E") 0 0 / 96px 120px,
    linear-gradient(180deg, #2e5bc4 0%, #22469c 55%, #152d6c 100%);
}

.homeBg__layer[data-mode="review"]::before {
  left: 50%;
  top: 45%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background: repeating-radial-gradient(circle, transparent 0 46px, rgba(167, 243, 208, .12) 46px 48px);
  -webkit-mask-image: repeating-conic-gradient(#000 0deg 14deg, transparent 14deg 22deg);
  mask-image: repeating-conic-gradient(#000 0deg 14deg, transparent 14deg 22deg);
  animation: turn 70s linear infinite reverse;
}

.homeBg__layer[data-mode="review"]::after {
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(8, 18, 60, .45) 100%);
}

/* ---------- Mode drawings ----------
   The SVGs inside each backdrop. Faint, pushed to the edges and partly off
   screen, so they read as scenery around the card and never compete with it. */

.homeBg__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.homeArt {
  position: absolute;
  display: block;
  height: auto;
  overflow: visible;
  color: #fff;
  opacity: .14;
}

.homeBg__layer:not(.is-live) .homeArt,
.homeBg__layer:not(.is-live) .homeArt * { animation-play-state: paused; }

.homeArt__hand,
.homeArt__cloth { transform-box: view-box; }

@keyframes art-bob {
  50% { translate: 0 -8px; }
}

@keyframes art-spin {
  to { transform: rotate(360deg); }
}

/* Duel: crossed swords, a shield, two banners and sparks where they meet. */
.homeArt--swords { left: -12%; bottom: 7%; width: 50%; rotate: -8deg; }
.homeArt--shield { right: -9%; bottom: 10%; width: 34%; rotate: 12deg; opacity: .12; }

.homeArt--flag { top: 15%; width: 15%; opacity: .32; }
.homeArt--flagA { left: 4%; color: #ff7ab8; }
.homeArt--flagB { right: 4%; color: #67d4ff; scale: -1 1; }

.homeArt__cloth {
  transform-origin: 8px 28px;
  animation: art-wave 2.4s ease-in-out infinite alternate;
}

.homeArt--flagB .homeArt__cloth { animation-delay: -1.2s; }

@keyframes art-wave {
  from { transform: skewY(4deg) scaleX(1); }
  to { transform: skewY(-5deg) scaleX(.93); }
}

.homeArt--spark {
  width: 7%;
  opacity: 0;
  animation: art-clash 3.4s ease-out infinite;
}

.homeArt--sparkA { left: 76%; top: 23%; }
.homeArt--sparkB { left: 17%; top: 75%; animation-delay: 1.7s; }

@keyframes art-clash {
  0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  76% { opacity: .75; transform: scale(1.25) rotate(20deg); }
  88% { opacity: .2; transform: scale(.8) rotate(35deg); }
}

/* Zen: bamboo, a crescent moon, a lotus on rippling water, balanced stones,
   and a few petals falling. */
.homeArt--bamboo {
  left: -1%;
  top: 12%;
  width: 11%;
  opacity: .12;
  transform-origin: 50% 100%;
  animation: art-sway 8s ease-in-out infinite alternate;
}

@keyframes art-sway {
  from { transform: rotate(-1.5deg); }
  to { transform: rotate(2deg); }
}

.homeArt--moon {
  right: 7%;
  top: 15%;
  width: 15%;
  color: #e6fff8;
  opacity: .3;
  filter: drop-shadow(0 0 10px rgba(230, 255, 248, .6));
}

.homeArt__twinkle { animation: art-twinkle 4s ease-in-out infinite; }
.homeArt__twinkle--late { animation-delay: -2s; }

@keyframes art-twinkle {
  50% { opacity: .2; }
}

.homeArt--lotus {
  left: 3%;
  bottom: 11%;
  width: 34%;
  color: #b5f5e3;
  opacity: .22;
  animation: art-bob 6s ease-in-out infinite;
}

.homeArt--ripples { left: -2%; bottom: 8%; width: 44%; color: #b5f5e3; opacity: .3; }

.homeArt__ripple {
  transform-box: fill-box;
  transform-origin: center;
  animation: art-ripple 7.5s ease-out infinite;
}

.homeArt__ripple:nth-child(2) { animation-delay: -2.5s; }
.homeArt__ripple:nth-child(3) { animation-delay: -5s; }

@keyframes art-ripple {
  from { transform: scale(.15); opacity: .9; }
  to { transform: scale(1.1); opacity: 0; }
}

.homeArt--stones { right: 5%; bottom: 11%; width: 17%; opacity: .16; }

.homeArt--petal {
  top: 0;
  width: 4%;
  color: #c8fbe9;
  opacity: 0;
  animation: art-fall 22s linear infinite;
}

.homeArt--petalA { left: 22%; }
.homeArt--petalB { left: 62%; animation-delay: -8s; animation-duration: 26s; }
.homeArt--petalC { left: 86%; animation-delay: -15s; }

@keyframes art-fall {
  0% { transform: translate(0, 8vh) rotate(0deg); opacity: 0; }
  10% { opacity: .45; }
  50% { transform: translate(-30px, 50vh) rotate(160deg); }
  85% { opacity: .35; }
  100% { transform: translate(10px, 95vh) rotate(320deg); opacity: 0; }
}

/* Time Attack: a clock that really ticks, a stopwatch, an hourglass that
   turns over, and gears. */
.homeArt--clock { right: -14%; bottom: 7%; width: 56%; color: #ffe7b0; opacity: .16; }

.homeArt__hand { transform-origin: 50px 50px; }
.homeArt__hand--hour { rotate: 300deg; }
.homeArt__hand--minute { rotate: 60deg; animation: art-spin 3600s linear infinite; }
.homeArt__hand--second { stroke: #ffb35c; animation: art-spin 60s steps(60) infinite; }
.homeArt__hand--sweep { transform-origin: 50px 62px; animation: art-spin 6s steps(30) infinite; }

.homeArt--stopwatch { left: 5%; top: 15%; width: 16%; color: #ffe7b0; opacity: .22; }

.homeArt--hourglass {
  right: 8%;
  top: 16%;
  width: 10%;
  color: #ffe7b0;
  opacity: .22;
  animation: art-turn 9s ease-in-out infinite;
}

@keyframes art-turn {
  0%, 80% { transform: rotate(0deg); }
  92%, 100% { transform: rotate(180deg); }
}

.homeArt--gear {
  left: -7%;
  bottom: 15%;
  width: 26%;
  color: #ffe7b0;
  opacity: .11;
  animation: art-spin 24s linear infinite;
}

.homeArt--gearSmall {
  left: 13%;
  bottom: 11%;
  width: 14%;
  animation-direction: reverse;
  animation-duration: 13s;
}

/* Sudden Death: cartoon skulls and bones, and a band of blood dripping from
   the top. Spooky rather than frightening. */
.homeArt--blood { top: 0; left: 0; width: 100%; color: #9e1028; opacity: .6; }

.homeArt__drop {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: art-drip 5s ease-in infinite;
}

.homeArt__drop--late { animation-delay: 2.4s; }

@keyframes art-drip {
  0% { transform: translateY(-6px) scale(0); opacity: 0; }
  25% { transform: translateY(0) scale(1); opacity: 1; }
  40% { transform: translateY(0) scale(1); }
  75% { transform: translateY(70px) scale(.9); opacity: .9; }
  82%, 100% { transform: translateY(80px) scale(.9); opacity: 0; }
}

.homeArt--skullBig {
  left: -9%;
  bottom: 7%;
  width: 42%;
  color: #ffd9d9;
  opacity: .14;
  rotate: -12deg;
  animation: art-bob 5s ease-in-out infinite;
}

.homeArt--skull { color: #ffd9d9; animation: art-bob 4.4s ease-in-out infinite; }
.homeArt--skullA { right: 5%; top: 16%; width: 15%; opacity: .2; rotate: 12deg; animation-delay: -1.5s; }
.homeArt--skullB { right: 8%; bottom: 19%; width: 12%; opacity: .13; rotate: -8deg; animation-delay: -3s; }

/* Review: a shield with a tick, an open book, the "again" arrows turning,
   and small ticks floating up. */
.homeArt--safe { left: -7%; bottom: 8%; width: 36%; color: #d6fff0; opacity: .15; rotate: -8deg; }
.homeArt--book { right: -5%; bottom: 11%; width: 34%; color: #d6fff0; opacity: .13; rotate: 6deg; }

.homeArt--again {
  right: 7%;
  top: 16%;
  width: 14%;
  color: #d6fff0;
  opacity: .22;
  animation: art-spin 20s linear infinite;
}

.homeArt--tick { width: 6%; color: #a7f3d0; opacity: 0; animation: art-rise 9s ease-in-out infinite; }
.homeArt--tickA { left: 8%; top: 24%; }
.homeArt--tickB { left: 20%; top: 17%; animation-delay: -3s; }
.homeArt--tickC { right: 26%; bottom: 20%; animation-delay: -6s; }

@keyframes art-rise {
  0% { transform: translateY(14px); opacity: 0; }
  30%, 70% { opacity: .35; }
  100% { transform: translateY(-22px); opacity: 0; }
}

/* ---------- Top bar ----------
   Physically pinned: the player on the left, settings on the right. */

.homeBar {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 3;
}

.homeBar__profile { order: 0; }
.homeBar__settings { order: 1; }

.homeBar .roundBtn {
  width: 48px; height: 48px;
  background: var(--mode-tint);
  border: 2px solid rgba(255, 255, 255, .45);
}

.homeBar .roundBtn svg { width: 26px; height: 26px; stroke-width: 1.9; }

.homeBar__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 70%;
  padding: 4px 16px 4px 4px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: var(--mode-tint);
  color: #fff;
  cursor: pointer;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 12px -4px rgba(0, 0, 0, .45);
  touch-action: manipulation;
  transition: transform .15s var(--ease-snap);
}

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

.homeBar__who {
  display: grid;
  min-width: 0;
  text-align: left;
  line-height: 1.15;
}

.homeBar__name,
.homeBar__trophies {
  direction: rtl;
  unicode-bidi: plaintext;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeBar__name { font: 600 17px/1.2 var(--font-display); }
.homeBar__trophies { font: 700 12px/1.2 var(--font-ui); color: #ffe08a; }

/* ---------- Logo ----------
   Neutral silver by default, dressed in the current mode's colours on the
   home screen. The stops are registered colours so the gradients blend from
   one mode to the next instead of jumping. */

@property --logo-a1 { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --logo-a2 { syntax: '<color>'; inherits: true; initial-value: #e9ecf7; }
@property --logo-a3 { syntax: '<color>'; inherits: true; initial-value: #b7bdd6; }
@property --logo-b1 { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --logo-b2 { syntax: '<color>'; inherits: true; initial-value: #dfe3f2; }
@property --logo-b3 { syntax: '<color>'; inherits: true; initial-value: #a3aac8; }
@property --logo-edge { syntax: '<color>'; inherits: true; initial-value: #231f5c; }
@property --logo-depth { syntax: '<color>'; inherits: true; initial-value: #14113a; }

@property --logo-shine { syntax: '<percentage>'; inherits: false; initial-value: 130%; }

.logo--home {
  position: relative;
  width: fit-content;
  margin: 4px auto 14px;
  font-size: clamp(44px, 13vw, 58px);
  filter:
    drop-shadow(0 2.5px 0 var(--logo-edge))
    drop-shadow(0 -2.5px 0 var(--logo-edge))
    drop-shadow(2.5px 0 0 var(--logo-edge))
    drop-shadow(-2.5px 0 0 var(--logo-edge))
    drop-shadow(0 5px 0 var(--logo-depth))
    drop-shadow(0 10px 10px rgba(0, 0, 0, .25));
  transition:
    --logo-a1 .5s ease, --logo-a2 .5s ease, --logo-a3 .5s ease,
    --logo-b1 .5s ease, --logo-b2 .5s ease, --logo-b3 .5s ease,
    --logo-edge .5s ease, --logo-depth .5s ease;
}

/* Each word carries a band of light over its colours, swept across now and
   then; the word "Vocab" catches it a moment after "Swipe". */
.logo--home .logo__a,
.logo--home .logo__b {
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: var(--logo-shine) 0, 0 0;
  animation: logo-shine 6s ease-in-out infinite;
}

.logo--home .logo__a { background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%), linear-gradient(180deg, var(--logo-a1) 0%, var(--logo-a2) 50%, var(--logo-a3) 100%); }
.logo--home .logo__b { background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%), linear-gradient(180deg, var(--logo-b1) 0%, var(--logo-b2) 45%, var(--logo-b3) 100%); animation-delay: .35s; }

@keyframes logo-shine {
  0%, 55% { --logo-shine: 130%; }
  85%, 100% { --logo-shine: -30%; }
}

/* A swipe gesture under the name, drawn again every few seconds. */
.logo__swoosh {
  position: absolute;
  left: 6%;
  bottom: -15px;
  width: 88%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--logo-b2);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo__swooshLine {
  stroke-dasharray: 190;
  animation: logo-swipe 6s ease-out infinite;
}

.logo__swooshHead { animation: logo-head 6s ease-out infinite; }

@keyframes logo-swipe {
  0% { stroke-dashoffset: 190; }
  14%, 100% { stroke-dashoffset: 0; }
}

@keyframes logo-head {
  0%, 10% { opacity: 0; transform: translateX(-10px); }
  16%, 100% { opacity: 1; transform: none; }
}

/* Two sparkles at the corners. */
.logo__spark {
  position: absolute;
  fill: var(--logo-a1);
  animation: logo-twinkle 2.8s ease-in-out infinite;
}

.logo__spark--a { left: -18px; top: -8px; width: 20px; }
.logo__spark--b { right: -16px; top: 4px; width: 14px; animation-delay: -1.4s; }

@keyframes logo-twinkle {
  0%, 100% { transform: scale(.55) rotate(0deg); opacity: .6; }
  50% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .logo--home .logo__a,
  .logo--home .logo__b,
  .logo__swooshLine,
  .logo__swooshHead,
  .logo__spark { animation: none; }
}

/* Duel: pink against blue, like the two banners. */
.screen[data-mode="duel"] .logo--home {
  --logo-a1: #ffe1f0; --logo-a2: #ff7ab8; --logo-a3: #d92f84;
  --logo-b1: #e3f5ff; --logo-b2: #67d4ff; --logo-b3: #2f86e0;
  --logo-edge: #3a0f5c; --logo-depth: #1f0636;
}

/* Zen: mint and pale water. */
.screen[data-mode="zen"] .logo--home {
  --logo-a1: #effffa; --logo-a2: #a4f0dd; --logo-a3: #3fc4ab;
  --logo-b1: #ffffff; --logo-b2: #d3f3ff; --logo-b3: #83cde6;
  --logo-edge: #0b4a5e; --logo-depth: #05303f;
}

/* Time Attack: gold and burning orange. */
.screen[data-mode="timeAttack"] .logo--home {
  --logo-a1: #fff8d6; --logo-a2: #ffd23f; --logo-a3: #ee9c0c;
  --logo-b1: #ffe6c7; --logo-b2: #ff9a3c; --logo-b3: #dd5418;
  --logo-edge: #5a1d05; --logo-depth: #2e0e02;
}

/* Sudden Death: bone white and blood red. */
.screen[data-mode="suddenDeath"] .logo--home {
  --logo-a1: #ffffff; --logo-a2: #f6dede; --logo-a3: #d9a0a0;
  --logo-b1: #ffc7cd; --logo-b2: #ff4d5e; --logo-b3: #a8112a;
  --logo-edge: #2a040b; --logo-depth: #120104;
}

/* Review: calm blue and mint. */
.screen[data-mode="review"] .logo--home {
  --logo-a1: #ffffff; --logo-a2: #cfe3ff; --logo-a3: #74a8ff;
  --logo-b1: #effff8; --logo-b2: #a7f3d0; --logo-b3: #45c393;
  --logo-edge: #152d6c; --logo-depth: #0b1a44;
}

/* ---------- Avatars ---------- */

.avatar {
  --size: 42px;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: linear-gradient(160deg, #8b7cf8, #5a4fd0);
  box-shadow: 0 3px 0 rgba(20, 16, 70, .45);
}

.avatar img,
.avatar svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--initial span {
  font: 700 calc(var(--size) * .46)/1 var(--font-display);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}

.avatar--xl { --size: 112px; border-width: 4px; box-shadow: 0 6px 0 rgba(20, 16, 70, .45), 0 16px 30px -10px rgba(0, 0, 0, .5); }

/* ---------- The mode carousel ---------- */

.modes {
  position: relative;
  flex: 1;
  width: auto;                 /* styles.css sets 100%, which undoes the bleed below and shifts the card off-centre */
  min-height: 300px;
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
  touch-action: pan-y;
  outline: none;
}

.modes:focus-visible .modeCard.is-current {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.modes__track {
  position: absolute;
  inset: 8px 0 14px;
}

.modeCard {
  --mode-a: #ff5fa2;
  --mode-b: #7b2ff7;
  --mode-edge: #4a1596;
  position: absolute;
  inset: 0;
  width: min(76%, 330px);
  max-height: 470px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 18px 20px;
  border: 3px solid rgba(255, 255, 255, .4);
  border-radius: 34px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .35) 0%, transparent 55%),
    linear-gradient(165deg, var(--mode-a) 0%, var(--mode-b) 100%);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    0 10px 0 var(--mode-edge),
    0 26px 40px -14px rgba(0, 0, 0, .6);
  transition: transform .42s var(--ease-snap), opacity .3s ease, filter .3s ease;
  will-change: transform;
}

.modeCard[data-mode="duel"],
.screen[data-mode="duel"] { --mode-a: #ff5fa2; --mode-b: #7b2ff7; --mode-edge: #4a1596; --mode-glow: rgba(255, 95, 162, .45); }
.modeCard[data-mode="zen"],
.screen[data-mode="zen"] { --mode-a: #5eead4; --mode-b: #1b8fb0; --mode-edge: #0e5f78; --mode-glow: rgba(94, 234, 212, .4); }
.modeCard[data-mode="timeAttack"],
.screen[data-mode="timeAttack"] { --mode-a: #ffd23f; --mode-b: #ff6a2b; --mode-edge: #a83a0c; --mode-glow: rgba(255, 190, 60, .45); }
.modeCard[data-mode="suddenDeath"],
.screen[data-mode="suddenDeath"] { --mode-a: #ff5a67; --mode-b: #7d1330; --mode-edge: #470716; --mode-glow: rgba(255, 40, 70, .5); }
.modeCard[data-mode="review"],
.screen[data-mode="review"] { --mode-a: #a7f3d0; --mode-b: #4f8cff; --mode-edge: #2548a8; --mode-glow: rgba(167, 243, 208, .4); }

/* The centred card glows in its backdrop's light, so both read as one scene. */
.modeCard.is-current {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    0 10px 0 var(--mode-edge),
    0 26px 40px -14px rgba(0, 0, 0, .6),
    0 0 70px -6px var(--mode-glow);
}

/* The mode's symbol (drawn in home.js). It takes every pixel the text below
   leaves free, so it is as large as the card allows. Styled like the rest of
   the island: a light face, a hard shadow in the mode's edge colour. */
.modeCard__emblem {
  position: relative;
  flex: 1 1 0;
  min-height: 90px;
  width: 100%;
  margin: -6px 0 2px;
}

/* Pinned to the box, so the drawing scales to whichever side is shorter and
   never spills onto the name. The bottom inset leaves room for its shadow. */
.modeCard__emblem svg {
  position: absolute;
  inset: 0 0 14px;
  width: 100%;
  height: calc(100% - 14px);
  overflow: visible;
  filter:
    drop-shadow(0 6px 0 var(--mode-edge))
    drop-shadow(0 16px 14px rgba(0, 0, 0, .3));
  animation: emblem-float 5s ease-in-out infinite;
}

.modeCard:not(.is-current) .modeCard__emblem svg,
.modeCard:not(.is-current) .modeCard__emblem svg * { animation-play-state: paused; }

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

.em-top { stop-color: #fff; }
.em-bottom { stop-color: color-mix(in srgb, var(--mode-a) 32%, #fff); }
.em-ink { fill: var(--mode-edge); }
.em-line { fill: none; stroke: var(--mode-edge); stroke-linecap: round; stroke-linejoin: round; }
.em-halo { fill: #fff; opacity: .16; }

/* Duel: the swords swing in and clash, and the bolt flashes on the hit. */
.em-swordL,
.em-swordR { transform-box: view-box; transform-origin: 60px 60px; }
.em-swordL { animation: em-clashL 3.2s ease-in-out infinite; }
.em-swordR { animation: em-clashR 3.2s ease-in-out infinite; }

@keyframes em-clashL {
  0%, 60%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(-9deg); }
  76% { transform: rotate(3deg); }
  84% { transform: rotate(0deg); }
}

@keyframes em-clashR {
  0%, 60%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(9deg); }
  76% { transform: rotate(-3deg); }
  84% { transform: rotate(0deg); }
}

.em-bolt {
  fill: #ffd23f;
  stroke: #b86f00;
  stroke-width: 2.5;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: em-flash 3.2s ease-out infinite;
}

@keyframes em-flash {
  0%, 72%, 100% { transform: scale(1); filter: none; }
  77% { transform: scale(1.3); filter: drop-shadow(0 0 6px #fff6b0); }
}

/* Zen: the lotus breathes, the outer petals opening and closing. */
.em-petalL,
.em-petalR { transform-box: view-box; transform-origin: 60px 79px; animation: 6s ease-in-out infinite alternate; }
.em-petalL { animation-name: em-openL; }
.em-petalR { animation-name: em-openR; }

@keyframes em-openL { to { transform: rotate(-7deg); } }
@keyframes em-openR { to { transform: rotate(7deg); } }

.em-halo--zen { animation: em-glow 6s ease-in-out infinite alternate; }

@keyframes em-glow { to { opacity: .3; } }

/* Time Attack: the hand ticks, the watch jolts on every tick. */
.em-hand {
  transform-box: view-box;
  transform-origin: 60px 72px;
  animation: em-spin 6s steps(12) infinite;
}

@keyframes em-spin { to { transform: rotate(360deg); } }

.em-watch {
  transform-box: view-box;
  transform-origin: 60px 72px;
  animation: em-jolt .5s ease-out infinite;
}

@keyframes em-jolt {
  0% { transform: scale(1.03); }
  40%, 100% { transform: scale(1); }
}

/* Sudden Death: the eyes beat with the backdrop's heart. */
.em-eye {
  fill: #ff4d5e;
  transform-box: fill-box;
  transform-origin: center;
  animation: em-beat 1.5s ease-out infinite;
}

@keyframes em-beat {
  0%, 60%, 100% { opacity: .55; transform: scale(.8); }
  10% { opacity: 1; transform: scale(1.15); }
  22% { opacity: .7; transform: scale(.9); }
  32% { opacity: 1; transform: scale(1.08); }
}

/* Review: the arrows turn round the card, and the tick draws itself again. */
.em-arrows {
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: em-spin 14s linear infinite;
}

.em-check {
  stroke-dasharray: 40;
  animation: em-draw 4s ease-out infinite;
}

@keyframes em-draw {
  0% { stroke-dashoffset: 40; }
  25%, 100% { stroke-dashoffset: 0; }
}

.modeCard__name {
  font: 700 clamp(34px, 10vw, 44px)/1.05 var(--font-display);
  text-shadow:
    0 3px 0 rgba(0, 0, 0, .28),
    0 0 18px rgba(0, 0, 0, .15);
}

.modeCard__desc {
  font: 600 16px/1.35 var(--font-he);
  color: rgba(255, 255, 255, .92);
  text-wrap: balance;
}

.modeCard__meta {
  min-height: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(10, 10, 40, .28);
  font: 700 13px/1.4 var(--font-ui);
  color: #fff;
}

.modeCard__meta:empty { visibility: hidden; }

.modeCard__play {
  margin-top: 8px;
  padding: 11px 34px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff3a6 0%, #ffc93c 55%, #f5a20f 100%);
  color: #5a3300;
  font: 700 21px/1 var(--font-display);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 5px 0 #b86f00, 0 10px 16px -6px rgba(0, 0, 0, .4);
  transition: transform .09s ease-out, box-shadow .09s ease-out;
}

.modeCard.is-current:active .modeCard__play {
  transform: translateY(4px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #b86f00;
}

.modeCard:not(.is-current) .modeCard__play,
.modeCard:not(.is-current) .modeCard__meta { visibility: hidden; }

.modeCard.is-disabled { filter: saturate(.35) brightness(.85); }
.modeCard.is-disabled .modeCard__play { background: rgba(255, 255, 255, .3); color: #fff; box-shadow: none; }

.modes__arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: var(--mode-tint);
  color: #fff;
  cursor: pointer;
}

.modes__arrow svg { width: 22px; height: 22px; stroke-width: 2.6; }
.modes__arrow--right { right: 6px; }
.modes__arrow--left { left: 6px; }
.modes__arrow:active { transform: scale(.92); }

/* A finger swipes; the arrows are for a mouse. */
@media (hover: none) and (pointer: coarse) {
  .modes__arrow { display: none; }
}

.modeDots {
  direction: ltr;
  display: flex;
  flex-direction: row-reverse;   /* the first mode on the right, like the page */
  justify-content: center;
  gap: 8px;
}

.modeDots__dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: width .3s var(--ease-snap), background .2s ease;
}

.modeDots__dot[aria-current="true"] { width: 28px; background: #fff; }

/* A generous touch target around a small dot. */
.modeDots__dot { position: relative; }
.modeDots__dot::after { content: ''; position: absolute; inset: -12px -3px; }

.screen--home .notice {
  border-radius: 14px;
  border: 0;
  background: rgba(20, 16, 60, .82);
  color: #fff;
}

/* ---------- My cards button ---------- */

.homeFoot { display: grid; }

.cardsBtn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #e9e6ff 100%);
  color: var(--outline);
  cursor: pointer;
  font: inherit;
  --cards-edge: color-mix(in srgb, #9d96e0 72%, var(--mode-tint));
  box-shadow: inset 0 2px 0 #fff, 0 6px 0 var(--cards-edge), 0 14px 22px -8px rgba(0, 0, 0, .45);
  touch-action: manipulation;
  transition: transform .09s ease-out, box-shadow .09s ease-out;
}

.cardsBtn:active {
  transform: translateY(5px);
  box-shadow: inset 0 2px 0 #fff, 0 1px 0 var(--cards-edge);
}

.cardsBtn__stack {
  position: relative;
  width: 34px; height: 36px;
  flex: none;
}

.cardsBtn__stack i {
  position: absolute;
  inset: 2px 6px;
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}

.cardsBtn__stack i:nth-child(1) { background: var(--band-easy); transform: rotate(-16deg) translateX(-4px); }
.cardsBtn__stack i:nth-child(2) { background: var(--band-hard); transform: rotate(-2deg); }
.cardsBtn__stack i:nth-child(3) { background: var(--band-veryHard); transform: rotate(13deg) translateX(4px); }

.cardsBtn__label {
  flex: 1;
  text-align: start;
  font: 700 21px/1.1 var(--font-display);
}

.cardsBtn__count {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--outline);
  color: #fff;
  font: 800 13px/1.2 var(--font-ui);
  direction: ltr;
}

.cardsBtn__count:empty { display: none; }

/* ---------- The setup sheet ---------- */

.sheet {
  place-content: end stretch;
  padding: 0;
}

.sheet__panel {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  gap: 14px;
  padding: 22px 18px max(18px, env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0;
  text-align: start;
  animation: sheet-in .34s var(--ease-out) both;
}

@keyframes sheet-in {
  from { transform: translateY(40px); opacity: 0; }
}

.sheet .modal__title { text-align: center; font-size: 30px; }

.sheet__meta {
  margin-top: -8px;
  text-align: center;
  font: 700 14px/1.4 var(--font-ui);
  color: var(--text-2);
}

.sheet__meta:empty { display: none; }

.sheet__group { display: grid; gap: 8px; }

.sheet__label { font: 600 17px/1.2 var(--font-display); color: #fff; }

.choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.choice--wrap { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }

.choice__opt {
  position: relative;
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  cursor: pointer;
  font: 700 16px/1.2 var(--font-he);
  text-align: center;
  touch-action: manipulation;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.choice__opt small {
  font: 600 12px/1.25 var(--font-he);
  color: var(--text-2);
}

.choice__opt:active { transform: scale(.97); }

.choice__opt[aria-checked="true"] {
  border-color: #fff;
  background: #fff;
  color: var(--outline);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}

.choice__opt[aria-checked="true"] small { color: var(--ink-faint); }

/* Difficulty options carry their band's colour as a stripe on top. */
.choice__opt[data-band]:not([data-band="any"]) {
  border-top: 5px solid var(--band);
}

.choice__opt.is-locked { opacity: .6; }
.choice__opt.is-locked small::before { content: '🔒 '; }
.choice__opt:disabled { opacity: .4; cursor: default; }

.sheet__note {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 211, 90, .12);
  border: 1px solid rgba(255, 211, 90, .35);
  color: #ffe08a;
  font: 600 14px/1.45 var(--font-he);
}

.sheet__meter {
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  overflow: hidden;
}

.sheet__meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe07a, #f08c14);
  transition: width .6s var(--ease-out);
}

.sheet__buy { display: grid; gap: 10px; margin-top: 12px; }
.sheet__buy .btn { color: #fff; }

.sheet__actions { display: grid; gap: 12px; margin-top: 4px; }

.sheet__action { display: grid; gap: 2px; justify-items: center; }
.sheet__action small { font: 600 12.5px/1.2 var(--font-he); opacity: .85; text-shadow: none; }

.btn--quiet {
  padding: 10px 20px;
  border: 2px dashed rgba(255, 255, 255, .35);
  border-radius: 18px;
  background: transparent;
  color: #fff;
  font: 600 17px/1.2 var(--font-display);
  cursor: pointer;
}

.btn:disabled { opacity: .45; cursor: default; }

/* ============================================================ SUB PAGES == */

.screen--profile,
.screen--cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.subBar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subBar__title { font: 600 24px/1.1 var(--font-display); }

.subBar__meta {
  margin-inline-start: auto;
  font: 800 14px/1 var(--font-ui);
  color: var(--text-2);
  direction: ltr;
}

/* ============================================================= PROFILE == */

.profile__scroll {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  padding-bottom: 12px;
}

.profile__hero { display: grid; justify-items: center; gap: 6px; padding-top: 6px; }

.profile__avatar {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.profile__edit {
  position: absolute;
  bottom: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd35a, #f5a623);
  box-shadow: 0 3px 0 #b86f00;
}

.profile__edit svg {
  width: 18px; height: 18px;
  fill: none; stroke: #4a2a00; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.profile__name { font: 600 28px/1.1 var(--font-display); }

.profile__role {
  padding: 3px 10px;
  border-radius: 999px;
  background: #ffd35a;
  color: #4a2a00;
  font: 800 12px/1.3 var(--font-ui);
}

.profile__guest { max-width: 30ch; text-align: center; color: var(--text-2); }

.profile__block {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
}

/* Progress runs the way the page reads: from the current level on the right
   towards the next one on the left. */
.profile__block .player__fill { inset: 0 0 0 auto; }

.profile__block .coinPill { justify-self: center; }

.coinPill--coins { cursor: default; }
.coinPill--coins:active { transform: none; }

.player__xp {
  margin: -6px 0 0;
  text-align: center;
  font: 700 13px/1.2 var(--font-ui);
  color: var(--text-2);
  direction: ltr;
}

.coinPill__label { font: 700 13px/1 var(--font-he); opacity: .85; }

.profile__blockHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile__blockHead h4 { font: 600 20px/1.1 var(--font-display); }

.linkBtn {
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #ffe08a;
  font: 700 14px/1.2 var(--font-he);
  cursor: pointer;
}

.statGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.statGrid__cell {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 0 rgba(0, 0, 0, .25);
}

.statGrid dt { font: 600 13px/1.3 var(--font-he); color: var(--text-2); }
.statGrid dd { font: 700 28px/1.1 var(--font-display); color: #ffd35a; }

.bandChips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bandChip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--band);
  color: #fff;
  cursor: pointer;
  font: 700 16px/1.2 var(--font-he);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 color-mix(in srgb, var(--band) 55%, #000);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.bandChip b { font: 800 14px/1 var(--font-ui); direction: ltr; }
.bandChip:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }

/* ---------- Avatar editor ---------- */

.avatarEditor {
  width: min(92vw, 400px);
  max-height: 92dvh;
  overflow-y: auto;
}

.avatarEditor__preview { justify-self: center; }

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .25);
}

.tabs__tab {
  padding: 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font: 700 15px/1.2 var(--font-he);
  cursor: pointer;
}

.tabs__tab[aria-selected="true"] { background: #fff; color: var(--outline); }

.avatarEditor__body { display: grid; gap: 10px; }

.parts { display: grid; gap: 10px; text-align: start; }

.parts__row { display: grid; gap: 4px; }

.parts__label { font: 600 14px/1.2 var(--font-he); color: var(--text-2); }

.parts__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 2px 2px;
}

.parts__opt {
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}

.parts__opt svg { display: block; width: 100%; height: 100%; }
.parts__opt[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 3px #ffc93c; }

/* ============================================================== CARDS == */

.bandTabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}

.bandTabs::-webkit-scrollbar { display: none; }

.bandTab {
  --band: #ffffff;
  flex: none;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 7px 14px;
  border: 2px solid color-mix(in srgb, var(--band) 70%, transparent);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  font: 700 15px/1.2 var(--font-he);
}

.bandTab small { font: 800 11px/1.2 var(--font-ui); opacity: .8; direction: ltr; }

.bandTab[aria-selected="true"] {
  background: var(--band);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--band) 55%, #000);
}

.bandTab[data-band="all"][aria-selected="true"] { color: var(--outline); text-shadow: none; }

.cards__note {
  margin-top: -4px;
  font: 600 13px/1.45 var(--font-he);
  color: var(--text-2);
}

.cards__scroll {
  flex: 1;
  overflow-y: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 24px;
}

.cardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
}

@media (min-width: 440px) {
  .cardGrid { grid-template-columns: repeat(4, 1fr); }
}

.wcard {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  contain: layout paint;
}

/* Silhouette: the shape of a card, the colour of its band, nothing on it. */
.wcard--locked {
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--band) 85%, #151235) 0%, color-mix(in srgb, var(--band) 55%, #0c0a24) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 3px 0 color-mix(in srgb, var(--band) 40%, #000);
}

.wcard--locked::before {
  content: '';
  position: absolute;
  inset: 12% 14%;
  border-radius: 10px;
  background: rgba(10, 8, 40, .45);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45);
}

.wcard__glyph {
  position: relative;
  font: 700 30px/1 var(--font-display);
  color: color-mix(in srgb, var(--band) 60%, #fff);
  opacity: .7;
}

/* In progress: the band's colour, a face of blurred noise, and the count. */
.wcard--progress {
  background: linear-gradient(160deg, var(--band) 0%, color-mix(in srgb, var(--band) 60%, #000) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3);
}

.wcard__face {
  position: absolute;
  inset: 8px 8px 26px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.wcard--progress .wcard__word,
.wcard--progress .wcard__meaning {
  filter: blur(var(--blur, 8px));
  user-select: none;
  pointer-events: none;
}

.wcard__word {
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  text-align: center;
  font: 600 15px/1.1 var(--font-display);
  color: var(--ink);
}

.wcard__meaning {
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  font: 600 13px/1.25 var(--font-he);
  color: var(--ink-soft);
}

.wcard__count {
  position: absolute;
  inset-inline: 0;
  bottom: 9px;
  text-align: center;
  font: 800 12px/1 var(--font-ui);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  direction: ltr;
}

.wcard__bar {
  position: absolute;
  inset-inline: 8px;
  bottom: 4px;
  height: 3px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .25);
  overflow: hidden;
}

.wcard__bar span {
  display: block;
  height: 100%;
  background: #fff;
}

/* Open: the whole card, framed in its band. */
.wcard--open {
  background: var(--band);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--band) 55%, #000);
}

.wcard__open {
  position: absolute;
  inset: 5px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background:
    radial-gradient(120% 70% at 30% 0%, #ffffff 0%, transparent 60%),
    linear-gradient(170deg, #ffffff 0%, #eef1f7 100%);
  cursor: pointer;
  font: inherit;
}

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

.cards__more { height: 1px; }
.cards__more.is-loading { height: 40px; background: radial-gradient(circle, rgba(255, 255, 255, .5) 3px, transparent 4px) center / 18px 18px repeat-x; opacity: .6; }

.cards__empty {
  padding: 40px 10px;
  text-align: center;
  color: var(--text-2);
  font: 600 16px/1.5 var(--font-he);
}

/* ---------- The open card, large ---------- */

.bigCard {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(86vw, 340px);
  padding: 22px 20px 20px;
  border: 8px solid var(--band);
  border-radius: 30px;
  background:
    radial-gradient(120% 70% at 30% 0%, #ffffff 0%, transparent 60%),
    linear-gradient(170deg, #ffffff 0%, #eef1f7 100%);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 10px 0 color-mix(in srgb, var(--band) 55%, #000), 0 30px 50px -14px rgba(0, 0, 0, .7);
  animation: card-pop .45s var(--ease-snap) both;
}

.bigCard__band {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--band);
  color: #fff;
  font: 800 13px/1.2 var(--font-he);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.bigCard__word { font: 600 clamp(36px, 11vw, 48px)/1.05 var(--font-display); overflow-wrap: anywhere; }
.bigCard__pos { font: 600 14px/1.3 var(--font-he); color: var(--ink-faint); }
.bigCard__pos:empty { display: none; }
.bigCard__meaning { font: 600 26px/1.25 var(--font-he); color: var(--ink); }
.bigCard__meaning[dir="ltr"] { font: 700 16px/1.45 var(--font-ui); color: var(--ink-soft); }

.bigCard__bonus {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1.5px dashed #c9c4ec;
  border-radius: 12px;
  font: 600 12.5px/1.35 var(--font-he);
  color: var(--ink-faint);
}

.bigCard__bonus svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
}

.bigCard__actions { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
.bigCard__actions .btn--primary { flex: 1; }
.bigCard__actions .btn--speak svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* ======================================================== GAME SCREENS ==
   The solo game and the duel, dressed like the home screen: the mode's
   backdrop (lent by home.js, dimmed round the card), round glass buttons, the
   mode's name and symbol at the top, readouts in its colours, and a card
   framed in its light. The answer buttons keep their own colours. */

.screen--game,
.screen--duel {
  isolation: isolate;
  overflow: hidden;
  background-color: #26206e;
}

/* A pool of shade behind the card, so the scenery never competes with it. */
.screen--game .homeBg::before,
.screen--duel .homeBg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 62% 42% at 50% 50%, rgba(8, 6, 30, .38) 0%, transparent 80%),
    linear-gradient(180deg, rgba(8, 6, 30, .18), transparent 25% 75%, rgba(8, 6, 30, .3));
}

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

.screen--game .topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'back tag sound' 'hud hud hud';
  align-items: center;
  gap: 10px 8px;
}

.screen--game #quitBtn { grid-area: back; }
.screen--game #soundBtn { grid-area: sound; }
.screen--game .modeTag { grid-area: tag; justify-self: center; }
.screen--game .hud { grid-area: hud; }

.screen--game .topbar .iconBtn,
.duelBar .iconBtn {
  width: 48px; height: 48px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: var(--mode-tint);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 12px -4px rgba(0, 0, 0, .45);
}

.screen--game .topbar .iconBtn svg,
.duelBar .iconBtn svg { width: 24px; height: 24px; stroke-width: 2.2; }

.screen--game .topbar .iconBtn::after,
.duelBar .iconBtn::after { inset: -2px; }

/* The mode, as its carousel card names it. */
.screen--game .modeTag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 6px 4px 18px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .3) 0%, transparent 60%),
    linear-gradient(165deg, var(--mode-a), var(--mode-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--mode-edge), 0 0 26px -6px var(--mode-glow);
}

.modeTag__emblem { flex: none; width: 38px; height: 38px; }

.modeTag__emblem svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 0 var(--mode-edge));
}

.modeTag__name {
  overflow: hidden;
  font: 600 20px/1.2 var(--font-display);
  color: #fff;
  text-shadow: 0 2px 0 var(--mode-edge);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Readouts ---------- */

.screen--game .hud,
.screen--game .hud:has(#statProgress:not([hidden])) {
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.screen--game .stat,
.screen--game #statProgress,
.screen--game .lives {
  padding: 7px 14px;
  border: 1.5px solid color-mix(in srgb, var(--mode-a) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mode-edge) 55%, rgba(0, 0, 0, .35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 rgba(0, 0, 0, .25);
}

.screen--game .hud #statProgress#statProgress { margin-inline: 0; }
.screen--game #statProgress .stat__value { font-size: 18px; font-weight: 600; color: #fff; }

.screen--game .stat__label { color: color-mix(in srgb, var(--mode-a) 45%, #fff); }

.screen--game .lives { align-items: center; gap: 6px; padding-block: 9px; }
.screen--game .lives[hidden] { display: none; }

.screen--game .combo {
  height: 5px;
  background: rgba(0, 0, 0, .3);
}

.screen--game .combo__fill { background: linear-gradient(90deg, var(--mode-a), #ffd35a); }

/* ---------- Clocks ---------- */

.screen--game .clock__track,
.duelClock__track {
  border: 3px solid color-mix(in srgb, var(--mode-edge) 80%, #000);
  background: rgba(0, 0, 0, .4);
}

.screen--game .clock:not(.is-low) .clock__fill,
.screen--duel .duelClock:not(.is-low) .duelClock__fill {
  background: linear-gradient(90deg, var(--mode-b), var(--mode-a));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 14px var(--mode-glow);
}

.duelClock__track {
  height: 16px;
  border-radius: 999px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4);
}

.screen--game .clock__value,
.duelClock__value { color: #fff; text-shadow: 0 2px 0 var(--mode-edge); }

/* ---------- Duel panels ---------- */

.screen--duel .versus {
  border: 1.5px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  background: var(--mode-tint);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 0 rgba(0, 0, 0, .25);
}

.screen--duel .versus__track { height: 10px; background: rgba(0, 0, 0, .35); }

/* ---------- The card, framed in the mode's light ---------- */

.screen--game .card__face--front,
.screen--duel .card__face--front {
  border-color: color-mix(in srgb, var(--mode-a) 40%, #fff);
  box-shadow:
    0 0 0 2px var(--mode-b),
    inset 0 0 0 2px rgba(255, 255, 255, .9),
    0 12px 0 var(--mode-edge),
    0 26px 40px -12px rgba(0, 0, 0, .65),
    0 0 60px -6px var(--mode-glow);
}

/* ---------- Answer buttons: same colours, the target one swells ---------- */

.btn--gate { transition: transform .09s ease-out, box-shadow .09s ease-out, filter .15s ease, scale .12s ease-out; }
.btn--no { scale: calc(1 + clamp(0, var(--swipe, 0) * -1, 1) * .1); }
.btn--yes { scale: calc(1 + clamp(0, var(--swipe, 0), 1) * .1); }

/* ---------- The parrot ---------- */

.arena__mascot {
  display: block;
  transform: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4));
}

/* It stays in view while a card is dragged — it is reacting to the choice. */
.arena:has(.card.is-dragging) .arena__mascot { opacity: 1; }

.summary__mascot { display: block; }

.card__mascot {
  width: 74px;
  height: auto;
  background: none;
  transform: none;
}

/* ================================================================ GEMS ==
   The premium currency: a cut stone, cyan-to-violet, wherever it appears. */

.gemIcon {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.18em;
  overflow: visible;
}

.gemIcon__body {
  fill: #6fe3ff;
  stroke: #1d3f9e;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.gemIcon__facets {
  fill: none;
  stroke: #1d3f9e;
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: .55;
}

/* Beside settings, top right: the balance and a "+" that says it opens a shop. */
.homeBar__gems {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: none;
  padding: 5px 5px 5px 10px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: var(--mode-tint);
  color: #fff;
  font: 600 17px/1 var(--font-display);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 12px -4px rgba(0, 0, 0, .45);
  transition: transform .15s var(--ease-snap);
}

.homeBar__gems:active { transform: scale(.94); }
.homeBar__gems .gemIcon { width: 22px; height: 22px; }
.homeBar__settings { order: 2; }
.homeBar__profile { flex: 0 1 auto; max-width: none; padding-right: 12px; }
.homeBar:has(.homeBar__gems:not([hidden])) { gap: 8px; }

.homeBar__plus {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #7ef0a0, #22b35e);
  box-shadow: 0 2px 0 #137a3c;
  font: 700 16px/1 var(--font-ui);
}

.coinPill__coin--gem { background: radial-gradient(circle at 35% 30%, #e6fbff, #8fd8ff 60%, #5b6cf0); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 2px 0 #3040a8; }
.coinPill__coin--gem .gemIcon { width: 19px; height: 19px; }

/* A purchase in gems. */
.btn--gem {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  color: #fff;
  background: linear-gradient(180deg, #7fd6ff 0%, #5a7cff 55%, #6a3ff0 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), 0 6px 0 #33229a, 0 14px 20px -8px rgba(0, 0, 0, .5);
}

.btn--gem .gemIcon { grid-row: span 2; width: 30px; height: 30px; }
.btn--gem:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 1px 0 #33229a; }

/* ================================================================ SHOP == */

.screen--shop {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #2b2a8f 0%, #26206e 55%, #1a1552 100%);
}

.shop__scroll {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 12px;
}

.wallet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wallet__item {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px;
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  font: 600 13px/1.2 var(--font-he);
  color: var(--text-2);
}

.wallet__item b { font: 700 28px/1.1 var(--font-display); color: #fff; }
.wallet__item .gemIcon { width: 30px; height: 30px; }
.wallet__item--gems { border-color: rgba(111, 227, 255, .45); background: rgba(111, 227, 255, .1); }

.shop__lead,
.shop__soon {
  margin: 0;
  text-align: center;
  font: 600 14px/1.45 var(--font-he);
  color: var(--text-2);
}

.shop__soon {
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 211, 90, .12);
  border: 1px solid rgba(255, 211, 90, .35);
  color: #ffe08a;
}

.packs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pack {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 10px 12px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 24px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .25) 0%, transparent 60%),
    linear-gradient(165deg, #4f7cff 0%, #5a2fd6 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 8px 0 #2c1a8a, 0 18px 28px -12px rgba(0, 0, 0, .6);
}

/* The best value says so. */
.pack[data-size="3"]::before {
  content: 'הכי משתלם';
  position: absolute;
  top: -11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe07a, #f0a014);
  color: #5a3000;
  font: 800 12px/1.2 var(--font-he);
}

.pack__art {
  display: flex;
  justify-content: center;
  height: 44px;
  align-items: flex-end;
}

.pack__art .gemIcon {
  width: 34px;
  height: 34px;
  margin-inline: -7px;
  filter: drop-shadow(0 3px 0 rgba(20, 10, 80, .45));
}

.pack__art .gemIcon:nth-child(even) { width: 26px; height: 26px; }

.pack__gems { font: 700 30px/1 var(--font-display); color: #fff; text-shadow: 0 2px 0 #2c1a8a; }
.pack__label { font: 600 13px/1 var(--font-he); color: rgba(255, 255, 255, .85); }
.pack__buy { width: 100%; margin-top: 6px; padding: 10px 8px; font-size: 20px; }

.shop__usesTitle { margin: 0; font: 600 18px/1.2 var(--font-display); }

.shop__uses {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop__uses li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: 600 14px/1.35 var(--font-he);
  color: var(--text-1, #fff);
}

.shop__uses b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font: 700 14px/1 var(--font-ui);
  color: #9fe8ff;
}

/* ------------------------------------------------ the card's bonus side -- */

button.bigCard__bonus {
  width: 100%;
  justify-content: center;
  background: linear-gradient(180deg, #f2f8ff, #e2ecff);
  border-color: #8fb2ff;
  color: #2a3f9e;
  font: 700 13px/1.35 var(--font-he);
  cursor: pointer;
}

button.bigCard__bonus .gemIcon { width: 20px; height: 20px; }
button.bigCard__bonus:disabled { opacity: .6; cursor: default; }
.bigCard__bonus[hidden] { display: none; }

.bigCard__extra {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(79, 124, 255, .08);
  text-align: left;
}

.bigCard__label {
  font: 800 12px/1.2 var(--font-he);
  color: var(--ink-faint);
  text-align: right;
}

.bigCard__label:not(:first-child) { margin-top: 6px; }
.bigCard__definition,
.bigCard__example { font: 600 15px/1.45 var(--font-ui); color: var(--ink-soft); }
.bigCard__example { font-style: italic; }
.bigCard__label[hidden],
.bigCard__example[hidden] { display: none; }

/* ================================================================ MISC == */

.auth__head .logo { font-size: clamp(40px, 12.5vw, 54px); }

.summary__reviewItem b { unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  .modeCard__emblem svg,
  .modeCard__emblem svg * { animation: none; }
  .modeCard { transition: none; }
  .homeBg.is-shaking,
  .homeBg__layer::before,
  .homeBg__layer::after,
  .homeArt,
  .homeArt * { animation: none; }
  .homeArt--spark,
  .homeArt--petal,
  .homeArt--tick,
  .homeArt__drop { display: none; }
}

/* ---------- Time Attack: bonus time ----------
   Above 60 seconds the main bar stays full and a bar of fire over it burns
   down the bonus (up to 30 more). A miss while it burns puts it out and the
   clock drops back to 60 — .is-doused plays that. */

.clock__bars {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Floats over the main bar instead of taking a row of its own: a row that
   opened and closed with the bonus pushed the whole card down and up again —
   the screen seemed to shake. */
.clock__bonus {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 9px);
  height: 10px;
  opacity: 0;
  border-radius: 999px;
  background: rgba(60, 10, 0, .55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.clock.is-bonus .clock__bonus {
  opacity: 1;
  transform: none;
}

.clock__bonusFill {
  position: absolute;
  inset: 0;
  right: auto;
  width: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, transparent 45%),
    linear-gradient(90deg, #c4160f, #ff4d1a 30%, #ff9a1f 60%, #ffd84a 85%, #fff5c2);
  background-size: 100% 100%, 200% 100%;
  box-shadow: 0 0 10px #ff6a1a, 0 0 22px rgba(255, 120, 30, .65);
  animation: fire-flow .9s linear infinite, fire-flicker .35s steps(2) infinite;
}

/* Little tongues of flame licking up off the bar. */
.clock__bonusFill::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 55%;
  height: 15px;
  /* Tiled, so the flames keep their shape however short the bar gets. */
  background:
    radial-gradient(5px 13px at 25% 100%, #ffe066 0 55%, transparent 60%),
    radial-gradient(7px 15px at 50% 100%, #ff8a1f 0 55%, transparent 60%),
    radial-gradient(4px 10px at 78% 100%, #ffc43a 0 55%, transparent 60%);
  background-size: 18px 100%;
  background-repeat: repeat-x;
  filter: blur(.5px) drop-shadow(0 0 3px #ff6a1a);
  transform-origin: bottom;
  animation: fire-lick .5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes fire-flow { to { background-position: 0 0, -200% 0; } }
@keyframes fire-flicker { 50% { filter: brightness(1.18) saturate(1.2); } }
@keyframes fire-lick {
  from { transform: scaleY(.7) translateX(-1px); opacity: .8; }
  to { transform: scaleY(1.15) translateX(1px); opacity: 1; }
}

/* The number burns too while there is bonus on it. */
.screen--game .clock.is-bonus .clock__value {
  color: #ffe27a;
  text-shadow: 0 0 8px #ff6a1a, 0 2px 0 #8a1c00;
}

/* Put out: a puff of smoke over the bar and a jolt. */
.clock.is-doused .clock__bars { animation: douse-jolt .45s ease-out; }
.clock.is-doused .clock__track::after {
  content: '';
  position: absolute;
  inset: -6px -4px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(220, 225, 240, .75), transparent);
  animation: douse-smoke .8s ease-out forwards;
  pointer-events: none;
}

.clock__track { position: relative; }

@keyframes douse-jolt {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
}

@keyframes douse-smoke {
  from { opacity: 1; transform: scale(.9); }
  to { opacity: 0; transform: scale(1.3) translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .clock__bonusFill,
  .clock__bonusFill::before,
  .clock.is-doused .clock__bars,
  .clock.is-doused .clock__track::after { animation: none; }
}