/* Shared application chrome. Game scenes and taught content retain their own artwork. */
:root {
  font-family: var(--font-text);
  color: var(--ink);
  background: var(--surface);
  --green: var(--olive-deep);
  --coral: var(--terracotta-deep);
  --cream: var(--surface);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --paper: var(--surface-raised);
}
body { font-family:var(--font-text); color:var(--ink); background:var(--surface); line-height:1.6; }
button, input, select, textarea, summary { font-family:var(--font-text); }
h1,h2,h3,h4,.brand-name,.hero-postcard strong {
  font-family:var(--font-display); font-weight:600; letter-spacing:normal;
}
p,button,a,label,small,span,strong { letter-spacing:normal; }
h1,h2,h3,p,button,a,label { overflow-wrap:break-word; }
button,.button,.button-link,summary,input:not([type=checkbox]):not([type=range]),select {
  min-height:var(--touch-kid); border-radius:var(--radius-md);
}
button,.button,.button-link { min-width:var(--touch-min); }
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:2px solid var(--focus); outline-offset:2px;
}
:is(header,.topbar,.header) { background:var(--surface); color:var(--ink); }
.brand { background:transparent; border:0; box-shadow:none; padding:4px; flex-shrink:0; }
.brand .hk-logo { display:block; line-height:0; }
.hk-logo img { display:block; height:48px; width:auto; max-width:100%; object-fit:contain; }
.hk-guide-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); max-width:960px; margin:0 auto var(--space-5); padding:var(--space-4); }
.hk-guide-header a { display:inline-flex; align-items:center; min-height:var(--touch-min); }
.hero h1,.hero-copy h1 { color:var(--terracotta-deep); font-weight:600; letter-spacing:normal; }
.hero-copy h1 span { color:inherit; }
.hero-copy>p,.hero-text,.quiet,.section-heading p,.section-title>p,
.card-copy p,.game-copy>p,.world-copy p,.worlds small,.meta,.eyebrow,
.hero-facts,.hero-postcard small,.game-heading p,.game-bottom>span,
.adult-note,.card-kind,.results-bar,.instruction-card p.small-note,
.postcard-note small,footer,.footer,.breadcrumbs,.browse-context { color:var(--ink-muted); }
.card,.game-card,.world-card,.place-card,.info-card,.instruction-card,.howto,
.overlay-card,.overlay-panel,.sound-settings>div,dialog {
  background:var(--surface-raised); color:var(--ink); border-color:var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-edge);
}
.filters,.journey,.wayfinder,.start-strip,.legacy-band,.resume-strip,.continue-strip,.discovery-strip {
  background:var(--surface-sunken); color:var(--ink); border-color:var(--line); border-radius:var(--radius-lg);
}
.filters input,.filters select,input[type=search],select {
  background:var(--surface-raised); color:var(--ink); border:1px solid var(--ink-muted);
}
.header nav button,.site-nav button,.sound-switch,.secondary,.plain,.utility,
.game-tools button,.tools button,.game-controls button,.controller button,
.button-link,.button.secondary,.card-play,.card-copy button,.card-copy a,.worlds button,
.companions button,.pagination button,.game-return button,.breadcrumbs button {
  background:var(--surface-sunken); color:var(--ink); border:1px solid var(--ink-muted);
  box-shadow:none;
}
.primary,.primary.clay,.primary.purple,button.primary,.hero-buttons button.primary,
.overlay-card .primary,.overlay-panel .primary,dialog button:first-child {
  background:var(--terracotta-deep); color:var(--on-terracotta);
  border:1px solid var(--terracotta-deep); box-shadow:var(--shadow-press);
}
.primary:hover,button.primary:hover { background:var(--terracotta-deep); transform:none; }
.primary:active:not(:disabled),button.primary:active:not(:disabled) {
  box-shadow:var(--shadow-press-active); transform:translateY(2px);
}
.site-nav button[aria-current],.header nav button.active,.companions button[aria-pressed=true],
.worlds button[aria-pressed=true],.stamp.earned,.completed-badge,.card-stamp,.stamp-earned {
  background:var(--olive-soft); color:var(--olive-deep); border-color:var(--olive-deep);
}
.header nav button span,.site-nav button span,.wayfinder li>b,.start-strip b,.passport-counter {
  background:var(--olive-soft); color:var(--olive-deep);
}
.hero-sticker,.postcard-note,.hero-postcard,.tag,.pill,.card-age {
  background:var(--straw-soft); color:var(--straw-ink); border-color:var(--line); box-shadow:var(--shadow-edge);
}
.hero-postcard strong,.hero-postcard span,.postcard-note>span { color:var(--straw-ink); }
.stamp { background:var(--surface-raised); color:var(--ink-muted); border-color:var(--ink-muted); }
.scene-label,.scene-world,.world-number { background:var(--surface-raised); color:var(--ink); }
.legacy-band .eyebrow,.legacy-band p,.legacy-band h2 { color:var(--ink); }
.hero-scene,.postcard,.hero-picture,.hero-note { box-shadow:var(--shadow-edge); }
.game-hud,.hud,.game-controls,.controller,.instruction-strip {
  background:var(--surface-raised); color:var(--ink);
}
.live-notice,.live-note,.context-note,.quiet-note { color:var(--ink-muted); }
.hud>span:has(#timer) { display:none; }
.personal-best { color:var(--olive-deep); }
.place-copy .secondary { background:var(--surface-sunken); color:var(--ink); border:1px solid var(--ink-muted); box-shadow:none; }
#app :is(.ft-card,.nj-card,.place-card) { background:var(--surface-raised); color:var(--ink); border-color:var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-edge); }
#app :is(.ft-card,.nj-card,.place-card) button:not(.primary) { background:var(--surface-sunken); color:var(--ink); border:1px solid var(--ink-muted); box-shadow:none; }
#app :is(h1,h2,h3,h4) { font-family:var(--font-display); font-weight:600; }
#culture-app :is(button:not(.hotspot),summary,input[type=search],select),
#arcade-app :is(button,summary,input[type=search],select) {
  min-height:var(--touch-kid); min-width:var(--touch-kid);
}
footer a,.footer a { display:inline-flex; align-items:center; min-height:var(--touch-min); }
#culture-app :is(.eyebrow,.card-kind,.card-age,.world-copy>span,.stamp b,.stamp small,.postcard span,.postcard-note small,.game-bottom>span,footer,footer p),
#arcade-app :is(.eyebrow,.meta,.scene-label,.scene-world,.hero-postcard small,.companions small,footer),
#app :is(.nj-age,.ft-age,.brand-sub,.quiet-note) { font-size:12px; }
.teach-letter,.teach-word,.taught-letter,.taught-word {
  font-family:'Noto Sans Arabic',var(--font-teach); letter-spacing:normal;
}
a:not(.brand):not(.button):not(.button-link) { text-underline-offset:4px; }
@media(max-width:600px) {
  #app .hero { padding-top:var(--space-3); }
  #app .nj-collection { margin-top:var(--space-3); }
  #app .nj-age-note { margin-bottom:var(--space-1); }
  #culture-app :is(.world-copy p,.game-copy>p,.hero-facts span,.results-bar>span,.instruction-card p.small-note,.adult-note),
  #arcade-app :is(.hero-facts span,.worlds small,.game-return>span) { font-size:12px; }
  #culture-app :is(.header nav button,.sound-switch,.overlay-panel p,.overlay-panel button,.game-hud,.game-controls label,.game-controls>span,.breadcrumbs,.filters label,.filters .plain),
  #arcade-app .sound-settings summary { font-size:12px; }
  .hk-logo img { width:40px; height:40px; }
  .shell { padding-inline:var(--space-4); }
  .header nav { flex-wrap:wrap; gap:var(--space-1); }
  .header nav button { flex:1 1 auto; padding-inline:8px; }
  .hero h1,.hero-copy h1 { font-size:clamp(32px,9vw,48px); }
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stamp-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .filters label,.hero-copy,.game-heading,.game-copy,.card-copy,.top-actions { min-width:0; }
  .topbar,.top-actions,.hero-facts,.game-tools,.header-tools { flex-wrap:wrap; }
  .passport-head { flex-wrap:wrap; }
  .overlay-card,.overlay-panel { max-height:100%; overflow:auto; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  button:active:not(:disabled),.primary:active:not(:disabled) { transform:none!important; }
}