/* Casino game intro, polished 2026-10-08. Pairs with js/casino-intro-20261008.js, which builds the new pieces and
 * adds .ci-on to #kzLoader - nothing here applies before that, so if the script fails the old intro is untouched.
 * The lobby's language: gold eyebrow with a rule, Georgia title, italic gold line, Inter copy, thin gold progress.
 * Also undoes what the older layers left behind: kazino.css paints the title as an outline (transparent fill +
 * stroke + drop-shadow) and centres the stage with flex; kazino-premium never cleared either. */

#kzLoader.ci-on {
  --ci-cream: #F2EADC;
  --ci-gold: #D9BD87;
  --ci-gold-soft: #C9B38B;
  --ci-rule: #BFA16B;
  --ci-text: #C4CCC6;
  --ci-mute: #9FACAD;
  --ci-ease: cubic-bezier(.2, .75, .2, 1);
  --ci-gutter: clamp(24px, 7vw, 132px);
  background: #05090E;
}

/* backdrop: the same video, darker on the reading side */
#kzLoader.ci-on .kz-loader__vid { filter: saturate(.9) contrast(1.06) brightness(.66); }
#kzLoader.ci-on .kz-loader__grade {
  display: block;
  background:
    radial-gradient(48% 46% at 16% 46%, rgba(217, 189, 135, .07), rgba(217, 189, 135, 0) 72%),
    linear-gradient(90deg, rgba(5, 9, 14, .94) 0%, rgba(5, 9, 14, .8) 30%, rgba(5, 9, 14, .34) 62%, rgba(5, 9, 14, .14) 100%),
    linear-gradient(0deg, rgba(5, 9, 14, .97) 0%, rgba(5, 9, 14, .55) 22%, rgba(5, 9, 14, 0) 48%),
    linear-gradient(180deg, rgba(5, 9, 14, .62) 0%, rgba(5, 9, 14, 0) 24%);
}

/* the engine's old texts stay in the DOM (it keeps writing to them) but are not shown */
#kzLoader.ci-on .kz-loader__sub,
#kzLoader.ci-on .kz-loader__pow,
#kzLoader.ci-on .kz-loader__term,
#kzLoader.ci-on .kz-loader__prow { display: none; }

#kzLoader.ci-on .kz-loader__stage {
  position: absolute;
  inset: auto;
  left: var(--ci-gutter);
  right: var(--ci-gutter);
  top: 45%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  max-width: 1100px;
  padding: 0;
  text-align: left;
}

#kzLoader.ci-on .ci-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font: 600 11px/1.35 Inter, system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ci-gold-soft);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
#kzLoader.ci-on .ci-eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--ci-rule);
  transform-origin: left center;
}

#kzLoader.ci-on .kz-loader__title {
  position: relative;
  margin: 0;
  font: 400 clamp(56px, min(7.4vw, 19vh), 136px)/.95 Georgia, "Times New Roman", serif;   /* vh: wide but short windows */
  letter-spacing: -.028em;
  text-transform: none;
  color: var(--ci-cream);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  filter: none;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .55);
}
#kzLoader.ci-on .kz-loader__title::before,
#kzLoader.ci-on .kz-loader__title::after { content: none; display: none; }

#kzLoader.ci-on .ci-accent {
  margin: 20px 0 0;
  font: italic 400 clamp(19px, 1.75vw, 30px)/1.3 Georgia, "Times New Roman", serif;
  color: var(--ci-gold);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

#kzLoader.ci-on .ci-body {
  margin: 16px 0 0;
  max-width: 50ch;
  font: 400 clamp(14px, 1.02vw, 16.5px)/1.65 Inter, system-ui, sans-serif;
  color: var(--ci-text);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}

#kzLoader.ci-on .ci-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
#kzLoader.ci-on .ci-fact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 15px 9px 13px;
  border: 1px solid rgba(217, 189, 135, .32);
  border-radius: 999px;
  background: rgba(10, 14, 20, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 600 12px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .03em;
  color: #ECE4D4;
}
#kzLoader.ci-on .ci-fact::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: #D3B37C;
  transform: rotate(45deg);
}

/* progress: status + %, a hairline bar, the tip */
#kzLoader.ci-on .kz-loader__prog {
  left: var(--ci-gutter);
  right: var(--ci-gutter);
  bottom: clamp(28px, 7.5vh, 76px);
  width: auto;
  max-width: none;
  transform: none;
  padding: 0;
}
#kzLoader.ci-on .ci-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 14px;
}
#kzLoader.ci-on .ci-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font: 500 13.5px/1.3 Inter, system-ui, sans-serif;
  letter-spacing: .01em;
  color: #E9E1D1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
#kzLoader.ci-on .ci-status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--ci-gold);
  transform: rotate(45deg);
  animation: ciPulse 1.4s ease-in-out infinite;
}
#kzLoader.ci-on .ci-pct {
  flex: none;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--ci-gold);
}
#kzLoader.ci-on .kz-loader__track {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgba(242, 234, 220, .14);
  overflow: hidden;
}
#kzLoader.ci-on .kz-loader__fill {
  position: relative;            /* the glint below rides the fill's edge, not the track's end */
  height: 100%;
  background: linear-gradient(90deg, rgba(191, 161, 107, .55), #D9BD87 60%, #F6E3B8);
  box-shadow: 0 0 14px rgba(234, 208, 155, .5);
}
#kzLoader.ci-on .kz-loader__fill::after {
  width: 40px;
  right: 0;
  background: linear-gradient(90deg, rgba(255, 246, 224, 0), rgba(255, 246, 224, .95));
  box-shadow: none;
  opacity: 1;
}
#kzLoader.ci-on .ci-tip {
  margin: 16px 0 0;
  max-width: 80ch;
  font: 400 13px/1.6 Inter, system-ui, sans-serif;
  color: var(--ci-mute);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
#kzLoader.ci-on .ci-tip b {
  margin-right: 12px;
  font: 600 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ci-gold-soft);
}

#kzLoader.ci-on.ci-ready .ci-status { color: #F6E3B8; }
#kzLoader.ci-on.ci-ready .ci-status::before { background: #F6E3B8; animation: none; box-shadow: 0 0 12px rgba(246, 227, 184, .8); }

/* skip: a quiet pill, top right. casino-buttons-20261003.css styles it as an underlined text link with
   !important at (3,0,2) - this has to out-rank that, hence the id chain. */
html body #kzLoader.ci-on #kzLdSkip:not(#ci#ci) {
  --c5-ring: #D9BD87;            /* the shared keyboard focus ring, in gold here */
  position: absolute;
  inset: clamp(16px, 3.6vh, 36px) clamp(16px, 2.6vw, 44px) auto auto;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 7px 0 18px !important;
  border: 1px solid rgba(233, 225, 209, .24) !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 18, .42) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #EFE7D8 !important;
  font: 600 11.5px/1 Inter, system-ui, sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease !important;
}
@media (hover: hover) {
  html body #kzLoader.ci-on #kzLdSkip:not(#ci#ci):hover {
    border-color: rgba(217, 189, 135, .7) !important;
    background: rgba(217, 189, 135, .12) !important;
    color: #FFFFFF !important;
  }
}
#kzLoader.ci-on .ci-skip__key {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(217, 189, 135, .34);
  border-radius: 999px;
  background: rgba(217, 189, 135, .06);
  font: 600 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ci-gold-soft);
}
@media (hover: none), (pointer: coarse) {
  #kzLoader.ci-on .ci-skip__key { display: none; }
  html body #kzLoader.ci-on #kzLdSkip:not(#ci#ci) { padding: 0 18px !important; }
}

/* entrance - every launch (the script re-adds .ci-in); resting state = no animation */
@keyframes ciUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ciFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ciDrift { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes ciRule { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ciSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ciPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
#kzLoader.ci-in .kz-loader__vid { animation: ciDrift 5s cubic-bezier(.2, .6, .2, 1) both; }
#kzLoader.ci-in .ci-eyebrow { animation: ciUp .7s var(--ci-ease) .05s both; }
#kzLoader.ci-in .ci-eyebrow::before { animation: ciRule .8s var(--ci-ease) .15s both; }
#kzLoader.ci-in .kz-loader__title { animation: ciUp .9s var(--ci-ease) .12s both; }
#kzLoader.ci-in .ci-accent { animation: ciUp .8s var(--ci-ease) .26s both; }
#kzLoader.ci-in .ci-body { animation: ciUp .8s var(--ci-ease) .36s both; }
#kzLoader.ci-in .ci-fact { animation: ciUp .7s var(--ci-ease) .46s both; }
#kzLoader.ci-in .ci-fact:nth-child(2) { animation-delay: .53s; }
#kzLoader.ci-in .ci-fact:nth-child(3) { animation-delay: .6s; }
#kzLoader.ci-in .kz-loader__prog { animation: ciFade .7s ease .3s both; }
#kzLoader.ci-in #kzLdSkip { animation: ciFade .6s ease .2s both; }
#kzLoader.ci-on .ci-status.ci-swap { animation: ciSwap .38s var(--ci-ease) both; }
.kz-calm #kzLoader.ci-on *,
.kz-calm #kzLoader.ci-on *::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #kzLoader.ci-on *,
  #kzLoader.ci-on *::before { animation: none !important; }
}

/* phones */
@media (max-width: 640px) {
  #kzLoader.ci-on { --ci-gutter: 22px; }
  #kzLoader.ci-on .kz-loader__vid { filter: saturate(.9) contrast(1.06) brightness(.74); }
  #kzLoader.ci-on .kz-loader__grade {
    background:
      linear-gradient(0deg, rgba(5, 9, 14, .97) 0%, rgba(5, 9, 14, .84) 36%, rgba(5, 9, 14, .48) 62%, rgba(5, 9, 14, .42) 100%);
  }
  #kzLoader.ci-on .kz-loader__stage { top: 44%; }
  #kzLoader.ci-on .ci-eyebrow { gap: 12px; margin-bottom: 18px; font-size: 10px; letter-spacing: .18em; }
  #kzLoader.ci-on .ci-eyebrow::before { width: 20px; }
  #kzLoader.ci-on .ci-brand { display: none; }
  #kzLoader.ci-on .kz-loader__title { font-size: clamp(42px, 13vw, 60px); line-height: 1; }
  #kzLoader.ci-on .ci-accent { margin-top: 14px; font-size: 18px; }
  #kzLoader.ci-on .ci-body { margin-top: 12px; font-size: 14px; line-height: 1.6; }
  #kzLoader.ci-on .ci-facts { gap: 8px; margin-top: 20px; }
  #kzLoader.ci-on .ci-fact { padding: 8px 12px 8px 11px; font-size: 11.5px; }
  #kzLoader.ci-on .kz-loader__prog { bottom: max(22px, env(safe-area-inset-bottom)); }
  #kzLoader.ci-on .ci-tip { font-size: 12.5px; }
  html body #kzLoader.ci-on #kzLdSkip:not(#ci#ci) { inset: 14px 14px auto auto; min-height: 44px; padding: 0 16px !important; font-size: 11px !important; }
}

/* short screens (phones on their side): keep the essentials */
@media (max-height: 560px) {
  #kzLoader.ci-on .ci-body,
  #kzLoader.ci-on .ci-tip { display: none; }
  #kzLoader.ci-on .kz-loader__stage { top: 42%; }
  #kzLoader.ci-on .ci-eyebrow { margin-bottom: 12px; }
  #kzLoader.ci-on .kz-loader__title { font-size: clamp(38px, 10vh, 72px); }
  #kzLoader.ci-on .ci-accent { margin-top: 10px; }
  #kzLoader.ci-on .ci-facts { margin-top: 16px; }
  #kzLoader.ci-on .kz-loader__prog { bottom: 18px; }
}

/* very narrow (phones with large browser zoom: 390 px at 150% = 260 px) - title, line and facts only */
@media (max-width: 300px) {
  #kzLoader.ci-on .ci-body,
  #kzLoader.ci-on .ci-tip { display: none; }
  #kzLoader.ci-on .kz-loader__stage { top: 50%; }
}