:root {
  --ui-scale: 1.25;
  --bg: #0d1607;
  --bg-soft: #16250f;
  --panel: rgba(12, 24, 8, 0.82);
  --panel-strong: rgba(14, 30, 9, 0.95);
  --line: rgba(175, 255, 87, 0.25);
  --text: #f5f7e8;
  --muted: #b7c59c;
  --accent: #a2ff00;
  --accent-deep: #68a400;
  --danger: #ff4d5c;
  --gold: #ffd84d;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --radius: 22px;
  --stage-height: min(72vh, 760px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

[hidden] {
  display: none !important;
}

html {
  height: 100dvh;
  overflow: hidden;
  background-image: url("./Assets/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
}

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  background: transparent;
  zoom: var(--ui-scale);
  cursor: url("./Assets/cursor.png")
      16 16,
    auto;
}

a,
button {
  cursor: url("./Assets/highlight.png")
      16 16,
    pointer;
}

a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
.rr-launcher:focus,
.rr-launcher:focus-visible,
.rr-counter:focus,
.rr-counter:focus-visible,
.rr-timer:focus,
.rr-timer:focus-visible {
  outline: none;
  box-shadow: none;
}

a,
button,
.rr-counter,
.rr-timer {
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  display: block;
}

.site-shell {
  width: min(1200px, calc(100% - 28px));
  margin: 0 auto;
  padding: 12px 0 48px;
}

.site-header {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 0 6px;
}

.site-brand,
.site-nav a,
h2,
h3,
.button,
.toolbar-group strong,
.boss-caption {
  font-family: "Jolly Lodger", cursive;
  letter-spacing: 0.03em;
}

.site-brand {
  display: grid;
  justify-items: center;
  text-decoration: none;
}

.site-brand-button {
  background: transparent;
  border: 0;
  padding: 0;
}

.site-logo {
  width: min(220px, 42vw);
  margin: 0 auto;
  object-fit: contain;
}

.site-brand-text {
  display: none;
  color: var(--accent);
  font-size: clamp(2.4rem, 5vw, 4rem);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}

.site-brand--text-only .site-brand-text {
  display: block;
}

.site-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.site-nav a {
  color: var(--accent);
  text-decoration: none;
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}

.site-nav-login {
  display: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--text);
}

body.is-page-scroll-locked {
  position: fixed;
  inset: 0;
  overflow: hidden;
  width: 100%;
}

body.is-page-scroll-blocked {
  overflow: hidden;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 1.5rem;
}

h2,
h3 {
  margin: 0;
  line-height: 0.95;
  font-weight: 400;
}

h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}

h3 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
}

.info-card p,
.overlay-card p,
.scoreboard-note {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.home-stage {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0 auto 14px;
  padding-top: clamp(0px, 4vh, 100px);
  text-align: center;
}

.home-stage-media {
  display: flex;
  justify-content: center;
}

.home-logo-mark {
  width: min(760px, 92vw);
  pointer-events: none;
  user-select: none;
}

.button {
  border: 0;
  border-radius: 0;
  min-height: 54px;
  padding: 14px 22px;
  text-decoration: none;
  font-size: 1.7rem;
  line-height: 1;
  color: #181818;
  background: transparent url("./Assets/ui-button-default.png") center / 100% 100% no-repeat;
  transition: transform 160ms ease, background-image 160ms ease, color 160ms ease;
}

.button:hover,
.button:focus-visible {
  background-image: url("./Assets/ui-button-hover.png");
  transform: translateY(-2px) scale(1.02);
}

.button-primary {
  color: #181818;
}

.game-panel,
.game-sidebar .info-card {
  overflow: hidden;
}

.info-card {
  background: rgba(5, 11, 4, 0.42);
  border: 1px solid rgba(175, 255, 87, 0.18);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.scoreboard {
  margin: 16px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.scoreboard li {
  color: var(--text);
}

.game-section {
  margin-top: 14px;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 320px;
  gap: 20px;
}

.game-panel {
  background: rgba(10, 18, 7, 0.34);
  border: 1px solid rgba(175, 255, 87, 0.18);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.game-toolbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid rgba(175, 255, 87, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

.toolbar-group {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(175, 255, 87, 0.1);
  border-radius: 18px;
  padding: 12px 14px;
}

.label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.toolbar-group strong {
  display: block;
  font-size: 2rem;
  color: var(--accent);
}

.game-stage {
  position: relative;
  min-height: var(--stage-height);
  overflow: hidden;
  contain: layout style;
  background:
    linear-gradient(180deg, rgba(56, 83, 36, 0.04), rgba(7, 14, 5, 0.1)),
    rgba(5, 12, 3, 0.18);
}

.game-stage::before,
.game-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.game-stage::before {
  width: 340px;
  height: 340px;
  left: -80px;
  bottom: -120px;
  background: radial-gradient(circle, rgba(162, 255, 0, 0.2), transparent 65%);
}

.game-stage::after {
  width: 220px;
  height: 220px;
  top: -60px;
  right: -30px;
  background: radial-gradient(circle, rgba(255, 216, 77, 0.18), transparent 70%);
}

.stage-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 12;
  background: rgba(3, 8, 2, 0.38);
}

.stage-overlay[hidden] {
  display: none;
}

.overlay-card {
  width: min(460px, calc(100% - 24px));
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 28px;
  text-align: center;
  padding: 28px;
  box-shadow: var(--shadow);
}

.game-splash-image {
  width: min(320px, 90%);
  margin: 0 auto 16px;
}

.fly,
.golden-frog,
.boss-fly {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.fly {
  width: 54px;
  height: 54px;
  will-change: transform;
  transition: left 550ms ease, top 550ms ease, transform 550ms ease;
}

/* Child image layers — opacity is compositor-only (no layout, no paint). */
.fly__img,
.fly__splat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 160ms ease;
}

.fly__splat {
  opacity: 0;
}

/* Splatted state: only compositor properties change — no layout, no repaint. */
.fly.is-splatted {
  pointer-events: none;
  transform: scale(1.22);
}

.fly.is-splatted .fly__img {
  opacity: 0;
}

.fly.is-splatted .fly__splat {
  opacity: 1;
}

.fly:hover {
  cursor: url("./Assets/mallet.png") 16 16, pointer;
}

body.is-page-scroll-locked .fly,
body.is-page-scroll-locked .golden-frog,
body.is-page-scroll-locked .boss-fly,
body.is-page-scroll-locked .rr-fly {
  pointer-events: none;
}

.golden-frog {
  width: 120px;
  height: 120px;
  background-image: url("./Assets/Golden Frog.png");
  filter: drop-shadow(0 0 22px rgba(255, 216, 77, 0.55));
  animation: pulse 900ms ease-in-out infinite alternate;
}

.boss-ui {
  position: absolute;
  inset: 18px 18px auto;
  z-index: 9;
}

.boss-bar {
  width: min(100%, 520px);
  height: 24px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255, 77, 92, 0.5);
}

.boss-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ffdf52, #ff5d63);
}

.boss-caption {
  margin: 8px 0 0;
  text-align: center;
  font-size: 1.7rem;
  color: #ffd3d6;
}

.boss-fly {
  width: min(42vw, 320px);
  height: min(42vw, 320px);
  background-image: url("./Assets/BossFly.png");
  transition: left 400ms ease, top 400ms ease, transform 140ms ease;
  filter: drop-shadow(0 25px 18px rgba(0, 0, 0, 0.35));
}

.boss-fly.is-hit {
  animation: boss-hit 180ms ease;
}

.hud-message {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  z-index: 11;
  min-width: 220px;
  text-align: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(4, 10, 3, 0.82);
  border: 1px solid rgba(175, 255, 87, 0.25);
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.hud-message.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.content-section {
  width: min(760px, calc(100% - 8px));
  margin: 26px auto 0;
  text-align: center;
  background: rgba(5, 11, 4, 0.34);
  border: 1px solid rgba(175, 255, 87, 0.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(8px);
}

.content-section p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.content-section-wide {
  width: min(980px, calc(100% - 8px));
}

.content-section-narrow {
  width: min(720px, calc(100% - 8px));
}

.auth-status {
  color: var(--accent);
  font-size: 0.95rem;
}

.auth-footer {
  margin-top: 8px;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.auth-view-leaderboard {
  width: 120px;
}

.auth-status[data-state="error"] {
  color: #ff8c94;
}

.auth-widget {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 40;
  width: 190px;
  padding: 22px 18px 18px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.auth-widget,
.auth-prompt-card,
.about-window,
.profile-card,
.chat-card,
.world-card,
.leaderboard-section {
  --ui-panel-side: 72px;
  --ui-panel-cap: 72px;
  background-image:
    url("./Assets/ui-panel-tl.png"),
    url("./Assets/ui-panel-tm.png"),
    url("./Assets/ui-panel-tr.png"),
    url("./Assets/ui-panel-lm.png"),
    url("./Assets/ui-panel-mm.png"),
    url("./Assets/ui-panel-rm.png"),
    url("./Assets/ui-panel-bl.png"),
    url("./Assets/ui-panel-bm.png"),
    url("./Assets/ui-panel-br.png"),
    url("./Assets/UI%20Background.png");
  background-position:
    left top,
    center top,
    right top,
    left center,
    center center,
    right center,
    left bottom,
    center bottom,
    right bottom,
    center center;
  background-size:
    calc(var(--ui-panel-side) + 1px) calc(var(--ui-panel-cap) + 1px),
    calc(100% - (var(--ui-panel-side) * 2) + 2px) calc(var(--ui-panel-cap) + 1px),
    calc(var(--ui-panel-side) + 1px) calc(var(--ui-panel-cap) + 1px),
    calc(var(--ui-panel-side) + 1px) calc(100% - (var(--ui-panel-cap) * 2) + 2px),
    calc(100% - (var(--ui-panel-side) * 2) + 2px) calc(100% - (var(--ui-panel-cap) * 2) + 2px),
    calc(var(--ui-panel-side) + 1px) calc(100% - (var(--ui-panel-cap) * 2) + 2px),
    calc(var(--ui-panel-side) + 1px) calc(var(--ui-panel-cap) + 1px),
    calc(100% - (var(--ui-panel-side) * 2) + 2px) calc(var(--ui-panel-cap) + 1px),
    calc(var(--ui-panel-side) + 1px) calc(var(--ui-panel-cap) + 1px),
    cover;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-color: #091107;
}

.auth-widget {
  --ui-panel-side: 42px;
  --ui-panel-cap: 42px;
}

.auth-prompt-card {
  --ui-panel-side: 56px;
  --ui-panel-cap: 56px;
}

.profile-card {
  --ui-panel-side: 68px;
  --ui-panel-cap: 68px;
  background-image:
    url("./Assets/ui-panel-tl.png"),
    url("./Assets/ui-panel-tm.png"),
    url("./Assets/ui-panel-tr.png"),
    url("./Assets/ui-panel-lm.png"),
    url("./Assets/ui-panel-mm.png"),
    url("./Assets/ui-panel-rm.png"),
    url("./Assets/ui-panel-bl.png"),
    url("./Assets/ui-panel-bm.png"),
    url("./Assets/ui-panel-br.png"),
    url("./Assets/UI%20panel%20background.png");
}

.chat-card,
.world-card,
.about-window,
.leaderboard-section {
  --ui-panel-side: 64px;
  --ui-panel-cap: 64px;
}

.site-flies-counter {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 39;
  min-width: 190px;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 1.45rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.site-flies-counter--footer {
  display: none;
  position: static;
  min-width: 0;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 18px auto 8px;
  padding: 0;
  text-align: center;
}

.auth-widget--page {
  position: static;
  width: min(360px, calc(100% - 24px));
  margin: 0 auto;
}

.auth-page-main {
  min-height: 50vh;
  display: grid;
  align-items: start;
  padding-top: 18px;
}

.auth-widget-form,
.auth-widget-user {
  display: grid;
  gap: 8px;
}

.auth-widget-user {
  display: none;
}

.auth-user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

.auth-alert-badge,
.profile-tab-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(42%, -38%);
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 0;
  background: transparent url("./Assets/unread badge.png") center / 100% 100% no-repeat;
  color: #ffffff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.64rem;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.profile-tab-badge {
  transform: translate(24%, -8%);
}

.auth-alert-badge[hidden],
.profile-tab-badge[hidden] {
  display: none !important;
}

.auth-dev-dropdown {
  position: relative;
}

.auth-dev-dropdown[hidden],
.auth-dev-panel[hidden] {
  display: none !important;
}

.auth-dev-dropdown--footer {
  width: auto;
  display: grid;
  justify-items: center;
}

.auth-dev-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: none;
  gap: 6px;
  z-index: 12;
}

.auth-dev-dropdown.is-open .auth-dev-panel {
  display: grid;
}

.auth-widget.has-auth-session .auth-widget-form {
  display: none;
}

.auth-widget.has-auth-session .auth-widget-user {
  display: grid;
}

.auth-widget.is-signed-in .auth-widget-form {
  display: none;
}

.auth-widget.is-signed-in .auth-widget-user {
  display: grid;
}

.auth-widget.is-auth-busy .auth-widget-form,
.auth-widget.is-auth-busy .auth-widget-user {
  display: none;
}

.auth-widget.is-signup-mode .auth-email-field,
.auth-widget.is-signup-mode .auth-confirm-password-field,
.auth-widget.is-signup-mode .auth-show-password-toggle,
.auth-widget.is-signup-mode .auth-create-submit,
.auth-widget.is-signup-mode .auth-cancel-signup {
  display: block;
}

.auth-widget.is-password-reset-mode .auth-widget-form {
  display: grid;
}

.auth-widget.is-password-reset-mode .auth-widget-user {
  display: none;
}

.auth-widget.is-password-reset-mode .auth-confirm-password-field,
.auth-widget.is-password-reset-mode .auth-show-password-toggle {
  display: block;
}

.auth-widget.is-password-reset-mode [data-auth-username],
.auth-widget.is-password-reset-mode .auth-email-field,
.auth-widget.is-password-reset-mode .auth-create-submit,
.auth-widget.is-password-reset-mode [data-auth-start-signup],
.auth-widget.is-password-reset-mode [data-auth-forgot-password],
.auth-widget.is-password-reset-mode .auth-cancel-signup {
  display: none;
}

.auth-widget.is-signup-mode [data-auth-signin],
.auth-widget.is-signup-mode [data-auth-start-signup] {
  display: none;
}

.auth-input {
  width: 100%;
  min-height: 30px;
  border: 1px solid rgba(175, 255, 87, 0.12);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
  font-size: 0.78rem;
}

.auth-input::placeholder {
  color: var(--muted);
}

.auth-email-field,
.auth-confirm-password-field,
.auth-show-password-toggle,
.auth-create-submit,
.auth-cancel-signup {
  display: none;
}

.auth-widget--page:not(.is-signup-mode) .auth-show-password-toggle {
  display: none !important;
}

.auth-widget--page.is-password-reset-mode .auth-show-password-toggle {
  display: block !important;
}

.auth-show-password-toggle {
  width: 128px;
  justify-self: center;
}

.auth-mini-actions {
  display: grid;
  grid-template-columns: repeat(2, 128px);
  gap: 2px;
  justify-content: center;
}

.auth-widget:not(.auth-widget--page) .auth-mini-actions {
  grid-template-columns: 128px;
}

.auth-mini-button {
  min-height: 30px;
  min-width: 128px;
  border: 0;
  border-radius: 0;
  background: transparent url("./Assets/ui-button-default.png") center / 100% 100% no-repeat;
  color: #181818;
  font-family: "Jolly Lodger", cursive;
  font-size: 1.16rem;
  line-height: 1;
  padding: 4px 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.auth-widget .auth-mini-button,
.auth-widget--page .auth-mini-button {
  width: 128px;
  height: 36px;
  min-height: 36px;
  flex: 0 0 128px;
  padding: 4px 8px;
  font-size: 1.16rem;
}

.auth-create-submit-hidden {
  display: none;
}

.auth-widget.is-signup-mode .auth-create-submit,
.auth-widget--page.is-signup-mode .auth-create-submit {
  display: inline-flex;
}

.auth-widget--page .auth-mini-actions {
  grid-template-columns: repeat(2, 128px);
  gap: 6px;
}

[data-profile-open],
.profile-tab[data-profile-tab-target="inventory"],
.profile-tab[data-profile-tab-target="items"],
.profile-tab[data-profile-tab-target="friends"] {
  position: relative;
  overflow: visible;
}

.profile-tab[data-profile-tab-target="items"] .profile-tab-badge {
  transform: translate(24%, -8%);
}

/* ── Shared profile widget circle ──────────────────────────────────
   Canonical circle appearance (diameter, border, avatar crop/scale,
   badge position) shared by the desktop header button and the mobile
   dock button. Modifier classes (--desktop / --mobile) exist only to
   let each context position the widget on the page — they must never
   redeclare diameter, border, background, or avatar cropping. */
.profile-widget-circle {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.profile-widget-circle-default {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profile-widget-circle-headshot {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  overflow: hidden;
  display: none;
  background: #1a2a0a;
  border: 2px solid rgba(162, 255, 0, 0.6);
  box-sizing: border-box;
}

/* Show the live avatar headshot when signed in, hide the default icon */
body:has([data-auth-root].is-signed-in) .profile-widget-circle-headshot {
  display: block;
}
body:has([data-auth-root].is-signed-in) .profile-widget-circle-default {
  display: none;
}

/* Zoom and crop the full-body character art down to a headshot */
.profile-widget-circle-headshot .profile-character-art {
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -15%;
  margin: 0;
}

.profile-widget-circle .auth-alert-badge {
  transform: translate(30%, -30%);
}

.auth-profile-button {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
}

.auth-profile-button:hover,
.auth-profile-button:focus-visible {
  transform: scale(1.03);
}

.auth-profile-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: transparent url("./Assets/View profile hover.png") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.auth-profile-button:hover::after,
.auth-profile-button:focus-visible::after {
  opacity: 1;
}

.auth-mini-button:hover,
.auth-mini-button:focus-visible {
  background-image: url("./Assets/ui-button-hover.png");
}

.auth-mini-button--primary {
  color: #181818;
}

.auth-user-name {
  display: block;
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 1.45rem;
  line-height: 1;
  text-align: center;
}

.auth-status--mini {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
}

.auth-prompt-overlay[hidden] {
  display: none;
}

.auth-prompt-overlay.world-close-confirm-overlay,
.auth-prompt-overlay[data-remove-friend-prompt],
.auth-prompt-overlay[data-signout-prompt] {
  z-index: 2147483647;
}

.auth-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  place-items: center;
}

.auth-prompt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.auth-prompt-card {
  position: relative;
  z-index: 1;
  width: min(380px, calc(100vw - 28px));
  padding: 34px 28px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

.auth-prompt-copy {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.auth-prompt-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 16px;
}

.auth-prompt-actions .auth-mini-button {
  width: 120px;
  min-width: 120px;
  height: 36px;
  min-height: 36px;
  flex: 0 0 120px;
  padding: 4px 8px;
  font-size: 1.12rem;
}

.profile-overlay[hidden] {
  display: none;
}

.profile-overlay {
  --profile-base-width: 680px;
  --profile-base-height: 800px;
  --profile-fit-scale: 1;
  position: fixed;
  inset: 0;
  z-index: 66;
  display: block;
  overflow: hidden;
}

.profile-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

.profile-card-scale {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: calc(var(--profile-base-width) * var(--profile-fit-scale));
  height: calc(var(--profile-base-height) * var(--profile-fit-scale));
  display: block;
}

.profile-card {
  position: relative;
  z-index: 1;
  width: 680px;
  height: 800px;
  transform: scale(var(--profile-fit-scale));
  transform-origin: top left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px 22px 22px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.profile-card-scroll {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.profile-close {
  top: 16px;
  right: 16px;
  /* .profile-card-scroll's upward-shift transform creates a stacking context, which (being
     later in the DOM) would otherwise paint above this button and steal clicks/hit-testing
     over the overlapping area. Pin the close button to a higher stack level so it always
     receives clicks regardless of that transform. */
  z-index: 5;
}

.profile-resize-handle {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(175, 255, 87, 0.42);
  border-bottom: 2px solid rgba(175, 255, 87, 0.42);
  cursor: nwse-resize;
  opacity: 0.92;
  z-index: 2;
  touch-action: none;
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.profile-hero[data-profile-drag-handle] {
  cursor: url("./Assets/highlight.png")
      16 16,
    pointer;
  user-select: none;
  touch-action: none;
}

.profile-hero[data-profile-drag-handle].is-dragging {
  cursor: url("./Assets/highlight.png")
      16 16,
    pointer;
}

.profile-avatar {
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  display: block;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(16, 18, 14, 0.2));
  box-shadow: none;
  flex: 0 0 84px;
  overflow: hidden;
  position: relative;
}

.profile-meta {
  text-align: left;
}

#mobile-profile-sign-out {
  display: none;
}

.profile-meta h2 {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1;
}

.profile-copy {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.profile-tabs {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  margin-top: 12px;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tab + .profile-tab {
  margin-left: -12px;
}

.profile-tab {
  min-height: 38px;
  width: 102px;
  flex: 0 0 102px;
  border: 0;
  border-radius: 0;
  background: transparent url("./Assets/ui-tab-default.png") center / 100% 100% no-repeat;
  color: #181818;
  padding: 5px 6px;
  font-family: "Jolly Lodger", cursive;
  font-size: 0.96rem;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.profile-tab.is-active {
  color: #181818;
  background-image: url("./Assets/ui-tab-active.png");
}

.profile-tab-panel {
  margin-top: 2px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.profile-tab-panel[hidden] {
  display: none;
}

.profile-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(175, 255, 87, 0.16);
  overflow: hidden;
}

.profile-panel--first {
  margin-top: 12px;
}

.profile-section-heading {
  font-family: "Jolly Lodger", cursive;
  font-size: 1rem;
  color: #afff57;
  margin: 0 0 8px;
}

.profile-friends-section {
  padding-bottom: 4px;
}

.profile-friends-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-friend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  flex-wrap: wrap;
}

.profile-friend-name {
  flex: 1;
  font-size: 0.9rem;
  color: #e8ffe8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-friend-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.profile-friend-deny-btn {
  background-image: none;
  background-color: rgba(255, 80, 80, 0.18);
  border: 1px solid rgba(255, 80, 80, 0.4);
}

.profile-friend-remove-btn {
  min-width: 0;
  padding: 2px 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.profile-friend-deny-btn:hover {
  background-color: rgba(255, 80, 80, 0.32);
}

.profile-friend-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
}

.profile-friend-status-dot--online {
  background: #afff57;
  box-shadow: 0 0 5px #afff57;
}

.profile-friend-btn.is-friend {
  opacity: 0.6;
  cursor: default;
}

.profile-overlay--public [data-profile-tab-target="friends"] {
  display: none !important;
}

.profile-settings-stack {
  display: grid;
  gap: 10px;
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-character-preview {
  min-height: 290px;
  border: 1px solid rgba(175, 255, 87, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(8, 16, 8, 0.12), rgba(0, 0, 0, 0.18)),
    url("./Assets/Avatar%20background.png") center / cover no-repeat;
  display: grid;
  place-items: end center;
  padding: 10px 14px 2px;
  overflow: hidden;
}

.profile-character-controls-wrap {
  display: grid;
  gap: 0;
  align-items: start;
}

.profile-character-customize-button {
  min-width: 108px;
  min-height: 30px;
  height: 30px;
  font-size: 0.92rem;
}

.profile-avatar-actions-row {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.profile-avatar-actions-row [data-profile-items-prev],
.profile-avatar-actions-row [data-profile-items-next] {
  display: none;
}

.profile-character-save-button {
  min-width: 108px;
  min-height: 30px;
  height: 30px;
  font-size: 0.92rem;
}

.profile-character-art {
  --avatar-base-filter: none;
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
}

.profile-avatar .profile-character-art {
  width: 68px;
  aspect-ratio: 1;
  margin: 6px auto 0;
}

.profile-character-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.profile-character-layer--base {
  filter: var(--avatar-base-filter);
}

.profile-character-layer--shirt {
  z-index: 1;
}

.profile-character-layer--shirt-decal,
.profile-character-layer--wearable-decal {
  z-index: 2;
}

.profile-character-layer--eyelid-left,
.profile-character-layer--eyelid-right {
  opacity: 0;
  z-index: 3;
  will-change: opacity;
  transition: opacity 28ms linear;
}

.profile-character-layer--accessory,
.profile-character-layer--accessory.profile-character-layer--wearable-decal,
.profile-character-layer--accessory.profile-character-layer--decal-no-flip {
  z-index: 4;
}

.profile-character-art[data-avatar-blink-state="right"] .profile-character-layer--eyelid-right,
.profile-character-art[data-avatar-blink-state="left"] .profile-character-layer--eyelid-left,
.profile-character-art[data-avatar-blink-state="both"] .profile-character-layer--eyelid-left,
.profile-character-art[data-avatar-blink-state="both"] .profile-character-layer--eyelid-right {
  opacity: 1;
}

.profile-character-wearable {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

.profile-character-controls {
  display: grid;
  gap: 8px;
}

.profile-character-controls[hidden] {
  display: none !important;
}

.profile-character-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-character-tab {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(175, 255, 87, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.05;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.profile-character-tab:hover,
.profile-character-tab:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(175, 255, 87, 0.45);
  background: rgba(175, 255, 87, 0.12);
  outline: none;
}

.profile-character-tab.is-active {
  border-color: rgba(175, 255, 87, 0.74);
  background: rgba(175, 255, 87, 0.18);
}

.profile-character-option-group {
  border: 1px solid rgba(175, 255, 87, 0.14);
  border-radius: 18px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.profile-character-option-group h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.profile-character-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-character-option {
  min-width: 0;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(175, 255, 87, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.05;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.profile-character-option:hover,
.profile-character-option:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(175, 255, 87, 0.45);
  background: rgba(175, 255, 87, 0.12);
  outline: none;
}

.profile-character-option.is-active {
  border-color: rgba(175, 255, 87, 0.74);
  background: rgba(175, 255, 87, 0.18);
  box-shadow: 0 0 0 1px rgba(175, 255, 87, 0.2) inset;
}

.profile-character-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.profile-character-slider-group {
  display: grid;
  gap: 4px;
}

.profile-character-slider-label {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1;
}

.profile-character-slider-input {
  width: 100%;
  margin: 0;
  accent-color: #afff57;
}

.profile-character-slider-value {
  min-width: 24px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1;
  text-align: right;
}

.profile-character-cycle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-character-cycle-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(175, 255, 87, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
  flex-shrink: 0;
}

.profile-character-cycle-arrow:hover,
.profile-character-cycle-arrow:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(175, 255, 87, 0.45);
  background: rgba(175, 255, 87, 0.12);
  outline: none;
}

.profile-character-cycle-label {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text);
}

.profile-character-layer--eyelid-stoned {
  opacity: 1;
  z-index: 3;
}

.profile-character-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.profile-character-actions .auth-mini-button {
  min-width: 92px;
  width: auto;
  flex: 0 0 auto;
}

.profile-inventory-avatar-panel {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.profile-inventory-equipment {
  display: grid;
  grid-template-columns: 80px minmax(180px, 1fr) 80px;
  grid-template-areas:
    "head avatar body"
    "hands avatar legs"
    "accessory avatar feet"
    "main_hand avatar off_hand"
    "back avatar accessory_2";
  gap: 8px;
  align-items: center;
  justify-items: stretch;
}

.profile-equipment-slot {
  position: relative;
  min-height: 80px;
  border: 0;
  border-radius: 0;
  background: transparent url("./Assets/Itemslot.png") center / 100% 100% no-repeat;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 4px;
  text-align: center;
  transition: filter 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.profile-equipment-slot[data-profile-equipment-slot="head"] {
  grid-area: head;
}

.profile-equipment-slot[data-profile-equipment-slot="accessory"] {
  grid-area: accessory;
}

.profile-equipment-slot[data-profile-equipment-slot="hands"] {
  grid-area: hands;
}

.profile-equipment-slot[data-profile-equipment-slot="body"] {
  grid-area: body;
}

.profile-equipment-slot[data-profile-equipment-slot="legs"] {
  grid-area: legs;
}

.profile-equipment-slot[data-profile-equipment-slot="feet"] {
  grid-area: feet;
}

.profile-equipment-slot[data-profile-equipment-slot="main_hand"] {
  grid-area: main_hand;
}

.profile-equipment-slot[data-profile-equipment-slot="off_hand"] {
  grid-area: off_hand;
}

.profile-equipment-slot[data-profile-equipment-slot="back"] {
  grid-area: back;
}

.profile-equipment-slot[data-profile-equipment-slot="accessory_2"] {
  grid-area: accessory_2;
}

.profile-equipment-slot.is-dragover {
  box-shadow: 0 0 0 2px rgba(175, 255, 87, 0.5) inset;
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.profile-character-preview.is-dragover {
  outline: 1px solid rgba(175, 255, 87, 0.56);
  background:
    radial-gradient(circle at center, rgba(175, 255, 87, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.08));
}

.profile-equipment-slot.is-filled {
  box-shadow: 0 0 0 1px rgba(175, 255, 87, 0.22) inset;
  cursor: url("./Assets/highlight.png")
      16 16,
    pointer;
}

.profile-equipment-slot.is-dragging {
  opacity: 0.55;
}

.profile-equipment-slot-name {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.profile-equipment-slot-art {
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
}

.profile-equipment-slot-item {
  font-size: 0.54rem;
  line-height: 1.05;
}

.profile-equipment-slot-empty {
  color: rgba(238, 243, 218, 0.56);
  font-size: 0.56rem;
  line-height: 1;
}

.profile-equipment-slot-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3px 4px 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 2;
}

.profile-equipment-slot-remove:hover,
.profile-equipment-slot-remove:focus-visible,
.profile-equipment-slot-remove:active {
  opacity: 1;
  transform: scale(1.15);
}

.profile-character-preview--inventory {
  grid-area: avatar;
  min-height: 204px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(8, 16, 8, 0.12), rgba(0, 0, 0, 0.18)),
    url("./Assets/Avatar%20background.png") center bottom / auto 100% no-repeat;
  padding: 0 0 16px;
  align-items: end;
}

.profile-character-preview--inventory .profile-character-art {
  width: min(100%, 248px);
  transform: scale(1.02);
  transform-origin: center top;
  margin-top: 0;
}

.profile-inventory-avatar-copy {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-top: 0;
  margin-top: -2px;
}

.profile-inventory-avatar-copy .profile-color-status {
  margin-top: 0;
  font-size: 0.72rem;
  line-height: 1.2;
}

.profile-inventory-avatar-copy .auth-mini-button {
  width: fit-content;
  min-width: 110px;
  min-height: 30px;
  height: 30px;
  font-size: 0.92rem;
}

[data-profile-tab-panel="items"] .inventory-grid[data-profile-items] {
  margin-top: 0;
}

[data-profile-items].inventory-grid.is-dragover {
  outline: 1px solid rgba(175, 255, 87, 0.42);
  outline-offset: 2px;
}

.profile-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.profile-card .auth-mini-button {
  min-width: 120px;
  width: 120px;
  min-height: 36px;
  height: 36px;
  flex: 0 0 120px;
  padding: 4px 8px;
  font-size: 1.12rem;
}

.profile-color-input {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(175, 255, 87, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px;
}

.profile-color-status {
  margin-top: 10px;
}

.profile-color-status[data-state="error"] {
  color: #ff9b84;
}

.profile-account-field {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.profile-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.profile-account-input {
  width: 100%;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  overflow: hidden;
}

[data-profile-inventory].inventory-grid {
  grid-template-columns: repeat(4, 88px);
  gap: 10px 10px;
  justify-content: center;
}

.inventory-slot {
  min-height: 88px;
  border: 0;
  border-radius: 0;
  background: transparent url("./Assets/itemframe.png") center / 100% 100% no-repeat;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  position: relative;
}

.inventory-slot--wearable {
  cursor: url("./Assets/highlight.png")
      16 16,
    pointer;
}

.inventory-slot--wearable.is-dragging {
  opacity: 0.58;
  transform: scale(0.97);
}

.inventory-slot--wearable.is-equipped {
  filter: drop-shadow(0 0 6px rgba(175, 255, 87, 0.34));
}

.inventory-slot--achievement {
  width: 88px;
  min-height: 0;
  grid-template-rows: 88px auto;
  justify-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.inventory-slot span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.inventory-slot-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.64rem;
  line-height: 1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.inventory-slot-art-wrap {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(175, 255, 87, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
  box-sizing: border-box;
}

.inventory-slot-art {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.inventory-slot-equip-badge {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(5, 11, 4, 0.86);
  color: var(--text);
  font-size: 0.56rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}

.inventory-slot--wearable:hover .inventory-slot-equip-badge,
.inventory-slot--wearable:focus-within .inventory-slot-equip-badge,
.inventory-slot--wearable.is-equipped .inventory-slot-equip-badge {
  opacity: 1;
  transform: translateY(0);
}

[data-profile-items].inventory-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  margin-top: 6px;
}

[data-profile-tab-panel="items"] {
  overflow: hidden;
  padding-right: 0;
}

[data-profile-tab-panel="items"] .profile-panel--first {
  margin-top: 2px;
  display: block;
  gap: 0;
}

[data-profile-tab-panel="items"] .inventory-slot {
  min-height: 0;
  width: 100%;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 0;
}

[data-profile-tab-panel="items"] .inventory-slot-art {
  max-width: 82%;
  max-height: 82%;
}

.profile-items-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.profile-items-pagination .auth-mini-button {
  min-width: 0;
  width: auto;
  flex: 0 0 auto;
  min-height: 28px;
  height: 28px;
  font-size: 1rem;
  padding: 0 10px;
  line-height: 1;
}

.profile-items-page-label {
  margin: 0;
  min-width: 92px;
  text-align: center;
  font-size: 0.68rem;
}
/* Hide inventory while Customize mode is open (mobile only) */
.is-mobile-profile-page .profile-card:has(.profile-character-controls:not([hidden])) [data-profile-items].inventory-grid,
.is-mobile-profile-page .profile-card:has(.profile-character-controls:not([hidden])) .profile-items-pagination {
    display: none !important;
}
/* Hide PREV/NEXT while Customize is open (mobile only) */
.is-mobile-profile-page .profile-card:has(.profile-character-controls:not([hidden])) [data-profile-items-prev],
.is-mobile-profile-page .profile-card:has(.profile-character-controls:not([hidden])) [data-profile-items-next] {
    display: none !important;
}

.profile-card .inventory-slot-action {
  width: 82px;
  height: 41px;
  min-width: 82px;
  min-height: 41px;
  flex: 0 0 82px;
  font-size: 0.82rem;
  margin-top: 0;
  padding: 0 8px;
  line-height: 1;
  background-image: url("./Assets/Claim%20item.png");
  background-size: 100% 100%;
}

.profile-card .inventory-slot-action:hover,
.profile-card .inventory-slot-action:focus-visible {
  background-image: url("./Assets/Claim%20item%20hover.png");
}

.inventory-floating-tooltip {
  position: fixed;
  width: 220px;
  padding: 10px 12px;
  border: 1px solid rgba(175, 255, 87, 0.18);
  border-radius: 14px;
  background: rgba(5, 11, 4, 0.96);
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 1.15rem;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2147483640;
}

.inventory-floating-tooltip-title {
  margin-bottom: 4px;
  font-size: 1.28rem;
  line-height: 1;
}

.profile-empty {
  margin-top: 14px;
}


.world-launcher {
  position: fixed;
  left: 28px;
  bottom: 84px;
  z-index: 2147483598;
  width: 116px;
  height: 116px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent url("./Assets/World%20Button.png") center / 100% 100% no-repeat;
  color: transparent;
  font-size: 0;
}

.world-launcher:hover,
.world-launcher:focus-visible {
  background-image: url("./Assets/World%20Button%20Hover.png");
  outline: none;
}

.chat-overlay[hidden] {
  display: none;
}

.chat-overlay {
  position: fixed;
  left: 18px;
  bottom: 76px;
  width: min(380px, calc(100vw - 24px));
  height: min(430px, calc(100vh - 110px));
  z-index: 61;
}

.chat-backdrop {
  display: none;
}

.world-overlay[hidden] {
  display: none;
}

.world-overlay {
  --world-base-width: 920px;
  --world-base-height: 640px;
  --world-fit-scale: 1;
  --world-stage-visual-scale: 1;
  --world-stage-visual-offset-x: 0px;
  --world-reference-stage-width: 876px;
  --world-reference-stage-height: 436px;
  position: fixed;
  inset: 0;
  z-index: 2147483606;
  display: block;
  overflow: hidden;
  pointer-events: none;
  touch-action: manipulation;
}

.world-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

.world-card-scale {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: calc(var(--world-base-width) * var(--world-fit-scale));
  height: calc(var(--world-base-height) * var(--world-fit-scale));
  display: block;
  pointer-events: auto;
}

.world-card {
  position: relative;
  width: 920px;
  height: 640px;
  padding: 24px 22px 18px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: visible;
  transform: scale(var(--world-fit-scale));
  transform-origin: top left;
}

.world-card.is-chat-log-open {
  overflow: visible;
}

.world-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 18px 8px 18px 8px;
  box-sizing: border-box;
}

.world-window-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.world-window-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  position: relative;
  top: -6px;
  right: -8px;
}

.world-fullscreen-button {
  position: relative;
  top: 0;
  left: 0;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent url("./Assets/ui-fullscreen.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transition: transform 140ms ease;
}

.world-fullscreen-button:hover,
.world-fullscreen-button:focus-visible {
  background-image: url("./Assets/ui-fullscreen-hover.png");
  transform: scale(1.06);
}

.world-window-bar[data-world-drag-handle] {
  cursor: url("./Assets/highlight.png")
      16 16,
    pointer;
  user-select: none;
  touch-action: none;
}

.world-window-bar[data-world-drag-handle].is-dragging {
  cursor: url("./Assets/highlight.png")
      16 16,
    pointer;
}

.world-window-bar h2 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1;
}

.leaderboard-close.world-close {
  position: relative;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  margin-left: -4px;
}

.world-resize-handle {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(175, 255, 87, 0.42);
  border-bottom: 2px solid rgba(175, 255, 87, 0.42);
  cursor: nwse-resize;
  opacity: 0.92;
  z-index: 2;
  touch-action: none;
}

.world-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.world-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  position: static;
}

.world-chat-log {
  position: fixed;
  top: 16px;
  left: 16px;
  width: 300px;
  height: 430px;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 0 12px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
  z-index: 7;
  pointer-events: auto;
}

.world-chat-log.is-window-docked {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -280px;
  height: auto;
  z-index: 8;
}

.world-chat-log[hidden] {
  display: none !important;
}

.world-chat-log-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  width: 100%;
  padding: 18px 8px 8px;
  box-sizing: border-box;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--text);
  background: transparent;
  border-bottom: 0;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.world-chat-log-list {
  height: 100%;
  overflow-y: auto;
  padding: 5px 7px;
  padding-right: 4px;
  display: grid;
  gap: 0;
  align-content: start;
  border: 1px solid rgba(175, 255, 87, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
}

.world-chat-log-resize {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(175, 255, 87, 0.42);
  border-bottom: 2px solid rgba(175, 255, 87, 0.42);
  cursor: nwse-resize;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  touch-action: none;
}

.world-chat-log-item {
  display: grid;
  gap: 2px;
  padding: 3px 0;
  border-radius: 0;
  background: transparent;
}

.world-chat-log-item + .world-chat-log-item {
  border-top: 1px solid rgba(175, 255, 87, 0.08);
}

.world-chat-log-empty {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
  padding: 18px 0;
}

.world-chat-log-name {
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 0.96rem;
  line-height: 1;
}

.world-chat-log-body {
  color: var(--text);
  font-size: 0.74rem;
  line-height: 1.12;
  white-space: pre-wrap;
  word-break: break-word;
}

.world-chat-log-toggle {
  width: 94px;
  min-width: 94px;
  height: 28px;
  min-height: 28px;
  flex: 0 0 94px;
  padding: 0 6px;
  font-size: 0.82rem;
  line-height: 1;
}

.world-stage-wrap {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.world-stage {
  --world-scene-top: 0px;
  --world-scene-height: 100%;
  --world-view-zoom: 1;
  --world-zoom-origin-x: 50%;
  --world-zoom-origin-y: 100%;
  --world-avatar-size: 180px;
  --world-bubble-max-width: 220px;
  --world-bubble-font-size: 0.84rem;
  --world-name-max-width: 150px;
  --world-name-font-size: 1.15rem;
  --world-base-floor-bottom: 14%;
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(175, 255, 87, 0.12);
  border-radius: 14px;
  background: rgba(6, 11, 6, 0.9);
  transform: scale(var(--world-view-zoom));
  transform-origin: var(--world-zoom-origin-x) var(--world-zoom-origin-y);
}

.world-scene,
.world-platforms {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--world-scene-height);
  pointer-events: none;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate3d(0, var(--world-scene-top), 0);
  transform-origin: top center;
  will-change: transform;
  backface-visibility: hidden;
}

.world-scene {
  z-index: 0;
  background-image: url("./Assets/World/World Background.png");
}

.world-platforms {
  z-index: 1;
  background-image: url("./Assets/World/World Platforms.png");
}

.world-actors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.world-stage::before {
  content: none;
}

.world-stage::after {
  content: none;
}

.world-avatar {
  --world-avatar-lift: 0px;
  --world-avatar-drag-x: 0px;
  --world-avatar-drag-y: 0px;
  --world-avatar-scale-x: 1;
  --world-avatar-art-scale-x: 1;
  --world-avatar-art-scale-y: 1;
  --world-avatar-art-shift-y: 0px;
  --world-avatar-art-tilt: 0deg;
  --world-avatar-bob-distance: 4px;
  --world-avatar-feature-scale-x: 1;
  --world-avatar-feature-scale-y: 1;
  --world-avatar-feature-shift-y: 0px;
  position: absolute;
  bottom: var(--world-base-floor-bottom);
  width: var(--world-avatar-size);
  transform: translateX(-50%) translate3d(var(--world-avatar-drag-x), calc(var(--world-avatar-lift) + var(--world-avatar-drag-y)), 0) scaleX(var(--world-avatar-scale-x));
  transform-origin: center bottom;
  z-index: 3;
  cursor: url("./Assets/highlight.png")
      16 16,
    pointer;
  touch-action: none;
  transition: filter 120ms ease;
}

.world-avatar--remote {
  z-index: 1;
  cursor: pointer;
  touch-action: auto;
  pointer-events: auto;
  will-change: left, transform;
  backface-visibility: hidden;
}

.profile-overlay--public [data-profile-tab-target="settings"],
.profile-overlay--public [data-profile-character-save],
.profile-overlay--public [data-profile-character-customize],
.profile-overlay--public .inventory-slot-equip-badge,
.profile-overlay--public .inventory-slot-action,
.profile-overlay--public [data-profile-items-pagination] {
  display: none !important;
}

[data-profile-add-friend] {
  display: none;
  margin-top: 8px;
}

.profile-overlay--public [data-profile-add-friend] {
  display: inline-flex;
}


.world-avatar.is-facing-right {
  --world-avatar-scale-x: -1;
}

.world-avatar.is-aiming {
  cursor: url("./Assets/highlight.png")
      16 16,
    pointer;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
}

.world-avatar.is-airborne {
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.24));
}

.world-avatar.is-moving .profile-character-art {
  animation: world-avatar-bob 220ms ease-in-out infinite alternate;
}

.world-avatar.is-facing-right .profile-character-layer--shirt-decal,
.world-avatar.is-facing-right .profile-character-layer--decal-no-flip {
  transform: scaleX(-1);
  transform-origin: center;
}

.world-avatar.is-facing-right .profile-character-layer--shirt-decal.profile-character-layer--decal-no-flip {
  transform: translateX(-7%) scaleX(-1);
}

.world-avatar .profile-character-art {
  width: var(--world-avatar-size);
  transform: translate3d(0, var(--world-avatar-art-shift-y), 0) rotate(var(--world-avatar-art-tilt)) scaleX(var(--world-avatar-art-scale-x)) scaleY(var(--world-avatar-art-scale-y));
  transform-origin: center bottom;
  will-change: transform;
}

.world-avatar .profile-character-layer--eyes,
.world-avatar .profile-character-layer--pupils,
.world-avatar .profile-character-layer--eyelid-left,
.world-avatar .profile-character-layer--eyelid-right,
.world-avatar .profile-character-layer--mouth,
.world-avatar .profile-character-layer--hat,
.world-avatar .profile-character-layer--accessory,
.world-avatar .profile-character-layer--wearable-extra {
  transform: translate3d(0, var(--world-avatar-feature-shift-y), 0) scaleX(var(--world-avatar-feature-scale-x)) scaleY(var(--world-avatar-feature-scale-y));
  transform-origin: center 42%;
}

.world-chat-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 20px);
  max-width: var(--world-bubble-max-width);
  padding: 9px 12px;
  border: 1px solid rgba(8, 20, 9, 0.24);
  border-radius: 18px;
  background: rgba(252, 255, 245, 0.94);
  color: #1a1d13;
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--world-bubble-font-size);
  line-height: 1.28;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.world-chat-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-right: 1px solid rgba(8, 20, 9, 0.18);
  border-bottom: 1px solid rgba(8, 20, 9, 0.18);
  transform: translateX(-50%) rotate(45deg);
}

.world-avatar-name {
  position: absolute;
  left: 50%;
  bottom: -10px;
  max-width: var(--world-name-max-width);
  padding: 8px 12px;
  margin: -8px 0;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Jolly Lodger", cursive;
  font-size: var(--world-name-font-size);
  line-height: 1;
  transform: translateX(-50%) scaleX(var(--world-avatar-scale-x));
  pointer-events: none;
}

.world-avatar.is-facing-right .world-chat-bubble {
  transform: translateX(-50%) scaleX(-1);
}

.world-footer {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.world-chat-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.world-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  max-width: 420px;
}

.world-chat-input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(175, 255, 87, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
  font: inherit;
  padding: 0 14px;
}

.world-chat-input::placeholder {
  color: rgba(245, 247, 232, 0.56);
}

.world-chat-input:focus-visible {
  outline: 1px solid rgba(175, 255, 87, 0.42);
  border-color: rgba(175, 255, 87, 0.48);
}

.world-overlay.is-fullscreen .world-window-bar {
  position: fixed;
  top: max(22px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 6;
  width: auto;
  min-height: 0;
  padding: 0;
}

.world-overlay.is-fullscreen .world-window-heading,
.world-overlay.is-fullscreen .world-copy {
  display: none;
}

.world-overlay.is-fullscreen .world-card {
  width: 100%;
  height: 100%;
  padding: 0;
  gap: 0;
  grid-template-rows: minmax(0, 1fr);
  background: transparent;
  background-image: none;
  background-color: transparent;
  transform: none;
}

.world-overlay.is-fullscreen .world-main {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0;
}

.world-overlay.is-fullscreen .world-stage-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.world-overlay.is-fullscreen .world-stage {
  width: var(--world-reference-stage-width);
  height: var(--world-reference-stage-height);
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  transform: translate3d(var(--world-stage-visual-offset-x), 0, 0) scale(calc(var(--world-stage-visual-scale) * var(--world-view-zoom)));
  transform-origin: var(--world-zoom-origin-x) var(--world-zoom-origin-y);
}

.world-overlay.is-fullscreen .world-footer {
  position: fixed;
  left: 50%;
  bottom: max(38px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 6;
  width: min(600px, calc(100vw - 40px));
}

.world-overlay.is-fullscreen .world-chat-bar {
  gap: 12px;
}

.world-overlay.is-fullscreen .world-chat-form {
  max-width: none;
}

.world-overlay.is-fullscreen .world-window-actions {
  gap: 0;
}

.world-overlay.is-fullscreen .world-fullscreen-button {
  margin: 0;
}

.world-overlay.is-fullscreen .world-close {
  margin: 0;
}

.world-overlay.is-fullscreen .world-chat-log {
  width: 300px;
  height: 430px;
  z-index: 6;
  cursor: move;
}

.world-overlay.is-fullscreen .world-chat-log-resize {
  opacity: 0.92;
  pointer-events: auto;
}

.world-chat-log.is-window-docked .world-chat-log-resize {
  display: none;
}

@keyframes world-avatar-bob {
  from {
    transform: translate3d(0, calc(var(--world-avatar-art-shift-y) + 0px), 0) rotate(var(--world-avatar-art-tilt)) scaleX(var(--world-avatar-art-scale-x)) scaleY(var(--world-avatar-art-scale-y));
  }
  to {
    transform: translate3d(0, calc(var(--world-avatar-art-shift-y) - var(--world-avatar-bob-distance)), 0) rotate(var(--world-avatar-art-tilt)) scaleX(var(--world-avatar-art-scale-x)) scaleY(var(--world-avatar-art-scale-y));
  }
}

@keyframes world-avatar-idle {
  0%, 100% {
    transform: translate3d(0, calc(var(--world-avatar-art-shift-y) + 0px), 0) rotate(var(--world-avatar-art-tilt)) scaleX(var(--world-avatar-art-scale-x)) scaleY(var(--world-avatar-art-scale-y));
  }
  50% {
    transform: translate3d(0, calc(var(--world-avatar-art-shift-y) - 2px), 0) rotate(var(--world-avatar-art-tilt)) scaleX(var(--world-avatar-art-scale-x)) scaleY(var(--world-avatar-art-scale-y));
  }
}

.world-avatar--remote:not(.is-moving):not(.is-airborne):not(.is-crouching) .profile-character-art {
  animation: world-avatar-idle 2400ms ease-in-out infinite;
}

.chat-card {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 24px 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.chat-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 78px;
  width: 100%;
  padding: 18px 44px 18px 8px;
  box-sizing: border-box;
  cursor: move;
  user-select: none;
}

.chat-window-bar h2 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1;
}

.chat-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 42px;
  height: 42px;
}

.chat-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.chat-owner-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.chat-owner-tools .auth-mini-button {
  min-width: 0;
}

.chat-messages {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  display: grid;
  gap: 0;
  padding: 5px 7px;
  padding-right: 4px;
  border: 1px solid rgba(175, 255, 87, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
  align-content: start;
}

.chat-message,
.chat-empty {
  padding: 3px 0;
}

.chat-empty {
  color: var(--muted);
  text-align: center;
  padding: 18px 0;
}

.chat-message + .chat-message {
  border-top: 1px solid rgba(175, 255, 87, 0.08);
}

.chat-message-head {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin-bottom: 0;
  margin-right: 4px;
  line-height: 1;
  vertical-align: middle;
}

.chat-message-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.chat-message-name {
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 0.96rem;
  line-height: 1;
}

.chat-message-time {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: right;
}

.chat-message-body {
  display: inline;
  color: var(--text);
  font-size: 0.74rem;
  line-height: 1.12;
  white-space: pre-wrap;
  word-break: break-word;
  padding-right: 0;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  padding-bottom: 0;
  align-self: end;
}

.chat-input {
  width: 100%;
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
  border: 1px solid rgba(175, 255, 87, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.86rem;
  line-height: 1.2;
  margin: 0;
}

.chat-input:disabled {
  opacity: 0.65;
}

.chat-form .auth-mini-button,
.chat-form [data-chat-send] {
  width: 92px;
  height: 36px;
  min-width: 92px;
  min-height: 36px;
  flex: 0 0 92px;
  align-self: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0 8px;
  line-height: 1;
}

.chat-resize-handle {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(175, 255, 87, 0.4);
  border-bottom: 2px solid rgba(175, 255, 87, 0.4);
  cursor: nwse-resize;
  opacity: 0.9;
  z-index: 2;
}

.auth-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.auth-stat {
  border: 1px solid rgba(175, 255, 87, 0.18);
  border-radius: 18px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.16);
}

.auth-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
}

.auth-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 2.2rem;
  line-height: 1;
}

.auth-stat--mobile-message {
  grid-column: 1 / -1;
}

.auth-stat--mobile-message span {
  margin-bottom: 8px;
  color: #d9403a;
  font-family: "Jolly Lodger", cursive;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-stat--mobile-message strong {
  margin-top: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.96rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #f6f2d6;
}

/* ── Tour dates overlay ──────────────────────────────────────────── */
.tour-overlay[hidden] { display: none; }

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483596;
  display: grid;
  place-items: center;
}

.tour-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.tour-overlay__panel {
  position: relative;
  z-index: 1;
  width: min(540px, calc(100vw - 24px));
  max-height: min(600px, calc(100vh - 60px));
  background: #111111;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85);
}

.tour-overlay__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent url("./Assets/ui-close-default.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  z-index: 2;
  transition: transform 140ms ease;
  -webkit-tap-highlight-color: transparent;
}

.tour-overlay__close:hover,
.tour-overlay__close:focus-visible {
  background-image: url("./Assets/ui-close-hover.png");
  transform: scale(1.06);
}

.tour-overlay__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 56px 16px 16px;
}

/* Bandsintown widget fills the body cleanly */
.tour-overlay__body .bit-widget-container,
.tour-overlay__body .bit-widget {
  max-width: 100% !important;
}

@media (max-width: 720px) {
  .tour-overlay__panel {
    align-self: start;
    margin-top: max(16px, env(safe-area-inset-top, 16px));
    max-height: min(460px, calc(100vh - 180px - env(safe-area-inset-bottom, 0px)));
    width: min(100vw - 18px, 360px);
  }
}

.leaderboard-overlay[hidden] {
  display: none;
}

.leaderboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
}

.leaderboard-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
}

.leaderboard-section {
  position: relative;
  z-index: 1;
  width: min(540px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 120px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px 20px 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.leaderboard-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent url("./Assets/ui-close-default.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  padding: 0;
  transition: transform 140ms ease;
}

.leaderboard-close:hover,
.leaderboard-close:focus-visible {
  background-image: url("./Assets/ui-close-hover.png");
  transform: scale(1.06);
}

.leaderboard-panel {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(175, 255, 87, 0.16);
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.leaderboard-section h2 {
  margin-bottom: 6px;
}

.leaderboard-panel h3 {
  margin: 0;
  font-size: 1.65rem;
}

.leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 6px;
}

.leaderboard-item,
.leaderboard-empty {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 68px;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(175, 255, 87, 0.16);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}

.leaderboard-empty {
  grid-template-columns: 1fr;
  color: var(--muted);
}

.leaderboard-rank,
.leaderboard-score {
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 1.25rem;
}

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

.leaderboard-name {
  color: var(--text);
  font-family: "Jolly Lodger", cursive;
  font-size: 1.08rem;
  line-height: 1;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.highscore-star {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.highscore-star--leaderboard {
  width: 22px;
  height: 22px;
}

.highscore-star--chat {
  width: 20px;
  height: 20px;
  transform: translateY(-1px);
}

.page-main {
  min-height: 40vh;
}

/* About page: undo the global html/body overflow lock so content can scroll */
html:has(body.about-page) {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
}

body.about-page {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
}

.about-page .site-shell {
  width: min(1280px, calc(100% - 24px));
}

.about-main {
  min-height: 0;
}

.about-window {
  position: relative;
  width: min(1120px, 100%);
  margin: 22px auto 0;
  min-height: 640px;
  padding: 14px 14px 18px;
  background: transparent;
  background-image: none;
  box-shadow: none;
}

.about-window-bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-height: 96px;
  padding: 14px 54px 10px 10px;
}

.about-window-heading {
  display: grid;
  gap: 4px;
}

.about-window-heading .eyebrow {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-window-heading h2 {
  font-size: clamp(2.6rem, 4vw, 4rem);
}

.about-window-close {
  top: 6px;
  right: 6px;
}

.about-window-body {
  display: grid;
  gap: 16px;
  padding: 0 10px 10px;
}

.about-intro {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.home-main {
  position: relative;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
}

.member-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 100%;
  padding: 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.member-card h3 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
}

.member-role {
  margin: -2px 0 0;
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 1.45rem;
  line-height: 1;
}

.member-card p {
  margin: 0;
}

.member-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: 0;
  background: transparent;
}

.member-image-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(3, 7, 2, 0.5));
  pointer-events: none;
}

.member-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

.contact-form-static {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.field-block {
  display: grid;
  gap: 8px;
  text-align: left;
  color: var(--text);
}

.field-block span {
  font-size: 1rem;
}

.field-block input,
.field-block textarea {
  width: 100%;
  border: 1px solid rgba(175, 255, 87, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
}

.field-block textarea {
  min-height: 180px;
  resize: vertical;
}

.contact-submit {
  justify-self: center;
}

.contact-note {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.maintenance-panel {
  width: min(780px, calc(100% - 8px));
  margin: 32px auto 0;
  padding: 28px;
  text-align: center;
  background: rgba(5, 11, 4, 0.34);
  border: 1px solid rgba(175, 255, 87, 0.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.maintenance-copy {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 1.1rem;
}

.maintenance-button {
  display: inline-flex;
  margin-top: 18px;
}

.maintenance-image {
  width: min(520px, 100%);
  margin: 24px auto 0;
}

.site-footer {
  text-align: center;
  color: var(--accent);
  margin-top: 220px;
  margin-bottom: 8px;
  font-size: 1.2rem;
  font-family: "Jolly Lodger", cursive;
  letter-spacing: 0.03em;
}

.site-build-label {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(162, 255, 0, 0.9);
  font-size: 0.72rem;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 9999;
}

.mobile-orientation-lock {
  display: none;
}

.mobile-orientation-lock__card {
  width: min(320px, calc(100vw - 28px));
  padding: 26px 20px;
  text-align: center;
}

.mobile-orientation-lock__card h2 {
  margin: 0;
  color: #ff4d5c;
  font-family: "Jolly Lodger", cursive;
  font-size: 2.6rem;
  line-height: 1;
  text-transform: uppercase;
}

.mobile-orientation-lock__card p {
  margin: 10px 0 0;
  color: #f5f7e8;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.98rem;
  line-height: 1.35;
}

.achievement-toast-host {
  position: fixed;
  left: 220px;
  top: 14px;
  z-index: 2147483599;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.achievement-toast {
  min-width: 260px;
  max-width: min(340px, calc(100vw - 36px));
  min-height: 120px;
  padding: 18px 22px;
  color: #181818;
  background: transparent url("./Assets/ui ach popup.png") center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 120ms ease;
}

.achievement-toast.is-visible {
  opacity: 1;
}

.achievement-toast.has-claim {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 14px;
}

.achievement-toast__claim {
  pointer-events: auto;
  background-image: url("./Assets/Claim%20item.png");
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  width: 82px;
  height: 41px;
  cursor: pointer;
  font-size: 0;
  flex-shrink: 0;
}

.achievement-toast__claim:hover:not(:disabled),
.achievement-toast__claim:focus-visible:not(:disabled) {
  background-image: url("./Assets/Claim%20item%20hover.png");
}

.achievement-toast__claim:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 720px) {
  .achievement-toast-host {
    left: 50%;
    top: 18px;
    justify-items: center;
    transform: translateX(-50%);
    width: min(100vw - 20px, 340px);
  }

  .achievement-toast {
    min-width: 0;
    width: 100%;
  }
}


.tour-button {
  position: absolute;
  top: -120px;
  right: 8px;
  z-index: 16;
  width: 250px;
}

.vinyl-button {
  position: fixed;
  left: 155px;
  bottom: 190px;
  z-index: 2147483597;
  width: 320px;
  display: block;
}

.vinyl-button img {
  width: 100%;
  transition: transform 180ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.vinyl-button:hover img,
.vinyl-button:focus-visible img {
  content: url("./Assets/Vinyl Hover.png");
  transform: scale(1.05);
}

.vinyl-button,
.vinyl-button:focus,
.vinyl-button:focus-visible,
.vinyl-button:active {
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.tour-button img {
  width: 100%;
  transition: transform 180ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.tour-button:hover img,
.tour-button:focus-visible img {
  content: url("./Assets/Tour Button Hover.png");
}

.tour-button:hover img,
.tour-button:focus-visible img {
  transform: scale(1.05);
}

.tour-button,
.tour-button:focus,
.tour-button:focus-visible,
.tour-button:active {
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.rr-launcher {
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 2147483600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 2px solid rgba(0, 0, 0, 0.7);
  border-radius: 999px;
  background: rgba(10, 20, 7, 0.92);
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 1.55rem;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.rr-overlay {
  position: absolute;
  inset: 0 0 auto 0;
  /* Above dock (2147483595) and profile overlay (2147483596) so all game UI
     renders in front during gameplay without per-element z-index patches. */
  z-index: 2147483597;
  pointer-events: none;
  overflow: hidden;
  /* Prevent double-tap zoom on the game canvas; pinch-zoom blocked via JS */
  touch-action: manipulation;
}

.rr-overlay.is-active {
  display: block;
}

/* Scoped gameplay zoom/gesture prevention — only active while is-rr-gameplay is on body */

/* Backdrop: miss-taps that pass through the game stage to the page body cannot
   trigger double-tap zoom. touch-action: manipulation keeps panning and single
   taps working; it does NOT block widget buttons or header links from tapping. */
body.is-rr-gameplay {
  touch-action: manipulation;
}

/* Game actors: full gesture prevention (scroll, rubber-band, zoom) while game is active.
   CSS touch-action: none does NOT prevent pointerdown — damage input still fires normally. */
body.is-rr-gameplay .rr-fly,
body.is-rr-gameplay .rr-boss,
body.is-rr-gameplay .rr-boss-hit-area {
  touch-action: none;
}

.rr-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 180ms ease;
  /* Prevents double-tap zoom on miss-taps between flies */
  touch-action: manipulation;
}

.rr-overlay.is-active .rr-dim {
  opacity: 1;
}

.rr-overlay.is-boss-intro .rr-dim {
  opacity: 1;
  background: rgba(0, 0, 0, 0.45);
}

.rr-overlay.is-mobile-lite .rr-dim,
.rr-overlay.is-mobile-lite .rr-boss-intro,
.rr-overlay.is-mobile-lite .rr-start-card,
.rr-overlay.is-mobile-lite .rr-end-card,
.rr-overlay.is-mobile-lite .rr-boss-wrap {
  display: none !important;
}

.rr-overlay.is-mobile-lite .rr-controls,
.rr-overlay.is-mobile-lite .rr-message,
.rr-overlay.is-mobile-lite .rr-banner {
  display: none !important;
}

.rr-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rr-counter,
.rr-timer,
.rr-endgame-button,
.rr-endgame-confirm {
  position: fixed;
  z-index: 2147483601;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.72);
  font-family: "Jolly Lodger", cursive;
  font-size: 2rem;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
}

.rr-counter {
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent);
  pointer-events: none;
}

.rr-controls {
  position: fixed;
  bottom: 72px;
  left: 50%;
  z-index: 2147483601;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: auto;
}

.rr-timer {
  position: static;
  transform: none;
  color: #ff4d5c;
}

.rr-endgame {
  position: relative;
}

.rr-endgame-button {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}

.rr-endgame-button.is-confirm {
  color: #ff7f88;
}

.rr-endgame-confirm {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.rr-endgame-confirm[hidden] {
  display: none;
}

.rr-message {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483601;
  min-width: 220px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--accent);
  font-family: "Jolly Lodger", cursive;
  font-size: 2rem;
  text-align: center;
  opacity: 0;
  transition: opacity 180ms ease;
}

.rr-message.is-visible {
  opacity: 1;
}

.rr-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  z-index: 2147483604;
  width: min(640px, calc(100vw - 40px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}

.rr-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.rr-boss-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483604;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.rr-boss-intro[hidden] {
  display: none;
}

.rr-boss-intro.is-visible {
  opacity: 1;
}

.rr-boss-intro-copy {
  color: #ff4d5c;
  font-family: "Jolly Lodger", cursive;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 1;
  text-align: center;
  text-shadow: 2px 2px 0 #000;
}

.rr-boss-intro-count {
  color: #fff18a;
  font-family: "Jolly Lodger", cursive;
  font-size: clamp(4rem, 10vw, 7rem);
  line-height: 1;
  text-shadow: 2px 2px 0 #000;
  animation: rr-boss-countdown-pulse 900ms ease-in-out infinite;
}

.rr-start-card,
.rr-end-card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483602;
  width: min(460px, calc(100vw - 32px));
  padding: 26px 24px;
  border: 2px solid rgba(0, 0, 0, 0.8);
  border-radius: 26px;
  background: rgba(9, 18, 6, 0.96);
  color: var(--text);
  text-align: center;
  pointer-events: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.rr-start-card[hidden],
.rr-end-card[hidden] {
  display: none;
}

.rr-splash {
  width: min(300px, 80%);
  margin: 0 auto 14px;
}

.rr-card-copy {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.rr-card-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.rr-fly,
.rr-golden,
.rr-boss {
  position: absolute;
  z-index: 2147483603;
  display: block;
  padding: 0;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.rr-fly {
  width: 38px;
  height: 38px;
  left: 0;
  top: 0;
  image-rendering: auto;
  transition: transform 220ms ease-out;
  will-change: transform;
  overflow: visible;
  touch-action: manipulation;
}

.rr-fly::before {
  content: '';
  position: absolute;
  inset: -4px;
  pointer-events: auto;
}

.rr-fly:hover {
  cursor: url("./Assets/mallet.png") 16 16, pointer;
}

.rr-fly__img,
.rr-fly__splat {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
}

.rr-fly__img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.rr-fly__splat {
  width: 50px;
  height: 50px;
  max-width: none;
  max-height: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.rr-fly.is-splatted {
  pointer-events: none;
  transition: none;
}

.rr-fly.is-splatted .rr-fly__img { opacity: 0; }
.rr-fly.is-splatted .rr-fly__splat { opacity: 1; }

.rr-roach {
  width: 108px;
  height: 108px;
}

.rr-roach .rr-fly__splat {
  width: 28px;
  height: 28px;
}

.rr-roach-bonus {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #ff4d5c;
  font-family: "Jolly Lodger", cursive;
  font-size: 2rem;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  z-index: 2147483605;
}

.rr-stinkbug {
  width: 48px;
  height: 48px;
}

.rr-stinkbug-penalty {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #ff9900;
  font-family: "Jolly Lodger", cursive;
  font-size: 2rem;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  z-index: 2147483605;
}

.rr-boss-bonus-time,
.rr-boss-bonus-score {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Jolly Lodger", cursive;
  font-size: 2.75rem;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  z-index: 2147483605;
}

body.is-world-open .rr-fly,
body.is-world-open .rr-golden,
body.is-world-open .rr-boss,
body.is-world-open .rr-counter,
body.is-world-open .rr-launcher,
body.is-world-open .rr-roach-bonus,
body.is-world-open .rr-stinkbug-penalty,
body.is-world-open .rr-boss-bonus-time,
body.is-world-open .rr-boss-bonus-score {
  visibility: hidden;
  pointer-events: none;
}

.rr-boss-bonus-time {
  color: #ff3b3b;
}

.rr-boss-bonus-score {
  color: #7dff4e;
}

.rr-golden {
  width: 120px;
  height: 120px;
  background-image: url("./Assets/Golden Frog.png");
  filter: drop-shadow(0 0 16px rgba(255, 216, 77, 0.58));
  animation: rr-pulse 900ms ease-in-out infinite alternate;
}

.rr-boss-wrap {
  position: absolute;
  z-index: 2147483604;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 200px;
  pointer-events: none;
}

.rr-boss-wrap[hidden] {
  display: none;
}

.rr-boss-bar {
  width: 100%;
  height: 24px;
  border: 2px solid #000;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  overflow: hidden;
  pointer-events: none;
}

.rr-boss-bar[hidden] {
  display: none;
}

.rr-boss-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ffd84d, #ff4d5c);
}

.rr-boss-timer {
  width: 100%;
  height: 14px;
  border: 2px solid #000;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  overflow: hidden;
}

.rr-boss-timer-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ffef7a, #ff6b57);
}

.rr-boss {
  width: min(250px, 36vw);
  height: min(250px, 36vw);
  background-image: url("./Assets/BossFly.png");
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.45));
  transition: left 420ms ease, top 420ms ease, transform 120ms ease;
  will-change: transform;
}


/* Invisible enlarged touch target for boss — mobile only, created in JS */
.rr-boss-hit-area {
  position: absolute;
  z-index: 2147483604; /* above boss sprite so it catches taps first */
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  /* Uncomment to debug: background: rgba(255,0,0,0.15); */
}

.rr-boss.is-entering {
  animation: rr-boss-enter 520ms cubic-bezier(0.18, 0.8, 0.22, 1) both;
}

.rr-boss.is-hit {
  animation: rr-boss-hit 180ms ease;
}

@keyframes rr-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes rr-boss-hit {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes rr-boss-countdown-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes rr-boss-enter {
  0% {
    opacity: 0;
    transform: scale(0.25) rotate(-24deg);
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  65% {
    opacity: 1;
    transform: scale(1.14) rotate(8deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.45));
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@keyframes boss-hit {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 25px 18px rgba(0, 0, 0, 0.35));
  }
  50% {
    transform: scale(1.06);
    filter: brightness(1.3) drop-shadow(0 25px 18px rgba(0, 0, 0, 0.35));
  }
}

@media (max-width: 980px) {
  .game-layout {
    grid-template-columns: 1fr;
  }

  .about-window {
    min-height: 0;
  }

  .about-window-bar {
    min-height: 0;
    padding-right: 58px;
  }

  .member-grid {
    grid-template-columns: 1fr;
  }

  .tour-button {
    width: 190px;
    top: -90px;
    right: 6px;
  }

  .vinyl-button {
    width: 240px;
    left: 140px;
    bottom: 160px;
  }
}

@media (max-width: 640px) {
  .about-page .site-shell {
    width: min(100%, calc(100% - 12px));
  }

  .about-window {
    margin-top: 14px;
    padding: 10px 10px 14px;
  }

  .about-window-bar {
    padding: 12px 50px 8px 6px;
  }

  .about-window-body {
    padding: 0 6px 6px;
  }
}

@media (max-height: 760px) {
  .profile-card {
    padding: 10px;
  }

  .profile-hero,
  .profile-tabs,
  .profile-stats,
  .profile-panel,
  .profile-panel--first {
    margin-top: 4px;
  }

  .profile-panel {
    padding-top: 4px;
  }

  .profile-character-preview {
    min-height: 200px;
  }

  .profile-character-preview--inventory {
    min-height: 152px;
    padding-bottom: 8px;
  }

  .profile-character-preview--inventory .profile-character-art {
    width: min(100%, 180px);
    transform: scale(0.96);
  }

  .profile-inventory-equipment {
    grid-template-columns: 40px minmax(132px, 1fr) 40px;
    gap: 2px;
  }

  .profile-equipment-slot {
    min-height: 40px;
  }
}

@media (max-width: 720px) {
  html,
  body {
    min-height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.home-page {
    position: static;
    inset: auto;
    width: auto;
    touch-action: manipulation;
  }

  body.is-page-scroll-locked,
  body.is-mobile-world-fullscreen {
    width: 100%;
    height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  body.is-page-scroll-locked .site-shell,
  body.is-mobile-world-fullscreen .site-shell {
    height: 100svh;
    overflow: hidden;
  }

  .site-shell {
    width: min(100% - 18px, 1200px);
  }

  .home-page .site-shell {
    height: 100svh;
    overflow: hidden;
    padding-bottom: 0;
  }

  .home-page .auth-widget {
    display: none;
  }

  .site-flies-counter {
    display: none;
  }

  .site-flies-counter--footer {
    display: block;
    font-size: 1.1rem;
  }

  .auth-page .auth-widget {
    display: block;
    position: static;
    width: min(190px, calc(100% - 24px));
    margin: 0 auto 12px;
    padding: 22px 18px 18px;
  }

  .auth-page:not(.is-mobile-profile-page) .auth-page-main {
    justify-items: center;
  }

  .auth-page:not(.is-mobile-profile-page) .auth-widget--page .auth-mini-actions {
    grid-template-columns: 128px;
    gap: 2px;
  }

  .auth-page:not(.is-mobile-profile-page) .auth-widget--page .auth-show-password-toggle {
    width: 128px;
    justify-self: center;
  }

  .site-header {
    position: relative;
    padding-top: 10px;
    padding-right: 0;
  }

  .site-nav {
    gap: 14px;
    position: relative;
    z-index: 24;
  }

  .site-nav-login {
    display: inline-flex;
    position: relative;
    z-index: 25;
    pointer-events: auto;
  }

  .auth-profile-button,
  .home-page .profile-overlay {
    display: none !important;
  }

  .home-page .auth-widget .auth-footer {
    display: none;
  }

  .home-page .auth-widget .auth-user-actions {
    justify-content: center;
  }

  .home-page .auth-widget .auth-user-name {
    font-size: 1.2rem;
  }

  .home-page .auth-widget .auth-input {
    min-height: 28px;
    font-size: 0.72rem;
    padding: 5px 7px;
  }

  .home-page .page-main,
  .home-page .home-main,
  .home-page .home-stage,
  .home-page .game-layout,
  .home-page .game-stage,
  .home-page .rr-overlay,
  .home-page .rr-fly,
  .home-page .rr-boss,
  .home-page .tour-button,
  .home-page .vinyl-button {
    touch-action: manipulation;
  }

  .auth-stats {
    grid-template-columns: 1fr;
  }

  .profile-hero {
    flex-direction: column;
    text-align: center;
  }

  .profile-meta {
    text-align: center;
  }

  .profile-stats {
    grid-template-columns: 1fr;
  }

  .profile-tabs {
    flex-direction: column;
  }

  .profile-tab {
    width: 100%;
  }

  .profile-settings-grid {
    grid-template-columns: 1fr;
  }

  .profile-character-layout {
    grid-template-columns: 1fr;
  }

  .profile-inventory-avatar-panel {
    grid-template-columns: 1fr;
  }

  .profile-inventory-equipment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "avatar avatar"
      "head body"
      "hands legs"
      "accessory feet"
      "main_hand off_hand"
      "back accessory_2";
  }

  .profile-character-preview--inventory .profile-character-art {
    transform: scale(1.08);
  }

  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-profile-items].inventory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .profile-color-row {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-color-input {
    width: 100%;
    height: 52px;
  }

  .leaderboard-section {
    width: min(100vw - 18px, 340px);
    /* Pin to top so the panel clears the dock at the bottom */
    align-self: start;
    margin-top: max(16px, env(safe-area-inset-top, 16px));
    max-height: min(
      440px,
      calc(100vh - 180px - env(safe-area-inset-bottom, 0px))
    );
    padding: 16px 12px 14px;
  }

  .leaderboard-close {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
  }

  .leaderboard-section h2 {
    font-size: 1.7rem;
    margin-bottom: 4px;
  }

  .leaderboard-panel {
    margin-top: 10px;
    padding-top: 10px;
  }

  .leaderboard-panel h3 {
    font-size: 1.4rem;
  }

  .leaderboard-list {
    gap: 5px;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .leaderboard-item,
  .leaderboard-empty {
    grid-template-columns: 38px minmax(0, 1fr) 52px;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 10px;
  }

  .leaderboard-rank,
  .leaderboard-score {
    font-size: 1rem;
  }

  .leaderboard-name-wrap {
    gap: 4px;
  }

  .leaderboard-name {
    font-size: 0.92rem;
  }

  .highscore-star--leaderboard {
    width: 20px;
    height: 20px;
  }

  .auth-stats {
    gap: 8px;
  }

  .auth-stat {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .auth-stat span {
    font-size: 0.72rem;
  }

  .auth-stat strong {
    margin-top: 5px;
    font-size: 1.65rem;
  }

  .auth-stat--mobile-message {
    text-align: center;
    padding: 12px 14px;
  }

  .auth-stat--mobile-message strong {
    font-size: 0.88rem;
    line-height: 1.32;
  }

  .auth-stat--mobile-message span {
    font-size: 1.18rem;
  }

  .game-toolbar {
    grid-template-columns: 1fr;
  }

  .game-stage {
    min-height: 72vh;
  }

  .tour-button {
    position: absolute;
    top: -3px;
    right: -4px;
    display: block;
    margin: 0;
    width: 92px;
    z-index: 18;
  }

  .vinyl-button {
    position: fixed;
    left: auto;
    right: 0px;
    bottom: 148px;
    width: 210px;
  }

  .rr-launcher {
    right: 14px;
    bottom: 14px;
    font-size: 1.35rem;
  }

  .rr-counter {
    bottom: 28px;
    font-size: 1.55rem;
    padding: 6px 12px;
    white-space: nowrap;
  }

  .rr-fly {
    transition: transform 180ms linear;
    will-change: transform;
  }

  .rr-boss {
    /* Drop-shadow is a GPU-heavy repaint on every move tick — skip on mobile */
    filter: none;
    /* Remove left/top transitions so boss position updates are instant;
       layout-triggered CSS interpolation tanks frame rate on mobile */
    transition: transform 120ms ease;
    will-change: transform;
  }

  .rr-boss-bonus-time,
  .rr-boss-bonus-score {
    font-size: 2.15rem;
  }

  .rr-roach-bonus,
  .rr-stinkbug-penalty {
    font-size: 1.6rem;
  }

  .world-launcher {
    left: 8px;
    bottom: 24px;
    width: 84px;
    height: 84px;
    font-size: 0;
  }

  .world-overlay {
    padding: 0;
  }

  .world-card-scale {
    left: 0;
    top: 0;
  }

  .world-card {
    width: 920px;
    height: 640px;
    padding: 14px 12px 12px;
    gap: 6px;
  }

  .world-chat-log-toggle {
    width: 70px;
    min-width: 70px;
    flex-basis: 70px;
    height: 32px;
    min-height: 32px;
    padding-inline: 8px;
    font-size: 0.7rem;
  }

  .world-chat-log {
    width: 220px;
    height: 300px;
  }

  .world-window-bar {
    min-height: 56px;
    padding: 4px 0;
    gap: 8px;
  }

  .world-window-bar h2 {
    font-size: 1.22rem;
  }

  .world-window-heading {
    gap: 6px;
  }

  .world-window-actions {
    gap: 0;
  }

  .world-fullscreen-button {
    top: 0;
    left: 0;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .world-fullscreen-button[hidden] {
    display: none !important;
  }

  body.is-mobile-world-fullscreen .site-flies-counter,
  body.is-mobile-world-fullscreen .site-flies-counter--footer,
  body.is-mobile-world-fullscreen .rr-counter,
  body.is-mobile-world-fullscreen .rr-launcher,
  body.is-mobile-world-fullscreen .chat-launcher,
  body.is-mobile-world-fullscreen .world-launcher {
    display: none !important;
  }

  .leaderboard-close.world-close {
    width: 34px;
    height: 34px;
  }

  .world-copy {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .world-main {
    min-height: 0;
  }

  .world-stage-wrap {
    min-height: 0;
    height: auto;
    display: grid;
  }

  .world-stage {
    min-height: 0;
    transform: none;
    --world-avatar-size: 124px;
    --world-bubble-max-width: 160px;
    --world-bubble-font-size: 0.74rem;
    --world-name-max-width: 112px;
    --world-name-font-size: 0.96rem;
  }

  .world-resize-handle {
    display: none;
  }

  .world-chat-log-bar {
    min-height: 40px;
    padding: 10px 6px 6px;
    font-size: 0.9rem;
  }

  .world-footer {
    display: flex;
    justify-content: center;
    gap: 0;
  }

  .world-chat-bar {
    width: min(100%, 270px);
    justify-content: center;
    gap: 6px;
  }

  .world-chat-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    max-width: 194px;
  }

  .world-chat-input {
    min-height: 34px;
    padding-inline: 10px;
    font-size: 0.82rem;
  }

  body.is-mobile-world-fullscreen .world-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    z-index: 8;
  }

  body.is-mobile-world-fullscreen .world-chat-bar {
    width: min(100%, 300px);
    margin: 0 auto;
    gap: 5px;
    align-items: center;
    justify-content: center;
  }

  body.is-mobile-world-fullscreen .world-chat-log-toggle {
    width: 62px;
    min-width: 62px;
    flex-basis: 62px;
    height: 30px;
    min-height: 30px;
    font-size: 0.66rem;
  }

  body.is-mobile-world-fullscreen .world-chat-form {
    width: min(100%, 226px);
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
  }

  body.is-mobile-world-fullscreen .world-chat-input {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 0.76rem;
    background: rgba(5, 12, 6, 0.72);
  }

  body.is-mobile-world-fullscreen [data-world-chat-send] {
    min-width: 54px;
    height: 30px;
    min-height: 30px;
    padding-inline: 10px;
    font-size: 0.74rem;
  }

  body.is-mobile-world-fullscreen .world-card {
    width: 100%;
    height: 100%;
    padding: 0 2px 0;
    transform: none;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    background: transparent;
    background-image: none;
    background-color: transparent;
  }

  body.is-mobile-world-fullscreen .world-window-heading,
  body.is-mobile-world-fullscreen .world-copy {
    display: none;
  }

  body.is-mobile-world-fullscreen .world-window-bar {
    min-height: 28px;
    padding: 0;
    justify-content: flex-end;
  }

  body.is-mobile-world-fullscreen .world-main {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
  }

  body.is-mobile-world-fullscreen .world-stage-wrap {
    width: min(100%, calc(100dvh * 9 / 16));
    height: auto;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 9 / 16;
    justify-self: center;
    align-self: flex-start;
    margin-bottom: 0;
    overflow: visible;
  }

  body.is-mobile-world-fullscreen .world-stage {
    width: 100%;
    height: 100%;
    transform: scale(var(--world-view-zoom));
    transform-origin: var(--world-zoom-origin-x) var(--world-zoom-origin-y);
  }

  body.is-mobile-world-fullscreen .world-card-scale {
    width: 100%;
    height: 100%;
  }

  body.is-mobile-world-fullscreen .world-footer {
    position: absolute;
    bottom: min(-40px, env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    width: 100%;
    padding-bottom: 0;
    z-index: 10;
  }


  .chat-card {
    padding: 10px 8px 8px;
    gap: 6px;
  }

  .chat-window-bar {
    min-height: 54px;
    padding-inline: 6px 42px;
  }

  .chat-window-bar h2 {
    font-size: 1.2rem;
  }

  .chat-copy {
    font-size: 0.72rem;
  }

  .chat-owner-tools {
    gap: 6px;
  }

  .chat-owner-tools .auth-mini-button {
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    flex: 1 1 auto;
    font-size: 0.9rem;
  }

  .chat-messages {
    min-height: 0;
    max-height: none;
    font-size: 0.86rem;
    padding: 6px 6px;
  }

  .chat-message-name {
    font-size: 0.9rem;
  }

  .chat-message {
    gap: 2px;
    padding: 4px 0;
  }

  .chat-message-head {
    gap: 4px;
  }

  .chat-message-name-wrap {
    gap: 4px;
  }

  .chat-message-body {
    font-size: 0.78rem;
    line-height: 1.15;
  }

  .chat-form {
    grid-template-columns: 1fr 72px;
    gap: 6px;
    padding: 0 2px;
  }

  .chat-input {
    min-height: 32px;
    font-size: 0.82rem;
    padding: 6px 8px;
  }

  .chat-send-button,
  .chat-form .auth-mini-button {
    width: 72px;
    min-width: 72px;
    height: 32px;
    min-height: 32px;
    flex: 0 0 72px;
    font-size: 0.92rem;
  }

  .chat-resize-handle {
    display: none;
  }

  .is-mobile-profile-page .auth-widget {
    width: min(320px, calc(100% - 24px));
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    min-height: 0;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .is-mobile-profile-page .auth-widget-form {
    display: none;
  }

  .is-mobile-profile-page .auth-widget-user {
    display: contents;
  }

  .is-mobile-profile-page .auth-user-name,
  .is-mobile-profile-page .auth-profile-button,
  .is-mobile-profile-page .auth-status,
  .is-mobile-profile-page .auth-dev-dropdown {
    display: none !important;
  }

  .is-mobile-profile-page .auth-user-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;
    width: auto;
  }

  .is-mobile-profile-page .auth-footer {
    display: flex;
    justify-content: center;
    margin-top: 0;
    width: auto;
  }

  .is-mobile-profile-page .auth-view-leaderboard {
    display: inline-flex !important;
    width: 120px;
    min-width: 120px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 120px;
  }

  .is-mobile-profile-page .auth-widget .auth-mini-button {
    width: 120px;
    min-width: 120px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 120px;
  }

  .is-mobile-profile-page .site-shell {
    width: 100%;
  }

  /* True overlay on top of the homepage: no opaque fill, and the empty space around the
     card lets clicks pass through to whatever's underneath (dock, hero, etc). Only the
     card itself — positioned, opaque, and interactive — should capture pointer events. */
  .is-mobile-profile-page .profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483610;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: max(14px, env(safe-area-inset-top, 0px)) 0 max(14px, env(safe-area-inset-bottom, 0px));
    background: none;
    overflow: hidden;
    pointer-events: none;
  }

  .is-mobile-profile-page .profile-backdrop {
    display: none;
  }

  .is-mobile-profile-page .profile-card-scale {
    position: static;
    width: calc(100% - 24px);
    max-width: 100%;
    height: auto;
    pointer-events: auto;
  }

  .is-mobile-profile-page .profile-card {
    width: 100%;
    min-height: 0;
    height: auto;
    /* Cap to whichever is smaller: the usual 660px, or whatever the browser's own chrome
       actually leaves visible (100vh minus the profile-overlay's ~14px top/bottom padding).
       A flat 660px could be taller than a short viewport (e.g. Brave's UI chrome leaving
       less usable height than Safari's), and the overlay's own overflow: hidden would then
       silently clip the bottom of the card - including Prev/Next - with no way to scroll to it.
       body has `zoom: var(--ui-scale)` (1.25): 100vh resolves against the real, unzoomed
       viewport, but this max-height value itself then gets re-scaled by that same zoom when
       painted - so the vh-derived portion has to be divided by --ui-scale first, or the
       result renders 1.25x too tall and overflows the very viewport it's meant to fit. */
    max-height: min(660px, calc((100vh - 28px) / var(--ui-scale)));
    margin: 0 auto;
    padding: 18px 12px 20px;
    transform: none;
    overflow: hidden;
  }

  /* Standard site close (X) button — same component used everywhere else, just re-enabled
     and anchored to the card's own top-right corner (flush, independent of the title row). */
  .is-mobile-profile-page .profile-close {
    display: block;
  }

  .is-mobile-profile-page .profile-resize-handle {
    display: none;
  }

  .is-mobile-profile-page .auth-page-main {
    padding-top: 8px;
    justify-items: center;
  }

  .is-mobile-profile-page .site-flies-counter,
  .is-mobile-profile-page .site-flies-counter--footer,
  .is-mobile-profile-page .rr-counter {
    display: none !important;
  }

  .is-mobile-profile-page .profile-items-pagination .auth-mini-button {
    min-height: 22px;
    height: 22px;
    font-size: 1rem;
  }

  /* Same fix as the desktop version: .profile-card-scroll has a fixed height with
     overflow-y: auto, so content that runs slightly past its own box (e.g. Prev/Next) reads
     as clipped until manually scrolled. .profile-card is the real outer boundary and is now
     sized to actually fit the viewport (see max-height above), so it's safe to stop the inner
     scroll box from clipping too, letting anything that fits just show without scrolling. */
  .is-mobile-profile-page .profile-overlay [data-profile-tab-panel="items"] {
    overflow: visible;
  }

  .is-mobile-profile-page .profile-overlay .profile-card-scroll:has([data-profile-tab-panel="items"].is-active) {
    overflow: visible;
  }

  .is-mobile-profile-page .profile-card::before {
    content: none;
    display: block;
  }

  .is-mobile-profile-page .profile-card-scroll {
    padding-right: 0;
  }

  .is-mobile-profile-page .profile-hero {
    margin-top: 0;
    padding-right: 46px;
  }

  .is-mobile-profile-page .profile-hero[data-profile-drag-handle] {
    cursor: url("./Assets/cursor.png")
        16 16,
      auto;
    touch-action: auto;
  }

  .is-mobile-profile-page .profile-meta h2 {
    font-size: clamp(1rem, 5vw, 1.8rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .is-mobile-profile-page .profile-tabs {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-top: 12px;
    margin-left: -12px;
    margin-right: -12px;
    justify-content: center;
    overflow-x: visible;
  }

  .is-mobile-profile-page .profile-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Tabs shrink to share the row's full width instead of scrolling, so every tab (however
     many are shown) stays on screen at once. The overlap between tabs needs to scale down
     with their width too, or the tapered edges of the tab artwork show through as gaps. */
  .is-mobile-profile-page .profile-tab + .profile-tab {
    margin-left: -9px;
  }

  .is-mobile-profile-page .profile-tab {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    min-height: 35px;
    padding: 4px 2px;
    font-size: 0.8rem;
  }

  .is-mobile-profile-page .profile-stats,
  .is-mobile-profile-page .profile-settings-grid {
    grid-template-columns: 1fr;
  }

  .is-mobile-profile-page .profile-character-layout {
    grid-template-columns: 1fr;
  }

  .is-mobile-profile-page .profile-inventory-avatar-panel {
    grid-template-columns: 1fr;
  }

  /* Shift the whole lower section (equipment/avatar row, prev/customize/next/save-look,
     inventory grid, and everything beneath) up as one unit, closer to the tabs, so it fits
     inside the card's fixed max-height without scrolling. Only the block's position relative
     to the tabs above it changes — every gap and size inside the block is untouched. */
  .is-mobile-profile-page [data-profile-tab-panel="items"].profile-tab-panel {
    margin-top: -8px;
  }

  /* On shorter viewports (less usable vertical space, e.g. some mobile browser chrome takes
     more room than others), nudge the header and lower section up a bit further so Prev/Next
     still clears the card's max-height instead of being clipped. Sizes/gaps are untouched -
     only the vertical position shifts. */
  @media (max-height: 700px) {
    .is-mobile-profile-page .profile-hero {
      margin-top: 0;
    }

    .is-mobile-profile-page .profile-tabs {
      margin-top: 6px;
    }

    .is-mobile-profile-page [data-profile-tab-panel="items"].profile-tab-panel {
      margin-top: -16px;
    }
  }

  .is-mobile-profile-page .profile-inventory-equipment {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 2.56fr) minmax(0, 0.72fr);
    grid-template-areas:
      "head      avatar  body"
      "hands     avatar  legs"
      "accessory avatar  feet"
      "main_hand avatar  off_hand"
      "back      avatar  accessory_2";
    gap: 4px;
  }

  /* Larger avatar preview window — wider via the grid column above, taller here — with
     rounded corners matching the equipment slots it sits beside. */
  .is-mobile-profile-page .profile-character-preview--inventory {
    min-height: 232px;
    border-radius: 12px;
    overflow: hidden;
  }

  .is-mobile-profile-page .profile-character-preview--inventory .profile-character-art {
    width: min(100%, 232px);
    transform: scale(1.04);
  }

  /* Smaller equipment-slot boxes — only the outer box/padding shrinks; the 40x40 item art
     size (.profile-equipment-slot-art) is untouched so thumbnails stay the same visible size. */
  .is-mobile-profile-page .profile-equipment-slot {
    min-height: 44px;
    padding: 2px;
    gap: 0;
    border-radius: 8px;
  }

  .is-mobile-profile-page .profile-equipment-slot-name {
    font-size: 0.5rem;
  }

  .is-mobile-profile-page .profile-equipment-slot-item {
    font-size: 0.44rem;
  }
  .is-mobile-profile-page .inventory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .is-mobile-profile-page [data-profile-items].inventory-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
  }

  .is-mobile-profile-page [data-profile-inventory].inventory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .is-mobile-profile-page .chat-launcher,
  .is-mobile-profile-page .world-launcher {
    display: none;
  }

  .is-mobile-profile-page .profile-avatar {
    display: none;
  }

  .is-mobile-profile-page .auth-user-actions,
  .is-mobile-profile-page .auth-footer {
    display: none !important;
  }

  .is-mobile-profile-page .profile-avatar-actions-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "save save save"
      "prev customize next";
    gap: 6px 8px;
    width: 100%;
    align-items: center;
  }

  .is-mobile-profile-page .profile-character-save-button {
    grid-area: save;
    display: inline-flex;
    justify-self: center;
    min-width: 0;
  }

  .is-mobile-profile-page .profile-avatar-actions-row [data-profile-items-prev] {
    grid-area: prev;
    display: inline-flex;
    justify-self: end;
  }

  .is-mobile-profile-page .profile-character-customize-button {
    grid-area: customize;
  }

  .is-mobile-profile-page .profile-avatar-actions-row [data-profile-items-next] {
    grid-area: next;
    display: inline-flex;
    justify-self: start;
  }

  .is-mobile-profile-page .profile-avatar-actions-row .auth-mini-button {
    min-width: 0;
    width: auto;
    flex: 0 0 auto;
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    font-size: 0.9rem;
  }
}

  /* Settings tab: compact controls */
  .is-mobile-profile-page .profile-settings-stack {
    gap: 6px;
  }

  .is-mobile-profile-page .profile-settings-grid h3 {
    font-size: 1rem;
    margin: 0 0 2px;
  }

  .is-mobile-profile-page .profile-account-field {
    margin-top: 6px;
    gap: 4px;
  }

  .is-mobile-profile-page .profile-account-actions {
    margin-top: 6px;
    gap: 6px;
  }

  .is-mobile-profile-page .profile-settings-stack .auth-mini-button {
    min-width: 0;
    width: auto;
    flex: 0 0 auto;
    min-height: 36px;
    height: 36px;
    padding: 0 12px;
    font-size: 0.88rem;
  }

  .is-mobile-profile-page .profile-color-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
  }

  .is-mobile-profile-page .profile-color-input {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
  }

  .is-mobile-profile-page .profile-color-status {
    margin-top: 5px;
    font-size: 0.78rem;
  }

  .is-mobile-profile-page .profile-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    gap: 8px;
  }

  .is-mobile-profile-page #mobile-profile-sign-out {
    display: inline-flex;
    width: 84px;
    min-width: 0;
    min-height: 28px;
    height: 28px;
    flex: 0 0 84px;
    padding: 2px 10px;
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 720px) and (orientation: landscape) {
  .mobile-orientation-lock {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    background: rgba(8, 13, 5, 0.96);
    pointer-events: auto;
  }

  .site-shell {
    width: min(100% - 18px, 420px);
  }

  .is-mobile-profile-page .site-shell {
    width: 100%;
  }

  .is-mobile-profile-page .profile-card-scale {
    width: calc(100% - 24px);
  }
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-hero {
  flex-direction: row;
  text-align: left;
  gap: 12px;
  margin-top: 10px;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-card {
  width: 680px;
  height: 800px;
  padding: 28px 22px 22px;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-meta {
  text-align: left;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-stats,
body:not(.is-mobile-profile-page) .profile-overlay .profile-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-tabs {
  display: flex;
  flex-direction: row;
  gap: 0;
  margin-top: 12px;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-tab {
  width: 102px;
  min-width: 102px;
  flex: 0 0 102px;
  min-height: 38px;
  font-size: 0.96rem;
  padding: 5px 6px;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-inventory-avatar-panel {
  grid-template-columns: 1fr;
}

/* Desktop only: shift all profile content (title, tabs, avatar, equipment, inventory,
   controls, bottom widgets) up together as one group. .profile-close (the X button) is a
   sibling of .profile-card-scroll, not a child, so it is untouched by this transform. */
body:not(.is-mobile-profile-page) .profile-overlay .profile-card-scroll {
  transform: translateY(-14px);
}

/* Desktop only: one column of 5 slots on each side of the avatar. grid-template-rows:
   repeat(5, 1fr) + align-items: stretch divides the avatar's own height (204px, set below)
   evenly across the 5 rows each side spans, so the whole equipment area's height is bound
   to the avatar's existing height instead of growing with the extra slots. */
body:not(.is-mobile-profile-page) .profile-overlay .profile-inventory-equipment {
  grid-template-columns: 66px minmax(180px, 1fr) 66px;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-template-areas:
    "head      avatar body"
    "hands     avatar legs"
    "accessory avatar feet"
    "main_hand avatar off_hand"
    "back      avatar accessory_2";
  row-gap: 5px;
  column-gap: 4px;
  align-items: center;
  height: 294px;
}

/* Avatar is pinned to its previous fixed height (290px, matching the container's old height)
   and centered rather than stretched, so the 4px added to the container above (to fund 1px of
   extra row-gap on each of the 4 gaps without further squeezing the slots) grows evenly above
   and below the avatar instead of resizing or shifting it. */
body:not(.is-mobile-profile-page) .profile-overlay .profile-inventory-equipment .profile-character-preview--inventory {
  align-self: start;
  height: 290px;
  min-height: 0;
}

/* Slots keep their previous fixed size (60px, matching the row height before this avatar
   reduction) instead of stretching with the row track, so shrinking the avatar to make room
   for Prev/Next does not shrink the equipment slots. */
body:not(.is-mobile-profile-page) .profile-overlay .profile-equipment-slot {
  align-self: center;
  min-height: 0;
  height: 60px;
  padding: 2px;
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-equipment-slot-art {
  width: 52px;
  height: 52px;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-equipment-slot-name {
  font-size: 0.56rem;
  letter-spacing: 0;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-equipment-slot-item {
  font-size: 0.48rem;
  line-height: 1;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-character-preview {
  min-height: 290px;
  padding: 10px 14px 2px;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-character-preview--inventory {
  min-height: 290px;
  padding: 0 0 16px;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-character-preview--inventory .profile-character-art {
  width: min(100%, 275px);
  transform: scale(1.02);
}

body:not(.is-mobile-profile-page) .profile-overlay [data-profile-items].inventory-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* Desktop only: [data-profile-tab-panel="items"] is a grid item of .profile-card-scroll's
   minmax(0, 1fr) row, so by default grid's stretch behavior clips it to that row's height
   with its own overflow: hidden, cutting off the bottom of the Prev/Next pagination row.
   Letting it size to its natural content height (still bounded by .profile-card-scroll's own
   scroll box and .profile-card's fixed size) reveals Prev/Next without moving anything else. */
body:not(.is-mobile-profile-page) .profile-overlay [data-profile-tab-panel="items"] {
  overflow: visible;
}

/* Desktop only: restore the Prev/Next pagination buttons to the profile card's original
   mini-button size (matches .profile-card .auth-mini-button), overriding the compact
   28px-tall/auto-width variant from .profile-items-pagination .auth-mini-button, and give the
   row itself enough height + visible overflow so the full buttons are never clipped. */
body:not(.is-mobile-profile-page) .profile-overlay .profile-items-pagination {
  min-height: 30px;
  overflow: visible;
}

/* Desktop only: the real clipping ancestor is .profile-card-scroll itself. It has a fixed
   height (100% of .profile-card) with overflow-y: auto, and the items panel's content
   (unchanged in size) runs slightly past that fixed height, so Prev/Next sit below the
   scroll box's own visible edge and read as clipped unless manually scrolled. .profile-card
   (the true outer boundary, overflow: hidden) has enough slack below .profile-card-scroll's
   box to show them without resizing anything, so we only drop the scroll clip - and only
   while the items tab is active, so other tabs keep their own scrolling behavior. */
body:not(.is-mobile-profile-page) .profile-overlay .profile-card-scroll:has([data-profile-tab-panel="items"].is-active) {
  overflow: visible;
}

body:not(.is-mobile-profile-page) .profile-overlay .profile-items-pagination .auth-mini-button {
  width: 96px;
  min-width: 96px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 96px;
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 1.12rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Bandcamp floating player */
.bc-player {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.bc-player > * { pointer-events: auto; }

.bc-player__cta {
  font-family: 'Jolly Lodger', cursive;
  font-size: 1.7rem;
  line-height: 1.2;
  color: #111;
  background: #a2ff00;
  border: 4px solid #111;
  border-radius: 10px;
  padding: 10px 18px;
  margin: 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 4px 4px 0 #111;
  letter-spacing: 0.02em;
  animation: bc-cta-bob 2.2s ease-in-out infinite;
}
.bc-player__cta:hover {
  background: #c8ff3a;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #111;
}
@keyframes bc-cta-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.bc-player__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.8);
}
.bc-player__panel[hidden],
.bc-player__panel--closed { display: none; }

.bc-player__art {
  display: block;
  width: 350px;
  height: 350px;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .bc-player__art { width: 280px; height: 280px; }
}
.bc-player__iframe { display: block; border: 2px solid #a2ff00; }

.bc-player__toggle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #111;
  border: 4px solid #a2ff00;
  color: #a2ff00;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 4px 4px 0 rgba(162,255,0,0.3);
  font-family: 'Jolly Lodger', cursive;
}
.bc-player__toggle:hover { background: #1a2a00; }

@media (max-width: 600px) {
  .bc-player { bottom: 12px; right: 12px; }
  .bc-player__cta { font-size: 1.3rem; padding: 8px 14px; }
  .bc-player__iframe { width: 280px !important; }
  .bc-player__toggle { width: 54px; height: 54px; font-size: 1.6rem; }
}

/* ── Mobile Icon Dock ─────────────────────────────────────────── */
.mobile-icon-dock { display: none; }

@media (max-width: 720px) {
  .mobile-icon-dock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 8px;
    right: 8px;
    z-index: 2147483595;
    pointer-events: none;
  }
  .mobile-dock-btn {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: 0;
    padding: 4px 2px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 80ms, opacity 80ms;
    min-width: 0;
  }
  .mobile-dock-btn:active { transform: scale(0.88); }
  .mobile-dock-btn.is-active .mobile-dock-btn__icon,
  .mobile-dock-btn.is-active .profile-widget-circle-headshot {
    filter: drop-shadow(0 0 8px rgba(162, 255, 0, 0.9));
  }
  .mobile-dock-btn__icon {
    width: 72px;
    height: 72px;
    max-width: none;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
  }
  .mobile-dock-btn__label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    text-align: center;
    line-height: 1;
  }

  /* Dock profile avatar headshot uses the shared .profile-widget-circle
     base class (defined near .auth-profile-button) — no mobile-only
     duplicate here, so mobile and desktop can never visually drift. */
  /* Dock replaces these mobile UI elements */
  .world-launcher { display: none !important; }
  .tour-button { display: none !important; }
  .site-nav-login { display: none !important; }
  /* Hide the standalone bc-player toggle — dock music button handles it */
  .bc-player__toggle { display: none; }
  /* Hide the bc-player CTA balloon on mobile — dock is the entry point */
  .bc-player__cta { display: none; }
  /* Lift bc-player panel above the dock; center horizontally */
  .bc-player {
    bottom: calc(126px + env(safe-area-inset-bottom, 0px));
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    /* Prevent the panel from escaping narrow screens */
    max-width: calc(100% - max(env(safe-area-inset-left, 0px), 8px) - max(env(safe-area-inset-right, 0px), 8px));
  }
  /* Make art + iframe fill the available width up to their natural max */
  .bc-player__art {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 1;
  }
  .bc-player__iframe { max-width: 280px; }
  .bc-player__panel { width: 100%; max-width: 280px; }
  /* Reserve scroll space so content isn't hidden under the dock */
  body { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

  /* ── Auth prompt: keep card above the mobile dock ──────────────── */
  [data-auth-prompt].auth-prompt-overlay {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    align-items: center;
    box-sizing: border-box;
  }

  /* ── Sign-out confirm: covers dock entirely, safe-area only ─────── */
  [data-signout-prompt].auth-prompt-overlay {
    padding: max(env(safe-area-inset-top, 0px), 16px)
             max(env(safe-area-inset-right, 0px), 16px)
             max(env(safe-area-inset-bottom, 0px), 16px)
             max(env(safe-area-inset-left, 0px), 16px);
    align-items: center;
    box-sizing: border-box;
  }

  /* ── Hide global counter while mobile auth / signout prompt is open */
  body:has([data-auth-prompt]:not([hidden])) .site-flies-counter--footer,
  body:has([data-auth-prompt]:not([hidden])) .rr-counter,
  body:has([data-signout-prompt]:not([hidden])) .site-flies-counter--footer,
  body:has([data-signout-prompt]:not([hidden])) .rr-counter {
    visibility: hidden;
    pointer-events: none;
  }

  /* ── Mobile item slots — no native selection/callout/drag while press-and-holding ── */
  .inventory-slot,
  .inventory-slot-art,
  .profile-equipment-slot,
  .profile-equipment-slot-art {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: manipulation;
  }

  /* ── Counter stack: no gameplay active ──────────────────────────── */
  /* Float both counters above the dock when the game is not running. */
  body:not(.is-rr-gameplay) .site-flies-counter--footer {
    position: fixed;
    top: auto;
    right: auto;
    bottom: calc(167px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 2147483600;
    white-space: nowrap;
  }
  body:not(.is-rr-gameplay) .rr-counter {
    bottom: calc(122px + env(safe-area-inset-bottom, 0px));
  }
  /* Pre-rampage gameplay (score 0–9): counter stays fixed but below the
     overlay (2147483597) so bugs visibly crawl above it. */
  body.is-rr-gameplay:not(.is-rr-round-active) .site-flies-counter--footer {
    position: fixed;
    top: auto;
    right: auto;
    bottom: calc(167px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 2147483594; /* below dock (2147483595) and overlay (2147483597) */
    white-space: nowrap;
    pointer-events: none;
  }
  body.is-rr-gameplay:not(.is-rr-round-active) .rr-counter {
    bottom: calc(122px + env(safe-area-inset-bottom, 0px));
  }
  /* Restore Global counter to page flow when Ribbit Rampage is active */
  body.is-rr-round-active .site-flies-counter--footer {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 18px auto 8px;
  }
  /* Active rampage: stack controls above the session counter */
  body.is-rr-round-active .rr-counter {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body.is-rr-round-active .rr-controls {
    bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Overlay z-index — always above counters + dock on mobile ─── */
  .leaderboard-overlay { z-index: 2147483610; }
  .tour-overlay { z-index: 2147483610; }

  /* ── Bandcamp player above fly counters when open ──────────────── */
  body.is-bc-player-open:not(.is-rr-round-active) .bc-player { z-index: 2147483610; }
  body.is-bc-player-open .rr-counter,
  body.is-bc-player-open .site-flies-counter--footer { pointer-events: none; }

  /* ── Hide dock during active Ribbit Rampage gameplay ──────────── */
  body.is-rr-round-active .mobile-icon-dock {
    display: none;
    pointer-events: none;
    visibility: hidden;
  }

  /* ── Compact timer + End Game on one row ────────────────────────── */
  /* Scale down the shared pill styles; keep "End Game" on one line.  */
  .rr-counter,
  .rr-timer,
  .rr-endgame-button,
  .rr-endgame-confirm {
    padding: 5px 10px;
    font-size: 1.35rem;
  }
  .rr-endgame-button {
    white-space: nowrap;
  }
  .rr-controls {
    gap: 8px;
  }

  /* ── "Are you sure?" confirmation — full-screen centered modal ───── */
  /* When open, the confirm div expands to a full-screen dim backdrop,
     centering "Are you sure?" text + Yes/No buttons in the visual
     viewport. The fixed inset:0 with pointer-events auto blocks all
     bug taps and nav behind it while the prompt is displayed. */
  .rr-endgame-confirm:not([hidden]) {
    position: fixed;
    inset: 0;
    padding: max(env(safe-area-inset-top, 0px), 24px) 20px
             max(env(safe-area-inset-bottom, 0px), 24px);
    box-sizing: border-box;
    z-index: 2147483606; /* above boss intro (2147483604), within overlay ctx */
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: auto;
  }
  /* "Are you sure?" label takes the full row above the buttons */
  .rr-endgame-confirm:not([hidden]) > span {
    width: 100%;
    text-align: center;
    font-size: 1.55rem;
    line-height: 1.2;
  }
  /* Yes / No sit on the same row; stack only on very narrow screens */
  .rr-endgame-confirm:not([hidden]) > .rr-endgame-button {
    white-space: nowrap;
    min-width: 80px;
    justify-content: center;
    padding: 8px 20px;
    font-size: 1.35rem;
  }

  /* ── Block background UI (nav, header) during active rampage ────── */
  /* The dim layer is full-screen inside the overlay (z-index 2147483597),
     which sits above the site-header. Making it opaque to pointer events
     catches any miss-tap that would otherwise pass through to nav links. */
  body.is-rr-round-active .rr-dim {
    pointer-events: auto;
  }
  /* Belt-and-suspenders: explicitly kill pointer events on the header
     and nav so focus/hover states don't fire during active gameplay. */
  body.is-rr-round-active .site-header,
  body.is-rr-round-active .site-nav a {
    pointer-events: none;
    user-select: none;
  }
}