/* Mobile / touch layout. Desktop (≥1024px, fine pointer) keeps the bundle CSS. */
@media (max-width: 1023px) {
  /* One scrollport. height:100% + overflow:auto on html, with body also
     height:100%, makes iOS scroll the page and the first screen separately. */
  html {
    height: auto !important;
    min-height: 100%;
    overflow-x: clip !important;
    overflow-y: auto !important;
    touch-action: pan-y;
  }
  body {
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
  }
  #first, #intro, #services, #fifth, #fourth,
  .scroll-wrapper, article, #main, #third, #third .horizontal {
    overflow: visible !important;
  }
  .gradient { width: 100% !important; }
  #main-menu[aria-hidden="true"] { overflow: hidden !important; }

  #loader-wrapper { display: none !important; }
  #tetris, #canvas4, #spaceinvader {
    display: none !important;
    position: absolute !important;
    height: 0 !important;
    pointer-events: none !important;
  }
  .tetris-img { display: block !important; width: 100%; height: auto; }

  #first, #second, #fourth, #fifth, #third, .scroll-wrapper, .horizontal-wrap, .pin-spacer {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
  }
  #fourth { display: none !important; }
  #first { padding-bottom: 0 !important; justify-content: flex-start !important; }
  #first .responsive-heading { margin-bottom: 0 !important; }
  #first picture, #first .sd-stage { margin-bottom: 0 !important; }
  #intro { padding-top: 20px !important; }
  #services { padding-bottom: 28px !important; }

  .sd-stage {
    position: relative;
    display: block;
    margin: 12px auto 0;
    width: min(100%, 520px);
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    touch-action: pan-y;
  }
  .sd-stage picture, .sd-stage img { width: 100%; height: auto; }
  .sd-vox {
    position: absolute;
    left: var(--l);
    top: var(--t);
    width: var(--s, 12px);
    height: var(--s, 12px);
    background: var(--c, #2fd12b);
    box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
  }
  .sd-stage.boom .sd-vox { animation: sd-burst .9s cubic-bezier(.2, .7, .3, 1) var(--d, 0s) both; }
  .sd-stage.boom img { animation: sd-shake .35s steps(4, end); }
  .sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    font: 700 13px/1 "Druk Wide Bold", "DrukWide-Bold-Web", sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #fff;
    color: #000;
    background: #fff;
  }
  .sd-btn-green { background: #18ff13; border-color: #18ff13; }

  #third.horizontal-wrap { padding-bottom: 280px; }
  #third .horizontal {
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    padding: 8px 16px 24px;
  }
  #third .panel {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    transform: none !important;
    scale: 1 !important;
    margin: 0 0 18px !important;
    overflow: visible !important;
    box-sizing: border-box;
  }
  #third .skills,
  #third .lets-talk { margin: 0 !important; }
  #third #pacman-wrap { display: none !important; }
  #third .image-wrap { display: flex; justify-content: flex-end; }
  #third .image-inner { width: 84px; max-width: 84px; }
  #third .image-inner img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; }
  #third .about-text { color: #fff; }
  #third .about-text hr { background: rgba(255, 255, 255, .45); }
  #third .heading-wrap-two {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    white-space: nowrap !important;
  }
  #third .heading-wrap-two h3,
  #third .heading-wrap-two h3 span {
    white-space: nowrap !important;
    width: auto !important;
  }
  #third .heading-wrap-two h3 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(9px, 2.6vw, 13px) !important;
    line-height: 1.3;
  }
  #third .emoticon {
    position: static !important;
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
    font-size: clamp(13px, 3.8vw, 18px) !important;
    letter-spacing: 0 !important;
    line-height: 1;
    white-space: nowrap !important;
  }
  #third .menu-contact { display: none !important; }
  #main-menu .menu-contact { overflow-wrap: anywhere; white-space: normal; }

  .language-switch {
    width: auto !important;
    height: 60px;
    margin-right: 14px;
    display: grid !important;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 0.45rem;
    line-height: 1;
    font-size: 11px;
  }
  .language-switch a {
    min-width: 0 !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .language-switch > span { line-height: 1; }
  header .cube { min-width: 44px; min-height: 44px; }

  #portfolio h2 { margin: 8px 0 20px !important; }
  #portfolio h2,
  #portfolio h2 span {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
    line-height: 1.15;
  }
  #portfolio .portfolio-stack {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0 0 6px !important;
  }
  #portfolio .portfolio-item { margin: 0 0 36px !important; }
  #portfolio .portfolio-shot,
  #portfolio picture,
  #portfolio img {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  #portfolio .portfolio-copy { padding-top: 12px !important; }
  #portfolio .portfolio-item h3 { margin: 0 0 8px !important; }
  #portfolio .portfolio-desc {
    margin: 0 0 10px !important;
    font-size: 1.05rem;
    line-height: 1.55;
  }
  #portfolio .portfolio-item h3,
  #portfolio .portfolio-item h3.DrukWide-Bold-Web {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font-size: clamp(1.45rem, 6.4vw, 1.9rem);
    line-height: 1.25;
  }
  #portfolio .portfolio-title,
  #portfolio .portfolio-title:link {
    font-size: 1.05rem;
    line-height: 1.4;
  }
  #portfolio h2, #portfolio h2 span { color: #fff !important; }
  #portfolio .portfolio-desc { color: #d4d4d4; }
  #portfolio .portfolio-title,
  #portfolio .portfolio-title:link { color: #18ff13 !important; }

  .sd-contact {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.25rem;
    scroll-margin-top: 76px;
  }
  .sd-contact label {
    display: grid;
    gap: 0.25rem;
    font-family: Montserrat, sans-serif;
    font-size: 0.8rem;
    color: #111;
  }
  .sd-contact input,
  .sd-contact textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    border: 1px solid #111;
    border-radius: 8px;
    padding: 0.7rem 0.75rem;
    background: #fff;
    color: #111;
    font: inherit;
  }
  .sd-contact textarea { min-height: 7rem; resize: vertical; }
  .sd-contact button {
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: #18ff13;
    color: #080808;
    font: 700 13px/1 "Druk Wide Bold", "DrukWide-Bold-Web", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
  }
  .sd-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
  .sd-flash { margin: 0; font-family: Montserrat, sans-serif; font-size: 0.9rem; }
  .sd-flash--ok { color: #064; }
  .sd-flash--err { color: #8f1d2c; }

  .sd-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: block;
    padding: 8px 16px max(8px, env(safe-area-inset-bottom));
    background: rgba(8, 8, 8, .92);
    border-top: 1px solid rgba(255, 255, 255, .12);
    transform: translateY(calc(100% + 12px));
    visibility: hidden;
    pointer-events: none;
    transition: transform .25s ease;
  }
  .sd-bar.sd-show { transform: none; visibility: visible; pointer-events: auto; }
  .sd-bar .sd-btn { width: 100%; min-height: 48px; font-size: 12px; }
  .sd-bar .sd-btn-line { background: transparent; color: #fff; }

  #gs-consent-banner {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    border-radius: 14px;
    padding: 12px 14px !important;
  }
  #gs-consent-banner .gs-consent-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  #gs-consent-accept, #gs-consent-decline { min-height: 44px; flex: 1; }
  #gs-consent-accept { color: #000 !important; background: #18ff13 !important; }
  body:has(#gs-consent-banner.gs-visible) .sd-bar { transform: translateY(110%); }
}

@media (min-width: 1024px) {
  .sd-vox, .sd-bar, .sd-contact { display: none !important; }
  /* display:contents on this focusable button makes WebKit rebuild layout
     while scrolling. Take it out of the hero row instead. The WebGL canvas
     is not inside .sd-stage. */
  .sd-stage {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
  }
  .tetris-img { display: none; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .sd-stage.boom .sd-vox, .sd-stage.boom img { animation: none; }
  .sd-stage.boom img { display: block; }
}

@keyframes sd-shake {
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -1px); }
}
@keyframes sd-burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}