/* The artwork stays outside the 16:9 game viewport. Dimensions are shared
   by the game, its bezel, and the flexible filler panels. */
#unity-fullscreen-container {
  --arcade-rail-width: clamp(42px, 17vmin, 200px);
  --arcade-rim-width: clamp(10px, 2vmin, 26px);
  --arcade-floor-height: 8dvh;
  --arcade-outer-margin: clamp(3px, 1vmin, 14px);
  --arcade-game-width: min(calc(100vw - var(--arcade-rail-width) * 2 - var(--arcade-outer-margin) * 2), calc((100dvh - var(--arcade-rim-width) * 2 - var(--arcade-floor-height) - var(--arcade-outer-margin) * 2) * 16 / 9));
  --arcade-game-height: calc(var(--arcade-game-width) * 9 / 16);
  --arcade-gap-x: calc((100vw - var(--arcade-game-width)) / 2);
  --arcade-gap-y: calc((100dvh - var(--arcade-game-height) - var(--arcade-floor-height)) / 2);
  background: #050918;
  isolation: isolate;
}

#unity-game {
  width: var(--arcade-game-width);
  top: calc(var(--arcade-gap-y) + var(--arcade-game-height) / 2);
  z-index: 1;
}

/* Cover both the game and the cabinet during the existing scene transition. */
#unity-fullscreen-container > #loader-transition-black {
  z-index: 30;
}

.arcade-surround {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: radial-gradient(ellipse at 0% 50%, #142b48, transparent 35%), radial-gradient(ellipse at 100% 50%, #2d123e, transparent 35%), #050918;
}

.arcade-floor {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--arcade-gap-y) + var(--arcade-game-height) + var(--arcade-rim-width));
  bottom: 0;
  background: linear-gradient(#050918dd, transparent 50%), url("../assets/images/loader/LoaderSceneBackground.webp") center bottom / 100% auto no-repeat;
}

.arcade-panel {
  display: none;
  position: absolute;
  left: var(--arcade-gap-x);
  right: var(--arcade-gap-x);
  background-color: #07132e;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 28px #0009;
}

.arcade-panel-top {
  top: 0;
  height: var(--arcade-gap-y);
  background-image: url("../assets/images/frame/panel-top.webp");
  background-position: center bottom;
}

.arcade-panel-bottom {
  bottom: 0;
  height: var(--arcade-gap-y);
  background-image: url("../assets/images/frame/panel-bottom.webp");
  background-position: center top;
}

.arcade-side {
  --neon: #00cfff;
  position: absolute;
  top: calc(var(--arcade-gap-y) - var(--arcade-rim-width));
  height: calc(var(--arcade-game-height) + var(--arcade-rim-width) * 2);
  width: var(--arcade-rail-width);
  background: linear-gradient(90deg, #050815, #14284a 60%, #081329);
  box-shadow: inset 0 0 20px #000b;
}

.arcade-side-left { left: calc(var(--arcade-gap-x) - var(--arcade-rail-width)); }
.arcade-side-right { right: calc(var(--arcade-gap-x) - var(--arcade-rail-width)); --neon: #f422ec; }

.arcade-rail {
  position: absolute;
  inset-block: 0;
  width: var(--arcade-rail-width);
  max-width: 100%;
  background-image: url("../assets/images/frame/rail-left.webp");
  background-size: 100% auto;
  background-repeat: repeat-y;
  box-shadow: 0 0 14px #000, inset 0 0 6px #000;
}

.arcade-side-left .arcade-rail { right: 0; }
.arcade-side-right .arcade-rail {
  left: 0;
  background-image: url("../assets/images/frame/rail-right.webp");
}

.arcade-side::after {
  content: "";
  position: absolute;
  inset-block: 2px;
  width: 2px;
  background: #c9fcff;
  box-shadow: 0 0 4px var(--neon), 0 0 12px var(--neon);
}

.arcade-side-left::after { right: 1px; }
.arcade-side-right::after { left: 1px; background: #ffe8ff; }

.arcade-badge {
  position: absolute;
  z-index: 2;
  width: calc(var(--arcade-rail-width) * .6);
  aspect-ratio: .82;
  border: 2px solid #e6aa52;
  border-radius: 7px;
  background: linear-gradient(135deg, #263752, #040718 50%, #241335);
  box-shadow: 0 0 0 3px #030713, inset 0 0 0 2px #ff65ee, inset 0 0 14px #cf0ad177, 0 0 8px #ed27dd88;
  display: grid;
  place-items: center;
}

.arcade-side-left .arcade-badge { right: calc(var(--arcade-rail-width) * .18); }
.arcade-side-right .arcade-badge { left: calc(var(--arcade-rail-width) * .18); }
.arcade-badge-top { top: 7%; }
.arcade-badge-bottom { bottom: 12%; }
.arcade-badge img { width: 87%; height: auto; filter: drop-shadow(0 0 4px #ffb344); }

.arcade-window-rim {
  position: absolute;
  left: var(--arcade-gap-x);
  top: var(--arcade-gap-y);
  width: var(--arcade-game-width);
  height: var(--arcade-game-height);
  border: 3px solid #315474;
  box-sizing: content-box;
  transform: translate(-3px, -3px);
  box-shadow: 0 0 0 5px #05091b, 0 0 0 7px #1e3751, 0 0 18px #000;
}

.arcade-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--arcade-rim-width);
  background: linear-gradient(#203254, #020411 48%, #17243e 80%, #456484);
  box-shadow: 0 0 7px #000;
}

.arcade-edge::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 45%;
  height: 3px;
  background: linear-gradient(90deg, #b6ffff 0%, #00cfff 8%, #00aaff 30%, #865afa 50%, #ff15e9 70%, #ff41ea 92%, #ffe1ff);
  box-shadow: 0 0 4px #3488ed, 0 0 12px #6f35ff;
}

.arcade-edge-top { bottom: calc(100% + 3px); }
.arcade-edge-bottom { top: calc(100% + 3px); }

.arcade-cap {
  position: absolute;
  width: calc(var(--arcade-rail-width) * .62);
  height: calc(var(--arcade-rail-width) * .42);
  background: linear-gradient(135deg, #fff0b0, #b16b24 25%, #f5c678 53%, #8a4518 76%, #ffe59c);
  clip-path: polygon(0 0, 65% 0, 100% 65%, 100% 100%, 65% 100%, 0 35%);
  filter: drop-shadow(0 2px 3px #000);
}

.arcade-cap::after {
  content: "";
  position: absolute;
  width: 24%;
  aspect-ratio: 1;
  left: 42%;
  top: 35%;
  border-radius: 50%;
  background: linear-gradient(135deg, #f6bd64, #15131b 40%, #080713 60%, #dfa74c);
  box-shadow: 0 0 0 1px #694720, inset 1px 1px 1px #ffdc8d;
}

.arcade-cap-tl { right: calc(100% - 15px); bottom: calc(100% - 14px); }
.arcade-cap-tr { left: calc(100% - 15px); bottom: calc(100% - 14px); transform: scaleX(-1); }
.arcade-cap-bl { right: calc(100% - 15px); top: calc(100% - 14px); transform: scaleY(-1); }
.arcade-cap-br { left: calc(100% - 15px); top: calc(100% - 14px); transform: scale(-1); }

.arcade-landscape-frame, .arcade-landscape-trim { display: none; }

/* Variant 2: independently sized rails and horizontal spans.
   The atlas rails retain their native scale; only straight horizontal
   channels change length. The well fills all space around the 16:9 game. */
@media (orientation: landscape) {
  #unity-fullscreen-container {
    --v2-floor: 8dvh;
    --v2-unit: calc((100dvh - var(--v2-floor)) / 554);
    --v2-rail: calc(var(--v2-unit) * 110);
    --v2-top: calc(var(--v2-unit) * 35);
    --v2-bottom: calc(var(--v2-unit) * 28);
    --v2-pad: max(3px, calc(var(--v2-unit) * 4));
    --v2-inner-height: calc(100dvh - var(--v2-floor) - var(--v2-top) - var(--v2-bottom));
    --arcade-game-width: min(calc(100vw - var(--v2-rail) * 2 - var(--v2-pad) * 2), calc((var(--v2-inner-height) - var(--v2-pad) * 2) * 16 / 9));
    --arcade-gap-y: calc(var(--v2-top) + (var(--v2-inner-height) - var(--arcade-game-height)) / 2);
  }
  #unity-game { box-shadow: 0 0 0 2px #071322, 0 0 0 3px #294561, 0 0 18px #000; }
  .arcade-surround > :not(.arcade-landscape-frame) { display: none; }
  .arcade-landscape-frame {
    display: block;
    position: absolute;
    inset: 0;
    background: #071226;
  }
  .arcade-landscape-trim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
  }
  .variant-2-well {
    position: absolute;
    inset: var(--v2-top) var(--v2-rail) calc(var(--v2-floor) + var(--v2-bottom));
    background: radial-gradient(ellipse at left, #06456b88, transparent 60%), radial-gradient(ellipse at right, #5b135988, transparent 60%), repeating-linear-gradient(135deg, #ffffff04 0 1px, transparent 1px 4px), #0a172a;
    box-shadow: inset 0 0 35px #000b;
  }
  .variant-2-rail {
    position: absolute;
    top: 0;
    bottom: var(--v2-floor);
    width: calc(var(--v2-unit) * 130);
    background-image: url("../assets/images/frame/variant-2.webp");
    background-size: calc(var(--v2-unit) * 1050) calc(var(--v2-unit) * 604);
    background-repeat: no-repeat;
    z-index: 2;
  }
  /* Keep the original inward corner overhangs; trim away only the atlas
     mockup screen. Coordinates belong to the cabinet, never the game. */
  .variant-2-rail-left {
    left: 0;
    background-position: left top;
    clip-path: polygon(0 0, 100% 0, 100% calc(var(--v2-unit) * 24), 84.615% calc(var(--v2-unit) * 40), 84.615% calc(var(--v2-unit) * 512), 100% calc(var(--v2-unit) * 532), 100% 100%, 0 100%);
  }
  .variant-2-rail-right {
    right: 0;
    background-position: right top;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--v2-unit) * 532), 15.385% calc(var(--v2-unit) * 512), 15.385% calc(var(--v2-unit) * 40), 0 calc(var(--v2-unit) * 24));
  }
  .variant-2-top, .variant-2-bottom {
    position: absolute;
    left: var(--v2-rail);
    right: var(--v2-rail);
    background-image: url("../assets/images/frame/variant-2.webp");
    background-size: calc(100% * 1050 / 830) calc(var(--v2-unit) * 604);
    background-repeat: no-repeat;
    z-index: 1;
  }
  .variant-2-top { top: 0; height: var(--v2-top); background-position: center top; }
  .variant-2-bottom {
    bottom: var(--v2-floor);
    height: var(--v2-bottom);
    background-position: center calc(var(--v2-unit) * -526);
  }
  .variant-2-floor {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--v2-floor);
    background: url("../assets/images/frame/variant-2.webp") center bottom / max(100vw, calc(var(--v2-floor) * 1050 / 50)) auto no-repeat;
  }
  .variant-2-wing {
    position: absolute;
    top: calc(var(--v2-top) + var(--v2-inner-height) * .12);
    height: calc(var(--v2-inner-height) * .76);
    width: max(0px, calc(var(--arcade-gap-x) - var(--v2-rail) - var(--v2-pad) * 4));
    background: linear-gradient(90deg, #02081755, transparent 35%, #02081744), url("../assets/images/frame/honeycomb.svg");
    clip-path: polygon(0 7%, 20% 0, 80% 0, 100% 7%, 100% 93%, 80% 100%, 20% 100%, 0 93%);
    background-size: auto, calc(var(--v2-unit) * 13) calc(var(--v2-unit) * 22.517);
    box-shadow: inset 0 0 10px #000;
  }
  .variant-2-wing-left { left: calc(var(--v2-rail) + var(--v2-pad) * 2); }
  .variant-2-wing-right { right: calc(var(--v2-rail) + var(--v2-pad) * 2); }
}

@media (orientation: portrait) {
  #unity-fullscreen-container {
    --arcade-rail-width: clamp(17px, 5vw, 44px);
    --arcade-floor-height: 0px;
    --arcade-outer-margin: 0px;
    --arcade-rim-width: clamp(8px, 2vw, 14px);
  }
  .arcade-floor { display: none; }
  .arcade-panel {
    display: block;
    background-image: none;
    background-color: #09172e;
    background-image: linear-gradient(90deg, #0caaff22, transparent 35%, transparent 65%, #fa22d522), repeating-linear-gradient(135deg, #ffffff03 0 1px, transparent 1px 4px);
  }
  /* Square portrait artwork is cropped to the panel, never stretched.
     Narrow tablets crop vertically; tall phones crop horizontally. */
  .arcade-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 20px #0009;
  }
  .arcade-panel-top::before {
    bottom: 0;
    background-image: url("../assets/images/frame/portrait-top.webp");
  }
  .arcade-panel-bottom::before {
    top: 0;
    background-image: url("../assets/images/frame/portrait-bottom.webp");
  }
  .arcade-panel::after {
    content: "";
    position: absolute;
    inset-inline: 7%;
    height: 8px;
    background: linear-gradient(90deg, #00cfff, #292953 50%, #fa23ea);
    border-block: 3px solid #152645;
    box-shadow: 0 0 8px #5980fa77;
  }
  .arcade-panel-top::after { top: 8px; }
  .arcade-panel-bottom::after { bottom: 8px; }
  .arcade-side {
    top: 0;
    height: 100%;
    width: var(--arcade-gap-x);
  }
  .arcade-side-left { left: 0; }
  .arcade-side-right { right: 0; }
  .arcade-side .arcade-rail {
    width: calc(var(--arcade-rail-width) * 2.7);
    max-width: none;
  }
  .arcade-side-left .arcade-rail {
    left: 0;
    right: auto;
    clip-path: polygon(0 0, 100% 0, 100% calc(var(--arcade-gap-y) - 12px), 37.037% var(--arcade-gap-y), 37.037% calc(var(--arcade-gap-y) + var(--arcade-game-height)), 100% calc(var(--arcade-gap-y) + var(--arcade-game-height) + 12px), 100% 100%, 0 100%);
  }
  .arcade-side-right .arcade-rail {
    right: 0;
    left: auto;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--arcade-gap-y) + var(--arcade-game-height) + 12px), 62.963% calc(var(--arcade-gap-y) + var(--arcade-game-height)), 62.963% var(--arcade-gap-y), 0 calc(var(--arcade-gap-y) - 12px));
  }
  .arcade-badge {
    width: calc(var(--arcade-rail-width) * 1.8);
    border-width: 1px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #030713, inset 0 0 0 1px #ff65ee, 0 0 5px #ed27dd88;
  }
  .arcade-side-left .arcade-badge { left: calc(var(--arcade-rail-width) * .35); right: auto; }
  .arcade-side-right .arcade-badge { right: calc(var(--arcade-rail-width) * .35); left: auto; }
  .arcade-cap-tl { right: calc(100% - 5px); bottom: calc(100% - 5px); }
  .arcade-cap-tr { left: calc(100% - 5px); bottom: calc(100% - 5px); }
  .arcade-cap-bl { right: calc(100% - 5px); top: calc(100% - 5px); }
  .arcade-cap-br { left: calc(100% - 5px); top: calc(100% - 5px); }
}