/* Mobile */
.dpad-section { display: none; }

@media (max-width: 600px), (pointer: coarse) {

  :root {
    --lb-title-sz:  10; /* "all-time scores" title font size  */
    --lb-header-sz: 8; /* column header labels font size    */
    --lb-row-sz:    10; /* data row values font size         */
  }

  .controller-section { display: none !important; }

  * {
    user-select: none;
    -webkit-user-select: none;
  }

  html, body {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    height: 100%;
    width: 100%;
    position: fixed;
  }
  .gameh1 {
    zoom: 0.65;
    padding-top: 20px;
    padding-bottom: 5px;
  }
  .grid-container {
    width: calc(100% - 20px);
    box-sizing: border-box;
  }
  .info-section {
    margin: 0px !important;
    margin-bottom: 10px !important;
  }
  .info-section div {
    zoom: 0.65;
  }

  /* ---- High Scores Modal (mobile) ---- */
  .leaderboard-overlay {
    padding: 8px 10px;
  }

  /* D Pad */
  .dpad-section {
    display: block;
    position: relative;
    width: calc(100% - 20px);
    margin-top: 10px;
    border-radius: 3px;
    background-color: rgba(5,150,140,0.25);
  }
  .dpad-container {
    margin: 10px !important;
    height: 250px;
    position: relative;
    /* background-color: rgba(5,255,255,0.25); */
  }
  .dpBtn {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }
  #dpUp    { clip-path: polygon(0% 0%, 100% 0%, 50% 50%); }
  #dpDown  { clip-path: polygon(0% 100%, 100% 100%, 50% 50%); }
  #dpLeft  { clip-path: polygon(0% 0%, 0% 100%, 50% 50%); }
  #dpRight { clip-path: polygon(100% 0%, 100% 100%, 50% 50%); }

  /* D-pad visual overlay */
  .dpad-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  .dpad-tri-wrap {
    position: absolute;
    inset: 0;
  }
  /* :active on each button targets its matching triangle via sibling combinator */
  #dpUp:active    ~ .dpad-overlay #overlayUp,
  #dpDown:active  ~ .dpad-overlay #overlayDown,
  #dpLeft:active  ~ .dpad-overlay #overlayLeft,
  #dpRight:active ~ .dpad-overlay #overlayRight {
    background: rgba(255, 255, 255, 0.2);
    transition: background 0s;
  }
  /* Rounds outer corners of each triangle via overflow clip */
  .dpad-tri-radius {
    position: absolute;
    inset: 0;
  }
  .dpad-tri {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.75);
    color: rgba(255,255,255,0.5);
    transition: background 0.3s 0s;
  }
  .dpad-tri div {
    position: relative;
    font-size: 40px;
  }
  .dpad-tri.up    div { top: -80px; }
  .dpad-tri.down  div { top: 80px; }
  .dpad-tri.right div { right: -80px; }
  .dpad-tri.left  div { left: -80px; }
  /* mask-image applied by buildDpadMasks() in build.js — driven by --tri-gap and --tri-corner */
  .dpad-tri {
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
  }

  /* ---- Enter initials overlay (mobile) ---- */
  #initials-overlay {
    position: fixed;
    inset: 0;
    align-items: flex-start;
    padding: 0;
    overflow: hidden;
  }
  #initials-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0;
    border: none;
    box-shadow: none;
    justify-content: flex-start;
  }
  #initials-char-grid {
    flex: 1;
    width: 100%;
    align-self: stretch;
  }
  .initials-char-row {
    width: 100%;
    align-self: flex-start;
  }
  .initials-char-btn {
    flex: 1;
    aspect-ratio: 1;
  }
  #initials-backspace,
  #initials-submit {
    padding: 20px 30px !important;
  }

}