/* Separate pages; generous text and media sizes. */
[hidden] { display:none !important; }
body { font-size:18px; line-height:1.6; }
nav { position:relative; inset:auto; transform:none; left:auto; top:auto; margin:22px auto 0; width:calc(100% - 48px); max-width:1520px; padding:18px 24px; }
nav .nav-links { flex-wrap:wrap; }
nav .nav-links a:nth-child(n) { display:block; font-size:17px; padding:10px 12px; }
nav .nav-links a[aria-current] { background:#f3d375; color:#182b42; border-radius:12px; }
nav .logo { font-size:21px; }
nav .btn-auth-login,nav .btn-auth-register { font-size:16px; padding:10px 16px; }
main { min-height:calc(100svh - 220px); }
main > section:not(.hero) { max-width:1460px; margin:auto; padding:40px 32px 60px; }
h1,.section-title { font-size:clamp(32px,4vw,54px); line-height:1.2; margin:15px 0 20px; text-align:center; }
.page-lead,.section-subtitle { font-size:20px; text-align:center; margin:10px auto 28px; max-width:920px; line-height:1.65; }
.section-label { font-size:15px; text-align:center; }
footer { padding:22px 28px; gap:12px; font-size:15px; }
.hero { min-height:calc(100svh - 180px); padding:50px 24px 65px; }
.hero h1 { font-size:clamp(52px,6vw,84px); }
.hero h1 span { font-size:28px; }
.hero-text { font-size:21px; margin:20px auto; }
.hero-video-link { display:block; max-width:370px; margin:16px auto; font-size:18px; }
.hero-footnote { font-size:15px; }
.chapter-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:1140px; margin:25px auto 0; }
.chapter-choice { display:flex; align-items:center; gap:20px; min-height:128px; padding:22px 25px; background:#0e213bea; border:1px solid #e6cf7655; border-radius:24px; color:#f7e7b7; text-decoration:none; box-shadow:0 6px 0 #061225; }
.chapter-choice:hover { border-color:#f5d173; background:#1a3555; }
.chapter-choice strong { display:block; font-size:23px; }
.chapter-choice small { display:block; font-size:17px; color:#b7cbdf; }
.chapter-choice > span:last-child { margin-left:auto; font-size:25px; }
.chapter-badge { flex:0 0 64px; height:64px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fcdda3,#b58a45); color:#17283e; font-weight:800; font-size:27px; }
.chapter-navigation { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.chapter-navigation a,.back-link { color:#f9db81; font-size:20px; text-decoration:none; }
.chapter-navigation select { font:inherit; border:1px solid #ccb36d; border-radius:12px; background:#102740; color:#fff0be; padding:10px 16px; }
.chapter-status { text-align:center; font-size:19px; margin:12px 0 0; }
.planet-map { width:100%; max-width:1160px; height:570px; position:relative; margin:auto; }
.planet-orbits { position:absolute; width:100%; height:100%; inset:0; pointer-events:none; }
.planet-orbits ellipse { stroke:#d8cda64d; stroke-width:2; stroke-dasharray:3 10; fill:none; }
.planet-orbits path { stroke:#b1c2dd30; stroke-width:1.5; stroke-dasharray:3 9; fill:none; }
.planet-node { position:absolute; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; width:clamp(140px,16vw,185px); height:clamp(140px,16vw,185px); border-radius:50%; transform:translate(-50%,-50%); border:2px solid #e8d9ab; background:radial-gradient(circle at 30% 24%,#e9d29a,#bba571 60%,#706344); color:#182533; box-shadow:inset -12px -13px 25px #453b2544,0 0 28px #f4d77a30; padding:22px; cursor:pointer; }
.planet-node strong { font:800 clamp(19px,2vw,25px)/1.3 'DM Sans',sans-serif; }
.planet-node small { font-size:15px; font-weight:600; }
.planet-node.is-locked { background:radial-gradient(circle at 35% 25%,#aaa082,#776f59); border-color:#9f9475; color:#142231; cursor:not-allowed; opacity:1; }
.planet-node.is-current { box-shadow:0 0 0 8px #f1d57b22,0 0 55px #f4d77a55; }
.planet-node.is-complete { background:radial-gradient(circle at 30% 25%,#bde9cf,#78af9a); }
.planet-node:not(:disabled):hover { filter:brightness(1.15); }
.planet-position-0 { left:82%; top:21%; }
.planet-position-1 { left:82%; top:70%; }
.planet-position-2 { left:50%; top:85%; }
.planet-position-3 { left:18%; top:70%; }
.planet-position-4 { left:18%; top:21%; }
.planet-position-5 { left:50%; top:38%; width:200px; height:200px; }
.review-cards { max-width:1050px; }
.review-card { min-height:156px; padding:24px 32px; }
.review-card h3 { font-size:28px; }
.review-card p { font-size:19px; }
.practice-panel { max-width:1050px; margin:26px auto 0; }
.practice-panel h3 { font-size:25px; }
.practice-panel p,.practice-stats span,.practice-explainer { font-size:18px; }
.modal-btn,.secondary-btn { font-size:18px; padding:14px 22px; }
.learning-dialog { max-width:1000px; width:calc(100% - 40px); }
.learning-dialog .modal-box { padding:30px 38px; }
.learning-dialog .lesson-image { width:auto; max-width:100%; height:min(48vh,430px); object-fit:contain; background:white; }
.learning-dialog h2 { font-size:35px; }
.lesson-meta,.lesson-counter,.feedback,.challenge-intro,.challenge-form { font-size:20px; }
.answer-options button { min-height:66px; font-size:21px; }
.dictionary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sign-card .sign-flip { min-height:330px; }
.sign-card img { height:250px; object-fit:contain; }
.sign-card b { font-size:23px; }
.sign-card small,.flip-hint,.card-details { font-size:17px; }
.search-field input { font-size:20px; }
.filter-group button { font-size:18px; }
.sentence-tabs { display:flex; gap:12px; margin:25px 0 30px; flex-wrap:wrap; }
.sentence-tabs button { padding:15px 22px; font:700 19px/1.4 'DM Sans',sans-serif; background:#132b47; border:1px solid #dfca8066; color:#efe6ca; border-radius:16px; cursor:pointer; }
.sentence-tabs button[aria-selected=true] { background:#f1ce73; color:#1d2c40; }
.sentence-video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.sentence-video-card { padding:22px; border:1px solid #f5d78955; border-radius:24px; background:#0e1f37f0; }
.sentence-video-card h2 { font-size:25px; line-height:1.45; min-height:76px; margin:8px 0 18px; }
.media-label { font-size:16px; color:#edcf79; letter-spacing:1px; }
.sentence-video-card video { display:block; width:100%; aspect-ratio:16/9; height:auto; max-height:none; background:#000; border-radius:14px; object-fit:contain; }
.sentence-video-card a { display:inline-block; color:#ffe499; font-size:18px; margin-top:16px; }
.video-error,.missing-phrases { padding:16px 20px; border:1px solid #eab97877; background:#483a2655; border-radius:14px; font-size:18px; }
#sentenceLookupForm label { display:block; font-size:21px; margin-bottom:12px; }
.sentence-input-row { display:flex; align-items:stretch; gap:16px; }
.sentence-input-row textarea { flex:1; min-width:0; background:#0d2038; color:#fff4d8; border:1px solid #8ca0bc; border-radius:14px; padding:18px; font:20px/1.5 'DM Sans',sans-serif; }
.sentence-board { margin-top:26px; padding:26px; border:1px solid #d8c48a55; border-radius:24px; background:#0d2138ed; }
.sentence-board h2 { font-size:29px; margin:0 0 24px; }
.phrase-picture-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.phrase-picture-grid figure { margin:0; background:#fff; border-radius:18px; overflow:hidden; max-width:600px; }
.phrase-picture-grid img { width:100%; height:320px; object-fit:contain; padding:12px; }
.phrase-picture-grid figcaption { background:#e9f1f4; color:#173145; padding:14px 20px; }
.phrase-picture-grid strong { display:block; font-size:25px; }
.phrase-picture-grid span { display:block; font-size:17px; }
.sentence-source-note { color:#c0d1de; font-size:17px; margin-top:20px; }
html[data-theme=light] .chapter-choice,html[data-theme=light] .sentence-video-card,html[data-theme=light] .sentence-board { background:#eaf6fbee; color:#183f5a; }
html[data-theme=light] .page-lead,html[data-theme=light] .sentence-source-note { color:#214f69; }
@media(max-width:900px) {
  nav { flex-wrap:wrap; }
  nav .nav-links { order:3; width:100%; justify-content:center; }
  nav .nav-links a:nth-child(n) { font-size:16px; }
  .sentence-video-grid { grid-template-columns:1fr; }
  .sentence-video-card h2 { min-height:0; }
  .dictionary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  nav { margin:10px auto 0; width:calc(100% - 20px); padding:14px; }
  nav .nav-links { overflow-x:auto; justify-content:flex-start; flex-wrap:nowrap; }
  nav .nav-links a:nth-child(n) { font-size:16px; padding:10px 12px; }
  main > section:not(.hero) { padding:26px 18px 38px; }
  .hero { padding:32px 22px; min-height:auto; }
  .hero-text { font-size:19px; }
  .chapter-catalog { grid-template-columns:1fr; gap:14px; }
  .chapter-choice { min-height:105px; padding:18px; gap:16px; }
  .chapter-choice strong { font-size:22px; }
  .chapter-navigation { align-items:flex-start; font-size:17px; }
  .chapter-navigation a,.back-link { font-size:18px; }
  .planet-map { height:670px; }
  .planet-node { width:135px; height:135px; padding:15px; }
  .planet-node strong { font-size:18px; }
  .planet-node small { font-size:14px; }
  .planet-position-0 { left:74%; top:13%; }
  .planet-position-1 { left:74%; top:46%; }
  .planet-position-2 { left:50%; top:87%; }
  .planet-position-3 { left:25%; top:67%; }
  .planet-position-4 { left:25%; top:13%; }
  .planet-position-5 { left:25%; top:40%; }
  .planet-orbits { display:none; }
  .review-card { padding:20px; grid-template-columns:1fr 60px; }
  .review-card h3 { font-size:25px; }
  .review-card p { font-size:18px; }
  .sentence-tabs { gap:8px; }
  .sentence-tabs button { flex:1 1 145px; padding:12px; font-size:18px; }
  .sentence-video-card { padding:16px; }
  .sentence-video-card h2 { font-size:23px; }
  .sentence-input-row { flex-direction:column; }
  .sentence-board { padding:18px; }
  .phrase-picture-grid { grid-template-columns:1fr; }
  .phrase-picture-grid img { height:310px; }
  .dictionary-grid { gap:12px; }
  .sign-card .sign-flip { min-height:250px; }
  .sign-card img { height:185px; }
  .sign-card b { font-size:20px; }
  .learning-dialog .modal-box { padding:22px; }
  .learning-dialog h2 { font-size:29px; }
  footer { flex-direction:column; align-items:center; text-align:center; }
}

.explore-btn { font-size:20px; padding:18px 30px; }
.learning-dialog .lesson-image { display:block; margin:0 auto 20px; }
@media(min-width:701px) and (max-width:1350px) {
 nav { display:grid; grid-template-columns:1fr auto auto; gap:14px; }
 nav .logo { grid-area:1/1; }
 nav #navAuthContainer { grid-area:1/2; }
 nav .nav-controls { grid-area:1/3; }
 nav .nav-links { grid-area:2/1/3/4; flex-wrap:nowrap; justify-content:center; }
}
