@media screen and (max-width:1024px){
  .device-desktop{ display:none !important; }
  .device-mobile{ display:block !important; }

  :root{
    --marginTop:10px;
    --marginLeft:10px;
  }

  html{ font-size:12px; }

  /* body{
    position:relative;
    overflow:unset;
  } */

  body.loading{  }
    body.loading #elements > div .title{ display:none; }

  /* header */
  #header{  }
    #header .inner img#title-too,
    #header .inner img#title-much{ width:125px; }
    #header .inner h1 img#title-part{ width:160px; margin-top:-13%; }
    #header .inner h1 img#title-rock{ width:160px; }
    #header .inner h1 img#title-personal{ width:160px; }
    #header .inner h1 img#title-photo{ width:148px; }

    #header .inner :is(.closeBtn,.backBtn){ height:unset; top:62px; left:var(--marginLeft); right:unset; padding:5px 12px; }
      #header .inner :is(.closeBtn,.backBtn):after{ font-size:1rem; }

  /* footer */
  #footer .footer-item.right{ left:var(--marginLeft); justify-content:space-between; }

  /* elements */
  #elements{ position:relative; z-index:99; }
    #elements > div{ z-index:5; }
      #elements > div .title{ opacity:1; }
        #elements > div .title > span{ font-size:1.2rem; padding:5px 15px; }

  #rockscissorpaper{ width:33.333%; top:12%; }
    #rockscissorpaper .roulette img.arrow{
      animation:arrow_tilt infinite forwards 1200ms steps(1);
    }

  #waiting{ z-index:1; }

  #personality{ width:80%; top:unset; bottom:10%; transform:translateX(-50%) rotate(-7deg); max-width:480px; }

  #photozone{ width:25%; top:24%; right:-5%; }
    #photozone .title{  }
      #photozone .title > span:nth-child(2n){ margin-top:16px !important; }
    #photozone img.wifi{ display:none; }
    #photozone img.heart-pink{ right:17%; }

  /* on */
  body:is(.rockscissorpaper,.personality,.photozone) #header .inner h1{ display:none; }

  body.personality #elements > div#personality{ width:80%; }

  /* back image */
  #backImage:after{ min-width:200px; }

  /* window */
  .window{ top:8px; }
  .window:after{  }
  .window > :is(h2,h3){ padding:8px 0 2px; line-height:1; }
    .window > p{ font-size:10px; }
}

@media screen and (max-width:600px){
  #rockscissorpaper{ width:240px; top:12%; left:-5%; }

  #waiting{ display:none; }

  #personality{ z-index:10 !important; }
    #personality .title{ top:-18%; right:unset; left:0; transform:rotate(5deg); }

  #photozone{ width:200px; bottom:28%; top:unset; }
    #photozone .title{ top:58%; }

  #photobooth{ width:100%; max-width:100% !important; height:100%; z-index:95; }
    #photobooth .window{ height:100%; border-radius:0; }
    #photobooth .window:after{ display:none; }
      #photobooth .window > :is(h2,h3){ display:none; }
      #photobooth .window > .content{ margin:0; }
        /* #photobooth .window > .content .button-area > .button-list > li.thumb-btn{ display:none; } */

        #photobooth .window > .content .image-wrapper:is(.list-type,.thumb-type){ height:calc(125vw + 77px); max-height:unset; overflow:hidden; overflow-y:scroll; background-color:#000; }
        #photobooth .window > .content .image-wrapper:is(.list-type,.thumb-type)::-webkit-scrollbar{ display:none; }
          #photobooth .window > .content .image-wrapper:is(.list-type,.thumb-type) .main-image{ display:none; }

          #photobooth .window > .content .image-wrapper.list-type .thumbnail-list{ background-color:#000;
            display:grid; grid-template-columns:repeat(1,1fr); gap:6px; padding:6px;
          }
            #photobooth .window > .content .image-wrapper.list-type .thumbnail-list .thumb-item{ background-color:#fff; }
  /* on photobooth */
  body.photozone{  }
    body.photozone #header .inner > :not(.closeBtn){ display:none; }
    body.photozone #header .inner .closeBtn{ top:var(--marginTop); left:unset; right:var(--marginLeft); border:1px solid rgba(255,255,255,0.35); }
}