/* Language landing pages (v0.51, SEO): /spanish-vocabulary-game/, /german-vocabulary-game/,
   /japanese-vocabulary-game/, /chinese-vocabulary-game/. Built by scripts/learn-pages.py.
   Same palette and type as the home page (index.html), lighter: no video, no motion needed. */
@font-face { font-family: 'Dela Gothic One'; font-weight: 400; font-display: swap; src: url('/assets/home/fonts/dela-gothic-one.woff2?v=571602cd') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: swap; src: url('/assets/home/fonts/atkinson-400.woff2?v=82a5516b') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: swap; src: url('/assets/home/fonts/atkinson-700.woff2?v=833b1355') format('woff2'); }

:root {
  --mag: #ff2bb5; --deep: #c80e86; --pink: #ff8fda; --blush: #ffe3f5;
  --yel: #fff03b; --gold: #ffb000; --blue: #2a2cf0; --ink: #1b1660; --sub: #4f4b8f;
  --mint: #22e39a; --red: #ff3355; --purg-deep: #2b000a; --purg-pink: #f2a7b6;
  --display: 'Dela Gothic One', 'Arial Black', Impact, sans-serif;
  --font: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jp: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'PingFang SC', 'Noto Sans JP', 'Noto Sans SC', 'Yu Gothic', Meiryo, sans-serif;
  --holo-soft: linear-gradient(125deg, #fff 0%, #fffbd6 18%, #e7fff4 38%, #e1f7ff 57%, #ffe6f8 77%, #fffbe0 92%, #fff 100%);
  --dots: radial-gradient(circle, rgba(255, 255, 255, 0.18) 2px, transparent 2.6px);
  --gutter: max(16px, env(safe-area-inset-left));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--mag); color: var(--ink); font: 18px/1.55 var(--font); letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
h1, h2, h3, p, li { text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 4px solid var(--yel); outline-offset: 3px; border-radius: 8px; }
/* On light surfaces a yellow ring is too faint: ink instead. */
.top :focus-visible, .hero-panel :focus-visible, .faq summary:focus-visible, .levels :focus-visible, .stick :focus-visible, .foot :focus-visible { outline-color: var(--ink); }
.foot :focus-visible { outline-color: var(--yel); }
.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.jp { font-family: var(--jp); font-weight: 800; }
/* Chinese glyph shapes, not Japanese ones, on Apple devices. */
:lang(zh) { font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', var(--font); }
.wchip .w:lang(zh), .world .hi:lang(zh), .hero-art .hello:lang(zh) { font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Display type: white letters on a fat cobalt outline (a stroked copy sits behind). */
.disp { font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: -0.005em; }
.stroke { position: relative; z-index: 0; color: #fff; }
.stroke::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; color: var(--blue); -webkit-text-stroke: 0.2em var(--blue); text-shadow: 0 0.11em 0 var(--blue); }
.stroke.ink::before { color: var(--ink); -webkit-text-stroke-color: var(--ink); text-shadow: 0 0.11em 0 var(--ink); }
.h2 { font-size: clamp(32px, 5vw, 60px); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 15px; padding: 6px 14px; border-radius: 999px; background: var(--blue); color: #fff; border: 3px solid #fff; box-shadow: 0 4px 0 var(--ink); }
.sec-head { display: grid; gap: 16px; justify-items: center; text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head p { max-width: 40em; font-size: clamp(17px, 1.5vw, 20px); }
.band { position: relative; padding-block: clamp(56px, 8vw, 104px); isolation: isolate; }

/* Buttons: chunky, inked, press down like an arcade button. */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--display); font-size: clamp(18px, 2vw, 22px); line-height: 1; text-decoration: none; padding: 0.82em 1.2em 0.9em; border: 4px solid var(--blue); border-radius: 20px; background: #fff; color: var(--blue); box-shadow: 0 7px 0 var(--blue); transition: transform 0.12s, box-shadow 0.12s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 9px 0 var(--blue); }
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--blue); }
.btn-yel { background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0 7px, transparent 7px 22px), linear-gradient(to top, rgba(255, 146, 0, 0.55), rgba(255, 240, 59, 0) 75%), var(--yel); }
.btn-sm { font-size: 16px; padding: 0.6em 0.95em 0.68em; border-width: 3px; border-radius: 14px; box-shadow: 0 5px 0 var(--blue); }
.btn svg { width: 1em; height: 1em; flex: none; }

/* Header */
.top { position: sticky; z-index: 60; top: max(10px, env(safe-area-inset-top)); margin: 10px auto 0; width: min(1120px, 100% - 2 * var(--gutter)); display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; background: rgba(255, 255, 255, 0.95); border: 3px solid var(--blue); border-radius: 20px; box-shadow: 0 5px 0 var(--blue); }
.top-logo img { height: 32px; width: auto; }
.top nav { display: flex; gap: 2px; margin-left: auto; }
.top nav a { font-family: var(--display); font-size: 14px; color: var(--blue); text-decoration: none; padding: 8px 10px; border-radius: 12px; }
.top nav a:hover, .top nav a[aria-current] { background: var(--blush); }
.top .btn-sm { margin-left: 6px; }
@media (max-width: 860px) { .top nav { display: none; } .top .btn-sm { margin-left: auto; } }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink); }
.crumbs a { color: var(--ink); }
.crumbs li + li::before { content: '›'; margin-right: 6px; opacity: 0.8; }

/* Hero */
.hero { padding-block: clamp(28px, 5vw, 56px) clamp(56px, 8vw, 96px); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: conic-gradient(from -8deg at 78% 50%, var(--yel) 0 14deg, var(--mag) 14deg 30deg, var(--blue) 30deg 40deg, #fff 40deg 58deg, var(--pink) 58deg 70deg, var(--yel) 70deg 86deg, var(--blue) 86deg 96deg, var(--mag) 96deg 114deg, #fff 114deg 126deg, var(--pink) 126deg 144deg, var(--blue) 144deg 156deg, var(--yel) 156deg 172deg, var(--mag) 172deg 190deg, #fff 190deg 202deg, var(--blue) 202deg 220deg, var(--pink) 220deg 232deg, var(--yel) 232deg 250deg, var(--mag) 250deg 262deg, #fff 262deg 280deg, var(--blue) 280deg 292deg, var(--pink) 292deg 310deg, var(--yel) 310deg 322deg, var(--mag) 322deg 340deg, var(--blue) 340deg 350deg, #fff 350deg 360deg); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 43, 181, 0.94) 0%, rgba(255, 43, 181, 0.8) 45%, rgba(255, 43, 181, 0.15) 75%), var(--dots) 0 0 / 22px 22px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: center; margin-top: 22px; }
.hero-copy { display: grid; gap: 20px; justify-items: start; }
.hero h1 { font-size: clamp(40px, 6vw, 78px); max-width: 10em; }
.hero-panel { background: var(--holo-soft); border: 4px solid var(--blue); border-radius: 24px; padding: 20px 22px 22px; box-shadow: 0 8px 0 var(--blue); display: grid; gap: 16px; max-width: 580px; }
.hero-panel p { font-size: clamp(17px, 1.5vw, 19px); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.hero-note { font-size: 15px !important; color: var(--sub); }
.hero-art { position: relative; display: grid; place-items: center; }
.hero-art .badge { position: absolute; left: 0; top: 4%; rotate: -8deg; font-family: var(--display); color: var(--blue); background: var(--yel); border: 3px solid var(--blue); border-radius: 999px; padding: 7px 15px; box-shadow: 0 4px 0 var(--blue); font-size: clamp(15px, 1.6vw, 19px); white-space: nowrap; }
.hero-art .hello { position: absolute; right: 2%; bottom: 6%; rotate: 6deg; font-size: clamp(30px, 4vw, 52px); color: #fff; -webkit-text-stroke: 7px var(--blue); paint-order: stroke fill; text-shadow: 0 5px 0 var(--blue); }
.hero-art .hello.cjk { font-family: var(--jp); font-weight: 900; }
.hero-art .hello:not(.cjk) { font-family: var(--display); }
.hero-art img { width: min(420px, 100%); transform: rotate(-3deg); filter: drop-shadow(0 10px 0 rgba(27, 22, 96, 0.3)); }
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-art img { width: min(240px, 66%); }
  .hero::after { background: rgba(255, 43, 181, 0.88); }
}

/* Quick facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.fact { background: #fff; border: 3px solid var(--blue); border-radius: 18px; padding: 12px 14px; box-shadow: 0 5px 0 var(--blue); }
.fact b { display: block; white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: clamp(21px, 2.6vw, 30px); color: var(--blue); line-height: 1.1; }
.fact span { font-size: 15px; font-weight: 700; color: var(--sub); }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* Levels */
.levels { background: var(--holo-soft); }
.level-list { display: grid; gap: 14px; }
.level { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; background: #fff; border: 3px solid var(--blue); border-radius: 20px; padding: 14px 16px; box-shadow: 0 5px 0 var(--blue); }
.level h3 { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--blue); line-height: 1.1; }
.level h3 small { display: block; font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--sub); margin-top: 4px; }
.level p { font-size: 16px; color: var(--sub); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wchip { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 13px; background: #fff; border: 3px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 17px; }
.wchip .w { font-family: var(--jp); font-weight: 800; }
.wchip .en { color: var(--sub); font-weight: 400; font-size: 15px; }
.wchip ruby rt { font-size: 0.6em; font-weight: 800; color: var(--ink); }
@media (max-width: 640px) { .level { grid-template-columns: 1fr; gap: 8px; } }

/* Ways to play */
.play { background: var(--blue); color: #fff; }
.play::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--dots) 0 0 / 22px 22px; }
.play-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.way { background: #fff; color: var(--ink); border: 4px solid #fff; border-radius: 22px; padding: 16px 18px 18px; box-shadow: 0 0 0 3px var(--ink), 0 8px 0 3px var(--ink); }
.way h3 { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--blue); margin-bottom: 6px; }
.way h3 .jp { font-size: 15px; color: var(--deep); margin-left: 2px; }
.way.is-extra { background: var(--yel); }
.way.is-extra h3 { font-size: 19px; }
.rules-head { margin-top: 26px; font-family: var(--display); font-size: 17px; color: var(--yel); }
.way p { font-size: 16px; }
.shot { justify-self: center; width: 100%; max-width: 300px; border: 5px solid #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 0 0 4px var(--ink), 0 10px 0 4px var(--ink); rotate: 2deg; }
.shot img { width: 100%; }
.shot figcaption { background: #fff; color: var(--sub); font-size: 14px; font-weight: 700; padding: 8px 12px; text-align: center; }
.rules { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rules li { padding: 12px 14px; border-radius: 16px; background: rgba(27, 22, 96, 0.4); border: 3px solid rgba(255, 255, 255, 0.4); font-weight: 700; font-size: 16px; }
.rules b { color: var(--yel); }
@media (max-width: 900px) { .play-grid { grid-template-columns: 1fr; } .rules { grid-template-columns: 1fr; } .shot { max-width: 240px; } }
@media (max-width: 560px) { .ways { grid-template-columns: 1fr; } }

/* Topics and bosses */
.topics { background: var(--ink); color: #fff; }
.topics::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 2px, transparent 2.6px) 0 0 / 22px 22px; }
.topics .sec-head p { color: #e7e5ff; }
.boss-row { display: flex; justify-content: center; gap: clamp(8px, 3vw, 28px); margin-bottom: 26px; }
.boss-row figure { display: grid; justify-items: center; gap: 6px; width: clamp(96px, 18vw, 170px); }
.boss-row img { filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); }
.boss-row figcaption { font-family: var(--display); font-size: clamp(13px, 1.4vw, 16px); text-align: center; line-height: 1.2; }
.boss-row figcaption small { display: block; font-family: var(--font); font-weight: 700; color: var(--pink); font-size: 13px; }
.topic-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.topic-list li { display: inline-flex; gap: 8px; align-items: baseline; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 16px; border: 3px solid var(--blue); }
.topic-list li span { color: var(--deep); font-size: 14px; }

/* Stick */
.stick { background: var(--holo-soft); }
.stick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stick-grid article { background: #fff; border: 3px solid var(--blue); border-radius: 22px; padding: 18px 20px 20px; box-shadow: 0 6px 0 var(--blue); }
.stick-grid h3 { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--blue); margin-bottom: 6px; }
.stick-grid p { font-size: 16px; }
.stick-note { text-align: center; margin-top: 22px; font-weight: 700; color: var(--sub); }
@media (max-width: 860px) { .stick-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq { background: var(--blush); }
.faq-list { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq details { background: #fff; border: 3px solid var(--blue); border-radius: 18px; box-shadow: 0 5px 0 var(--blue); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 14px 18px; font-family: var(--display); font-size: clamp(17px, 1.8vw, 20px); color: var(--blue); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--yel); border: 3px solid var(--blue); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 18px 16px; font-size: 17px; display: grid; gap: 10px; }

/* Other worlds */
.more { background: var(--blue); color: #fff; }
.more::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--dots) 0 0 / 22px 22px; }
.world-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.world { position: relative; display: grid; gap: 4px; align-content: start; padding: 18px 18px 20px; min-height: 200px; border-radius: 26px; background: var(--g); border: 5px solid #fff; box-shadow: 0 0 0 4px var(--ink), 0 10px 0 4px var(--ink); overflow: hidden; isolation: isolate; text-decoration: none; color: #fff; transition: transform 0.15s; }
.world:hover { transform: translateY(-4px) rotate(-1deg); }
.world::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0 16px, transparent 16px 44px); }
.world .hi { font-family: var(--display); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; margin: 4px 0; }
.world .hi.cjk { font-family: var(--jp); font-weight: 900; }
.world .hi, .world .name { -webkit-text-stroke: 7px var(--blue); paint-order: stroke fill; text-shadow: 0 4px 0 var(--blue); }
.world .name { font-family: var(--display); font-size: 24px; line-height: 1.15; }
.world .meta { justify-self: start; margin-top: 8px; font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.w-es { --g: linear-gradient(150deg, #fff03b, #ffb000 45%, #ff2bb5); }
.w-de { --g: linear-gradient(150deg, #7fe3ff, #2a2cf0 55%, #7b2cff); }
.w-ja { --g: linear-gradient(150deg, #ff8fda, #7b2cff 60%, #2a2cf0); }
.w-zh { --g: linear-gradient(150deg, #ffb000, #ff3355 55%, #ff2bb5); }
@media (max-width: 760px) { .world-grid { grid-template-columns: 1fr; } .world { min-height: 0; } }

/* Continue? */
.cont { background: var(--purg-deep); color: #fff; text-align: center; }
.cont::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-62deg, transparent 0 70px, rgba(255, 51, 85, 0.18) 70px 76px, transparent 76px 150px); }
.cont .wrap { display: grid; gap: 20px; justify-items: center; }
.cont .h2 { color: var(--yel); }
.cont .h2::before { color: var(--purg-deep); -webkit-text-stroke-color: #d0103a; text-shadow: 0 0.08em 0 #d0103a; }
.cont p { font-weight: 700; color: var(--purg-pink); }

/* Footer */
.foot { background: var(--ink); color: #cfcdf0; padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.foot img { height: 40px; width: auto; }
.foot nav { display: flex; gap: 8px 18px; flex-wrap: wrap; font-weight: 700; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: var(--yel); }
.foot p { flex-basis: 100%; font-size: 14px; }

/* v0.53: /es/ (English for Spanish speakers). Language switch in the header, False Friends cards, no-shot play grid. */
.lang-sw { flex: none; display: inline-flex; align-items: center; margin-left: 6px; padding: 3px; border: 2px solid var(--blue); border-radius: 11px; background: #fff; font-family: var(--display); font-size: 13px; line-height: 1; text-decoration: none; color: var(--blue); }
.lang-sw span { padding: 5px 6px; border-radius: 7px; }
.lang-sw .lang-on { background: var(--blue); color: #fff; }
.lang-sw:hover .lang-off { background: var(--blush); }
.top nav + .lang-sw { margin-left: 6px; }
@media (max-width: 860px) { .top nav + .lang-sw { margin-left: auto; } }
.top .lang-sw + .btn-sm { margin-left: 6px; }
/* Phones: only the other language shows, so the Play button keeps one line at 375 px. */
@media (max-width: 480px) { .lang-sw .lang-on { display: none; } .lang-sw { padding: 2px; } }
.play-grid.no-shot { grid-template-columns: 1fr; }
.falsos { background: var(--yel); }
.falsos::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 16px, transparent 16px 44px); }
.ff-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ff { display: grid; gap: 2px; background: #fff; border: 3px solid var(--blue); border-radius: 20px; padding: 14px 16px; box-shadow: 0 5px 0 var(--blue); }
.ff-en { font-family: var(--display); font-size: 24px; color: var(--blue); line-height: 1.15; }
.ff-yes { font-weight: 700; font-size: 17px; color: #0b7a52; }
.ff-no { font-weight: 700; font-size: 16px; color: var(--deep); }
.ff-no s { text-decoration-thickness: 2px; }
.ff-no small { font-weight: 400; color: var(--sub); font-size: 14px; }
.topic-list li.is-ff { background: var(--yel); }
@media (max-width: 860px) { .ff-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ff-list { grid-template-columns: 1fr; } }