body{
  margin:0;
  width:100vw;
  height:100vh;
  background:black;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
}
#game-frame{
  position:relative;
  width:640px;
  height:960px;
  flex:0 0 auto;
  transform-origin:center center;
  background-image:url("IMAGES/screen01.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}
#letter-grid{
  position:absolute;
  top:185px;
  left:88px;
  width:auto;
  height:auto;
  display:grid;
  grid-template-columns:repeat(6, 70px);
  grid-template-rows:repeat(6, 82px);
  column-gap:8px;
  row-gap:8px;
  border:none;
}
#timer-display{
  position:absolute;
  top:85px;
  left:250px;
  width:140px;
  text-align:center;
  color:white;
  font-size:48px;
  font-family:Georgia, serif;
  font-weight:bold;
}

.tile{
  display:flex;
  justify-content:center;
  align-items:center;
  border:none;
  color:#d4b06a;

text-shadow:
 -1px  0   0 #4a2d12,
  1px  0   0 #4a2d12,
  0   -1px 0 #4a2d12,
  0    1px 0 #4a2d12; 
  font-size:48px;
  font-family:Georgia, serif;
  font-weight:bold;
  position:relative;
  top:-10px;
}

#current-word{
  position:absolute;
  top:727px;
  left:360px;
  width:150px;
  height:34px;
  color:white;
  font-size:26px;
  font-family:Georgia, serif;
  font-weight:bold;
  text-align:center;
}

#clear-btn{
  position:absolute;
  top:725px;
  left:120px;
  width:150px;
  height:38px;
  font-size:22px;
  font-weight:bold;
  cursor:pointer;
}
#send-btn{
  width:150px;
  height:38px;
  font-size:22px;
  font-weight:bold;
  cursor:pointer;
  border-radius:8px;
}

#timer-bar{
  position:absolute;
  top:780px;
  left:62px;
  width:516px;
  height:14px;
  background:linear-gradient(90deg, #5a3518, #8a5a24, #4a2b12);
  border:1px solid #c99a3a;
  border-radius:12px;
  transform-origin:left center;
}
.send-cell{
  position:relative;
  background:transparent;
  border:none;
}

#clear-btn,
#current-word{
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  text-shadow:1px 1px 2px black;
  background:rgba(90,55,20,0.45);
  border:2px solid #c99a3a;
  border-radius:8px;
}

.opening-screen{
  background-image:url("IMAGES/screen00.png") !important;
}

.results-screen{
  background-image:url("IMAGES/screen03.png") !important;
}
#results-title{
  position:absolute;
  top:200px;
  left:90px;
  width:460px;
  text-align:center;
  font-size:40px;
  color:#f3d27a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

#cleared-grids{
  position:absolute;
  top:250px;
  left:45px;
  width:550px;
  text-align:center;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#d4b06a;
  text-shadow:
    -1px 0 0 #4a2d12,
     1px 0 0 #4a2d12,
     0 -1px 0 #4a2d12,
     0 1px 0 #4a2d12,
     2px 2px 3px black;
}

#gridirons-found{
  position:absolute;
  top:320px;
  left:38px;
  width:550px;
  text-align:center;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#d4b06a;
  text-shadow:
    -1px 0 0 #4a2d12,
     1px 0 0 #4a2d12,
     0 -1px 0 #4a2d12,
     0 1px 0 #4a2d12,
     2px 2px 3px black;
}
.score-label{
  font-size:48px;
}

.score-number{
  font-size:40px;
  color:#8a4f20;
}

#results-stats{
  position:absolute;
  top:385px;
  left:55px;
  width:530px;
  text-align:center;
  font-size:26px;
  color:#7a431c;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:1px 1px 1px #f3d27a;
}
#games-played-label{
  position:absolute;
  top:430px;
  left:90px;
  width:460px;
  text-align:center;
  font-size:28px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

#games-played-number{
  position:absolute;
  top:465px;
  left:90px;
  width:460px;
  text-align:center;
  font-size:42px;
  color:#8a4f20;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:1px 1px 1px #f3d27a;
}
#rank-label{
  position:absolute;
  top:525px;
  left:90px;
  width:460px;
  text-align:center;
  font-size:32px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

#rank-number{
  position:absolute;
  top:555px;
  left:90px;
  width:460px;
  text-align:center;
  font-size:50px;
  color:#7a431c;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:1px 1px 1px #f3d27a;
}

#rank-change{
  position:absolute;
  top:630px;
  left:90px;
  width:460px;
  text-align:center;
  font-size:28px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}
#rank-updated-label{
  position:absolute;
  top:690px;
  left:160px;
  width:320px;
  text-align:center;
  font-size:18px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

#rank-updated-time{
  position:absolute;
  top:715px;
  left:160px;
  width:320px;
  text-align:center;
  font-size:24px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}#reward-ticket{
  position:absolute;
  top:710px;
  left:90px;
  width:460px;
  text-align:center;
  font-size:34px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

#guest-ranking-message{
  position:absolute;
  top:845px;
  left:70px;
  width:500px;
  text-align:center;
  font-size:16px;
  line-height:1.3;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
  z-index:30;
}

#reward-text{
  position:absolute;
  top:745px;
  left:90px;
  width:460px;
  text-align:center;
  font-size:22px;
  color:#8a4f20;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:1px 1px 1px #f3d27a;
}

#play-again-btn,
#watch-ad-btn{
  position:absolute;
  top:860px;
  width:190px;
  height:75px;
  background:transparent;
  border:none;
  opacity:0;
  cursor:pointer;
}
#play-again-btn{
  left:120px;
}

#watch-ad-btn{
  left:330px;
}

#watch-ad-btn.available-reward{
  opacity:1;
  background:transparent;
  border:2px solid #d8a83e;
  box-shadow:
    0 0 10px #f3d27a,
    0 0 22px #d8a83e;
  border-radius:12px;
}

#opening-play{
  position:absolute;
  top:220px;
  left:90px;
  width:460px;
  text-align:center;
  font-size:34px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}
.level-btn{
  position:absolute;
  left:115px;
  width:410px;
  height:48px;
  font-size:24px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:rgba(90,55,20,0.45);
  border:2px solid #c99a3a;
  border-radius:10px;
  text-shadow:2px 2px 3px black;
  cursor:pointer;
}

#explorer-btn{ top:310px; }
#veteran-btn{ top:375px; }
#master-btn{ top:440px; }
#legend-btn{ top:505px; }

#opening-rules{
  position:absolute;
  top:635px;
  left:70px;
  width:500px;
  text-align:center;
  font-size:26px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

.six-screen{
  background-image:url("IMAGES/screen02.png") !important;
}

.master-screen{
  background-image:url("IMAGES/screen04.png") !important;
}

.master-screen #letter-grid{
  top:185px;
  left:88px;
  grid-template-columns:repeat(6, 70px);
  grid-template-rows:repeat(6, 82px);
  column-gap:8px;
  row-gap:8px;
}
.six-screen #send-btn,
.master-screen #send-btn{
  position:absolute;
    left:0;
  top:0;
  width:153px;
  height:176px;
  font-size:32px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  text-shadow:1px 1px 2px black;
  background:#5a3518;
  border:2px solid #c99a3a;
  border-radius:14px;
  cursor:pointer;
  z-index:10;
}

.five-screen #letter-grid{
  top:215px;
  left:88px;
  grid-template-columns:repeat(5, 86px);
  grid-template-rows:repeat(5, 91px);
  column-gap:7px;
  row-gap:7px;
}
.five-screen #send-btn{
  width:86px !important;
  height:91px !important;
  font-size:20px !important;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  text-shadow:1px 1px 2px black;
  background:rgba(90,55,20,0.45);
  border:2px solid #c99a3a;
  border-radius:8px;
  cursor:pointer;
}
.five-screen .tile{
  
}

#shuffle-btn{
  position:absolute;
  top:835px;
  left:120px;
  width:190px;
  height:105px;
  background:transparent;
border:none;
opacity:0;
  cursor:pointer;
  z-index:20;
}
.five-screen #shuffle-btn{
  top:808px;
  left:120px;
}

.six-screen #shuffle-btn{
  top:818px;
  left:120px;
}

.master-screen #shuffle-btn{
  top:808px;
  left:120px;
}

#send-btn{
  visibility:hidden;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  text-shadow:1px 1px 2px black;
  background:rgba(90,55,20,0.45);
  border:2px solid #c99a3a;
  border-radius:14px;
  cursor:pointer;
}

#quit-btn{
  position:absolute;
  top:690px;
  left:50%;
  transform:translateX(-50%);
  width:150px;
  height:50px;
  background:rgba(90,60,20,0.55);
  border:2px solid #d4b06a;
  border-radius:8px;
  color:#f3d88c;
  font-family:Georgia, serif;
  font-size:24px;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
  cursor:pointer;
}
#freeze-btn{
  position:absolute;
  top:817px;
  left:317px;
  width:190px;
  height:95px;
  background:transparent;
  border:none;
  opacity:0;
  cursor:pointer;
  z-index:20;
}

#freeze-btn.active{
  opacity:0;
}
#freeze-btn.active{
  opacity:1;
}

#victory-burst{  position:absolute;
  inset:0;
  pointer-events:none;
  display:none;
  z-index:999;
  overflow:hidden;
}

#victory-burst::before{
  content:"✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧";
  position:absolute;
  top:-80px;
  left:0;
  width:100%;
  text-align:center;
  font-size:42px;
  color:#ffd700;
  letter-spacing:12px;
  text-shadow:2px 2px 3px black;
  animation:confetti-fall 2s ease-out forwards;
}

@keyframes confetti-fall{
  0%{
    transform:translateY(0);
    opacity:1;
  }
  100%{
    transform:translateY(650px);
    opacity:0;
  }
}
@keyframes burst{
  0%{
    opacity:1;
    transform:scale(0.2);
  }
  100%{
    opacity:0;
    transform:scale(3);
  }
}

#ticket-display{
  position:absolute;
  top:45px;
  left:93px;
  width:80px;
  text-align:center;
  font-size:26px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
  z-index:30;
}

#ticket-timer{
  position:absolute;
  top:77px;
  left:75px;
  width:120px;
  text-align:center;
  font-size:14px;
  color:#8a5a24;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:1px 1px 1px #f3d27a;
  z-index:30;
}

#coin-shop{
  position:absolute;
  top:225px;
  left:95px;
  width:450px;
  height:520px;
  background:rgba(45,25,10,0.95);
  border:3px solid #c99a3a;
  border-radius:18px;
  z-index:1000;
  display:none;
  font-family:Georgia, serif;
  color:#f3d27a;
  text-align:center;
  box-shadow:0 0 20px black;
}

#coin-shop-title{
  margin-top:25px;
  font-size:34px;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

.coin-buy-btn{
  display:block;
  width:320px;
  height:55px;
  margin:18px auto;
  font-size:24px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:#5a3518;
  border:2px solid #c99a3a;
  border-radius:10px;
  cursor:pointer;
}

#coin-shop-close{
  width:160px;
  height:45px;
  font-size:22px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:#3a1f0d;
  border:2px solid #c99a3a;
  border-radius:10px;
  cursor:pointer;
}

#coin-display{
  position:absolute;
  top:53px;
  left:472px;
  width:55px;
  text-align:center;
  font-size:22px;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
  z-index:30;
}

#player-display{
    position:absolute;
    top:18px;
    left:205px;
    width:230px;
    text-align:center;
    font-size:20px;
    color:#d4b06a;
    font-family:Georgia, serif;
    font-weight:bold;
    text-shadow:2px 2px 3px black;
    z-index:30;
}

#coins-btn{
  position:absolute;
  top:28px;
  left:520px;
  width:48px;
  height:44px;
  background:transparent;
  border:none;
  cursor:pointer;
  z-index:40;
}

#freeze-cost{
  position:absolute;
  top:905px;
  left:350px;
  width:90px;
  text-align:center;
  font-family:Georgia, serif;
  font-weight:bold;
  font-size:16px;
  color:#555;
  text-shadow:1px 1px 2px black;
  z-index:30;
}

#shuffle-cost{
  position:absolute;
  top:905px;
  left:150px;
  width:90px;
  text-align:center;
  font-family:Georgia, serif;
  font-weight:bold;
  font-size:16px;
  color:#f3d27a;
  text-shadow:2px 2px 3px black;
  z-index:30;
}

#freeze-cost.active{
  color:#f3d27a;
  text-shadow:2px 2px 3px black;
}
#freeze-cost.active{
  color:#f3d27a;
  text-shadow:2px 2px 3px black;
}

.gridiron-secret-screen{
  background-image:url("IMAGES/screen03.png") !important;
}

#gridiron-secret-title{
  position:absolute;
  top:180px;
  left:70px;
  width:500px;
  text-align:center;
  font-size:46px;
  color:#f3d27a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

#gridiron-secret-message{
  position:absolute;
  top:300px;
  left:80px;
  width:480px;
  text-align:center;
  font-size:28px;
  line-height:1.45;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

#gridiron-secret-code{
  position:absolute;
  top:525px;
  left:80px;
  width:480px;
  text-align:center;
  font-size:34px;
  color:#8a4f20;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:1px 1px 1px #f3d27a;
}

#gridiron-website-btn,
#gridiron-continue-btn{
  position:absolute;
  width:260px;
  height:58px;
  left:190px;
  font-size:22px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:#5a3518;
  border:2px solid #c99a3a;
  border-radius:12px;
  cursor:pointer;
}

#gridiron-website-btn{
  top:650px;
}

#gridiron-continue-btn{
  top:730px;
}

#main-menu-btn,
#share-btn{
  position:absolute;
  top:790px;
  width:190px;
  height:50px;
  font-size:22px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:#5a3518;
  border:2px solid #c99a3a;
  border-radius:10px;
  cursor:pointer;
  z-index:50;
}

#main-menu-btn{
  left:115px;
}

#share-btn{
  left:335px;
  animation:shareGlow 2s ease-in-out infinite;
}
#settings-panel{
  position:absolute;
  top:200px;
  left:90px;
  width:450px;
  height:560px;
  background:rgba(45,25,10,0.96);
  border:3px solid #c99a3a;
  border-radius:18px;
  z-index:1000;
  display:none;
  font-family:Georgia, serif;
  color:#f3d27a;
  text-align:center;
  box-shadow:0 0 20px black;
}

#settings-title{
  margin-top:35px;
  font-size:36px;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

#sound-toggle-btn{
  margin-top:35px;
  width:260px;
  height:55px;
  font-size:24px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:#5a3518;
  border:2px solid #c99a3a;
  border-radius:10px;
  cursor:pointer;
}

#music-toggle-btn{
  margin-top:12px;
  width:260px;
  height:55px;
  font-size:24px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:#5a3518;
  border:2px solid #c99a3a;
  border-radius:10px;
  cursor:pointer;
}

#about-text{
  margin-top:45px;
  font-size:22px;
  line-height:1.4;
  color:#d4b06a;
  text-shadow:2px 2px 3px black;
}

#settings-close{
  margin-top:25px;
  width:160px;
  height:45px;
  font-size:22px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:#3a1f0d;
  border:2px solid #c99a3a;
  border-radius:10px;
  cursor:pointer;
}

#settings-icon-btn{
  position:absolute;
  top:28px;
  left:585px;
  width:48px;
  height:44px;
  background:transparent;
  border:none;
  cursor:pointer;
  z-index:40;
}

#gridiron-reward-panel{
  position:absolute;
  top:170px;
  left:70px;
  width:500px;
  height:560px;
  background:rgba(45,25,10,0.96);
  border:3px solid #c99a3a;
  border-radius:18px;
  z-index:1200;
  display:none;
  font-family:Georgia, serif;
  color:#f3d27a;
  text-align:center;
  box-shadow:0 0 25px black;
}

#gridiron-reward-title{
  margin-top:40px;
  animation:gridironPop 0.8s ease-out;  font-size:40px;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}

#gridiron-reward-message{
  margin-top:45px;
  font-size:25px;
  line-height:1.25;
  color:#d4b06a;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
}
.reward-discount{
    display:block;
    font-size:24px;
    color:#f3d27a;
    margin-top:8px;
    margin-bottom:8px;
}


#gridiron-reward-website,
#gridiron-reward-continue{
  position:absolute;
  left:120px;
  width:260px;
  height:58px;
  font-size:22px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:#5a3518;
  border:2px solid #c99a3a;
  border-radius:12px;
  cursor:pointer;
}


#gridiron-reward-website{
  top:420px;
}

#gridiron-reward-continue{
  top:490px;
}
@keyframes gridironPop{
  0%{
    transform:scale(0.2);
    opacity:0;
    letter-spacing:0;
  }
  60%{
    transform:scale(1.25);
    opacity:1;
    letter-spacing:4px;
  }
  100%{
    transform:scale(1);
    opacity:1;
    letter-spacing:1px;
  }
}

#gridiron-reward-panel::before{
  content:"✦ ✧ ✦ ✧ ✦ ✧ ✦";
  position:absolute;
  top:18px;
  left:0;
  width:100%;
  text-align:center;
  font-size:34px;
  color:#ffd700;
  letter-spacing:10px;
  text-shadow:2px 2px 4px black;
}

#gridiron-results-reward-btn{
  position:absolute;
  top:195px;
  left:190px;
  width:260px;
  height:50px;
  font-size:22px;
  font-family:Georgia, serif;
  font-weight:bold;
  color:#f3d27a;
  background:#5a3518;
  border:2px solid #c99a3a;
  border-radius:10px;
  cursor:pointer;
  z-index:2000;
}

/* MASTER MOBILE FIX TEST */
.master-screen #letter-grid{
  top:185px !important;
  left:88px !important;
  grid-template-columns:repeat(6, 70px) !important;
  grid-template-rows:repeat(6, 82px) !important;
  column-gap:8px !important;
  row-gap:8px !important;
}

.master-screen #send-btn{
  left:0 !important;
  top:0 !important;
}

#clear-celebration{
  position:absolute;
  inset:0;
  display:none;
  z-index:3000;
  background:rgba(0,0,0,0.25);
  pointer-events:none;
}

#clear-celebration.show{
  display:block;
  animation:screenShake 0.45s ease-in-out;
}

#clear-celebration-panel{
  position:absolute;
  top:330px;
  left:70px;
  width:500px;
  height:210px;
  background:rgba(90,55,20,0.95);
  border:3px solid #f3d27a;
  border-radius:18px;
  text-align:center;
  box-shadow:0 0 35px #f3d27a;
  font-family:Georgia, serif;
}

#clear-celebration-title{
  margin-top:35px;
  font-size:46px;
  font-weight:bold;
  color:#f3d27a;
  text-shadow:3px 3px 4px black;
}

#clear-celebration-coins{
  margin-top:22px;
  font-size:38px;
  font-weight:bold;
  color:#d4b06a;
  text-shadow:3px 3px 4px black;
}

@keyframes screenShake{
  0%{ transform:translate(0,0); }
  15%{ transform:translate(-8px,4px); }
  30%{ transform:translate(8px,-4px); }
  45%{ transform:translate(-6px,3px); }
  60%{ transform:translate(6px,-3px); }
  75%{ transform:translate(-3px,2px); }
  100%{ transform:translate(0,0); }
}

/* CERTIFICATE OF DISCOVERY */

#clear-celebration{
  position:absolute;
  inset:0;
  display:none;
  z-index:3000;
  pointer-events:none;
  font-family:Georgia, serif;
  text-align:center;
}

#clear-celebration.show{
  display:block;
  animation:screenShake 2.5s ease-in-out;
}

#certificate-title{
  position:absolute;
  top:230px;
  left:90px;
  width:460px;
  font-size:28px;
  font-weight:bold;
  color:#7a431c;
  text-shadow:1px 1px 1px #f3d27a;
}

#certificate-clear{
  position:absolute;
  top:305px;
  left:40px;
  width:560px;
  font-size:58px;
  font-weight:bold;
  color:#d4b06a;
  text-shadow:3px 3px 4px black;
}

#certificate-games{
  position:absolute;
  top:390px;
  left:90px;
  width:460px;
  font-size:30px;
  font-weight:bold;
  color:#4a2d12;
  text-shadow:1px 1px 1px #f3d27a;
}

#certificate-clears{
  position:absolute;
  top:435px;
  left:90px;
  width:460px;
  font-size:30px;
  font-weight:bold;
  color:#4a2d12;
  text-shadow:1px 1px 1px #f3d27a;
}

#certificate-rank-title{
  position:absolute;
  top:500px;
  left:90px;
  width:460px;
  font-size:34px;
  font-weight:bold;
  color:#d4b06a;
  text-shadow:2px 2px 3px black;
}

#certificate-rank{
  position:absolute;
  top:545px;
  left:90px;
  width:460px;
  font-size:48px;
  font-weight:bold;
  color:#4a2d12;
  text-shadow:1px 1px 1px #f3d27a;
}

#certificate-share-btn,
#certificate-results-btn{
  position:absolute;
  top:725px;
  width:150px;
  height:38px;
  background:transparent;
  border:none;
  color:#f3d27a;
  font-family:Georgia, serif;
  font-size:22px;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
  cursor:pointer;
  pointer-events:auto;
}

#certificate-share-btn{
  left:120px;
  animation:shareGlow 2s ease-in-out infinite;
}

#certificate-results-btn{
  left:370px;
}

@keyframes shareGlow{

  0%{
    text-shadow:
      0 0 5px #f3d27a;
  }

  50%{
    text-shadow:
      0 0 25px #ffd700,
      0 0 40px #ffd700;
  }

  100%{
    text-shadow:
      0 0 5px #f3d27a;
  }

}
#clear-celebration::after{
  content:"";
  position:absolute;
  top:180px;
left:60px;
width:140px;
height:520px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,215,100,0.35),
    transparent
  );
  animation:certificateShimmer 5s linear infinite;
}

@keyframes certificateShimmer{
  0%{
    left:-200px;
  }

  100%{
    left:500px;
  }
}

#how-to-play-btn{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:600px;
  width:260px;
  height:55px;
  font-size:22px;
  cursor:pointer;
  z-index:20;
}

#how-to-play-panel{
  display:none;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:520px;
  min-height:500px;
  background:rgba(120,75,25,0.88);
  border:3px solid #d4b06a;
  border-radius:12px;
  padding:20px;
  box-sizing:border-box;
  z-index:999;
  box-shadow:0 0 18px black;
  font-family:Georgia, serif;
}
#how-to-play-title{
  text-align:center;
  font-size:32px;
  color:#d4b06a;
  margin-bottom:20px;
}

.how-to-play-option{
  width:100%;
  height:55px;
  margin-bottom:10px;
  font-family:Georgia, serif;
  font-size:22px;
  font-weight:bold;
  background:rgba(90,60,20,0.55);
  border:2px solid #d4b06a;
  border-radius:8px;
  color:#f3d88c;
  text-shadow:2px 2px 3px black;
  cursor:pointer;
}
#how-to-play-text{
  color:white;
  font-size:18px;
  line-height:1.5;
  min-height:180px;
  margin-top:20px;
  white-space:pre-line;
}

#how-to-play-close{
  width:100%;
  height:55px;
  margin-top:20px;
  font-family:Georgia, serif;
  font-size:22px;
  font-weight:bold;
  background:rgba(90,60,20,0.55);
  border:2px solid #d4b06a;
  border-radius:8px;
  color:#f3d88c;
  text-shadow:2px 2px 3px black;
  cursor:pointer;
}

#website-address{
  position:absolute;
  left:0;
  right:0;
  bottom:75px;
  text-align:center;
  font-family:Georgia, serif;
  font-size:18px;
  color:#d4b06a;
  text-shadow:2px 2px 3px black;
  z-index:25;
  pointer-events:none;
}

.opening-screen #ticket-display{
  top: 39px;
}

.opening-screen #coin-display{
  top: 39px;
}

.master-screen #ticket-display,
.six-screen #ticket-display{
  top: 48px;
  left: 90px;
}

.master-screen #coin-display,
.six-screen #coin-display{
  top: 45px;
}

.results-screen #ticket-display{
  top: 41px;
  left: 93px;
}

.results-screen #coin-display{
  top: 47px;
  left: 472px;
}

/* RESULTS — GUEST RANKING AND REWARD LAYOUT */

#rank-label{
  top:515px;
  font-size:26px;
}

#rank-number{
  top:542px;
  font-size:42px;
}

#rank-change{
  top:592px;
  font-size:24px;
}

#rank-updated-label{
  top:625px;
  font-size:14px;
}

#rank-updated-time{
  top:644px;
  font-size:18px;
}

#milestone-progress{
  position:absolute;
  top:670px;
  left:65px;
  width:510px;
  text-align:center;
  font-size:16px;
  line-height:1.25;
  color:#7a431c;
  font-family:Georgia, serif;
  text-shadow:1px 1px 1px #f3d27a;
}

#guest-ranking-message{
  position:absolute;
  top:718px;
  left:70px;
  width:500px;
  text-align:center;
  font-size:14px;
  line-height:1.2;
  color:#d4b06a;
  font-family:Georgia, serif;
  font-weight:bold;
  text-shadow:2px 2px 3px black;
  z-index:30;
}

#guest-ranking-message button{
  margin-top:5px;
  padding:5px 16px;
  color:#f3d27a;
  background:#8a5a12;
  border:2px solid #f3d27a;
  border-radius:7px;
  font-family:Georgia, serif;
  font-size:15px;
  font-weight:bold;
  cursor:pointer;
}

#reward-text{
  top:842px;
  left:65px;
  width:510px;
  font-size:13px;
}