/* Scoped additions for the mobile game development service. */
.mobile-games { --mg-accent: #f3712f; min-width: 0; accent-color: var(--mg-accent); }
.mobile-games a[href]:not(.navigation__link):not(.others__link),
.mobile-games a[href]:not(.navigation__link):not(.others__link):visited,
.mobile-games a[href]:not(.navigation__link):not(.others__link):hover,
.mobile-games a[href]:not(.navigation__link):not(.others__link):focus-visible { color: var(--mg-accent); }
.mobile-games .others__link[href],
.mobile-games .others__link[href]:visited,
.mobile-games .others__link[href]:hover,
.mobile-games .others__link[href]:focus-visible { color: #fff; }
.mobile-games .navigation__link:focus-visible { outline-color: #676767; }
.mobile-games .mg-hero-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mobile-games .mg-hero-actions .develop__btn { width: 100%; }
.mobile-games section { scroll-margin-top: 110px; }
.mobile-games > section { background-color: #fff; }
.mobile-games > section.gray-bg { background-color: #fafafa; }
.mobile-games .develop__flex:last-child { flex-wrap: wrap; gap: 24px; }
.mobile-games .develop__flex:last-child > p { flex: 1 1 480px; }
.mobile-games .tab__img-1 { height: auto; object-fit: contain; align-self: flex-start; }
.mobile-games .mg-section .h2-title { margin-bottom: 24px; }
.mobile-games .mg-section .h2-title, .mobile-games .mg-card h3 { overflow-wrap: anywhere; }
.mobile-games .mg-lead { max-width: 1020px; margin: 0 0 32px; }
.mobile-games .mg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mobile-games .mg-card { padding: 28px; border: 1px solid #dedede; border-radius: 16px; background: #fff; min-width: 0; }
.mobile-games .mg-card h3, .mobile-games .mg-note h3, .mobile-games .mg-pipeline h3 {  margin: 0 0 14px; }
.mobile-games .mg-card p, .mobile-games .mg-note p, .mobile-games .mg-pipeline p { margin: 0; }
.mobile-games .mg-card a, .mobile-games .mg-note a, .mobile-games .mg-list a, .mobile-games .mg-link { text-decoration: underline; text-underline-offset: 4px; }
.mobile-games .mg-note { margin-top: 28px; padding: 28px; border-left: 3px solid var(--mg-accent); background: #f7f7f7; }
.mobile-games .gray-bg .mg-note { background: #fff; }
.mobile-games .mg-note p + p, .mobile-games .mg-note .mg-link { display: block; margin-top: 16px; }
.mobile-games .mg-pipeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 0; margin: 0; list-style: none; counter-reset: production; }
.mobile-games .mg-pipeline li { counter-increment: production; padding-top: 18px; border-top: 1px solid #d5d5d5; }
.mobile-games .mg-pipeline li::before { content: counter(production, decimal-leading-zero); display: block; color: var(--mg-accent); font-size: 28px; margin-bottom: 16px; }
.mobile-games .mg-table-wrap { width: 100%; overflow-x: auto; }
.mobile-games .mg-table { width: 100%; min-width: 740px; border-collapse: collapse; }
.mobile-games .mg-table caption { text-align: left; padding: 0 0 16px; font-weight: 600; }
.mobile-games .mg-table th, .mobile-games .mg-table td { padding: 20px; border-bottom: 1px solid #dedede; text-align: left; vertical-align: top; }
.mobile-games .mg-table thead { background: #f1f1f1; }
.mobile-games .mg-table tbody th { width: 23%; font-weight: 600; }
.mobile-games .mg-table td:nth-child(2), .mobile-games .mg-table td:nth-child(3) { white-space: nowrap; }
.mobile-games .mg-list { padding-left: 24px; margin: 0; list-style: disc; }
.mobile-games .mg-list li + li { margin-top: 14px; }
.mobile-games .mg-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.mobile-games .mg-glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; }
.mobile-games .mg-glossary dt {   margin-bottom: 8px; }
.mobile-games .mg-glossary dd { margin: 0; }
.mobile-games a:focus-visible, .mobile-games summary:focus-visible, .mobile-games .mg-table-wrap:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 5px; }
@media (max-width: 1000px) {
  .mobile-games .mg-grid, .mobile-games .mg-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mobile-games .mg-grid, .mobile-games .mg-pipeline, .mobile-games .mg-glossary { grid-template-columns: minmax(0, 1fr); }
  .mobile-games .mg-card, .mobile-games .mg-note { padding: 20px; }
  .mobile-games .mg-table th, .mobile-games .mg-table td { padding: 14px; }
  .mobile-games .mg-table, .mobile-games .mg-table tbody, .mobile-games .mg-table tr, .mobile-games .mg-table th, .mobile-games .mg-table td { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
  .mobile-games .mg-table caption { display: block; }
  .mobile-games .mg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-games .mg-table tr { margin-bottom: 16px; padding: 18px; border: 1px solid #dedede; border-radius: 14px; }
  .mobile-games .mg-table tbody th, .mobile-games .mg-table td { padding: 7px 0; border: 0; white-space: normal; }
  .mobile-games .mg-table tbody th { color: #0a0a0a; }
  .mobile-games .mg-table td::before { content: attr(data-label); display: block; font-size: 14px; color: #6a6a6a; }
  .mobile-games .develop__flex:last-child > p { flex-basis: 100%; }
}

@media (max-width: 640px) { .mobile-games .mg-hero-actions { width: 100%; } }

.mobile-games .mg-case-media { flex: 0 1 42%; min-width: 0; margin: 0; }
.mobile-games .mg-case-media > img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; background: #fafafa; }
.mobile-games .mg-case-media figcaption { margin: 12px 0 24px; }
.mobile-games .mg-case-media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #0a0a0a; }
.mobile-games .mg-case-media video + p { margin-top: 12px; }
.mobile-games .clients .tab__flex { min-width: 0; flex: 1; }
.mobile-games .mg-expert { display: flex; align-items: flex-start; gap: 32px; padding: 28px; border: 1px solid #dedede; border-radius: 16px; background: #fff; }
.mobile-games .mg-expert > img { flex: 0 0 154px; border-radius: 50%; }
.mobile-games .mg-expert h3 { margin: 0 0 12px; }
.mobile-games .mg-expert p + p { margin-top: 16px; }
.mobile-games #tech .mg-grid + .mg-grid { margin-top: 24px; }
@media (max-width: 760px) {
  .mobile-games .clients .tab__content { flex-direction: column; }
  .mobile-games .mg-case-media { width: 100%; flex-basis: auto; }
  .mobile-games .mg-expert { flex-direction: column; padding: 20px; gap: 20px; }
}
@media (max-width: 640px) {
  body:has(.mobile-games) .svg-button-copy__tooltip { left: auto; right: 0; transform: none; }
}