:root {
     --accent: #A60F38;
     --sepia-light: #FEECD2;
     --sepia-main: #FDE4BF;
     --sepia-dark: #BFA98A;
     --dark-brown: #361307;
     --off-black: #292929;
}
html{
     /* stop the weird scrolling thing on mobile... */
     touch-action: none;
     overflow: hidden;
}
body {
     font-family: 'Open Sans', sans-serif;
     color: var(--dark-brown);
     margin: 0;
     /* *************** */
     height: 100%;
     min-height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 0;
     margin: 0;
     background-color: var(--sepia-light);
     touch-action: none;
     /* *************** */
}
.gameContainer {
     background-color: var(--sepia-light);
     /* *************** */
     width: 100%;
     min-width: 600px;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     overflow: hidden;
     padding: 0;
     margin: 0;
     /* *************** */
}
.explorerLogo {
     display: flex;
     justify-self: center;
}
.explorerLogo img {
     margin: 50px 0px 50px -20px;
}
h1 {
     font-family: 'Besley', serif;
     font-size: 3.5rem;
     text-align: center;
     margin-top: 0px;
     margin-bottom: 5px;
     border-top: 2px solid var(--dark-brown);
     border-bottom: 2px solid var(--dark-brown);
     touch-action: none;
}
#PixiStageContainer {
     flex: 1;
     min-height: 0;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;  
     touch-action: none;
}
#PixiStageContainer canvas{
     display: block;
     width: 95%;
     max-height: 100%;
     aspect-ratio: 1124 / 1150;
}

/* ═══════════════════════════════════════════════════════════════════
     MEDIA QUERIES
═══════════════════════════════════════════════════════════════════ */

/* ── Narrow mobile  max 360px (e.g. Galaxy Fold) ─── */
@media (max-width: 360px) {
     .explorerLogo img{
          height: 70px;
          margin: 0.3rem 0 0 0;
          padding: 0;
     }
     h1 {
          font-size: 1.4rem;
          margin: 1rem;
     }
     .gameContainer {
          /* Trick: add background colour for responsive testing! */
          /* background-color: #bc8efd; */
          padding-bottom: 1rem;
          padding-left: 0;
     } 
     #PixiStageContainer canvas{
          display: block;
          width: 55%;
          max-height: 100%;
          aspect-ratio: 1124 / 1150;
     }   
}

/* ── Mobile  361px – 480px ─── E.g. Samsung Galaxy A51 or S20 or iPhone SE or XR */
@media (min-width: 361px) and (max-width: 480px) {

     .explorerLogo img{
          height: 80px;
          margin: 0.5rem 0 0 0;
          padding: 0;
     }
     h1 {
          font-size: 1.5rem;
          margin: 1rem;
     }
     .gameContainer {
          /* Trick: add background colour for responsive testing! */
          /* background-color: #ffc0cb; */
          padding-bottom: 1rem;
          padding-left: 0;
     } 
     #PixiStageContainer canvas{
          display: block;
          width: 65%;
          max-height: 100%;
          aspect-ratio: 1124 / 1150;
     }   
}

/* ── Tablet  481px – 768px ─── Eg. iPad Mini*/
@media (min-width: 481px) and (max-width: 768px) {

     .explorerLogo img{
          height: 90px;
          margin: 0.7rem 0 0 0;
          padding: 0;
     }
     h1 {
          font-size: 1.6rem;
          margin: 1rem;
     }
     .gameContainer {
          /* Trick: add background colour for responsive testing! */
          /* background-color: #6dcef1; */
          padding-bottom: 1rem;
          padding-left: 0;
     } 
     #PixiStageContainer canvas{
          display: block;
          width: 70%;
          max-height: 100%;
          aspect-ratio: 1124 / 1150;
     }   
}

/* ── Small desktop / landscape tablet  769px – 1024px ─── E.g. iPad Air */
@media (min-width: 769px) and (max-width: 1024px) {

     .explorerLogo img{
          height: 100px;
          margin: 0.8rem 0 0 0;
          padding: 0;
     }
     h1 {
          font-size: 1.7rem;
          margin: 1rem;
     }
     .gameContainer {
          /* Trick: add background colour for responsive testing! */
          /* background-color: #a1f494; */
          padding-bottom: 1rem;
          padding-left: 0;
     } 
     #PixiStageContainer canvas{
          display: block;
          width: 55%;
          max-height: 100%;
          aspect-ratio: 1124 / 1150;
     }   
     
}

/* ── Large desktop  min 1025px ─── E.g. iPad Pro*/
@media (min-width: 1025px) {
     html{
          overflow: auto;
     }

     .explorerLogo img{
          height: 120px;
          margin: 1rem 0 0 0;
          padding: 0;
     }
     h1 {
          font-size: 1.7rem;
          margin: 1rem;
     }
     .gameContainer {
          /* Trick: add background colour for responsive testing! */
          /* background-color: #ffa268; */
          padding-bottom: 1rem;
          padding-left: 0;
    }
     #PixiStageContainer canvas{
          display: block;
          width: 45%;
          max-height: 50%;
          aspect-ratio: 1124 / 1150;
     }   
     
}