/* ══════════════════════════════════════════════
   Game Animation Styles – PK10 / FT / SM
   Converted from SASS scoped styles
   ══════════════════════════════════════════════ */

/* ── Common Styles (shared by all 3 animation types) ── */

#gameAnimRoot .container {
  width: 1334px;
  transform-origin: top left;
  display: none;
  position: relative;
  -webkit-backface-visibility: hidden;
}

#gameAnimRoot .container.shown {
  display: block;
}

#gameAnimRoot .container .sound-switch {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 100;
}

#gameAnimRoot .container .sound-switch img {
  width: 10rem;
  cursor: pointer;
}

#gameAnimRoot .header {
  height: 0;
  position: relative;
}

#gameAnimRoot .logo {
  position: absolute;
  top: 31px;
  left: 20px;
}

#gameAnimRoot .position {
  position: absolute;
  top: 28px;
  left: 350px;
}

#gameAnimRoot .positm {
  float: left;
  width: 64px;
  height: 64px;
  margin-right: 5px;
}

/* Number sprite positions (used for position display) */
#gameAnimRoot .num1 { background-position: 0 0; }
#gameAnimRoot .num2 { background-position: 0 -64px; }
#gameAnimRoot .num3 { background-position: 0 -128px; }
#gameAnimRoot .num4 { background-position: 0 -192px; }
#gameAnimRoot .num5 { background-position: 0 -256px; }
#gameAnimRoot .num6 { background-position: 0 -320px; }
#gameAnimRoot .num7 { background-position: 0 -384px; }
#gameAnimRoot .num8 { background-position: 0 -448px; }
#gameAnimRoot .num9 { background-position: 0 -512px; }
#gameAnimRoot .num10 { background-position: 0 -576px; }

#gameAnimRoot .scenary {
  height: 119px;
  position: relative;
}

#gameAnimRoot .scenaryitm {
  position: absolute;
  left: -1334px;
}

#gameAnimRoot .road {
  height: 520px;
  position: relative;
}

#gameAnimRoot .roadani {
  position: absolute;
  width: 1334px;
  height: 520px;
  top: 0;
  left: 0;
  overflow: hidden;
}

#gameAnimRoot .roaditm {
  position: absolute;
  top: 0;
  left: -1300px;
}

#gameAnimRoot .flag {
  position: absolute;
  bottom: 0;
  left: -150px;
}

#gameAnimRoot .car1,
#gameAnimRoot .car2,
#gameAnimRoot .car3,
#gameAnimRoot .car4,
#gameAnimRoot .car5,
#gameAnimRoot .car6,
#gameAnimRoot .car7,
#gameAnimRoot .car8,
#gameAnimRoot .car9,
#gameAnimRoot .car10 {
  position: absolute;
}

/* Default car positions (PK10 / FT) */
#gameAnimRoot .car1 { top: -23px; left: 1206px; }
#gameAnimRoot .car2 { top: 19px; left: 1197px; }
#gameAnimRoot .car3 { top: 55px; left: 1181px; }
#gameAnimRoot .car4 { top: 104px; left: 1166px; }
#gameAnimRoot .car5 { top: 153px; left: 1153px; }
#gameAnimRoot .car6 { top: 204px; left: 1139px; }
#gameAnimRoot .car7 { top: 259px; left: 1128px; }
#gameAnimRoot .car8 { top: 321px; left: 1105px; }
#gameAnimRoot .car9 { top: 382px; left: 1084px; }
#gameAnimRoot .car10 { top: 451px; left: 1067px; }

#gameAnimRoot .roadstart {
  position: absolute;
  top: 0;
  left: 960px;
  display: block;
}

/* PK10 wheel positions (per-car) */
#gameAnimRoot .wheel1a { position: absolute; left: 29px; top: 21px; display: none; }
#gameAnimRoot .wheel1b { position: absolute; left: 124px; top: 20px; display: none; }
#gameAnimRoot .wheel2a { position: absolute; left: 29px; top: 21px; display: none; }
#gameAnimRoot .wheel2b { position: absolute; left: 128px; top: 20px; display: none; }
#gameAnimRoot .wheel3a { position: absolute; left: 32px; top: 23px; display: none; }
#gameAnimRoot .wheel3b { position: absolute; left: 133px; top: 22px; display: none; }
#gameAnimRoot .wheel4a { position: absolute; left: 32px; top: 23px; display: none; }
#gameAnimRoot .wheel4b { position: absolute; left: 135px; top: 23px; display: none; }
#gameAnimRoot .wheel5a { position: absolute; left: 36px; top: 24px; display: none; }
#gameAnimRoot .wheel5b { position: absolute; left: 149px; top: 23px; display: none; }
#gameAnimRoot .wheel6a { position: absolute; left: 39px; top: 27px; display: none; }
#gameAnimRoot .wheel6b { position: absolute; left: 159px; top: 26px; display: none; }
#gameAnimRoot .wheel7a { position: absolute; left: 39px; top: 32px; display: none; }
#gameAnimRoot .wheel7b { position: absolute; left: 166px; top: 31px; display: none; }
#gameAnimRoot .wheel8a { position: absolute; left: 42px; top: 31px; display: none; }
#gameAnimRoot .wheel8b { position: absolute; left: 172px; top: 31px; display: none; }
#gameAnimRoot .wheel9a { position: absolute; left: 44px; top: 33px; display: none; }
#gameAnimRoot .wheel9b { position: absolute; left: 182px; top: 32px; display: none; }
#gameAnimRoot .wheel10a { position: absolute; left: 46px; top: 35px; display: none; }
#gameAnimRoot .wheel10b { position: absolute; left: 191px; top: 33px; display: none; }

/* Traffic light */
#gameAnimRoot .trafficlight {
  position: absolute;
  top: 145px;
  left: 340px;
  width: 636px;
  height: 128px;
}

#gameAnimRoot .redlight {
  position: absolute;
  left: 377px;
  top: -32px;
  display: none;
}

#gameAnimRoot .yellowlight {
  position: absolute;
  left: 179px;
  top: -32px;
  display: none;
}

#gameAnimRoot .greenlight {
  position: absolute;
  left: -23px;
  top: -33px;
  display: none;
}

/* Countdown */
#gameAnimRoot .countdownnum {
  font-family: 'BigShouldersDisplay', sans-serif;
  min-width: 0%;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  transform: translate3d(0,0,0);
  position: absolute;
  top: -99px;
  left: 115px;
  font-size: 120px;
  line-height: 80px;
  color: #fff;
  text-align: right;
  width: 308px;
  height: 87px;
}

#gameAnimRoot .countdownnum2 {
  font-family: 'BigShouldersDisplay', sans-serif;
  min-width: 0%;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  transform: translate3d(0,0,0);
  position: absolute;
  top: -72px;
  left: 433px;
  font-size: 70px;
  line-height: 60px;
  color: #fff;
  text-align: left;
  width: 90px;
  height: 63px;
}

#gameAnimRoot .currentdraw {
  position: absolute;
  left: 1055px;
  top: 33px;
  font-size: 35px;
  width: 255px;
  height: 51px;
  white-space: nowrap;
}

#gameAnimRoot #currentdrawid {
  font-family: arial;
}

/* Footer */
#gameAnimRoot .footer {
  height: 140px;
  width: 100%;
  background-color: #202020;
  position: absolute;
  font-size: 31px;
  top: 753px;
  display: none;
}

#gameAnimRoot .footer1 {
  margin-top: 10px;
  margin-left: 13px;
  width: 370px;
  height: 88px;
  border: 4px solid #333;
  border-radius: 5px;
  float: left;
  white-space: nowrap;
}

#gameAnimRoot .footer1_1 {
  float: left;
  width: 80px;
  margin-left: 20px;
  margin-top: 20px;
}

#gameAnimRoot .footer1_2 {
  float: left;
  width: 250px;
  margin-left: 10px;
  margin-top: 16px;
  line-height: 28px;
  font-family: arial;
}

#gameAnimRoot .footer2 {
  margin-top: 10px;
  margin-left: 10px;
  width: 370px;
  height: 88px;
  border: 4px solid #333;
  border-radius: 5px;
  float: left;
  white-space: nowrap;
}

#gameAnimRoot .footer2_1 {
  float: left;
  width: 141px;
  margin-left: 5px;
  margin-top: 20px;
}

#gameAnimRoot .footer2_2 {
  float: left;
  margin-left: 10px;
  margin-top: 12px;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 30px;
  background: linear-gradient(to bottom, #0191de 0%, #09418b 100%);
}

#gameAnimRoot .footer3 {
  margin-top: 10px;
  margin-left: 10px;
  width: 530px;
  height: 88px;
  border: 4px solid #333;
  border-radius: 5px;
  float: left;
  white-space: nowrap;
}

/* Effects */
#gameAnimRoot .flashlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 1334px;
  height: 753px;
  background-color: #fff;
  display: none;
}

#gameAnimRoot .wind {
  position: absolute;
  top: -3px;
  left: -11px;
  display: none;
}

#gameAnimRoot .flame {
  position: absolute;
  display: none;
}

#gameAnimRoot .page1 {
  display: block;
}

/* Result page */
#gameAnimRoot .resultpage {
  width: 1334px;
  height: 753px;
  display: none;
  position: relative;
}

#gameAnimRoot .resultitm {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}

#gameAnimRoot .result1 { top: 80px; left: 568px; }
#gameAnimRoot .result2 { left: 173px; top: 107px; }
#gameAnimRoot .result3 { left: 960px; top: 121px; }
#gameAnimRoot .resultcar1 { top: 328px; left: 395px; }
#gameAnimRoot .resultcar2 { top: 287px; left: 81px; }
#gameAnimRoot .resultcar3 { top: 291px; left: 859px; }

#gameAnimRoot #preloader {
  width: 230% !important;
}

/* ── PK10-specific styles ── */

#gameAnimRoot .pk10-anim .positm {
  background: url('../assets/anim/pk10/numbersprite.png') no-repeat top left;
}

#gameAnimRoot .pk10-anim .trafficlight {
  background-image: url('../assets/anim/pk10/trafficlight.png');
}

#gameAnimRoot .pk10-anim .resultpage {
  background-image: url('../assets/anim/pk10/resultbg.jpg');
}

/* ── FT-specific styles ── */

#gameAnimRoot .ft-anim .positm {
  background: url('../assets/anim/ft/numbersprite.png') no-repeat top left;
}

#gameAnimRoot .ft-anim .trafficlight {
  background-image: url('../assets/anim/ft/trafficlight.png');
}

#gameAnimRoot .ft-anim .resultpage {
  background-image: url('../assets/anim/ft/resultbg.jpg');
}

/* FT/SM wheel10a/wheel10b overrides for twinkling */
#gameAnimRoot .ft-anim .wheel10a {
  position: absolute;
  left: 4%;
  top: 10%;
  display: none;
  width: 100%;
}

#gameAnimRoot .ft-anim .wheel10a img {
  width: 138%;
  animation: ga-twinkling 0.01s ease-in-out infinite;
}

#gameAnimRoot .ft-anim .wheel10b {
  position: absolute;
  left: -5%;
  top: 11%;
  width: 100%;
  display: none;
}

#gameAnimRoot .ft-anim .wheel10b img {
  width: 138%;
  animation: ga-twinkling2 0.05s ease-in infinite;
}

/* ── SM-specific styles ── */

#gameAnimRoot .sm-anim .positm {
  background: url('../assets/anim/sm/numbersprite.png') no-repeat top left;
}

#gameAnimRoot .sm-anim .trafficlight {
  background-image: url('../assets/anim/sm/trafficlight.png');
}

#gameAnimRoot .sm-anim .resultpage {
  background-image: url('../assets/anim/sm/resultbg.jpg');
}

/* SM car positions (horses are spaced differently) */
#gameAnimRoot .sm-anim .car1 { top: 10px; left: 1100px; }
#gameAnimRoot .sm-anim .car2 { top: 58px; left: 1091px; }
#gameAnimRoot .sm-anim .car3 { top: 105px; left: 1080px; }
#gameAnimRoot .sm-anim .car4 { top: 150px; left: 1071px; }
#gameAnimRoot .sm-anim .car5 { top: 190px; left: 1060px; }
#gameAnimRoot .sm-anim .car6 { top: 232px; left: 1045px; }
#gameAnimRoot .sm-anim .car7 { top: 265px; left: 1030px; }
#gameAnimRoot .sm-anim .car8 { top: 305px; left: 1016px; }
#gameAnimRoot .sm-anim .car9 { top: 345px; left: 1000px; }
#gameAnimRoot .sm-anim .car10 { top: 385px; left: 980px; }

#gameAnimRoot .sm-anim .wind {
  position: absolute;
  left: 100px;
  bottom: -30px;
}

#gameAnimRoot .sm-anim .flame img {
  display: none;
}

#gameAnimRoot .sm-anim .wheel10a {
  position: absolute;
  left: 4%;
  top: 10%;
  display: none;
  width: 100%;
}

#gameAnimRoot .sm-anim .wheel10a img {
  display: none;
  width: 138%;
  animation: ga-twinkling 0.01s ease-in-out infinite;
}

#gameAnimRoot .sm-anim .wheel10b {
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 50%;
  display: none;
}

#gameAnimRoot .sm-anim .wheel10b img {
  display: none;
}

/* ── Keyframes (FT/SM twinkling effects) ── */

@-webkit-keyframes ga-twinkling {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}
@keyframes ga-twinkling {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

@-webkit-keyframes ga-twinkling2 {
  0% { opacity: 0.3; width: 130%; top: 0; }
  100% { opacity: 0.8; width: 138%; top: 32px; }
}
@keyframes ga-twinkling2 {
  0% { opacity: 0.3; width: 130%; top: 0; }
  100% { opacity: 0.8; width: 138%; top: 32px; }
}