/* GAIMIN Arcade Shell v1.1.0
   Loaded after every game stylesheet. Games may replace slot content, never
   the shared geometry declared here. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --arcade-header-size: 42px;
  --arcade-control-size: 42px;
  --arcade-control-icon-size: 21px;
  --arcade-brand-width: 128px;
  --arcade-title-width: min(420px, 42vw);
  --arcade-rail-width: 244px;
  --arcade-shell-gap: clamp(12px, 2vw, 34px);
  --arcade-footer-height: 25px;
  --arcade-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --arcade-font-body: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --display: var(--arcade-font-display);
  --body: var(--arcade-font-body);
}

body {
  font-family: var(--body);
}

/* Brandbook typography contract: Plus Jakarta for titles; Roboto for copy. */
[data-arcade-title],
[data-arcade-rail] .hud-label,
[data-arcade-rail] .hud-value,
[data-arcade-rail] .score-value,
[data-arcade-frame] .frame-caption {
  font-family: var(--display);
}

[data-arcade-rail] .hud-note,
[data-arcade-rail] .score-disclosure p,
[data-arcade-footer] .system-status,
[data-arcade-footer] .fair-play-note {
  font-family: var(--body);
}

[data-arcade-shell] {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

[data-arcade-header] {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 420px) minmax(160px, 1fr);
  align-items: center;
  width: min(1500px, 100%);
}

[data-arcade-brand] {
  width: var(--arcade-brand-width);
  max-height: var(--arcade-header-size);
  justify-self: start;
}

[data-arcade-brand] img {
  display: block;
  width: 100%;
  height: auto;
}

[data-arcade-title] {
  display: grid;
  width: 100%;
  height: 34px;
  align-content: center;
  justify-self: center;
  overflow: hidden;
  text-align: center;
}

[data-arcade-title] h1 {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-arcade-fullscreen] {
  display: grid;
  box-sizing: border-box;
  width: var(--arcade-control-size);
  min-width: var(--arcade-control-size);
  height: var(--arcade-control-size);
  min-height: var(--arcade-control-size);
  padding: 0;
  place-items: center;
  justify-self: end;
  border-radius: 10px;
  font-family: inherit;
  line-height: 1;
  pointer-events: auto;
}

[data-arcade-fullscreen] svg {
  width: var(--arcade-control-icon-size);
  height: var(--arcade-control-icon-size);
}

[data-arcade-fullscreen] .fullscreen-enter {
  display: block;
}

[data-arcade-fullscreen] .fullscreen-exit {
  display: none;
}

:fullscreen [data-arcade-fullscreen] .fullscreen-enter,
:-webkit-full-screen [data-arcade-fullscreen] .fullscreen-enter {
  display: none;
}

:fullscreen [data-arcade-fullscreen] .fullscreen-exit,
:-webkit-full-screen [data-arcade-fullscreen] .fullscreen-exit {
  display: block;
}

.arcade-pseudo-fullscreen,
.arcade-pseudo-fullscreen body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.arcade-pseudo-fullscreen [data-arcade-shell].is-pseudo-fullscreen {
  position: fixed;
  z-index: 9999;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
}

.arcade-pseudo-fullscreen [data-arcade-fullscreen] .fullscreen-enter {
  display: none;
}

.arcade-pseudo-fullscreen [data-arcade-fullscreen] .fullscreen-exit {
  display: block;
}

[data-arcade-layout] {
  position: relative;
  display: grid;
  min-height: 0;
  align-items: center;
  justify-content: center;
}

[data-arcade-viewport] {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 9 / 16;
  isolation: isolate;
}

[data-arcade-viewport] > iframe,
[data-arcade-viewport] > canvas,
[data-arcade-viewport] > .game-surface {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: contain;
}

@media (min-width: 721px) and (min-height: 601px) {
  [data-arcade-header] {
    height: var(--arcade-header-size);
    min-height: var(--arcade-header-size);
    margin: 0 auto 8px;
  }

  [data-arcade-layout] {
    grid-template-columns: var(--arcade-rail-width) minmax(280px, auto) var(--arcade-rail-width);
    gap: var(--arcade-shell-gap);
    width: min(1480px, 100%);
    margin: 0 auto;
    container-type: size;
  }

  [data-arcade-rail] {
    display: grid;
    width: var(--arcade-rail-width);
    gap: clamp(12px, 2vh, 24px);
    align-content: center;
  }

  [data-arcade-rail] .hud-card--total,
  [data-arcade-rail] .hud-card--stage {
    box-sizing: border-box;
    height: clamp(106px, 8.03vw, 116px);
  }

  [data-arcade-rail] .hud-card--metric {
    box-sizing: border-box;
    height: 94px;
    min-height: 94px;
  }

  [data-arcade-rail] .score-disclosure {
    box-sizing: border-box;
    height: clamp(121px, 9.25vw, 134px);
  }

  [data-arcade-frame] {
    width: min(calc((100vh - 160px) * 0.5625), 720px, 48vw);
    width: min(calc((100dvh - 160px) * 0.5625), 720px, 48vw);
    width: min(720px, 48vw, max(0px, calc((100cqh - 76px) * 0.5625 + 14px)));
    min-width: 0;
    justify-self: center;
  }

  [data-arcade-footer] {
    display: grid;
    grid-template-columns: 220px minmax(0, 640px);
    gap: 22px;
    width: min(1100px, 100%);
    height: var(--arcade-footer-height);
    min-height: var(--arcade-footer-height);
    margin: 7px auto 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  [data-arcade-footer] .system-status {
    box-sizing: border-box;
    width: 220px;
    max-width: 220px;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
  }

  [data-arcade-footer] .fair-play-note {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 721px) and (max-width: 1020px) and (min-height: 601px) {
  :root {
    --arcade-rail-width: 180px;
    --arcade-shell-gap: 12px;
  }

  [data-arcade-frame] {
    width: min(calc((100vh - 160px) * 0.5625), 54vw);
    width: min(calc((100dvh - 160px) * 0.5625), 54vw);
    width: min(54vw, max(0px, calc((100cqh - 76px) * 0.5625 + 14px)));
  }
}

@media (max-width: 720px) {
  :root {
    --arcade-header-size: 36px;
    --arcade-control-size: 36px;
    --arcade-control-icon-size: 18px;
    --arcade-brand-width: 74px;
  }

  [data-arcade-header] {
    grid-template-columns: 74px minmax(0, 1fr) 42px;
    height: var(--arcade-header-size);
    min-height: var(--arcade-header-size);
    margin: 0 auto 4px;
  }

  [data-arcade-title] {
    height: var(--arcade-header-size);
  }
}

@media (max-width: 720px) and (orientation: portrait),
       (max-width: 720px) and (min-height: 601px) {
  [data-arcade-shell] {
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  [data-arcade-layout] {
    grid-template-columns: 1fr;
    grid-template-rows: 46px minmax(0, 1fr) 46px;
    gap: 4px;
    width: 100%;
    margin: 0;
    place-items: center;
  }

  [data-arcade-frame] {
    grid-row: 2;
    width: min(calc((100vh - 224px) * 0.5625), calc(100vw - 34px));
    width: min(calc((100dvh - 224px) * 0.5625), calc(100vw - 34px));
    min-width: 0;
    padding: 4px;
    border-radius: 15px 4px;
  }

  [data-arcade-rail] {
    position: static;
    display: grid;
    width: 100%;
    height: 46px;
    transform: none;
    pointer-events: none;
  }

  [data-arcade-left-rail] {
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  [data-arcade-right-rail] {
    grid-row: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  [data-arcade-rail] .hud-card {
    box-sizing: border-box;
    height: 46px;
    min-height: 46px;
    margin: 0;
    overflow: hidden;
    padding: 7px 9px;
  }

  [data-arcade-footer] {
    display: grid;
    grid-template-columns: minmax(0, 220px);
    width: 100%;
    height: var(--arcade-footer-height);
    min-height: var(--arcade-footer-height);
    margin: 3px auto 0;
    place-content: center;
    overflow: hidden;
  }

  [data-arcade-footer] .system-status {
    box-sizing: border-box;
    width: 220px;
    max-width: 220px;
    height: 21px;
    padding: 6px 8px;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
  }

  [data-arcade-footer] .fair-play-note {
    display: none;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  :root {
    --arcade-header-size: 32px;
    --arcade-control-size: 32px;
    --arcade-control-icon-size: 16px;
  }

  [data-arcade-shell] {
    --landscape-game-width: min(calc((100vh - 22px) * 0.5625), calc((100dvh - 22px) * 0.5625), 42vw);
    display: block;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }

  [data-arcade-header] {
    position: fixed;
    z-index: 30;
    top: max(4px, env(safe-area-inset-top));
    right: max(4px, env(safe-area-inset-right));
    left: auto;
    display: block;
    width: var(--arcade-header-size);
    height: var(--arcade-header-size);
    min-height: var(--arcade-header-size);
    margin: 0;
  }

  [data-arcade-brand],
  [data-arcade-title] {
    display: none;
  }

  [data-arcade-layout] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--landscape-game-width) minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: clamp(4px, 1.4vw, 12px);
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  [data-arcade-frame] {
    grid-row: 1;
    grid-column: 2;
    width: var(--landscape-game-width);
    max-width: 100%;
    min-width: 0;
    padding: 3px;
  }

  [data-arcade-rail] {
    position: static;
    display: grid;
    width: min(100%, 220px);
    height: auto;
    transform: none;
    pointer-events: none;
  }

  [data-arcade-left-rail] {
    grid-row: 1;
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: 6px;
    justify-self: end;
  }

  [data-arcade-right-rail] {
    grid-row: 1;
    grid-column: 3;
    grid-template-columns: 1fr;
    gap: 5px;
    justify-self: start;
  }

  [data-arcade-rail] .hud-card {
    box-sizing: border-box;
    height: 43px;
    min-height: 43px;
    margin: 0;
    overflow: hidden;
    padding: 6px 7px;
  }

  [data-arcade-frame] .frame-caption {
    height: 10px;
    font-size: 5px;
  }

  [data-arcade-footer] {
    position: fixed;
    z-index: 30;
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(4px, env(safe-area-inset-left));
    display: flex;
    width: min(calc((100vw - var(--landscape-game-width)) / 2 - 12px), 220px);
    height: 21px;
    min-height: 0;
    margin: 0;
    justify-content: flex-start;
    overflow: hidden;
  }

  [data-arcade-footer] .system-status {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 21px;
    padding: 5px 7px;
    justify-content: center;
    overflow: hidden;
    font-size: 6px;
    line-height: 1.15;
    white-space: nowrap;
  }

  [data-arcade-footer] .fair-play-note {
    display: none;
  }
}