/* ✅ PORTRAIT: Touch devices only, max 768px wide (phones upright) */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 768px) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #2b3a3e, #3f5b5d);
    overflow: hidden;
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(5, 100px);
    gap: 15px;
    padding: 20px;
    position: relative;
    width: fit-content;
    height: fit-content;
    justify-content: center;
    align-content: center;
  }

  .grid-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(43, 58, 62, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    z-index: -1;
  }

  .statsfm,
  #themeButton,
  .wip,
  .spotify,
  .duolingo,
  .twitter,
  .dropkickd-button,
  .substack-button,
  .letterboxd,
  .photo,
  .news-button,
  .secret-button,
  .propaganda,
  .kiss-button,
  .vinyl,
  .kiss-button.free {
    width: 100px !important;
    height: 100px !important;
  }
}

/* ✅ LANDSCAPE: Touch devices only (phones/tablets sideways) */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #2b3a3e, #3f5b5d);
    overflow: hidden;
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(5, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 15px;
    padding: 20px;
    position: relative;
    width: fit-content;
    height: fit-content;
    justify-content: center;
    align-content: center;
  }

  .grid-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(43, 58, 62, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    z-index: -1;
  }

  .statsfm,
  #themeButton,
  .wip,
  .spotify,
  .duolingo,
  .twitter,
  .dropkickd-button,
  .substack-button,
  .letterboxd,
  .photo,
  .news-button,
  .secret-button,
  .propaganda,
  .kiss-button,
  .vinyl,
  .kiss-button.free {
    width: 100px !important;
    height: 100px !important;
  }

  /* Optional Grid Layout Override */
  .substack-button     { grid-area: 1 / 2; }
  .twitter             { grid-area: 1 / 3; }
  .duolingo            { grid-area: 1 / 4; }
  .dropkickd-button    { grid-area: 1 / 5; }
  .letterboxd          { grid-area: 2 / 2; }

  .statsfm             { grid-area: 2 / 5; }
  .news-button         { grid-area: 2 / 1; }
  .kiss-button         { grid-area: 2 / 3; }
  .spotify             { grid-area: 2 / 4; }
  .propaganda-link     { grid-area: 1 / 1; }

  .photo               { grid-area: 3 / 1; }
  .vinyl               { grid-area: 3 / 5; }
  .wip                 { grid-area: 3 / 2; }
  #themeButton         { grid-area: 3 / 3; }
  .secret-button       { grid-area: 3 / 4; }
}