/* Local typefaces: original, unmodified glyphs; SIL OFL notices in fonts/. */
@font-face{font-family:'Monocraft';src:url('./fonts/monocraft-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Exo 2';src:url('./fonts/exo2-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{
  --font-display:'Monocraft',monospace;
  --font-ui:'Exo 2',sans-serif;
  --font-body:'Exo 2',sans-serif;
  --font-numbers:'Monocraft',monospace;
  --type-small:.75rem;
  --type-label:.6875rem;
  --title-shadow:0 2px 0 #050d09,0 0 18px #a8e5b812;
}
body{font-family:var(--font-body);font-size:.9375rem;font-weight:400;line-height:1.65;font-kerning:normal}
button,input,select{font-family:var(--font-ui);line-height:1.35}
button{font-weight:600}
h1,h2,h3{overflow-wrap:anywhere;text-wrap:balance}
h1,h2{font-family:var(--font-display);font-weight:700;line-height:1.35;letter-spacing:.015em;text-shadow:var(--title-shadow)}
h3{font-family:var(--font-ui);font-size:1.125rem;font-weight:700;line-height:1.3;letter-spacing:.01em}
h2{font-size:1.5rem}
p,small,label,.subtitle,.en{overflow-wrap:break-word}
small{font-size:var(--type-small)}
.eyebrow{font-family:var(--font-ui);font-size:var(--type-label);font-weight:700;line-height:1.5;letter-spacing:.14em}
.brand strong,.mobile-brand{font-family:var(--font-display);font-size:.9375rem;font-weight:700;line-height:1.3;letter-spacing:.025em;text-shadow:0 2px #0005}
.brand span{font-family:var(--font-display);font-size:.5625rem;font-weight:700;line-height:1.6;letter-spacing:.025em}
.nav-label{font-size:.625rem;font-weight:600;letter-spacing:.14em}
.nav-btn{font-family:var(--font-ui);font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:.02em}
.nav-btn .count{font-family:var(--font-numbers);font-size:.625rem;font-weight:700;line-height:1.6}
.side-progress .row,.side-progress small{font-size:var(--type-small)}
.save-label{font-size:.6875rem;line-height:1.5}
.breadcrumb{font-size:.75rem;line-height:1.5}
.breadcrumb b{font-weight:500}
.safe-badge{font-size:.6875rem;font-weight:600;line-height:1.35}

/* Level 1: game title, chapter names and major section headings. */
.hero h1{font-family:var(--font-display);font-size:clamp(2.125rem,4.1vw,3.75rem);font-weight:700;line-height:1.15;letter-spacing:.025em;text-shadow:0 4px 0 #06100bb3,0 0 24px #a8e5b81a;-webkit-text-stroke:.25px currentColor;overflow-wrap:normal}
.hero h1 span{font-size:.72em;letter-spacing:.14em;line-height:1.3}
.hero h2{font-family:var(--font-ui);font-size:1.375rem;font-weight:650;line-height:1.35;letter-spacing:.01em;text-shadow:0 2px #0005}
.hero p{font-size:.875rem;line-height:1.7}
.hero .eyebrow{font-size:.625rem;letter-spacing:.12em}
.hero-caption,.hero-index{font-family:var(--font-ui);font-size:.625rem;font-weight:600;letter-spacing:.08em;line-height:1.5}
.page-title h1{font-size:clamp(1.625rem,2.8vw,2.25rem);letter-spacing:.02em}
.page-title p{font-size:.9375rem;line-height:1.65}
.section-heading h2{font-size:1.375rem}
.section-heading p{font-size:.8125rem;line-height:1.6}
.campaign-info h3{font-family:var(--font-display);font-size:1.0625rem;font-weight:700;line-height:1.45;letter-spacing:.01em;text-shadow:0 2px 0 #06100b}
.campaign-info .subtitle{font-size:.75rem;line-height:1.5}
.campaign-meta{font-size:.6875rem;line-height:1.5}
.campaign-meta b{font-family:var(--font-numbers);font-weight:700;font-size:.6875rem}
.campaign-art .chapter{font-size:.625rem;font-weight:600;line-height:1.5;letter-spacing:.08em}
.group-label{min-width:0}
.group-label h2{font-size:1.25rem;line-height:1.4;letter-spacing:.015em}
.group-label p{font-size:.75rem;line-height:1.5}
.group-number{flex-shrink:0;font-family:var(--font-numbers);font-size:.8125rem;font-weight:700;line-height:1}
.group-progress{flex-shrink:0;font-size:.6875rem;line-height:1.5}
.celebration h2{font-size:clamp(1.375rem,2.5vw,1.875rem);line-height:1.5;text-shadow:0 3px 0 #102015,0 0 20px #c1edc926}
.celebration p{font-size:.9375rem;line-height:1.65}

/* Level 2: compact geometric UI, mission names, controls and guides. */
.btn{font-family:var(--font-ui);font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:.015em;white-space:normal;overflow-wrap:anywhere;max-width:100%}
.btn.primary{font-weight:700}
.btn.small{font-size:.75rem;line-height:1.4}
.text-link{font-size:.75rem;font-weight:500;line-height:1.5;white-space:normal;text-align:left}
.next-card .eyebrow{font-size:.625rem;letter-spacing:.13em}
.next-card h3{font-size:1rem;line-height:1.35}
.next-card p{font-size:.75rem;line-height:1.5}
.mission-body h3,.collect-card h3{font-size:1.125rem;font-weight:700;line-height:1.35;letter-spacing:.01em}
.mission-body .en,.collect-card p{font-size:.75rem;line-height:1.5;letter-spacing:.02em}
.mission-body p{font-size:.8125rem;line-height:1.65}
.mission-actions .btn{white-space:normal;min-width:0}
.mission-number{font-family:var(--font-numbers);font-size:.6875rem;font-weight:700;line-height:1.5}
.badge{font-size:.5625rem;font-weight:700;line-height:1.6;letter-spacing:.06em}
.secret-status{font-size:.75rem;line-height:1.5}
.secret-status input{flex-shrink:0}
.collection-tabs button{font-size:.875rem;font-weight:600;line-height:1.4}
.collection-banner h2{font-size:1.375rem;line-height:1.4}
.collection-banner p{font-size:.875rem;line-height:1.65}
.interlude h3{font-size:1.125rem;line-height:1.4}
.interlude p{font-size:.8125rem;line-height:1.6}
.panel h2{font-size:1.1875rem;line-height:1.45}
.setting strong{font-size:.875rem;font-weight:650;line-height:1.5}
.setting small{font-size:.8125rem;line-height:1.6}
.toolbar select{font-size:.8125rem;line-height:1.4;height:auto;min-height:42px;padding-block:10px}
.search-wrap input{font-size:.875rem;line-height:1.4;height:auto;min-height:40px;padding-block:10px}
.result-count{font-size:.75rem;line-height:1.65}
.dialog-head h2{font-family:var(--font-ui);font-size:1.5rem;font-weight:750;line-height:1.35;letter-spacing:.015em;text-shadow:0 2px 0 #06100b80}
.dialog-head .eyebrow{font-size:.6875rem;letter-spacing:.12em}
.dialog-head p{font-size:.875rem;line-height:1.6}
.dialog-body h3{font-size:1rem;font-weight:700;line-height:1.4}
.dialog-footer small{font-size:.75rem;line-height:1.5}
.dialog-footer{flex-wrap:wrap}

/* Level 3: calm reading text, with a comfortable measure and line height. */
.panel>p{font-size:.9375rem;line-height:1.7}
.dialog-body>p,.guide-condition,.guide-steps label{font-family:var(--font-body);font-size:.9375rem;font-weight:400;line-height:1.75}
.guide-steps b{font-family:var(--font-ui);font-size:.6875rem;font-weight:700;line-height:1.8;letter-spacing:.12em}
.guide-trouble{font-size:.875rem;line-height:1.75}
.guide-links .btn{font-size:.75rem;line-height:1.5}
.info-note{font-size:.8125rem;line-height:1.7}
.source-item{font-size:.875rem;line-height:1.65}
.source-item small{font-size:.75rem;line-height:1.6}
.source-item .row{flex-wrap:wrap}
.bottom-note{font-size:.6875rem;line-height:1.6}
.art-placeholder,.generated-art-label,.locked-art-label{font-family:var(--font-ui);font-size:.5625rem;font-weight:700;line-height:1.4;letter-spacing:.07em}
#toast{font-size:.875rem;font-weight:500;line-height:1.5}

/* Pixel numerals make progress feel like an in-game counter. */
.stat .stat-value,.stat-tile strong,.ring>span{font-family:var(--font-numbers);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1.3}
.stat .stat-value{font-size:1.5rem}
.stat:first-child .stat-value{font-family:var(--font-ui);font-size:1.375rem;font-weight:700}
.stat .stat-value em{font-family:var(--font-ui);font-size:.75rem;font-weight:400;letter-spacing:0}
.stat label{font-size:.6875rem;line-height:1.5}
.ring>span{font-size:.8125rem}
.stat-tile strong{font-size:1.625rem}
.stat-tile span,.big-progress p{font-size:.8125rem;line-height:1.6}
.big-progress .ring span{font-size:2.25rem}
.big-progress h2{font-size:1.1875rem;line-height:1.5}
.progress-line .row{font-size:.875rem;line-height:1.5;flex-wrap:wrap}
.progress-line small{font-size:.75rem;line-height:1.5}

@media(max-width:1190px){
  .hero h1{font-size:3rem}
  .campaign-info h3{font-size:1.0625rem}
}
@media(max-width:760px){
  .hero h1{font-size:clamp(1.75rem,6.5vw,3rem);line-height:1.25;letter-spacing:.02em}
  .hero h1 span{font-size:.75em;letter-spacing:.12em}
  .hero h2{font-size:1.1875rem;line-height:1.4}
  .hero p{font-size:.8125rem;line-height:1.65}
  .hero .eyebrow{font-size:.625rem;letter-spacing:.06em}
  .hero-actions .btn{font-size:.75rem;line-height:1.45}
  .hero-caption{font-size:.5625rem;letter-spacing:.06em}
  .page-title h1{font-size:1.75rem;line-height:1.4}
  .page-title p{font-size:.875rem}
  .section-heading{flex-wrap:wrap}
  .section-heading h2{font-size:1.25rem;line-height:1.45}
  .section-heading p,.section-heading .text-link{font-size:.75rem}
  .campaign-info h3{font-size:.9375rem;line-height:1.5}
  .campaign-info .subtitle{font-size:.6875rem;line-height:1.5}
  .campaign-meta{font-size:.625rem}
  .campaign-art .chapter{font-size:.5625rem;letter-spacing:.04em}
  .chapter-arrow{bottom:76px}
  .mission-body h3,.collect-card h3{font-size:1rem;line-height:1.35}
  .mission-body p{font-size:.8125rem;line-height:1.6}
  .mission-body .en{font-size:.6875rem;line-height:1.5}
  .mission-actions .btn{font-size:.75rem;line-height:1.4}
  .secret-status{font-size:.6875rem;line-height:1.5}
  .group-label h2{font-size:1.0625rem;line-height:1.45}
  .group-label p{font-size:.6875rem;line-height:1.5}
  .group-progress{font-size:.625rem;line-height:1.5}
  .group-number{font-size:.75rem}
  .toolbar select{font-size:.75rem}
  .toolbar .btn{font-size:.75rem}
  .next-card h3{font-size:1rem}
  .next-card p{font-size:.6875rem}
  .next-card .btn{font-size:.75rem}
  .collection-banner h2{font-size:1.125rem;line-height:1.5}
  .collection-banner p{font-size:.875rem}
  .collection-tabs button{font-size:.8125rem}
  .interlude h3{font-size:1rem}
  .stat .stat-value{font-size:1.25rem}
  .stat .stat-value em{font-size:.6875rem}
  .stat label,.stat:first-child label{font-size:.625rem;line-height:1.5;white-space:normal}
  .ring>span{font-size:.625rem}
  .stat-tile strong{font-size:1.375rem}
  .stat-tile span{font-size:.75rem;line-height:1.5}
  .mobile-nav button{font-family:var(--font-ui);font-size:.625rem;font-weight:600;line-height:1.3;letter-spacing:.01em;overflow-wrap:anywhere}
  .bottom-note{font-size:.625rem}
  .dialog-head h2{font-size:1.3125rem;line-height:1.4}
  .dialog-footer .btn{font-size:.75rem}
  .dialog-footer small{font-size:.6875rem}
  #toast{font-size:.8125rem}
}
@media(max-width:380px){
  .hero h1{font-size:1.75rem}
  .hero h2{font-size:1.125rem}
  .hero-actions .btn{font-size:.75rem}
  .page-title h1{font-size:1.5rem}
  .campaign-info h3{font-size:1.0625rem}
  .group-label h2{font-size:1rem}
  .stat .stat-value{font-size:1.125rem}
  .stat label{font-size:.625rem}
  .collection-tabs button{font-size:.75rem}
  .stat-tile strong{font-size:1.1875rem}
}