/* Phone layouts keep the studio's artwork, with deliberate rows and touch targets. */
@media (max-width: 600px) {
  .header {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    padding-block: 16px 8px;
  }
  .header > .brand { width: fit-content; min-height: 44px; }
  .header .nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    margin-top: 8px;
    font-size: 13px;
  }
  .header .nav > a,
  .header .nav > a:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-block: 8px;
  }
  .header .theme-toggle { position: absolute; top: 16px; right: 0; }
  .studio-home .hero h1 { font-size: clamp(42px, 10.8vw, 64px); }
  .footer-inner { grid-template-columns: 1fr auto; gap: 16px; padding-block: 32px 24px; }
  .footer-brand, .footer-inner > p, .footer-links { grid-column: 1 / -1; }
  .footer-inner > p { max-width: none; text-align: left; margin: 0; font-size: 13px; }
  .footer-links { justify-content: space-between; gap: 12px; font-size: 12px; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; }
  .copyright { grid-column: 1; }
  .back-top { grid-column: 2; min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 480px) {
  .studio-home .hero { padding-block: 24px 36px; gap: 28px; }
  .studio-home .hero .eyebrow { margin-bottom: 18px; font-size: 10px; letter-spacing: .8px; }
  .studio-home .hero h1 { font-size: clamp(42px, 12.8vw, 54px); margin-bottom: 24px; }
  .studio-home .hero-description { max-width: none; font-size: 16px; line-height: 1.65; margin-bottom: 22px; }
  .studio-home .hero-actions { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; }
  .studio-home .hero-actions .button { padding: 10px 12px; gap: 9px; min-height: 54px; font-size: 13px; white-space: nowrap; }
  .studio-home .hero-actions .text-link { justify-content: center; gap: 6px; min-height: 44px; font-size: 12px; white-space: nowrap; }
  .studio-home .hero-actions .play-mark { width: 28px; height: 30px; padding: 5px; }
  .studio-home .clue-world { min-height: 0; padding: 88px 10px 24px; border-radius: 42% 42% 20px 20px; }
  .studio-home .floating-icon { top: 20px; left: 16px; }
  .studio-home .floating-icon img { width: 48px; height: 48px; }
  .studio-home .floating-icon strong { font-size: 17px; }
  .studio-home .floating-icon span { font-size: 8px; }
  .studio-home .play-sticker { top: 71px; right: 5px; padding: 8px; font-size: 9px; }
  .studio-home .clue-card { width: 94%; padding: 18px 14px 6px; transform: rotate(-2deg); }
  .studio-home .back-card { top: 116px; height: 65%; max-height: 330px; }
  .studio-home .clue-art { height: 160px; }
  .studio-home .clue-question { font-size: 24px; margin: 10px 0 16px; }
  .studio-home .answer-options { gap: 7px; }
  .studio-home .answer-options button { min-height: 48px; font-size: 13px; }
  .studio-home .clue-result { min-height: 70px; padding-top: 14px; }
  .studio-home .clue-feedback { font-size: 12px; }
  .studio-home .world-caption { font-size: 11px; padding-top: 22px; }
  .studio-home .games-section { padding-block: 32px 48px; }
  .studio-home .section-heading { margin-bottom: 24px; }
  .studio-home .section-heading h2 { font-size: 38px; }
  .studio-home .game-content { padding: 26px 22px 16px; }
  .studio-home .game-heading { margin-bottom: 20px; }
  .studio-home .featured-game h3 { font-size: 38px; }
  .studio-home .game-description { font-size: 14px; line-height: 1.75; }
  .studio-home .game-facts { margin-block: 22px; gap: 20px; font-size: 12px; }
  .studio-home .game-facts strong { font-size: 23px; }
  .studio-home .game-legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; font-size: 12px; }
  .studio-home .game-legal a { display: flex; align-items: center; min-height: 44px; width: fit-content; }
  .studio-home .game-art-scene { margin: 4px 14px 14px; min-height: 420px; padding: 26px 16px 52px; }
  .studio-home .phone { width: clamp(150px, 43vw, 184px); }
  .studio-home .cap-wrench { width: 86px; height: 76px; left: 0; top: 20px; }
  .studio-home .santa { width: 96px; height: 96px; right: -8px; bottom: 12px; }
  .studio-home .scene-note { font-size: 11px; left: 18px; bottom: 18px; }
  .studio-home .character-scene { min-height: 340px; padding-bottom: 68px; }
  .studio-home .showcase-character { height: 240px; width: min(290px, 100%); }
  .studio-home .farm-showcase .farm-character { width: min(230px, 78%); height: auto; border-radius: 24px; }
  .studio-home .farm-showcase h3 { font-size: 38px; }
  .studio-home .game-lineup { gap: 24px; margin-top: 24px; }
  .studio-section, .contact-section { padding-block: 48px; }
  .contact-section h2 { font-size: clamp(34px, 10.5vw, 42px); letter-spacing: -1.5px; }
  .studio-copy > p, .contact-layout > div > p, .community-inner > div > p { font-size: 15px; }
  .social-links a { font-size: 14px; min-height: 56px; }
  .contact-email { font-size: clamp(16px, 4.6vw, 20px); }
  .game-details { margin-top: 32px; }
  .site-main.document { overflow-wrap: anywhere; }
}

@media (max-width: 379px) {
  .studio-home .hero-actions { grid-template-columns: 1fr; gap: 8px; }
  .studio-home .hero-actions .button { font-size: 14px; }
  .studio-home .hero-actions .text-link { min-height: 44px; }
  .studio-home .game-content { padding-inline: 20px; }
  .studio-home .featured-game h3, .studio-home .farm-showcase h3 { font-size: 34px; }
  .studio-home .game-facts { gap: 12px; font-size: 11px; }
  .studio-home .game-facts strong { font-size: 22px; }
  .studio-home .clue-art { height: 145px; }
  .studio-home .clue-question { font-size: 22px; }
  .studio-home .floating-icon { left: 13px; gap: 8px; }
  .studio-home .floating-icon strong { font-size: 16px; }
}