/* Block Lines — stacked-block print identity + device polish (2026-09-09) */

/* The previous identity targeted a removed #menuScreen. Keep the same stacked,
   tactile idea but apply it to the live intro/pause/result DOM. */
#introScreen {
  overflow: hidden;
  background: linear-gradient(180deg, #ece9df 0%, #d3cec0 100%);
  color: #292c2e;
  backdrop-filter: none;
}

#introScreen::before {
  content: '';
  position: absolute;
  left: clamp(22px, 8vw, 110px);
  bottom: clamp(24px, 8vh, 84px);
  width: min(43vw, 480px);
  height: min(64vh, 580px);
  background:
    linear-gradient(#e06b55 0 16%, transparent 16% 18%,
      #4d9ec4 18% 34%, transparent 34% 36%,
      #e1bc54 36% 52%, transparent 52% 54%,
      #607d63 54% 70%, transparent 70% 72%,
      #32363a 72% 100%);
  box-shadow: 14px 14px 0 #25282b;
  transform: skewY(-2deg);
  opacity: .98;
}

#introScreen::after {
  content: 'STACK / CLEAR / SURVIVE';
  position: absolute;
  top: max(22px, calc(env(safe-area-inset-top) + 14px));
  left: clamp(22px, 8vw, 110px);
  color: #25282b;
  font: 900 clamp(.68rem, 2vw, .95rem)/1 ui-monospace, monospace;
  letter-spacing: .15em;
}

#introScreen > * {
  position: relative;
  z-index: 1;
  margin-left: min(48vw, 530px);
}

#introScreen .brand-mark {
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border: 3px solid #292c2e;
  background: #f6f2e8;
  color: #292c2e;
  box-shadow: 6px 6px 0 #292c2e;
  font-weight: 900;
}

#introScreen h1 {
  max-width: 540px;
  color: #292c2e;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: 900;
  letter-spacing: -.035em;
  text-align: left;
}

#introScreen .tagline {
  margin-top: 14px;
  color: #55524b;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#introScreen .block-preview {
  justify-content: flex-start;
  margin-block: 22px;
}

#introScreen .block-preview span {
  width: 24px;
  height: 24px;
  border: 2px solid #292c2e;
  animation: none;
  box-shadow: 3px 3px 0 #292c2e;
}
#introScreen .block-preview span:nth-child(1) { background: #e06b55; }
#introScreen .block-preview span:nth-child(2) { background: #4d9ec4; }
#introScreen .block-preview span:nth-child(3) { background: #e1bc54; }
#introScreen .block-preview span:nth-child(4) { background: #607d63; }

#introScreen .primary-btn,
#introScreen .secondary-btn {
  width: min(360px, 42vw);
  min-height: 52px;
  border-radius: 0;
  border: 3px solid #292c2e;
  background: #f6f2e8;
  color: #292c2e;
  box-shadow: 5px 5px 0 #292c2e;
  font-weight: 900;
  touch-action: manipulation;
}

#introScreen .primary-btn {
  min-height: 62px;
  background: #e06b55;
  color: #fff;
}

#pauseScreen .screen-panel {
  border: 4px solid #292c2e;
  border-radius: 0;
  background: #f0ede4;
  color: #292c2e;
  box-shadow: 8px 8px 0 #e1bc54;
  text-align: left;
}

#pauseScreen .eyebrow,
#pauseScreen h2 { color: #292c2e; }

#pauseScreen .primary-btn,
#pauseScreen .secondary-btn {
  min-height: 44px;
  border: 2px solid #292c2e;
  border-radius: 0;
  box-shadow: 3px 3px 0 #292c2e;
  color: #292c2e;
  background: #f8f4e9;
}

#pauseScreen #resumeBtn {
  background: #292c2e;
  color: #fff;
  box-shadow: 4px 4px 0 #e1bc54;
}

#gameOverScreen .screen-panel {
  border: 0;
  border-left: 12px solid #e06b55;
  border-radius: 0;
  background: #292c2e;
  color: #f2efe8;
  box-shadow: none;
  text-align: left;
}

#gameOverScreen .result-grid div {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
}

/* Interaction floor and safe-area corrections. */
.icon-btn,
.primary-btn,
.secondary-btn,
.ctrl-btn {
  min-height: 44px;
  touch-action: manipulation;
}

.icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
}

.ctrl-btn {
  width: 46px;
  height: 46px;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid #e1bc54;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .app {
    height: 100dvh;
    min-height: 0;
  }

  .hud {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .ctrl-btn {
    width: 44px;
    height: 44px;
  }

  .ctrl-rotate { width: 48px; }

  #introScreen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: max(64px, calc(env(safe-area-inset-top) + 48px)) max(18px, env(safe-area-inset-right)) max(92px, calc(env(safe-area-inset-bottom) + 74px)) max(18px, env(safe-area-inset-left));
  }

  #introScreen::before {
    left: 5%;
    bottom: 7%;
    width: 43%;
    height: 57%;
  }

  #introScreen::after {
    left: 5%;
    top: max(18px, calc(env(safe-area-inset-top) + 10px));
    font-size: .6rem;
  }

  #introScreen > * {
    width: 48%;
    margin-left: 0;
  }

  #introScreen .brand-mark {
    align-self: flex-end;
    width: 48px;
    height: 48px;
    margin: 0 0 12px;
  }

  #introScreen h1 {
    font-size: clamp(2.4rem, 13vw, 4rem);
    line-height: .82;
  }

  #introScreen .tagline {
    font-size: .64rem;
  }

  #introScreen .block-preview {
    width: 48%;
    margin: 14px 0;
    gap: 4px;
  }

  #introScreen .block-preview span {
    width: 18px;
    height: 18px;
  }

  #introScreen .primary-btn,
  #introScreen .secondary-btn {
    width: 48%;
    min-height: 44px;
    font-size: .65rem;
  }

  #introScreen .primary-btn { min-height: 52px; }
}

@media (max-width: 390px) {
  .hud-left,
  .hud-right { gap: 3px; }
  .hud-pill { padding-inline: 4px; }
  .player-chip { display: none; }
  #introScreen::before { width: 41%; }
  #introScreen > *,
  #introScreen .block-preview,
  #introScreen .primary-btn,
  #introScreen .secondary-btn { width: 51%; }
}

@media (max-height: 480px) and (orientation: landscape) {
  #introScreen {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(290px, 1fr);
    grid-auto-rows: min-content;
    align-content: center;
    justify-items: stretch;
    gap: 7px 20px;
    padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }
  #introScreen::before {
    left: 4%;
    bottom: 9%;
    width: 34%;
    height: 70%;
  }
  #introScreen::after { left: 4%; top: 9px; font-size: .5rem; }
  #introScreen > * { width: auto; margin: 0; grid-column: 2; }
  #introScreen .brand-mark { width: 42px; height: 42px; margin: 0; }
  #introScreen h1 { font-size: clamp(2rem, 10vh, 3.1rem); }
  #introScreen .tagline { margin-top: 0; }
  #introScreen .block-preview { width: auto; margin: 3px 0; }
  #introScreen .primary-btn,
  #introScreen .secondary-btn { width: 100%; min-height: 44px; }

  #pauseScreen,
  #gameOverScreen {
    overflow: auto;
    align-items: start;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  #pauseScreen .screen-panel,
  #gameOverScreen .screen-panel {
    width: min(92vw, 760px);
    max-height: none;
    margin: auto;
    padding: 10px 14px;
  }
  #pauseScreen .menu-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  #pauseScreen .menu-actions button,
  #gameOverScreen .menu-actions button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .pop,
  .block-preview span,
  button {
    transition: none !important;
    animation: none !important;
  }
}