* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Orbitron";
  src: url("./assets/Font/Orbitron Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Orbitron";
  src: url("./assets/Font/Orbitron Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Orbitron";
  src: url("./assets/Font/Orbitron Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Orbitron";
  src: url("./assets/Font/Orbitron Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "UD Marugo";
  src: url("./assets/Font/FOT UDMarugo LargePro B.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --world-w: 420;
  --world-h: 680;
  --grand-ui-scale: 1;
  /* Smallest supported stage scale. Viewports below this clip instead of shrinking further. */
  --min-stage-scale: 0.82;
  --ui-chrome-space: 140px;
  /* Reference HUD: heavy rounded sans (Fredoka / Nunito); Orbitron kept for sci-fi fallback. */
  --font-display: "Fredoka", "Nunito", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Fredoka", "Nunito", "Orbitron", Arial, sans-serif;
  --font-jp: "UD Marugo", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 50% 15%, rgba(108, 187, 255, 0.35), transparent 40%),
    radial-gradient(circle at 15% 82%, rgba(250, 159, 204, 0.26), transparent 40%),
    linear-gradient(180deg, #192046 0%, #171335 42%, #21123a 100%);
  color: #f4f7ff;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

/* Site chrome: LLR global nav sits above the game; game stays in the shell below. */
.llr-page-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* When the global nav is open, drop the stage slightly like LLR Snake so links are not covered. */
body.llr-nav-open .llr-page-shell > .app {
  margin-top: 78px;
}

.llr-global-nav-toggle {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4fa4, #ec3990);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(236, 57, 143, 0.28);
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.llr-global-nav-bars {
  flex: 0 0 auto;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

/* Match other LLR subsites: panel is viewport-fixed so flex/overflow on the game shell cannot clip it. */
.llr-global-nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99990;
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease;
  pointer-events: none;
}

.llr-global-nav-panel.is-open {
  max-height: 460px;
  overflow: visible;
  pointer-events: auto;
}

.llr-global-nav-inner {
  min-height: 62px;
  padding: 0 5vw 0 168px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(90deg, #ff4fa4, #ec3990);
  box-shadow: 0 10px 26px rgba(255, 79, 164, 0.28);
  color: #fff;
  overflow: visible;
}

.llr-global-nav-home {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

.llr-global-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 0.88rem;
}

.llr-global-nav-links a,
.llr-global-nav-dropdown-toggle {
  color: rgba(255, 255, 255, 0.95);
}

.llr-global-nav-dropdown {
  position: relative;
}

.llr-global-nav-dropdown-toggle {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.llr-global-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 178px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #ffd2e7;
  background: #fff;
  box-shadow: 0 14px 30px rgba(236, 57, 143, 0.18);
  z-index: 5100;
}

.llr-global-nav-dropdown:hover .llr-global-nav-dropdown-menu,
.llr-global-nav-dropdown:focus-within .llr-global-nav-dropdown-menu {
  display: flex;
}

.llr-global-nav-dropdown-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: #6f6487;
  white-space: nowrap;
}

.llr-global-nav-dropdown-menu a:hover {
  color: #ec3990;
  background: #fff3fa;
}

/* Ball page: site nav only on larger viewports — full pane is too heavy on phones.
   Also hide in landscape when the short edge is still phone-sized (width alone can exceed 980px). */
@media (max-width: 980px),
  ((orientation: landscape) and (max-height: 560px) and (max-width: 1400px)) {
  .llr-global-nav-toggle,
  .llr-global-nav-panel {
    display: none !important;
    pointer-events: none !important;
  }

  body.llr-nav-open .llr-page-shell > .app {
    margin-top: 0 !important;
  }
}

/* Coarse pointers: slightly thicker burger lines so the icon does not disappear at high DPR. */
@media (pointer: coarse) {
  .llr-global-nav-bars {
    width: 16px;
    height: 3px;
    border-radius: 3px;
    box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  }
}

/* Mobile gesture guard: prevent long-press copy/select callouts on the game surface. */
.app,
.board-wrap,
#gameCanvas,
.title-overlay,
.controls-overlay,
.hud-overlay {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Apply the same guard to descendants (including sr-only labels near the Show Time gauge). */
.app * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#gameCanvas,
.board-wrap,
.controls-overlay,
.gauges {
  touch-action: none;
}

.llr-page-shell > .app {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  transition: margin-top 220ms ease;
}

.app {
  /* 420×680 stage with a minimum scale floor; below that, viewport clips instead of shrinking UI more. */
  width: max(
    calc(var(--world-w) * var(--min-stage-scale) * 1px),
    min(96vw, calc(100dvh * var(--world-w) / var(--world-h)))
  );
  height: max(
    calc(var(--world-h) * var(--min-stage-scale) * 1px),
    min(100dvh, calc(96vw * var(--world-h) / var(--world-w)))
  );
  min-width: calc(var(--world-w) * var(--min-stage-scale) * 1px);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
}

.hud {
  width: 100%;
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-bottom: 0;
  overflow: visible;
}

.hud-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
  padding: max(6px, env(safe-area-inset-top, 0px)) 10px 4px;
  box-sizing: border-box;
  overflow: visible;
}

.hud-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
}

.time-pie {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  /* Solid pie: remaining time fills the disk (no hollow center). */
  background: conic-gradient(
    from -90deg,
    #7de4ef 0turn,
    #7de4ef calc(var(--time-ratio, 1) * 1turn),
    #5c4a52 0
  );
  border: 3px solid rgba(255, 255, 255, 0.66);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 0 14px rgba(0, 0, 0, 0.12);
}

.time-pie > span {
  position: relative;
  z-index: 1;
  font-size: 68px;
  line-height: 1;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  color: #f8fbff;
  text-shadow:
    0 2px 0 #4f3a41,
    0 0 10px rgba(0, 0, 0, 0.45),
    0 0 2px rgba(0, 0, 0, 0.9);
}

.time-pie.time-pie--frozen {
  background: conic-gradient(
    from -90deg,
    #6b2fcf 0turn,
    #6b2fcf calc(var(--time-ratio, 1) * 1turn),
    #3b2948 0
  );
  border-color: rgba(206, 170, 255, 0.76);
  box-shadow:
    0 2px 12px rgba(33, 10, 66, 0.48),
    inset 0 0 16px rgba(76, 36, 144, 0.28);
}

.time-pie.time-pie--frozen > span {
  color: #f7eeff;
  text-shadow:
    0 2px 0 #4a276f,
    0 0 12px rgba(92, 43, 169, 0.62),
    0 0 2px rgba(0, 0, 0, 0.9);
}

.hud-score {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  justify-self: center;
  transform: translateY(0);
  padding-top: 2px;
}

.score-label {
  font-size: 50px;
  line-height: 0.92;
  font-weight: 700;
  font-family: var(--font-display);
  color: #ffd4e2;
  text-shadow: 0 2px 0 #ff5d92, 0 0 8px rgba(255, 110, 168, 0.45);
}

.hud-score #scoreValue {
  margin-top: -4px;
  font-size: 58px;
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(255, 230, 160, 0.55),
    0 2px 0 #6f4c58,
    0 0 10px rgba(0, 0, 0, 0.35);
}

.hud-right {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
  align-self: start;
  justify-self: end;
  pointer-events: none;
}

.hud-coins {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1;
  color: #ffe566;
  text-shadow:
    0 1px 0 #7a5200,
    0 0 8px rgba(255, 214, 90, 0.4);
}

.hud-coins__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 0 rgba(80, 50, 0, 0.55));
}

.hud-pause {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}

.showtime-bonus-hud {
  position: absolute;
  left: 50%;
  /* Below timer pie; shrinks on short viewports so the stack hugs the top. */
  top: calc(env(safe-area-inset-top, 0px) + clamp(86px, 9vmin + 52px, 114px));
  transform: translateX(-50%);
  z-index: 6;
  width: min(360px, 92%);
  pointer-events: none;
  text-align: center;
}

/* Same visuals as fixed bonus HUD, but positioned from JS (px in board-wrap) so it can fly above the score bar. */
.showtime-bonus-hud.showtime-bonus-hud--bank-fly {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 8;
}

.showtime-bonus-hud.hidden {
  display: none;
}

.showtime-bonus-inner {
  position: relative;
  padding: 2px 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes showtime-bonus-rainbow-shift {
  to {
    background-position: 200% 50%;
  }
}

/* Rainbow fill clipped to the bonus digits (fixed HUD under sprite + fly-to-score clone). */
.showtime-bonus-hud .showtime-bonus-value {
  display: inline-block;
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  background-image: linear-gradient(
    92deg,
    #4af8ff 0%,
    #7cf7ff 9%,
    #b8ff8f 20%,
    #fff15a 34%,
    #ffb54a 46%,
    #ff7eb8 58%,
    #d4a0ff 72%,
    #7cf0ff 86%,
    #4af8ff 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: showtime-bonus-rainbow-shift 3.2s linear infinite;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}

@media (prefers-reduced-motion: reduce) {
  .showtime-bonus-hud .showtime-bonus-value {
    animation: none;
    background-position: 35% 50%;
  }
}

.pause-btn {
  pointer-events: auto;
  width: 84px;
  height: 84px;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent url("./assets/Sprite/ButtonStop.png") center / contain no-repeat;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.pause-btn:not(:disabled):hover {
  filter: brightness(1.06);
}

.pause-btn:not(:disabled):active {
  transform: translateY(2px);
}

.pause-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.shuffle-btn {
  pointer-events: auto;
  width: 132px;
  height: 132px;
  padding: 0;
  border: 0;
  border-radius: 0;
  /* Keep raw PNG alpha; no circular clipping so glow/blur renders naturally. */
  overflow: visible;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("./assets/Sprite/BtnChange.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform 120ms ease, filter 120ms ease, opacity 160ms ease;
}

.shuffle-btn__icon {
  display: none;
}

.shuffle-btn:not(:disabled):hover {
  filter: brightness(1.06);
}

.shuffle-btn:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: none;
}

.shuffle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.board-wrap {
  position: relative;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.2);
  background:
    linear-gradient(180deg, rgba(74, 91, 151, 0.96) 0%, rgba(121, 94, 132, 0.96) 52%, rgba(108, 84, 123, 0.96) 100%);
}

/* Title attract: default `align-items: center` leaves dead space under the letterboxed canvas; pin the stage to the pit base. */
.board-wrap.board-wrap--title-attract {
  align-items: flex-end;
}

.gameplay-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: transparent;
  background-image: var(--puchi-gameplay-bg-image, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body.puchiball-grand-live .gameplay-backdrop {
  background-attachment: fixed;
}

.gameplay-backdrop.hidden {
  display: none !important;
}

/* Full-screen menu overlays (not Time Up interstitial): hide in-game HUD & bottom bar — see `syncBoardMenuChrome`. */
.board-wrap--menu-open .hud-overlay,
.board-wrap--menu-open .controls-overlay {
  display: none !important;
}

.board-wrap--menu-open .showtime-bonus-hud {
  display: none !important;
}

.end-round-countdown {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: Fredoka, "Nunito", var(--font-display), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(92px, 24vw, 158px);
  line-height: 1;
  letter-spacing: 0.03em;
  color: rgba(210, 196, 255, 0.94);
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.75),
    0 0 18px rgba(255, 248, 255, 0.45),
    0 3px 0 rgba(255, 255, 255, 0.35),
    0 5px 0 #1e0f32,
    0 6px 14px rgba(0, 0, 0, 0.35),
    3px 3px 0 rgba(22, 8, 42, 0.88),
    -2px -2px 0 rgba(22, 8, 42, 0.55);
  -webkit-text-stroke: 1.5px rgba(36, 16, 58, 0.82);
  paint-order: stroke fill;
}

.end-round-countdown.hidden {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .end-round-countdown {
    -webkit-text-stroke-width: 1.5px;
  }
}

#gameCanvas {
  display: block;
  position: relative;
  z-index: 2;
  background: transparent;
  touch-action: none;
}

#gameCanvas.game-canvas--title-attract {
  background: transparent;
}

.title-attract-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(22, 17, 34, 0.22), rgba(22, 17, 34, 0.38)),
    var(--puchi-menu-bg-image, url("./assets/Sprite/PartsPuzzleBg1.png")) center / cover no-repeat;
}

body.puchiball-grand-live .title-attract-backdrop {
  background-image:
    linear-gradient(rgba(22, 17, 34, 0.22), rgba(22, 17, 34, 0.38)),
    var(--puchi-menu-bg-image, url("./assets/Sprite/PartsPuzzleBg1.png"));
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}

.title-attract-backdrop.hidden {
  display: none !important;
}

.controls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  margin-top: 0;
}

.controls-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 6px 10px 12px;
  box-sizing: border-box;
  /* Let playfield taps pass through except explicit control buttons. */
  pointer-events: none;
}

.skill-btn,
.showtime-btn {
  width: 84px;
  height: 84px;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: center / contain no-repeat;
  cursor: pointer;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  pointer-events: auto;
}

.showtime-btn {
  width: 104px;
  height: 90px;
  background-image:
    url("./assets/Sprite/IconShowtime.png"),
    url("./assets/Sprite/TextShowTime.png"),
    url("./assets/Sprite/PartsSlillButtonBg.png");
  background-size: 60% auto, 82% auto, contain;
  background-position: center 54%, center 76%, center;
  box-shadow: 0 0 18px rgba(255, 147, 229, 0.22);
}

.skill-btn {
  border-radius: 999px;
  background-image: url("./assets/Sprite/PartsSlillButtonBg.png");
  background-size: contain;
  background-position: center;
}

.skill-btn::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  background:
    conic-gradient(
      from -90deg,
      #ff6bb3 0turn,
      #ffd95e 0.2turn,
      #72f4c5 0.4turn,
      #71b6ff 0.6turn,
      #b684ff 0.8turn,
      #ff6bb3 1turn
    );
  opacity: 1;
  -webkit-mask-image:
    radial-gradient(circle at center, transparent 53%, #000 55%, #000 64%, transparent 66%),
    conic-gradient(from -90deg, #000 calc(var(--skill-fill, 0) * 1%), transparent 0);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at center, transparent 53%, #000 55%, #000 64%, transparent 66%),
    conic-gradient(from -90deg, #000 calc(var(--skill-fill, 0) * 1%), transparent 0);
  mask-composite: intersect;
}

.skill-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-image: var(--skill-ball-image, none);
  background-size: 56% 56%;
  background-position: center center;
  background-repeat: no-repeat;
}

.controls .skill-btn {
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
  pointer-events: auto;
}

.controls .shuffle-btn {
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
  pointer-events: auto;
}

.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(rgba(18, 14, 40, 0.78), rgba(18, 14, 40, 0.88));
  backdrop-filter: blur(1.5px);
}

.pause-overlay.hidden {
  display: none;
}

.landscape-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(rgba(16, 12, 34, 0.94), rgba(16, 12, 34, 0.97));
}

.landscape-mode-overlay.hidden {
  display: none !important;
}

.landscape-mode-overlay__icon {
  font-size: clamp(64px, 14vw, 120px);
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.landscape-mode-overlay__title {
  margin: 0;
  max-width: min(640px, 92vw);
  font-family: var(--font-ui);
  font-size: clamp(28px, 6.2vw, 54px);
  font-weight: 900;
  line-height: 1.12;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}

/* While portrait-blocked, keep the stage unrotated so the warning reads upright to the player. */
body.puchiball-landscape-blocked .llr-page-shell > .app {
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/* Resume 3–2–1: no dim scrim, no menu buttons — only the number over the live board. */
.pause-overlay.pause-overlay--countdown-only {
  background: transparent;
  backdrop-filter: none;
}

.pause-overlay.pause-overlay--countdown-only .pause-actions {
  display: none !important;
}

.pause-overlay.pause-overlay--countdown-only #pauseTitle {
  display: none;
}

.pause-overlay.pause-overlay--countdown-only .pause-skill-card {
  display: none !important;
}

.pause-skill-card {
  box-sizing: border-box;
  width: min(380px, 92vw);
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.26);
  background: rgba(26, 22, 52, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.pause-skill-card.hidden {
  display: none !important;
}

.pause-skill-card__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.pause-skill-card__ballwrap {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.2);
}

.pause-skill-card__ballwrap.hidden {
  display: none !important;
}

.pause-skill-card__ball {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pause-skill-card__text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.pause-skill-card__name {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 1.08rem;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.pause-skill-card__effect {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.38;
  color: rgba(225, 238, 255, 0.98);
}

.pause-skill-card__support {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.32;
  color: rgba(198, 210, 255, 0.88);
}

.pause-skill-card__support.hidden {
  display: none !important;
}

#pauseTitle {
  margin: 0;
  font-size: 48px;
  font-family: var(--font-ui);
  color: #fff;
  text-shadow: 0 2px 0 #5f4a80, 0 0 10px rgba(0, 0, 0, 0.35);
}

.pause-countdown {
  margin: 0;
  font-size: 56px;
  font-weight: 900;
  font-family: var(--font-ui);
  color: #8ce9ff;
  text-shadow: 0 3px 0 #2d5c7a, 0 0 12px rgba(0, 0, 0, 0.4);
}

/* No global `.hidden` in this project — pair with JS `classList` like other HUD bits. */
.pause-countdown.hidden {
  display: none !important;
}

.pause-actions {
  display: flex;
  gap: 14px;
}

.pause-action-btn {
  min-width: 138px;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-ui);
  color: #fff;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  transition: transform 120ms ease, filter 120ms ease;
}

.pause-action-btn:active {
  transform: translateY(2px);
}

.pause-resume-btn {
  background: linear-gradient(180deg, #5ed6ff 0%, #2ba9ff 100%);
}

.pause-restart-btn {
  background: linear-gradient(180deg, #ff8ab7 0%, #ff5f9d 100%);
}

.skill-btn:hover,
.showtime-btn:hover:enabled,
.start-btn:hover {
  filter: brightness(1.12);
}

.showtime-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.skill-btn:disabled {
  opacity: 0.86;
  filter: grayscale(0.15) brightness(0.92);
}

.gauges {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding-bottom: 4px;
  position: relative;
  pointer-events: none;
}

.showtime-gauge-label {
  display: none;
}

.gauges::before {
  content: "";
  width: 88%;
  height: 62%;
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.52;
  z-index: 2;
  background: url("./assets/Sprite/TextShowTime.png") center / contain no-repeat;
}

#gameCanvas {
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
}

/* Extra CSS upscale smoothing for the scaled canvas — HQ desktop only (LQ / mobile set `.game-canvas--perf-lq` in JS). */
@media (pointer: fine) {
  #gameCanvas:not(.game-canvas--perf-lq) {
    image-rendering: smooth;
  }
}

progress {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(182, 195, 255, 0.35);
  background:
    linear-gradient(rgba(20, 27, 60, 0.82), rgba(20, 27, 60, 0.82)),
    url("./assets/Sprite/PartsFeverGauge.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

progress::-webkit-progress-bar {
  background:
    linear-gradient(rgba(20, 27, 60, 0.88), rgba(20, 27, 60, 0.88)),
    url("./assets/Sprite/PartsFeverGauge.png") center / 100% 100% no-repeat;
}

progress::-webkit-progress-value {
  background:
    linear-gradient(90deg, rgba(118, 191, 255, 0.95), rgba(238, 129, 255, 0.95)),
    url("./assets/Sprite/PartsFeverGaugeShowTime.png") center / 100% 100% no-repeat;
}

progress::-moz-progress-bar {
  background:
    linear-gradient(90deg, rgba(118, 191, 255, 0.95), rgba(238, 129, 255, 0.95)),
    url("./assets/Sprite/PartsFeverGaugeShowTime.png") center / 100% 100% no-repeat;
}

.title-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(22, 17, 34, 0.5), rgba(22, 17, 34, 0.78)),
    var(--puchi-menu-bg-image, url("./assets/Sprite/PartsPuzzleBg1.png")) center / cover no-repeat;
  backdrop-filter: blur(1.5px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 22px;
}

body.puchiball-grand-live .title-overlay {
  background-image:
    linear-gradient(rgba(22, 17, 34, 0.5), rgba(22, 17, 34, 0.78)),
    var(--puchi-menu-bg-image, url("./assets/Sprite/PartsPuzzleBg1.png"));
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}

/* Time Up: must override the Grand Live menu `background-image` above (higher specificity than `.title-overlay--time-up` alone). */
body.puchiball-grand-live .title-overlay.title-overlay--time-up {
  background: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.title-version-launcher {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + clamp(68px, 17vmin, 132px));
  left: max(14px, env(safe-area-inset-left, 0px));
  z-index: 13;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 3px 0 rgba(0, 0, 0, 0.88),
    0 7px 20px rgba(0, 0, 0, 0.82);
}

.title-version-launcher__version {
  font-size: clamp(17px, min(5.6vw, 4.7vmin), 34px);
  font-weight: 900;
  line-height: 1;
}

.title-version-launcher__row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.title-version-launcher__icon {
  width: clamp(20px, min(5.2vw, 4.6vmin), 28px);
  height: clamp(20px, min(5.2vw, 4.6vmin), 28px);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, min(3.6vw, 3.2vmin), 18px);
  font-weight: 900;
  line-height: 1;
}

.title-version-launcher__label {
  font-size: clamp(14px, min(4.2vw, 3.6vmin), 22px);
  font-weight: 800;
  line-height: 1;
}

.changelog-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(18, 12, 30, 0.56);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.changelog-overlay.hidden {
  display: none !important;
}

.changelog-panel {
  width: min(380px, 94vw);
  max-height: min(520px, 86dvh);
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 20px;
  border: 3px solid #c9a882;
  background:
    linear-gradient(180deg, rgba(255, 254, 251, 0.97) 0%, rgba(247, 240, 232, 0.98) 100%),
    url("./assets/Sprite/ResultPopFrame3.png") center / 100% 100% no-repeat;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 14px 14px 12px;
}

.changelog-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.changelog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 900;
  color: #5c3a22;
}

.changelog-close {
  height: 36px;
  padding: 0 13px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #ffb27a 0%, #e86b4a 100%);
  box-shadow: 0 3px 0 #a84330, 0 6px 12px rgba(0, 0, 0, 0.18);
}

.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.changelog-entry {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d2bc9e;
  background: rgba(255, 252, 248, 0.9);
}

.changelog-entry h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #5c3a22;
}

.changelog-entry p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: #4a3520;
}

.changelog-entry strong {
  font-weight: 800;
  color: #3d2918;
}

.changelog-entry p + p {
  margin-top: 0.4em;
}

.title-overlay.hidden {
  display: none;
}

/* Boot loading: keep the pink Start button fully hidden until title assets are ready. */
.title-overlay.title-overlay--boot-loading #startGameBtn,
.title-overlay.title-overlay--boot-loading #openProfileBtn {
  display: none !important;
}

/* During boot loading, hide wallet count until auth/progression sync is ready. */
.title-overlay.title-overlay--boot-loading .menu-wallet-row {
  display: none !important;
}

.title-loading-icon {
  display: none;
  width: clamp(44px, 8vmin, 74px);
  height: clamp(44px, 8vmin, 74px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 44%),
    url("./assets/emojis/KasuBall_825575118611677244.webp") center / contain no-repeat;
  filter:
    drop-shadow(0 0 5px rgba(0, 0, 0, 0.7))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  animation: title-loading-spin 900ms linear infinite;
  z-index: 9;
}

.title-overlay.title-overlay--boot-loading .title-loading-icon {
  display: block;
}

@keyframes title-loading-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Time Up interstitial: no dim/blur over the playfield; physics continues until Results opens. */
.title-overlay.title-overlay--time-up {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

/* Main menu: no full-bleed bg here — it lives on `.title-attract-backdrop` under the canvas so balls paint on top. */
.title-overlay.title-overlay--attract {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Top safe area is on `.title-attract-top-actions` so Discord / LB are not double-inset. */
  padding-top: 0;
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
}

/* Attract: top + bottom flex regions share space equally so title → Start sits near vertical center. */
.title-attract-top-spacer,
.title-attract-bottom {
  display: none;
  width: 100%;
  pointer-events: none;
}

.title-overlay.title-overlay--attract .title-attract-top-spacer {
  display: block;
  /* Slightly less than bottom flex so the hero (logo + Start) rides a bit higher between LB and footer. */
  flex: 0.82 1 0;
  min-height: 0;
}

/* Title attract: Discord + Leaderboards pinned to the top so the hero stays roomier on short screens. */
.title-attract-top-actions {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

.title-overlay.title-overlay--attract .title-attract-top-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(6px, 1.6vmin, 12px);
  width: 100%;
  padding-top: max(4px, env(safe-area-inset-top, 0px));
  padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px));
  padding-bottom: clamp(2px, 1vmin, 8px);
  pointer-events: auto;
  z-index: 9;
}

.title-attract-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  gap: 12px;
}

.title-overlay.title-overlay--attract .title-attract-hero {
  flex: 0 0 auto;
  gap: clamp(8px, 2.5vmin, 18px);
  pointer-events: auto;
  /* Symmetric inset keeps the column optically centered; size clears the corner wallet on both sides. */
  padding-top: 0;
  padding-inline: max(clamp(10px, 3vw, 20px), min(56px, 15vw));
  box-sizing: border-box;
  max-width: 100%;
}

.title-overlay.title-overlay--attract .title-attract-bottom {
  display: flex;
  flex: 1.18 1 0;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: clamp(2px, 0.8vmin, 8px);
  pointer-events: auto;
  /* Allow the settings panel to expand upward without clipping volume sliders. */
  overflow: visible;
  padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
  /* Keep credits/settings above the hero (#openProfileBtn uses z-index:10): reserve a foot band + gap under Profile. */
  position: relative;
  z-index: 11;
  padding-top: clamp(12px, 3.2vmin, 36px);
  min-height: clamp(104px, 19dvh, 200px);
  box-sizing: border-box;
}

.title-overlay:not(.title-overlay--attract) .title-attract-top-spacer,
.title-overlay:not(.title-overlay--attract) .title-attract-bottom,
.title-overlay:not(.title-overlay--attract) .title-attract-top-actions {
  display: none !important;
}

/* Main title (attractor): both lines sized in px/vw — not 0.48em on JP (that read as “tiny spawn”). */
.title-overlay.title-overlay--attract #overlayTitle {
  position: relative;
  z-index: 8;
  font-size: 1rem;
  letter-spacing: 2px;
  line-height: 1.08;
  color: #ffffff;
  text-shadow:
    -5px -5px 0 #0d1f4a,
    5px -5px 0 #0d1f4a,
    -5px 5px 0 #0d1f4a,
    5px 5px 0 #0d1f4a,
    0 0 4px rgba(0, 0, 0, 1),
    0 0 36px rgba(0, 0, 0, 0.95),
    0 12px 40px rgba(0, 0, 0, 0.92),
    0 6px 22px rgba(0, 0, 0, 0.88),
    0 0 48px rgba(255, 255, 255, 0.22);
}

.title-overlay.title-overlay--attract #overlayTitle .title-jp {
  font-size: clamp(26px, min(9vw, 8vmin), 86px);
  margin-bottom: clamp(4px, 1.2vmin, 10px);
}

.title-overlay.title-overlay--attract #overlayTitle .title-en {
  font-size: clamp(30px, min(10.2vw, 9vmin), 102px);
}

/* More air under the wordmark so it sits nearer the vertical midpoint between Leaderboards and Start. */
.title-overlay.title-overlay--attract .title-heading-row {
  gap: clamp(22px, 6vmin, 52px);
}

.title-overlay.title-overlay--attract #overlaySubtitle {
  position: relative;
  z-index: 8;
  margin: 0 0 clamp(6px, 2vmin, 16px);
  max-width: min(94vw, 42rem);
  font-size: clamp(14px, min(5.6vw, 4.5vmin), 44px);
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 4px 0 rgba(0, 0, 0, 0.95),
    0 5px 0 rgba(0, 0, 0, 0.88),
    0 10px 28px rgba(0, 0, 0, 0.92),
    0 18px 48px rgba(0, 0, 0, 0.88),
    0 0 40px rgba(0, 0, 0, 0.75),
    0 0 2px rgba(255, 255, 255, 0.35);
}

/* Saved coins: corner HUD on main title — not stacked in the hero column. */
.title-overlay.title-overlay--attract .menu-wallet-row {
  position: absolute;
  /* Sit below the top action strip so it does not cover Discord / Leaderboards. */
  top: calc(env(safe-area-inset-top, 0px) + clamp(68px, 17vmin, 132px));
  right: max(14px, env(safe-area-inset-right, 0px));
  left: auto;
  width: auto;
  max-width: min(92vw - 24px, 320px);
  margin: 0;
  justify-content: flex-end;
  gap: clamp(6px, 1.5vmin, 10px);
  font-size: clamp(18px, min(6.2vw, 5.5vmin), 40px);
  z-index: 12;
  color: #fffef8;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 3px 0 #2a1a00,
    0 5px 0 rgba(0, 0, 0, 0.88),
    0 8px 26px rgba(0, 0, 0, 0.9),
    0 14px 36px rgba(0, 0, 0, 0.82),
    0 0 28px rgba(0, 0, 0, 0.65);
}

.title-overlay:not(.title-overlay--attract) .title-version-launcher {
  display: none !important;
}

.title-overlay.title-overlay--attract .menu-wallet-row__icon {
  width: clamp(24px, min(6.8vw, 6vmin), 42px) !important;
  height: clamp(24px, min(6.8vw, 6vmin), 42px) !important;
  filter:
    drop-shadow(0 0 3px rgba(0, 0, 0, 1))
    drop-shadow(0 4px 0 rgba(40, 25, 0, 0.9))
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75));
}

.title-overlay.title-overlay--attract .title-heading-row__actions {
  box-sizing: border-box;
  width: 100%;
  max-width: min(420px, 94vw);
  justify-content: center;
}

.title-overlay.title-overlay--attract .start-btn {
  position: relative;
  z-index: 8;
  box-sizing: border-box;
  width: min(320px, 92vw);
  min-width: min(156px, 72vw);
  max-width: 100%;
  height: clamp(40px, min(14vw, 11vmin), 82px);
  padding: 0 clamp(12px, 3.6vw, 30px);
  font-size: clamp(18px, min(9vw, 7vmin), 34px);
  letter-spacing: 0.6px;
  color: #ffffff;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.95),
    0 4px 0 rgba(90, 20, 58, 0.88),
    0 6px 0 rgba(60, 10, 40, 0.75),
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(0, 0, 0, 0.45);
  box-shadow:
    0 10px 0 #c83f7d,
    0 20px 44px rgba(0, 0, 0, 0.48),
    0 0 0 3px rgba(255, 255, 255, 0.14);
}

.title-overlay.title-overlay--attract #openProfileBtn {
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation;
  /* Space before mode-pick / footer so credits are never driven up under this button when the column compresses. */
  margin-bottom: clamp(8px, 2.4vmin, 24px);
}

.title-overlay.title-overlay--attract .start-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 6px 0 #c83f7d,
    0 14px 32px rgba(0, 0, 0, 0.4);
}

/* Desktop attract screen: profile button is intentionally slimmer/smaller than Start. */
@media (min-width: 900px) and (pointer: fine) {
  .title-overlay.title-overlay--attract .start-btn--profile {
    width: min(100%, 250px);
    height: 34px;
    margin-bottom: 0;
    padding: 0 14px;
    font-size: 17px;
    line-height: 1;
    border-radius: 999px;
    box-shadow:
      0 6px 0 #4558c8,
      0 12px 26px rgba(0, 0, 0, 0.34),
      0 0 0 2px rgba(255, 255, 255, 0.12);
  }

  .title-overlay.title-overlay--attract .start-btn--profile:active {
    box-shadow:
      0 4px 0 #4558c8,
      0 8px 18px rgba(0, 0, 0, 0.28);
  }

  .title-overlay.title-overlay--attract .title-credits {
    margin-top: 21px;
  }
}

.title-credits {
  margin: 0 auto 8px;
  max-width: min(560px, 92vw);
  position: relative;
  z-index: 1;
  padding: 0 max(10px, env(safe-area-inset-left, 0px)) 0 max(10px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  text-align: center;
  line-height: 1.45;
  font-family: "Orbitron", var(--font-ui);
  font-size: clamp(21px, 5.1vw, 30px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.92),
    0 2px 4px rgba(0, 0, 0, 0.88),
    0 4px 10px rgba(0, 0, 0, 0.78),
    0 8px 22px rgba(0, 0, 0, 0.65),
    0 14px 36px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.title-settings-dock {
  position: relative;
  z-index: 10;
  align-self: flex-start;
  margin: 0 0 2px max(4px, env(safe-area-inset-left, 0px));
  pointer-events: auto;
}

.title-settings-dock.hidden {
  display: none !important;
}

.title-settings-toggle {
  width: 84px;
  height: 84px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(12, 10, 26, 0.7);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38);
}

.title-settings-toggle__icon {
  font-size: 40px;
  line-height: 1;
}

.title-settings-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(280px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 10, 26, 0.92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.title-settings-panel.hidden {
  display: none !important;
}

.title-settings-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 8px;
}

.title-settings-row__label {
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
}

.title-settings-slider {
  width: 100%;
}

.title-overlay.title-overlay--attract .menu-discord-row {
  max-width: min(96vw, 380px);
  margin-block: 0;
}

.maintenance-panel {
  display: none;
  width: min(96vw, 760px);
  margin: 0 auto;
  border-radius: 18px;
  /* `overflow: hidden` clipped the Kasuball hop animation off-screen on narrow phones. */
  overflow: visible;
  border: 2px solid rgba(255, 232, 140, 0.68);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.maintenance-panel.hidden {
  display: none !important;
}

.maintenance-panel:not(.hidden) {
  display: block;
  pointer-events: auto;
}

/* Full-area hit target so touches do not fall through to the title canvas (mobile). */
.title-overlay.title-overlay--maintenance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: auto;
  background: rgba(12, 8, 22, 0.35);
}

.title-overlay.title-overlay--maintenance {
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}

.title-overlay.title-overlay--maintenance #overlayTitle,
.title-overlay.title-overlay--maintenance #overlaySubtitle,
.title-overlay.title-overlay--maintenance .title-attract-top-spacer,
.title-overlay.title-overlay--maintenance .title-attract-hero,
.title-overlay.title-overlay--maintenance .title-attract-bottom,
.title-overlay.title-overlay--maintenance .title-version-launcher {
  display: none !important;
}

/* Extra specificity: title controls use `display` + z-index under `--attract`; `.hidden` does not hide `.start-btn`. */
html body .title-overlay.title-overlay--maintenance #startGameBtn,
html body .title-overlay.title-overlay--maintenance #viewLeaderboardBtn,
html body .title-overlay.title-overlay--maintenance #openProfileBtn,
html body .title-overlay.title-overlay--maintenance #menuWalletRow,
html body .title-overlay.title-overlay--maintenance .title-loading-icon,
html body .title-overlay.title-overlay--maintenance .title-menu-stage,
html body .title-overlay.title-overlay--maintenance #titleModePickPanel,
html body .title-overlay.title-overlay--maintenance .title-heading-row {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.title-overlay.title-overlay--maintenance .title-attract-top-actions {
  display: flex !important;
  position: relative;
  width: 100%;
  padding-top: max(4px, env(safe-area-inset-top, 0px));
  z-index: 70;
  pointer-events: none;
}

.title-overlay.title-overlay--maintenance .title-attract-top-actions .menu-discord-row,
.title-overlay.title-overlay--maintenance .title-attract-top-actions .menu-discord-row__actions {
  pointer-events: auto;
}

.title-overlay.title-overlay--maintenance .title-browse-lb-btn {
  display: none !important;
}

.title-overlay.title-overlay--maintenance .maintenance-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(96vw, 760px);
  margin: 0;
  z-index: 60;
  pointer-events: auto;
}

.maintenance-panel__stripes:first-child {
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}

.maintenance-panel__stripes:last-child {
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}

.maintenance-panel__stripes {
  height: 18px;
  background: repeating-linear-gradient(
    135deg,
    #111 0 20px,
    #111 20px 24px,
    #f4ce37 24px 44px,
    #f4ce37 44px 48px
  );
}

.maintenance-panel__inner {
  min-height: min(42vh, 300px);
  padding: clamp(14px, 2.2vmin, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 236, 152, 0.18), transparent 50%),
    linear-gradient(180deg, rgba(20, 18, 30, 0.96), rgba(12, 10, 20, 0.98));
}

.maintenance-panel__kasuball {
  flex-shrink: 0;
  width: clamp(110px, 22vmin, 184px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: url("./assets/emojis/KasuBallChamba_1285645846125346929.webp") center / contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.42));
  animation: maintenance-kasuball-hop 2.25s ease-in-out infinite;
}

.maintenance-panel__text {
  margin: 0;
  max-width: min(92%, 680px);
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(18px, 3.3vmin, 31px);
  line-height: 1.2;
  color: #fffbe9;
  text-align: center;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 1),
    0 3px 0 rgba(0, 0, 0, 0.72);
}

@keyframes maintenance-kasuball-hop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-14px) scale(1.04);
  }
}

.title-overlay.title-overlay--attract .menu-discord-row__line {
  font-size: clamp(11px, min(3.2vw, 2.8vmin), 15px);
}

.title-overlay.title-overlay--attract .title-attract-top-actions .title-browse-lb-btn {
  margin: 0 auto;
}

/* Short viewports: cap top spacer so the logo block sits higher and footer controls fit. */
@media (max-height: 620px) {
  .title-overlay.title-overlay--attract .title-attract-top-spacer {
    flex: 1 1 0;
    min-height: 0;
    max-height: min(20vh, 140px);
  }

  .title-overlay.title-overlay--attract .start-btn {
    width: min(320px, 92vw);
    height: clamp(36px, min(11vw, 9vmin), 66px);
    font-size: clamp(16px, min(7.2vw, 5.6vmin), 28px);
  }
}

@media (max-height: 480px) {
  .title-overlay.title-overlay--attract .title-attract-top-spacer {
    flex: 0 1 0;
    max-height: min(12vh, 80px);
  }
}

/* Stack under logo + time-up: subtitle, wallet, panels, Start (see index .title-menu-stage). */
.title-menu-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.title-heading-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: clamp(8px, 2vmin, 16px);
}

.title-heading-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Leaderboard entry: hidden on the title heading; shown when reparented into results `.results-actions`. */
#viewLeaderboardBtn {
  display: none;
}

.title-overlay.title-overlay--results #resultsPanel .results-actions #viewLeaderboardBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.title-overlay.title-overlay--results .title-heading-row {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: min(920px, 98vw);
}

.title-overlay.title-overlay--results .title-heading-row__actions {
  display: none !important;
}

.title-overlay.title-overlay--results #resultsPanel .results-actions {
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.title-overlay.title-overlay--results #resultsPanel .results-actions .start-btn {
  min-width: min(140px, 36vw);
  height: clamp(44px, 5vmin, 52px);
  padding: 0 clamp(16px, 2.4vw, 26px);
  font-size: clamp(17px, 1.9vmin, 22px);
}

.title-overlay.title-overlay--attract .title-menu-stage {
  gap: clamp(10px, 2.5vmin, 18px);
}

/* Mode grid after Start — Classic vs Grand Live (see `GRAND_LIVE_EXPERIMENT` in game.js). */
.title-overlay.title-overlay--mode-pick .title-attract-top-actions {
  display: none !important;
}

.title-overlay.title-overlay--mode-pick .title-menu-stage {
  display: none !important;
}

/* Mode pick should use the full attract stage; spacer bands create hidden clipping on some landscapes. */
.title-overlay.title-overlay--mode-pick .title-attract-top-spacer,
.title-overlay.title-overlay--mode-pick .title-attract-bottom {
  display: none !important;
}

.title-overlay.title-overlay--mode-pick {
  background: rgba(12, 10, 26, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Use full width of the game shell — no extra horizontal gutter (buttons were clipping on ~1080p). */
  padding-left: max(0px, env(safe-area-inset-left, 0px));
  padding-right: max(0px, env(safe-area-inset-right, 0px));
}

/* Mode pick lives in `.title-attract-hero`, which normally adds symmetric horizontal padding for the title — strip it here. */
.title-overlay.title-overlay--attract.title-overlay--mode-pick .title-attract-hero {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  overflow: visible;
  padding-block: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-bottom, 0px));
  padding-inline: max(0px, env(safe-area-inset-left, 0px)) max(0px, env(safe-area-inset-right, 0px));
}

/* With attract on, menu bg lives on `.title-attract-backdrop` — tint only so equipped art stays visible. */
.title-overlay.title-overlay--attract.title-overlay--mode-pick {
  background: linear-gradient(rgba(12, 10, 26, 0.22), rgba(12, 10, 26, 0.36));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.title-overlay.title-overlay--mode-pick #overlayTitle,
.title-overlay.title-overlay--mode-pick #overlaySubtitle {
  display: none !important;
}

/* Mode pick is a focused step: hide title HUD chrome (version / changelog entry). */
.title-overlay.title-overlay--mode-pick .title-version-launcher {
  display: none !important;
}

/* Ball-art credit stays on the main title only, not on the mode grid. */
.title-overlay.title-overlay--mode-pick .title-credits {
  display: none !important;
}

.title-mode-pick {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vmin, 18px);
  width: 100%;
  max-width: 100%;
  padding: 4px 0 16px;
  box-sizing: border-box;
}

.title-overlay.title-overlay--mode-pick .title-mode-pick {
  display: flex;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (orientation: landscape) and (max-height: 860px) {
  .title-overlay.title-overlay--mode-pick .title-mode-pick {
    gap: clamp(6px, 1.2vmin, 12px);
    padding-block: 4px 8px;
  }

  .title-overlay.title-overlay--mode-pick .title-mode-pick__circles {
    gap: clamp(8px, 1.6vmin, 14px);
  }

  .title-overlay.title-overlay--mode-pick .title-mode-circle--classic {
    width: min(500px, 94%);
  }

  .title-overlay.title-overlay--mode-pick .title-mode-pick__grand-cell {
    width: min(460px, 94%);
  }

  .title-overlay.title-overlay--mode-pick .title-mode-circle__label {
    font-size: clamp(1.75rem, 4.2vmin, 2.5rem);
  }

  .title-overlay.title-overlay--mode-pick .title-mode-circle__sub {
    font-size: clamp(1.2rem, 3.1vmin, 1.75rem);
  }
}

.title-mode-pick__hint {
  margin: 0;
  font-size: clamp(1.95rem, 6.1vmin, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Classic above Grand, both centered on the same vertical axis. */
.title-mode-pick__circles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.5vmin, 20px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.title-mode-pick__main-modes {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vmin, 16px);
  width: 100%;
}

/* Classic + Grand must always stack: the shell is portrait-width even when the viewport is “landscape”. */
.title-overlay.title-overlay--mode-pick .title-mode-pick__main-modes {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

/* Full-width row so Grand can be centered under Classic; inner cell is only as wide as the Grand pill. */
.title-mode-pick__grand-centerer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.title-mode-pick__grand-cell {
  position: relative;
  width: min(528px, 100%);
  max-width: 100%;
  flex: 0 1 auto;
}

.title-grand-live-info-btn {
  position: absolute;
  right: clamp(2px, 1.2vmin, 10px);
  bottom: clamp(2px, 1.2vmin, 10px);
  z-index: 2;
  box-sizing: border-box;
  width: clamp(40px, 10vmin, 52px);
  height: clamp(40px, 10vmin, 52px);
  margin: 0;
  padding: 0;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: linear-gradient(165deg, #6bb4ff 0%, #2a6fd4 55%, #1a4a9e 100%);
  color: #fffef8;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    0 4px 14px rgba(0, 24, 72, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 140ms ease, filter 140ms ease;
}

.title-grand-live-info-btn__mark {
  display: block;
  font-family: Fredoka, "Nunito", var(--font-display), system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.35rem, 4.2vmin, 1.9rem);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 20, 56, 0.75);
}

.title-grand-live-info-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.06);
}

.title-grand-live-info-btn:active {
  transform: scale(0.96);
}

/*
 * Root-level overlay (sibling to `.llr-page-shell`): full browser viewport, not the letterboxed
 * `.board-wrap` — avoids overflow clipping and keeps the infographic visible on all aspect ratios.
 */
.grand-live-info-overlay {
  --grand-info-pad-t: max(10px, env(safe-area-inset-top, 0px));
  --grand-info-pad-r: env(safe-area-inset-right, 0px);
  --grand-info-pad-b: max(16px, env(safe-area-inset-bottom, 0px));
  --grand-info-pad-l: env(safe-area-inset-left, 0px);
  /* Usable box inside padding — drives image max so it always fits the real viewport. */
  --grand-info-max-w: calc(100vw - var(--grand-info-pad-l) - var(--grand-info-pad-r));
  --grand-info-max-h: calc(100dvh - var(--grand-info-pad-t) - var(--grand-info-pad-b));
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  padding: var(--grand-info-pad-t) var(--grand-info-pad-r) var(--grand-info-pad-b) var(--grand-info-pad-l);
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(10, 8, 22, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.grand-live-info-overlay.hidden {
  display: none !important;
}

/* Full-viewport overlay must not sit above maintenance lockout (can leak after mode-pick / tutorial). */
body.puchiball-maintenance-lockout .grand-live-info-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.grand-live-info-overlay__img {
  display: block;
  flex: 0 1 auto;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  /* Fit inside padded overlay at any resolution; wide desktop gutters count as usable width. */
  max-width: min(1680px, var(--grand-info-max-w));
  max-height: min(var(--grand-info-max-h), calc(100svh - var(--grand-info-pad-t) - var(--grand-info-pad-b)));
  object-fit: contain;
  object-position: center;
  border-radius: clamp(12px, 2.2vmin, 22px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  -webkit-user-drag: none;
}


.title-mode-circle {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 140ms ease, filter 140ms ease;
}


/* BtnEdit.png native 191×80 — scaled ~1.5×; width caps to the shell so 1080p columns are not clipped. */
.title-mode-circle--classic {
  width: min(572px, 100%);
  max-width: 100%;
  aspect-ratio: 191 / 80;
  height: auto;
  border-radius: 999px;
  overflow: hidden;
}

/* BtnBg #4170120.png native 176×146 — width follows shell; `.title-mode-pick__grand-cell` also caps at min(528px,100%). */
.title-mode-circle--grand {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 176 / 146;
  height: auto;
  border-radius: 999px;
  overflow: hidden;
}

.title-mode-circle__plate {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.title-mode-circle--classic .title-mode-circle__plate {
  background-image: url("./assets/Sprite/BtnEdit.png");
}

/* File on disk is `BtnBg #4170120.png` — # must be percent-encoded or the URL stops at the fragment. */
.title-mode-circle--grand .title-mode-circle__plate {
  background-image: url("./assets/Sprite/BtnBg%20%234170120.png");
}


.title-mode-circle__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 14%;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}

.title-mode-circle--grand .title-mode-circle__text {
  padding: 0 12%;
}

.title-mode-circle__label {
  font-family: Fredoka, "Nunito", var(--font-display), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.34rem, 6.5vmin, 3rem);
  line-height: 1.08;
}

.title-mode-circle--classic .title-mode-circle__label {
  color: #2c1404;
  text-shadow:
    0 0 1px #fff,
    0 0 4px rgba(255, 255, 255, 0.95),
    0 1px 0 #fff,
    0 2px 3px rgba(80, 40, 0, 0.45);
}

.title-mode-circle--grand .title-mode-circle__label {
  font-size: clamp(2.64rem, 7.4vmin, 3.35rem);
  color: #fffef8;
  text-shadow:
    0 0 2px rgba(0, 24, 56, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 2px 6px rgba(0, 0, 0, 0.55);
}

.title-mode-circle__sub {
  margin-top: 3px;
  font-size: clamp(1.74rem, 4.9vmin, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.title-mode-circle--classic .title-mode-circle__sub {
  color: rgba(38, 20, 6, 0.92);
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.9),
    0 1px 1px rgba(255, 255, 255, 0.75);
}

.title-mode-circle--grand .title-mode-circle__sub {
  color: rgba(255, 252, 240, 0.95);
  text-shadow:
    0 0 2px rgba(0, 20, 48, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.65);
}

.title-mode-circle--classic:hover,
.title-mode-circle--grand:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.05) saturate(1.04);
}

.title-mode-circle--classic:active,
.title-mode-circle--grand:active {
  transform: translateY(0) scale(0.98);
}

.title-mode-pick__profile {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(148px, 42vw);
  min-height: 46px;
  margin-top: 10px;
  padding: 10px 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms ease, filter 120ms ease;
}

.title-mode-pick__profile-plate {
  position: absolute;
  inset: -2px -6px;
  z-index: 0;
  background: url("./assets/Sprite/BtnMaru.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

.title-mode-pick__profile-label {
  position: relative;
  z-index: 1;
  font-family: Fredoka, "Nunito", var(--font-display), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(0.92rem, 2.4vmin, 1.05rem);
  color: #4a3018;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.65);
}

.title-mode-pick__profile:hover {
  transform: scale(1.04);
  filter: brightness(1.06);
}

.title-mode-pick__profile:active {
  transform: scale(0.98);
}

/* Grand Live: fill the viewport shell; JS sets a 16:9 `--world-w` / `--world-h` logical stage. */
body.puchiball-grand-live {
  height: 100dvh;
}

body.puchiball-grand-live .llr-page-shell {
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  /* Letterbox gutters: match page chrome + optional equipped art at true viewport scale. */
  background-color: #171335;
  background-image:
    linear-gradient(rgba(22, 17, 34, 0.22), rgba(22, 17, 34, 0.38)),
    var(--puchi-grand-shell-bg-image, none),
    radial-gradient(circle at 50% 15%, rgba(108, 187, 255, 0.35), transparent 40%),
    radial-gradient(circle at 15% 82%, rgba(250, 159, 204, 0.26), transparent 40%),
    linear-gradient(180deg, #192046 0%, #171335 42%, #21123a 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover, cover, cover, cover, cover;
  /* Equipped layer: viewport-fixed so gutters + stage share one continuous crop (ultrawide letterbox). */
  background-attachment: scroll, fixed, scroll, scroll, scroll;
}

body.puchiball-grand-live .llr-page-shell > .app {
  flex: 0 0 auto;
  width: min(100vw, calc(100dvh * var(--world-w) / var(--world-h)));
  height: min(100dvh, calc(100vw * var(--world-h) / var(--world-w)));
  max-width: min(100vw, calc(100dvh * var(--world-w) / var(--world-h)));
  max-height: min(100dvh, calc(100vw * var(--world-h) / var(--world-w)));
  min-height: 0;
  align-self: center;
}

body.puchiball-grand-live .app {
  width: min(100vw, calc(100dvh * var(--world-w) / var(--world-h))) !important;
  max-width: min(100vw, calc(100dvh * var(--world-w) / var(--world-h))) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: min(100dvh, calc(100vw * var(--world-h) / var(--world-w))) !important;
}

body.puchiball-grand-live .board-wrap {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  border-radius: 10px;
}

/* Grand Live, not fullscreen: stage at top of shell, horizontally centered (column shell: align-self flex-start was left-aligning). */
@media (orientation: landscape) {
  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .llr-page-shell {
    justify-content: flex-start;
    align-items: center;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .llr-page-shell > .app {
    align-self: center;
    width: min(100vw, calc(100dvh * var(--world-w) / var(--world-h))) !important;
    height: min(100dvh, calc(100vw * var(--world-h) / var(--world-w))) !important;
    max-width: 100vw;
    max-height: 100dvh;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .hud-overlay {
    margin-bottom: calc(-12px * var(--grand-ui-scale, 1));
  }
}

body.puchiball-grand-live.puchiball-grand-live-in-fullscreen .llr-page-shell {
  justify-content: center;
}

body.puchiball-grand-live.puchiball-grand-live-in-fullscreen .llr-page-shell > .app {
  align-self: center;
  width: min(100vw, calc(100dvh * var(--world-w) / var(--world-h))) !important;
  max-width: min(100vw, calc(100dvh * var(--world-w) / var(--world-h))) !important;
  height: min(100dvh, calc(100vw * var(--world-h) / var(--world-w))) !important;
}

/* Browser fullscreen + modal menu: pin the overlay to the viewport so dim + menu BG cover the full screen (not only the 16:9 board) and flex centering uses the real display. */
body.puchiball-grand-live.puchiball-grand-live-in-fullscreen .board-wrap--menu-open #titleOverlay.title-overlay {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
  z-index: 24;
  justify-content: center;
  align-items: center;
}

body.puchiball-grand-live.puchiball-grand-live-in-fullscreen
  .board-wrap--menu-open
  #titleOverlay.title-overlay--item-select,
body.puchiball-grand-live.puchiball-grand-live-in-fullscreen
  .board-wrap--menu-open
  #titleOverlay.title-overlay--skill-select {
  justify-content: center;
  align-items: center;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}

body.puchiball-grand-live.puchiball-grand-live-in-fullscreen .hud-overlay {
  margin-bottom: 0;
}

@media (pointer: coarse) {
  /* Fullscreen touch: tuck timer toward the corner; nudge playfield up slightly under the score. */
  body.puchiball-grand-live.puchiball-grand-live-in-fullscreen .hud-time {
    margin-left: calc(10px * var(--grand-ui-scale, 1));
  }

  body.puchiball-grand-live.puchiball-grand-live-in-fullscreen #gameCanvas {
    transform: translateY(calc(-2px - min(2.2vmin, 18px)));
  }

  /* Side action buttons: sit a bit lower in the letterboxed strip so they read centered vs the stage. */
  body.puchiball-grand-live.puchiball-grand-live-in-fullscreen .controls .skill-btn,
  body.puchiball-grand-live.puchiball-grand-live-in-fullscreen .controls .shuffle-btn {
    transform: translateY(clamp(14px, 3.2vmin, 26px));
    margin-bottom: min(calc(28px * var(--grand-ui-scale, 1)), 30px, 5.5vmin);
  }

  body.puchiball-grand-live.puchiball-grand-live-in-fullscreen .shuffle-btn:not(:disabled):active {
    transform: translateY(calc(clamp(14px, 3.2vmin, 26px) + 2px));
  }
}

/* Grand Live: scale core HUD readouts with the *rendered* stage so they stay on-screen. */
body.puchiball-grand-live .hud {
  min-height: calc(88px * var(--grand-ui-scale));
}

body.puchiball-grand-live .hud-overlay {
  padding: max(calc(6px * var(--grand-ui-scale)), env(safe-area-inset-top, 0px))
    calc(10px * var(--grand-ui-scale))
    calc(4px * var(--grand-ui-scale));
}

body.puchiball-grand-live .time-pie {
  width: min(calc(110px * var(--grand-ui-scale)), 102px, 15vmin);
  height: min(calc(110px * var(--grand-ui-scale)), 102px, 15vmin);
}

body.puchiball-grand-live .time-pie > span {
  font-size: min(calc(68px * var(--grand-ui-scale)), 62px, 9vmin);
}

body.puchiball-grand-live .score-label {
  font-size: min(calc(50px * var(--grand-ui-scale)), 44px, 5.6vmin);
}

body.puchiball-grand-live .hud-score #scoreValue {
  font-size: min(calc(58px * var(--grand-ui-scale)), 52px, 6.5vmin);
}

body.puchiball-grand-live progress {
  height: min(calc(44px * var(--grand-ui-scale)), 40px, 5.5vmin);
}

/* Grand Live HUD alignment on desktop/wide layouts. */
body.puchiball-grand-live .hud-time {
  margin-left: calc(66px * var(--grand-ui-scale));
}

body.puchiball-grand-live .hud-score {
  transform: translateY(0);
}

body.puchiball-grand-live .hud-coins {
  font-size: min(calc(32px * var(--grand-ui-scale)), 28px, 3.6vmin);
}

body.puchiball-grand-live .hud-coins__icon {
  width: min(calc(36px * var(--grand-ui-scale)), 32px, 4.2vmin);
  height: min(calc(36px * var(--grand-ui-scale)), 32px, 4.2vmin);
}

body.puchiball-grand-live .pause-btn {
  width: min(calc(102px * var(--grand-ui-scale)), 92px, 13vmin);
  height: min(calc(102px * var(--grand-ui-scale)), 92px, 13vmin);
}

body.puchiball-grand-live .hud-pause {
  margin-right: calc(30px * var(--grand-ui-scale));
}

body.puchiball-grand-live .controls-overlay {
  padding: calc(6px * var(--grand-ui-scale)) calc(10px * var(--grand-ui-scale)) calc(12px * var(--grand-ui-scale));
}

/* Grand Live HUD spacing: keep Show Time meter low, move enlarged action buttons above it. */
body.puchiball-grand-live .controls .skill-btn,
body.puchiball-grand-live .controls .shuffle-btn {
  width: min(calc(264px * var(--grand-ui-scale)), 204px, 22vmin);
  height: min(calc(264px * var(--grand-ui-scale)), 204px, 22vmin);
  margin-bottom: min(calc(78px * var(--grand-ui-scale)), 64px, 10vmin);
}

body.puchiball-grand-live .skill-btn::before {
  /* ~22px on a 264px design width; % tracks whichever min() caps the button (vmin/vw/px) in fullscreen. */
  inset: clamp(10px, 8.33%, 28px);
  -webkit-mask-image:
    radial-gradient(circle at center, transparent 46%, #000 48%, #000 64%, transparent 66%),
    conic-gradient(from -90deg, #000 calc(var(--skill-fill, 0) * 1%), transparent 0);
  mask-image:
    radial-gradient(circle at center, transparent 46%, #000 48%, #000 64%, transparent 66%),
    conic-gradient(from -90deg, #000 calc(var(--skill-fill, 0) * 1%), transparent 0);
}

body.puchiball-grand-live .skill-btn::after {
  background-size: 58% 58%;
}

body.puchiball-grand-live .controls .gauges {
  padding-bottom: 2px;
}

@media (max-width: 980px) {
  body.puchiball-grand-live .hud-time {
    margin-left: 0;
  }

  body.puchiball-grand-live .pause-btn {
    width: min(calc(84px * var(--grand-ui-scale)), 80px, 12vmin);
    height: min(calc(84px * var(--grand-ui-scale)), 80px, 12vmin);
  }

  body.puchiball-grand-live .hud-coins {
    font-size: calc(22px * var(--grand-ui-scale));
  }

  body.puchiball-grand-live .hud-coins__icon {
    width: calc(26px * var(--grand-ui-scale));
    height: calc(26px * var(--grand-ui-scale));
  }

  body.puchiball-grand-live .skill-btn::after {
    background-size: 56% 56%;
  }

  body.puchiball-grand-live .hud-pause {
    margin-right: 0;
  }

  body.puchiball-grand-live .controls .skill-btn,
  body.puchiball-grand-live .controls .shuffle-btn {
    width: min(calc(220px * var(--grand-ui-scale)), 188px, 30vmin, 40vw);
    height: min(calc(220px * var(--grand-ui-scale)), 188px, 30vmin, 40vw);
    max-width: 188px;
    max-height: 188px;
    margin-bottom: min(calc(52px * var(--grand-ui-scale)), 52px, 8vmin);
  }
}

@media screen and (max-width: 900px) and (orientation: portrait) {
  body.puchiball-grand-live .llr-page-shell > .app {
    transform: rotate(90deg);
    transform-origin: center center;
    width: 100dvh;
    height: 100dvw;
    max-width: 100dvh;
    max-height: 100dvw;
  }

  /* `background-attachment: fixed` is unreliable inside transformed ancestors — revert to per-box cover. */
  body.puchiball-grand-live .llr-page-shell {
    background-attachment: scroll, scroll, scroll, scroll, scroll;
  }

  body.puchiball-grand-live .title-attract-backdrop {
    background-attachment: scroll, scroll;
  }

  body.puchiball-grand-live .gameplay-backdrop {
    background-attachment: scroll;
  }

  body.puchiball-grand-live .title-overlay {
    background-attachment: scroll, scroll;
  }

  /* Rotated `.app` creates a fixed-position containing block — keep the menu overlay inside the stage. */
  body.puchiball-grand-live.puchiball-grand-live-in-fullscreen .board-wrap--menu-open #titleOverlay.title-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
  }
}

/* Grand Live, not fullscreen: HUD fixed to viewport corners (safe areas); Show Time gauge bottom-center. */
@media ((pointer: coarse) and (orientation: landscape)),
  ((orientation: landscape) and (max-height: 640px)),
  ((pointer: coarse) and (orientation: landscape) and (max-width: 1100px) and (max-height: 720px)) {
  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .hud {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    min-height: 0;
    padding-inline: 0;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .hud-time {
    position: fixed;
    top: max(4px, env(safe-area-inset-top, 0px));
    left: max(4px, env(safe-area-inset-left, 0px));
    transform: none;
    margin: 0;
    z-index: 60;
    pointer-events: none;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .hud-right {
    position: fixed;
    top: max(4px, env(safe-area-inset-top, 0px));
    right: max(4px, env(safe-area-inset-right, 0px));
    transform: none;
    margin: 0;
    z-index: 60;
    pointer-events: none;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .hud-score {
    position: fixed;
    top: max(calc(env(safe-area-inset-top, 0px) + 2px), 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 55;
    flex: none;
    min-width: 0;
    pointer-events: none;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .controls .skill-btn,
  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .controls .shuffle-btn {
    position: fixed;
    width: min(calc(186px * var(--grand-ui-scale, 1)), 32vmin, 46vw);
    height: min(calc(186px * var(--grand-ui-scale, 1)), 32vmin, 46vw);
    max-width: 186px;
    max-height: 186px;
    margin: 0;
    z-index: 60;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .controls .skill-btn {
    left: max(4px, env(safe-area-inset-left, 0px));
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
    transform: none;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .controls .shuffle-btn {
    right: max(4px, env(safe-area-inset-right, 0px));
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
    transform: none;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .controls .gauges {
    position: fixed;
    left: 50%;
    bottom: 0;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    transform: translateX(-50%);
    width: clamp(180px, 72vw, 320px);
    max-width: calc(100vw - 12px);
    z-index: 58;
    pointer-events: auto;
    padding-top: 0;
    gap: 0;
    justify-content: flex-end;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .controls .gauges::before {
    bottom: 0;
    height: 48%;
    opacity: 0.46;
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .controls .gauges progress {
    height: min(34px, 5.2vmin);
    /* Keep the bar near the Show Time label without pushing it below the viewport on thin layouts. */
    transform: translateY(clamp(8px, 2.2vmin, 20px));
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .time-pie {
    width: min(calc(102px * var(--grand-ui-scale, 1)), 104px, 21vmin);
    height: min(calc(102px * var(--grand-ui-scale, 1)), 104px, 21vmin);
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .time-pie > span {
    font-size: min(calc(62px * var(--grand-ui-scale, 1)), 58px, 8.5vmin);
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .pause-btn {
    width: min(calc(90px * var(--grand-ui-scale, 1)), 88px, 12.5vmin);
    height: min(calc(90px * var(--grand-ui-scale, 1)), 88px, 12.5vmin);
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .showtime-bonus-hud {
    top: calc(env(safe-area-inset-top, 0px) + clamp(44px, 5vmin + 18px, 72px));
    width: min(300px, 90%);
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .showtime-bonus-hud .showtime-bonus-value {
    font-size: clamp(22px, 4vmin, 32px);
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .skill-btn::before {
    inset: clamp(9px, 7.5%, 16px);
  }

  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .skill-btn::after {
    background-size: 54% 54%;
  }
}

/* Coarse / short landscape: big numeric overlays (3–2–1, time up, Show Time bonus) read huge vs viewport width. */
@media ((pointer: coarse) and (orientation: landscape)),
  ((orientation: landscape) and (max-height: 640px)),
  ((pointer: coarse) and (orientation: landscape) and (max-width: 1100px) and (max-height: 720px)) {
  .end-round-countdown {
    font-size: clamp(38px, 10vmin, 92px);
    -webkit-text-stroke-width: 1.1px;
  }

  .pause-overlay.pause-overlay--countdown-only .pause-countdown {
    font-size: clamp(28px, 8.5vmin, 48px);
  }

  .time-up-graphic {
    max-width: min(240px, 76vw);
  }

  .title-overlay.title-overlay--time-up #overlayTitle {
    font-size: clamp(20px, 5vmin, 38px);
    letter-spacing: 0.6px;
  }

  .showtime-bonus-hud {
    width: min(280px, 86%);
    top: calc(env(safe-area-inset-top, 0px) + clamp(70px, 7.5vmin + 40px, 96px));
  }

  .showtime-bonus-hud .showtime-bonus-value {
    font-size: clamp(20px, 4.8vmin, 28px);
  }

  .showtime-bonus-label-img {
    max-width: min(200px, 78vw);
  }

  .round-intro-overlay__img {
    max-width: min(300px, 82vw);
  }
}

/* Item/skill: logo row at top; everything below centered in the space down to the bottom of the stage. */
.title-overlay.title-overlay--skill-select,
.title-overlay.title-overlay--item-select {
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  /* Extra bottom room avoids clipping of confirm controls on short screens. */
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  /* Near-edge gutters: single-digit px on most screens. */
  padding-left: max(clamp(2px, 0.7vmin, 8px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(2px, 0.7vmin, 8px), env(safe-area-inset-right, 0px));
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.title-overlay.title-overlay--skill-select .title-attract-hero,
.title-overlay.title-overlay--item-select .title-attract-hero {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.title-overlay.title-overlay--skill-select #overlayTitle,
.title-overlay.title-overlay--item-select #overlayTitle {
  display: none;
}

.title-overlay.title-overlay--skill-select #overlayTitle .title-jp,
.title-overlay.title-overlay--item-select #overlayTitle .title-jp {
  margin-bottom: 0;
}

.title-overlay.title-overlay--skill-select #overlaySubtitle:empty,
.title-overlay.title-overlay--item-select #overlaySubtitle:empty {
  display: none;
  margin: 0;
}

.title-overlay.title-overlay--skill-select #overlaySubtitle:not(:empty),
.title-overlay.title-overlay--item-select #overlaySubtitle:not(:empty) {
  margin: 0 0 4px;
  font-size: 0.92rem;
  line-height: 1.3;
}

.title-overlay.title-overlay--skill-select .title-menu-stage,
.title-overlay.title-overlay--item-select .title-menu-stage {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  /* Ultra-thin side gutters: almost flush to play area edges. */
  padding-inline: clamp(1px, 0.5vmin, 6px);
  padding-top: clamp(10px, 2.4vmin, 20px);
  padding-bottom: clamp(18px, 4vmin, 36px);
  overflow: visible;
  container-type: size;
  container-name: menu-stage;
}

/* ~400px-wide card; scale the whole panel uniformly — inner layout stays default. */
.title-overlay.title-overlay--skill-select #skillSelectPanel.skill-select-panel,
.title-overlay.title-overlay--item-select #itemSelectPanel.skill-select-panel {
  flex: 0 0 auto;
  width: min(440px, calc(100% - clamp(4px, 1vmin, 10px)));
  max-width: 100%;
  transform-origin: center center;
  overflow: hidden;
}

.title-overlay.title-overlay--item-select #itemSelectPanel.skill-select-panel {
  max-height: min(86vh, 720px);
}


@container menu-stage (min-width: 0px) {
  /* Scale whole ~400px card; reserved cqi/cqb slack = gap to playfield after transform. */
  .title-overlay.title-overlay--skill-select #skillSelectPanel.skill-select-panel {
    transform: scale(
      clamp(
        0.68,
        min(
          2.1,
          (100cqi - clamp(4px, 1vmin, 10px)) / 400,
          (100cqb - clamp(48px, 10vmin, 92px)) / 560
        ),
        2.1
      )
    );
  }

  /* Grand Live: wide skill card — scale from ~1040×590 design so one row fits without horizontal scroll. */
  body.puchiball-grand-live .title-overlay.title-overlay--skill-select #skillSelectPanel.skill-select-panel {
    width: min(1040px, calc(100cqi - clamp(8px, 1vmin, 18px)));
    max-width: 100%;
    transform: scale(
      clamp(
        0.58,
        min(
          1.08,
          (100cqi - clamp(8px, 1vmin, 18px)) / 1040,
          (100cqb - clamp(48px, 10vmin, 96px)) / 590
        ),
        1.08
      )
    );
  }

  .title-overlay.title-overlay--item-select #itemSelectPanel.skill-select-panel {
    transform: scale(
      clamp(
        0.68,
        min(
          2.1,
          (100cqi - clamp(4px, 1vmin, 10px)) / 400,
          (100cqb - clamp(48px, 10vmin, 92px)) / 640
        ),
        2.1
      )
    );
  }

  /* Background shop needs a little extra shrink room on narrow/tall mobile Grand Live layouts. */
  .title-overlay.title-overlay--item-select #itemSelectPanel.item-select-panel--bg-shop {
    transform: scale(
      clamp(
        0.62,
        min(
          1.85,
          (100cqi - clamp(4px, 1vmin, 10px)) / 420,
          (100cqb - clamp(56px, 12vmin, 110px)) / 740
        ),
        1.85
      )
    );
  }

  /**
   * Browser fullscreen on phones: fixed overlay + safe areas leaves less vertical cqb than the
   * default 590px design budget assumes — shrink the wide skill card a bit more so it does not clip.
   */
  @media (pointer: coarse) {
    body.puchiball-grand-live.puchiball-grand-live-in-fullscreen
      .title-overlay.title-overlay--skill-select
      #skillSelectPanel.skill-select-panel {
      transform: scale(
        clamp(
          0.48,
          min(
            0.9,
            (100cqi - clamp(8px, 1vmin, 18px)) / 1040,
            (100cqb - clamp(76px, 16vmin, 132px)) / 620
          ),
          0.9
        )
      );
    }

    body.puchiball-grand-live.puchiball-grand-live-in-fullscreen
      .title-overlay.title-overlay--skill-select
      .skill-choice {
      min-height: clamp(118px, 21cqb, 176px);
      padding: clamp(6px, 0.95cqi, 12px) clamp(4px, 0.65cqi, 9px);
    }
  }
}

/* Hide main start control while item or skill panels use their own actions. */
.title-overlay.title-overlay--skill-select #startGameBtn,
.title-overlay.title-overlay--item-select #startGameBtn,
.title-overlay.title-overlay--skill-select #openProfileBtn,
.title-overlay.title-overlay--item-select #openProfileBtn,
.title-overlay.title-overlay--results #openProfileBtn,
.title-overlay.title-overlay--time-up #openProfileBtn {
  display: none;
}

.time-up-graphic {
  display: block;
  max-width: min(380px, 92vw);
  height: auto;
  margin: 0 auto 6px;
  image-rendering: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

/* Must pair with .hidden — this project has no global `.hidden` rule. */
.time-up-graphic.hidden {
  display: none !important;
}

@keyframes time-up-graphic-bounce-in {
  0% {
    transform: scale(0.36);
    opacity: 0;
  }
  58% {
    transform: scale(1.07);
    opacity: 1;
  }
  78% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.time-up-graphic.time-up-graphic--bounce-in {
  animation: time-up-graphic-bounce-in 0.52s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .time-up-graphic.time-up-graphic--bounce-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.round-intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(10, 6, 22, 0.38);
}

.round-intro-overlay.hidden {
  display: none !important;
}

.round-intro-overlay__img {
  max-width: min(400px, 94vw);
  width: auto;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
}

.showtime-bonus-label-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* When the Show Time label art is visible, tuck the rainbow bonus count right under it. */
.showtime-bonus-label-img:not(.hidden) + .showtime-bonus-value {
  margin-top: -10px;
}

.showtime-bonus-label-img.hidden {
  display: none !important;
}

/* Time-up beat before results: headline only, no primary button yet. */
.title-overlay.title-overlay--time-up .start-btn {
  display: none;
}

.title-overlay.title-overlay--time-up #overlaySubtitle:empty {
  display: none;
}

/* Results / time-up: title sits above the cream card on the blurred field — keep it light. */
.title-overlay.title-overlay--results #overlayTitle {
  color: #fffefb;
  text-align: center;
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(22px, 2.8vw, 44px);
  text-shadow:
    0 1px 0 rgba(40, 28, 62, 0.45),
    0 2px 14px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(143, 211, 255, 0.32);
}

.title-overlay.title-overlay--results #overlaySubtitle {
  color: #dce6ff;
  font-weight: 700;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}

.title-overlay.title-overlay--results #overlaySubtitle:empty {
  display: none !important;
  margin: 0;
  min-height: 0;
}

.title-overlay.title-overlay--results {
  gap: 10px;
}

@media (min-width: 1101px) and (min-height: 761px) {
  .title-overlay.title-overlay--results {
    justify-content: center;
    align-items: center;
  }

  .title-overlay.title-overlay--results #resultsPanel.results-panel {
    margin-left: auto;
    margin-right: auto;
  }
}

#resultsDiscordRow {
  display: none;
}

.title-overlay.title-overlay--results #resultsDiscordRow {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  display: flex;
  width: min(560px, calc(100vw - 156px));
  max-width: calc(100vw - 20px);
  margin: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(24, 16, 48, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Results: saved coins in the top-right (same role as on the attract menu). */
.title-overlay.title-overlay--results .menu-wallet-row {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  left: auto;
  margin: 0;
  width: auto;
  max-width: min(92vw - 24px, 340px);
  justify-content: flex-end;
  gap: clamp(6px, 1.4vmin, 10px);
  font-size: clamp(18px, min(5.4vw, 4.8vmin), 40px);
  z-index: 12;
  pointer-events: none;
  color: #fffef8;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 3px 0 #2a1a00,
    0 5px 0 rgba(0, 0, 0, 0.88),
    0 8px 26px rgba(0, 0, 0, 0.9),
    0 14px 36px rgba(0, 0, 0, 0.82);
}

.title-overlay.title-overlay--results .menu-wallet-row__icon {
  width: clamp(22px, min(6vw, 5.2vmin), 40px) !important;
  height: clamp(22px, min(6vw, 5.2vmin), 40px) !important;
  filter:
    drop-shadow(0 0 3px rgba(0, 0, 0, 1))
    drop-shadow(0 4px 0 rgba(40, 25, 0, 0.9))
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75));
}

#overlayTitle {
  margin: 0;
  width: auto;
  height: auto;
  font-size: clamp(34px, 7.2vw, 54px);
  font-weight: 900;
  font-family: var(--font-ui);
  letter-spacing: 1.2px;
  color: #ffffff;
  text-transform: none;
  text-shadow:
    -2px -2px 0 #244cb2,
    2px -2px 0 #244cb2,
    -2px 2px 0 #244cb2,
    2px 2px 0 #244cb2,
    0 0 10px rgba(143, 211, 255, 0.85);
}

#overlayTitle .title-jp {
  display: block;
  font-size: 0.48em;
  font-family: var(--font-jp);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

#overlayTitle .title-en {
  display: block;
}

#overlaySubtitle {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  color: #d5dcff;
}

/* Shared framed “menu card” (results + skill pick). */
.results-panel,
.skill-select-panel {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 auto 10px;
  padding: 0;
  border-radius: 22px;
  border: 3px solid #c9a882;
  background:
    linear-gradient(180deg, rgba(255, 254, 251, 0.97) 0%, rgba(247, 240, 232, 0.98) 100%),
    url("./assets/Sprite/ResultPopFrame3.png") center / 100% 100% no-repeat;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
  align-self: center;
}

.results-panel {
  width: min(400px, 94vw);
}

.skill-select-panel {
  width: min(400px, 94vw);
}

.title-overlay.title-overlay--results .results-panel {
  width: min(480px, min(94vw, 52rem));
}

@media (min-width: 1280px) {
  .title-overlay.title-overlay--results .results-panel {
    width: min(560px, 58vw);
  }

  .title-overlay.title-overlay--results #overlayTitle {
    font-size: clamp(28px, 2.4vw, 52px);
  }

  .title-overlay.title-overlay--results .results-hero__value {
    font-size: clamp(2.2rem, 2.8vw, 3.1rem);
  }
}

@media (min-width: 1680px) {
  .title-overlay.title-overlay--results .results-panel {
    width: min(640px, 48vw);
  }
}

.results-panel__body,
.skill-select-panel__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skill-select-panel__body--item {
  height: 100%;
  min-height: 0;
}

.item-select-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.results-hero {
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(92, 58, 34, 0.12);
}

.results-hero__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fffefb;
  text-shadow:
    0 2px 0 #5a3d28,
    0 -2px 0 #5a3d28,
    2px 0 0 #5a3d28,
    -2px 0 0 #5a3d28,
    1.5px 1.5px 0 #5a3d28,
    -1.5px 1.5px 0 #5a3d28,
    1.5px -1.5px 0 #5a3d28,
    -1.5px -1.5px 0 #5a3d28;
}

.results-hero__value {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 7vw, 2.85rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #5c3a22;
}

.results-list {
  background: linear-gradient(180deg, #f2e8da 0%, #e8dcc8 100%);
  border-radius: 16px;
  border: 1px solid #d2bc9e;
  padding: 12px 14px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.profile-score-list {
  padding: 10px 12px;
}

.profile-score-list__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  color: #5c3a22;
  text-align: left;
}

.profile-score-list__rows {
  max-height: 180px;
  overflow-y: auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(92, 58, 34, 0.15);
}

.profile-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  color: #4a3520;
  border-bottom: 1px solid rgba(92, 58, 34, 0.12);
}

.profile-score-row:last-child {
  border-bottom: none;
}

.profile-score-row--head {
  justify-content: flex-start;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6a5540;
  background: rgba(255, 255, 255, 0.55);
}

.profile-score-row--empty {
  justify-content: center;
  font-size: 12px;
  color: #7a5a40;
  font-weight: 700;
}

.results-panel.hidden,
.skill-select-panel.hidden {
  display: none;
}

.skill-confirm-btn {
  align-self: center;
  min-width: 160px;
  height: 50px;
  margin-top: 4px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 900;
  font-family: var(--font-ui);
  color: #fff;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  background: linear-gradient(180deg, #5ed6ff 0%, #2ba9ff 100%);
  box-shadow: 0 4px 0 #1f7aa8, 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: transform 120ms ease, filter 120ms ease;
}

.skill-confirm-btn:hover {
  filter: brightness(1.08);
}

.skill-confirm-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1f7aa8, 0 4px 10px rgba(0, 0, 0, 0.18);
}

.skill-confirm-btn--secondary {
  background: linear-gradient(180deg, #c4b8ff 0%, #8b7bdc 100%);
  box-shadow: 0 4px 0 #5a4a9a, 0 8px 16px rgba(0, 0, 0, 0.18);
}

.skill-confirm-btn--secondary:active {
  box-shadow: 0 2px 0 #5a4a9a, 0 4px 10px rgba(0, 0, 0, 0.16);
}

.menu-wallet-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #ffe566;
  text-shadow:
    0 1px 0 #6a4a10,
    0 0 10px rgba(255, 214, 90, 0.35);
}

.menu-wallet-row__icon {
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(80, 50, 0, 0.45));
}

.title-overlay--skill-select .menu-wallet-row,
.title-overlay--item-select .menu-wallet-row {
  display: none;
}

.title-overlay--skill-select .menu-perf-quality-row,
.title-overlay--item-select .menu-perf-quality-row,
.title-overlay--results .menu-perf-quality-row,
.title-overlay--time-up .menu-perf-quality-row {
  display: none !important;
}

.menu-perf-quality-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(420px, 94vw);
  margin: 0 auto;
}

.menu-perf-quality-row.hidden {
  display: none !important;
}

.menu-perf-quality-row--settings {
  width: 100%;
  max-width: none;
  margin: 2px 0 0;
  gap: 5px;
  align-items: flex-start;
}

.menu-perf-quality-row__label {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 248, 255, 0.88);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.title-overlay.title-overlay--attract .menu-perf-quality-row__label {
  color: #ffffff;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 2px 0 rgba(0, 0, 0, 0.9),
    0 6px 18px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(0, 0, 0, 0.55);
}

.menu-perf-quality-row__toggle {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  background: rgba(10, 8, 22, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.menu-perf-btn {
  min-width: 72px;
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  font-family: var(--font-display);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  transition:
    background 140ms ease,
    color 140ms ease,
    transform 100ms ease;
}

.menu-perf-btn:hover {
  color: #ffffff;
}

.menu-perf-btn--active {
  color: #1a1530;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd48a 100%);
  box-shadow: 0 2px 0 rgba(120, 70, 0, 0.35);
}

.title-overlay.title-overlay--attract .menu-perf-btn {
  min-width: 84px;
  padding: 10px 22px;
  font-size: clamp(16px, 3.6vw, 20px);
}

.title-overlay.title-overlay--attract .menu-perf-quality-row__toggle {
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

.menu-perf-quality-row__hint {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-ui);
  line-height: 1.35;
  text-align: center;
  color: rgba(230, 226, 255, 0.72);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  max-width: 34em;
}

.title-overlay.title-overlay--attract .menu-perf-quality-row__hint {
  font-size: clamp(11px, 2.8vw, 13px);
  color: #f5f4ff;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 2px 0 rgba(0, 0, 0, 0.88),
    0 5px 14px rgba(0, 0, 0, 0.82),
    0 0 18px rgba(0, 0, 0, 0.55);
}

.title-settings-panel .menu-perf-quality-row__label {
  font-size: 12px;
  letter-spacing: 0.03em;
}

.title-settings-panel .menu-perf-btn {
  min-width: 60px;
  padding: 6px 14px;
  font-size: 14px;
}

.skill-select-wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f2e8da 0%, #e8dcc8 100%);
  border: 1px solid #d2bc9e;
  font-size: 26px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #5c3a22;
}

.skill-select-wallet__icon {
  object-fit: contain;
}

.skill-select-hint {
  margin: -8px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(60, 44, 28, 0.72);
  line-height: 1.35;
}

.bg-select-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.favorite-ball-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.favorite-ball-summary__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #d2bc9e;
  background: rgba(255, 252, 248, 0.92);
}

.favorite-ball-summary__thumb {
  width: 96px;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(92, 58, 34, 0.25);
  background-color: #635680;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.favorite-ball-summary__controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.favorite-ball-summary__label {
  font-size: 12px;
  font-weight: 800;
  color: rgba(60, 44, 28, 0.78);
}

.favorite-ball-summary__select {
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(92, 58, 34, 0.28);
  background: #fffdf8;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: #5c3a22;
}

.bg-select-summary__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #d2bc9e;
  background: rgba(255, 252, 248, 0.92);
}

.bg-select-summary__thumb,
.background-shop-preview,
.background-card__thumb {
  border-radius: 10px;
  background-color: #635680;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-select-summary__thumb {
  width: 96px;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(92, 58, 34, 0.25);
}

.bg-change-btn {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #7f95ff 0%, #5865f2 100%);
  box-shadow: 0 3px 0 #3d4599, 0 6px 12px rgba(0, 0, 0, 0.18);
}

.background-shop-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid #d2bc9e;
  background: linear-gradient(180deg, #f2e8da 0%, #e8dcc8 100%);
}

.background-shop-panel.hidden {
  display: none !important;
}

/* Dedicated background sub-menu: hide item content while shop is open. */
.item-select-panel.item-select-panel--bg-shop.skill-select-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.item-select-panel.item-select-panel--bg-shop .skill-select-panel__body {
  display: none !important;
}

.item-select-panel.item-select-panel--bg-shop .background-shop-panel:not(.hidden) {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.background-shop-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.background-shop-wallet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: #5c3a22;
}

.background-shop-preview {
  box-sizing: border-box;
  width: min(220px, 70%);
  max-width: 100%;
  max-height: min(52dvh, 360px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border: 2px solid rgba(92, 58, 34, 0.25);
}

.background-shop-status {
  margin: 0;
  min-height: 1.4em;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(60, 44, 28, 0.84);
}

.background-shop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.background-shop-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid #d2bc9e;
  background: rgba(255, 255, 255, 0.45);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.background-shop-heading {
  margin: 6px 0 8px;
  font-family: var(--font-display);
  font-size: 13px;
  color: #5c3a22;
}

.background-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.background-card {
  border: 2px solid rgba(92, 58, 34, 0.2);
  border-radius: 10px;
  background: rgba(255, 252, 248, 0.96);
  padding: 6px;
  cursor: pointer;
}

.background-card--active {
  border-color: #3d9fff;
  box-shadow: 0 0 0 1px rgba(61, 159, 255, 0.35);
}

.background-card__thumb {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(92, 58, 34, 0.2);
}

.background-card__meta {
  margin-top: 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #5c3a22;
}

.skill-select-title--compact {
  padding-bottom: 8px;
  margin-top: 4px;
}

.modifier-select-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  background: linear-gradient(180deg, #f2e8da 0%, #e8dcc8 100%);
  border-radius: 16px;
  border: 1px solid #d2bc9e;
  padding: 10px 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Grand Live uses a wide landscape item menu: keep card size, widen panel, single-row items. */
body.puchiball-grand-live .title-overlay.title-overlay--item-select #itemSelectPanel.skill-select-panel {
  width: min(760px, calc(100% - clamp(4px, 1vmin, 10px)));
}

/* Grand Live: one row, share width — no horizontal scrollbar (panel width/scale: @container menu-stage). */
body.puchiball-grand-live .title-overlay.title-overlay--skill-select .skill-select-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: stretch;
  gap: clamp(5px, 0.85cqi, 12px);
  width: 100%;
  box-sizing: border-box;
  padding: clamp(8px, 1cqi, 12px) clamp(6px, 0.9cqi, 12px) clamp(10px, 1.2cqi, 14px);
  overflow-x: hidden;
  overflow-y: visible;
}

body.puchiball-grand-live .title-overlay.title-overlay--skill-select .skill-choice {
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(148px, 26cqb, 200px);
  padding: clamp(8px, 1.1cqi, 14px) clamp(5px, 0.75cqi, 10px);
}

body.puchiball-grand-live .title-overlay.title-overlay--skill-select .skill-choice-name {
  font-size: clamp(12px, 2cqi, 16px);
}

body.puchiball-grand-live .title-overlay.title-overlay--skill-select .skill-choice-desc,
body.puchiball-grand-live .title-overlay.title-overlay--skill-select .skill-choice-subtitle {
  font-size: clamp(9px, 1.45cqi, 11px);
}

body.puchiball-grand-live .title-overlay.title-overlay--item-select .modifier-select-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Grand Live background picker should preview true landscape framing. */
body.puchiball-grand-live .title-overlay.title-overlay--item-select .bg-select-summary__thumb,
body.puchiball-grand-live .title-overlay.title-overlay--item-select .background-shop-preview,
body.puchiball-grand-live .title-overlay.title-overlay--item-select .background-card__thumb {
  aspect-ratio: 16 / 9;
}

body.puchiball-grand-live .title-overlay.title-overlay--item-select .bg-select-summary__row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

body.puchiball-grand-live .title-overlay.title-overlay--item-select .bg-select-summary__thumb {
  width: 50%;
  max-width: none;
}

body.puchiball-grand-live .title-overlay.title-overlay--item-select .background-shop-preview {
  width: min(320px, 88%);
  max-height: min(50dvh, 340px);
}

body.puchiball-grand-live .title-overlay.title-overlay--item-select .bg-select-summary__row .bg-change-btn {
  min-height: 42px;
  height: 42px;
  padding: 0 14px;
  font-size: 14px;
  white-space: nowrap;
  justify-self: center;
  align-self: center;
}

/* Phone landscape: shallow viewports (often wider than 640px) — cap preview so one scroll reaches the grids. */
@media (orientation: landscape) and (max-height: 560px) {
  .item-select-panel.item-select-panel--bg-shop .background-shop-preview {
    max-height: min(34dvh, 200px);
    width: auto;
    max-width: min(168px, 38vw);
  }

  body.puchiball-grand-live .title-overlay.title-overlay--item-select .item-select-panel.item-select-panel--bg-shop .background-shop-preview {
    max-height: min(32dvh, 200px);
    width: min(260px, 62vw);
    max-width: min(260px, 62vw);
  }
}

.modifier-option {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(92, 58, 34, 0.18);
  background: rgba(255, 252, 248, 0.94);
  color: #1a1530;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.modifier-option:hover {
  border-color: rgba(43, 169, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(43, 169, 255, 0.2);
}

.modifier-option--active {
  border-color: #2ba9ff;
  box-shadow: 0 0 0 2px rgba(43, 169, 255, 0.35);
}

.modifier-option__iconwrap {
  box-sizing: border-box;
  width: 72px;
  height: 52px;
  margin: 0 auto;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modifier-option__atlasimg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  display: block;
}

.modifier-option__iconwrap--fallback {
  border: 1px dashed rgba(92, 58, 34, 0.25);
}

.modifier-option__name {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #3d2918;
}

.modifier-option__desc {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(40, 28, 20, 0.78);
}

.modifier-option__cost {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  color: #b07020;
}

.skill-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

.skill-select-title {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(92, 58, 34, 0.12);
  text-align: center;
  font-size: clamp(17px, 3.6vw, 21px);
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fffefb;
  text-shadow:
    0 2px 0 #5a3d28,
    0 -2px 0 #5a3d28,
    2px 0 0 #5a3d28,
    -2px 0 0 #5a3d28,
    1.5px 1.5px 0 #5a3d28,
    -1.5px 1.5px 0 #5a3d28,
    1.5px -1.5px 0 #5a3d28,
    -1.5px -1.5px 0 #5a3d28;
}

.skill-select-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  background: linear-gradient(180deg, #f2e8da 0%, #e8dcc8 100%);
  border-radius: 16px;
  border: 1px solid #d2bc9e;
  padding: 12px 10px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.skill-choice {
  position: relative;
  box-sizing: border-box;
  border: 1.5px solid rgba(92, 58, 34, 0.16);
  border-radius: 14px;
  background: rgba(255, 252, 248, 0.92);
  color: #1a1530;
  text-align: center;
  cursor: pointer;
  padding: 16px 12px;
  min-height: 204px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.skill-choice.active {
  background: rgba(252, 248, 255, 0.96);
  border-color: rgba(124, 92, 200, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 0 2px rgba(168, 140, 255, 0.5),
    0 6px 18px rgba(88, 64, 140, 0.12);
}

.skill-choice-name {
  font-size: 16px;
  font-weight: 900;
  font-family: var(--font-ui);
  line-height: 1.1;
  color: #141026;
}

.skill-choice-subtitle {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: #3d3558;
  opacity: 0.95;
  margin-top: -1px;
}

.skill-choice-desc {
  font-size: 11px;
  font-family: var(--font-ui);
  color: #2a2440;
  opacity: 0.92;
  line-height: 1.15;
}

.skill-choice-signature {
  margin-top: auto;
  font-size: 11px;
  font-family: var(--font-ui);
  color: #0d5f78;
  font-weight: 800;
}

.skill-choice-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.skill-choice-ballwrap {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto;
}

.skill-choice-ball {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: auto;
}

.results-row {
  margin: 0;
  padding: 8px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-display);
  border-bottom: 1px solid rgba(92, 58, 34, 0.1);
}

.results-row:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

/* Row labels: light fill + brown outline (reference-style). */
.results-row > span {
  flex: 1 1 auto;
  text-align: left;
  color: #fffefb;
  font-weight: 800;
  text-shadow:
    0 1.5px 0 #5a3d28,
    0 -1.5px 0 #5a3d28,
    1.5px 0 0 #5a3d28,
    -1.5px 0 0 #5a3d28;
}

.results-row strong {
  flex: 0 0 auto;
  text-align: right;
  font-size: 1.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  color: #4a3018;
  text-shadow: none;
}

/* Grand Live landscape results: wider card, denser two-column stat layout. */
body.puchiball-grand-live .title-overlay.title-overlay--results .results-panel {
  width: min(720px, min(96vw, 56rem));
}

body.puchiball-grand-live .title-overlay.title-overlay--results .title-heading-row {
  max-width: min(1040px, 98vw);
}

body.puchiball-grand-live .title-overlay.title-overlay--results .results-panel__body {
  gap: 12px;
}

body.puchiball-grand-live .title-overlay.title-overlay--results .results-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  padding: 10px 12px 12px;
}

body.puchiball-grand-live .title-overlay.title-overlay--results .results-row {
  padding: 6px 2px;
  font-size: 14px;
}

body.puchiball-grand-live .title-overlay.title-overlay--results .results-row:nth-last-child(-n + 2) {
  border-bottom: none;
}

body.puchiball-grand-live .title-overlay.title-overlay--results .results-row strong {
  font-size: 1.12rem;
}

/* Grand Live on touch: wider card, stats in 2×3 (three columns) so the list is shorter and action buttons stay on-screen. */
@media (pointer: coarse) {
  body.puchiball-grand-live .title-overlay.title-overlay--results .results-panel {
    width: min(760px, min(98vw, 60rem));
  }

  body.puchiball-grand-live .title-overlay.title-overlay--results .title-heading-row {
    max-width: min(1080px, 99vw);
  }

  body.puchiball-grand-live .title-overlay.title-overlay--results .results-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding: 10px 10px 12px;
  }

  body.puchiball-grand-live .title-overlay.title-overlay--results .results-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    font-size: 12px;
    border-bottom: none;
    border-right: 1px solid rgba(92, 58, 34, 0.12);
    text-align: center;
  }

  body.puchiball-grand-live .title-overlay.title-overlay--results .results-row:nth-child(3n) {
    border-right: none;
  }

  body.puchiball-grand-live .title-overlay.title-overlay--results .results-row:nth-child(-n + 3) {
    border-bottom: 1px solid rgba(92, 58, 34, 0.12);
  }

  body.puchiball-grand-live .title-overlay.title-overlay--results .results-row > span {
    flex: 0 1 auto;
    text-align: center;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.12;
    max-width: 100%;
  }

  body.puchiball-grand-live .title-overlay.title-overlay--results .results-row strong {
    font-size: clamp(0.95rem, 3.4vw, 1.1rem);
    text-align: center;
  }
}

/* Embedded Grand Live: scale results to the real menu height (cqb). `zoom` shrinks layout so `.board-wrap` overflow:hidden does not clip the bottom; transform-only does not. */
body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen) .title-overlay.title-overlay--results {
  container-type: size;
  container-name: puchi-gl-results-shell;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@container puchi-gl-results-shell (min-width: 0px) {
  body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen)
    .title-overlay.title-overlay--results
    #resultsPanel.results-panel {
    width: min(640px, calc(100cqi - clamp(12px, 3vmin, 24px)));
    max-width: 100%;
    transform-origin: center top;
    /* Title + subtitle + gaps above the card; 780 ≈ tall two-column card + actions. */
    --gl-results-scale: clamp(
      0.32,
      min(
        1,
        (100cqb - clamp(168px, 42cqb, 340px)) / 780,
        (100cqi - clamp(12px, 3vmin, 24px)) / 700
      ),
      1
    );
    transform: scale(var(--gl-results-scale));
  }

  @media (pointer: coarse) {
    body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen)
      .title-overlay.title-overlay--results
      #resultsPanel.results-panel {
      width: min(720px, calc(100cqi - clamp(8px, 2vmin, 16px)));
      /* Shorter 2×3 stat grid + same header slack → less vertical squeeze. */
      --gl-results-scale: clamp(
        0.32,
        min(
          1,
          (100cqb - clamp(168px, 42cqb, 340px)) / 640,
          (100cqi - clamp(8px, 2vmin, 16px)) / 740
        ),
        1
      );
    }
  }

  @supports (zoom: 0.5) {
    body.puchiball-grand-live:not(.puchiball-grand-live-in-fullscreen)
      .title-overlay.title-overlay--results
      #resultsPanel.results-panel {
      transform: none;
      zoom: var(--gl-results-scale);
    }
  }
}

.start-btn {
  min-width: 156px;
  height: 54px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8fc2 0%, #ff5b9d 100%);
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  font-family: var(--font-ui);
  letter-spacing: 0.4px;
  text-shadow: 0 2px 0 rgba(124, 34, 78, 0.55);
  box-shadow:
    0 5px 0 #c83f7d,
    0 10px 20px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.start-btn--profile {
  margin-top: 4px;
  background: linear-gradient(180deg, #8db4ff 0%, #6e88ff 100%);
  box-shadow:
    0 5px 0 #4558c8,
    0 10px 20px rgba(0, 0, 0, 0.28);
  min-width: 128px;
  height: 42px;
  padding: 0 16px;
  font-size: 20px;
}

@media (min-width: 900px) and (pointer: fine) {
  .start-btn--profile {
    min-width: 122px;
    height: 40px;
    padding: 0 14px;
    font-size: 19px;
  }
}

.start-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 3px 0 #c83f7d,
    0 6px 14px rgba(0, 0, 0, 0.24);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 640px) {
  /* Skill pick, results, time-up: stack from top so full menu fits; scroll if needed. */
  .title-overlay.title-overlay--skill-select,
  .title-overlay.title-overlay--item-select,
  .title-overlay.title-overlay--results {
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep Time Up centered in the play area on mobile. */
  .title-overlay.title-overlay--time-up {
    justify-content: center;
    align-items: center;
    align-content: center;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  .title-overlay.title-overlay--attract {
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    padding-top: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Classic mobile results: re-center on taller phones (short phones keep top-stack + scroll). */
  @media (min-height: 700px) {
    body:not(.puchiball-grand-live) .title-overlay.title-overlay--results {
      justify-content: center;
      align-content: center;
    }
  }

  /* Keep version/changelog launcher visually consistent with title corner HUD on phones. */
  .title-version-launcher {
    top: calc(env(safe-area-inset-top, 0px) + clamp(66px, 15vmin, 106px));
    left: max(10px, env(safe-area-inset-left, 0px));
    gap: 3px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
  }

  .title-version-launcher__version {
    font-size: clamp(16px, 5.2vw, 24px);
  }

  .title-version-launcher__icon {
    width: clamp(18px, 5vw, 24px);
    height: clamp(18px, 5vw, 24px);
    font-size: clamp(12px, 3.5vw, 16px);
    border-width: 1.5px;
  }

  .title-version-launcher__label {
    font-size: clamp(13px, 4vw, 18px);
  }

  .changelog-panel {
    width: min(360px, 95vw);
    max-height: min(520px, 84dvh);
    border-radius: 18px;
    padding: 12px 12px 10px;
  }

  .changelog-title {
    font-size: 1.1rem;
  }

  .changelog-entry {
    padding: 9px 10px;
  }

  /* Background menu should keep the same framed card language and fit short mobile screens. */
  .bg-select-summary__row {
    grid-template-columns: 84px 1fr;
    gap: 10px;
    padding: 8px;
  }

  .bg-select-summary__thumb {
    width: 84px;
  }

  .background-shop-panel {
    padding: 8px 10px 10px;
    border-radius: 12px;
  }

  .background-shop-preview {
    width: min(190px, 66%);
    max-height: min(44dvh, 280px);
  }

  .background-shop-status {
    font-size: 11px;
  }

  .background-shop-scroll {
    padding: 6px;
    gap: 8px;
  }

  /* Mobile bg-shop: one inner scroll (preview + actions + grids); panel stays flex-clipped. */
  .title-overlay.title-overlay--item-select #itemSelectPanel.item-select-panel--bg-shop {
    overflow: hidden;
  }

  .item-select-panel.item-select-panel--bg-shop .background-shop-panel:not(.hidden) {
    overflow: hidden;
    max-height: none;
  }

  .item-select-panel.item-select-panel--bg-shop .background-shop-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .background-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .background-card {
    padding: 5px;
    border-radius: 9px;
  }

  .background-card__meta {
    font-size: 10px;
  }

  .bg-change-btn {
    min-height: 38px;
    font-size: 14px;
    padding: 0 12px;
  }

  /* Keep stage centered and clipped on ultra-small phones instead of reflowing/scrolling. */
  body {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
  }

  .app {
    width: max(
      calc(var(--world-w) * var(--min-stage-scale) * 1px),
      min(100vw, calc(100dvh * var(--world-w) / var(--world-h)))
    );
    height: max(
      calc(var(--world-h) * var(--min-stage-scale) * 1px),
      min(100dvh, calc(100vw * var(--world-h) / var(--world-w)))
    );
    min-height: 600px;
    margin: 0;
    --ui-chrome-space: 158px;
    gap: 0;
    padding: 0;
  }

  .hud {
    min-height: 76px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .hud-overlay {
    padding: max(4px, env(safe-area-inset-top, 0px)) 8px 2px;
  }

  .time-pie {
    width: 92px;
    height: 92px;
  }

  .time-pie > span {
    font-size: 56px;
  }

  .score-label {
    font-size: 40px;
  }

  .hud-score #scoreValue {
    font-size: 46px;
  }

  .hud-score {
    transform: translateY(0);
    padding-top: 1px;
  }

  .hud-right {
    padding-top: 1px;
  }

  .hud-coins {
    font-size: 22px;
  }

  .hud-coins__icon {
    width: 26px;
    height: 26px;
  }

  .pause-btn {
    width: 68px;
    height: 68px;
  }

  .shuffle-btn {
    width: 108px;
    height: 108px;
  }

  .shuffle-btn__icon {
    width: 34px;
    height: 34px;
  }

  .skill-btn,
  .showtime-btn {
    width: 72px;
    height: 72px;
  }

  .controls .skill-btn {
    width: 108px;
    height: 108px;
  }

  .controls .shuffle-btn {
    width: 108px;
    height: 108px;
  }

  .gauges {
    padding-bottom: 2px;
  }

  progress {
    height: 34px;
  }

  .showtime-bonus-hud {
    top: calc(env(safe-area-inset-top, 0px) + clamp(78px, 8.5vmin + 46px, 100px));
  }

  .showtime-bonus-hud .showtime-bonus-value {
    font-size: clamp(22px, 5.5vw, 30px);
  }

  .showtime-bonus-label-img {
    max-width: min(210px, 86vw);
  }

  .end-round-countdown {
    font-size: clamp(44px, 16vw, 104px);
    -webkit-text-stroke-width: 1.2px;
  }

  .pause-countdown {
    font-size: clamp(30px, 9vw, 44px);
  }

  .time-up-graphic {
    max-width: min(260px, 86vw);
  }

  .title-overlay.title-overlay--time-up #overlayTitle {
    font-size: clamp(22px, 6vw, 40px);
    letter-spacing: 0.5px;
  }

  .gauges::before {
    bottom: 5px;
  }

  /* Skill/item pick: keep horizontal inset so the card stays inside the playfield frame (scale handles density). */
  .title-overlay.title-overlay--skill-select,
  .title-overlay.title-overlay--item-select {
    padding-left: max(clamp(1px, 0.5vmin, 6px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(1px, 0.5vmin, 6px), env(safe-area-inset-right, 0px));
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  .title-overlay.title-overlay--skill-select #overlaySubtitle,
  .title-overlay.title-overlay--item-select #overlaySubtitle {
    font-size: 0.92rem;
    margin-bottom: 4px;
  }

  /* Piecemeal shrink only when those panels are not active — skill/item use menu-stage scale() instead. */
  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-select-title {
    font-size: clamp(14px, 3.1vw, 18px);
    padding-bottom: 10px;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-select-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 8px 12px;
  }

  .modifier-select-list {
    grid-template-columns: 1fr;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-select-panel__body {
    gap: 12px;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-choice {
    min-height: 188px;
    padding: 12px 10px;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-choice-name {
    font-size: 14px;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-choice-desc {
    font-size: 10px;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-choice-signature {
    font-size: 10px;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-choice-ballwrap {
    width: 64px;
    height: 64px;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-choice-ball {
    width: 48px;
    height: 48px;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-confirm-btn {
    min-width: 148px;
    height: 46px;
    font-size: 18px;
  }

  .controls-overlay {
    padding: 4px 8px 10px;
  }

  .results-panel {
    width: min(380px, 94vw);
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-select-panel {
    width: min(340px, 90vw);
  }

  .results-panel__body {
    padding: 16px 14px 18px;
  }

  .title-overlay:not(.title-overlay--skill-select):not(.title-overlay--item-select) .skill-select-panel__body {
    padding: 12px 12px 14px;
  }

  .results-hero__value {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }

  .results-row strong {
    font-size: 1.2rem;
  }

  .title-overlay.title-overlay--results #resultsPanel .results-actions .start-btn {
    height: clamp(42px, 10vw, 48px);
    padding: 0 clamp(12px, 3vw, 18px);
    font-size: clamp(15px, 3.8vw, 18px);
  }
}

/* Short desktop/laptop heights: let long overlays scroll to reach bottom actions. */
@media (min-width: 641px) and (max-height: 820px) {
  .title-overlay.title-overlay--results,
  .title-overlay.title-overlay--skill-select,
  .title-overlay.title-overlay--item-select,
  .leaderboard-overlay {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }
}

.flag-grid {
  max-height: min(44vh, 300px);
  overflow-y: auto;
  padding-right: 2px;
}

.flag-search-input {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #d2bc9e;
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: #3b2b1d;
  background: rgba(255, 252, 248, 0.96);
}

.flag-card {
  border: 2px solid rgba(92, 58, 34, 0.2);
  border-radius: 10px;
  background: rgba(255, 252, 248, 0.96);
  padding: 6px;
  cursor: pointer;
}

.flag-card--active {
  border-color: #3d9fff;
  box-shadow: 0 0 0 1px rgba(61, 159, 255, 0.35);
}

.flag-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(92, 58, 34, 0.2);
  object-fit: contain;
  background: #f6efe5;
}

.flag-card__name {
  margin-top: 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #5c3a22;
  line-height: 1.2;
}

.leaderboard-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.leaderboard-flag {
  width: 18px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid rgba(92, 58, 34, 0.25);
  flex: 0 0 auto;
}

/* —— Site leaderboard (loveliveradio.ca /wrapped/api.php) —— */
.results-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.results-secondary-btn {
  min-width: 200px;
  height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  font-family: var(--font-ui);
  color: #fff;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  background: linear-gradient(180deg, #c4b8ff 0%, #8b7bdc 100%);
  box-shadow: 0 4px 0 #5a4a9a, 0 8px 16px rgba(0, 0, 0, 0.18);
  transition: transform 120ms ease, filter 120ms ease;
}

.results-secondary-btn--compact {
  min-width: 120px;
}

.results-secondary-btn--toolbar {
  min-width: 0;
  max-width: min(200px, 38vw);
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}

.results-secondary-btn:hover {
  filter: brightness(1.06);
}

.results-secondary-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #5a4a9a, 0 4px 10px rgba(0, 0, 0, 0.16);
}

.menu-discord-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: min(360px, 92vw);
  margin: 0 auto 6px;
  pointer-events: auto;
}

.menu-discord-row__line {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(13px, 3.2vw, 15px);
  font-weight: 700;
  line-height: 1.35;
  color: #eef1ff;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 2px 0 rgba(0, 0, 0, 0.85);
}

.menu-discord-row__line--results {
  color: #4a3520;
  text-shadow: none;
  text-align: center;
}

.title-overlay.title-overlay--results #resultsDiscordRow .menu-discord-row__line--results {
  color: #eef1ff;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.9),
    0 2px 0 rgba(0, 0, 0, 0.74);
}

/* Results top sign-in strip: hide descriptive line, keep action buttons only. */
.title-overlay.title-overlay--results #resultsDiscordRow .menu-discord-row__line--results {
  display: none;
}

/* Grand Live landscape results: keep Discord action flush-left so it doesn't cover results text. */
@media (orientation: landscape) {
  body.puchiball-grand-live .title-overlay.title-overlay--results #resultsDiscordRow {
    left: 0;
    top: 0;
    transform: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: flex-start;
  }
}

@media (max-width: 1100px), (max-height: 760px) {
  .title-overlay.title-overlay--results {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .title-overlay.title-overlay--results #resultsPanel.results-panel {
    width: min(420px, 86vw);
  }

  .title-overlay.title-overlay--results #resultsPanel .results-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding: 10px 10px 12px;
  }

  .title-overlay.title-overlay--results #resultsPanel .results-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 3px;
    border-bottom: none;
    border-right: 1px solid rgba(92, 58, 34, 0.12);
    text-align: center;
    font-size: clamp(10px, 1.6vw, 12px);
  }

  .title-overlay.title-overlay--results #resultsPanel .results-row:nth-child(3n) {
    border-right: none;
  }

  .title-overlay.title-overlay--results #resultsPanel .results-row:nth-child(-n + 3) {
    border-bottom: 1px solid rgba(92, 58, 34, 0.12);
  }

  .title-overlay.title-overlay--results #resultsPanel .results-row > span {
    text-align: center;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: 1.12;
  }

  .title-overlay.title-overlay--results #resultsPanel .results-row strong {
    text-align: center;
    font-size: clamp(0.94rem, 2.4vw, 1.08rem);
  }
}

.menu-discord-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.menu-discord-btn,
.menu-discord-out {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  border: none;
}

.menu-discord-btn {
  color: #fff;
  background: linear-gradient(180deg, #7b8cff 0%, #5865f2 100%);
  box-shadow: 0 3px 0 #3d4599, 0 6px 14px rgba(0, 0, 0, 0.28);
}

.menu-discord-out {
  color: #f4f0ff;
  background: rgba(20, 16, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.menu-discord-btn.hidden,
.menu-discord-out.hidden {
  display: none !important;
}

.title-browse-lb-btn {
  margin: 0 auto 10px;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  pointer-events: auto;
}

.title-browse-lb-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.title-mobile-fullscreen-btn {
  display: none;
  margin: 2px auto 0;
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #7b8cff 0%, #5865f2 100%);
  box-shadow: 0 3px 0 #3d4599, 0 6px 14px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.title-mobile-fullscreen-btn:hover {
  filter: brightness(1.06);
}

.title-mobile-fullscreen-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #3d4599, 0 3px 10px rgba(0, 0, 0, 0.22);
}

.title-mobile-fullscreen-btn.hidden {
  display: none !important;
}

@media (pointer: coarse), (hover: none) and (max-width: 980px) {
  .title-overlay.title-overlay--attract .title-mobile-fullscreen-btn:not(.hidden) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.leaderboard-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(16, 10, 28, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.leaderboard-overlay.hidden {
  display: none !important;
}

/* Full `inset: 0` like `.leaderboard-overlay` — do not offset `top` or the dim/blur misses the Discord / LB strip. */
#profileOverlay {
  z-index: 31;
}

#profileOverlay .results-panel {
  margin: 0;
  max-height: min(84dvh, 760px);
}

#profilePanel .results-panel__body {
  max-height: inherit;
  min-height: 0;
}

#profilePanel .profile-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

#profilePanel .profile-score-list__rows {
  max-height: none;
}

#profilePanel #closeProfileBtn {
  position: sticky;
  bottom: 0;
}

.profile-wallet-row {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: max(10px, env(safe-area-inset-right, 0px));
  left: auto;
  z-index: 2;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(18, 14, 40, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.leaderboard-panel {
  box-sizing: border-box;
  width: min(400px, 96vw);
  max-height: min(560px, 88dvh);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  border: 3px solid #c9a882;
  background:
    linear-gradient(180deg, rgba(255, 254, 251, 0.97) 0%, rgba(247, 240, 232, 0.98) 100%),
    url("./assets/Sprite/ResultPopFrame3.png") center / 100% 100% no-repeat;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.leaderboard-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.leaderboard-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  color: #5c3a22;
}

.leaderboard-close {
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #ffb27a 0%, #e86b4a 100%);
  box-shadow: 0 3px 0 #a84330, 0 6px 12px rgba(0, 0, 0, 0.18);
}

.leaderboard-me-hint {
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #4a3520;
  background: linear-gradient(180deg, #fff6e0 0%, #ffe8c4 100%);
  border: 1px solid #e8c89a;
}

.leaderboard-me-hint.hidden {
  display: none !important;
}

.leaderboard-tabsets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.leaderboard-seg {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 8px;
  border-radius: 999px;
  border: 2px solid rgba(92, 58, 34, 0.2);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  color: #5c3a22;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
}

.leaderboard-seg--active {
  border-color: #5aa8ff;
  background: linear-gradient(180deg, #dff2ff 0%, #b8e2ff 100%);
  box-shadow: 0 2px 0 rgba(40, 120, 200, 0.35);
}

.leaderboard-overlay--classic .leaderboard-seg--active {
  color: #5a4210;
  border-color: #d4a83a;
  background: linear-gradient(180deg, #fff6d6 0%, #f0d78c 100%);
  box-shadow: 0 2px 0 rgba(180, 130, 40, 0.45);
}

.leaderboard-overlay--grand-live .leaderboard-seg--active {
  color: #274060;
  border-color: #5aa8ff;
  background: linear-gradient(180deg, #dff2ff 0%, #b8e2ff 100%);
  box-shadow: 0 2px 0 rgba(40, 120, 200, 0.35);
}

.leaderboard-toggle--mode {
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  gap: 6px;
}

.leaderboard-mode-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.leaderboard-mode-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(86, 64, 40, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.leaderboard-mode-dot--active {
  background: #f0d78c;
  box-shadow:
    0 0 0 1px rgba(180, 130, 40, 0.32),
    0 0 10px rgba(255, 214, 122, 0.45);
  transform: scale(1.1);
}

.leaderboard-overlay--grand-live .leaderboard-mode-dot--active {
  background: #8ed0ff;
  box-shadow:
    0 0 0 1px rgba(40, 120, 200, 0.3),
    0 0 10px rgba(132, 206, 255, 0.42);
}

#leaderboardModeRow.hidden {
  display: none !important;
}

.leaderboard-mode-toggle {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 999px;
  border: 2px solid rgba(92, 58, 34, 0.28);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.leaderboard-mode-toggle:focus-visible {
  outline: 2px solid rgba(90, 168, 255, 0.95);
  outline-offset: 2px;
}

.leaderboard-mode-toggle--classic {
  color: #5a4210;
  border-color: #d4a83a;
  background: linear-gradient(180deg, #fff6d6 0%, #f0d78c 100%);
  box-shadow: 0 2px 0 rgba(180, 130, 40, 0.45);
}

.leaderboard-mode-toggle--grand-live {
  color: #274060;
  border-color: #5aa8ff;
  background: linear-gradient(180deg, #dff2ff 0%, #b8e2ff 100%);
  box-shadow: 0 2px 0 rgba(40, 120, 200, 0.35);
}

.leaderboard-status {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: #7a5a40;
  text-align: center;
}

.leaderboard-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 52dvh;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid #d2bc9e;
  background: linear-gradient(180deg, #f2e8da 0%, #e8dcc8 100%);
  padding: 6px 4px 6px 0;
}

.leaderboard-empty {
  padding: 18px 12px;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: #6a5540;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: max-content 40px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 0;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: #4a3520;
}

.leaderboard-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.25);
}

.leaderboard-row--me {
  outline: 2px solid #3d9fff;
  background: rgba(190, 230, 255, 0.55);
}

.leaderboard-rank {
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: #6a5540;
}

.leaderboard-av {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(92, 58, 34, 0.25);
}

.leaderboard-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-score {
  font-variant-numeric: tabular-nums;
  color: #2a6a3a;
}

.leaderboard-score-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.leaderboard-skill-ball {
  width: 33px;
  height: 33px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(92, 58, 34, 0.22);
  background: rgba(255, 255, 255, 0.6);
}