/* Shared layout and touch controls, from narrow phones to desktop screens. */
img { max-width: 100%; }
.ticker { transform: none; }
.hero > *, .origin > *, .comic-feature > *, .training-inner > *,
.workshop > *, .editor-layout > * { min-width: 0; }
.button { max-width: 100%; }
.header a, footer a, .text-button, .download-button,
.saved-card-actions button { min-height: 44px; }
.header a, footer a { display: inline-flex; align-items: center; }
.header .brand, footer .footer-brand { display: flex; }
footer .footer-brand { flex-direction: column; align-items: flex-start; }
.text-button, .download-button { min-width: 44px; }
.color { width: 44px; height: 44px; flex: 0 0 44px; }
.colors { gap: 10px; }
.drawing-toolbar { gap: 12px; flex-wrap: wrap; }
.drawing-footer { flex-wrap: wrap; }
.drawing-footer > span { flex: 1 1 150px; }
.close-dialog { width: 44px; height: 44px; }
.story-actions { flex-wrap: wrap; }
.story-actions .button { gap: 12px; }
.editor-tabs button { min-height: 48px; }
.option-grid button, .palette-presets button { min-height: 48px; font-size: 12px; }
.skin-swatches { gap: 14px; }
.skin-swatches button { width: 44px; height: 44px; }
.color-field { font-size: 12px; }
.color-field input { width: 44px; height: 44px; }
.text-field input, .text-field textarea { font-size: 16px; }
.preview-actions { flex-wrap: wrap; gap: 12px 20px; }
.download-button, .saved-card-actions button { font-size: 12px; }
.save-note { font-size: 11px; line-height: 1.6; }
.preview-top > span { font-size: 10px; }
.preview-top .text-button { font-size: 12px; }
.collection-heading, .editor-intro { flex-wrap: wrap; }
.collection-link { display: inline-flex; align-items: center; min-height: 44px; }
.preview-panel { max-height: none; }
.saved-card-actions { flex-wrap: wrap; gap: 8px 18px; }
.comic-page .header, .editor-page .header { gap: 16px; }
.back-link, .comic-back { flex-shrink: 0; }

@media (max-height: 800px) {
  .preview-panel { position: static; }
}

@media (max-width: 1000px) {
  .header { padding-inline: 24px; gap: 18px; }
  .header nav { gap: 16px; }
  .comic-feature { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
  .comic-info { padding: 26px; }
  .editor-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .preview-actions { padding-inline: 16px; }
  .preview-actions > * { flex: 1 1 160px; }
  .color-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .header { flex-wrap: wrap; }
  .header nav { width: 100%; justify-content: space-between; }
  .editor-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .preview-panel { position: static; }
  #hero-preview svg { height: 280px; }
  .preview-actions > * { flex: 0 1 auto; }
  [role=tabpanel] { min-height: 0; }
  .editor-intro h1 { font-size: clamp(52px, 9vw, 70px); }
  .color-field { flex-wrap: nowrap; }
}

@media (max-width: 700px) {
  .header { padding-inline: 20px; }
  .hero h1 { font-size: clamp(52px, 17vw, 77px); }
  .hero .eyebrow { letter-spacing: 1px; }
  .ticker { transform: none; }
  .comic-feature { grid-template-columns: minmax(0, 1fr); }
  .comic-info { padding: 26px; }
  .comic-details { flex-wrap: wrap; gap: 12px 24px; }
  .name-formula { gap: clamp(12px, 4vw, 23px); }
  .name-formula > div { min-width: 0; }
  .training h2 { font-size: clamp(44px, 13vw, 57px); }
  .game-stats { gap: clamp(22px, 8vw, 45px); }
  .drawing-toolbar { padding: 12px; }
  .colors { gap: 12px; }
  .drawing-footer > span { font-size: 11px; }
  .drawing-footer .text-button { font-size: 12px; }
  .closing { gap: 12px; }
  .closing p { font-size: 21px; }
  .closing strong { font-size: clamp(24px, 7.5vw, 30px); }
  .closing > span { font-size: 20px; }
  footer { flex-wrap: wrap; }
  footer > a:last-child { font-size: 12px; }
  .editor-page .header, .comic-page .header { flex-wrap: nowrap; }
  .editor-main { padding: 28px 18px; }
  .editor-intro { flex-direction: column; align-items: flex-start; gap: 18px; }
  .editor-intro .eyebrow { font-size: 10px; letter-spacing: 1px; }
  .editor-intro p:not(.eyebrow) { font-size: 14px; }
  .collection-link { max-width: none; font-size: 13px; text-align: left; min-height: 44px; }
  .back-link, .comic-back { max-width: 110px; font-size: 12px; line-height: 1.5; text-align: right; }
  #hero-preview svg { height: clamp(200px, 55vw, 280px); }
  .preview-top { flex-wrap: wrap; padding: 8px 16px; }
  .preview-identity { padding: 18px 18px 4px; }
  .preview-identity .eyebrow { font-size: 10px; }
  .preview-identity > p:last-child { font-size: 13px; }
  .preview-actions { padding: 12px 18px 0; gap: 8px 14px; }
  .preview-actions .button { font-size: 13px; }
  .preview-actions > * { flex: 1 1 150px; }
  .save-note { margin: 14px 18px; }
  [role=tabpanel] { padding: 24px 18px; }
  [role=tabpanel] > h2 { font-size: clamp(28px, 8vw, 36px); }
  .panel-help, .hint, legend { font-size: 13px; }
  .color-fields { gap: 12px; }
  .color-field { font-size: 13px; }
  .text-field { font-size: 14px; }
  .collection-heading p:not(.eyebrow), .empty-collection { font-size: 13px; }
  .saved-card h3 { font-size: 28px; }
  .saved-card p, .saved-card-actions button { font-size: 13px; }
  .comic-intro h1 { font-size: clamp(45px, 15vw, 64px); }
  .comic-intro > p:not(.eyebrow) { font-size: 14px; }
}

@media (max-width: 480px) {
  .header nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 13px; }
  .header nav a { justify-content: center; padding: 8px; text-align: center; }
  .header .nav-play { padding: 8px; }
  .color-fields { grid-template-columns: minmax(0, 1fr); }
  .hero-collection { grid-template-columns: minmax(0, 1fr); }
  .saved-card .saved-art svg { height: 230px; }
  .option-grid button { font-size: 12px; padding-inline: 6px; }
  .palette-presets button { font-size: 12px; gap: 8px; }
  .editor-tabs button { font-size: 11px; padding-inline: 3px; }
  .story-content { padding: 22px 18px; }
  .story-content h2 { font-size: 32px; }
  .story-actions { gap: 12px; }
  .story-actions .button { flex: 1; padding-inline: 12px; font-size: 12px; }
}