:root {
  color-scheme: light;
  --navy:#17324d; --teal:#087f83; --teal-dark:#075e62; --coral:#e66a4e;
  --gold:#f2b84b; --cream:#faf6ec; --ink:#24313d; --muted:#65727e;
  --line:#d8ddd8; --white:#fff; --pale:#eaf3f1; --orange-pale:#fff1dd;
  font-family: "Noto Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(180deg,#f3f8f7 0,#fff 26rem); min-height:100vh; }
.masthead { background:var(--navy); color:var(--white); border-bottom:7px solid var(--gold); }
.masthead__inner { max-width:1180px; margin:auto; padding:2rem 1.4rem; display:flex; gap:2rem; align-items:end; justify-content:space-between; }
.eyebrow { color:var(--gold); font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin:0 0 .45rem; font-size:.86rem; }
h1 { font-size:clamp(2.25rem,5vw,4.25rem); line-height:.95; margin:0; letter-spacing:-.04em; }
.intro { font-size:1.15rem; color:#dceae8; margin:1rem 0 0; }
.legend { display:grid; gap:.55rem; min-width:310px; font-size:.95rem; padding:1rem 1.1rem; background:#ffffff14; border:1px solid #ffffff2b; border-radius:14px; }
main { max-width:1180px; margin:auto; padding:1.35rem; }
.subject-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin:.1rem 0 1rem; }
.subject-tab { appearance:none; border:2px solid var(--navy); background:var(--white); color:var(--navy); border-radius:16px; padding:1rem 1.2rem; font:inherit; font-size:1.05rem; font-weight:900; cursor:pointer; }
.subject-tab[aria-selected="true"] { color:var(--white); background:var(--navy); }
.section-label { color:var(--teal-dark); font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin:.45rem 0 .7rem; }
.term-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; padding:.25rem .1rem 1rem; }
.term-group { min-width:0; border:1px solid var(--line); border-radius:16px; padding:.8rem; background:#ffffffc9; }
.term-group h3 { margin:0 0 .6rem; color:var(--navy); font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; }
.term-group__buttons { display:flex; gap:.55rem; overflow-x:auto; padding:.15rem .1rem .3rem; scrollbar-width:thin; }
.term-tab { appearance:none; border:2px solid var(--line); background:var(--white); color:var(--navy); border-radius:999px; padding:.72rem 1rem; font:inherit; font-weight:800; cursor:pointer; white-space:nowrap; }
.term-tab:hover { border-color:var(--teal); }
.term-tab[aria-selected="true"] { color:white; background:var(--teal); border-color:var(--teal); }
.term-tab:focus-visible, button:focus-visible { outline:4px solid var(--gold); outline-offset:3px; }
.concept { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:1.5rem; align-items:stretch; background:var(--cream); border:1px solid #e5decb; border-radius:24px; overflow:hidden; box-shadow:0 16px 40px #17324d12; }
.concept__copy { padding:clamp(1.4rem,4vw,2.6rem); display:flex; flex-direction:column; justify-content:center; }
.concept h2 { color:var(--navy); font-size:clamp(2.5rem,6vw,5rem); letter-spacing:-.05em; line-height:1; margin:0 0 1rem; }
.definition { font-size:clamp(1.35rem,2.3vw,2rem); line-height:1.3; font-weight:800; margin:0; }
.example { margin:1.35rem 0 0; font-size:1.08rem; line-height:1.55; }
.example strong { color:var(--coral); }
.english-audio { margin-top:1.4rem; padding-top:1rem; border-top:1px solid #d8d2c1; }
.english-audio > span { color:var(--muted); font-size:.88rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.related-concept { margin-top:1.15rem; border:1px solid #d8d2c1; border-radius:16px; padding:1rem; background:#fffaf0; }
.related-concept h3 { margin:.15rem 0 .35rem; color:var(--navy); font-size:1.45rem; }
.related-concept > p:not(.form-label) { margin:0; line-height:1.45; font-weight:700; }
.form-label { margin:0; color:var(--coral); font-size:.78rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.language-access { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; margin:1rem 0 0; padding:1rem; background:var(--navy); color:white; border-radius:18px; box-shadow:0 9px 24px #17324d1a; }
.language-jumps { display:flex; gap:.45rem; overflow-x:auto; padding:.15rem; scrollbar-width:thin; }
.language-jumps button { appearance:none; border:1px solid #ffffff70; border-radius:999px; padding:.58rem .78rem; color:white; background:#ffffff12; font:inherit; font-weight:800; cursor:pointer; white-space:nowrap; }
.language-jumps button:hover { background:var(--teal); border-color:var(--teal); }
.concept__visual { min-height:330px; background:white; display:grid; place-items:center; padding:1rem; }
.concept__visual img { width:100%; height:100%; max-height:430px; object-fit:cover; border-radius:16px; }
.concept__visual--elal { align-content:center; gap:1rem; color:var(--navy); font-size:1.15rem; font-weight:900; background:linear-gradient(145deg,#fff8e8,#eaf3f1); }
.book-mark { display:grid; place-items:center; width:150px; height:150px; border-radius:32px 32px 32px 6px; color:var(--white); background:var(--teal); box-shadow:18px 18px 0 var(--gold); font-family:Georgia,serif; font-size:4.2rem; }
.languages-title { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:2rem 0 1rem; }
.languages-title h3 { font-size:1.6rem; color:var(--navy); margin:0; }
.languages-title p { color:var(--muted); margin:0; }
.language-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.language-card { border:1px solid var(--line); border-radius:18px; padding:1.15rem; background:var(--white); box-shadow:0 7px 20px #17324d0a; }
.language-card:focus { outline:4px solid var(--gold); outline-offset:3px; }
.language-card h4 { color:var(--teal-dark); font-size:1rem; margin:0 0 .8rem; text-transform:uppercase; letter-spacing:.06em; }
.translated-word { font-size:1.65rem; font-weight:850; margin:.1rem 0 .45rem; overflow-wrap:anywhere; }
.translated-definition { font-size:1rem; line-height:1.55; margin:0; min-height:3.1em; }
.audio-row { display:flex; gap:.65rem; flex-wrap:wrap; margin-top:1rem; }
.audio-button { appearance:none; border:0; border-radius:12px; min-height:48px; padding:.72rem 1rem; display:inline-flex; align-items:center; gap:.55rem; font:inherit; font-weight:850; cursor:pointer; color:var(--teal-dark); background:var(--pale); }
.audio-button.definition-audio { color:var(--navy); background:var(--orange-pale); }
.audio-button:hover { filter:brightness(.96); transform:translateY(-1px); }
.audio-button.playing { color:white; background:var(--coral); }
.speaker { width:1.15rem; height:1.15rem; fill:currentColor; flex:none; }
.unavailable { margin-top:1rem; padding:.7rem .85rem; border-radius:10px; color:var(--muted); background:#f1f3f3; font-size:.93rem; font-style:italic; }
.approximation { margin:.6rem 0 0; color:var(--muted); font-size:.88rem; font-style:italic; }
.related-language { margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line); }
.vocab-game { scroll-margin-top:1rem; margin:clamp(3rem,8vw,6rem) 0 1rem; }
.game-shell { position:relative; overflow:hidden; padding:clamp(1.25rem,4vw,2.5rem); color:var(--white); background:
  radial-gradient(circle at 100% 0,#167d84 0,transparent 34%),
  radial-gradient(circle at 0 100%,#244d73 0,transparent 38%),var(--navy);
  border:4px solid var(--gold); border-radius:28px; box-shadow:0 22px 48px #17324d2e;
}
.game-shell::after { content:""; position:absolute; width:180px; height:180px; right:-85px; bottom:-95px; border:22px solid #ffffff0c; border-radius:50%; pointer-events:none; }
.game-start,.game-results { min-height:430px; display:grid; align-content:center; justify-items:center; text-align:center; }
.game-kicker { color:var(--gold); font-size:1.35rem; letter-spacing:.6rem; margin-left:.6rem; }
.game-label { margin:0 0 .5rem; color:var(--gold); font-size:.88rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.game-shell h2 { margin:0; color:var(--white); font-size:clamp(2rem,5vw,3.8rem); line-height:1; letter-spacing:-.035em; }
.game-intro { max-width:720px; margin:1rem auto 1.5rem; font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.55; color:#e4efef; }
.game-subjects { width:100%; max-width:900px; border:0; padding:0; margin:0 0 1.35rem; }
.game-subjects legend { width:100%; margin-bottom:.75rem; font-weight:900; }
.game-subject-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.game-subject-buttons button,.game-secondary,.game-hint { appearance:none; min-height:50px; border:2px solid #ffffff62; border-radius:14px; padding:.7rem 1rem; color:var(--white); background:#ffffff12; font:inherit; font-weight:850; cursor:pointer; }
.game-subject-buttons button[aria-pressed="true"] { color:var(--navy); background:var(--gold); border-color:var(--gold); }
.game-primary,.game-next { appearance:none; min-height:54px; border:0; border-radius:14px; padding:.8rem 1.25rem; color:var(--navy); background:var(--gold); font:inherit; font-size:1.05rem; font-weight:950; cursor:pointer; box-shadow:0 6px 0 #b97810; }
.game-primary:hover,.game-next:hover { filter:brightness(1.05); transform:translateY(-1px); }
.game-note { margin:1rem 0 0; color:#c9dcdf; font-size:.94rem; }
.game-score-row { display:flex; justify-content:space-between; gap:1rem; color:#f5f8f8; font-weight:850; }
.game-score-row span:nth-child(2) { color:var(--gold); }
.game-progress { height:12px; margin:.75rem 0 1.3rem; overflow:hidden; background:#ffffff21; border-radius:999px; }
.game-progress span { display:block; height:100%; background:var(--gold); border-radius:inherit; transition:width .25s ease; }
.game-clue { display:grid; grid-template-columns:220px 1fr; gap:1.5rem; align-items:center; padding:1rem; background:#ffffff12; border:1px solid #ffffff29; border-radius:22px; }
.game-clue img { width:220px; aspect-ratio:1; object-fit:cover; border-radius:16px; border:3px solid var(--white); }
.game-clue h2 { font-size:clamp(1.55rem,3vw,2.4rem); }
.game-definition { margin:.8rem 0 1rem; color:var(--white); font-size:clamp(1.15rem,2.1vw,1.55rem); line-height:1.45; font-weight:800; }
.game-listen { appearance:none; min-height:50px; border:0; border-radius:13px; padding:.7rem 1rem; display:inline-flex; align-items:center; gap:.55rem; color:var(--navy); background:var(--white); font:inherit; font-weight:900; cursor:pointer; }
.game-listen.playing { color:var(--white); background:var(--coral); }
.game-answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }
.game-answer { appearance:none; min-height:72px; border:3px solid transparent; border-radius:17px; padding:.8rem 1rem; display:flex; align-items:center; gap:.8rem; color:var(--navy); background:var(--white); font:inherit; font-size:1.08rem; font-weight:900; text-align:left; cursor:pointer; box-shadow:0 5px 0 #cad5d4; }
.game-answer > span { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:50%; color:var(--white); background:var(--teal); }
.game-answer:hover:not(:disabled) { border-color:var(--gold); transform:translateY(-1px); }
.game-answer.correct { color:#064f46; background:#dff7ef; border-color:#21a589; box-shadow:0 5px 0 #19836d; }
.game-answer.incorrect { color:#702716; background:#ffe8e1; border-color:var(--coral); box-shadow:none; }
.game-answer.eliminated { opacity:.42; text-decoration:line-through; box-shadow:none; }
.game-answer:disabled { cursor:not-allowed; }
.game-actions { display:flex; justify-content:space-between; gap:.8rem; margin-top:1rem; }
.game-next { margin-left:auto; }
.game-hint:disabled { opacity:.55; cursor:not-allowed; }
.game-feedback { min-height:1.7em; margin-top:1rem; font-size:1.05rem; font-weight:850; }
.game-feedback.success { color:#a9f3de; }
.game-feedback.try-again { color:#ffd4c9; }
.game-trophy { display:grid; place-items:center; width:110px; height:110px; margin-bottom:1rem; border-radius:50%; color:var(--navy); background:var(--gold); font-size:4rem; box-shadow:0 0 0 12px #ffffff14; }
.game-final-score { margin:1.2rem 0 .3rem; font-size:1.35rem; }
.game-results > p:not(.game-label) { max-width:650px; line-height:1.5; }
.game-result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:1.2rem; }
footer { max-width:1180px; margin:1rem auto 3rem; padding:0 1.35rem; color:var(--muted); font-size:.9rem; }
@media (max-width:800px) {
  .masthead__inner { align-items:start; flex-direction:column; }
  .legend { min-width:0; width:100%; }
  .concept { grid-template-columns:1fr; }
  .concept__visual { min-height:250px; order:-1; }
  .language-grid { grid-template-columns:1fr; }
  .languages-title { align-items:start; flex-direction:column; }
  .subject-nav { grid-template-columns:1fr; }
  .term-nav { grid-template-columns:1fr; }
  .language-access { grid-template-columns:1fr; }
  .game-subject-buttons,.game-answers { grid-template-columns:1fr; }
  .game-clue { grid-template-columns:1fr; }
  .game-clue img { width:100%; max-height:260px; aspect-ratio:16/9; }
  .game-score-row { flex-wrap:wrap; }
  .game-actions { align-items:stretch; flex-direction:column; }
  .game-next { margin-left:0; }
}
@media (prefers-reduced-motion:no-preference) {
  .term-tab,.audio-button,.game-answer,.game-primary,.game-next,.game-progress span { transition:transform .15s ease,background .15s ease,border-color .15s ease,width .25s ease; }
}