/* Cognitive Games home page - comic-book game site.
   Bold ink outlines, hard offset shadows, halftone dots, sunburst panels and
   speech bubbles. One committed bright "comic paper" look (it is the same in
   light and dark system themes, so every colour is set explicitly here). */
:root {
  --ink: #1a1033;
  --paper: #fff8e7;
  --paper-2: #fff0c9;
  --white: #ffffff;
  --yellow: #ffd23f;
  --orange: #ff9f1c;
  --red: #ff4d5e;
  --blue: #3aa0ff;
  --pink: #ff7aa8;
  --green: #2ec27e;
  --purple: #8f6bff;
  --muted: #4b3f6b;
  --easy: #2ec27e;
  --medium: #ff9f1c;
  --hard: #ff4d5e;
  --display: "Bangers", "Impact", "Arial Black", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --line: 4px solid var(--ink);
  --pop: 7px 7px 0 var(--ink);
  --pop-big: 11px 11px 0 var(--ink);
  --dots: radial-gradient(rgba(26, 16, 51, 0.13) 1.5px, transparent 1.7px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section { scroll-margin-top: 84px; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--dots);
  background-size: 14px 14px;
  font: 600 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--yellow); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0.03em; text-wrap: balance; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; border-radius: 10px; }

/* every band keeps the same side gutter */
.nav-in, .hero-in, .stats, .library, .climb-in, .build, .foot-bar {
  max-width: 1240px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* comic heading: white letters, ink outline, hard drop shadow */
.hero h1, .sec-head h2, .climb h2, .build h2 {
  color: var(--white);
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink),
    6px 6px 0 var(--ink);
}

/* ------------------------------------------------ nav */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--yellow);
  border-bottom: var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 30px; letter-spacing: 0.04em; text-decoration: none; color: var(--ink); }
.mark { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 32px; height: 32px; transform: rotate(-10deg); }
.mark i { border-radius: 5px; border: 2.5px solid var(--ink); background: var(--green); }
.mark i:nth-child(2) { background: var(--red); }
.mark i:nth-child(3) { background: var(--blue); }
.mark i:nth-child(4) { background: var(--purple); }
.nav nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav nav a {
  text-decoration: none; font-weight: 900; font-size: 15px; color: var(--ink); padding: 6px 14px; border-radius: 999px;
  border: 3px solid var(--ink); background: var(--white); box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nav nav a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

/* ------------------------------------------------ hero */
.hero {
  position: relative; overflow: hidden; border-bottom: var(--line);
  background:
    repeating-conic-gradient(from 0deg at 72% 46%, rgba(255, 255, 255, 0.28) 0deg 9deg, transparent 9deg 18deg),
    linear-gradient(160deg, #ff7aa8 0%, #ff9f1c 55%, #ffd23f 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(26, 16, 51, 0.16) 2px, transparent 2.3px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%);
  mask-image: linear-gradient(90deg, #000, transparent 55%);
}
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-block: 52px 34px; }
.pitch { min-width: 0; }
.eyebrow { margin: 0 0 22px; }
.eyebrow span {
  position: relative; display: inline-block; font: 900 15px/1.2 var(--body); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--white); color: var(--ink); border: var(--line); border-radius: 18px; padding: 10px 16px; box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-2deg);
}
.eyebrow span::after {
  content: ""; position: absolute; left: 30px; bottom: -16px; width: 22px; height: 18px; background: var(--white);
  border-right: var(--line); border-bottom: var(--line); transform: skewX(-35deg); border-bottom-right-radius: 4px;
}
.hero h1 { font-size: clamp(46px, 7vw, 92px); line-height: 0.98; }
.hero h1 em { font-style: normal; color: var(--yellow); display: inline-block; transform: rotate(-2deg); }
.lead {
  font-size: 19px; font-weight: 700; max-width: 33em; margin: 24px 0 28px; color: var(--ink);
  background: var(--white); border: var(--line); border-radius: 12px; padding: 14px 18px; box-shadow: 6px 6px 0 var(--ink);
}
.cta { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  font: 400 24px/1 var(--display); letter-spacing: 0.05em; padding: 14px 26px; border-radius: 14px; cursor: pointer; text-decoration: none;
  border: var(--line); box-shadow: 6px 6px 0 var(--ink); transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 9px 9px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.btn.primary { background: var(--yellow); color: var(--ink); }
.btn.ghost { background: var(--blue); color: var(--white); text-shadow: 2px 2px 0 var(--ink); }

/* the hero "screen" is a comic panel with bouncing game icons */
.screen {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 16px; overflow: hidden;
  background:
    repeating-conic-gradient(from 0deg at 50% 55%, #fff3c4 0deg 10deg, #ffe58a 10deg 20deg);
  border: 5px solid var(--ink); box-shadow: var(--pop-big); transform: rotate(1.5deg);
}
.screen canvas { width: 100%; height: 100%; display: block; position: relative; }
.scan { position: absolute; inset: 0; pointer-events: none; background-image: var(--dots); background-size: 12px 12px; }
.hud {
  position: absolute; left: 14px; right: 14px; top: 12px; z-index: 2; display: flex; gap: 10px; align-items: center;
  font: 900 15px/1 var(--body); color: var(--ink); padding: 9px 12px; border-radius: 12px; background: var(--white);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.hud span:last-child { margin-left: auto; }
.pill { padding: 4px 10px; border-radius: 999px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); border: 2px solid var(--ink); }
.pill.hard { background: var(--hard); }

.stats { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 0; margin-bottom: 0; padding-block: 6px 44px; }
.stats li {
  background: var(--white); border: var(--line); border-radius: 14px; padding: 12px 16px; box-shadow: 6px 6px 0 var(--ink);
}
.stats li:nth-child(odd) { transform: rotate(-1.5deg); }
.stats li:nth-child(even) { transform: rotate(1.2deg); }
.stats li:nth-child(1) { background: var(--yellow); }
.stats li:nth-child(2) { background: #c8f2dc; }
.stats li:nth-child(3) { background: #cfe6ff; }
.stats li:nth-child(4) { background: #ffd6e4; }
.stats b { display: block; font: 400 clamp(34px, 4.4vw, 52px)/1 var(--display); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.stats span { font-weight: 800; font-size: 15px; }

/* ------------------------------------------------ library */
.library { padding-block: 60px 50px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sec-head h2, .climb h2, .build h2 { font-size: clamp(38px, 5vw, 60px); }
.count {
  margin: 0; font: 900 14px/1 var(--body); background: var(--ink); color: var(--yellow); padding: 8px 14px; border-radius: 999px;
}
.tools { display: grid; gap: 14px; margin-bottom: 34px; }
.search input {
  width: 100%; font: 800 18px/1 var(--body); color: var(--ink); background: var(--white); border: var(--line);
  border-radius: 14px; padding: 15px 18px; box-shadow: 5px 5px 0 var(--ink);
}
.search input::placeholder { color: #7d72a0; }
.search input:focus { outline: none; background: #fffbe8; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font: 900 14px/1 var(--body); color: var(--ink); background: var(--white); border: 3px solid var(--ink);
  padding: 9px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center;
  box-shadow: 3px 3px 0 var(--ink); transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.chip .ct { font: 800 12px/1 var(--mono); color: var(--muted); }
.chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.chip.on { background: var(--yellow); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.chip.on .ct { color: var(--ink); }
.chip[class*="fam-"]::before { content: ""; width: 12px; height: 12px; border-radius: 4px; border: 2px solid var(--ink); background: var(--fam); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px 26px; }

/* game cards: comic panels */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink);
  background: var(--white); border: var(--line); border-radius: 16px; box-shadow: var(--pop);
  transition: transform 0.16s cubic-bezier(.3, 1.4, .5, 1), box-shadow 0.16s ease;
}
.card:nth-child(3n + 1) { transform: rotate(-1.1deg); }
.card:nth-child(3n + 2) { transform: rotate(0.8deg); }
.card:nth-child(3n) { transform: rotate(-0.4deg); }
.card:hover, .card:focus-visible { transform: translate(-4px, -6px) rotate(0deg) scale(1.02); box-shadow: var(--pop-big); z-index: 2; }
.tile {
  position: relative; aspect-ratio: 16 / 11; display: grid; place-items: center; overflow: hidden;
  border-bottom: var(--line); border-radius: 12px 12px 0 0;
  background:
    radial-gradient(rgba(255, 255, 255, 0.5) 1.8px, transparent 2.1px) 0 0 / 13px 13px,
    repeating-conic-gradient(from 0deg at 50% 52%, rgba(255, 255, 255, 0.24) 0deg 10deg, transparent 10deg 20deg),
    var(--fam);
}
.icon {
  position: relative; z-index: 1; width: 66%; max-width: 168px; height: auto; display: block;
  filter: drop-shadow(4px 5px 0 rgba(26, 16, 51, 0.35));
  transition: transform 0.3s cubic-bezier(.3, 1.6, .5, 1);
}
.card:hover .icon { transform: scale(1.1) rotate(-5deg); }
.no {
  position: absolute; left: 10px; top: 10px; z-index: 2; font: 400 18px/1 var(--display); letter-spacing: 0.05em; color: var(--yellow);
  background: var(--ink); padding: 6px 9px 4px; border-radius: 8px; transform: rotate(-4deg);
}
/* "NEW!" starburst */
.badge {
  position: absolute; right: 2px; top: 0; z-index: 2; width: 74px; height: 74px; display: grid; place-items: center;
  font: 400 19px/1 var(--display); letter-spacing: 0.04em; color: var(--yellow); background: var(--red);
  text-shadow: 2px 2px 0 var(--ink); transform: rotate(12deg);
  clip-path: polygon(50% 0%, 61% 18%, 82% 10%, 79% 32%, 100% 38%, 84% 54%, 96% 74%, 74% 74%, 68% 96%, 50% 82%, 32% 96%, 26% 74%, 4% 74%, 16% 54%, 0% 38%, 21% 32%, 18% 10%, 39% 18%);
}
.card:hover .badge { animation: wobble 0.5s ease; }
@keyframes wobble { 0%, 100% { transform: rotate(12deg) scale(1); } 40% { transform: rotate(-6deg) scale(1.15); } 70% { transform: rotate(18deg) scale(1.05); } }
.body { padding: 14px 18px 4px; display: grid; gap: 8px; min-width: 0; }
.skill {
  justify-self: start; font: 900 11px/1.3 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  background: var(--paper-2); border: 2.5px solid var(--ink); padding: 4px 8px; border-radius: 6px;
}
.card h3 { font-size: 30px; line-height: 1; letter-spacing: 0.04em; }
.card p { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--muted); }
.foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px 16px; font: 800 13px/1 var(--body); color: var(--muted); }
.go {
  font: 400 20px/1 var(--display); letter-spacing: 0.06em; color: var(--ink); padding: 8px 14px 6px; border-radius: 10px;
  background: var(--yellow); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: background 0.12s ease, transform 0.12s ease;
}
.card:hover .go { background: var(--green); color: var(--white); text-shadow: 2px 2px 0 var(--ink); transform: rotate(-3deg) scale(1.08); }
.empty {
  text-align: center; font-weight: 900; padding: 26px; margin: 20px auto 0; max-width: 520px;
  background: var(--white); border: var(--line); border-radius: 16px; box-shadow: var(--pop);
}

/* skill families: one colour each */
.fam-memory { --fam: #9b7dff; }
.fam-attention { --fam: #46b4ff; }
.fam-logic { --fam: #ff7aa8; }
.fam-planning { --fam: #ffab3d; }
.fam-control { --fam: #33d1ad; }
.fam-numbers { --fam: #ffd23f; }
.fam-spatial { --fam: #7ee08f; }

/* ------------------------------------------------ difficulty climb */
.climb {
  border-block: var(--line);
  background:
    radial-gradient(rgba(255, 255, 255, 0.35) 1.8px, transparent 2.1px) 0 0 / 16px 16px,
    #6cc4ff;
}
.climb-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding-block: 64px; }
.climb-copy { min-width: 0; }
.climb-copy p {
  max-width: 34em; font-weight: 700; background: var(--white); border: var(--line); border-radius: 12px; padding: 14px 18px; box-shadow: 6px 6px 0 var(--ink);
}
.steps { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; font-weight: 700; }
.steps li::before {
  content: counter(s); font: 400 24px/36px var(--display); text-align: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.curve { margin: 0; background: var(--white); border: var(--line); border-radius: 16px; padding: 30px 22px 16px; box-shadow: var(--pop-big); transform: rotate(-1deg); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; align-items: end; height: 260px; }
.bar { position: relative; height: var(--h); border-radius: 10px 10px 4px 4px; background: var(--band); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.bar.easy { --band: var(--easy); }
.bar.medium { --band: var(--medium); }
.bar.hard { --band: var(--hard); }
.bar.boss::after { content: "★"; position: absolute; top: -34px; left: 50%; transform: translateX(-50%); color: var(--yellow); font-size: 28px; text-shadow: 2px 2px 0 var(--ink); }
.lv { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font: 400 14px/1 var(--display); letter-spacing: 0.04em; color: var(--ink); }
figcaption { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font: 900 13px/1 var(--body); }
.key::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; background: var(--band); border: 2px solid var(--ink); vertical-align: -1px; }
.key.easy { --band: var(--easy); }
.key.medium { --band: var(--medium); }
.key.hard { --band: var(--hard); }

/* ------------------------------------------------ specs + footer */
.build { padding-block: 64px; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 0; }
.specs div { padding: 16px 18px; min-width: 0; background: var(--white); border: var(--line); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); }
.specs div:nth-child(odd) { transform: rotate(-0.8deg); }
.specs div:nth-child(even) { transform: rotate(0.7deg); }
.specs dt {
  display: inline-block; font: 400 20px/1 var(--display); letter-spacing: 0.06em; color: var(--ink); margin-bottom: 10px;
  background: var(--yellow); border: 2.5px solid var(--ink); padding: 5px 9px 3px; border-radius: 6px;
}
.specs dd { margin: 0; font-weight: 700; }
.foot-bar { padding-block: 22px 34px; font: 400 20px/1.2 var(--display); letter-spacing: 0.05em; color: var(--yellow); background: var(--ink); max-width: none; text-align: center; }
.foot-bar p { margin: 0; }

/* ------------------------------------------------ nav search button */
.search-btn {
  display: inline-flex; align-items: center; gap: 8px; font: 900 15px/1 var(--body); color: var(--ink); cursor: pointer;
  background: var(--white); border: 3px solid var(--ink); border-radius: 999px; padding: 7px 10px 7px 14px; box-shadow: 3px 3px 0 var(--ink);
}
.search-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
kbd {
  font: 800 12px/1 var(--mono); background: var(--paper-2); border: 2px solid var(--ink); border-radius: 6px; padding: 3px 6px; color: var(--ink);
}
.nav-in { flex-wrap: wrap; }

/* ------------------------------------------------ game of the day */
.today { padding-block: 40px 10px; }
.today-in {
  max-width: 1240px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 24px; align-items: center;
}
.today-in > * { min-width: 0; }
.today-tag {
  font: 400 26px/0.95 var(--display); letter-spacing: 0.04em; text-align: center; color: var(--yellow); background: var(--red);
  padding: 22px 16px; text-shadow: 2px 2px 0 var(--ink); transform: rotate(-8deg);
  clip-path: polygon(50% 0%, 61% 14%, 80% 6%, 80% 26%, 100% 30%, 88% 48%, 100% 66%, 80% 70%, 78% 92%, 60% 84%, 50% 100%, 40% 84%, 22% 92%, 20% 70%, 0% 66%, 12% 48%, 0% 30%, 20% 26%, 20% 6%, 39% 14%);
  width: 132px; height: 132px; display: grid; place-items: center;
}
.today-icon { width: 140px; height: 140px; filter: drop-shadow(4px 5px 0 rgba(26, 16, 51, 0.3)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(3deg); } }
.today-copy {
  background: var(--white); border: var(--line); border-radius: 16px; padding: 14px 20px; box-shadow: var(--pop);
}
.today-copy h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1; }
.today-copy p { margin: 6px 0 0; font-weight: 700; }
.today-meta { color: var(--muted); font-size: 14px; }

/* ------------------------------------------------ spin the wheel */
.spin { padding-block: 50px 40px; }
.spin-in {
  max-width: 1240px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 40px; align-items: center;
}
.spin-copy { min-width: 0; display: grid; gap: 16px; }
.spin-copy h2 { font-size: clamp(38px, 5vw, 60px); color: var(--white); text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 6px 6px 0 var(--ink); }
.spin-copy > p { margin: 0; font-weight: 700; max-width: 32em; }
.bubble {
  position: relative; display: inline-block; margin: 0; font: 900 18px/1.3 var(--body); background: var(--white); border: var(--line);
  border-radius: 20px; padding: 12px 18px; box-shadow: 5px 5px 0 var(--ink);
}
.bubble::after {
  content: ""; position: absolute; right: -18px; top: 50%; width: 22px; height: 18px; background: var(--white);
  border-top: var(--line); border-right: var(--line); transform: translateY(-50%) skewY(-30deg);
}
.won { display: flex; gap: 16px; align-items: center; animation: popin 0.4s cubic-bezier(.3, 1.6, .5, 1); }
.won img { width: 120px; height: 120px; flex: none; }
.won > div { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.won-hook { margin: 0; font-weight: 700; color: var(--muted); }
.won .bubble::after { display: none; }
@keyframes popin { from { transform: scale(0.6) rotate(-6deg); opacity: 0; } }
.wheel-wrap { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; justify-self: center; }
.wheel-wrap canvas { width: 100%; height: 100%; display: block; cursor: pointer; filter: drop-shadow(8px 8px 0 var(--ink)); }
.pointer {
  position: absolute; left: 50%; top: -6px; width: 44px; height: 54px; transform: translateX(-50%); background: var(--red);
  clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 0 0 var(--ink));
}
.pointer::after { content: ""; position: absolute; inset: 6px 9px 14px; background: var(--yellow); clip-path: polygon(50% 100%, 0 0, 100% 0); }
.spin-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28%; aspect-ratio: 1; border-radius: 50%;
  font: 400 clamp(22px, 3vw, 34px)/1 var(--display); letter-spacing: 0.05em; color: var(--ink); background: var(--yellow);
  border: 5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer;
}
.spin-btn:hover { transform: translate(-50%, -50%) scale(1.06) rotate(-4deg); }
.spin-btn:active { transform: translate(-50%, -50%) scale(0.96); }

/* ------------------------------------------------ skill galaxy */
.map { padding-block: 30px 20px; }
.map-in { max-width: 1240px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.galaxy { border: 5px solid var(--ink); border-radius: 26px; box-shadow: var(--pop-big); overflow: hidden; background: #2b2350; }
.galaxy svg { display: block; width: 100%; height: auto; }
.planet { cursor: pointer; outline: none; }
.planet .ball { transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
.planet:hover .ball, .planet:focus .ball { transform: scale(1.08); }
.planet:focus-visible .orbit { stroke: var(--yellow); stroke-width: 4; }
.pname { font: 400 22px var(--display); letter-spacing: 0.05em; fill: var(--ink); }
.pcount { font: 900 13px var(--body); fill: var(--ink); }
.moons { animation: orbit linear infinite; }
.planet:hover .moons { animation-play-state: paused; }
@keyframes orbit { to { transform: rotate(360deg); } }
.moon circle { transition: r 0.15s ease; }
.moon:hover circle { fill: var(--yellow); }
.twinkle { animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.15; } }

/* ------------------------------------------------ library tools */
.search-row { position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.search-row > * { min-width: 0; }
.suggest {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 15; width: min(640px, 100%); list-style: none; margin: 0; padding: 6px;
  background: var(--white); border: var(--line); border-radius: 14px; box-shadow: var(--pop);
}
.suggest li, .presults li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.suggest li.sel, .suggest li:hover, .presults li.sel, .presults li:hover { background: var(--paper-2); }
.suggest li.none, .presults li.none { display: block; color: var(--muted); font-weight: 800; cursor: default; }
.r-txt { display: grid; min-width: 0; }
.r-txt b { font: 400 21px/1.1 var(--display); letter-spacing: 0.04em; }
.r-txt small { font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-tag { font: 800 12px/1 var(--mono); background: var(--ink); color: var(--yellow); padding: 5px 7px; border-radius: 6px; }
.r-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--ink); background: var(--fam, var(--yellow)); font-weight: 900; }
.r-dot.sec { background: var(--blue); color: var(--white); }
mark { background: var(--yellow); color: var(--ink); border-radius: 3px; padding: 0 1px; }
.sort { display: flex; align-items: center; gap: 8px; font-weight: 900; }
.sort select {
  font: 800 15px/1 var(--body); color: var(--ink); background: var(--white); border: 3px solid var(--ink); border-radius: 12px;
  padding: 11px 10px; box-shadow: 3px 3px 0 var(--ink);
}
.view { display: flex; gap: 6px; }
.chips-label { font: 400 20px/1 var(--display); letter-spacing: 0.05em; align-self: center; margin-right: 4px; min-width: 64px; }
.active-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; min-height: 26px; font-weight: 800; }
#active { color: var(--muted); }
.link-btn { font: 900 14px/1 var(--body); color: var(--ink); background: none; border: 0; border-bottom: 3px solid var(--yellow); padding: 3px 0; cursor: pointer; }
.link-btn:hover { border-color: var(--red); }
#random-game { margin-left: auto; }

/* shelves view: one horizontal row per set */
.shelves { display: grid; gap: 30px; }
.shelf { background: var(--white); border: var(--line); border-radius: 18px; box-shadow: var(--pop); padding: 16px 0 10px; overflow: hidden; }
.shelf-head { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding: 0 20px 6px; }
.shelf-head h3 { font-size: 30px; }
.shelf-head p { margin: 0; color: var(--muted); font-weight: 800; }
.shelf-track { display: flex; gap: 16px; overflow-x: auto; padding: 10px 20px 16px; scroll-snap-type: x mandatory; }
.mini {
  flex: 0 0 150px; scroll-snap-align: start; display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--ink);
  background: var(--fam); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 8px; box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.15s cubic-bezier(.3, 1.6, .5, 1);
}
.mini img { width: 110px; height: 110px; }
.mini span { font: 400 18px/1 var(--display); letter-spacing: 0.04em; text-align: center; background: var(--white); border: 2px solid var(--ink); border-radius: 8px; padding: 4px 6px 2px; }
.mini:hover { transform: translateY(-6px) rotate(-3deg); }

/* ------------------------------------------------ Idea Lab */
.lab {
  border-block: var(--line);
  background:
    radial-gradient(rgba(255, 255, 255, 0.35) 1.8px, transparent 2.1px) 0 0 / 16px 16px,
    #b9a6ff;
}
.lab-in { max-width: 1240px; margin-inline: auto; padding: 60px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }
.lab-lead { max-width: 40em; font-weight: 800; margin: 0 0 26px; }
.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.idea {
  display: flex; flex-direction: column; min-width: 0; background: var(--white); border: var(--line); border-radius: 18px; box-shadow: var(--pop);
  transition: transform 0.16s cubic-bezier(.3, 1.4, .5, 1), box-shadow 0.16s ease;
}
.idea:nth-child(odd) { transform: rotate(-0.8deg); }
.idea:nth-child(even) { transform: rotate(0.7deg); }
.idea:hover { transform: translate(-3px, -5px); box-shadow: var(--pop-big); }
.idea-screen { position: relative; display: block; padding: 0; border: 0; border-bottom: var(--line); border-radius: 14px 14px 0 0; overflow: hidden; cursor: zoom-in; background: var(--ink); }
.idea-screen canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.idea-no { position: absolute; left: 10px; top: 10px; font: 400 18px/1 var(--display); color: var(--yellow); background: var(--ink); padding: 6px 9px 4px; border-radius: 8px; transform: rotate(-4deg); }
.idea-tag { position: absolute; right: 10px; top: 10px; font: 900 11px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); padding: 5px 8px; border-radius: 999px; }
.idea-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 5px; animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0; } }
.idea-body { padding: 14px 18px 4px; display: grid; gap: 8px; }
.idea h3 { font-size: 30px; line-height: 1; letter-spacing: 0.04em; }
.idea p { margin: 0; font-weight: 700; color: var(--muted); font-size: 15px; }
.how { margin: 2px 0 0; padding-left: 20px; font-size: 14px; font-weight: 700; display: grid; gap: 2px; }
.idea-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 18px 16px; font: 800 13px/1.2 var(--body); color: var(--muted); }
.play-idea {
  display: inline-flex; align-items: center; gap: 6px; font: 900 15px/1 var(--body); text-decoration: none;
  color: var(--white); background: var(--green, #2ec4b6); border: 3px solid var(--ink); border-radius: 999px;
  padding: 9px 16px; box-shadow: 3px 3px 0 var(--ink); text-shadow: 1px 1px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.play-idea:hover, .play-idea:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.play-idea.big { margin-top: 14px; font-size: 18px; padding: 12px 22px; }
.idea-tag::before { background: var(--green, #2ec4b6) !important; animation: none !important; }
.vote {
  flex: none; font: 400 18px/1 var(--display); letter-spacing: 0.05em; color: var(--ink); background: var(--white); border: 3px solid var(--ink);
  border-radius: 999px; padding: 8px 12px 6px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
}
.vote b { font-family: var(--body); font-weight: 900; margin-left: 4px; }
.vote.on { background: var(--pink); color: var(--white); text-shadow: 2px 2px 0 var(--ink); }
.vote.pop { animation: votepop 0.45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes votepop { 40% { transform: scale(1.25) rotate(-6deg); } }

/* ------------------------------------------------ search palette + idea modal */
.palette, .modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; overflow-y: auto;
  padding: max(60px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 30px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(26, 16, 51, 0.55);
}
.palette-box, .modal-box {
  width: min(680px, 100%); background: var(--paper); border: 5px solid var(--ink); border-radius: 20px; box-shadow: var(--pop-big);
  animation: popin 0.25s cubic-bezier(.3, 1.4, .5, 1);
}
.palette-input { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: var(--line); font-size: 24px; }
.palette-input input { border: 0; background: none; font: 800 20px/1.2 var(--body); color: var(--ink); min-width: 0; }
.palette-input input:focus { outline: none; }
.presults { list-style: none; margin: 0; padding: 8px; max-height: 56vh; overflow-y: auto; }
.palette-tip { margin: 0; padding: 10px 16px 14px; font: 800 13px/1.4 var(--body); color: var(--muted); border-top: 2px dashed rgba(26, 16, 51, 0.25); }
.modal { place-items: center; }
.modal-box { position: relative; width: min(880px, 100%); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); overflow: hidden; }
.m-screen { display: grid; align-items: center; background: var(--ink); border-right: var(--line); min-width: 0; }
.modal-box canvas { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; }
.modal-copy { padding: 22px 22px 20px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.modal-copy h3 { font-size: 36px; line-height: 1; }
.modal-copy p { margin: 0; font-weight: 700; }
.mramp { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.mramp li { border: 3px solid var(--ink); border-radius: 10px; padding: 8px 10px; background: var(--white); }
.mramp b { display: inline-block; font: 400 17px/1 var(--display); letter-spacing: 0.05em; color: var(--white); border: 2px solid var(--ink); border-radius: 6px; padding: 3px 7px 1px; margin-right: 6px; text-shadow: 1px 1px 0 var(--ink); }
.mramp .easy b { background: var(--easy); }
.mramp .medium b { background: var(--medium); }
.mramp .hard b { background: var(--hard); }
.modal-x {
  position: absolute; right: 10px; top: 10px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; font: 900 18px/1 var(--body);
  background: var(--yellow); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; color: var(--ink);
}

/* ------------------------------------------------ smaller screens */
@media (max-width: 900px) {
  .hero-in, .climb-in, .spin-in { grid-template-columns: 1fr; gap: 32px; }
  .today-in { grid-template-columns: auto 1fr; }
  .today-tag { display: none; }
  .today-go { grid-column: 1 / -1; justify-self: start; }
  .modal-box { grid-template-columns: 1fr; }
  .m-screen { border-right: 0; border-bottom: var(--line); }
  .search-row { grid-template-columns: 1fr; }
  .screen { max-width: 520px; }
  .specs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav nav { display: none; }
  .today-icon { width: 96px; height: 96px; }
  .idea:nth-child(odd), .idea:nth-child(even) { transform: none; }
  .bubble::after { display: none; }
  #random-game { margin-left: 0; }
  .chips-label { min-width: 0; width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .specs { grid-template-columns: 1fr; }
  .bars { height: 200px; gap: 5px; }
  .lv { font-size: 11px; }
  .grid { gap: 24px; }
  .card h3 { font-size: 27px; }
  .card:nth-child(3n + 1), .card:nth-child(3n + 2), .card:nth-child(3n) { transform: none; }
  .card { box-shadow: 5px 5px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .icon, .btn, .chip, .go, .nav nav a, .idea, .mini { transition: none; }
  .today-icon, .moons, .twinkle, .idea-tag::before, .won, .palette-box, .modal-box { animation: none; }
  .card:hover .badge { animation: none; }
}