@media screen and (max-width:1024px){
  #header .inner :is(.closeBtn,.backBtn){ top:100px; }

  section > :is(h2,h3){ top:80px; font-size:1.6rem; }

  #select{  }
    #select .content{  }
      #select .content .member{  }
        #select .content .member img{ display:none; }

      /* #select .content .member ul.member-list{ position:absolute; bottom:10%; left:0; right:0; width:100%; padding:6px 0; background-color:#fff;
        display:flex; flex-direction:row; justify-content:center; align-items:center; gap:4px;
      } */
      #select .content .member ul.member-list{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
      }
        #select .content .member ul.member-list > li{ cursor:pointer; border:1px solid; border-color:rgba(0,0,0,0.05); padding:6px; background-color:rgba(255, 255, 255, 0.75); border-radius:8px;
          backdrop-filter:blur(3px);
        }
        #select .content .member ul.member-list > li:before{ content:''; display:block; position:relative;
          width:100px; height:125px;
          background-position:center;
          background-repeat:no-repeat;
          background-size:cover;
        }
          #select .content .member ul.member-list > li h4{ font-size:1rem; font-weight:400; text-align:center; margin-top:4px; }
        /* specific */
        #select .content .member ul.member-list > li[data-name="keena"]:before{ background-image:url('http://fiftyfifty.speedgabia.com/img/personal/result_keena.webp'); }
        #select .content .member ul.member-list > li[data-name="chanelle"]:before{ background-image:url('http://fiftyfifty.speedgabia.com/img/personal/result_chanelle.webp'); }
        #select .content .member ul.member-list > li[data-name="yewon"]:before{ background-image:url('http://fiftyfifty.speedgabia.com/img/personal/result_yewon.webp'); }
        #select .content .member ul.member-list > li[data-name="athena"]{ order:5; }
        #select .content .member ul.member-list > li[data-name="athena"]:before{ background-image:url('http://fiftyfifty.speedgabia.com/img/personal/result_athena.webp'); }
        #select .content .member ul.member-list > li[data-name="hana"]:before{ background-image:url('http://fiftyfifty.speedgabia.com/img/personal/result_hana.webp'); }

  #gaming{  }
    #gaming > .content{  }
      #gaming > .content .hp{ z-index:20; top:unset; bottom:10%;
        display: flex;
        gap: 6px;
        background-color: rgba(255, 255, 255, 0.75);
        padding: 10px 20px;
        border-radius: 40px;
        backdrop-filter:blur(3px);
      }
        #gaming > .content .hp img{ width:28px; }
      #gaming > .content .speech{ animation:none; transform:scale(0.65); }
      #gaming > .content :is(.member,.roulette){ width:80%; left:50%; transform:translateX(-50%); }
      #gaming > .content .member{ pointer-events:none; z-index:10; bottom:-3%;
        /* width:100%; */
        left:55%;
      }
        #gaming > .content .member .speech{ top:10%; left:-20%; }
        #gaming > .content .member .double-heart{ display:none; }
      #gaming > .content .roulette{ top:40px; width:78%; }
        #gaming > .content .roulette .speech{ top:-5%; left:66%; }
        #gaming > .content .roulette img.arrow{
          /* animation:arrow_tilt infinite forwards 1800ms steps(1); */
        }
        #gaming > .content .roulette .message{ bottom:unset; top:-20%; transform:translateX(-50%) scale(0.65); }
          #gaming > .content .roulette .message p{ margin-top:20%; }

  /* no result */
  #gaming:not(.win,.lose,.draw,.loading) > .content .roulette img.arrow{
    animation:arrow_tilt infinite forwards 1800ms steps(1);
  }

  #gaming:is(.win,.lose,.draw){  }
    #gaming:is(.win,.lose,.draw) > .content .roulette img.arrow{  }

  /* done */
  #gaming.result{  }
    #gaming.result > .content .hp{ top:60px; bottom:unset; z-index:22;
      padding:0; background:none; backdrop-filter:none;
      left:var(--marginLeft); transform:none;
    }
    #gaming.result .content .member{ z-index:1; width:100%; left:38%; }
      #gaming.result .content .member .speech{
        /* left:-12%; */
        left:-1%; top:-2%;
      }
    #gaming.result .content .roulette{ left:50%; bottom:25%; top:unset; z-index:10; }
      #gaming.result:is(.totalWin,.totalLose) .content .roulette .message{ top:unset; transform:translate(-50%, -50%) scale(0.65); }
      #gaming.result.totalLose .content .member{ left:60%; bottom:0; }

  /* #photoCard{ width:unset; right:unset; left:50%; transform:translateX(-50%); top:80px; z-index:10; } */
  #photoCard{ width:unset; right:var(--marginLeft); transform:none; top:60px; z-index:10; }
    #photoCard > .content{  }
      #photoCard > .content .card-image{ width:200px; height:150px; object-fit:cover; }
}