/* Complete JetX interaction layer, measured from the captured launcher/game. */

/* Loader bounds from the source canvas: x=486, y=277, 429x134. The caption
   sits at source y=390, inside that same box rather than the full stage. */
.exact-stage .round-loader {
  inset: auto !important;
  left: 34.468085% !important;
  top: 40.203193% !important;
  right: auto !important;
  bottom: auto !important;
  width: 30.425532% !important;
  height: 19.448476% !important;
  overflow: visible !important;
}
.exact-stage .round-loader-frame,
.exact-stage .round-loader-progress { display: none !important; }
.exact-stage .round-loader-caption {
  left: 0 !important;
  top: 84.328358% !important;
  width: 100% !important;
  transform: none !important;
  color: rgba(255,255,255,.8) !important;
  font-family: 'CrystalUni-Medium' !important;
  font-size: 1.41844cqw !important;
  line-height: 1 !important;
  letter-spacing: .085106cqw !important;
  text-align: center !important;
}

/* Reference buttonMessage('cashout'): rise for 500ms, hold for 1000ms,
   then fade for 100ms. React removes the class at the same 1600ms mark. */
.bet .win.reference-win-visible {
  display: block !important;
  animation: jetx-win-rise-desktop 500ms ease forwards, jetx-win-fade 100ms linear 1500ms forwards;
}
@keyframes jetx-win-rise-desktop {
  from { top: -30px; opacity: 0; }
  to { top: -47px; opacity: 1; }
}
@keyframes jetx-win-rise-mobile {
  from { top: -30px; opacity: 0; }
  to { top: -40px; opacity: 1; }
}
@keyframes jetx-win-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* The source launcher hood: desktop 160px logo / 14px clock; portrait mobile
   30% logo / 12px clock. This final layer removes older conflicting values. */
.loader-hood-react {
  height: 26px !important;
  min-height: 26px !important;
  font-family: 'Intro', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: normal !important;
}
.hood-smartsoft-logo {
  width: 160px !important;
  height: 26px !important;
  margin-left: 10px !important;
  flex: 0 0 160px !important;
  background: url('/reference/GameLauncher/Content/Images/hood/new-hood-logo.png') center/160px auto no-repeat !important;
}
.hood-timer-container {
  width: 155px !important;
  margin: 0 15px 0 0 !important;
  flex: 0 0 155px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  font-family: 'Intro', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: normal !important;
}
.hood-timer-container div { width: 20px !important; }
.hood-timer-container span { margin: 0 2px 3px !important; }

.jetx-full-overlay {
  position: fixed;
  z-index: 14000;
  inset: 26px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4,5,9,.84);
  color: #d0d7e5;
  font-family: var(--font-family-medium), Arial, sans-serif;
}
.jetx-menu-shell, .jetx-page-shell {
  display: flex;
  flex-direction: column;
  width: min(900px, 96vw);
  height: min(700px, calc(100vh - 66px));
  overflow: hidden;
  border: 1px solid #303442;
  border-radius: 5px;
  background: #1c1e2a;
  box-shadow: 0 20px 65px #000;
}
.jetx-menu-head, .jetx-page-shell > header {
  display: flex;
  flex: 0 0 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  background: #0f1017;
  color: #596079;
  font-size: 13px;
}
.jetx-menu-head button, .jetx-page-shell > header button {
  border: 0;
  color: #9499b0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.jetx-menu-head button:hover, .jetx-page-shell > header button:hover { color: #ffdf35; }
.jetx-menu-head b { color: #9499b0; font-weight: 400; }
.jetx-menu-shell > main, .jetx-page-shell > main { flex: 1; min-height: 0; overflow: auto; padding: 25px; }
.jetx-menu-shell > nav {
  display: flex;
  flex: 0 0 74px;
  border-top: 1px solid #303442;
  background: #11131b;
}
.jetx-menu-shell > nav button {
  position: relative;
  flex: 1;
  border: 0;
  color: #747b91;
  background: transparent;
  font: 12px var(--font-family-medium);
  cursor: pointer;
}
.jetx-menu-shell > nav button.active { color: #ffdf35; background: #191c27; }
.jetx-menu-shell > nav button.active::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #ffdf35; }
.jetx-page-shell { width: min(820px, 96vw); height: min(570px, calc(100vh - 66px)); }
.jetx-page-shell > header h2 { margin: 0; color: #9499b0; font-size: 14px; font-weight: 400; }
.jetx-page-shell > header button { font-size: 30px; line-height: 1; }

.jetx-subtabs { display: flex; height: 42px; margin: -10px 0 12px; border-bottom: 1px solid #303442; }
.jetx-subtabs button { margin-right: 22px; border: 0; border-bottom: 2px solid transparent; color: #9499b0; background: none; font: 13px var(--font-family-bold); cursor: pointer; }
.jetx-subtabs button.active { border-bottom-color: #ffdf35; color: #ffdf35; }
.jetx-how-step { position: relative; display: flex; align-items: center; min-height: 150px; padding: 20px 340px 20px 58px; border-top: 1px solid #2d3041; }
.jetx-how-step:first-child { border-top: 0; }
.jetx-step-number { position: absolute; left: 0; color: #303342; font: 60px/1 robotobold; }
.jetx-how-step p { margin: 0; font-size: 18px; line-height: 1.35; }
.jetx-how-step img { position: absolute; right: 0; max-width: 318px; height: auto; object-fit: contain; }
.jetx-rule { margin-bottom: 10px; border: 1px solid #575f6f; background: #1c1e2a; }
.jetx-rule > button { position: relative; width: 100%; padding: 16px 54px 16px 21px; border: 0; color: #9499b0; background: transparent; text-align: left; font: 15px var(--font-family-bold); cursor: pointer; }
.jetx-rule > button span::before, .jetx-rule > button span::after { content: ''; position: absolute; right: 23px; top: 50%; width: 17px; height: 2px; background: #9499b0; }
.jetx-rule > button span::after { transform: rotate(90deg); transition: transform .2s; }
.jetx-rule.active > button { color: #ffdf35; }
.jetx-rule.active > button span::after { transform: rotate(0); }
.jetx-rule-copy { display: none; padding: 15px 22px; color: #dbdbdb; background: #14151d; font: 13px/1.55 var(--font-family-main); }
.jetx-rule.active .jetx-rule-copy { display: block; }

.jetx-page-table { border: 1px solid #303442; }
.jetx-table-head, .jetx-table-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; min-height: 42px; padding: 0 16px; border-bottom: 1px solid #292c38; }
.jetx-table-head { color: #747b91; background: #11131b; font-size: 11px; }
.jetx-table-row { color: #d0d7e5; font-size: 12px; }
.jetx-table-row strong { color: #ffdf35; text-align: right; }
.jetx-table-row strong.win { color: #5ee32b; }
.jetx-table-row strong.lose { color: #ef3d3d; }
.jetx-empty { padding: 50px 20px; color: #747b91; text-align: center; }
.jetx-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.jetx-stats > div { display: flex; min-height: 110px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #303442; background: #151720; }
.jetx-stats span { color: #747b91; font-size: 11px; }
.jetx-stats strong { margin-top: 8px; color: #ffdf35; font: 28px robotobold; }
.jetx-settings a { display: flex; align-items: center; min-height: 64px; padding: 0 18px; border-bottom: 1px solid #303442; color: #d0d7e5; cursor: pointer; }
.setting-symbol { width: 42px; color: #ffdf35; font-size: 22px; }
.jetx-settings label { margin-left: auto; }
.jetx-settings input { display: none; }
.jetx-settings i { display: block; width: 42px; height: 22px; border-radius: 12px; background: #333746; }
.jetx-settings i::after { content: ''; display: block; width: 18px; height: 18px; margin: 2px; border-radius: 50%; background: #777e91; transition: transform .2s; }
.jetx-settings input:checked + i { background: #806f13; }
.jetx-settings input:checked + i::after { transform: translateX(20px); background: #ffdf35; }
.jetx-chat { display: flex; height: 100%; flex-direction: column; }
.jetx-chat-messages { flex: 1; overflow: auto; }
.jetx-chat-messages > div { display: grid; grid-template-columns: 60px 90px 1fr; min-height: 36px; align-items: center; margin-bottom: 2px; padding: 6px 8px; border-radius: 5px; background: #272a38; font-size: 11px; }
.jetx-chat-messages time, .jetx-chat-messages b { color: #9499b0; font-weight: 400; text-align: center; }
.jetx-chat-messages span { color: #fff; font-size: 13px; }
.jetx-chat-input { display: flex; flex: 0 0 44px; margin-top: 12px; padding: 5px; border-radius: 6px; background: #0b0c0f; }
.jetx-chat-input input { flex: 1; min-width: 0; border: 0; padding: 0 12px; outline: 0; color: #fff; background: transparent; }
.jetx-chat-input button { width: 90px; border: 0; border-radius: 4px; color: #211b02; background: #ffdf35; font-family: var(--font-family-bold); cursor: pointer; }

@media screen and (max-width: 850px) {
  .loader-hood-react { font-size: 12px !important; line-height: normal !important; }
  .hood-smartsoft-logo { width: 30% !important; height: 26px !important; margin-left: 10px !important; flex: 0 0 30% !important; background-size: contain !important; }
  .hood-timer-container { width: 25% !important; margin-right: 5px !important; flex: 0 0 25% !important; font-size: 12px !important; line-height: normal !important; }
  .hood-timer-container div { width: 18px !important; }
  .hood-timer-container span { margin: 0 1px 3px !important; }
  .exact-stage .round-loader-caption { font-size: 2.836879cqw !important; letter-spacing: .170213cqw !important; }
  .bet .win.reference-win-visible { animation-name: jetx-win-rise-mobile, jetx-win-fade; }
  .jetx-full-overlay { inset: 26px 0 36px; padding: 0; }
  .jetx-menu-shell, .jetx-page-shell { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .jetx-menu-head, .jetx-page-shell > header { flex-basis: 48px; padding: 0 14px; font-size: 11px; }
  .jetx-menu-shell > main, .jetx-page-shell > main { padding: 12px; }
  .jetx-menu-shell > nav { flex-basis: 62px; }
  .jetx-how-step { min-height: 132px; padding: 14px 0 14px 38px; align-items: flex-start; }
  .jetx-step-number { font-size: 42px; }
  .jetx-how-step p { width: 42%; padding-top: 8px; font-size: 12px; }
  .jetx-how-step img { right: 0; top: 28px; width: 55%; max-width: 318px; }
  .jetx-rule > button { padding: 14px 46px 14px 14px; font-size: 12px; }
  .jetx-rule-copy { padding: 13px 15px; font-size: 12px; }
  .jetx-stats { grid-template-columns: 1fr 1fr; }
  .jetx-chat-messages > div { grid-template-columns: 48px 70px 1fr; }
}