/* ---------------------------------------------------------------
   Gem Cascade - game-specific styles.

   Loaded after /assets/base.css, which supplies the design tokens,
   the top bar, the buttons, the footer, the modals, the cookie
   banner and the legal-page layout shared by every Lynxy game.
   Only the field, its heads-up display, the screens and the controls
   live here. The board itself is drawn on a canvas by game.js.
---------------------------------------------------------------- */

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

:root {
  --gem-1: #ff3355;
  --gem-2: #b44dff;
  --gem-3: #2f7bff;
  --stage-edge: #cfc8f5;
  --stage-bg:
    radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(255, 120, 190, .35), transparent 65%),
    linear-gradient(165deg, #5b4ee0 0%, #7a4fd8 48%, #a64fbf 100%);
  --glass: rgba(255, 255, 255, .14);
  --glass-edge: rgba(255, 255, 255, .24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stage-edge: #2c2656;
    --stage-bg:
      radial-gradient(120% 60% at 15% 0%, rgba(120, 110, 255, .22), transparent 60%),
      radial-gradient(90% 60% at 100% 100%, rgba(200, 60, 160, .25), transparent 65%),
      linear-gradient(165deg, #17143d 0%, #231a55 50%, #34184e 100%);
    --glass: rgba(255, 255, 255, .08);
    --glass-edge: rgba(255, 255, 255, .14);
  }
}

:root[data-theme="dark"] {
  --stage-edge: #2c2656;
  --stage-bg:
    radial-gradient(120% 60% at 15% 0%, rgba(120, 110, 255, .22), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(200, 60, 160, .25), transparent 65%),
    linear-gradient(165deg, #17143d 0%, #231a55 50%, #34184e 100%);
  --glass: rgba(255, 255, 255, .08);
  --glass-edge: rgba(255, 255, 255, .14);
}

/* --------------------------- header extras ----------------------------- */

.stats {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
  text-align: center;
  min-width: 58px;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.stat__value {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
}

.brand__mark--gem {
  background: linear-gradient(135deg, var(--gem-1), var(--gem-2) 55%, var(--gem-3));
}

.brand__mark--gem svg { width: 20px; height: 20px; }

@media (max-width: 520px) {
  .stats { gap: 6px; }
  .stat { min-width: 48px; padding: 4px 6px; }
  .stat__value { font-size: 15px; }
  .stat__label { font-size: 9px; letter-spacing: .04em; }
  .brand__name { display: none; }
}

/* -------------------------------- page --------------------------------- */

.page {
  flex: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stage-wrap {
  display: flex;
  justify-content: center;
}

.stage {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--stage-edge);
  box-shadow: var(--shadow);
  background: var(--stage-bg);
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Replaced by game.js with the size that fits the screen. */
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
}

#board {
  display: block;
  width: 100%;
  /* Every drag is a swap, so the board must never scroll or zoom the page. */
  touch-action: none;
  cursor: pointer;
}

/* ------------------------------- the HUD -------------------------------- */

.hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 8px;
  padding: 10px 10px 0;
}

.hud__box {
  min-width: 58px;
  padding: 5px 8px 4px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hud__num {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-shadow: 0 2px 8px rgba(20, 0, 60, .35);
}

.hud__label {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  opacity: .8;
}

.hud__moves.is-bump { animation: bump .35s ease; }

@keyframes bump {
  40% { transform: scale(1.12); }
}

.hud__goals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  min-width: 0;
}

.goal {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.goal img {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}

.goal.is-done b { display: none; }

.goal.is-done::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2fd47f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.3 2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 2px 6px rgba(0, 80, 40, .4);
}

.goal.is-tick { animation: bump .3s ease; }

.goal--score { font-size: 13px; }
.goal--score img { width: 22px; height: 22px; }

/* the stars the level would give now, the moves left before the next
   star is lost, and the score */

.meter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 0;
}

.meter__stars {
  display: flex;
  gap: 1px;
}

.meter__note {
  font-size: 11px;
  font-weight: 700;
  opacity: .85;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.meter__track {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgba(10, 0, 40, .3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}

.meter__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd166, #ff8a5c 60%, #ff4f9a);
  box-shadow: 0 0 10px rgba(255, 180, 90, .6);
  transition: width .35s ease;
}

/* two stars left: the bar turns orange; one: it is empty */
.meter__fill--2 {
  background: linear-gradient(90deg, #ffb347, #ff7a45);
  box-shadow: 0 0 10px rgba(255, 140, 60, .5);
}

.meter__star {
  display: block;
  width: 18px;
  height: 18px;
  background: rgba(20, 0, 50, .55);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
  transition: background .2s;
}

.meter__star.is-lit { background: #ffd84a; }

.meter__score {
  min-width: 52px;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

:root {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.4 7 .9-5.1 4.9 1.3 7-6.3-3.4L5.7 21l1.3-7L1.9 9.1l7-.9z'/%3E%3C/svg%3E");
}

/* the boosters under the board */

.boosters {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 2px 10px 12px;
}

.booster {
  position: relative;
  flex: 1;
  max-width: 108px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .12s, background .2s, box-shadow .2s;
}

.booster svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.booster:active { transform: scale(.95); }
.booster[disabled] { opacity: .45; cursor: default; }

.booster.is-armed {
  background: linear-gradient(135deg, #ffd166, #ff8a5c);
  border-color: #fff3c4;
  color: #3b1300;
  box-shadow: 0 0 0 3px rgba(255, 220, 120, .35), 0 6px 18px rgba(255, 140, 60, .45);
}

.booster__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ff3d7f;
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(120, 0, 40, .4);
}

/* None left: the badge offers one more for an ad. */
.booster.is-empty { opacity: .8; }
.booster.is-empty .booster__count { background: #22b573; font-size: 14px; font-weight: 800; }

@media (max-width: 360px) {
  .booster__name { display: none; }
}

/* --------------------------- screens on the field ---------------------- */

.cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow-y: auto;
  background: rgba(14, 8, 40, .5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fade .2s ease;
  z-index: 3;
  color: var(--text);
}

.cover[hidden] { display: none; }

.cover__card {
  width: 100%;
  max-width: 330px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px 18px 16px;
  text-align: center;
  animation: rise .25s cubic-bezier(.2, .8, .3, 1);
}

.cover__card[hidden] { display: none; }
.cover__card--wide { max-width: 380px; padding: 16px 14px 14px; }

.cover__title {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(90deg, #ff3d7f, #a64fff 55%, #3b82ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cover__title--sm {
  font-size: 21px;
}

.cover__text {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.cover__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cover__actions--row { flex-direction: row; }
.cover__actions--row .btn { flex: 1; }

.cover__home { flex: none !important; width: 48px; padding: 0; }
.cover__home img { width: 26px; height: 26px; display: block; }

.cover__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
}

.cover .btn--primary {
  background: linear-gradient(135deg, #ff3d7f, #a64fff);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(166, 79, 255, .8);
}

/* the gems on the menu */

.cover__logo {
  display: flex;
  justify-content: center;
  gap: 4px;
  height: 52px;
  margin: 0 auto 8px;
}

.cover__logo img {
  width: 44px;
  height: 44px;
  display: block;
  animation: bob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 6px rgba(60, 20, 120, .25));
}

.cover__logo img:nth-child(2) { animation-delay: .12s; }
.cover__logo img:nth-child(3) { animation-delay: .24s; }
.cover__logo img:nth-child(4) { animation-delay: .36s; }
.cover__logo img:nth-child(5) { animation-delay: .48s; }
.cover__logo img:nth-child(6) { animation-delay: .6s; }

@keyframes bob {
  0%, 100% { transform: translateY(4px); }
  50% { transform: translateY(-4px); }
}

/* ------------------------------- dialogs ------------------------------- */

.score-row {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.score-row__item {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 4px;
  display: grid;
  gap: 2px;
}

.score-row__value {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.score-row__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
}

/* On a short screen the menu keeps the gems and the buttons, not the numbers. */
@media (max-height: 640px) {
  .score-row--menu { display: none; }
}

/* goals on the level card and the out-of-moves card */

.goal-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 12px;
}

.goal-card {
  min-width: 70px;
  padding: 8px 8px 6px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  justify-items: center;
  gap: 3px;
}

.goal-card img { width: 36px; height: 36px; display: block; }
.goal-card b { font-size: 16px; font-variant-numeric: tabular-nums; }
.goal-card span { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }

.tip {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  font-size: 13px;
  text-align: left;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.tip[hidden] { display: none; }
.tip::before { content: '💡'; flex: none; }

/* stars on the win card */

.bigstars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin: 2px 0 8px;
}

.bigstar {
  width: 52px;
  height: 52px;
  background: var(--surface-2);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}

.bigstar:nth-child(2) { width: 66px; height: 66px; }

.bigstar.is-lit {
  background: linear-gradient(160deg, #fff3a6, #ffc93c 50%, #ff9a1f);
  animation: starpop .45s cubic-bezier(.2, 1.6, .4, 1) both;
}

@keyframes starpop {
  from { transform: scale(0) rotate(-40deg); }
  to { transform: scale(1) rotate(0); }
}

.reward {
  margin: -4px 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ok);
}

.reward[hidden] { display: none; }

/* the level map, fifty levels at a time */

.worlds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -4px 0 10px;
}

.worlds__btn {
  width: 40px;
  height: 36px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.worlds__btn[disabled] { opacity: .35; cursor: default; }

.worlds__name {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.levels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: min(52vh, 360px);
  overflow-y: auto;
  padding: 4px 2px 6px;
  margin: 0 0 12px;
  overscroll-behavior: contain;
}

.lvl {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 0 10px;
}

.lvl:active { transform: scale(.95); }

.lvl.is-open {
  background: linear-gradient(145deg, #7a5cff, #c04fd8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(122, 92, 255, .9);
}

.lvl.is-current {
  background: linear-gradient(145deg, #ff3d7f, #ff9a3c);
  box-shadow: 0 0 0 3px rgba(255, 90, 130, .3), 0 6px 14px -6px rgba(255, 60, 120, .9);
}

.lvl[disabled] { opacity: .5; cursor: default; padding: 0; }
.lvl[disabled]::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='8' rx='2'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.8'/%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 16 16'%3E%3Crect x='3' y='7' width='10' height='8' rx='2'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lvl[disabled] .lvl__n { display: none; }

.lvl__stars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 1px;
}

.lvl__stars i {
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, .25);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}

.lvl__stars i.is-lit { background: #ffd84a; }

/* ------------------------ extra moves after failing -------------------- */

.continue { margin: 0 0 10px; }
.continue[hidden] { display: none; }

.continue__btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.continue__btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.continue__btn svg path { fill: currentColor; stroke: none; }

.continue__note {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
}

.notice {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--error-soft);
  border: 1px solid var(--border);
  font-size: 13px;
  text-align: left;
  display: grid;
  gap: 8px;
}

.notice[hidden] { display: none; }
.notice p { margin: 0; color: var(--text); }

/* ------------------------------- tool row ------------------------------ */

.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.tool {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  min-width: 104px;
  white-space: nowrap;
}

.tool:active { transform: scale(.97); }
.tool[disabled] { opacity: .45; cursor: default; }
.tool .icon { width: 18px; height: 18px; }

.icon--play { display: none; }
.is-paused .icon--pause { display: none; }
.is-paused .icon--play { display: block; }

.icon__mute { display: none; }
.is-off .icon__waves { display: none; }
.is-off .icon__mute { display: block; }

.keys-hint {
  display: none;
  margin: 0;
  gap: 4px 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: var(--text-dim);
}

kbd {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  background: var(--surface);
  color: var(--text);
  display: inline-block;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .keys-hint { display: flex; }
}

/* ------------------------ about / SEO copy ----------------------------- */

.about {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 14px;
}

.about h1 {
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 6px;
}

.about h2 {
  font-size: 15px;
  color: var(--text);
  margin: 18px 0 4px;
}

.about p { margin: 0 0 8px; }

.noscript {
  text-align: center;
  padding: 12px 16px;
  margin: 0;
  color: var(--error);
}

/* --------------------------- tables in prose --------------------------- */

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}

.doc th, .doc td {
  border: 1px solid var(--border);
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
}

.doc th { background: var(--surface-2); color: var(--text); font-weight: 600; }
.doc ol { padding-left: 20px; }

/* ------------------------ pictures for the site ------------------------ */

.is-shot body > *:not(main) { display: none !important; }
.is-shot .page { padding: 0; max-width: none; }
.is-shot .tools, .is-shot .about, .is-shot .cover { display: none !important; }
.is-shot .stage { position: fixed; inset: 0; width: 100vw !important; height: 100vh !important; border: 0; border-radius: 0; }
.is-shot-thumb .hud, .is-shot-thumb .meter, .is-shot-thumb .boosters { display: none !important; }