:root {
  color-scheme: light;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: #28213a;
  background: #fffaf0;
  font-synthesis: none;
  --ink: #28213a;
  --muted: #6d6178;
  --purple: #7b4ed8;
  --purple-dark: #31264e;
  --pink: #e84473;
  --yellow: #ffd883;
  --mint: #a9e4d7;
  --paper: #fffdf8;
  --line: #e8dfd0;
  --shadow: 0 18px 50px rgb(70 47 89 / 12%);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 10% 0%, #fff2bd 0 15%, transparent 40%), radial-gradient(circle at 95% 12%, #e7d9ff 0 12%, transparent 34%), #fffaf0; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 99; top: 8px; left: 8px; padding: 10px 14px; border-radius: 12px; color: #fff; background: var(--purple-dark); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.page-sparkles span { position: fixed; z-index: -1; color: rgb(90 54 136 / 9%); font-size: clamp(2rem, 7vw, 6rem); font-weight: 1000; transform: rotate(-12deg); }
.page-sparkles span:nth-child(1) { top: 16%; left: 3%; }
.page-sparkles span:nth-child(2) { top: 64%; right: 2%; transform: rotate(14deg); }
.page-sparkles span:nth-child(3) { top: 45%; left: 1%; }
.page-sparkles span:nth-child(4) { top: 7%; right: 7%; }
.page-sparkles span:nth-child(5) { bottom: 8%; left: 3%; }
.game-header { display: flex; width: min(1160px, calc(100% - 40px)); min-height: 66px; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto; }
.lab-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid rgb(49 38 78 / 11%); border-radius: 999px; color: var(--purple-dark); background: rgb(255 255 255 / 68%); box-shadow: 0 5px 14px rgb(62 46 83 / 8%); font-size: .78rem; font-weight: 900; }
.lab-badge span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: #f2e9ff; font-size: .92rem; }
.score-pill { display: flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid #ead9a8; border-radius: 999px; background: rgb(255 255 255 / 72%); color: #765c1d; font-size: .82rem; }
.score-pill > span:first-child { color: #e9a800; font-size: 1.15rem; }
main { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr); align-items: center; gap: 48px; min-height: 280px; padding: 32px 42px; overflow: hidden; border-radius: 34px; color: #fff; background: linear-gradient(125deg, #31264e, #65449c 66%, #8056c7); box-shadow: 0 22px 60px rgb(72 38 111 / 22%); }
.hero::before { position: absolute; right: -84px; bottom: -125px; width: 310px; height: 310px; border: 28px solid rgb(255 255 255 / 6%); border-radius: 50%; content: ""; pointer-events: none; }
.hero-copy, .word-machine { position: relative; z-index: 1; }
.eyebrow, .step-label { margin: 0 0 6px; font-size: .76rem; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.hero .eyebrow { color: #f5d66f; }
h1 { margin: 0; font-size: clamp(3.2rem, 7vw, 6rem); line-height: .92; letter-spacing: -.055em; }
h1 span { color: #ffd45d; }
.hero-text { max-width: 600px; margin: 18px 0 0; color: rgb(255 255 255 / 82%); font-family: system-ui, sans-serif; font-size: clamp(1rem, 1.7vw, 1.25rem); font-weight: 650; line-height: 1.55; }
.word-machine { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 13px; padding: 42px 24px; border: 2px solid rgb(255 255 255 / 25%); border-radius: 28px; background: rgb(33 17 56 / 30%); box-shadow: inset 0 1px rgb(255 255 255 / 22%); }
.machine-word { padding: 16px 13px; border-radius: 15px; color: var(--purple-dark); background: #fff; box-shadow: 0 7px 0 #d9cfe4; font-size: clamp(1.05rem, 2.1vw, 1.5rem); font-weight: 950; text-align: center; }
.machine-output { color: #754318; background: #ffe48e; box-shadow: 0 7px 0 #d9aa38; }
.machine-arrow { color: #fff; font-size: 1.7rem; font-weight: 1000; }
.machine-spark { position: absolute; top: 12px; right: 18px; color: #ffd45d; font-size: 1.65rem; }
.mode-tabs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; width: min(860px, calc(100% - 32px)); margin: -25px auto 22px; padding: 7px; border: 1px solid rgb(72 47 89 / 12%); border-radius: 23px; background: rgb(255 253 248 / 94%); box-shadow: 0 12px 32px rgb(70 47 89 / 14%); backdrop-filter: blur(14px); }
.mode-tab { display: flex; min-height: 64px; align-items: center; justify-content: center; gap: 10px; padding: 8px 13px; border: 0; border-radius: 17px; color: #6e6376; background: transparent; cursor: pointer; text-align: left; }
.mode-tab span:last-child { display: grid; gap: 2px; }
.mode-tab strong { color: inherit; font-size: .95rem; }
.mode-tab small { font: 650 .68rem system-ui, sans-serif; }
.mode-tab.active { color: #fff; background: var(--purple); box-shadow: 0 7px 15px rgb(90 54 136 / 23%); }
.tab-number { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .8rem; font-weight: 950; opacity: .86; }
.lab-shell { min-height: 580px; }
.lab-view { animation: reveal .28s ease both; }
.lab-view.active { display: grid; }
#learnView { grid-template-columns: 1.15fr .85fr; gap: 20px; }
.lesson-card, .challenge-card, .translator-card, .rule-builder, .test-bench { border: 1px solid var(--line); border-radius: 28px; background: rgb(255 253 248 / 94%); box-shadow: var(--shadow); }
.lesson-card, .challenge-card, .translator-card, .rule-builder, .test-bench { padding: clamp(20px, 3vw, 34px); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading.compact { margin-bottom: 12px; }
.step-label { color: #956929; }
h2 { margin: 0; color: var(--purple-dark); font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.08; letter-spacing: -.035em; }
.heading-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 15px; background: #f2e9ff; font-size: 1.55rem; }
.lesson-intro { margin: 0 0 22px; color: var(--muted); font: 650 .95rem/1.55 system-ui, sans-serif; }
.rule-map { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.creekside-pig-companion { pointer-events: none; }
.creekside-pig-companion img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center bottom; }
.creekside-pig-learn { display: flex; justify-content: flex-end; min-height: 84px; margin: 8px 4px -18px 0; }
.creekside-pig-learn img { width: 84px; max-height: 104px; }
.rule-card { position: relative; min-height: 260px; padding: 23px 18px 18px; border: 2px solid transparent; border-radius: 21px; }
.vowel-rule { border-color: #8bd6c1; background: #ebfbf5; }
.consonant-rule { border-color: #efacc0; background: #fff0f5; }
.rule-if { position: absolute; top: -12px; left: 17px; padding: 5px 10px; border-radius: 999px; color: #fff; background: #3e9e83; font-size: .67rem; font-weight: 1000; letter-spacing: .12em; }
.consonant-rule .rule-if { background: #ce456d; }
.rule-card h3 { margin: 9px 0 10px; color: var(--ink); font-size: 1.06rem; }
.rule-card > p { min-height: 36px; margin: 0 0 15px; color: var(--muted); font: 650 .82rem/1.4 system-ui, sans-serif; }
.letter-row { color: #26876e !important; font-weight: 850 !important; letter-spacing: .08em; }
.rule-action { min-height: 67px; padding: 11px; border-radius: 13px; background: rgb(255 255 255 / 70%); color: #5f5666; font: 700 .76rem/1.45 system-ui, sans-serif; }
.rule-action span { display: block; color: #a07733; font-size: .61rem; font-weight: 950; letter-spacing: .1em; }
.rule-action b { color: var(--purple); font-size: 1rem; }
.example-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 14px; font-size: .82rem; }
.example-row strong { color: var(--purple); }
.challenge-card { align-self: start; background: linear-gradient(160deg, #fffdf8, #fff4c9); }
.challenge-progress { padding: 7px 10px; border-radius: 999px; color: #7a5a1f; background: #ffeba3; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.challenge-prompt { margin: 10px 0 19px; color: #5f5666; font: 650 1rem/1.45 system-ui, sans-serif; }
.challenge-prompt strong { display: block; margin-top: 8px; color: var(--purple-dark); font-family: inherit; font-size: 1.55rem; }
.quiz-hint { margin: -10px 0 17px; color: var(--muted); font: 700 .76rem/1.35 system-ui, sans-serif; }
.answer-grid { display: grid; gap: 9px; }
.answer-button { min-height: 52px; padding: 11px 15px; border: 2px solid #e4d9c5; border-radius: 15px; color: var(--ink); background: #fff; font-weight: 850; cursor: pointer; }
.answer-button:hover { border-color: #a98ac9; transform: translateY(-1px); }
.answer-button.correct { border-color: #54b596; color: #195b49; background: #e2f8f0; }
.answer-button.wrong { border-color: #e77b96; color: #842c48; background: #fff0f4; }
.feedback { min-height: 46px; margin-top: 12px; color: var(--muted); font: 700 .84rem/1.4 system-ui, sans-serif; }
.primary-button, .soft-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border-radius: 14px; font-weight: 900; cursor: pointer; }
.primary-button { border: 0; color: #fff; background: var(--purple); box-shadow: 0 6px 0 var(--purple-dark); }
.primary-button:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--purple-dark); }
.soft-button { border: 1px solid #ded2e8; color: var(--purple-dark); background: #f7f0fc; }
.next-button { width: 100%; }
.translator-card { width: min(850px, 100%); margin: 0 auto; }
.field-label, .builder-group > label:not(.switch-row), .group-label { display: block; margin: 0 0 7px; color: #5c5066; font-size: .76rem; font-weight: 900; }
textarea, input[type="text"] { width: 100%; border: 2px solid #ded4e5; border-radius: 16px; color: var(--ink); background: #fff; outline: none; }
textarea { display: block; min-height: 128px; padding: 16px; resize: vertical; font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.5; }
textarea:focus, input[type="text"]:focus { border-color: #8761ad; box-shadow: 0 0 0 4px rgb(135 97 173 / 14%); }
.text-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.output-block { margin-top: 24px; padding: 18px; border: 2px solid #9cdcc9; border-radius: 21px; background: #ecfbf6; }
.output-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #347964; font-size: .7rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
#translatedText, #customOutput { display: block; min-height: 84px; color: var(--purple-dark); font-family: system-ui, sans-serif; font-size: clamp(1.15rem, 2.5vw, 1.55rem); font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.output-actions { justify-content: flex-end; }
.creekside-pig-output { display: flex; justify-content: flex-end; min-height: 52px; margin: 2px 2px 0 0; }
.creekside-pig-output img { width: 60px; max-height: 76px; }
.word-work { margin-top: 19px; border-top: 1px solid var(--line); }
.word-work summary { padding: 17px 2px 0; color: var(--purple); font-size: .82rem; font-weight: 900; cursor: pointer; }
.breakdown-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 13px; }
.breakdown-item { padding: 11px; border-radius: 12px; background: #f8f3eb; font: 650 .74rem/1.4 system-ui, sans-serif; }
.breakdown-item strong { display: block; color: var(--purple); font-size: .85rem; }
.invent-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 20px; align-items: start; }
.rule-builder { display: grid; gap: 16px; }
.rule-builder > .section-heading { margin-bottom: 0; }
input[type="text"] { min-height: 48px; padding: 10px 13px; }
.builder-group { min-width: 0; margin: 0; padding: 18px; border: 1px solid #e5d8ec; border-radius: 19px; background: #fbf7fe; }
.builder-group legend { padding: 0 7px; color: var(--purple-dark); font-size: .88rem; font-weight: 950; }
.builder-group legend span { display: inline-grid; width: 24px; height: 24px; margin-right: 6px; place-items: center; border-radius: 50%; color: #fff; background: var(--purple); font-size: .7rem; }
.affix-input { display: grid; grid-template-columns: auto minmax(80px, 1fr); align-items: center; gap: 8px; }
.affix-input span { color: var(--muted); font: 750 .78rem system-ui, sans-serif; white-space: nowrap; }
.choice-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 16px; }
.choice-pills input { position: absolute; opacity: 0; pointer-events: none; }
.choice-pills span { display: grid; min-height: 58px; place-items: center; padding: 7px; border: 2px solid #ddd0e6; border-radius: 13px; color: #675b70; background: #fff; font-size: .7rem; font-weight: 850; line-height: 1.25; text-align: center; cursor: pointer; }
.choice-pills input:checked + span { border-color: var(--purple); color: var(--purple-dark); background: #eee2f8; box-shadow: inset 0 0 0 1px var(--purple); }
.optional-group { display: grid; gap: 12px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #5c5066; font-size: .78rem; font-weight: 900; }
.switch-row input { width: 44px; height: 25px; accent-color: var(--purple); }
.test-bench { position: sticky; top: 14px; color: #fff; border-color: transparent; background: linear-gradient(155deg, #3c245b, #65418d); box-shadow: 0 22px 55px rgb(57 30 85 / 24%); }
.test-bench .step-label { color: #f5d66f; }
.test-bench h2 { margin-bottom: 18px; color: #fff; }
.test-bench .field-label { color: rgb(255 255 255 / 72%); }
.rule-sentence { margin-bottom: 18px; padding: 13px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 14px; color: rgb(255 255 255 / 83%); background: rgb(255 255 255 / 8%); font: 650 .75rem/1.5 system-ui, sans-serif; }
.test-bench textarea { min-height: 112px; border-color: rgb(255 255 255 / 26%); }
.custom-output { margin: 13px 0; padding: 15px; border-radius: 16px; background: #fff4bd; }
.custom-output > span { color: #856315; font-size: .61rem; font-weight: 1000; letter-spacing: .12em; }
.custom-output #customOutput { min-height: 64px; color: #422860; font-size: 1.08rem; }
.consistency-meter { margin: 15px 0; }
.meter-top { display: flex; justify-content: space-between; gap: 10px; color: #fff; font-size: .72rem; }
.meter-top span { color: #d5ef95; }
.meter-track { height: 9px; margin: 8px 0; overflow: hidden; border-radius: 999px; background: rgb(0 0 0 / 22%); }
.meter-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f1cf58, #a9e27a); transition: width .25s ease; }
.consistency-meter p { margin: 0; color: rgb(255 255 255 / 66%); font: 600 .68rem/1.4 system-ui, sans-serif; }
.wide { width: 100%; margin-top: 8px; }
.test-bench .primary-button { color: var(--purple-dark); background: #ffd45d; box-shadow: 0 6px 0 #c79622; }
.test-bench .soft-button { border-color: rgb(255 255 255 / 25%); color: #fff; background: rgb(255 255 255 / 10%); }
.privacy-note { margin: 22px 0; color: #817589; font: 600 .72rem/1.5 system-ui, sans-serif; text-align: center; }
.toast { position: fixed; z-index: 50; right: 18px; bottom: 18px; max-width: min(340px, calc(100% - 36px)); padding: 12px 16px; border-radius: 14px; color: #fff; background: var(--purple-dark); box-shadow: 0 12px 30px rgb(39 22 58 / 25%); font-size: .82rem; font-weight: 800; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s ease; }
.toast.show { opacity: 1; transform: none; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 4px solid var(--jke-platform-focus, #7b4ed8); outline-offset: 3px; }
[hidden] { display: none !important; }
@keyframes reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (max-width: 719px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .hero-copy { text-align: center; }
  .hero-text { margin-right: auto; margin-left: auto; }
  .word-machine { width: min(520px, 100%); margin: 0 auto; padding: 28px 20px; }
  #learnView, .invent-layout { grid-template-columns: 1fr; }
  .test-bench { position: static; }
}

/* Phone foundation. This keeps controls thumb-sized and removes secondary decoration. */
@media (max-width: 600px) {
  body { background: #fffaf0; }
  .game-header, main { width: 100%; padding-right: max(11px, env(safe-area-inset-right)); padding-left: max(11px, env(safe-area-inset-left)); }
  .game-header { min-height: 58px; }
  .lab-badge { font-size: .72rem; }
  .score-pill > span:last-child { display: none; }
  .hero { min-height: 0; padding: 25px 18px 40px; border-radius: 23px; }
  h1 { font-size: clamp(2.75rem, 15vw, 4.3rem); }
  .hero-text { margin-top: 13px; font-size: .9rem; }
  .word-machine { gap: 7px; padding: 20px 10px; border-radius: 18px; }
  .machine-word { padding: 12px 8px; border-radius: 11px; font-size: .9rem; }
  .machine-arrow { font-size: 1.1rem; }
  .mode-tabs { width: calc(100% - 16px); margin-top: -23px; padding: 5px; border-radius: 18px; }
  .mode-tab { min-height: 56px; gap: 4px; padding: 6px 4px; border-radius: 13px; text-align: center; }
  .mode-tab small, .tab-number { display: none; }
  .mode-tab strong { font-size: .78rem; }
  .lesson-card, .challenge-card, .translator-card, .rule-builder, .test-bench { padding: 19px 16px; border-radius: 21px; }
  .rule-map { grid-template-columns: 1fr; }
  .creekside-pig-learn { min-height: 64px; margin-bottom: -14px; }
  .creekside-pig-learn img { width: 68px; max-height: 82px; }
  .creekside-pig-output { min-height: 40px; margin-top: 2px; }
  .creekside-pig-output img { width: 50px; max-height: 60px; }
  .rule-card { min-height: 0; }
  .choice-pills { grid-template-columns: 1fr; }
  .choice-pills span { min-height: 44px; }
  .text-actions > button { flex: 1; }
  .output-label { align-items: flex-start; flex-direction: column; }
  .breakdown-list { grid-template-columns: 1fr; }
  .page-sparkles { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Secret Language Academy campaign */
.campaign-intro { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:24px; align-items:center; padding:28px; margin-bottom:18px; border:1px solid rgb(72 47 89 / 12%); border-radius:24px; background:#fffdf8; box-shadow:0 12px 30px rgb(70 47 89 / 9%); }
.campaign-intro h2 { margin:4px 0 8px; color:#31264e; font-size:clamp(1.35rem,2.5vw,2rem); }
.campaign-intro p:not(.step-label) { margin:0; color:#665879; line-height:1.55; }
.campaign-stats { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:baseline; padding:16px; border-radius:18px; background:#f5edff; color:#5c3a85; }
.campaign-stats strong { font-size:1.45rem; }
.campaign-stats span { font-size:.78rem; }
.chapter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.chapter-card { padding:20px; border:1px solid rgb(72 47 89 / 12%); border-top:5px solid #8c65c7; border-radius:20px; background:#fff; box-shadow:0 10px 25px rgb(70 47 89 / 7%); }
.chapter-card h3 { margin:3px 0 3px; color:#31264e; font-size:1.25rem; }
.chapter-card > p:not(.chapter-number) { margin:10px 0 15px; color:#665879; line-height:1.45; }
.chapter-number,.chapter-kicker { color:#7952aa; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.chapter-kicker { display:block; color:#8b789c; letter-spacing:.03em; }
.chapter-rose { border-top-color:#df6d87; }.chapter-gold { border-top-color:#e8ad4f; }.chapter-mint { border-top-color:#52b99b; }.chapter-blue { border-top-color:#5a91d6; }.chapter-purple { border-top-color:#9470c7; }.chapter-orange { border-top-color:#e6854e; }
.chapter-missions { display:grid; gap:7px; }
.mission-link { padding:10px 12px; border:1px solid #e2d8eb; border-radius:12px; background:#fbf8ff; color:#4b3861; text-align:left; font-weight:700; cursor:pointer; }
.mission-link:hover,.mission-link:focus-visible { border-color:#8b62c3; background:#f3ebff; }
.mission-link.done { color:#6d4c15; border-color:#f1d48b; background:#fff8df; }
.mission-card { margin-top:18px; padding:26px; border:2px solid #a17bd0; border-radius:24px; background:#fffdf8; box-shadow:0 16px 34px rgb(70 47 89 / 12%); }
.mission-card h3 { margin:4px 0 12px; color:#31264e; font-size:1.6rem; }
.mission-prompt { margin:0 0 18px; color:#4b3861; font-size:1.08rem; line-height:1.5; }
.mission-choices { display:grid; gap:9px; }
.mission-choice { padding:13px 15px; border:1px solid #d8c8e6; border-radius:14px; background:#fff; color:#413251; font-weight:700; text-align:left; cursor:pointer; }
.mission-choice:hover:not(:disabled),.mission-choice:focus-visible { border-color:#8157b5; background:#f4edff; }
.mission-choice.correct { border-color:#4aab84; background:#e8faf1; }.mission-choice:disabled { cursor:default; opacity:.8; }
.mission-feedback { margin:17px 0 0; padding:12px 14px; border-radius:12px; background:#f3edfa; color:#554064; line-height:1.45; }.mission-feedback.good { background:#e8faf1; color:#216b4d; }.mission-feedback.try-again { background:#fff4dd; color:#76521d; }
.mission-input { width:100%; margin:4px 0 10px; padding:12px 14px; border:1px solid #d8c8e6; border-radius:12px; font:inherit; }.mission-submit { margin-bottom:4px; }.mission-close { margin-top:14px; }

@media (max-width: 719px) { .campaign-intro { grid-template-columns:1fr; } .chapter-grid { grid-template-columns:1fr; } }