/* Rangers' English brand: dark green #114d0f, gold #dec909, light grey cards, Noto Sans. */
:root {
  --green: #114d0f;
  --green-hover: #0c3a0b;
  --green-soft: #e7efe6;
  --green-line: #b9cfb7;
  --gold: #dec909;
  --gold-hover: #c9b508;
  --bg: #ffffff;
  --card: #f2f2f2;
  --surface: #ffffff;
  --text: #1d2a1c;
  --muted: #586557;
  --line: #d9ded8;
  --warn-bg: #fdf6d3;
  --warn-ink: #5f5200;
  --error: #b3261e;
  --grammar: #114d0f;
  --vocabulary: #3f7d2c;
  --reading: #6b4a3a;
  --listening: #8a7a04;
  --radius: 20px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 "Noto Sans", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
:lang(ja) body, body:lang(ja) { font-family: "Noto Sans JP", "Noto Sans", system-ui, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; }
:lang(ja) { line-break: strict; }
[lang="en"] { font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* The same soft geometric background as rangersenglish.com */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22640%22%20height%3D%22480%22%20viewBox%3D%220%200%20640%20480%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cstyle%3Erect%7Bopacity%3A.5%7Dpolygon%7Bopacity%3A.75%7D%3C%2Fstyle%3E%3ClinearGradient%20id%3D%22a%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%22%20y1%3D%22239.6%22%20x2%3D%22640%22%20y2%3D%22239.6%22%20gradientTransform%3D%22matrix(1%200%200%20-1%200%20479.5)%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22transparent%22%2F%3E%3Cstop%20offset%3D%22.37%22%20stop-color%3D%22rgba(17%2C77%2C15%2C0.278)%22%2F%3E%3Cstop%20offset%3D%22.77%22%20stop-color%3D%22transparent%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22rgba(17%2C77%2C15%2C0.278)%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20fill%3D%22url(%23a)%22%20width%3D%22640%22%20height%3D%22479.8%22%2F%3E%3ClinearGradient%20id%3D%22b%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22180.4%22%20y1%3D%22333.5%22%20x2%3D%2272.1%22%20y2%3D%22521.1%22%20gradientTransform%3D%22matrix(1%200%200%20-1%200%20479.5)%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22rgba(17%2C77%2C15%2C0.278)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%2F%3E%3C%2FlinearGradient%3E%3Cpolygon%20fill%3D%22url(%23b)%22%20points%3D%220%2C69%2092.3%2C196.8%20232%2C0%200%2C0%22%2F%3E%3ClinearGradient%20id%3D%22c%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%22%20y1%3D%22251.6%22%20x2%3D%22349.5%22%20y2%3D%22251.6%22%20gradientTransform%3D%22matrix(1%200%200%20-1%200%20479.5)%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22rgba(17%2C77%2C15%2C0.278)%22%2F%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22transparent%22%2F%3E%3C%2FlinearGradient%3E%3Cpolygon%20fill%3D%22url(%23c)%22%20points%3D%2292.3%2C196.8%200%2C170.9%200%2C284.9%22%2F%3E%3ClinearGradient%20id%3D%22d%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22307.3%22%20y1%3D%22161.2%22%20x2%3D%22307.3%22%20y2%3D%22479.5%22%20gradientTransform%3D%22matrix(1%200%200%20-1%200%20479.5)%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22rgba(17%2C77%2C15%2C0.278)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%2F%3E%3C%2FlinearGradient%3E%3Cpolygon%20fill%3D%22url(%23d)%22%20points%3D%2292.7%2C196.4%20514.7%2C0%20522%2C0%20328.7%2C318.3%22%2F%3E%3ClinearGradient%20id%3D%22e%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22540.3%22%20y1%3D%22470.1%22%20x2%3D%22640%22%20y2%3D%22470.1%22%20gradientTransform%3D%22matrix(1%200%200%20-1%200%20479.5)%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23808080%22%2F%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22transparent%22%2F%3E%3C%2FlinearGradient%3E%3Cpolygon%20fill%3D%22url(%23e)%22%20points%3D%22540.3%2C0%20640%2C18.7%20640%2C0%22%2F%3E%3ClinearGradient%20id%3D%22f%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22327.3%22%20y1%3D%22142.7%22%20x2%3D%22640%22%20y2%3D%22142.7%22%20gradientTransform%3D%22matrix(1%200%200%20-1%200%20479.5)%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22rgba(17%2C77%2C15%2C0.278)%22%2F%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22transparent%22%2F%3E%3C%2FlinearGradient%3E%3Cpolygon%20fill%3D%22url(%23f)%22%20points%3D%22327.3%2C317.1%20571.3%2C235.4%20640%2C276.3%20640%2C438.2%22%2F%3E%3ClinearGradient%20id%3D%22g%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22291.9%22%20y1%3D%2222.7%22%20x2%3D%22129.2%22%20y2%3D%22304.6%22%20gradientTransform%3D%22matrix(1%200%200%20-1%200%20479.5)%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22rgba(17%2C77%2C15%2C0.278)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%2F%3E%3C%2FlinearGradient%3E%3Cpolygon%20fill%3D%22url(%23g)%22%20points%3D%2292.3%2C196.2%20189.9%2C480%20251.7%2C480%20327.5%2C318.4%22%2F%3E%3C%2Fsvg%3E") center / cover no-repeat;
}

/* ---------- header bar, as on the main site ---------- */
.site-header { background: var(--green); color: #fff; }
.site-bar {
  max-width: 1040px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: 220px; height: auto; }
.lang-switch { display: flex; gap: 6px; }
.lang-btn {
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  padding: 5px 13px; border-radius: 99px; border: 1px solid rgb(255 255 255 / 0.55);
  background: transparent; color: #fff; letter-spacing: 0.02em;
}
.lang-btn:hover { background: rgb(255 255 255 / 0.12); }
.lang-btn[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--green); }
.lang-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.shell { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 28px 16px 40px; }
.loading { text-align: center; color: var(--muted); }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px clamp(18px, 4vw, 40px);
}
h1 { font-size: clamp(1.55rem, 4vw, 2rem); line-height: 1.25; margin: 0 0 12px; color: var(--green); letter-spacing: 0.04em; }
h2 { font-size: 1.05rem; margin: 22px 0 6px; color: var(--green); letter-spacing: 0.04em; }
h1:focus, h2:focus { outline: none; }
.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.lead { font-size: 1.06rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.small { font-size: 0.88rem; }
.warning { background: var(--warn-bg); color: var(--warn-ink); padding: 12px 14px; border-radius: 12px; }
.facts { padding-left: 1.1em; margin: 18px 0; }
.facts li { margin: 6px 0; }
.facts li::marker { color: var(--green); }
.facts strong { color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 28px; }
.btn {
  font: inherit; font-weight: 700; border-radius: 16px; padding: 12px 26px; cursor: pointer;
  border: 2px solid transparent; display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0.03em;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:focus-visible, .option:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
/* Gold like the site's buttons, with green text so it stays readable. */
.btn.primary { background: var(--gold); color: var(--green); }
.btn.primary:hover:not(:disabled) { background: var(--gold-hover); }
.btn.primary:disabled { background: #e6e2bd; color: #8c8f86; cursor: not-allowed; }
.btn.ghost { background: transparent; border-color: var(--green-line); color: var(--green); }
.btn.ghost:hover { background: var(--green-soft); }
.btn.audio { background: var(--green); color: #fff; font-size: 1.02rem; }
.btn.audio:hover:not(:disabled) { background: var(--green-hover); }
.btn.audio:disabled { opacity: 0.6; cursor: default; }
.btn svg { width: 24px; height: 24px; }

/* ---------- forms ---------- */
.form { display: grid; gap: 6px; margin-top: 8px; }
.form label { font-weight: 700; font-size: 0.95rem; margin-top: 10px; color: var(--green); }
.form input, .form select, .results textarea {
  font: inherit; color: var(--text); background: var(--surface); width: 100%;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px;
}
.form select { appearance: auto; }
.form input:focus, .form select:focus, .results textarea:focus { outline: 3px solid var(--green-soft); border-color: var(--green); }
.prior { border: 1.5px dashed var(--green-line); border-radius: 14px; padding: 6px 16px 16px; margin: 16px 0 0; display: grid; gap: 6px; min-width: 0; }
.prior legend { font-weight: 700; color: var(--green); padding: 0 6px; }
.prior p { margin: 4px 0 0; }
.prior label { font-weight: 700; font-size: 0.95rem; margin-top: 10px; color: var(--green); }
.prior-more { display: grid; gap: 6px; }
.results textarea { resize: vertical; min-height: 96px; margin-top: 6px; }
.thanks { background: var(--green-soft); color: var(--green); font-weight: 700; padding: 12px 14px; border-radius: 12px; }
.prior-compare { background: var(--surface); border-radius: 14px; padding: 4px 18px 12px; margin-top: 18px; border-left: 4px solid var(--green-line); }
.prior-compare h3 { font-size: 0.98rem; color: var(--green); margin: 14px 0 4px; }
.field-error { color: var(--error); min-height: 1.2em; margin: 6px 0 0; font-size: 0.92rem; }

/* ---------- questions ---------- */
.progress { height: 8px; background: #dfe4de; border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.progress .bar { height: 100%; background: var(--green); border-radius: 99px; transition: width 0.3s ease; }
.qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.92rem; margin-bottom: 14px; }
.chip { font-weight: 700; font-size: 0.8rem; padding: 3px 12px; border-radius: 99px; color: #fff; letter-spacing: 0.04em; }
.chip.grammar { background: var(--grammar); }
.chip.vocabulary { background: var(--vocabulary); }
.chip.reading { background: var(--reading); }
.chip.listening { background: var(--listening); }
.instructions { color: var(--muted); margin: 0 0 14px; }

.passage { background: var(--surface); border-radius: 14px; padding: 18px 22px; margin-bottom: 8px; border-left: 4px solid var(--green); }
.passage p { margin: 0 0 10px; }
.passage p:last-child { margin-bottom: 0; }
.passage-title { margin-top: 0; }
.player { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; }

.q { padding-top: 14px; }
.q + .q { border-top: 1px solid var(--line); margin-top: 18px; }
.qnum { font-size: 0.85rem; font-weight: 700; color: var(--green); margin: 0 0 4px; }
.prompt { font-size: 1.12rem; font-weight: 600; margin: 0 0 14px; }
.picture { display: block; width: 120px; height: 120px; margin: 4px auto 14px; }
.options { display: grid; gap: 10px; }
.option {
  font: inherit; text-align: left; color: var(--text); background: var(--surface);
  border: 2px solid transparent; border-radius: 14px; padding: 12px 14px; cursor: pointer;
  display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.option:hover { border-color: var(--green-line); }
.option[aria-checked="true"] { border-color: var(--green); background: var(--green-soft); }
.letter {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--green-line);
  display: grid; place-items: center; font-size: 0.82rem; font-weight: 700; color: var(--green);
}
.option[aria-checked="true"] .letter { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------- results ---------- */
.results .eyebrow { text-align: center; text-transform: none; letter-spacing: 0.04em; font-size: 0.9rem; }
.badge { display: flex; flex-direction: column; align-items: center; margin: 8px 0 12px; }
.badge-level {
  font-size: clamp(3rem, 12vw, 4.5rem); font-weight: 700; line-height: 1; color: #fff;
  background: var(--green); border-radius: 22px; padding: 18px 32px; box-shadow: inset 0 -6px 0 var(--gold);
}
.badge-name { font-size: 1.2rem; font-weight: 700; margin-top: 12px; color: var(--green); }
.cando p { margin: 0 0 6px; }
.skill-row { display: grid; grid-template-columns: 110px 1fr 104px; align-items: center; gap: 12px; margin: 10px 0; }
.skill-name { font-weight: 700; font-size: 0.95rem; }
.skill-level { font-weight: 700; text-align: right; color: var(--green); }
.scale { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.step { height: 12px; border-radius: 4px; background: #dfe4de; }
.step.on.grammar { background: var(--grammar); }
.step.on.vocabulary { background: var(--vocabulary); }
.step.on.reading { background: var(--reading); }
.step.on.listening { background: var(--listening); }
.fineprint { font-size: 0.86rem; color: var(--muted); margin-top: 22px; }
.results section .fineprint { margin-top: 8px; }
h3 { font-size: 1rem; margin: 0 0 4px; color: var(--green); }
.small a, .muted a { color: var(--green); }

/* comparison ladder */
.ladder-wrap { overflow-x: auto; }
.ladder { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 0.92rem; }
.ladder th, .ladder td { padding: 8px 10px; text-align: center; background: var(--surface); }
.ladder thead th { background: transparent; color: var(--muted); font-size: 0.8rem; font-weight: 700; padding-bottom: 2px; }
.ladder tbody th { text-align: left; font-weight: 700; color: var(--green); border-radius: 10px 0 0 10px; white-space: nowrap; }
.ladder tbody td:last-child { border-radius: 0 10px 10px 0; }
.ladder tr.is-you th, .ladder tr.is-you td { background: var(--green); color: #fff; font-weight: 700; }
.ladder tr.is-goal th, .ladder tr.is-goal td { background: #fbf6cf; }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.03em; }
.tag.you { background: var(--gold); color: var(--green); }
.tag.goal { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-line); }
.tag.strong { background: var(--green); color: #fff; margin: 0; }
.tag.focus { background: var(--gold); color: var(--green); margin: 0; }
.tag.open { background: var(--green); color: #fff; }
.tag.soon { background: #dfe4de; color: var(--muted); }
.tag.prev { background: #fff; color: var(--green); border: 1px dashed var(--green); }

.cando-list { padding-left: 1.2em; margin: 6px 0 10px; }
.cando-list li { margin: 4px 0; }
.cando-list li::marker { color: var(--green); }
.goals { display: grid; gap: 12px; margin-top: 18px; }
.goal-card { background: var(--surface); border-radius: 14px; padding: 16px 18px; border-top: 4px solid var(--gold); }
.goal-card p { margin: 2px 0 6px; }
.skill-tag { text-align: right; min-width: 0; }
.class-card { background: var(--surface); border-radius: 14px; padding: 14px 16px; margin: 10px 0; border-left: 4px solid var(--green); }
.class-card.soon { border-left-color: #c9cfc8; opacity: 0.85; }
.class-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.class-head .tag { margin: 0; flex: none; }
.class-card p { margin: 4px 0 0; }
.actions.left { justify-content: flex-start; margin-top: 14px; }
a.btn { text-decoration: none; }
.debug { margin-top: 16px; font-size: 0.8rem; }
.debug pre { white-space: pre-wrap; background: var(--surface); padding: 10px; border-radius: 8px; max-height: 320px; overflow: auto; }

.site-footer { text-align: center; font-size: 0.78rem; color: var(--muted); padding: 0 16px 22px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.site-footer a { color: var(--green); }

@media (max-width: 480px) {
  .brand img { width: 160px; }
  .site-bar { min-height: 56px; }
  .actions .btn { flex: 1; justify-content: center; }
  .skill-row { grid-template-columns: 84px 1fr 86px; gap: 8px; }
  .ladder { font-size: 0.82rem; }
  .ladder th, .ladder td { padding: 7px 6px; }
  .card { border-radius: 16px; }
}