/* 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. Made by server/dress.ts. */
:root {
  --c-coral: #ff8a5c;
  --c-yellow: #f5b83d;
  --c-blue: #4aaef0;
  --c-green: #6cc46e;
  --c-purple: #a68af2;
  --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; }
}
.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); }

.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; }
@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: 36%; } .meter i:nth-child(2) { height: 52%; } .meter i:nth-child(3) { height: 68%; } .meter i:nth-child(4) { height: 84%; } .meter i:nth-child(5) { 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 { 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
   (public/how-toc.js). */
.dressed .toc { margin: 22px 0 0; 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; cursor: pointer; 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 Lounge's banner at the foot of the page (server/dress.ts, public/banner.js): on screen only. */
.ad-slot { margin: 28px 0 0; }
.ad-slot[hidden] { display: none; }
@media print { .ad-slot { display: none !important; } }
/* A technique a hint sent the player to: there, and marked. */
.dressed .tech-card[id] { scroll-margin-top: 16px; }
.dressed .tech-card:target { outline: 3px solid #ff8a5c; outline-offset: 3px; }