/* Lumenine: sudoku under the fireworks. Night sky, distant bursts, warm glowing digits. */
:root {
  --bg: #0b1026;
  --bg-2: #10163a;
  --panel: #151c42;
  --panel-2: #1c2553;
  --panel-3: #243066;
  --line: #2d3872;
  --text: #eef0ff;
  --muted: #a6aed8;
  --faint: #6f78a8;
  --accent: #ffb547;
  --accent-2: #ff8a3d;
  --accent-ink: #2a1600;
  --good: #6fe3a1;
  --bad: #ff6b6b;
  /* board */
  --cell: #131a3b;
  --peer: #253260;
  --same: #3b2f4f;
  --sel: #334185;
  --given: #e9ecff;
  --user: #ffc561;
  --note: #a3addf;
  --thin: rgba(126, 140, 214, 0.3);
  --box: #7c88cf;
  --frame: #8591d6;
  --h-unit: rgba(255, 181, 71, 0.13);
  --h-pat: #ffd27a;
  --h-foc: #7ad7ff;
  --ghost: #ffd27a;
  --elim: #ff7b7b;
  /* tiers and rarity */
  --t-easy: #6fe3a1;
  --t-medium: #7ad7ff;
  --t-hard: #ffb547;
  --t-expert: #ff7b9c;
  --t-master: #b89cff;
  --r-common: #c9cff5;
  --r-uncommon: #6fe3a1;
  --r-rare: #7ad7ff;
  --r-legendary: #ffd166;
  --radius: 14px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  /* The safe areas (docs/PLATFORMS.md, "Layout"): a notch, rounded corners,
     the home indicator and, in the home-screen app, the status bar. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* The site header: 48 px, and in the home-screen app the status bar over it (site.css). */
  --header-h: calc(48px + var(--safe-top));
  /* The smallest text: 14 px on a desktop, 15 on a tablet, 13 on a phone
     (docs/PLATFORMS.md, "Readable at phone size"). */
  --text-min: 14px;
  /* How far controls keep from the screen's edges, inside the safe areas:
     8 px with a mouse; 16 px on a touch screen, so a thumb on a control never
     starts an edge gesture. A phone's corners keep 24 px clear (Android
     reports no rounded corners). */
  --edge: 8px;
  --corner: 0px;
  color-scheme: dark;
}

/* Tablets, and any screen whose first pointer is a finger. */
@media (pointer: coarse) {
  :root {
    --text-min: 15px;
    --edge: 16px;
  }
}

/* Phones: narrow upright, short held sideways. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 500px) {
  :root {
    --text-min: 13px;
    --corner: 24px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  contain: strict;
}

/* Header before the site shell fills it in (it is 48 px tall either way). */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.site-logo img {
  display: block;
  height: 32px;
  width: auto;
}
.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 0 32px;
}

/* ---------- Game root ---------- */

/* The game fills the screen below the site header, following the browser's
   moving bars (dvh). Nothing in it selects, opens the long-press menu or
   zooms; play doesn't scroll either, and the menus scroll inside themselves
   (docs/PLATFORMS.md, "No scrolling, zooming or text selection during
   play"). main.js stops Safari's pinch (gesturestart) and the context menu. */
.ln {
  position: relative;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 250px;
  max-height: 960px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% -12%, #2b3778 0%, rgba(43, 55, 120, 0) 62%),
    radial-gradient(60% 40% at 85% 110%, rgba(255, 150, 60, 0.12), rgba(255, 150, 60, 0) 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

/* Large monitors get a play screen as large as the window. Menus retain
   their reading width; the square puzzle is measured against its shape. */
@media (min-width: 1600px) {
  .page:has(.ln[data-screen='play']) {
    max-width: none;
  }
  .ln[data-screen='play'] {
    max-height: none;
  }
}

/* Short screens (phones held sideways) and phones up to 700 px tall upright
   (an iPhone 14 in Safari is 664): a puzzle takes the whole height, and
   main.js scrolls the site header out of view while it is open; the menus
   come back below the header. */
@media (max-height: 500px), (orientation: portrait) and (max-height: 700px) {
  .ln[data-screen='play'] {
    height: 100vh;
    height: 100dvh;
  }
}
@media (min-width: 1000px) {
  .ln {
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 18px 18px;
  }
}

/* The night sky: a few stars, and distant fireworks behind the menus */
.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 27% 8%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.2px 1.2px at 43% 22%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 58% 12%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 71% 26%, rgba(255, 240, 200, 0.7), transparent),
    radial-gradient(1px 1px at 86% 9%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 93% 31%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 6% 41%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.3px 1.3px at 34% 47%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 79% 52%, rgba(255, 255, 255, 0.35), transparent);
}
.sky .burst {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  opacity: 0;
  animation: pop var(--d) linear var(--delay) infinite;
}
.sky .burst svg {
  display: block;
}
/* Each burst blooms and fades in the first fifth of its cycle, then waits. */
@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(calc(var(--s) * 0.25));
  }
  1.5% {
    opacity: 0.6;
  }
  9% {
    opacity: 0.42;
    transform: scale(var(--s));
  }
  20%,
  100% {
    opacity: 0;
    transform: scale(calc(var(--s) * 1.06)) translateY(8px);
  }
}
.ln[data-screen='play'] .sky .burst {
  display: none;
}

/* The menus scroll inside themselves, never carrying on to the page, and
   keep their buttons inside the safe areas. */
.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px max(16px, var(--edge) + var(--safe-right)) calc(28px + var(--safe-bottom)) max(16px, var(--edge) + var(--safe-left));
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Buttons and shared bits ---------- */

/* Every button is at least 44 x 44 px, with 8 px between buttons
   (docs/PLATFORMS.md, "Thumb-sized targets"), on every device: a touch
   laptop gets them too. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 650;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  transition:
    background 0.15s ease,
    transform 0.08s ease,
    border-color 0.15s ease;
}
/* Hover looks only where there is hover: a touch screen keeps :hover on what
   was last tapped, until the next tap elsewhere. */
@media (hover: hover) {
  .btn:hover:not(:disabled) {
    background: var(--panel-3);
  }
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.btn.primary {
  border-color: transparent;
  background: linear-gradient(180deg, #ffc861, var(--accent-2));
  color: var(--accent-ink);
  box-shadow: 0 4px 18px rgba(255, 150, 60, 0.28);
}
@media (hover: hover) {
  .btn.primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffd27a, #ff9a52);
  }
}
.btn.link {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .btn.link:hover:not(:disabled) {
    background: none;
    color: #ffd27a;
  }
}
:where(.ln) button:focus-visible,
:where(.ln) summary:focus-visible,
:where(.ln) [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.ico,
.nav-ico {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.meter {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd27a, var(--accent-2));
  transform-origin: left;
  transition: transform 0.6s ease;
}

.tier-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--text-min);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0b1026;
  background: var(--tier, var(--t-medium));
}
.t-easy {
  --tier: var(--t-easy);
}
.t-medium {
  --tier: var(--t-medium);
}
.t-hard {
  --tier: var(--t-hard);
}
.t-expert {
  --tier: var(--t-expert);
}
.t-master {
  --tier: var(--t-master);
}
.tier-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tier, var(--faint));
}

/* Small firework marks drawn in CSS (Journey map, calendar, home): a shell
   not launched yet, the next one (pulsing), or a burst, brighter with more stars. */
.fw-mark {
  --burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.00 7.80L12.00 3.40M14.97 9.03L18.08 5.92M16.20 12.00L20.60 12.00M14.97 14.97L18.08 18.08M12.00 16.20L12.00 20.60M9.03 14.97L5.92 18.08M7.80 12.00L3.40 12.00M9.03 9.03L5.92 5.92' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='12.00' cy='1.40' r='1.35'/%3E%3Ccircle cx='19.50' cy='4.50' r='1.35'/%3E%3Ccircle cx='22.60' cy='12.00' r='1.35'/%3E%3Ccircle cx='19.50' cy='19.50' r='1.35'/%3E%3Ccircle cx='12.00' cy='22.60' r='1.35'/%3E%3Ccircle cx='4.50' cy='19.50' r='1.35'/%3E%3Ccircle cx='1.40' cy='12.00' r='1.35'/%3E%3Ccircle cx='4.50' cy='4.50' r='1.35'/%3E%3Ccircle cx='12.0' cy='12.0' r='2.6'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(var(--mark, 14px) * 1.25);
  height: calc(var(--mark, 14px) * 1.25);
  margin: 2px 0 3px;
}
.fw-mark::before {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: #1d2448;
  box-shadow: inset 0 0 0 1.5px #3a4480;
}
.fw-mark.next::before {
  box-shadow:
    inset 0 0 0 1.5px var(--accent),
    0 0 8px rgba(255, 181, 71, 0.55);
  animation: breathe 2.4s ease-in-out infinite;
}
.fw-mark.lit,
.fw-mark.late {
  filter: drop-shadow(0 0 3px rgba(255, 176, 60, 0.85));
}
.fw-mark.lit::before,
.fw-mark.late::before {
  inset: 0;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(circle, #fffbe8 0 20%, #ffd27a 42%, #ff9a3d 80%);
  -webkit-mask: var(--burst) center / contain no-repeat;
  mask: var(--burst) center / contain no-repeat;
}
.fw-mark.lit.s1 {
  filter: drop-shadow(0 0 1.5px rgba(255, 176, 60, 0.5));
}
.fw-mark.lit.s1::before {
  opacity: 0.7;
}
.fw-mark.lit.s2 {
  filter: drop-shadow(0 0 2.5px rgba(255, 176, 60, 0.7));
}
.fw-mark.late {
  filter: drop-shadow(0 0 3px rgba(160, 190, 255, 0.6));
}
.fw-mark.late::before {
  background: radial-gradient(circle, #ffffff 0 20%, #c4d4ff 45%, #7d93d6 80%);
}
@keyframes breathe {
  50% {
    box-shadow:
      inset 0 0 0 1.5px var(--accent),
      0 0 14px rgba(255, 181, 71, 0.85);
  }
}

/* ---------- Home ---------- */

.home {
  display: grid;
  gap: 12px;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1000px;
  margin: 0 auto;
}
.home > * {
  min-width: 0;
}
.home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 2px 2px 0;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fff3d6, #ffc861 60%, #ff9a52);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wm-icon {
  display: inline-flex;
  filter: drop-shadow(0 0 8px rgba(255, 170, 60, 0.7));
}
.wm-icon svg {
  width: 32px;
  height: 32px;
}
.rank {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  min-width: 190px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(21, 28, 66, 0.7);
}
.rank-name {
  font-weight: 800;
  color: #ffd27a;
}
.rank .meter {
  grid-column: 2;
}
.rank-light {
  grid-column: 1 / -1;
  font-size: var(--text-min);
  color: var(--muted);
}

.card {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28, 37, 83, 0.92), rgba(21, 28, 66, 0.92));
  color: var(--text);
  text-align: left;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.card-kicker,
.res-kicker {
  display: block;
  font-size: var(--text-min);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-title {
  display: block;
  font-size: 18px;
  font-weight: 750;
}
.card-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: max(14px, var(--text-min));
}
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.card-actions .btn.primary {
  flex: 1;
}

.continue {
  cursor: pointer;
  border-color: rgba(255, 181, 71, 0.5);
}
.continue .meter {
  margin-top: 8px;
}
@media (hover: hover) {
  .continue:hover {
    border-color: var(--accent);
  }
}

.daily {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'art body' 'btn btn';
  align-items: center;
  gap: 10px 14px;
}
.daily-art {
  grid-area: art;
  display: grid;
  place-items: center;
  width: 64px;
}
.daily-art svg {
  filter: drop-shadow(0 0 10px rgba(255, 170, 60, 0.35));
}
.daily-body {
  grid-area: body;
  min-width: 0;
}
.daily .btn {
  grid-area: btn;
}
.daily .card-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mini-stars {
  color: #ffd27a;
  letter-spacing: 1px;
}
.streak {
  display: block;
  margin-top: 4px;
  font-size: var(--text-min);
  color: #ffd9a0;
}

/* The chapter's nine fireworks in a row, standing on a launch rail. */
.rack {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 10px;
  padding: 0 6px 2px;
  --mark: 18px;
  background: linear-gradient(0deg, rgba(126, 140, 214, 0.35) 1.5px, transparent 1.5px);
}

.quick .tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.tier-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tier);
  border-radius: 12px;
  background: var(--panel-2);
  cursor: pointer;
  text-align: left;
}
@media (hover: hover) {
  .tier-btn:hover {
    background: var(--panel-3);
  }
}
.tier-btn strong {
  font-size: 15px;
}
.tier-btn small {
  color: var(--muted);
  font-size: var(--text-min);
  line-height: 1.25;
}
.tier-btn em {
  margin-top: 2px;
  font-style: normal;
  font-size: var(--text-min);
  color: #ffd9a0;
}

.home-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(21, 28, 66, 0.85);
  cursor: pointer;
  font-size: var(--text-min);
  font-weight: 650;
}
@media (hover: hover) {
  .nav-btn:hover {
    background: var(--panel-2);
  }
}
.nav-btn .nav-ico {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.nav-btn small {
  min-height: 1.3em;
  color: var(--muted);
  font-size: var(--text-min);
  font-weight: 500;
}

@media (min-width: 820px) {
  .home {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    padding-top: 6px;
  }
  .home-head,
  .continue {
    grid-column: 1 / -1;
  }
  .home-nav {
    grid-column: 1 / -1;
  }
  .daily,
  .journey {
    align-self: stretch;
  }
  .quick {
    grid-column: 1 / -1;
  }
  .quick .tiers {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

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

/* Where play meets the screen's edges (docs/PLATFORMS.md, "Safe areas"): the
   grid keeps 8 px inside the safe areas; the bar, the tools and the number
   pad keep --edge from the screen's edges (16 px on a touch screen), and a
   phone's corners clear. Play's top is the screen's top where the site
   header is scrolled away, or in full screen. fit() in play.js reads the
   paddings and margins this gives. */
.play {
  --c: 40px;
  --side-w: 300px;
  --pt: 8px;
  --pt-ctl: 8px;
  --pb: calc(8px + var(--safe-bottom));
  --pb-ctl: max(var(--corner), var(--edge) + var(--safe-bottom));
  --pl: calc(8px + var(--safe-left));
  --pr: calc(8px + var(--safe-right));
  --ctl-l: calc(var(--edge) + var(--safe-left));
  --ctl-r: calc(var(--edge) + var(--safe-right));
  display: grid;
  gap: 8px;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}
@media (max-height: 500px), (orientation: portrait) and (max-height: 700px) {
  .ln[data-screen='play'] .play {
    --pt: calc(8px + var(--safe-top));
    --pt-ctl: max(var(--corner), var(--edge) + var(--safe-top));
  }
  .ln[data-screen='play'] .play.lay-wide {
    --pt-ctl: calc(var(--edge) + var(--safe-top));
  }
}
/* A phone's corners: stacked, the bar keeps 24 px from the top where it is
   at the screen's top, and the second row of digits starts half a key in,
   so the bottom keeps the edge's 16 px. Side by side, the column keeps 24 px
   from the right edge, so its top and bottom keep 16. */
.play.lay-tall {
  --pb-ctl: calc(var(--edge) + var(--safe-bottom));
}
.play.lay-wide {
  --ctl-r: max(var(--corner), var(--edge) + var(--safe-right));
  --pb-ctl: calc(var(--edge) + var(--safe-bottom));
}
.play-main {
  display: contents;
}
/* Stacked: the bar, the grid, then the tools and the number pad. */
.play.lay-tall {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: 'bar' 'prog' 'board' 'side';
  padding: var(--pt-ctl) var(--pr) var(--pb-ctl) var(--pl);
}
/* Side by side: the grid as tall as play, and the rest beside it. */
.play.lay-wide {
  grid-template-columns: auto var(--side-w);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: 'board bar' 'board prog' 'board side';
  justify-content: center;
  column-gap: 16px;
  padding: var(--pt) var(--ctl-r) var(--pb) var(--pl);
}
.play-bar {
  grid-area: bar;
}
.progress {
  grid-area: prog;
}
.board-wrap {
  grid-area: board;
}
.side {
  grid-area: side;
}
.play.lay-tall .play-bar,
.play.lay-tall .progress,
.play.lay-tall .side {
  width: min(100% - 2 * max(var(--ctl-l) - var(--pl), var(--ctl-r) - var(--pr)), max(var(--c) * 9 + 6px, 520px));
  justify-self: center;
}
.play.lay-wide .play-bar {
  margin-top: calc(var(--pt-ctl) - var(--pt));
}
.play.lay-wide .side {
  margin-bottom: calc(var(--pb-ctl) - var(--pb));
}

/* The bar: Menu, the puzzle's name, the clock over the mistakes, Pause and Music. */
.play-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  container-type: inline-size;
}
.bar-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(21, 28, 66, 0.9);
  color: var(--text);
  cursor: pointer;
  font-size: max(14px, var(--text-min));
  font-weight: 600;
}
@media (hover: hover) {
  .bar-btn:hover:not(:disabled) {
    background: var(--panel-2);
  }
}
.bar-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.bar-btn.off {
  color: var(--faint);
}
.bar-btn.off .ico-music {
  opacity: 0.6;
}
#btn-music.off::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
}
#btn-music {
  position: relative;
}
.play-title {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.play-title strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
}
.play-title span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: var(--text-min);
}
.play-stats {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
}
.mistakes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: var(--text-min);
  white-space: nowrap;
}
.mistakes b {
  font-size: max(14px, var(--text-min));
}
.mistakes .ico {
  display: none;
  width: 14px;
  height: 14px;
}
/* A narrow bar (phones) counts mistakes with a mark instead of the word. */
@container (max-width: 399px) {
  .mistakes .mk-word {
    display: none;
  }
  .mistakes .ico {
    display: inline-block;
  }
}
.mistakes.some {
  color: #ffa3a3;
}
.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  color: #ffd9a0;
}
.progress {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd27a, var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.board-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

/* The grid: 81 cells in 9 rows, lines drawn on top so every cell is the same size. */
.board {
  position: relative;
  width: calc(var(--c) * 9 + 6px);
  border: 3px solid var(--frame);
  /* Radius stays within the frame so overflow never clips a cell corner. */
  border-radius: 3px;
  background: var(--cell);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 70px rgba(255, 170, 60, 0.07);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
  overflow: hidden;
}
.board:focus-visible {
  outline: 2px solid rgba(255, 181, 71, 0.55);
  outline-offset: 3px;
}
.board::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(
      to right,
      transparent calc(var(--c) * 3 - 2px),
      var(--box) calc(var(--c) * 3 - 2px),
      var(--box) calc(var(--c) * 3 + 1px),
      transparent calc(var(--c) * 3 + 1px),
      transparent calc(var(--c) * 6 - 2px),
      var(--box) calc(var(--c) * 6 - 2px),
      var(--box) calc(var(--c) * 6 + 1px),
      transparent calc(var(--c) * 6 + 1px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(var(--c) * 3 - 2px),
      var(--box) calc(var(--c) * 3 - 2px),
      var(--box) calc(var(--c) * 3 + 1px),
      transparent calc(var(--c) * 3 + 1px),
      transparent calc(var(--c) * 6 - 2px),
      var(--box) calc(var(--c) * 6 - 2px),
      var(--box) calc(var(--c) * 6 + 1px),
      transparent calc(var(--c) * 6 + 1px)
    ),
    repeating-linear-gradient(to right, transparent 0 calc(var(--c) - 1px), var(--thin) calc(var(--c) - 1px) var(--c)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--c) - 1px), var(--thin) calc(var(--c) - 1px) var(--c));
}
.brow {
  display: flex;
  height: var(--c);
}
/* A cell's and a key's size never depends on what they show, so what changes
   inside one is laid out there alone: a key press costs a small part of a
   frame (DESIGN.md, "Platforms"). */
.cell {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--c);
  height: var(--c);
  background-color: var(--cell);
  cursor: pointer;
  contain: size layout style;
}
.cell.peer {
  background-color: var(--peer);
}
.cell.same {
  background-color: var(--same);
}
.cell.sel {
  background-color: var(--sel);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cell .v {
  position: relative;
  z-index: 1;
  font-size: max(14px, calc(var(--c) * 0.62));
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cell.g .v {
  color: var(--given);
  font-weight: 650;
}
.cell.u .v {
  color: var(--user);
  text-shadow: 0 0 calc(var(--c) * 0.22) rgba(255, 170, 60, 0.55);
}
.cell.bad .v {
  color: var(--bad);
  text-shadow: none;
}
.cell.clash::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 9%;
  height: 3px;
  border-radius: 2px;
  background: var(--bad);
}
.cell .n {
  position: absolute;
  inset: 1px 2px 2px 1px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  pointer-events: none;
}
/* Pencil notes: a third of the cell, and never under the smallest text. */
.cell .n i {
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: max(var(--text-min), calc(var(--c) * 0.27));
  line-height: 1;
  font-weight: 550;
  color: var(--note);
}
.cell .n i.s {
  margin: 8%;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}
.cell .n i.g,
.cell .n i.h {
  color: var(--ghost);
  font-weight: 800;
}
.cell .n i.g {
  opacity: 0.85;
}
.cell .n i.x {
  color: var(--elim);
  font-weight: 800;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Hint marks */
.cell.h-unit {
  background-image: linear-gradient(var(--h-unit), var(--h-unit));
}
.cell.h-pat {
  box-shadow: inset 0 0 0 2px var(--h-pat);
}
.cell.h-foc {
  box-shadow: inset 0 0 0 2px var(--h-foc);
}
.cell.h-tgt {
  background-color: rgba(255, 181, 71, 0.3);
  box-shadow:
    inset 0 0 0 2px var(--accent),
    inset 0 0 calc(var(--c) * 0.4) rgba(255, 181, 71, 0.4);
}
.play.solved .cell {
  cursor: default;
}

/* Pause and loading */
.play.paused .board .v,
.play.paused .board .n {
  visibility: hidden;
}
.pause-cover {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(11, 16, 38, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pause-card {
  display: grid;
  gap: 10px;
  min-width: 200px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
}
.pause-card strong {
  font-size: 20px;
}
.play.loading .board::before {
  content: 'Packing the shell…';
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 15px;
  opacity: 0;
  animation: appear 0.3s ease 0.25s forwards;
}
.play.loading .side,
.play.loading .play-bar > :not(#btn-menu) {
  visibility: hidden;
}
@keyframes appear {
  to {
    opacity: 1;
  }
}

/* Side column: hint panel, tools, number pad */
.side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  container: side / inline-size;
}
/* Side by side the column scrolls by itself if a long hint needs it, and
   only then by a finger. A scroll container of its own, it doesn't take
   play's "no pan" from it: it says none itself, as the rest of play. */
.play.lay-wide .side {
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: none;
  padding-bottom: 2px;
}
.play.lay-wide.hinting .side {
  touch-action: pan-y;
}

.tools {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  /* Dimmed when disabled without a new layer, and so without a layout. */
  isolation: isolate;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(28, 37, 83, 0.7);
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-min);
  font-weight: 650;
  line-height: 1.1;
}
.tool .ico {
  width: 22px;
  height: 22px;
  color: var(--text);
}
@media (hover: hover) {
  .tool:hover:not(:disabled) {
    background: var(--panel-3);
    color: var(--text);
  }
}
.tool:disabled {
  opacity: 0.4;
  cursor: default;
}
.tool.on {
  border-color: var(--accent);
  background: rgba(255, 181, 71, 0.16);
  color: #ffd9a0;
}
.tool.on .ico {
  color: var(--accent);
}
.tool b {
  font-weight: 800;
}
#btn-hint .ico {
  color: #ffd27a;
}

.pad {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}
.key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  contain: size layout style;
  /* Dimmed when done without a new layer, and so without a layout. */
  isolation: isolate;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #243066, #1a2252);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  transition:
    transform 0.06s ease,
    background 0.15s ease;
}
@media (hover: hover) {
  .key:hover {
    background: linear-gradient(180deg, #2c3a78, #1f295e);
  }
}
.key:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.key .kd {
  font-size: 26px;
  font-weight: 650;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.key .kc {
  min-height: 1em;
  color: var(--faint);
  font-size: var(--text-min);
  font-weight: 700;
  line-height: 1;
}
.key.cur {
  border-color: var(--accent);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.35),
    0 0 12px rgba(255, 181, 71, 0.3);
}
.key.done {
  opacity: 0.38;
}
.pad.notes-mode .key .kd {
  font-size: 18px;
  color: var(--note);
  align-self: flex-start;
  margin-left: 22%;
}
.pad.notes-mode .key {
  border-style: dashed;
  border-color: rgba(255, 181, 71, 0.45);
}

/* Stacked: the tools, then the nine digits in a row; on a phone, where nine
   keys of 44 px and 8 px between them don't fit (460 px), in two rows, 1 to
   5 over 6 to 9. */
.play.lay-tall .pad {
  grid-auto-rows: clamp(48px, 15vw, 66px);
}
@container side (max-width: 459px) {
  .play.lay-tall .pad {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: 48px;
  }
  .play.lay-tall .key {
    grid-column: span 2;
  }
  .play.lay-tall .key:nth-child(6) {
    grid-column: 2 / span 2;
  }
}
.play.lay-tall.hinting .tools {
  display: none;
}

/* Side by side: a 3 by 3 number pad. */
.play.lay-wide .bar-label {
  display: none;
}
.play.lay-wide .pad {
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(44px, 1fr);
  min-height: 148px;
  max-height: 300px;
}
.play.lay-wide .key .kd {
  font-size: clamp(20px, calc(var(--c) * 0.5), 30px);
}

/* Hint panel (part of play: no text selection, as the rest of play) */
.hint-panel {
  flex: none;
  padding: 10px 12px;
  border: 1px solid rgba(255, 181, 71, 0.55);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(60, 46, 30, 0.95), rgba(33, 30, 52, 0.96));
  box-shadow: 0 0 24px rgba(255, 170, 60, 0.15);
}
.hint-kicker {
  font-size: var(--text-min);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.hint-text {
  margin: 4px 0 8px;
  font-size: max(14.5px, var(--text-min));
  line-height: 1.45;
}
.hint-more {
  margin: -2px 0 8px;
  font-size: max(13.5px, var(--text-min));
  color: var(--muted);
}
.hint-more summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: #ffd9a0;
}
/* Summaries as 44 px rows, with their own disclosure triangle. */
.hint-more summary,
.guide summary {
  list-style: none;
}
.hint-more summary::-webkit-details-marker,
.guide summary::-webkit-details-marker {
  display: none;
}
.hint-more summary::before,
.guide summary::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  margin-right: 8px;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.15s ease;
}
.hint-more[open] summary::before,
.guide details[open] summary::before {
  transform: rotate(90deg);
}
.hint-more p {
  margin: 4px 0 0;
}
.hint-actions {
  display: flex;
  gap: 8px;
}
.hint-actions .btn {
  min-height: 44px;
  padding: 7px 12px;
  font-size: max(14px, var(--text-min));
}
.hint-actions .btn.primary {
  flex: 1;
}

/* ---------- List screens ---------- */

.list-screen > * {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.screen-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.screen-bar h2 {
  flex: 1;
  margin: 0;
  font-size: 22px;
  outline: none;
}
.bar-note {
  color: var(--muted);
  font-size: var(--text-min);
  text-align: right;
}
.screen-intro {
  color: var(--muted);
  font-size: max(14px, var(--text-min));
}
.section-title {
  margin: 22px auto 10px;
  font-size: 16px;
  color: #ffd9a0;
}

/* Journey */
.chapter {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(21, 28, 66, 0.9);
}
.chapter.current {
  border-color: rgba(255, 181, 71, 0.6);
  box-shadow: 0 0 22px rgba(255, 170, 60, 0.12);
}
.chapter.locked {
  opacity: 0.55;
}
.ch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.ch-num {
  color: var(--accent);
  font-size: var(--text-min);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ch-head h3 {
  flex: 1;
  margin: 0;
  font-size: 17px;
}
.ch-stars {
  color: #ffd27a;
  font-size: var(--text-min);
  font-weight: 700;
}
.ch-teach {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-min);
}
/* A chapter's nine fireworks, as buttons at least 44 x 44 px, 8 px apart: in
   a row where nine fit (460 px), else 1 to 5 over 6 to 9. */
.ch-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.chapter {
  container: chapter / inline-size;
}
@container chapter (max-width: 459px) {
  .ch-row {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .ch-row .lv {
    grid-column: span 2;
  }
  .ch-row .lv:nth-child(6) {
    grid-column: 2 / span 2;
  }
}
.lv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 0 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  --mark: 16px;
}
@media (hover: hover) {
  .lv:hover:not(:disabled) {
    background: var(--panel-2);
  }
}
.lv:disabled {
  cursor: default;
}
.lv.next {
  border-color: rgba(255, 181, 71, 0.6);
  background: rgba(255, 181, 71, 0.08);
}
.lv-n {
  color: var(--muted);
  font-size: var(--text-min);
  font-weight: 700;
}
.lv-stars {
  min-height: 1.2em;
  color: #ffd27a;
  font-size: var(--text-min);
  line-height: 1.2;
  letter-spacing: -1px;
}

/* Calendar */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cal-nav h3 {
  margin: 0;
  font-size: 18px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.wd {
  padding: 2px 0;
  color: var(--faint);
  font-size: var(--text-min);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1 / 1.05;
  min-width: 0;
  min-height: 44px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(21, 28, 66, 0.9);
  cursor: pointer;
  --mark: 14px;
}
.day.blank {
  border: 0;
  background: none;
}
.day .dn {
  font-size: var(--text-min);
  font-weight: 700;
}
.day .dw {
  display: none;
  font-size: var(--text-min);
  color: var(--muted);
}
/* Seven 44 px dates and six 8 px gaps cannot fit a 360 px phone inside
   its safe edges. Use date cards with their weekdays, preserving targets. */
@media (max-width: 387px) {
  .cal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cal-grid .wd,
  .cal-grid .blank {
    display: none;
  }
  .day .dw {
    display: block;
  }
}
.day.off {
  opacity: 0.35;
  cursor: default;
}
@media (hover: hover) {
  .day.open:hover {
    background: var(--panel-2);
  }
}
.day.lit {
  background: linear-gradient(180deg, rgba(255, 181, 71, 0.2), rgba(21, 28, 66, 0.9));
  border-color: rgba(255, 181, 71, 0.45);
}
.day.late {
  border-color: rgba(160, 190, 255, 0.35);
}
.day.today {
  border: 2px solid var(--accent);
}
.day .tier-dot {
  margin: 5px 0;
}
.cal-sum {
  margin: 12px 0 6px;
  font-weight: 650;
}
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: var(--text-min);
}
.cal-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  --mark: 11px;
}

/* Collection */
.collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.fw-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(21, 28, 66, 0.85);
  text-align: center;
}
.fw-card strong {
  font-size: var(--text-min);
  line-height: 1.2;
}
.fw-card:not(.found) strong {
  color: var(--faint);
  font-weight: 600;
}
.fw-card small {
  font-size: var(--text-min);
  font-weight: 700;
  color: var(--rc, var(--r-common));
}
.fw-card.found svg {
  filter: drop-shadow(0 0 8px rgba(255, 190, 110, 0.25));
}
.r-common {
  --rc: var(--r-common);
}
.r-uncommon {
  --rc: var(--r-uncommon);
}
.r-rare {
  --rc: var(--r-rare);
}
.r-legendary {
  --rc: var(--r-legendary);
}
.fw-card.found.r-legendary {
  border-color: rgba(255, 209, 102, 0.6);
}

/* Stats */
.rank-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(21, 28, 66, 0.9);
}
.rank-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rank-line strong {
  font-size: 20px;
  color: #ffd27a;
}
.rank-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--text-min);
}
.totals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.totals > div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(21, 28, 66, 0.85);
}
.totals small {
  display: block;
  color: var(--muted);
  font-size: var(--text-min);
}
.totals strong {
  font-size: 17px;
}
.table-wrap {
  overflow-x: auto;
}
.tier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: max(14px, var(--text-min));
}
.tier-table th,
.tier-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.tier-table th:first-child {
  text-align: left;
}
.tier-table thead th {
  color: var(--muted);
  font-size: var(--text-min);
  font-weight: 700;
}
.ach-list {
  display: grid;
  gap: 8px;
}
.ach {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(21, 28, 66, 0.8);
}
.ach > div {
  flex: 1;
  min-width: 0;
}
.ach strong {
  display: block;
  font-size: max(14px, var(--text-min));
}
.ach small {
  color: var(--muted);
  font-size: var(--text-min);
}
.ach-icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: #1d2448;
  box-shadow: inset 0 0 0 1.5px #3a4480;
}
.ach.got .ach-icon {
  background: radial-gradient(circle at 40% 35%, #fff1c4, #ffbf52 55%, #e07a1f);
  box-shadow: 0 0 12px rgba(255, 176, 60, 0.6);
}
.ach:not(.got) {
  opacity: 0.7;
}
.ach-state {
  color: var(--good);
  font-size: var(--text-min);
  font-weight: 700;
}

/* Settings and guide */
.settings {
  display: grid;
  gap: 8px;
}
.setting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(21, 28, 66, 0.85);
}
.setting > div {
  flex: 1;
  min-width: 0;
}
.setting strong {
  display: block;
}
.setting small {
  color: var(--muted);
  font-size: var(--text-min);
}
/* A switch: a 44 px tall button around its 30 px track. */
.switch {
  position: relative;
  flex: none;
  width: 56px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.switch::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 50px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #1d2448;
  transition: background 0.2s ease;
}
.switch span {
  position: absolute;
  top: 11px;
  left: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #aab2de;
  transition: transform 0.2s ease;
}
.switch[aria-checked='true']::before {
  border-color: transparent;
  background: var(--accent);
}
.switch[aria-checked='true'] span {
  transform: translateX(20px);
  background: #fff8e8;
}
.howto {
  color: var(--text);
  font-size: max(14.5px, var(--text-min));
  -webkit-user-select: text;
  user-select: text;
}
.howto li {
  margin: 4px 0;
}
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel-2);
  font: 600 var(--text-min) / 1.5 var(--font);
  text-align: center;
}
.guide {
  -webkit-user-select: text;
  user-select: text;
}
.guide-tier h4 {
  margin: 14px 0 6px;
}
.guide details {
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(21, 28, 66, 0.8);
}
.guide summary {
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  min-height: 44px;
  list-style: none;
}
.guide details p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: max(14px, var(--text-min));
}

/* ---------- Overlay: results and lessons ---------- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  padding: 14px max(16px, var(--edge) + var(--safe-right)) max(16px, var(--edge) + var(--safe-bottom)) max(16px, var(--edge) + var(--safe-left));
  touch-action: pan-y;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(6, 9, 26, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 18px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #1d2656, #141a3e);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
  animation: rise 0.35s ease-out;
}
.dialog h2 {
  margin: 0 0 8px;
  font-size: 24px;
}
@keyframes rise {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
}
.dialog .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.dialog .actions .btn {
  flex: 1 1 120px;
}
.dialog .btn.link {
  margin-top: 8px;
}

.res-stars {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 12px;
}
.star {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.star b {
  font-size: 38px;
  line-height: 1;
  color: #3a4480;
}
.star small {
  color: var(--faint);
  font-size: var(--text-min);
  font-weight: 700;
}
.star.on b {
  color: #ffd27a;
  text-shadow: 0 0 16px rgba(255, 190, 80, 0.8);
  animation: starpop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: calc(0.25s + var(--k) * 0.22s);
}
.star.on small {
  color: #ffd9a0;
}
@keyframes starpop {
  from {
    transform: scale(0.2) rotate(-40deg);
    opacity: 0;
  }
}
.res-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  text-align: left;
}
.res-lines > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.res-lines span {
  width: 100%;
  color: var(--muted);
  font-size: var(--text-min);
}
.res-lines b {
  font-size: 17px;
}
.res-lines em {
  font-style: normal;
  color: var(--good);
  font-size: var(--text-min);
  font-weight: 700;
}
.res-lines small {
  color: var(--muted);
  font-size: var(--text-min);
}
.res-lines .gain {
  color: #ffd27a;
}
.res-streak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  color: #ffd9a0;
  font-weight: 700;
}
.flame {
  width: 18px;
  height: 18px;
  background: var(--accent-2);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.res-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--text-min);
}
.res-fw {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(90% 120% at 20% 50%, rgba(255, 170, 60, 0.18), rgba(255, 170, 60, 0) 70%);
  text-align: left;
}
.res-fw.new {
  border-color: rgba(255, 181, 71, 0.55);
}
.res-fw.r-legendary.new {
  border-color: var(--r-legendary);
  box-shadow: 0 0 26px rgba(255, 209, 102, 0.3);
}
.res-fw-art {
  flex: none;
}
.res-fw-art svg {
  display: block;
  width: 80px;
  height: 80px;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(255, 190, 110, 0.4));
}
/* The launch: a trail rises, then the shell bursts open. */
/* A short spark climbs the 46-unit trail: a 12-unit dash moved from below its start to its end. */
.res-fw-art .fw-rise {
  stroke-dasharray: 12 80;
  stroke-dashoffset: 12;
  opacity: 0;
  animation: fw-rise 0.42s cubic-bezier(0.3, 0.6, 0.6, 1) 0.3s both;
}
@keyframes fw-rise {
  0% {
    stroke-dashoffset: 12;
    opacity: 1;
  }
  90% {
    stroke-dashoffset: -34;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -34;
    opacity: 0;
  }
}
.res-fw-art .fw-b {
  transform-box: view-box;
  transform-origin: 50px 50px;
  animation: fw-burst 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) 0.68s both;
}
@keyframes fw-burst {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
}
.res-fw-art .blink {
  animation: blink 0.7s steps(2, jump-none) 1.2s infinite;
}
.res-fw-art .blink.late {
  animation-delay: 1.55s;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
.res-fw-text strong {
  display: block;
  font-size: 18px;
}
.res-fw-text small {
  font-size: var(--text-min);
  font-weight: 700;
  color: var(--rc, var(--r-common));
}
.res-rank {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}
.res-rank.up {
  box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.6);
}
.res-rank-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: max(14px, var(--text-min));
}
.res-rank-line span {
  color: var(--muted);
}
.res-rank-line strong {
  color: #ffd27a;
}
.res-rank.up .res-rank-line span {
  color: var(--good);
  font-weight: 700;
}
.res-rank small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--text-min);
}
.res-ach {
  margin-top: 12px;
  text-align: left;
}
.res-ach ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.res-ach li {
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(111, 227, 161, 0.08);
  box-shadow: inset 0 0 0 1px rgba(111, 227, 161, 0.35);
}
.res-ach strong {
  display: block;
  font-size: max(14px, var(--text-min));
}
.res-ach small {
  color: var(--muted);
  font-size: var(--text-min);
}

.lesson {
  text-align: left;
  -webkit-user-select: text;
  user-select: text;
}
.lesson p {
  margin: 8px 0;
  font-size: max(14.5px, var(--text-min));
}
.lesson-example {
  margin: 10px 0 4px;
}
.board.mini {
  --c: min(40px, calc((min(100vw, 476px) - 2 * max(16px, var(--edge)) - 40px) / 9));
  margin: 0 auto;
  border-width: 2px;
  width: calc(var(--c) * 9 + 4px);
  box-shadow: none;
}
.board.mini .cell {
  cursor: default;
}
.board.mini .ex-place {
  color: var(--accent);
  opacity: 0.9;
  text-shadow: 0 0 8px rgba(255, 181, 71, 0.8);
}
.lesson-caption {
  color: var(--muted);
  font-size: max(13.5px, var(--text-min)) !important;
}
.lesson-tip {
  color: #ffd9a0;
  font-size: max(13.5px, var(--text-min)) !important;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  z-index: 40;
  max-width: min(92%, 420px);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(20, 26, 60, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: max(14px, var(--text-min));
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Below the game ---------- */

.ad-slot {
  max-width: 970px;
  margin: 16px auto 0;
}
.about {
  max-width: 780px;
  margin: 24px auto 0;
  padding: 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.about h2 {
  color: var(--text);
  font-size: 20px;
}
.about h3 {
  color: var(--text);
  font-size: 16px;
}
.about strong {
  color: var(--text);
}

/* ---------- Full screen (the site's button, docs/PLATFORMS.md) ---------- */

/* The game's root fills the screen, without its border, and keeps the top
   middle clear for the site's "Leave full screen" (44 px; on a touch screen
   16 px from the top edge, and a phone's corner clear): the menus, the
   results and the lessons start below it (--strip). In a puzzle, fit() in
   play.js picks where the button goes. Stacked, the header reserves a
   place at its right (fs-strip). Side by side, the grid and the controls part around it
   (fs-split), or, where that would shrink the grid, the button sits over the
   controls' column, which starts below it (fs-side): it is free there in
   every layout that uses it. */
.ln:fullscreen {
  --fs-top: max(8px, var(--safe-top));
  --strip: calc(var(--fs-top) + 52px);
  border: 0;
  border-radius: 0;
}
@media (pointer: coarse) {
  .ln:fullscreen {
    --fs-top: max(var(--corner), 16px + var(--safe-top));
  }
}
.ln:fullscreen > .am-fs-exit {
  top: var(--fs-top);
}
.ln:fullscreen[data-screen='play'][data-exit='side'] > .am-fs-exit {
  left: calc(var(--exit-x, 50%) - 22px);
}
.ln:fullscreen .screen:not(.play),
.ln:fullscreen .overlay {
  padding-top: var(--strip);
}
.ln:fullscreen .play {
  --pt: calc(8px + var(--safe-top));
  --pt-ctl: max(var(--corner), var(--edge) + var(--safe-top));
}
.ln:fullscreen .play.lay-wide {
  --pt-ctl: calc(var(--edge) + var(--safe-top));
}
.ln:fullscreen .play.fs-strip {
  --pt-ctl: var(--fs-top);
}
.ln:fullscreen .play.fs-strip .play-bar {
  padding-right: 52px;
}
.ln:fullscreen .play.fs-split {
  --split: max(var(--pl), var(--ctl-r));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  justify-content: stretch;
  column-gap: 60px;
  padding-left: var(--split);
  padding-right: var(--split);
}
.ln:fullscreen .play.fs-split .board-wrap {
  justify-items: end;
}
.ln:fullscreen .play.fs-split :is(.play-bar, .progress, .side) {
  justify-self: start;
  width: var(--side-w);
}
.ln:fullscreen .play.fs-side .play-bar {
  margin-top: calc(var(--strip) - var(--pt));
}

/* ---------- Small screens ---------- */

@media (max-width: 420px) {
  .play {
    --pl: calc(4px + var(--safe-left));
    --pr: calc(4px + var(--safe-right));
  }
  .wordmark {
    font-size: 24px;
  }
  .rank {
    min-width: 0;
    flex: 1;
  }
  .key .kd {
    font-size: 23px;
  }
  .bar-label {
    display: none;
  }
  .lv {
    --mark: 13px;
  }
  .dialog {
    padding: 16px 14px 12px;
  }
  .star b {
    font-size: 32px;
  }
}
/* Short screens (phones held sideways): every pixel of height goes to the
   grid, and the tools make way for an open hint. */
@media (max-height: 500px) {
  .play {
    --pb: calc(4px + var(--safe-bottom));
    row-gap: 4px;
  }
  .ln[data-screen='play'] .play {
    --pt: calc(4px + var(--safe-top));
  }
  .play.lay-wide.hinting .tools {
    display: none;
  }
  /* With a hint open, the digits take two rows (1 to 5 over 6 to 9) under it. */
  .play.lay-wide.hinting .pad {
    flex: none;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: 44px;
    min-height: 0;
  }
  .play.lay-wide.hinting .key {
    grid-column: span 2;
  }
  .play.lay-wide.hinting .key:nth-child(6) {
    grid-column: 2 / span 2;
  }
  .bar-label {
    display: none;
  }
  .tool .ico {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Calm decoration; action and result feedback keep their timing. */
  .fw-mark.next::before, .res-fw-art .blink { animation: none; }
  .sky .burst { display: none; }
  button, .toggle, .toggle i, .tip, .dialog { transition: none; }
  .dialog { animation: none; }
}

/* ---------- Icons (drawn as masks so they take the text color) ---------- */
.ico-back {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.ico-prev {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.ico-next {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.ico-pause {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E");
}
.ico-music {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='16.5' cy='16' r='2.5'/%3E%3C/svg%3E");
}
.ico-undo {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 010 12h-3'/%3E%3C/svg%3E");
}
.ico-erase {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21h13'/%3E%3Cpath d='M3.5 13.5l9-9a2 2 0 012.8 0l4.2 4.2a2 2 0 010 2.8L11 20H7.5z'/%3E%3Cpath d='M8.5 8.5l7 7'/%3E%3C/svg%3E");
}
.ico-pencil {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-5L15.5 4.5a2.1 2.1 0 013 3L8 18z'/%3E%3Cpath d='M13.5 6.5l3 3'/%3E%3C/svg%3E");
}
.ico-grid {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M9.3 4v16M14.7 4v16M4 9.3h16M4 14.7h16'/%3E%3C/svg%3E");
}
.ico-bulb {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 00-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0012 3z'/%3E%3C/svg%3E");
}
.ico-firework,
.nav-ico.ico-firework {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.0 7.5L12.0 2.5M15.2 8.8L18.7 5.3M16.5 12.0L21.5 12.0M15.2 15.2L18.7 18.7M12.0 16.5L12.0 21.5M8.8 15.2L5.3 18.7M7.5 12.0L2.5 12.0M8.8 8.8L5.3 5.3'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black'/%3E%3C/svg%3E");
}
.ico-cal {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.ico-stats {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M12 20V5M19 20v-6'/%3E%3C/svg%3E");
}
.ico-gear {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M21.5 12h-3M5.5 12h-3M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1M18.7 18.7l-2.1-2.1M7.4 7.4L5.3 5.3'/%3E%3C/svg%3E");
}
.ico-flame {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.9 3.2 5.5 5.3 5.5 10.6a5.5 5.5 0 01-11 0c0-2.3 1.1-3.9 2.2-5 .3 1.7 1.1 2.8 2.2 3.3-.1-3.4.2-6.2 1.1-8.9z'/%3E%3C/svg%3E");
}
.ico-check {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.ico-trophy {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 01-8 0z'/%3E%3Cpath d='M8 6H5v1.5A3 3 0 008 10.5M16 6h3v1.5a3 3 0 01-3 3'/%3E%3Cpath d='M12 13v4M8.5 20.5h7M10 17h4v3.5h-4z'/%3E%3C/svg%3E");
}

.ico-cross {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
}