body.front_v2 { --front-frame-opacity: 1; }
body.front_v2 div#front_v2 { display: none; }
body.front_v2 button#front_explore_open { display: none; }
body.front_v2 div#front_v2.front_v2_off { display: none !important; }

body.front_v2 div#front_v2 > div.front_v2_map { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
body.front_v2 div#front_v2 canvas.front_v2_veil, div#front_explore canvas.front_v2_veil { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none; }

body.front_v2 button#front_explore_open img { display: block; width: 40px; height: 40px; flex: none; }
body.front_v2 button#front_explore_open span { white-space: nowrap; }

@media (min-width: 1024px) {
  body.front_v2 div#front_v2.front_v2_on {
    display: block;
    position: absolute;
    left: 45px;
    top: 53px;
    width: 988px;
    height: 488px;
    overflow: hidden;
    background: #1d3a1a;
    pointer-events: none;
    clip-path: inset(0 0 91px 0);
  }
  body.front_v2 div#login_animation { position: relative; width: 988px; height: 488px; pointer-events: none; }
  body.front_v2 div#login_animation > div#front_picture { position: absolute; left: 0; top: 0; width: 988px; height: 488px; overflow: hidden; }
  body.front_v2 div#front_picture > div.front_picture_slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity 1.2s ease; }
  body.front_v2 div#front_picture img.no_flash_background { position: absolute; left: 0; top: 0; width: 988px; height: 488px; background-image: url('/v02/layout/login/b/grass-bg.png'); }
  body.front_v2 div#front_picture img.no_flash_horse { position: absolute; left: 200px; top: 200px; width: 526px; height: 250px; background-image: url('/v02/layout/login/b/horse.png'); }
  body.front_v2.front_revealed div#front_picture > div.front_picture_slide { opacity: 0; }
  body.front_v2 div#login_animation > img#front_frame { position: absolute; left: 0; top: 0; width: 988px; height: 488px; opacity: var(--front-frame-opacity); pointer-events: none; }
  body.front_v2 button#front_explore_open:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 66px;
    top: 388px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(212, 175, 55, .7);
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    color: #D4AF37;
    font: 14px sans-serif;
    cursor: pointer;
    z-index: 2;
  }
  body.front_v2 button#front_explore_open span {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    border: 1px solid rgba(212, 175, 55, .6);
    border-radius: 6px;
    background: rgba(0, 0, 0, .75);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
  }
  body.front_v2 button#front_explore_open:hover span, body.front_v2 button#front_explore_open:focus-visible span { opacity: 1; }
  body.front_v2 button#front_explore_open img { width: 36px; height: 36px; }
}

@media (max-width: 1023px) {
  body.front_v2 div#front_v2.front_v2_on {
    display: block;
    position: relative;
    order: 3;
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    height: 220px;
    flex: none;
    overflow: hidden;
    border: 2px solid #D4AF37;
    border-radius: 12px;
    background: rgba(20, 60, 20, .6);
    pointer-events: none;
  }
  body.front_v2 img#front_frame { display: none; }
  body.front_v2 div#front_picture, body.front_v2 div.front_picture_slide { display: contents; }
  body.front_v2 div#login_animation img.no_flash_background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/v02/layout/login/b/background.png') center / cover no-repeat; }
  body.front_v2 div#login_animation img.no_flash_horse { position: relative; top: auto; left: auto; display: block; width: 100%; max-width: 526px; height: 160px; margin: 0 auto; background: url('/v02/layout/login/b/horse.png') center bottom / contain no-repeat; }
  body.front_v2 button#front_explore_open:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    order: 3;
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    min-height: 48px;
    border: 2px outset #d4af37;
    border-radius: 20px;
    background: rgba(20, 80, 20, .3);
    color: #D4AF37;
    font: 16px sans-serif;
  }
}

@media (max-width: 1023px) and (orientation: portrait) {
  body.front_v2 div#login_animation img.no_flash_background { display: none; }
  body.front_v2 div#login_animation img.no_flash_horse { background-image: url('/v02/layout/login/b/horse_v.png'); }
}

body.front_exploring { overflow: hidden; }
div#front_explore { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 5000; background: #0b1a0b; }
div#front_explore > div.front_explore_map { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
div#front_explore > div.front_explore_bar { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; z-index: 2; }
div#front_explore > div.front_explore_bar > button {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(212, 175, 55, .7);
  border-radius: 24px;
  background: rgba(0, 0, 0, .7);
  color: #D4AF37;
  font: 26px/1 sans-serif;
  cursor: pointer;
}
div#front_explore > a#front_explore_signup {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 10px 16px;
  border: 1px solid rgba(212, 175, 55, .6);
  border-radius: 20px;
  background: rgba(0, 0, 0, .6);
  color: #D4AF37;
  font: 15px sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
div#front_explore button:focus-visible, div#front_explore a:focus-visible, button#front_explore_open:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.front_v2 div#front_picture > div.front_picture_slide { transition: opacity 1.2s ease; }
  body.front_v2.front_revealed div#front_picture > div.front_picture_slide { transform: none; opacity: 0; }
  body.front_v2 div#front_v2 canvas.front_v2_veil, div#front_explore canvas.front_v2_veil { display: none; }
}