/* The pages' dress (body.dressed), taken from the game's own front page: its coloured title
   tiles, digits scattered down the sides, numbered tiles before each section, and a colour for
   the page - a grade's own, where the page is about one. Put on by scripts/make-how.py and scripts/make-levels.py. */
:root {
  --c-coral: #ff8a5c;
  --c-yellow: #f5b83d;
  --c-blue: #4aaef0;
  --c-green: #6cc46e;
  --c-purple: #a68af2;
  --c-ink: #3d4466;
  --round: "Lounge Round", "Lounge Sans", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c-coral: #f2774b; --c-yellow: #e9a92b; --c-blue: #3c9be0; --c-green: #55ad5a; --c-purple: #9377e6; --c-ink: #6c75a8; }
}
.t-coral, .c-coral { --lv: var(--c-coral); }
.t-yellow, .c-yellow { --lv: var(--c-yellow); }
.t-green, .c-green { --lv: var(--c-green); }
.t-blue, .c-blue { --lv: var(--c-blue); }
.t-purple, .c-purple { --lv: var(--c-purple); }
.t-ink, .c-ink { --lv: var(--c-ink); }

.dressed { position: relative; overflow-x: clip; background:
  radial-gradient(circle at 12% 0, color-mix(in srgb, var(--lv) 16%, transparent), transparent 420px),
  radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--c-yellow) 12%, transparent), transparent 380px),
  var(--bg); }
.dressed h1, .dressed h2, .dressed h3 { font-family: var(--round); font-weight: 900; }
.dressed h1 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.3; }

.deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.deco i { position: absolute; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.22); background: color-mix(in srgb, var(--lv) 38%, var(--bg)); color: #fff; font: 900 calc(var(--s) * 0.56) / 1 var(--round); font-style: normal; transform: rotate(var(--r)); opacity: 0.85; }
.deco i.o { background: none; border: 2px dashed color-mix(in srgb, var(--lv) 55%, var(--bg)); color: color-mix(in srgb, var(--lv) 70%, var(--bg)); }
@media (max-width: 1180px) { .deco i { opacity: 0.35; } }
@media (max-width: 760px) { .deco { display: none; } }

/* The title's tiles: a word, a tile a character, set down one after another. */
.tiles { display: inline-flex; gap: 6px; margin: 10px 0 0; }
.tiles b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--lv); color: #fff; font: 900 26px / 1 var(--round); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.13), 0 6px 14px rgb(22 28 45 / 0.08); animation: tile-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--k) * 60ms + 60ms); }
.tiles b:hover { animation: tile-hop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes tile-in { from { transform: translateY(-20px) scale(0.6) rotate(-8deg); opacity: 0; } }
@keyframes tile-hop { 40% { transform: translateY(-6px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .tiles b { animation: none; } }
@media (max-width: 520px) { .tiles b { width: 40px; height: 40px; font-size: 22px; } }

.tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 21px; }
.tile-head b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--lv); color: #fff; font-size: 18px; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.13); transform: rotate(-6deg); }

.meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; vertical-align: -1px; }
.meter i { width: 5px; border-radius: 2.5px; background: var(--line); }
.meter i:nth-child(1) { height: 40%; } .meter i:nth-child(2) { height: 60%; } .meter i:nth-child(3) { height: 80%; } .meter i:nth-child(4) { height: 100%; }
.meter i.on { background: var(--lv); }

/* The page's cards: rounder and roomier, the buttons in the page's colour. */
.dressed main > section, .dressed .guide-main > section { border-radius: 22px; }
.dressed .print, .dressed .play.main { background: var(--lv); color: #fff; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.12); }
.dressed .print:hover { filter: brightness(1.05); }
.dressed .faq summary, .dressed #faq summary { list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.dressed .faq summary::-webkit-details-marker, .dressed #faq summary::-webkit-details-marker { display: none; }
.dressed .faq summary::after, .dressed #faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); color: var(--lv); font-weight: 900; }
.dressed .faq details[open] summary::after, .dressed #faq details[open] summary::after { content: "−"; }

/* Chips: a row of links to choose from. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.chips a, .chips b { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 1px 4px rgb(0 0 0 / 0.06); }
.chips a:hover { color: var(--lv); }
.chips b { background: var(--lv); color: #fff; }

@media print {
  .deco, .tiles, .tile-head b { display: none !important; }
  .dressed { background: #fff; }
}
.dressed .about .steps, .dressed .about .chips, .dressed .about .needs { padding: 0; }
.dressed .today-card { border-top: 5px solid var(--lv, var(--line)); }
.dressed .today-card b { color: var(--ink); }
.dressed .today-card span { color: var(--lv); }

/* A guide's contents: a card of numbered tiles to jump from. On a phone folded at the top
   (open it to choose); on a wide screen open beside the page, the section being read lit. */
.dressed .toc { margin: 18px 0 22px; padding: 14px 18px; border-radius: 18px; background: var(--surface); }
.dressed .toc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 900 18px / 1.5 var(--round); }
.dressed .toc summary::-webkit-details-marker { display: none; }
.dressed .toc summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); color: var(--lv); font-weight: 900; }
.dressed .toc[open] summary::after { content: "−"; }
.dressed .toc ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 10px 0 2px; padding: 0; list-style: none; counter-reset: toc; }
.dressed .toc li { counter-increment: toc; }
.dressed .toc li a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 7px 10px; border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: background 0.15s, color 0.15s; }
.dressed .toc li a::before { content: counter(toc); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--lv); color: #fff; font: 900 13px / 1 var(--round); }
.dressed .toc li a:hover { color: var(--lv); background: var(--bg); }
.dressed .toc li a[aria-current] { background: color-mix(in srgb, var(--lv) 16%, var(--surface)); color: var(--ink); }
@media (min-width: 960px) {
  .dressed .toc { padding: 16px 12px 12px; }
  .dressed .toc summary { padding: 0 8px; pointer-events: none; }
  .dressed .toc summary::after { display: none; }
  .dressed .toc ol { margin-top: 6px; }
  .dressed .toc li a { padding: 6px 8px; font-size: 13.5px; }
  .dressed .toc li a::before { width: 22px; height: 22px; font-size: 12px; }
}
.dressed .tech { margin-top: 10px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--bg); }
.dressed .tech h3 { margin-top: 0; }

/* The guide's sections as cards, as every game's guide has them. */
.dressed main > section, .dressed .guide-main > section { margin-top: 22px; padding: 22px 26px; background: var(--surface); }
.dressed main > section > h2, .dressed .guide-main > section > h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.dressed .guide-main > section:first-child { margin-top: 0; }
@media (max-width: 520px) { .dressed main > section, .dressed .guide-main > section { padding: 18px 16px; } }
.dressed .cta { background: var(--lv); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.12); }
.dressed .cta:hover { filter: brightness(1.05); }
.dressed #faq details { background: var(--bg); }

/* A grade's own page (/mines/level/…): the grade at a glance beside the figure it turns on, set
   down a little askew; the five side by side; the others as cards in their colours. */
.level-page main { max-width: 1000px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 28px 40px; align-items: center; margin: 14px 0 8px; }
.hero h1 { margin: 10px 0 8px; }
.hero h1 small { display: block; margin-top: 4px; color: var(--muted); font-size: 16px; }
.hero .lead { color: var(--ink); opacity: 0.8; }
.who { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--lv) 12%, var(--surface)); font-size: 14px; }
.who b { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 999px; background: var(--lv); color: #fff; font-size: 12px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.facts li { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: var(--surface); box-shadow: 0 1px 4px rgb(0 0 0 / 0.06); border-left: 5px solid var(--lv); }
.facts small { color: var(--muted); font-size: 12px; font-weight: 700; }
.facts b { font-size: 16px; line-height: 1.5; }
.hero-fig { padding: 20px 22px; border-radius: 22px; background: var(--surface); box-shadow: 0 18px 40px rgb(22 28 45 / 0.12); transform: rotate(1.6deg); transition: transform 0.3s; }
.hero-fig:hover { transform: rotate(0); }
.hero-fig-title { margin: 0 0 12px; font: 900 17px / 1.5 var(--round); }
.hero-fig .board .cells { grid-template-columns: repeat(var(--cols), 46px); gap: 3px; padding: 8px; margin: 0 auto; }
.hero-fig .board i { width: 46px; height: 46px; font-size: 22px; }
.hero-fig .board figcaption { max-width: none; margin-top: 12px; }
.compare { width: 100%; margin-top: 12px; border-collapse: separate; border-spacing: 0 6px; font-size: 15px; }
.compare thead th { padding: 0 12px; border: 0; color: var(--muted); font-size: 12px; }
.compare tbody th, .compare tbody td { padding: 10px 12px; border: 0; background: var(--bg); vertical-align: middle; white-space: nowrap; }
.compare tbody th { border-left: 5px solid var(--lv); border-radius: 12px 0 0 12px; }
.compare tbody td:last-child { border-radius: 0 12px 12px 0; }
.compare th a, .compare th b { color: var(--ink); font-size: 16px; }
.compare th small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.compare tr.here th, .compare tr.here td { background: color-mix(in srgb, var(--lv) 18%, var(--surface)); }
.dressed .features { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.features li { padding: 14px 16px; border-radius: 14px; background: var(--bg); color: var(--muted); font-size: 14px; line-height: 1.7; }
.features b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15px; }
.dressed main > section.others { padding: 0; background: none; }
.level-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.level-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: 0 1px 4px rgb(0 0 0 / 0.06); border-top: 5px solid var(--lv); transition: transform 0.2s; }
.level-card:hover { transform: translateY(-3px); }
.level-card span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.level-card small { margin-top: auto; color: var(--lv); font-weight: 700; }
.level-card .tiles b { width: 30px; height: 30px; border-radius: 7px; font-size: 16px; animation: none; }
@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-fig { transform: none; }
}
@media (max-width: 520px) {
  .hero-fig .board .cells { grid-template-columns: repeat(var(--cols), 38px); }
  .hero-fig .board i { width: 38px; height: 38px; font-size: 19px; }
  .compare { font-size: 14px; }
  .compare tbody th, .compare tbody td { padding: 9px 8px; }
}
.tiles.long { gap: 5px; }
.tiles.long b { width: 38px; height: 38px; border-radius: 9px; font-size: 21px; }
@media (max-width: 520px) { .tiles.long { gap: 4px; } .tiles.long b { width: 34px; height: 34px; font-size: 19px; } }
@media (max-width: 520px) { .tiles.longer { gap: 3px; } .tiles.longer b { width: 28px; height: 28px; border-radius: 7px; font-size: 16px; } }