/* transition */
section,
#select .content .member img,
#select .content .member ul.member-list > li h4,
#gaming > .content .roulette img,
#gaming > .content .speech,
#gaming > .content .roulette .message p,
#gaming > .content .hp img{ transition:300ms; }

section{ position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%;
  opacity:0; pointer-events:none;
}
  section > :is(h2,h3){ position:absolute; left:50%; top:25%; transform:translateX(-50%); white-space:nowrap;
    font-size:2rem;
    font-weight:400;
    color:#fff;
  }
    section > :is(h2,h3) span{ vertical-align:bottom; }
    section > :is(h2,h3) span:nth-child(2n){ margin-bottom:8px; }
  section > .content{ padding:0 var(--marginLeft); }
/* selected */
section.selected{ opacity:1; pointer-events:all; }
/* loading */
section.loading{ pointer-events:none; cursor:wait; }
section.done{ pointer-events:none; cursor:wait; }

/* specific */
#select{  }
  #select .content{  }
    @media screen and (min-width:1024px){
      #select .content .member{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:80%; max-width:1440px; height:100%; pointer-events:none; }
        #select .content .member img{ position:absolute; bottom:0; left:0; width:100%; }
        #select .content .member img.hover{ opacity:1 !important; }
        #select .content .member ul.member-list{ position:absolute; bottom:0; left:50%; right:0; width:86%; height:70%; transform:translateX(-50%);
          display:flex;
        }
          #select .content .member ul.member-list > li{ position:relative; flex:1; cursor:pointer; }
          #select.selected .content .member ul.member-list > li{ pointer-events:all; }
            #select .content .member ul.member-list > li h4{ position:absolute; display:block; padding:7px 15px; background-color:var(--black); border-radius:40px;
              bottom:25%; left:50%; transform:translateX(-50%); pointer-events:none; opacity:0;
              font-size:1.8rem;
              font-weight:400;
              color:var(--pink);
              line-height:1;
              white-space:nowrap;
            }
          /* hover */
          @media screen and (min-width:1024px){
            #select .content .member ul.member-list > li:hover{  }
              #select .content .member ul.member-list > li:hover h4{ opacity:1; }
            #select .content .member:hover img{ opacity:0.3; }
          }
    }


#information{  }
  #information .content{  }
    #information .content .inputBox{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% - var(--marginLeft)*2); max-width:480px; }
      #information .content .inputBox :is(select,input){ width:100%; }
      #information .content .inputBox :is(select,input):not(:last-child){ margin-bottom:12px; }
      #information .content .inputBox .btnNormal{ background-color:#fff; margin-top:12px; }

#information.loading{ opacity:0.35; }

#gaming{  }
  #gaming > .content{  }
    #gaming > .content .hp{ position:absolute;
      /* top:150px; right:60px; */
      top:180px;
      left:50%;
      transform:translateX(-50%);
    }
      #gaming > .content .hp img{ opacity:0.2; width:56px; }
      #gaming > .content .hp img:is(.win,.lose){ opacity:1; }
      #gaming > .content .hp img.lose{
        filter:invert(0%) sepia(0%) saturate(0%) hue-rotate(160deg) brightness(0%) contrast(100%);
        -webkit-filter:invert(0%) sepia(0%) saturate(0%) hue-rotate(160deg) brightness(0%) contrast(100%);
      }
    #gaming > .content .speech{ position:absolute; width:220px; height:205px; pointer-events:none; z-index:10;
      background-image:url('/img/speech_room.svg');
      background-position:top left;
      background-repeat:no-repeat;
      background-size:contain;
      animation:tilt_deco 2400ms infinite steps(1);
    }
    #gaming > .content .speech:before{ content:''; position:absolute; display:block; padding:7px 15px; background-color:var(--black); border-radius:40px;
      top:0; left:50%; transform:translate(-50%,-50%);
      font-size:1.8rem;
      color:var(--pink);
      line-height:1;
      white-space:nowrap;
    }
    #gaming > .content .speech:after{ content:''; position:absolute; top:calc(85%/2); left:50%; transform:translate(-50%,-50%); width:70%; height:50%;
      /* background-image:url('/img/game/shoot_scissors.svg'); */
      background-size:contain;
      background-position:center;
      background-repeat:no-repeat;
      display:none;
    }
      #gaming > .content .speech p{ text-align:center; width:100%; height:85%; padding:12px;
        display:flex; justify-content:center; align-items:center;
      }
        #gaming > .content .speech p > span{ display:inline-block; vertical-align:bottom; transform:scaleX(var(--scaleX));
          font-size:1.5rem;
        }
        #gaming > .content .speech p > span:nth-child(2n){ margin-bottom:12px; }
    #gaming > .content .member{ position:absolute; left:33.333%; width:60vh; bottom:0; transform:translateX(-50%); }
      #gaming > .content .member .double-heart{ position:absolute; top:10%; left:20%;
        animation:tilt_deco 2400ms infinite steps(1); animation-delay:800ms;
      }
      #gaming > .content .member .speech{ top:30%; left:-10%; }
        #gaming > .content .member .speech p{ display:none; }
        #gaming > .content .member .speech p.waiting{ display:flex; }
      #gaming > .content .member img.character{
        animation:updown_bottom infinite forwards 2s ease-in-out;
      }
      /* member */
      #game.keena #gaming .member .speech:before{ content:'키나'; }
      #game.chanelle #gaming .member .speech:before{ content:'문샤넬'; }
      #game.yewon #gaming .member .speech:before{ content:'예원'; }
      #game.athena #gaming .member .speech:before{ content:'아테나'; }
      #game.hana #gaming .member .speech:before{ content:'하나'; }

    #gaming > .content .roulette{ position:absolute; top:50%; left:66.666%; width:25%; transform:translate(-50%,-50%); font-size:0; }
      #gaming > .content .roulette .speech{ position:absolute; top:-20%; left:70%;
        background-image:url('/img/speech_room_reverse.svg');
      }
      #gaming > .content .roulette .speech:before{ content:attr(data-nickname); }

      #gaming > .content .roulette img{ pointer-events:none; }
      #gaming > .content .roulette img:not(.base){ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
      #gaming > .content .roulette img.base{
        filter:drop-shadow(0 0 4px var(--dropWhite));
        -webkit-filter:drop-shadow(0 0 4px var(--dropWhite));
      }
      #gaming > .content .roulette .clickable{  }
        #gaming > .content .roulette .clickable svg{ position:absolute; top:0; left:0; width:100%; height:100%; }
          #gaming > .content .roulette .clickable svg path{ fill:transparent; cursor:pointer; }
      #gaming > .content .roulette .message{ position:absolute; left:50%; bottom:-25%; transform:translateX(-50%); pointer-events:none; white-space:nowrap; text-align:center; }
        #gaming > .content .roulette .message:before,
        #gaming > .content .roulette .message:after{ content:''; display:inline-block; vertical-align:middle; height:135px;
          background-position:center;
          background-repeat:no-repeat;
          background-size:contain;
          filter:drop-shadow(0 0 4px var(--dropPink));
          -webkit-filter:drop-shadow(0 0 4px var(--dropPink));
          display:none;
        }
        #gaming > .content .roulette .message:before{ background-image:url('/img/game/message_you.svg'); width:200px; margin-right:22px; }
          #gaming > .content .roulette .message p{ font-size:1.5rem; font-weight:400; white-space:nowrap;
            animation:blink 2000ms forwards infinite ease-in-out;
          }
          #gaming > .content .roulette .message .btnAgain{ background-color:var(--pink); color:#fff;
            filter:drop-shadow(0 0 4px var(--dropWhite));
            -webkit-filter:drop-shadow(0 0 4px var(--dropWhite));
            position:absolute; bottom:-60px; left:50%; transform:translateX(-50%); padding-left:40px; padding-right:40px;
            display:none;
          }
    /* hover */
    @media screen and (min-width:1024px){
      #gaming > .content .roulette:hover{  }
        #gaming > .content .roulette:not(.rock,.scissors,.paper):hover img.arrow{
          animation:arrow_tilt infinite forwards 1200ms steps(1);
        }
        #gaming > .content .roulette:hover img:is(.rock,.scissors,.paper){ opacity:0.5; }
        #gaming > .content .roulette:hover img:is(.rock,.scissors,.paper).hover{ opacity:1; }
    }

    /* loading */
    #gaming.loading .content .roulette img.arrow{
      animation:arrow_rotate infinite forwards 400ms linear;
    }
    #gaming.loading .content .speech{ opacity:0; }
    #gaming.loading .content .roulette .message p{ display:none; }

    /* shoot */
    #gaming > .content :is(.member,.roulette):is(.rock,.scissors,.paper){  }
      #gaming > .content :is(.member,.roulette):is(.rock,.scissors,.paper) .speech p{ display:none; }
      #gaming > .content :is(.member,.roulette):is(.rock,.scissors,.paper) .speech:after{ display:block; }
      #gaming > .content :is(.member,.roulette).rock .speech:after{ background-image:url('/img/game/shoot_rock.svg'); }
      #gaming > .content :is(.member,.roulette).scissors .speech:after{ background-image:url('/img/game/shoot_scissors.svg'); }
      #gaming > .content :is(.member,.roulette).paper .speech:after{ background-image:url('/img/game/shoot_paper.svg'); }

    #gaming > .content .roulette:is(.rock,.scissors,.paper) img:is(.rock,.scissors,.paper){ opacity:0.5; }
    #gaming > .content .roulette:is(.rock,.scissors,.paper) .message p{ display:none; }
    #gaming > .content .roulette.scissors img.scissors{ opacity:1; }
    #gaming > .content .roulette.paper img.paper{ opacity:1; }
    #gaming > .content .roulette.rock img.rock{ opacity:1; }

    #gaming > .content .roulette.scissors img.arrow{ transform:translate(-50%,-50%) rotate(60deg); }
    #gaming > .content .roulette.paper img.arrow{ transform:translate(-50%,-50%) rotate(180deg); }
    #gaming > .content .roulette.rock img.arrow{ transform:translate(-50%,-50%) rotate(300deg); }

    /* result */
    #gaming:is(.win,.lose,.draw){  }
      #gaming:is(.win,.lose,.draw) .content .roulette .message{  }
      #gaming:is(.win,.lose,.draw) .content .roulette .message:after{ display:inline-block; }

    #gaming.win .content .roulette .message:after{ background-image:url('/img/game/message_win.svg'); width:240px; }
    #gaming.lose .content .roulette .message:after{ background-image:url('/img/game/message_lose.svg'); width:340px; }
    #gaming.draw .content .roulette .message:after{ background-image:url('/img/game/message_draw.svg'); width:313px; }

    /* total result */
    #gaming.result .content .member{ left:50%; }
      #gaming.result .content .member .speech p{ display:none; }
    #gaming.result .content .roulette{ left:50%; bottom:20%; top:unset; }
      #gaming.result .content .roulette > :not(.message){ display:none; }

    #gaming.result:is(.totalWin,.totalLose){  }
      #gaming.result:is(.totalWin,.totalLose) .content .roulette .message{  }
      #gaming.result:is(.totalWin,.totalLose) .content .roulette .message:before,
      #gaming.result:is(.totalWin,.totalLose) .content .roulette .message:after{ display:inline-block; }
        #gaming.result:is(.totalWin,.totalLose) .content .roulette .message p{ display:none; }
        #gaming.result:is(.totalWin,.totalLose) .content .roulette .message .btnAgain{ display:block; pointer-events:all; }

    #gaming.result.totalWin .content .roulette .message:after{ background-image:url('/img/game/message_win.svg'); width:240px; }
    #gaming.result.totalWin .content .member .speech p.lose{ display:flex; }
    #gaming.result.totalLose .content .roulette .message:after{ background-image:url('/img/game/message_lose.svg'); width:340px; }
    #gaming.result.totalLose .content .member .speech p.win{ display:flex; }

/* photo card */
#photoCard{ position:fixed; top:50%; right:10%; transform:translateY(-50%); width:300px; display:none; }
#gaming.result.totalWin #photoCard{ display:block; pointer-events:all; cursor:default; }

/* language */
body[data-lang*="eng"] #gaming > .content .speech p > span{ font-size:1.1rem; }

body[data-lang*="eng"] #game.keena #gaming .member .speech:before{ content:'KEENA'; }
body[data-lang*="eng"] #game.chanelle #gaming .member .speech:before{ content:'CHANELLE MOON'; }
body[data-lang*="eng"] #game.yewon #gaming .member .speech:before{ content:'YEWON'; }
body[data-lang*="eng"] #game.athena #gaming .member .speech:before{ content:'ATHENA'; }
body[data-lang*="eng"] #game.hana #gaming .member .speech:before{ content:'HANA'; }