/* WillowinWorld CSS: mobile layout, cards, modals and game scene rules. */
@media (max-width: 640px) {
  .brand-name {
    font-size: 0.95rem;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .game-detail-topbar {
    min-height: 66px;
  }

  .game-detail-brand img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .game-detail-brand small {
    display: none;
  }

  .game-detail-nav a {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .press-kit-ocean-page .press-kit-hub h1,
  .press-kit-hero h1 {
    font-size: clamp(2.35rem, 9.5vw, 3.05rem);
    line-height: 0.96;
    overflow-wrap: normal;
    word-break: normal;
  }

  .press-kit-topbar .game-detail-nav a[href="#brand-guidelines"],
  .press-kit-topbar .game-detail-nav a[href="#asset-policy"] {
    display: none;
  }

  .game-theme-toggle span {
    display: none;
  }

  .nature-game-hero {
    padding: 34px 0 56px;
  }

  .candy-game-hero {
    padding: 34px 0 56px;
  }

  .paint-game-hero {
    padding: 34px 0 56px;
  }

  .ball-game-hero {
    padding: 34px 0 56px;
  }

  .nature-hero-copy h1 {
    font-size: clamp(3rem, 13.2vw, 3.85rem);
    line-height: 0.9;
  }

  .candy-hero-copy h1 {
    font-size: clamp(2.9rem, 12.6vw, 3.8rem);
    line-height: 0.9;
  }

  .paint-hero-copy h1 {
    font-size: clamp(2.9rem, 12.6vw, 3.8rem);
    line-height: 0.9;
  }

  .ball-hero-copy h1 {
    font-size: clamp(2.85rem, 12.4vw, 3.72rem);
    line-height: 0.9;
  }

  .nature-hero-copy .hero-copy {
    font-size: 1rem;
  }

  .candy-hero-copy .hero-copy {
    font-size: 1rem;
  }

  .paint-hero-copy .hero-copy {
    font-size: 1rem;
  }

  .ball-hero-copy .hero-copy {
    font-size: 1rem;
  }

  .nature-hero-note {
    display: none;
  }

  .candy-hero-note {
    display: none;
  }

  .paint-hero-note {
    display: none;
  }

  .ball-hero-note {
    display: none;
  }

  .nature-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .candy-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .paint-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ball-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nature-hero-stats span {
    min-height: 70px;
    padding: 10px;
  }

  .candy-hero-stats span {
    min-height: 70px;
    padding: 10px;
  }

  .paint-hero-stats span {
    min-height: 70px;
    padding: 10px;
  }

  .ball-hero-stats span {
    min-height: 70px;
    padding: 10px;
  }

  .nature-hero-stats strong {
    font-size: 0.9rem;
  }

  .candy-hero-stats strong {
    font-size: 0.9rem;
  }

  .paint-hero-stats strong {
    font-size: 0.9rem;
  }

  .ball-hero-stats strong {
    font-size: 0.9rem;
  }

  .nature-hero-stats small {
    font-size: 0.68rem;
  }

  .candy-hero-stats small {
    font-size: 0.68rem;
  }

  .paint-hero-stats small {
    font-size: 0.68rem;
  }

  .ball-hero-stats small {
    font-size: 0.68rem;
  }

  .nature-menu-sun {
    top: 17%;
    right: -9%;
    width: 150px;
    opacity: 0.72;
  }

  .nature-menu-branch-one {
    top: 35%;
    right: -22%;
    width: 66vw;
  }

  .nature-menu-branch-two {
    top: 41%;
    right: -16%;
    width: 54vw;
  }

  .nature-hero-showcase {
    min-height: 480px;
  }

  .candy-hero-showcase {
    min-height: 520px;
  }

  .paint-hero-showcase {
    min-height: 520px;
  }

  .ball-hero-showcase {
    min-height: 520px;
  }

  .nature-device-frame {
    border-radius: 24px;
  }

  .candy-device-frame {
    width: min(100%, 340px);
    border-radius: 24px;
  }

  .paint-device-frame {
    width: min(100%, 340px);
    border-radius: 24px;
  }

  .ball-device-frame {
    width: min(100%, 360px);
    border-radius: 24px;
  }

  .nature-showcase-icon {
    top: 16px;
    right: 16px;
    width: 78px;
    border-radius: 18px;
  }

  .candy-showcase-icon {
    top: 16px;
    right: 16px;
    width: 76px;
    border-radius: 18px;
  }

  .paint-showcase-icon {
    top: 16px;
    right: 16px;
    width: 76px;
    border-radius: 18px;
  }

  .ball-showcase-icon {
    top: 16px;
    right: 16px;
    width: 76px;
    border-radius: 18px;
  }

  .ball-preview-title {
    left: 16px;
    top: 18px;
    max-width: calc(100% - 126px);
    gap: 7px;
  }

  .ball-preview-title small {
    padding: 8px 10px;
    font-size: 0.66rem;
  }

  .ball-preview-title strong {
    font-size: clamp(2.25rem, 11.4vw, 3rem);
  }

  .ball-cycle {
    gap: 6px;
  }

  .ball-menu-sun {
    top: 15%;
    right: -12%;
    width: 150px;
    opacity: 0.62;
  }

  .ball-menu-halo-one {
    left: -21%;
    top: 19%;
    opacity: 0.34;
  }

  .ball-menu-halo-two {
    right: -16%;
    bottom: 16%;
    opacity: 0.32;
  }

  .ball-menu-pillar {
    opacity: 0.34;
  }

  .ball-menu-rock {
    opacity: 0.34;
  }

  .ball-stage-showcase .ball-tower {
    top: -30px;
    width: 140px;
    height: 560px;
  }

  .ball-stage-showcase .ball-espa-wrap {
    width: 178px;
  }

  .paint-preview-title {
    left: 16px;
    top: 18px;
    max-width: calc(100% - 126px);
    gap: 7px;
  }

  .paint-preview-title small {
    padding: 8px 10px;
    font-size: 0.66rem;
  }

  .paint-preview-title strong {
    font-size: clamp(2.25rem, 11.4vw, 3rem);
  }

  .paint-cycle {
    gap: 6px;
  }

  .paint-control-lights {
    right: 18px;
    bottom: 82px;
    gap: 6px;
    padding: 7px 9px;
  }

  .paint-control-lights span {
    width: 8px;
  }

  .paint-stage-showcase .paint-module {
    top: -4%;
    height: 111%;
  }

  .paint-stage-showcase .paint-hero {
    left: -92px;
    bottom: -96px;
    width: 360px;
  }

  .paint-menu-splash-one {
    top: 15%;
    right: -22%;
    opacity: 0.34;
  }

  .paint-menu-splash-two {
    left: -20%;
    bottom: 22%;
    opacity: 0.36;
  }

  .paint-menu-splash-three {
    right: -14%;
    bottom: 13%;
    opacity: 0.32;
  }

  .paint-menu-pipe {
    opacity: 0.42;
  }

  .paint-menu-gauge-one {
    top: 8%;
    left: -13%;
    opacity: 0.28;
  }

  .paint-menu-gauge-two {
    right: -12%;
    bottom: 20%;
    opacity: 0.3;
  }

  .candy-preview-title {
    left: 16px;
    top: 18px;
    max-width: calc(100% - 126px);
    gap: 7px;
  }

  .candy-preview-title small {
    padding: 8px 10px;
    font-size: 0.68rem;
  }

  .candy-preview-title strong {
    font-size: clamp(2.45rem, 12vw, 3.25rem);
  }

  .candy-cycle {
    gap: 6px;
    margin-top: 0;
  }

  .nature-stage-showcase .nature-growth {
    bottom: 50px;
    width: min(84%, 340px);
  }

  .nature-stage-showcase .nature-companion-water {
    bottom: 54px;
    width: 86px;
  }

  .nature-stage-showcase .nature-companion-seed {
    bottom: 56px;
    width: 92px;
  }

  h1 {
    font-size: clamp(2.65rem, 12.5vw, 3.7rem);
    overflow-wrap: anywhere;
  }

  body:not(.game-detail-page) .game-page-section h1 {
    font-size: clamp(2.1rem, 9.5vw, 2.85rem);
    line-height: 1.02;
    overflow-wrap: normal;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(2.75rem, 11.8vw, 3.2rem);
    line-height: 0.94;
  }

  .hero-brand-title {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hero-portal-badge {
    right: 14px;
    bottom: 72px;
    min-height: 42px;
    font-size: 0.72rem;
  }

  .hero-actions,
  .cta-row,
  .game-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
    min-height: 48px;
  }

  .related-world-link {
    min-height: auto;
  }

  .hero-worlds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-points {
    grid-template-columns: 1fr;
  }

  .symbol-card {
    gap: 18px;
  }

  .hero-panel {
    min-height: 470px;
    border-radius: 22px;
  }

  .nature-preview-icon {
    top: 18px;
    right: 16px;
    width: 78px;
    border-radius: 18px;
  }

  .nature-preview-title {
    top: 18px;
    left: 18px;
    max-width: calc(100% - 106px);
  }

  .nature-preview-title strong {
    font-size: 2.35rem;
  }

  .nature-cycle {
    top: 184px;
    left: 18px;
    max-width: calc(100% - 36px);
  }

  .nature-cycle b {
    min-height: 25px;
    padding: 6px 8px;
    font-size: 0.68rem;
  }

  .nature-growth {
    bottom: 58px;
    width: min(88%, 330px);
  }

  .nature-companion-water {
    bottom: 60px;
    width: 88px;
  }

  .nature-companion-seed {
    bottom: 62px;
    width: 92px;
  }

  .nature-cover-icon,
  .nature-hover-icon {
    width: 78px;
    border-radius: 18px;
  }

  .magic-hud {
    align-items: flex-start;
    flex-direction: column;
  }

  .principles-grid,
  .systems-grid,
  .timeline,
  .devlog-grid {
    grid-template-columns: 1fr;
  }

  .info-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .game-cover {
    min-height: 280px;
  }

  .candy-game-cover {
    min-height: 310px;
  }

  .candy-piece {
    width: 96px;
  }

  .candy-piece-result {
    width: 112px;
  }

  .candy-cover-icon,
  .candy-hover-icon {
    top: 14px;
    right: 14px;
    width: 78px;
    border-radius: 18px;
  }

  .ball-game-cover {
    min-height: 330px;
  }

  .ball-tower {
    top: -44px;
    width: 132px;
    height: 472px;
  }

  .ball-espa-wrap {
    top: 53%;
    width: 166px;
  }

  .ball-platform-a,
  .ball-platform-c,
  .ball-platform-e {
    --rock-width: 106px;
  }

  .ball-platform-b,
  .ball-platform-d,
  .ball-platform-f {
    --rock-width: 102px;
  }

  .ball-cover-icon,
  .ball-hover-icon {
    top: 14px;
    right: 14px;
    width: 78px;
    border-radius: 18px;
  }

  .paint-game-cover {
    min-height: 330px;
  }

  .paint-arena {
    top: 10%;
    width: clamp(166px, 52%, 214px);
    height: 84%;
  }

  .paint-module {
    height: 120%;
  }

  .paint-hero {
    left: -92px;
    bottom: -104px;
    width: 342px;
  }

  .paint-blaster {
    width: 132px;
  }

  .paint-cover-icon,
  .paint-hover-icon {
    top: 14px;
    right: 14px;
    width: 78px;
    border-radius: 18px;
  }

  .game-body {
    padding: 20px;
  }

  .cover-title h3 {
    font-size: 2.25rem;
  }

  .modal-dialog {
    padding: 22px;
    border-radius: 22px;
  }

  .game-dialog {
    padding: 0 0 22px;
  }

  .game-dialog-cover {
    min-height: 148px;
    margin-bottom: 22px;
  }

  .game-dialog-grid {
    grid-template-columns: 1fr;
  }

  .success-badge {
    width: calc(100% - 28px);
    justify-content: center;
    text-align: center;
  }
}

@supports (content-visibility: auto) {
  .timeline,
  .devlog-grid,
  .asset-list,
  .press-window-grid,
  .brand-rules {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
}