.hero-game-name { display: block; font-size: clamp(21px, 2.3vw, 30px); line-height: 1.25; letter-spacing: -.025em; margin-bottom: 18px; }
.about-section { padding-block: 60px 80px; }
.about-heading { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 60px; align-items: center; margin-bottom: 36px; }
.about-heading h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.15; }
.about-intro { font-size: 20px; line-height: 1.65; color: var(--ink); margin-top: 24px; font-weight: 700; }
.about-rules { font-size: 17px; line-height: 1.8; color: var(--muted); margin-top: 16px; }
.about-art { position: relative; height: 290px; display: flex; justify-content: center; align-items: center; gap: 28px; isolation: isolate; }
.about-art::before { content: ''; position: absolute; inset: 18px -8px; background: #ecefdf; border-radius: 50%; z-index: -1; }
.about-art-orbit { position: absolute; inset: 0 -22px; border: 1px dashed #b5bf9d; border-radius: 50%; transform: rotate(-24deg); }
.about-art .about-tube { --tube-width: 62px; }
.about-tube.about-tube-left { --tilt: -12deg; }
.about-tube.about-tube-right { --tilt: 12deg; margin-top: 38px; animation-delay: -5s; }
.about-ball-0 { --slot: 0; } .about-ball-1 { --slot: 1; } .about-ball-2 { --slot: 2; } .about-ball-3 { --slot: 3; }
.about-art-ball { --ball-size: 42px; position: absolute; top: 0; right: 16px; animation: ambient-drift 8s ease-in-out infinite; }
.about-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.about-card { border: 1px solid #dfe4d4; border-radius: 24px; padding: 30px; background: #f0f3e9; }
.about-anywhere { background: #f5f0e7; border-color: #e7dfd1; }
.about-card-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; background: #fffaf1; border-radius: 16px; color: #797e51; }
.about-card-icon .game-ball { --ball-size: 38px; }
.about-card-icon svg { width: 38px; height: 38px; }
.about-columns h3 { font-size: 24px; line-height: 1.3; margin-bottom: 16px; max-width: 420px; }
.about-columns p { font-size: 17px; line-height: 1.8; color: var(--muted); }
.about-card-detail { border-top: 1px solid #dce2d1; padding-top: 18px; margin-top: 18px; }
.about-columns .about-tablet-note { display: flex; align-items: start; gap: 10px; margin-top: 20px; color: #526633; font-weight: 750; }
.about-tablet-note > span:first-child { flex-shrink: 0; }
.about-store-note { max-width: 920px; margin: 24px auto 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.75; }
.language-fallback { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 24px; }
.language-fallback a { text-decoration: underline; }
@media (max-width: 620px) {
  .about-section { padding-block: 40px 56px; }
  .about-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
  .about-art { width: 220px; height: 210px; margin-inline: auto; }
  .about-art .about-tube { --tube-width: 45px; }
  .about-art-ball { --ball-size: 32px; }
  .about-columns { grid-template-columns: 1fr; gap: 16px; }
  .about-card { padding: 24px; }
  .about-intro, .about-columns p { font-size: 17px; }
  .about-store-note { text-align: left; }
}
@media (min-width: 621px) and (max-width: 1000px) { .about-heading { grid-template-columns: minmax(0, 1fr) 190px; gap: 30px; } .about-art .about-tube { --tube-width: 48px; } .about-art { height: 240px; gap: 18px; } }