:root {
  /* Aspect ratio 10 columns x 20 rows => width : height = 1 : 2 */
  --tetris-aspect: 1 / 2;
  /* Desktop target height ~70–80vh, capped for very tall screens */
  --board-h-desktop: clamp(660px, 76vh, 920px);
  /* Tablet slightly smaller to avoid header/footer collisions */
  --board-h-tablet: clamp(560px, 78vh, 860px);
  /* Mobile uses width-driven sizing */
  --board-w-mobile: 94vw;

  /* Columns width targets on desktop (reduced to ensure sidebar fits inside play-area on ~1312px viewports) */
  --left-w-desktop: 350px;     /* was 420px */
  --sidebar-w-desktop: 290px;  /* was 300px */
  --gap-desktop: 20px;         /* was 22px */
}

/* Widen container so three columns fit comfortably */
.game-main {
  width: min(1360px, 100%);
}

/* Give the center column more room; keep left/right readable */
.play-grid {
  grid-template-columns: minmax(320px, var(--left-w-desktop)) minmax(400px, 1fr) minmax(260px, var(--sidebar-w-desktop));
  gap: var(--gap-desktop);
}

/* Ensure the game area scales by height with the correct aspect */
.game-container {
  aspect-ratio: var(--tetris-aspect);
  height: var(--board-h-desktop);
  max-height: calc(100vh - 120px); /* leave space for header/padding */
  width: auto; /* width is derived from aspect-ratio */
  max-width: calc(var(--board-h-desktop) * 0.5);
}

/* Canvas should fill container completely */
#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Keep side panel narrow and visible while scrolling */
.support-column {
  width: var(--sidebar-w-desktop);
}

/* Tablet tweaks */
@media (max-width: 1024px) and (min-width: 768px) {
  .play-grid {
    grid-template-columns: 1fr minmax(260px, var(--sidebar-w-desktop));
    grid-template-areas:
      "board support"
      "hero  support";
  }
  .game-container {
    height: var(--board-h-tablet);
    max-width: calc(var(--board-h-tablet) * 0.5);
  }
}

/* Desktop-only fine tuning: reduce stage-board side padding a bit so grid fits comfortably */
@media (min-width: 1025px) {
  .stage-board {
    padding: clamp(12px, 1.6vw, 18px); /* was clamp(16px, 2vw, 24px) */
  }
}

/* Mobile: drive by width, preserve aspect; center on page */
@media (max-width: 820px) {
  .game-container {
    width: var(--board-w-mobile);
    max-width: var(--board-w-mobile);
    aspect-ratio: var(--tetris-aspect);
    height: auto; /* derived from width & aspect */
    margin-inline: auto;
  }
}

/* Touch Controls usability improvements */
/* Hide on desktop (keyboard users) */
@media (hover: hover) {
  .mobile-controls {
    display: none;
  }
}

/* On touch devices: show as bottom floating panel */
@media (pointer: coarse) and (hover: none) {
  .mobile-controls {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 50;
    width: min(720px, 96vw);
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(16, 16, 28, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
  body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}