





















.fms-splash {
  display: none;
}





@media (orientation: portrait) {



  body.fms-splash-active #fvPlayer .fvTutorialScreenView {
    background-image: none !important;
    background-color: var(--fms-green-600, #00722F) !important;
  }


  body.fms-splash-active .fms-splash {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fms-space-4, 16px);
    padding: var(--fms-space-4, 16px);
    box-sizing: border-box;
    overflow: hidden;
    font-family: var(--fms-font-sans);


    background-color: var(--fms-green-600, #00722F);
    background-image:
      linear-gradient(45deg, var(--fms-green-700, #00612B) 25%, transparent 25%, transparent 75%, var(--fms-green-700, #00612B) 75%),
      linear-gradient(45deg, var(--fms-green-700, #00612B) 25%, transparent 25%, transparent 75%, var(--fms-green-700, #00612B) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;

    cursor: pointer;
  }


  body.fms-splash-active .fms-splash__masthead {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--fms-space-2, 8px);
    font-size: var(--fms-text-lg, 16px);
    font-weight: var(--fms-weight-bold, 700);
    line-height: var(--fms-leading-tight, 1.1);
    white-space: nowrap;

    color: var(--fms-deco-gold-2, #C8A24B);
    background-image: linear-gradient(180deg, var(--fms-deco-gold-1, #F3E1A6), var(--fms-deco-gold-2, #C8A24B));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  }
  body.fms-splash-active .fms-splash__diamond {
    color: var(--fms-deco-gold-2, #C8A24B);
    -webkit-text-fill-color: var(--fms-deco-gold-2, #C8A24B);
    font-size: var(--fms-text-md, 14px);
  }


  body.fms-splash-active .fms-splash__cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--fms-space-2, 8px);
    max-width: 92%;
    padding: var(--fms-space-2, 8px) var(--fms-space-4, 16px);
    background-color: var(--fms-white, #FFFFFF);
    border: var(--fms-border-thick, 2px) solid var(--fms-deco-gold-2, #C8A24B);
    border-radius: var(--fms-radius-pill, 999px);
    box-shadow: var(--fms-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.35));
    transition: transform var(--fms-motion-fast, 120ms) var(--fms-ease-emph, cubic-bezier(0.32, 0.72, 0, 1)),
                filter var(--fms-motion-fast, 120ms) var(--fms-ease, ease);

    pointer-events: none;
  }


  body.fms-splash-active .fms-splash__play {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--fms-radius-circle, 50%);
    background-color: var(--fms-color-action, #00612B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.fms-splash-active .fms-splash__play svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: var(--fms-white, #FFFFFF);
  }


  body.fms-splash-active .fms-splash__label {
    font-size: var(--fms-text-2xl, 24px);
    font-weight: var(--fms-weight-bold, 700);
    line-height: var(--fms-leading-tight, 1.1);
    color: var(--fms-color-action, #00612B);
    white-space: nowrap;
  }


  body.fms-splash-active .fms-splash__hand {
    position: absolute;
    right: var(--fms-space-2, 8px);
    bottom: -6px;
    width: 26px;
    height: 26px;
    color: var(--fms-white, #FFFFFF);
    pointer-events: none;
  }

  body.fms-splash-active .fms-splash__hand-ray {
    stroke: var(--fms-color-danger, #E53935);
  }


  body.fms-splash-active .fms-splash__mascot {
    position: absolute;
    left: var(--fms-space-3, 12px);
    bottom: var(--fms-space-3, 12px);
    width: 22%;
    max-width: 96px;
    height: auto;




    aspect-ratio: 288 / 273;
    object-fit: contain;
    pointer-events: none;
  }


  body.fms-splash-active .fms-splash.is-pressed .fms-splash__cta {
    transform: scale(0.97);
    filter: brightness(0.96);
  }
  body.fms-splash-active .fms-splash.is-pressed .fms-splash__hand {
    animation: fms-splash-burst var(--fms-motion-base, 200ms) var(--fms-ease, ease);
  }




  body.fms-splash-active:not(.fms-played) .chat-join-button {
    display: none !important;
  }
}

@keyframes fms-splash-burst {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.25); opacity: 0.85; }
  100% { transform: scale(1);   opacity: 1; }
}


@media (prefers-reduced-motion: reduce) {
  body.fms-splash-active .fms-splash__cta {
    transition: none;
  }
  body.fms-splash-active .fms-splash.is-pressed .fms-splash__cta {
    transform: none;
    filter: brightness(0.96);
  }
  body.fms-splash-active .fms-splash.is-pressed .fms-splash__hand {
    animation: none;
  }
}
