:root {
  --bg: #f5f2ff;
  --panel: rgba(255, 255, 255, 0.86);
  --text: #2b2440;
  --muted: rgba(43, 36, 64, 0.65);
  --accent: #7adcc0;
  --danger: #ff8aa1;
  --shadow: rgba(58, 45, 73, 0.18);
  --border: rgba(58, 45, 73, 0.15);
  --topbar-h: 56px;
  --hud-h: 0px;
  --root-left: 0px;
  --root-right: 100vw;
  --root-top: 0px;
  --root-width: 960px;
  --touch-rail-width: 118px;
  --layout-vw: 100vw;
  --layout-vh: 100dvh;
  --layout-lvw: 100vw;
  --layout-lvh: 100dvh;
  --layout-short-edge: 720px;
  --layout-long-edge: 1280px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: "Trebuchet MS", "Verdana", "Arial", sans-serif; }

#root {
  position: relative;
  width: min(1320px, calc(100vw - 28px));
  max-width: 100%;
  margin: 12px auto;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px var(--shadow);
  border-radius: 16px;
  overflow: hidden;
}

body.ui-menu #root,
body.ui-editor #root {
  min-height: calc(100dvh - 24px);
}

#gameCanvas {
  display: block;
  width: 100%;
  height: auto;
  background: linear-gradient(180deg, #f5f2ff, #e8f2ff);
}

#overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

html.gameplay-pinch-lock,
body.gameplay-pinch-lock {
  overscroll-behavior: none;
  overflow-x: hidden;
}

html.gameplay-pinch-lock,
body.gameplay-pinch-lock,
body.gameplay-pinch-lock #root,
body.gameplay-pinch-lock #gameCanvas,
body.gameplay-pinch-lock #overlay {
  touch-action: none;
}

#overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.18s ease;
}

body.ui-menu #gameCanvas {
  filter: blur(6px) saturate(0.9);
  opacity: 0.35;
  transform: scale(1.02);
  height: 100%;
}

body.ui-menu #overlay::before {
  opacity: 1;
  background: radial-gradient(
    circle at 50% 18%,
    rgba(255, 255, 255, 0.92),
    rgba(250, 248, 255, 0.55) 55%,
    rgba(250, 248, 255, 0.2)
  );
}

body.ui-playing #gameCanvas,
body.ui-editor #gameCanvas {
  filter: none;
  opacity: 1;
  transform: none;
}

body.graphics-performance.ui-menu #gameCanvas {
  filter: none;
  opacity: 0.28;
  transform: none;
}

body.graphics-performance.ui-menu #overlay::before {
  background: rgba(250, 248, 255, 0.76);
}

body.graphics-performance *,
body.graphics-performance *::before,
body.graphics-performance *::after {
  scroll-behavior: auto !important;
}

body.graphics-performance #topbar,
body.graphics-performance .panel,
body.graphics-performance .campaignHud,
body.graphics-performance .atlasHeader,
body.graphics-performance .atlasHero,
body.graphics-performance .atlasHeroContent,
body.graphics-performance .worldCard,
body.graphics-performance .worldCardTitle,
body.graphics-performance .worldCardIconStats,
body.graphics-performance .worldTitle,
body.graphics-performance #worldDesc,
body.graphics-performance .worldMap,
body.graphics-performance .worldCursorControls,
body.graphics-performance .worldLegendDetails[open],
body.graphics-performance .verificationModalCard,
body.graphics-performance .shopCard,
body.graphics-performance .badgeCard,
body.graphics-performance .hudCard,
body.graphics-performance .touchBtn,
body.graphics-performance .remoteHostPanel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

body.graphics-performance .worldRouteSvg .routePulse,
body.graphics-performance .worldRouteSvg .routeBase,
body.graphics-performance .worldSpark,
body.graphics-performance .worldNode.isNextRecommended::after,
body.graphics-performance .routeTraveler {
  animation: none !important;
  filter: none !important;
}

body.graphics-performance .worldMapBackdropImage {
  filter: none !important;
}

body.ui-playing #topbar,
body.ui-playing #loginPanel,
body.ui-playing #levelPanel,
body.ui-playing #editorPanel {
  display: none !important;
}

body.ui-editor #topbar,
body.ui-editor #loginPanel,
body.ui-editor #levelPanel {
  display: none !important;
}

body.ui-menu .pauseBtn,
body.ui-menu .gameSettingsBtn,
body.ui-menu .homeBtn,
body.ui-menu .zoomControls,
body.ui-menu .playControls,
body.ui-menu .remoteControls,
body.ui-menu .remoteHostPanel,
body.ui-editor .pauseBtn,
body.ui-editor .gameSettingsBtn,
body.ui-editor .homeBtn,
body.ui-editor .zoomControls,
body.ui-editor .playControls,
body.ui-editor .remoteControls,
body.ui-editor .remoteHostPanel {
  display: none !important;
}

body.settings-modal-open .pauseBtn,
body.settings-modal-open .gameSettingsBtn,
body.settings-modal-open .homeBtn,
body.settings-modal-open .touchControls {
  display: none !important;
}

#topbar {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 900;
  letter-spacing: 0;
  color: var(--accent);
}

.status { font-size: 12px; color: var(--muted); }
.spacer { flex: 1; }

.pauseBtn {
  pointer-events: auto;
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 44;
  min-width: 92px;
}

.gameSettingsBtn {
  pointer-events: auto;
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(112px + env(safe-area-inset-right));
  z-index: 44;
  min-width: 44px;
  min-height: 38px;
  padding: 0 12px;
}

.homeBtn {
  pointer-events: auto;
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(164px + env(safe-area-inset-right));
  z-index: 44;
  min-width: 44px;
  min-height: 38px;
  padding: 0 12px;
}

.zoomControls {
  pointer-events: auto;
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  z-index: 44;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.playControls {
  pointer-events: auto;
  position: absolute;
  top: calc(58px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  z-index: 44;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.remoteControls {
  pointer-events: auto;
  position: absolute;
  top: calc(58px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 44;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.playToolBtn {
  min-width: 92px;
  min-height: 34px;
  padding: 7px 11px;
  font-size: 11px;
  letter-spacing: 0;
}

.playToolBtn.isActive {
  border-color: rgba(88, 197, 164, 0.85);
  box-shadow: 0 0 0 2px rgba(88, 197, 164, 0.24) inset;
}

.topIconBtn.isActive {
  border-color: rgba(88, 197, 164, 0.85);
  background: rgba(122, 220, 192, 0.18);
  box-shadow: 0 0 0 2px rgba(88, 197, 164, 0.24) inset;
}

.remoteHostPanel {
  pointer-events: auto;
  position: absolute;
  right: calc(12px + env(safe-area-inset-right));
  top: calc(98px + env(safe-area-inset-top));
  z-index: 45;
  width: min(320px, calc(100% - 24px));
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(43, 36, 64, 0.22);
}

.gameplayChromeRail {
  display: contents;
}

@media (min-width: 900px) and (pointer: fine) {
  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) #root {
    width: min(1320px, calc(100vw - 300px));
  }

  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .zoomControls {
    position: fixed;
    top: calc(var(--root-top) + 12px);
    left: max(10px, calc(var(--root-left) - 132px));
    right: auto;
    width: 120px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    z-index: 46;
  }

  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .playControls {
    position: fixed;
    top: calc(var(--root-top) + 132px);
    left: max(10px, calc(var(--root-left) - 132px));
    right: auto;
    width: 120px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    z-index: 46;
  }

  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .zoomControls .zoomBtn,
  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .playControls .playToolBtn {
    width: 100%;
    min-width: 0;
  }

  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .zoomControls .zoomBtnValue {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .pauseBtn {
    position: fixed;
    top: calc(var(--root-top) + 64px);
    left: calc(var(--root-right) + 12px);
    right: auto;
    z-index: 46;
  }

  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .gameSettingsBtn {
    position: fixed;
    top: calc(var(--root-top) + 116px);
    left: calc(var(--root-right) + 12px);
    right: auto;
    z-index: 46;
  }

  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .homeBtn {
    position: fixed;
    top: calc(var(--root-top) + 12px);
    left: calc(var(--root-right) + 12px);
    right: auto;
    z-index: 46;
  }

  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .remoteControls {
    position: fixed;
    top: calc(var(--root-top) + 168px);
    left: calc(var(--root-right) + 12px);
    right: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 46;
  }

  body:is(.ui-playing, .game-running):is(:not(.fullscreen-active), .manual-fs-active) .remoteHostPanel {
    position: fixed;
    top: calc(var(--root-top) + 220px);
    left: calc(var(--root-right) + 12px);
    right: auto;
    width: min(320px, max(180px, calc(100vw - var(--root-right) - 16px)));
    z-index: 47;
  }
}

.remoteHostTitle {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
}

.remoteHostCodeRow {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.remoteHostSignalRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin: 8px 0;
}

.remoteHostSignalChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(43, 36, 64, 0.1);
  border-radius: 8px;
  background: rgba(247, 249, 253, 0.84);
  color: rgba(43, 36, 64, 0.7);
  font-size: 9px;
}

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

.remoteHostSignalChip .wohooIcon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.remoteSignalBars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 17px;
  height: 15px;
  flex: 0 0 auto;
}

.remoteSignalBars i {
  width: 3px;
  border-radius: 2px 2px 0 0;
  background: #a7afbe;
}

.remoteSignalBars i:nth-child(1) { height: 5px; }
.remoteSignalBars i:nth-child(2) { height: 9px; }
.remoteSignalBars i:nth-child(3) { height: 14px; }

.remoteHostSignalChip[data-signal="excellent"] .remoteSignalBars i,
.remoteHostSignalChip[data-signal="good"] .remoteSignalBars i:nth-child(-n + 2) {
  background: #3eac82;
}

.remoteHostSignalChip[data-signal="slow"] .remoteSignalBars i:first-child {
  background: #d9a43c;
}

.remoteHostSignalChip[data-signal="stale"] .remoteSignalBars i:first-child {
  background: #d46875;
}

.zoomBtn {
  min-width: 44px;
  min-height: 38px;
  padding: 6px 10px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
}

.zoomBtn,
.playToolBtn,
.pauseBtn,
.gameSettingsBtn,
.homeBtn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.zoomBtnValue {
  min-width: 72px;
  font-size: 12px;
  letter-spacing: 0;
}

.pauseBtn,
.homeBtn,
.playToolBtn {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 11px;
  letter-spacing: 0;
}

.zoomBtn:disabled {
  opacity: 0.45;
}

body.ui-playing.fullscreen-active:not(.manual-fs-active) #root {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.ui-playing.fullscreen-active:not(.manual-fs-active) #gameCanvas {
  width: 100%;
  height: 100%;
}

body.ui-playing.fullscreen-active.manual-fs-active #root {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.ui-playing.fullscreen-active.manual-fs-active #gameCanvas {
  width: 100%;
  height: 100%;
}

body.tv-mode-active.fullscreen-active {
  overflow: hidden;
  background: #090816;
}

body.tv-mode-active.fullscreen-active #root {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.tv-mode-active.fullscreen-active #gameCanvas {
  width: 100%;
  height: 100%;
}

body.ui-playing.fullscreen-active.fs-mode-level .hud,
body.ui-playing.fullscreen-active.fs-mode-level .pauseBtn,
body.ui-playing.fullscreen-active.fs-mode-level .gameSettingsBtn,
body.ui-playing.fullscreen-active.fs-mode-level .homeBtn,
body.ui-playing.fullscreen-active.fs-mode-level .zoomControls,
body.ui-playing.fullscreen-active.fs-mode-level .playControls,
body.ui-playing.fullscreen-active.fs-mode-level .remoteControls,
body.ui-playing.fullscreen-active.fs-mode-level .remoteHostPanel,
body.ui-playing.fullscreen-active.fs-mode-level .touchControls {
  display: none !important;
}

body.ui-playing.fullscreen-active.fs-mode-level.touch-enabled:not(.gamepad-connected) .hud,
body.ui-playing.fullscreen-active.fs-mode-level.touch-enabled:not(.gamepad-connected) .touchControls {
  display: block !important;
}

body.ui-playing.gamepad-connected .touchControls,
body.ui-playing.gamepad-connected .controllerSkin {
  display: none !important;
  pointer-events: none !important;
}

body.layout-phone {
  --touch-rail-width: 104px;
  overscroll-behavior: none;
}

body.layout-phone #root {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  min-height: var(--layout-vh, 100dvh);
}

body.layout-phone.ui-playing:not(.fullscreen-active) #root {
  min-height: var(--layout-vh, 100dvh);
}

body.layout-phone.ui-playing.fullscreen-active #root {
  height: var(--layout-vh, 100dvh);
}

body.layout-phone.ui-playing .zoomControls,
body.layout-phone.ui-playing .playControls,
body.layout-phone.ui-playing .remoteControls,
body.layout-phone.ui-playing .pauseBtn,
body.layout-phone.ui-playing .gameSettingsBtn,
body.layout-phone.ui-playing .homeBtn {
  z-index: 76;
}

body.layout-phone.ui-playing.layout-landscape .zoomControls,
body.layout-phone.ui-playing.layout-landscape .playControls,
body.layout-phone.ui-playing.layout-landscape .remoteControls {
  gap: 6px;
}

body.layout-phone.ui-playing.layout-landscape .playToolBtn,
body.layout-phone.ui-playing.layout-landscape .pauseBtn,
body.layout-phone.ui-playing.layout-landscape .gameSettingsBtn,
body.layout-phone.ui-playing.layout-landscape .homeBtn {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 9px;
}

body.layout-phone.ui-playing.layout-landscape .zoomBtn {
  min-width: 42px;
  min-height: 34px;
  font-size: 14px;
}

body.layout-phone.ui-playing.layout-landscape .zoomBtnValue {
  min-width: 62px;
  font-size: 10px;
}

.panel {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: calc(var(--topbar-h, 56px) + 10px);
  transform: translateX(-50%);
  width: min(1240px, calc(100% - 18px));
  max-height: calc(100% - (var(--topbar-h, 56px) + 24px + env(safe-area-inset-bottom)));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 40px var(--shadow);
  z-index: 20;
}

.panel h2 { margin: 0 0 12px 0; }
.row { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.row label { font-size: 12px; color: var(--muted); min-width: 68px; }
.row input, .row select {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  outline: none;
}
.row input[type="number"] { max-width: 110px; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 10px 0 0; }

:where(
  button,
  [role="button"],
  a[href],
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid #147f72;
  outline-offset: 3px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.96),
    0 0 0 6px rgba(20, 127, 114, 0.28);
}

.verificationModal[aria-modal="true"] :where(
  button,
  [role="button"],
  a[href],
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus {
  outline: 3px solid #147f72;
  outline-offset: 3px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.96),
    0 0 0 6px rgba(20, 127, 114, 0.28);
}

body.ui-playing :where(
  button,
  [role="button"],
  input,
  select,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline-color: #fff4a8;
  box-shadow:
    0 0 0 2px rgba(31, 35, 50, 0.88),
    0 0 0 6px rgba(255, 244, 168, 0.42);
}

.loginPanel {
  width: min(900px, calc(100% - 24px));
  display: grid;
  grid-template-columns: minmax(270px, 0.86fr) minmax(360px, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 255, 252, 0.95)),
    var(--panel);
  box-shadow:
    0 26px 70px rgba(37, 32, 60, 0.18),
    0 2px 0 rgba(255, 255, 255, 0.74) inset;
}

.authArtPanel {
  position: relative;
  min-height: 438px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 235, 143, 0.72), transparent 24%),
    radial-gradient(circle at 72% 22%, rgba(121, 220, 193, 0.62), transparent 28%),
    linear-gradient(180deg, rgba(46, 78, 115, 0.18), rgba(40, 34, 64, 0.52)),
    url("assets/laronia/maps/laronia_world_atlas.png") center / cover no-repeat;
}

.authArtPanel::before,
.authArtPanel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.authArtPanel::before {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 20, 42, 0.08), rgba(13, 20, 42, 0.52)),
    radial-gradient(circle at 50% 76%, rgba(255, 249, 224, 0.76), transparent 20%);
}

.authArtPanel::after {
  left: 0;
  right: 0;
  bottom: -8px;
  height: 190px;
  background:
    url("assets/controller-skin/wohoo_corner_bottom_left.svg") left bottom / 55% auto no-repeat,
    url("assets/controller-skin/wohoo_corner_bottom_right.svg") right bottom / 58% auto no-repeat;
  filter: drop-shadow(0 -8px 18px rgba(76, 40, 10, 0.14));
}

.authArtBadge,
.authArtTitle {
  position: relative;
  z-index: 1;
}

.authArtBadge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 22px 0 0 22px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #247b68;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(22, 36, 58, 0.14);
}

.authArtTitle {
  max-width: 260px;
  margin: 168px 22px 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 30px;
  line-height: 1.02;
  font-weight: 950;
  text-shadow: 0 3px 16px rgba(18, 22, 40, 0.4);
}

.authFormPanel {
  padding: 26px 30px 24px;
}

.authEyebrow {
  margin-bottom: 6px;
  color: #4bc7a5;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

.loginPanel h2 {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1;
  color: #1f1a35;
}

.authTabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  border-radius: 16px;
  background: rgba(245, 247, 255, 0.82);
}

.authTab {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(43, 36, 64, 0.66);
  cursor: pointer;
  font-weight: 900;
}

.authTab.isActive {
  background: linear-gradient(180deg, rgba(122, 220, 192, 0.9), rgba(107, 207, 186, 0.72));
  color: #18243d;
  box-shadow:
    0 8px 18px rgba(64, 174, 145, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.authModeCopy {
  min-height: 34px;
  margin: 0 0 14px;
  color: rgba(43, 36, 64, 0.66);
  font-size: 13px;
  line-height: 1.3;
}

.authStatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  border-radius: 14px;
  background: rgba(245, 247, 255, 0.9);
  color: rgba(43, 36, 64, 0.82);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.authStatusActionBtn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.authStatus[hidden] {
  display: none;
}

.authStatus[data-kind="error"] {
  border-color: rgba(227, 78, 101, 0.32);
  background: rgba(255, 240, 244, 0.96);
  color: #7a2d42;
}

.authStatus[data-kind="success"] {
  border-color: rgba(65, 183, 141, 0.32);
  background: rgba(232, 255, 246, 0.96);
  color: #195c50;
}

.loginPanel[data-auth-mode="login"] .authRegisterCopy,
.loginPanel[data-auth-mode="register"] .authLoginCopy,
.loginPanel[data-auth-mode="login"] .authRegisterOnly,
.loginPanel[data-auth-mode="login"] #registerBtn,
.loginPanel[data-auth-mode="register"] #loginBtn,
.loginPanel[data-auth-mode="register"] .passwordResetBox {
  display: none;
}

.passwordRequirements {
  display: grid;
  gap: 4px;
  margin: -2px 0 8px 120px;
  color: rgba(43, 36, 64, 0.58);
  font-size: 11px;
  line-height: 1.25;
}

.passwordRequirements span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border: 1px solid rgba(43, 36, 64, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}

.passwordRequirements span.isMet {
  color: #176253;
}

.passwordRequirements span.isMet::before {
  border-color: #41b78d;
  background: #41b78d;
  box-shadow: 0 0 0 2px rgba(65, 183, 141, 0.14);
}

.loginPanel .row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 10px 0;
}

.loginPanel .row label {
  min-width: 0;
  color: rgba(43, 36, 64, 0.66);
  font-size: 12px;
  font-weight: 850;
}

.loginPanel .row input {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.loginPanel .row input:focus {
  border-color: rgba(75, 199, 165, 0.72);
  box-shadow:
    0 0 0 3px rgba(75, 199, 165, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.loginPanel .rememberRow {
  margin: 12px 0 14px 108px;
}

.authActions {
  margin-top: 12px;
}

.authActions .authPrimaryBtn {
  grid-column: 2;
  width: min(180px, 100%);
  min-height: 44px;
  font-weight: 900;
}

.authModeToggleBtn {
  width: 100%;
  min-height: 36px;
  margin: 2px 0 10px;
  border: 0;
  background: transparent;
  color: #267d70;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.rememberRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(43, 36, 64, 0.74);
}

.rememberRow input {
  width: 18px;
  height: 18px;
  accent-color: #41b78d;
}

.passwordResetBox {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.52);
}

.passwordResetBox > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  color: rgba(43, 36, 64, 0.78);
}

.passwordResetIntro {
  margin: 8px 0;
  color: rgba(43, 36, 64, 0.66);
  font-size: 11px;
  line-height: 1.35;
}

.resetTokenFallback {
  margin-top: 9px;
  color: rgba(43, 36, 64, 0.66);
  font-size: 11px;
}

.resetTokenFallback > summary {
  cursor: pointer;
  font-weight: 800;
}

.passwordResetBox:not([data-reset-ready="true"]) .resetConfirmRow,
.passwordResetBox:not([data-reset-ready="true"]) #resetConfirmBtn {
  display: none;
}

.passwordResetBox[data-reset-link="true"] .resetTokenFallback {
  display: none;
}

.passwordResetBox[data-reset-link="true"] .passwordResetIntro,
.passwordResetBox[data-reset-link="true"] .resetEmailRow,
.passwordResetBox[data-reset-link="true"] #resetRequestBtn {
  display: none;
}

.resetLinkReady {
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(65, 183, 141, 0.28);
  border-radius: 9px;
  background: rgba(232, 255, 246, 0.84);
  color: #195c50;
  font-size: 11px;
  font-weight: 850;
}

.loginPanel .passwordResetBox .row {
  grid-template-columns: 92px minmax(0, 1fr);
}

.passwordResetBox .btn {
  width: 100%;
  min-height: 38px;
}

.btn {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(122,220,192,0.6), rgba(122,220,192,0.35));
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: rgba(255,255,255,0.6); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.levels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.levelItem {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
}

.levelTitle { font-weight: 700; }
.levelMeta { font-size: 12px; color: var(--muted); }
.levelMedal {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(58, 67, 94, 0.9);
  font-weight: 600;
}

.atlasView {
  margin-top: 10px;
}

.campaignHud {
  margin: 6px 0 10px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 9% 10%, rgba(122, 220, 192, 0.2), rgba(122, 220, 192, 0.02) 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72));
  box-shadow: 0 8px 18px rgba(43, 36, 64, 0.12);
}

.campaignTopRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.campaignActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campaignActionBtn {
  min-width: 92px;
}

.progressActionBtn {
  min-width: 112px;
}

.campaignTitle {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  font-family: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
}

.campaignSubTitle {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(43, 36, 64, 0.72);
}

.campaignChips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaignPresetBar {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaignChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  color: rgba(43, 36, 64, 0.82);
}

.campaignChip b {
  color: rgba(43, 36, 64, 0.95);
}

.campaignChipLevel {
  gap: 8px;
  padding-right: 12px;
}

.campaignXpMeter {
  width: 76px;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(43, 36, 64, 0.12);
  box-shadow: inset 0 0 0 1px rgba(43, 36, 64, 0.08);
}

.campaignXpMeter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #62d9b4, #ffd36d);
  box-shadow: 0 0 14px rgba(98, 217, 180, 0.35);
}

.campaignPresetBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 800;
  color: rgba(43, 36, 64, 0.82);
}

.campaignPresetBtn.isCurrent {
  border-color: rgba(73, 177, 134, 0.32);
  background: rgba(111, 231, 187, 0.16);
  color: #1f5c4a;
}

.campaignPresetBtn:disabled {
  opacity: 0.58;
}

.badgeDrawer {
  align-items: stretch;
  justify-content: flex-end;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(24, 20, 40, 0.03), rgba(24, 20, 40, 0.2)),
    rgba(24, 20, 40, 0.08);
}

.badgeDrawerCard {
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 211, 109, 0.24), transparent 44%),
    radial-gradient(circle at 90% 4%, rgba(122, 220, 192, 0.24), transparent 38%),
    rgba(255,255,255,0.96);
}

.badgeDrawerHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9));
  border-bottom: 1px solid rgba(58,45,73,0.1);
}

.badgeShelf {
  display: grid;
  gap: 12px;
}

.badgeShelfHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  background: rgba(255, 255, 255, 0.68);
}

.badgeShelfTitle {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(43, 36, 64, 0.66);
}

.badgeShelfLevel {
  font-size: 17px;
  font-weight: 950;
  font-family: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  color: rgba(43, 36, 64, 0.96);
}

.badgeShelfLevel span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-family: "Trebuchet MS", "Verdana", "Arial", sans-serif;
  color: rgba(43, 36, 64, 0.62);
}

.badgeShelfXp {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 124px;
  font-size: 10px;
  font-weight: 900;
  color: rgba(43, 36, 64, 0.64);
}

.badgeShelfXp .campaignXpMeter {
  width: 112px;
}

.badgeShelfEmpty {
  font-size: 12px;
  font-weight: 700;
  color: rgba(43, 36, 64, 0.66);
}

.badgeShelfGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.badgeJourney {
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px solid rgba(58, 45, 73, 0.1);
  border-bottom: 1px solid rgba(58, 45, 73, 0.1);
}

.badgeJourneyHead,
.badgeJourneyNext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 12px;
}

.badgeJourneyHead strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badgeJourneyHead svg {
  width: 18px;
  height: 18px;
}

.badgeJourneyHead span,
.badgeJourneyNext span,
.badgeJourneyNext small {
  color: rgba(68, 59, 90, 0.62);
  font-size: 10px;
}

.badgeJourneyRows {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.badgeJourneyRow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.badgeJourneyRow > span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #2c7563;
}

.badgeJourneyRow svg {
  width: 20px;
  height: 20px;
}

.badgeJourneyRow strong,
.badgeJourneyRow small {
  display: block;
}

.badgeJourneyRow strong {
  font-size: 11px;
}

.badgeJourneyRow small {
  margin-top: 1px;
  color: rgba(68, 59, 90, 0.62);
  font-size: 9px;
}

.badgeJourneyNext {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(58, 45, 73, 0.12);
}

.badgeJourneyNext strong {
  font-size: 11px;
}

.badgeCard {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 211, 109, 0.2), transparent 50%),
    rgba(255, 255, 255, 0.74);
}

.badgeCard.isLocked {
  opacity: 0.72;
  filter: saturate(0.8);
}

.badgeIcon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(43, 36, 64, 0.16);
  background:
    radial-gradient(circle at 30% 24%, #fff7d3, #ffd36d 42%, #7adcc0 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.42), 0 5px 10px rgba(43, 36, 64, 0.12);
}

.badgeCard.isLocked .badgeIcon {
  background:
    radial-gradient(circle at 30% 24%, #ffffff, #d8dde8 48%, #9ba8bc 100%);
}

.badgeName {
  font-size: 11px;
  font-weight: 900;
  color: rgba(43, 36, 64, 0.9);
}

.badgeMeta {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(43, 36, 64, 0.58);
}

.badgeMeter {
  margin-top: 5px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(43, 36, 64, 0.1);
}

.badgeMeter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7adcc0, #ffd36d);
}

.atlasRunSummary {
  margin: 0 0 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.atlasRunSummaryBoss {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.72)),
    radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--wm-accent) 18%, white), transparent 54%);
}

.atlasRunMedal {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.atlasRunMedal svg {
  width: 100%;
  height: 100%;
  display: block;
}

.atlasRunChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  font-size: 11px;
  color: rgba(43, 36, 64, 0.82);
}

.atlasRunChip b {
  color: rgba(43, 36, 64, 0.95);
}

.atlasRunChipWide {
  max-width: min(100%, 520px);
}

.atlasRunBossChip {
  border-color: color-mix(in oklab, var(--boss-accent, #fff0c6) 46%, rgba(43,36,64,0.12));
  background: linear-gradient(180deg, rgba(255,255,255,0.94), color-mix(in oklab, var(--boss-accent, #fff0c6) 28%, white));
  color: rgba(43, 36, 64, 0.94);
}

.atlasRunBossNote {
  border-style: dashed;
  border-color: color-mix(in oklab, var(--boss-accent, #fff0c6) 42%, rgba(43,36,64,0.1));
  background: color-mix(in oklab, var(--boss-accent, #fff0c6) 12%, rgba(255,255,255,0.92));
}

.postLevelPanel {
  margin: 0 0 12px 0;
  padding: 14px;
  border: 1px solid rgba(43, 36, 64, 0.14);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 211, 109, 0.3), transparent 44%),
    radial-gradient(circle at 92% 0%, rgba(122, 220, 192, 0.26), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78));
  box-shadow: 0 14px 28px rgba(43, 36, 64, 0.16);
}

.postLevelTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.postLevelEyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(43, 36, 64, 0.58);
}

.postLevelTitle {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 950;
  font-family: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  color: rgba(43, 36, 64, 0.96);
}

.postLevelMeta {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(43, 36, 64, 0.68);
}

.postLevelXp {
  min-width: 120px;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  background: rgba(255,255,255,0.72);
  font-size: 15px;
  font-weight: 950;
  color: rgba(43, 36, 64, 0.92);
  text-align: right;
}

.postLevelXp span {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(43, 36, 64, 0.58);
}

.postLevelActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.postLevelPrimary {
  min-width: min(100%, 220px);
}

.atlasHeader {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(43, 36, 64, 0.11);
  background:
    radial-gradient(circle at 10% 10%, rgba(122, 220, 192, 0.16), transparent 46%),
    rgba(255, 255, 255, 0.72);
}

.atlasHero {
  position: relative;
  margin: 0 0 12px 0;
  min-height: clamp(170px, 22vw, 280px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(43, 36, 64, 0.16);
}

.atlasHeroImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.atlasHeroShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 18, 34, 0.06), rgba(16, 18, 34, 0.42)),
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.06) 55%);
}

.atlasHeroContent {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: min(380px, 90%);
  margin: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.78);
}

.atlasHeroTitle {
  font-size: 16px;
  font-family: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  font-weight: 900;
  letter-spacing: 0;
}

.atlasHeroMeta {
  font-size: 12px;
  color: rgba(43, 36, 64, 0.78);
  font-weight: 700;
}

.atlasHeroMeter {
  margin-top: 2px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(43, 36, 64, 0.14);
}

.atlasHeroMeter > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7adcc0, #8fd1ff);
}

.atlasTitle {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.atlasSubTitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.worldsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.worldCard {
  --wc-paper: #f6f0de;
  --wc-ink: #2f4058;
  --wc-accent: #ffca68;
  --wc-accent2: #6ac7a8;
  --wc-glow: #fff2be;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--wc-ink) 24%, transparent);
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in oklab, var(--wc-glow) 54%, transparent), color-mix(in oklab, var(--wc-paper) 22%, transparent) 42%, color-mix(in oklab, var(--wc-ink) 6%, transparent) 100%),
    linear-gradient(145deg, color-mix(in oklab, var(--wc-accent) 10%, transparent), color-mix(in oklab, var(--wc-accent2) 10%, transparent));
  box-shadow: 0 12px 24px color-mix(in oklab, var(--wc-ink) 22%, transparent);
}

.worldCard[role="button"] {
  cursor: pointer;
}

.worldCard[role="button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px color-mix(in oklab, var(--wc-ink) 26%, transparent);
}

.worldCard[role="button"]:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--wc-accent2) 74%, #ffffff);
  outline-offset: 3px;
}

.worldCardPreview {
  position: relative;
  inset: auto;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
}

.worldCardPreview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.78;
  transform: scale(1.02);
}

.worldCardEnterCue {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--wc-ink) 30%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--wc-paper) 84%, rgba(255, 255, 255, 0.9));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -2px 0 color-mix(in oklab, var(--wc-ink) 14%, transparent),
    0 5px 12px color-mix(in oklab, var(--wc-ink) 24%, transparent);
  color: color-mix(in oklab, var(--wc-ink) 88%, #111);
  opacity: 0.94;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.worldCardEnterCue .wohooIcon {
  width: 21px;
  height: 21px;
  transform: translateX(1px);
}

.worldCard[role="button"]:hover .worldCardEnterCue,
.worldCard[role="button"]:focus-visible .worldCardEnterCue {
  background: color-mix(in oklab, var(--wc-accent) 40%, white);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 color-mix(in oklab, var(--wc-ink) 16%, transparent),
    0 7px 16px color-mix(in oklab, var(--wc-ink) 28%, transparent);
  transform: translate(-50%, -50%) scale(1.06);
}

.worldCard[role="button"]:active .worldCardEnterCue {
  transform: translate(-50%, -50%) scale(0.97);
}

.worldCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 14% 18%, color-mix(in oklab, var(--wc-glow) 66%, transparent), transparent 42%),
    repeating-linear-gradient(120deg, color-mix(in oklab, var(--wc-ink) 10%, transparent) 0 1px, transparent 1px 7px);
  opacity: 0.08;
}

.worldCard > * {
  position: relative;
  z-index: 2;
}

.worldCard > .worldCardPreview {
  z-index: 0;
}

.worldCard.isLocked {
  filter: grayscale(0.45);
  opacity: 0.72;
  cursor: default;
}

.worldCard.isLocked .worldCardPreview img {
  opacity: 0.28;
}

.worldCard.isLocked::before {
  opacity: 0.4;
}

.worldCardArt {
  position: absolute;
  right: -4px;
  top: -2px;
  width: 74px;
  height: 74px;
  opacity: 0.56;
  filter: saturate(0.72) brightness(0.9);
  pointer-events: none;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.worldCardArt svg {
  width: 100%;
  height: 100%;
  display: block;
}

.worldCard.isSigilLit .worldCardArt {
  opacity: 1;
  filter:
    saturate(1.08)
    brightness(1.06)
    drop-shadow(0 2px 5px color-mix(in oklab, var(--wc-glow) 54%, transparent));
  transform: translateY(-1px);
}

.worldCard.isSigilDormant .worldCardArt {
  opacity: 0.48;
}

.worldCard.isLocked .worldCardArt {
  opacity: 0.28;
  filter: grayscale(0.5) saturate(0.5);
}

.worldCardMedal {
  position: absolute;
  left: 8px;
  top: 40px;
  width: 28px;
  height: 28px;
  opacity: 0.96;
  filter: drop-shadow(0 2px 4px rgba(31, 24, 46, 0.22));
  pointer-events: none;
}

.worldCardMedal svg {
  width: 100%;
  height: 100%;
  display: block;
}

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

.worldChip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  border: 1px solid color-mix(in oklab, var(--wc-ink) 25%, transparent);
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in oklab, var(--wc-paper) 75%, white);
  color: color-mix(in oklab, var(--wc-ink) 78%, #111);
}

.worldCardTitle {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 800;
  color: color-mix(in oklab, var(--wc-ink) 86%, #111);
  font-family: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
}

.worldCardMeta {
  margin-top: 5px;
  color: color-mix(in oklab, var(--wc-ink) 72%, transparent);
  font-size: 11px;
  line-height: 1.35;
}

.worldCardRoute {
  margin-top: 8px;
  height: 56px;
  border: 1px solid color-mix(in oklab, var(--wc-ink) 20%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, var(--wc-paper) 76%, white);
  overflow: hidden;
}

.worldMiniRouteSvg {
  width: 100%;
  height: 100%;
  display: block;
}

.worldMiniRouteSvg .miniRoutePulse {
  animation: routeFlow 5.6s linear infinite;
}

.worldMiniRouteSvg .miniNode {
  opacity: 0.94;
}

.worldMiniRouteSvg .miniNode.isFuture {
  opacity: 0.42;
}

.worldMiniRouteSvg .miniNode.isDone {
  filter: drop-shadow(0 0 2px color-mix(in oklab, var(--wc-accent2) 60%, white));
}

.worldMiniRouteSvg .miniNode.isBoss {
  opacity: 1;
}

.worldCardProgress {
  margin-top: 7px;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in oklab, var(--wc-ink) 14%, transparent);
}

.worldCardProgressFill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--wc-accent), var(--wc-accent2));
}

.worldCard.isPadSelected {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wc-accent2) 64%, transparent), 0 14px 30px color-mix(in oklab, var(--wc-ink) 24%, transparent);
}

.worldView {
  margin-top: 10px;
}

.worldNavRow {
  margin-top: 0;
}

.worldTitle {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 2px;
}

.worldScoreboard {
  margin-top: 8px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.worldScoreChipRow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.worldScoreChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  color: rgba(43, 36, 64, 0.82);
}

.worldScoreChip b {
  color: rgba(43, 36, 64, 0.95);
}

.worldMasteryJourney {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid rgba(43, 36, 64, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
}

.worldMasteryTitle,
.worldMasterySkill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.worldMasteryTitle {
  margin-right: 3px;
  color: rgba(43, 36, 64, 0.78);
  font-size: 10px;
}

.worldMasterySkill {
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid rgba(43, 36, 64, 0.1);
  border-radius: 8px;
  background: rgba(245, 247, 251, 0.76);
  color: rgba(43, 36, 64, 0.5);
  font-size: 9px;
  font-weight: 850;
}

.worldMasterySkill.isLearned {
  border-color: rgba(53, 158, 125, 0.24);
  background: rgba(222, 250, 239, 0.78);
  color: #245f50;
}

.worldMasteryJourney .wohooIcon {
  width: 15px;
  height: 15px;
}

.worldCulturePanel {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(148px, 0.45fr) minmax(0, 1.55fr);
  gap: 10px 16px;
  align-items: start;
  padding: 9px 2px;
  border-top: 1px solid rgba(43, 36, 64, 0.1);
  border-bottom: 1px solid rgba(43, 36, 64, 0.1);
}

.worldCultureTitle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 3px 6px;
  align-items: center;
  min-width: 0;
  color: rgba(43, 36, 64, 0.88);
  font-size: 11px;
}

.worldCultureTitle .wohooIcon {
  grid-row: span 2;
  width: 18px;
  height: 18px;
}

.worldCultureTitle b {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.worldCultureTitle span {
  overflow: hidden;
  color: rgba(43, 36, 64, 0.58);
  font-size: 9px;
  font-weight: 780;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldCulturePanel dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  min-width: 0;
  margin: 0;
}

.worldCulturePanel dl > div {
  min-width: 0;
}

.worldCulturePanel dt,
.questCultureFacts dt {
  margin: 0 0 2px;
  color: rgba(43, 36, 64, 0.56);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.worldCulturePanel dd,
.questCultureFacts dd {
  margin: 0;
  color: rgba(43, 36, 64, 0.82);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.38;
}

.worldLeaderboardPreview {
  width: min(100%, 560px);
  padding: 9px 10px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.worldLeaderboardHead,
.worldLeaderboardRow {
  display: grid;
  grid-template-columns: 44px minmax(92px, 1fr) 86px 74px;
  gap: 8px;
  align-items: center;
}

.worldLeaderboardHead {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 900;
  color: rgba(43, 36, 64, 0.62);
}

.worldLeaderboardHead b {
  grid-column: span 3;
  color: rgba(43, 36, 64, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldLeaderboardRow {
  min-height: 26px;
  border-top: 1px solid rgba(43, 36, 64, 0.08);
  font-size: 11px;
  font-weight: 800;
}

.worldLeaderboardRow.isMe {
  color: #1f5c4a;
  background: rgba(122, 220, 192, 0.13);
}

.worldLeaderboardName,
.worldLeaderboardTime,
.worldLeaderboardMedal {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldLeaderboardRank {
  color: rgba(43, 36, 64, 0.62);
}

.worldLeaderboardEmpty {
  padding: 6px 0 2px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(43, 36, 64, 0.58);
}

.worldMap {
  --wm-paper: #f6f1dd;
  --wm-ink: #2f4058;
  --wm-accent: #ffca68;
  --wm-accent2: #6ac7a8;
  --wm-glow: #fff2be;
  position: relative;
  margin-top: 10px;
  min-height: 520px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--wm-ink) 24%, transparent);
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 8%, color-mix(in oklab, var(--wm-glow) 78%, white), color-mix(in oklab, var(--wm-paper) 92%, white) 42%, color-mix(in oklab, var(--wm-ink) 12%, white) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wm-paper) 48%, white), 0 14px 26px color-mix(in oklab, var(--wm-ink) 20%, transparent);
}

.worldMap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--wm-ink) 18%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--wm-ink) 14%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.15;
}

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

.worldMapBackdropImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.9;
  filter: saturate(1.08) contrast(1.02);
}

.worldMapBackdropShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 32, 0.14), rgba(18, 18, 32, 0.22));
}

.worldMap.hasPhoto .worldMapBackdropShade {
  background: linear-gradient(180deg, rgba(18, 18, 32, 0.06), rgba(18, 18, 32, 0.14));
}

.worldMapBackdrop svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.22;
}

.worldRouteLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.worldRouteLayer svg {
  width: 100%;
  height: 100%;
  display: block;
}

.worldRouteSvg .routePulse {
  opacity: 0.7;
  filter: drop-shadow(0 0 1px color-mix(in oklab, var(--wm-glow) 24%, white));
  animation: routeFlow 10.8s ease-in-out infinite;
}

.worldRouteSvg .routeBase {
  opacity: 0.6;
  filter: drop-shadow(0 0 0.5px color-mix(in oklab, var(--wm-glow) 20%, white));
}

.worldRouteSvg .routeRunnerTrack {
  opacity: 0;
}

.worldRouteSvg .routeRunner {
  opacity: 0;
  filter: none;
}

.worldRouteSvg .routeTraveler {
  opacity: 0;
  filter: none;
  animation: none;
}

.worldRouteSvg .routeTraveler.isAlt {
  opacity: 0;
  animation: none;
}

.worldRouteSvg .routeDot {
  transform-origin: center;
  animation: worldDotPulse 4.8s ease-in-out infinite;
}

.worldRouteSvg .routeDot.isBoss {
  animation-duration: 2.6s;
}

.worldSparkLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.worldSparkLayer svg {
  width: 100%;
  height: 100%;
  display: block;
}

.worldSpark {
  animation-name: worldSparkPulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0.22;
}

.worldSpark.sparkTone1 { opacity: 0.22; }
.worldSpark.sparkTone2 { opacity: 0.18; }
.worldSpark.sparkTone3 { opacity: 0.26; }

.worldGridLayer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 20), 1fr);
  grid-template-rows: repeat(var(--grid-rows, 10), 1fr);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.worldGridLayer.isVisible {
  opacity: 1;
}

.worldGridCell {
  position: relative;
  border: 1px solid rgba(236, 246, 255, 0.22);
}

.worldGridCellLabel {
  position: absolute;
  left: 1px;
  top: 1px;
  padding: 1px 3px;
  border-radius: 4px;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  color: rgba(16, 24, 40, 0.92);
  background: rgba(245, 252, 255, 0.72);
  border: 1px solid rgba(38, 56, 84, 0.2);
}

.worldNode {
  position: absolute;
  left: var(--nx, 50%);
  top: var(--ny, 50%);
  transform: translate(-50%, -50%);
  width: clamp(40px, 4.3vw, 52px);
  height: clamp(40px, 4.3vw, 52px);
  min-height: 0;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--wm-ink) 27%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(circle at 26% 22%, color-mix(in oklab, var(--wm-paper) 90%, white), color-mix(in oklab, var(--wm-paper) 74%, var(--wm-accent2) 8%) 64%, color-mix(in oklab, var(--wm-ink) 16%, transparent) 100%);
  color: var(--text);
  box-shadow: 0 7px 14px color-mix(in oklab, var(--wm-ink) 18%, transparent);
  font-weight: 800;
  cursor: pointer;
  z-index: 6;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.worldNode:hover {
  transform: translate(-50%, calc(-50% - 2px));
  box-shadow: 0 10px 18px color-mix(in oklab, var(--wm-ink) 24%, transparent);
}

.worldNode.isPadSelected {
  transform: translate(-50%, calc(-50% - 2px)) scale(1.04);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wm-accent2) 70%, transparent), 0 12px 22px color-mix(in oklab, var(--wm-ink) 24%, transparent);
}

.worldNode::after {
  content: "";
}

@keyframes worldNodeNextHalo {
  0% {
    transform: scale(0.94);
    opacity: 0.9;
  }
  72% {
    transform: scale(1.34);
    opacity: 0;
  }
  100% {
    transform: scale(1.34);
    opacity: 0;
  }
}

.worldNode.isBoss {
  border-color: color-mix(in oklab, var(--wm-accent2) 58%, var(--wm-ink) 24%);
  background:
    radial-gradient(circle at 28% 20%, color-mix(in oklab, var(--wm-paper) 82%, white), color-mix(in oklab, var(--wm-accent2) 34%, var(--wm-paper)) 65%, color-mix(in oklab, var(--wm-ink) 18%, transparent) 100%);
}

.worldNode.isNextRecommended {
  border-color: color-mix(in oklab, var(--wm-accent2) 84%, white 8%);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--wm-accent2) 26%, transparent),
    0 0 22px color-mix(in oklab, var(--wm-accent2) 28%, transparent),
    0 10px 22px color-mix(in oklab, var(--wm-ink) 24%, transparent);
}

.worldNode.isNextRecommended::after {
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 2px solid color-mix(in oklab, var(--wm-accent2) 70%, white 12%);
  pointer-events: none;
  animation: worldNodeNextHalo 1.85s ease-out infinite;
}

.worldNode.isNextRecommended .worldNodeLabel {
  color: color-mix(in oklab, var(--wm-ink) 88%, #111);
}

.worldNode.isNextRecommended .worldNodeGlyph {
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--wm-accent2) 34%, transparent));
}

.worldNode.isCompleted {
  border-color: color-mix(in oklab, var(--wm-accent) 70%, #2f6c48);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wm-accent) 46%, transparent), 0 8px 18px color-mix(in oklab, var(--wm-ink) 18%, transparent);
}

.worldNode.isElite {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #d09d2b 58%, transparent), 0 10px 20px color-mix(in oklab, var(--wm-ink) 22%, transparent);
}

.worldNode.isDiamond {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #8ed6ff 74%, transparent), 0 10px 24px color-mix(in oklab, #64c4ff 34%, transparent);
}

.worldNode.isMissing {
  cursor: default;
  border-style: dashed;
  color: rgba(43, 36, 64, 0.45);
  background: rgba(255,255,255,0.48);
}

.worldNode.isLocked {
  cursor: not-allowed;
  opacity: 0.86;
  filter: saturate(0.72);
}

.worldNode.isLocked .worldNodeBossTag {
  border-color: color-mix(in oklab, #66758d 46%, transparent);
  background: color-mix(in oklab, #eef2fb 72%, white);
  color: #455469;
}

.worldNodeGlyph {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

.worldNodeGlyph svg {
  width: 100%;
  height: 100%;
  display: block;
}

.worldNodeGlyphMissing {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(199,208,224,0.5));
  border: 1px dashed rgba(58, 45, 73, 0.4);
}

.worldNodeMedal {
  position: absolute;
  left: -2px;
  top: -5px;
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.94;
  filter: drop-shadow(0 1px 2px rgba(36, 32, 52, 0.24));
}

.worldNodeMedal svg {
  width: 100%;
  height: 100%;
  display: block;
}

.worldNodeLabel {
  display: block;
  font-size: 7px;
  text-align: center;
  line-height: 1;
}

.worldNodeBossTag {
  position: absolute;
  bottom: -14px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--wm-accent2) 56%, transparent);
  background: color-mix(in oklab, var(--wm-paper) 72%, white);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--wm-ink) 84%, #111);
}

.worldWohooMarker {
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  --world-wohoo-lift: 6px;
  --world-wohoo-bob-lift: 10px;
  width: 52px;
  height: 58px;
  transform: translate(-50%, calc(-100% - var(--world-wohoo-lift)));
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: left 0.22s ease, top 0.22s ease, opacity 0.12s ease, transform 0.18s ease;
}

.worldWohooMarker.isVisible {
  opacity: 1;
  animation: worldWohooBob 1.8s ease-in-out infinite;
}

.worldWohooShadow {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 34px;
  height: 10px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(22, 26, 44, 0.26);
  filter: blur(1px);
}

.worldWohooSprite {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 48px;
  transform: translateX(-50%);
  background-image: url("/static/assets/wohoo/wohoo-profile-marker.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.62))
    drop-shadow(0 8px 12px color-mix(in oklab, var(--wm-ink) 24%, transparent));
  animation: worldWohooSpriteIdle 1.15s ease-in-out infinite;
}

.worldWohooSprite::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.42);
  opacity: 0.65;
}

@keyframes worldWohooBob {
  0%, 100% { transform: translate(-50%, calc(-100% - var(--world-wohoo-lift))); }
  50% { transform: translate(-50%, calc(-100% - var(--world-wohoo-bob-lift))); }
}

@keyframes worldWohooSpriteIdle {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.035, 0.975); }
}

.worldCursorControls {
  position: relative;
  z-index: 12;
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.72);
}

.worldCursorLevelButton {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 8px 7px 12px;
  overflow: hidden;
  border: 1px solid rgba(104, 66, 15, 0.3);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 250, 226, 0.98), rgba(255, 233, 172, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 8px rgba(43, 36, 64, 0.12);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.worldCursorLevelButton:hover {
  border-color: rgba(104, 66, 15, 0.52);
  background: linear-gradient(180deg, rgba(255, 253, 238, 1), rgba(255, 226, 143, 1));
}

.worldCursorLevelButton:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(104, 66, 15, 0.16);
}

.worldCursorLevelLabel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
  font-weight: 850;
}

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

.worldCursorLevelMeta {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(43, 36, 64, 0.64);
  font-size: 11px;
  white-space: nowrap;
}

.worldCursorMetaDivider {
  margin: 0 5px;
}

.worldCursorMedal {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.worldCursorMedal svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 3px;
}

.worldCursorMedal > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.worldCursorPlayRelief {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(104, 66, 15, 0.36);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd77e, #f1b74d);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    inset 0 -2px 0 rgba(104, 66, 15, 0.16),
    0 2px 5px rgba(104, 66, 15, 0.18);
  color: #68420f;
}

.worldCursorPlayRelief .wohooIcon {
  width: 21px;
  height: 21px;
  transform: translateX(1px);
}

.worldCursorHint {
  font-size: 11px;
  font-weight: 700;
  color: rgba(43, 36, 64, 0.62);
}

.worldLegend {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 10px;
}

.worldLegendTitle {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(43, 36, 64, 0.74);
  font-weight: 800;
}

.worldLegendGrid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px 10px;
}

.worldLegendItem {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.worldLegendIcon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.worldLegendIcon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.worldLegendLabel {
  font-size: 11px;
  color: rgba(43, 36, 64, 0.78);
}

@keyframes routeFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -38; }
}

@keyframes routeTravelerPulse {
  0% { opacity: 0.72; }
  50% { opacity: 1; }
  100% { opacity: 0.72; }
}

@keyframes worldDotPulse {
  0% { transform: scale(1); opacity: 0.62; }
  50% { transform: scale(1.045); opacity: 0.84; }
  100% { transform: scale(1); opacity: 0.62; }
}

@keyframes worldSparkPulse {
  0% { opacity: 0.12; transform: scale(0.9); }
  50% { opacity: 0.34; transform: scale(1.14); }
  100% { opacity: 0.12; transform: scale(0.9); }
}

.worldMapTheme-2,
.worldMapTheme-8,
.worldMapTheme-10 {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wm-glow) 26%, transparent), 0 14px 28px color-mix(in oklab, var(--wm-ink) 30%, transparent);
}

.worldMapTheme-2 .worldNode,
.worldMapTheme-8 .worldNode,
.worldMapTheme-10 .worldNode {
  background: linear-gradient(180deg, color-mix(in oklab, var(--wm-paper) 86%, white), color-mix(in oklab, var(--wm-paper) 72%, var(--wm-accent) 10%));
}

.runCard {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.runCardBoss {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.76)),
    radial-gradient(circle at 14% 16%, color-mix(in oklab, var(--boss-accent, #fff0c6) 20%, white), transparent 58%);
}

.runBossHero {
  --boss-accent: #fff0c6;
  margin: -2px -2px 10px -2px;
  padding: 10px 12px 11px 12px;
  border: 1px solid color-mix(in oklab, var(--boss-accent) 46%, rgba(43,36,64,0.12));
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), color-mix(in oklab, var(--boss-accent) 26%, white)),
    radial-gradient(circle at 88% 14%, rgba(255,255,255,0.65), transparent 42%);
  box-shadow: 0 8px 20px rgba(43,36,64,0.08);
}

.runBossOverline {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(43, 36, 64, 0.58);
}

.runBossTitle {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  color: rgba(43, 36, 64, 0.98);
}

.runBossSubtitle {
  margin-top: 3px;
  font-size: 11px;
  color: rgba(43, 36, 64, 0.76);
}

.diagnosticsPanel {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.diagnosticsPanel summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(43, 36, 64, 0.8);
  user-select: none;
}

.diagnosticsPanel summary::-webkit-details-marker {
  display: none;
}

.diagnosticsPanel[open] summary {
  border-bottom: 1px solid var(--border);
}

.diagnosticsBody {
  padding: 8px 10px 10px 10px;
}

.runCard strong {
  display: inline-block;
  margin-right: 6px;
}

.runCardHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.runCardMedal {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.runCardMedal svg {
  width: 100%;
  height: 100%;
  display: block;
}

.runCard .splitRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
}

.runCard .splitRow .label {
  color: var(--muted);
}

.runCard .splitRow .value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.onboardingCard {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(122,220,192,0.18);
}

.onboardingTitle {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.onboardingText {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}

.qaInfo {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.35;
}

.verificationInfo {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.68);
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}

.verificationTitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(43, 36, 64, 0.82);
  margin-bottom: 6px;
}

.verificationList {
  display: grid;
  gap: 6px;
}

.verificationRow {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(58,45,73,0.08);
}

.verificationRow.isVerified {
  background: rgba(159, 241, 215, 0.16);
  border-color: rgba(106, 199, 168, 0.34);
}

.verificationRow.isRejected {
  background: rgba(255, 138, 161, 0.11);
  border-color: rgba(198, 88, 114, 0.28);
}

.verificationStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  background: rgba(58,45,73,0.08);
  color: rgba(43,36,64,0.82);
}

.verificationRow.isVerified .verificationStatus {
  background: rgba(106, 199, 168, 0.18);
  color: #21594a;
}

.verificationRow.isRejected .verificationStatus {
  background: rgba(198, 88, 114, 0.14);
  color: #7d3145;
}

.verificationBody {
  min-width: 0;
}

.verificationHeadline {
  color: var(--text);
}

.verificationMeta {
  margin-top: 2px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  word-break: break-word;
}

.verificationAdmin {
  margin-top: 10px;
}

.verificationFilters {
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

.verificationFilters input,
.verificationFilters select {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(58,45,73,0.14);
  background: rgba(255,255,255,0.78);
  color: var(--text);
  font: inherit;
}

.verificationFilters input {
  flex: 1 1 180px;
}

.verificationFilters select {
  flex: 0 0 auto;
}

.verificationSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.verificationSummaryChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(58,45,73,0.12);
  background: rgba(255,255,255,0.74);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.verificationSummaryChip strong {
  font-weight: 800;
}

.verificationSummaryChip.isVerified {
  border-color: rgba(106, 199, 168, 0.34);
  background: rgba(159, 241, 215, 0.15);
  color: #21594a;
}

.verificationSummaryChip.isRejected {
  border-color: rgba(198, 88, 114, 0.28);
  background: rgba(255, 138, 161, 0.11);
  color: #7d3145;
}

.verificationSummaryChip.isReason {
  border-color: rgba(125, 164, 220, 0.28);
  background: rgba(214, 232, 255, 0.5);
  color: #30507a;
}

.verificationRowTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.verificationDetailsBtn {
  flex: 0 0 auto;
  min-width: 68px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 10px;
}

.verificationModal {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(24, 20, 40, 0.22);
}

.verificationModalCard {
  width: min(680px, calc(100vw - 48px));
  max-height: min(80vh, 760px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(58,45,73,0.16);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 24px 60px rgba(43, 36, 64, 0.28);
  padding: 14px;
}

.verificationModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.verificationModalTitle {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
}

.verificationModalCloseBtn {
  min-width: 84px;
}

.verificationModalBody {
  display: grid;
  gap: 10px;
}

.shopModalCard {
  width: min(880px, calc(100vw - 48px));
}

.shopModalHeader {
  align-items: flex-start;
}

.shopWalletLine {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(68, 59, 90, 0.8);
}

.shopItems {
  display: grid;
  gap: 14px;
}

.settingsModalCard {
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 48px));
  max-height: min(86vh, 760px);
  overflow: hidden;
}

.settingsPanel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.settingsTabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid rgba(58, 45, 73, 0.12);
  border-radius: 12px;
  background: rgba(242, 245, 252, 0.88);
}

.settingsTab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 40px;
  padding: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(43, 36, 64, 0.66);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.settingsTab .wohooIcon {
  width: 17px;
  height: 17px;
}

.settingsTab.isActive {
  background: rgba(111, 213, 183, 0.82);
  color: #183c36;
  box-shadow: 0 5px 14px rgba(55, 148, 122, 0.18);
}

.settingsSection {
  display: grid;
  gap: 10px;
}

.settingsSection[hidden] {
  display: none;
}

.settingsRow {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(58, 45, 73, 0.12);
  background:
    radial-gradient(circle at 12% 12%, rgba(111, 231, 187, 0.1), rgba(111, 231, 187, 0.02) 48%),
    linear-gradient(180deg, rgba(252, 254, 255, 0.97), rgba(245, 248, 252, 0.91));
  box-shadow: 0 8px 22px rgba(43, 36, 64, 0.06);
}

.settingsLabel {
  font-size: 12px;
  font-weight: 800;
  color: rgba(43, 36, 64, 0.88);
  letter-spacing: 0;
}

.settingsSlider {
  width: 100%;
}

.settingsSelect {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(58, 45, 73, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: rgba(43, 36, 64, 0.92);
  font-weight: 800;
  padding: 6px 9px;
}

.settingsCheckbox {
  justify-self: start;
  width: 24px;
  height: 24px;
  accent-color: #58c5a4;
}

.settingsToggleRow {
  grid-template-columns: minmax(120px, 160px) minmax(180px, 1fr) auto;
}

.settingsValue {
  min-width: 48px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  color: rgba(43, 36, 64, 0.78);
}

.settingsActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.settingsFooter {
  flex: 0 0 auto;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(58, 45, 73, 0.12);
}

.settingsFooter #settingsResumeBtn {
  margin-left: auto;
}

.settingsInlineCommand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
}

.settingsControlPreview {
  position: relative;
  min-height: 108px;
  overflow: hidden;
  border: 1px solid rgba(58, 45, 73, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(rgba(75, 199, 165, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75, 199, 165, 0.07) 1px, transparent 1px),
    rgba(245, 249, 247, 0.9);
  background-size: 18px 18px;
}

.settingsControlPresets {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(58, 45, 73, 0.12);
  border-radius: 8px;
  background: rgba(246, 247, 250, 0.86);
}

.settingsPresetBtn {
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.settingsPresetBtn:hover,
.settingsPresetBtn:focus-visible {
  border-color: rgba(55, 151, 129, 0.42);
  background: rgba(255, 255, 255, 0.9);
}

.settingsPresetBtn.isActive,
.settingsPresetBtn[aria-pressed="true"] {
  border-color: rgba(43, 151, 125, 0.58);
  background: rgba(174, 229, 211, 0.72);
  color: #174f42;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.settingsPreviewJoystick {
  position: absolute;
  left: 32px;
  bottom: 18px;
  width: calc(58px * var(--wohoo-touch-joystick-scale));
  height: calc(58px * var(--wohoo-touch-joystick-scale));
  border: 2px solid rgba(79, 110, 91, 0.5);
  border-radius: 50%;
  background: rgba(255, 226, 157, 0.65);
}

.settingsPreviewJoystick span {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #e7a84c;
  box-shadow: 0 3px 8px rgba(83, 52, 17, 0.24);
  transform: translate(-50%, -50%);
}

.settingsPreviewActions {
  position: absolute;
  right: 36px;
  bottom: 17px;
  width: calc(78px * var(--wohoo-touch-action-scale));
  height: calc(70px * var(--wohoo-touch-action-scale));
}

.settingsPreviewActions span {
  position: absolute;
  width: 29px;
  height: 29px;
  border: 2px solid rgba(92, 57, 20, 0.46);
  border-radius: 50%;
  background: rgba(255, 212, 125, 0.78);
}

.settingsPreviewActions span:nth-child(1) { left: 24px; top: 0; }
.settingsPreviewActions span:nth-child(2) { right: 0; top: 22px; }
.settingsPreviewActions span:nth-child(3) { left: 24px; bottom: 0; }
.settingsPreviewActions span:nth-child(4) { left: 0; top: 22px; }

.settingsAccountSummary {
  padding: 10px 12px;
  border: 1px solid rgba(75, 199, 165, 0.22);
  border-radius: 10px;
  background: rgba(235, 253, 247, 0.82);
  color: rgba(28, 80, 69, 0.9);
  font-size: 12px;
  font-weight: 800;
}

.settingsResetConfirm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(211, 91, 112, 0.24);
  border-radius: 10px;
  background: rgba(255, 241, 244, 0.94);
  color: #6f2b3d;
  font-size: 11px;
  font-weight: 850;
}

.settingsResetConfirm span {
  flex: 1 1 auto;
}

.audioCaption {
  position: fixed;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 180;
  max-width: min(620px, calc(100vw - 24px));
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 8px;
  background: rgba(25, 24, 36, 0.86);
  color: #fff;
  font-size: calc(13px * var(--wohoo-text-scale, 1));
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 8px 24px rgba(18, 16, 28, 0.28);
  transform: translateX(-50%);
}

body.text-size-compact { --wohoo-text-scale: 0.92; }
body.text-size-standard { --wohoo-text-scale: 1; }
body.text-size-large { --wohoo-text-scale: 1.14; }

body.text-size-large .hint,
body.text-size-large .shopWalletLine,
body.text-size-large .campaignSubTitle,
body.text-size-large .questModalBody,
body.text-size-large .postLevelPanel {
  font-size: calc(12px * var(--wohoo-text-scale));
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media (max-width: 640px) {
  .settingsRow {
    grid-template-columns: 1fr;
  }

  .settingsValue {
    min-width: 0;
    text-align: left;
  }

  .settingsActions {
    justify-content: stretch;
    flex-wrap: wrap;
  }
}

.questModal {
  position: fixed;
  z-index: 170;
}

body.quest-modal-open {
  overflow: hidden;
}

body.quest-modal-open #overlay {
  z-index: 190;
}

body.quest-modal-open .touchControls {
  pointer-events: none;
}

.questModalCard {
  width: min(920px, calc(100vw - 34px));
  max-height: min(760px, calc(100vh - 34px));
  overflow: hidden;
  padding: 0;
  border-color: rgba(72, 58, 95, 0.2);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 220, 137, 0.24), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(111, 231, 187, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(255, 253, 246, 0.98), rgba(246, 249, 255, 0.96));
}

.questModalFrame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 230px) minmax(0, 1fr);
  min-height: 520px;
}

.questModalArt {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(39, 48, 77, 0.96), rgba(33, 75, 91, 0.92) 48%, rgba(99, 84, 53, 0.88)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px);
}

.questModalArt::before,
.questModalArt::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(0.2px);
}

.questModalArt::before {
  left: -44px;
  bottom: -58px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 211, 128, 0.26), rgba(255, 211, 128, 0.06) 58%, transparent 64%);
}

.questModalArt::after {
  right: -80px;
  top: 74px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255,255,255,0.16);
}

.questMoon {
  position: absolute;
  left: 28px;
  top: 30px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(255, 236, 184, 0.86) 42%, rgba(255, 198, 103, 0.55) 72%, transparent 74%);
  box-shadow: 0 0 34px rgba(255, 222, 142, 0.52);
}

.questTrail {
  position: absolute;
  left: 34px;
  width: 164px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.58), rgba(255,255,255,0.04));
  transform-origin: left center;
}

.questTrailA { top: 190px; transform: rotate(-18deg); }
.questTrailB { top: 278px; transform: rotate(12deg); opacity: 0.78; }
.questTrailC { top: 382px; transform: rotate(-8deg); opacity: 0.62; }

.questModalContent {
  min-width: 0;
  max-height: min(760px, calc(100vh - 34px));
  overflow: auto;
}

.questModalHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(255, 253, 247, 0.92));
  backdrop-filter: blur(10px);
  margin-bottom: 0;
  padding: 18px 26px 10px 20px;
}

.questModalHeader .verificationModalCloseBtn {
  display: none;
}

.questModalEyebrow {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(43, 36, 64, 0.58);
}

.questModalTitle {
  margin-top: 2px;
}

.questModalSubtitle {
  max-width: 620px;
}

.questModalBody {
  display: grid;
  gap: 14px;
  padding: 0 26px 22px 20px;
}

.questBrief {
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid rgba(72, 58, 95, 0.14);
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 202, 104, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(251, 249, 241, 0.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.questImmediateAction {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 12px;
  border: 1px solid rgba(50, 151, 121, 0.2);
  border-radius: 12px;
  background: rgba(224, 248, 238, 0.82);
  color: rgba(35, 82, 70, 0.94);
}

.questImmediateAction > span:last-child {
  display: grid;
  gap: 1px;
}

.questImmediateAction small {
  color: rgba(35, 82, 70, 0.62);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.questImmediateAction strong {
  font-size: 13px;
  line-height: 1.25;
}

.questModal[data-presentation="compact"] .questModalFrame {
  min-height: 0;
}

.questModal[data-presentation="compact"] .questBriefText {
  font-size: 14px;
}

.questModal[data-presentation="compact"] .questModalBody {
  gap: 10px;
}

.questModal[data-presentation="compact"] .questSection {
  padding: 10px 12px;
}

.questBriefText {
  font-size: 17px;
  line-height: 1.42;
  font-weight: 800;
  color: rgba(43, 36, 64, 0.94);
}

.questEnglishCards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 7px;
}

.questEnglishCardsTitle {
  flex: 1 0 100%;
  color: rgba(43, 36, 64, 0.58);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.questEnglishCard {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 150px;
  min-height: 48px;
  padding: 6px 9px;
  border: 1px solid rgba(59, 111, 101, 0.22);
  border-radius: 8px;
  background: rgba(236, 251, 245, 0.88);
  color: #285f54;
  text-align: left;
  cursor: pointer;
}

.questEnglishCard:hover {
  background: rgba(220, 247, 237, 0.98);
}

.questEnglishCard:focus-visible {
  outline: 3px solid rgba(67, 181, 149, 0.38);
  outline-offset: 2px;
}

.questEnglishCard > .wohooIcon {
  width: 23px;
  height: 23px;
}

.questEnglishCard strong,
.questEnglishCard small {
  display: block;
}

.questEnglishCard strong {
  font-size: 12px;
  line-height: 1.15;
}

.questEnglishCard small {
  margin-top: 2px;
  color: rgba(43, 36, 64, 0.62);
  font-size: 10px;
}

.questSection {
  border: 1px solid rgba(72, 58, 95, 0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.74);
  padding: 13px 14px;
}

.questSectionTitle {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(43, 36, 64, 0.68);
}

.questObjectiveList {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.questObjectiveList li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  color: rgba(43, 36, 64, 0.86);
}

.questObjectiveIndex {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(63, 202, 193, 0.16);
  color: rgba(33, 87, 98, 0.94);
  font-size: 11px;
  font-weight: 900;
}

.questCastGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.questToken {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid rgba(72, 58, 95, 0.14);
  border-radius: 999px;
  padding: 4px 9px 4px 5px;
  background: rgba(255,255,255,0.78);
  color: rgba(43, 36, 64, 0.88);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.questInlineIcon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(43, 36, 64, 0.18);
  background: linear-gradient(180deg, #fff, #edf4ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.questInlineIcon::before,
.questInlineIcon::after {
  content: "";
  position: absolute;
}

.questIcon-enemy {
  background: linear-gradient(180deg, #fff4f6, #ffd4df);
}

.questIcon-enemy::before {
  width: 12px;
  height: 10px;
  border-radius: 50% 50% 46% 46%;
  background: #8a4b67;
}

.questIcon-enemy::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 6px 0 0 #fff;
  transform: translate(-3px, -1px);
}

.questIcon-item {
  background: linear-gradient(180deg, #fff8dc, #ffd37b);
}

.questIcon-item::before {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #c48a27;
  transform: rotate(45deg);
}

.questIcon-key {
  background: linear-gradient(180deg, #fff7c4, #ffd26b);
}

.questIcon-key::before {
  left: 5px;
  top: 7px;
  width: 8px;
  height: 8px;
  border: 2px solid #9a6b18;
  border-radius: 50%;
}

.questIcon-key::after {
  left: 13px;
  top: 11px;
  width: 8px;
  height: 2px;
  background: #9a6b18;
  box-shadow: 4px 3px 0 -1px #9a6b18;
}

.questIcon-treasure {
  background: linear-gradient(180deg, #e8fff6, #7ce0c5);
}

.questIcon-treasure::before {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #37a68f;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.34);
}

.questIcon-exit {
  background: linear-gradient(180deg, #eef6ff, #97cfff);
}

.questIcon-exit::before {
  width: 13px;
  height: 13px;
  border: 3px solid #4f78b8;
  border-radius: 50%;
}

.questIcon-crumb {
  background: linear-gradient(180deg, #fff0d4, #d7a36b);
}

.questIcon-crumb::before {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b8753f;
  box-shadow:
    -3px -1px 0 -1px rgba(88, 52, 24, 0.72),
    3px 2px 0 -1px rgba(88, 52, 24, 0.72);
}

.questSpriteIcon {
  background-image: url("/static/assets/sprites/characters.png");
  background-repeat: no-repeat;
  background-size: 176px 88px;
}

.questSprite-toiletpaper { background-position: -88px -44px; }
.questSprite-butterfly_fang { background-position: -132px -44px; }
.questSprite-meatball_pan { background-position: 0 -66px; }
.questSprite-einstein_ring { background-position: -44px -66px; }

.questTextBlock {
  color: rgba(43, 36, 64, 0.78);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 650;
}

.questCultureFacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 12px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid rgba(72, 58, 95, 0.12);
}

.questCultureFacts > div {
  min-width: 0;
}

.questCultureFacts dd {
  font-size: 11px;
  line-height: 1.45;
}

.questControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.questControlSpacer {
  flex: 1 1 auto;
}

.questStartBtn {
  margin-left: auto;
}

.questLanguageSelect {
  min-height: 36px;
  border: 1px solid rgba(72, 58, 95, 0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  color: rgba(43, 36, 64, 0.88);
  font-weight: 900;
  padding: 6px 10px;
}

.questHintList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.questHintItem {
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(72, 58, 95, 0.1);
  background: rgba(246, 248, 255, 0.72);
  color: rgba(43, 36, 64, 0.8);
  font-size: 12px;
  line-height: 1.42;
  font-weight: 750;
}

.questHintItem.isSpoiler {
  border-color: rgba(195, 133, 72, 0.28);
  background: rgba(255, 248, 229, 0.86);
}

body.layout-phone .questModal {
  align-items: flex-end;
  padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

body.layout-phone .questModalCard {
  width: min(100%, calc(var(--layout-vw, 100vw) - 16px));
  max-height: calc(var(--layout-vh, 100dvh) - 16px - env(safe-area-inset-bottom));
  border-radius: 22px 22px 16px 16px;
}

body.layout-phone .questModalFrame {
  grid-template-columns: 1fr;
  min-height: 0;
}

body.layout-phone .questModalArt {
  min-height: 68px;
}

body.layout-phone .questModalContent {
  max-height: calc(var(--layout-vh, 100dvh) - 92px - env(safe-area-inset-bottom));
}

body.layout-phone .questModalHeader {
  padding: 14px 18px 8px 16px;
}

body.layout-phone .questModalBody {
  padding: 0 18px 16px 16px;
}

body.layout-phone .questControls {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 10px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0), rgba(255, 253, 247, 0.96) 22%, rgba(255, 253, 247, 0.98));
}

body.layout-phone .questEnglishCard {
  flex: 1 1 140px;
  min-height: 44px;
}

body.layout-phone .questStartBtn {
  margin-left: auto;
}

.questFootnote {
  color: rgba(43, 36, 64, 0.56);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 750;
}

@media (max-width: 720px) {
  .questModalCard {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }

  .questModalFrame {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .questModalArt {
    min-height: 84px;
  }

  .questMoon {
    width: 54px;
    height: 54px;
  }

  .questTrailA,
  .questTrailB,
  .questTrailC {
    top: 54px;
  }

  .questModalContent {
    max-height: calc(100vh - 102px);
  }

  .questBriefText {
    font-size: 15px;
  }
}

.shopSection {
  display: grid;
  gap: 8px;
}

.shopPresetGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.shopPresetCard {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(58, 45, 73, 0.12);
  background:
    radial-gradient(circle at 12% 12%, rgba(111, 231, 187, 0.14), rgba(111, 231, 187, 0.02) 46%),
    linear-gradient(180deg, rgba(252, 254, 255, 0.97), rgba(245, 248, 252, 0.91));
  box-shadow: 0 10px 24px rgba(43, 36, 64, 0.08);
}

.shopPresetCard.isCurrent {
  border-color: rgba(73, 177, 134, 0.34);
  box-shadow: 0 10px 24px rgba(73, 177, 134, 0.12);
}

.shopPresetCard.isEmpty {
  opacity: 0.92;
}

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

.shopPresetTitle {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
}

.shopPresetState {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(68, 59, 90, 0.68);
}

.shopPresetLine {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(68, 59, 90, 0.84);
}

.shopSectionTitle {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(68, 59, 90, 0.76);
}

.shopGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.shopCard {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(58, 45, 73, 0.12);
  background:
    radial-gradient(circle at 10% 10%, rgba(122, 220, 192, 0.12), rgba(122, 220, 192, 0.02) 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
  box-shadow: 0 10px 24px rgba(43, 36, 64, 0.1);
}

.shopCard.isEquipped {
  border-color: rgba(73, 177, 134, 0.34);
  box-shadow: 0 10px 24px rgba(73, 177, 134, 0.14);
}

.shopCard.isLocked {
  opacity: 0.88;
}

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

.shopCardTitle {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
}

.shopCardBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shopCardBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(58, 45, 73, 0.1);
  background: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(68, 59, 90, 0.76);
}

.shopCardBadge.isOwned {
  border-color: rgba(88, 164, 128, 0.2);
  color: #275e4b;
}

.shopCardBadge.isEquipped {
  border-color: rgba(73, 177, 134, 0.28);
  background: rgba(111, 231, 187, 0.14);
  color: #1f5c4a;
}

.shopCardDesc {
  min-height: 36px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(68, 59, 90, 0.84);
}

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

.shopCost {
  font-size: 12px;
  font-weight: 800;
  color: rgba(49, 63, 86, 0.92);
}

.shopCost.isFree {
  color: rgba(68, 59, 90, 0.76);
}

.shopActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.shopActionNote {
  font-size: 11px;
  color: rgba(68, 59, 90, 0.66);
}

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

.verificationDetailCard {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(58,45,73,0.1);
  background: rgba(255,255,255,0.82);
}

.verificationDetailCardWide {
  grid-column: 1 / -1;
}

.verificationDetailLabel {
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(68,59,90,0.68);
}

.verificationDetailValue {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  word-break: break-word;
}

.verificationDetailValue.isMono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
}

.verificationDetailDeltaPositive {
  color: #8b384d;
}

.verificationDetailDeltaNegative {
  color: #25604d;
}

.verificationDetailReason {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(198, 88, 114, 0.2);
  background: rgba(255, 138, 161, 0.08);
}

@media (max-width: 760px) {
  .verificationDetailGrid {
    grid-template-columns: 1fr;
  }

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

.hud {
  pointer-events: none;
  position: relative;
  display: block;
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
  text-shadow: none;
}

.hudInner {
  --hud-world-paper: #f7f1dd;
  --hud-world-ink: #2e3f56;
  --hud-world-accent: #ffca68;
  --hud-world-accent2: #6ac7a8;
  --hud-world-glow: #fff2be;
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}

.hudCard {
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 16%, var(--border));
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--hud-world-paper) 18%, rgba(255, 255, 255, 0.94)),
    rgba(255, 255, 255, 0.88)
  );
  box-shadow: 0 6px 16px color-mix(in oklab, var(--hud-world-ink) 16%, rgba(43, 36, 64, 0.12));
  align-self: start;
  padding: 7px 9px;
}

.hudCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.hudBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 22%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--hud-world-accent2) 26%, #ffffff),
    color-mix(in oklab, var(--hud-world-accent2) 12%, #ffffff)
  );
}

.hudMeta {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.hudHearts {
  display: flex;
  gap: 4px;
  align-items: center;
  min-height: 18px;
}

.hudHeart {
  --heart-stroke: rgba(124, 100, 130, 0.68);
  --heart-fill: transparent;
  width: 15px;
  height: 15px;
  display: inline-flex;
}

.hudHeartSvg {
  width: 100%;
  height: 100%;
  display: block;
}

.hudHeartStroke {
  fill: none;
  stroke: var(--heart-stroke);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.hudHeartFill {
  fill: var(--heart-fill);
}

.hudHeart.isFull {
  --heart-stroke: #ff6b90;
  --heart-fill: #ff6b90;
}

.hudHeart.isBonus {
  --heart-stroke: rgba(214, 169, 62, 0.96);
}

.hudHeart.isBonus.isFull {
  --heart-stroke: #d8aa36;
  --heart-fill: #ff6b90;
}

.hudHeart.isBonus .hudHeartStroke {
  stroke-width: 2.2;
}

.hudHeart.isBonus.isFull .hudHeartSvg {
  filter:
    drop-shadow(0 0 4px rgba(248, 211, 106, 0.44))
    drop-shadow(0 0 1px rgba(216, 170, 54, 0.56));
}

.hudHealthSplit {
  margin-top: 5px;
}

.hudMeter {
  margin-top: 6px;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(82, 64, 101, 0.16);
}

.hudMeterFill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff6b90, #ff9d7d);
}

.hudScoreValue {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  color: #2a2240;
}

.hudCardScore.isPulse .hudScoreValue {
  animation: scorePulse 220ms ease-out;
}

.hudAmmoRow {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 17px;
  flex-wrap: wrap;
}

.hudCookie {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(92, 64, 33, 0.45);
  background: rgba(200, 168, 124, 0.3);
}

.hudCookie.isFull {
  background: #d7a36b;
  box-shadow: 0 0 0 1px rgba(99, 68, 37, 0.2);
}

.hudAmmoOverflow {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 2px;
}

.hudAbilityDock {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.hudDockSectionLabel {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--hud-world-ink) 68%, var(--muted));
}

.hudAbilitySlot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 26%, transparent);
  background: color-mix(in oklab, var(--hud-world-paper) 18%, rgba(255, 255, 255, 0.76));
  padding: 4px 6px;
}

.hudAbilitySlot.isPrimary {
  border-color: color-mix(in oklab, var(--hud-world-accent2) 62%, var(--hud-world-ink) 26%);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--hud-world-accent2) 24%, rgba(255, 255, 255, 0.86)),
    color-mix(in oklab, var(--hud-world-accent2) 12%, rgba(255, 255, 255, 0.76))
  );
}

.hudAbilitySlot.isPrimary.isWall {
  border-color: color-mix(in oklab, var(--hud-world-accent) 68%, var(--hud-world-ink) 24%);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--hud-world-accent) 30%, rgba(255, 255, 255, 0.88)),
    color-mix(in oklab, var(--hud-world-accent) 14%, rgba(255, 255, 255, 0.78))
  );
}

.hudAbilitySlot.isSecondary {
  border-color: color-mix(in oklab, var(--hud-world-accent) 56%, var(--hud-world-ink) 24%);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--hud-world-accent) 22%, rgba(255, 255, 255, 0.86)),
    color-mix(in oklab, var(--hud-world-accent) 10%, rgba(255, 255, 255, 0.76))
  );
}

.hudAbilitySlot.isDisabled {
  opacity: 0.62;
  filter: saturate(0.72);
}

.hudAbilitySlot.isPrimary.isBuilder {
  border-color: color-mix(in oklab, var(--hud-world-accent2) 72%, var(--hud-world-ink) 22%);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--hud-world-accent2) 28%, rgba(255, 255, 255, 0.9)),
    color-mix(in oklab, var(--hud-world-paper) 12%, rgba(255, 255, 255, 0.78))
  );
}

.hudAbilityKey {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 24%, transparent);
  background: color-mix(in oklab, var(--hud-world-paper) 26%, rgba(255, 255, 255, 0.94));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.hudAbilityGlyph {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  position: relative;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 16%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(230, 242, 255, 0.74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.hudAbilityGlyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hudAbilityGlyph.isSpin {
  border-color: color-mix(in oklab, var(--hud-world-accent2) 62%, transparent);
}

.hudAbilityGlyph.isSpin::after {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 2px solid color-mix(in oklab, var(--hud-world-accent2) 78%, var(--hud-world-ink) 22%);
  border-right-color: transparent;
}

.hudAbilityGlyph.isWall {
  border-radius: 5px;
  border-color: color-mix(in oklab, var(--hud-world-accent) 62%, transparent);
}

.hudAbilityGlyph.isWall::after {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--hud-world-accent) 78%, rgba(255, 255, 255, 0.12));
  box-shadow:
    -5px 0 0 color-mix(in oklab, var(--hud-world-accent) 42%, transparent),
    5px 0 0 color-mix(in oklab, var(--hud-world-accent) 42%, transparent);
}

.hudAbilityGlyph.isCookie {
  border-color: color-mix(in oklab, #d2a06d 68%, transparent);
  background: linear-gradient(180deg, rgba(255, 244, 226, 0.96), rgba(241, 211, 170, 0.78));
}

.hudAbilityGlyph.isCookie::after {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(120, 77, 36, 0.7);
  box-shadow:
    -4px -2px 0 rgba(120, 77, 36, 0.66),
    4px 1px 0 rgba(120, 77, 36, 0.66),
    -1px 4px 0 rgba(120, 77, 36, 0.6);
}

.hudAbilityGlyph.isSpecial {
  border-color: color-mix(in oklab, #7ce0c5 66%, transparent);
  background: linear-gradient(180deg, rgba(239, 255, 250, 0.94), rgba(161, 230, 212, 0.82));
}

.hudAbilityGlyph.isSpecial::after {
  width: 8px;
  height: 8px;
  background: color-mix(in oklab, #4eb9a2 78%, rgba(255, 255, 255, 0.1));
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.hudAbilityBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hudAbilityName {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  color: rgba(43, 36, 64, 0.94);
}

.hudAbilityHint {
  font-size: 9px;
  line-height: 1.1;
  color: rgba(43, 36, 64, 0.7);
}

.hudAbilitySummary {
  margin-top: 5px;
  color: color-mix(in oklab, var(--hud-world-ink) 72%, var(--muted));
}

.hudPhoneLoadout {
  display: none;
}

.hudUtilityHint {
  margin-top: 3px;
  color: color-mix(in oklab, var(--hud-world-ink) 72%, var(--muted));
}

.hudUtilityHint.isOpen {
  color: color-mix(in oklab, var(--hud-world-accent2) 66%, var(--hud-world-ink) 34%);
  font-weight: 700;
}

.hudBuilderInv {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hudInvChip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 24%, transparent);
  background: rgba(255, 255, 255, 0.72);
  color: color-mix(in oklab, var(--hud-world-ink) 78%, var(--muted));
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
}

.hudInvChip.isActive {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hud-world-accent2) 70%, transparent);
  color: color-mix(in oklab, var(--hud-world-ink) 86%, #ffffff);
}

.hudInv-spin { border-color: color-mix(in oklab, var(--hud-world-ink) 26%, transparent); }
.hudInv-violet { border-color: #8f63df; }
.hudInv-azure { border-color: #5fb7e6; }
.hudInv-emerald { border-color: #51b982; }
.hudInv-amber { border-color: #d8a558; }
.hudInv-door_kit { border-color: #b48d66; }

.hudBuilderActions {
  margin-top: 5px;
  display: flex;
  gap: 6px;
}

.hudTinyBtn {
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 24%, transparent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: color-mix(in oklab, var(--hud-world-ink) 84%, #ffffff);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

.hudTinyBtn:hover {
  background: rgba(255, 255, 255, 0.9);
}

.hudQuestBtn {
  margin: 0 0 5px;
  width: 100%;
}

.builderHotbar {
  display: none !important;
}

.hudBuilderPanel {
  margin-top: 7px;
  padding: 6px;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 20%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, var(--hud-world-paper) 14%, rgba(255, 255, 255, 0.84));
}

.hudBuilderPanelHeader {
  font-size: 11px;
  font-weight: 800;
  color: color-mix(in oklab, var(--hud-world-ink) 78%, var(--muted));
  margin-bottom: 5px;
}

.hudBuilderPanelRow {
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hudBuilderPanelRow .builderSlotBtn {
  min-width: 52px;
  height: 48px;
  padding: 2px 4px;
  border-radius: 9px;
}

.hudBuilderPanel .builderHotbarHint {
  margin: 6px 0 0;
  padding: 0;
  border-left: 0;
  font-size: 10px;
  white-space: normal;
}

.builderPreviewBox {
  margin-top: 7px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 18%, transparent);
  background: rgba(255, 255, 255, 0.82);
}

.builderPreviewBox.isValid {
  border-color: color-mix(in oklab, var(--hud-world-accent2) 46%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hud-world-accent2) 18%, transparent);
}

.builderPreviewBox.isBlocked {
  border-color: rgba(186, 92, 116, 0.34);
  background: rgba(255, 241, 244, 0.88);
}

.builderPreviewBox.isRefund {
  border-color: rgba(202, 158, 72, 0.44);
  background: rgba(255, 249, 231, 0.9);
}

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

.builderPreviewState,
.builderPreviewCoords {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  color: color-mix(in oklab, var(--hud-world-ink) 78%, #24324A);
}

.builderPreviewTitle {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 900;
  color: color-mix(in oklab, var(--hud-world-ink) 88%, #1a2438);
}

.builderPreviewDetail {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.25;
  color: color-mix(in oklab, var(--hud-world-ink) 66%, var(--muted));
}

.builderHotbarRow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(95, 109, 142, 0.36);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(35, 41, 66, 0.2);
}

.builderSlotBtn {
  appearance: none;
  border: 2px solid rgba(88, 102, 136, 0.42);
  background: rgba(245, 247, 255, 0.92);
  color: #253252;
  border-radius: 12px;
  min-width: 72px;
  height: 58px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px 6px;
}

.builderSlotBtn:hover {
  transform: translateY(-1px);
}

.builderSlotBtn.isActive {
  border-color: color-mix(in oklab, var(--hud-world-accent2) 72%, var(--hud-world-ink) 20%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--hud-world-accent2) 44%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--hud-world-accent2) 24%, rgba(255, 255, 255, 0.98)),
    color-mix(in oklab, var(--hud-world-paper) 8%, rgba(255, 255, 255, 0.88))
  );
}

.builderSlotBtn[data-slot='violet'] { border-color: rgba(143, 99, 223, 0.62); }
.builderSlotBtn[data-slot='azure'] { border-color: rgba(95, 183, 230, 0.62); }
.builderSlotBtn[data-slot='emerald'] { border-color: rgba(81, 185, 130, 0.62); }
.builderSlotBtn[data-slot='amber'] { border-color: rgba(216, 165, 88, 0.62); }
.builderSlotBtn[data-slot='door_kit'] { border-color: rgba(180, 141, 102, 0.62); }

.builderSlotKey {
  font-size: 10px;
  font-weight: 900;
  color: rgba(62, 72, 102, 0.9);
  line-height: 1;
}

.builderSlotIcon {
  font-size: 14px;
  line-height: 1;
}

.builderSlotName {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.builderSlotCount {
  font-size: 11px;
  font-weight: 700;
  color: rgba(66, 77, 108, 0.9);
  line-height: 1;
}

.builderHotbarHint {
  margin-left: 6px;
  padding: 0 6px;
  border-left: 1px dashed rgba(92, 110, 146, 0.36);
  color: rgba(66, 77, 108, 0.88);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.hudSubline {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
}

.hudGoalCard {
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--hud-world-accent) 36%, rgba(116, 94, 54, 0.2));
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--hud-world-glow) 55%, rgba(255, 255, 255, 0.96)),
    color-mix(in oklab, var(--hud-world-paper) 72%, rgba(255, 255, 255, 0.92))
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.hudGoalCard.isExitUnlocked {
  border-color: color-mix(in oklab, var(--hud-world-accent2) 52%, rgba(64, 149, 126, 0.28));
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--hud-world-accent2) 18%, rgba(255, 255, 255, 0.97)),
    color-mix(in oklab, var(--hud-world-glow) 62%, rgba(255, 255, 255, 0.93))
  );
}

.hudGoalEyebrow {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--hud-world-ink) 62%, var(--muted));
}

.hudGoalValue {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  color: color-mix(in oklab, var(--hud-world-ink) 78%, #2e3148);
}

@keyframes scorePulse {
  from { transform: scale(1); }
  40% { transform: scale(1.08); }
  to { transform: scale(1); }
}

.toast {
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: calc(14px + var(--hud-h, 0px) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  max-width: 92%;
  z-index: 50;
}

@media (max-width: 980px) {
  .builderHotbar {
    display: none !important;
  }
}

.objectiveBanner {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: calc(10px + env(safe-area-inset-top));
  transform: translateX(-50%);
  padding: 12px 15px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--accent) 22%, rgba(144, 124, 93, 0.22));
  background: linear-gradient(180deg, rgba(255, 252, 243, 0.96), rgba(255, 246, 231, 0.93));
  box-shadow: 0 14px 28px rgba(50, 34, 11, 0.12);
  color: var(--text);
  max-width: min(760px, 92%);
  z-index: 45;
}

.objectiveBanner.isExitUnlocked {
  border-color: rgba(92, 193, 168, 0.42);
  background: linear-gradient(180deg, rgba(239, 255, 250, 0.97), rgba(233, 255, 245, 0.94));
}

.objectiveBannerLevel {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}

.objectiveBannerTitle {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 900;
  color: color-mix(in oklab, var(--text) 88%, #2b3b34);
}

.objectiveBannerDetail {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in oklab, var(--text) 72%, var(--muted));
}

.celebrationBanner {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  border-radius: 16px;
  border: 2px solid rgba(255, 209, 102, 0.95);
  background: linear-gradient(135deg, rgba(37, 27, 57, 0.93), rgba(58, 35, 92, 0.9));
  box-shadow: 0 14px 34px rgba(17, 8, 33, 0.42);
  color: #fff7d0;
  font-size: 42px;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  max-width: min(92%, 980px);
  z-index: 70;
  animation: celebrationPop 700ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes celebrationPop {
  0% { opacity: 0; transform: translate(-50%, -58%) scale(0.88); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.worldTooltip {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 12px));
  min-width: 160px;
  max-width: min(280px, 90vw);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(43, 36, 64, 0.22);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  z-index: 55;
  white-space: normal;
}

.worldTooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.worldTooltipTitle {
  font-weight: 800;
  margin-bottom: 2px;
}

.worldTooltipDetail {
  color: var(--muted);
  font-size: 11px;
}

.homePrompt {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: calc(18px + env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(420px, calc(100% - 18px));
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 14px 34px rgba(28, 24, 46, 0.28);
  padding: 12px 14px;
  z-index: 72;
}

.homePromptTitle {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 4px;
}

.homePromptBody {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.homePromptActions {
  display: flex;
  gap: 8px;
}

.homePromptBtn {
  flex: 1;
}

.homePromptBtn.isPadSelected {
  box-shadow: 0 0 0 2px rgba(100, 255, 214, 0.34) inset;
  border-color: rgba(100, 255, 214, 0.86);
}

.gamepadCursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid rgba(98, 227, 191, 0.95);
  box-shadow: 0 0 0 2px rgba(19, 30, 55, 0.7), 0 0 14px rgba(98, 227, 191, 0.38);
  background: rgba(98, 227, 191, 0.16);
  pointer-events: none;
  z-index: 95;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 120ms ease, transform 120ms ease;
}

.gamepadCursor.isVisible {
  opacity: 1;
  transform: scale(1);
}

.hidden { display: none !important; }

.editor {
  width: min(98vw, 1880px);
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  bottom: 8px;
  max-height: min(46dvh, 520px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.editor.map-focus {
  width: min(440px, calc(100% - 18px));
  left: 10px;
  transform: none;
  background: rgba(255, 255, 255, 0.8);
}
.editor.map-focus .editorGrid {
  grid-template-columns: 1fr;
}
.editor.map-focus .editorCol:last-child {
  display: none;
}
.editorTopDock {
  position: sticky;
  top: 2px;
  z-index: 30;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(43, 36, 64, 0.12);
  margin-bottom: 10px;
  flex: 0 0 auto;
}
.editorTopRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.editorBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.editorBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.editorBadgeDirty {
  color: #8a2342;
  border-color: rgba(138, 35, 66, 0.4);
  background: rgba(207, 66, 93, 0.14);
}
.editorBadgeDraft {
  color: #195b6b;
  border-color: rgba(25, 91, 107, 0.35);
  background: rgba(84, 177, 199, 0.18);
}
.editorTopButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.editorTopButtons .btn {
  padding: 8px 12px;
  min-height: 34px;
  font-size: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.editorTopButtons .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(43, 36, 64, 0.12);
}
.editorTopButtons .btn:active {
  transform: translateY(0);
}
.editorPrimaryBtn {
  border-color: rgba(77, 156, 137, 0.75) !important;
  background: linear-gradient(180deg, rgba(105, 214, 187, 0.92), rgba(86, 186, 162, 0.88)) !important;
  color: #102b25 !important;
  font-weight: 800;
}
.editorSecondaryBtn {
  border-color: rgba(103, 108, 125, 0.26) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}
.editorSecondaryBtn.isActive {
  border-color: rgba(47, 115, 201, 0.58) !important;
  background: rgba(79, 145, 226, 0.18) !important;
  color: #244f8f !important;
  box-shadow: 0 0 0 1px rgba(79, 145, 226, 0.18) inset;
}
.editorDangerGhost {
  border-color: rgba(166, 56, 85, 0.34) !important;
  color: #8e2544 !important;
  background: rgba(219, 88, 121, 0.12) !important;
}
.editorChipsRow {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.editorChip {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.84);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.editorChip:hover {
  border-color: rgba(90, 109, 146, 0.48);
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(43, 36, 64, 0.12);
}
.editorChip:active {
  transform: translateY(0);
}
.editorChip.isActive {
  border-color: rgba(100, 255, 214, 0.78);
  background: rgba(100, 255, 214, 0.2);
  box-shadow: 0 0 0 1px rgba(100, 255, 214, 0.28) inset;
}
.editorHelpPanel {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.72);
}
.editorHelpPanel summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.editorActiveStrip {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(93, 123, 166, 0.26);
  background: rgba(236, 245, 255, 0.78);
  color: #2a3d5f;
  font-size: 12px;
  font-weight: 700;
}
.editorActiveStrip.isTerrain {
  border-color: rgba(85, 131, 201, 0.34);
  background: rgba(222, 238, 255, 0.84);
}
.editorActiveStrip.isZone {
  border-color: rgba(110, 178, 162, 0.38);
  background: rgba(223, 250, 242, 0.82);
}
.editorActiveStrip.isEntity {
  border-color: rgba(209, 137, 120, 0.34);
  background: rgba(255, 234, 227, 0.84);
}
.editorActiveStrip.isSystem {
  border-color: rgba(154, 132, 188, 0.32);
  background: rgba(242, 233, 255, 0.84);
}
.editorActiveDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(42, 61, 95, 0.38);
  animation: editorActivePulse 1.8s ease-in-out infinite;
}
@keyframes editorActivePulse {
  0% { box-shadow: 0 0 0 0 rgba(42, 61, 95, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(42, 61, 95, 0.02); }
  100% { box-shadow: 0 0 0 0 rgba(42, 61, 95, 0); }
}

.editorGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 0;
  flex: 1 1 auto;
}

.editorCol { min-width: 0; }
.editorCol:first-child {
  max-height: none;
  overflow: auto;
  padding-right: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(290px, 1fr));
  gap: 8px;
  align-content: start;
}
.editorCol:first-child > .row,
.editorCol:first-child > .hint,
.editorCol:first-child > .editorSelectionInfo,
.editorCol:first-child > .editorSection,
.editorCol:first-child > .editorValidation,
.editorCol:first-child > .editorHistoryPanel {
  margin: 0;
}

.editor .row {
  flex-wrap: wrap;
  gap: 7px;
  margin: 6px 0;
}
.editor .row label {
  min-width: 66px;
  font-size: 11px;
}
.editor .row input,
.editor .row select {
  padding: 8px 9px;
  font-size: 12px;
}
.editor .row input[type="number"] {
  max-width: 98px;
}
.editorSelectionInfo {
  margin-top: 2px;
  padding: 6px 8px;
  border: 1px dashed rgba(100, 117, 156, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
}
.editorSection {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.45);
}
.editorSection summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.editorQualitySection {
  grid-column: 1 / -1;
}
.editorQualityGrid {
  display: grid;
  grid-template-columns: minmax(110px, 0.34fr) minmax(220px, 1fr);
  gap: 7px 9px;
  align-items: start;
  margin-top: 8px;
}
.editorQualityGrid label {
  padding-top: 7px;
  font-size: 11px;
  font-weight: 750;
}
.editorQualityGrid textarea,
.editorQualityGrid input {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  resize: vertical;
}
.editorQualityAnchors {
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px dashed rgba(62, 111, 205, 0.34);
  border-radius: 8px;
  background: rgba(225, 237, 255, 0.62);
  color: #294d82;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
}

#editorJson {
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.76);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  outline: none;
}

.editorValidation {
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  white-space: pre-line;
  max-height: 160px;
  overflow: auto;
}

.editorHistoryPanel {
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.62);
  white-space: pre-line;
  max-height: 140px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
}

.editorTileModal {
  position: absolute;
  z-index: 80;
  width: min(278px, 86vw);
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(43, 36, 64, 0.18);
  pointer-events: auto;
  transform-origin: top left;
  animation: editorModalIn 0.14s ease-out;
}
@keyframes editorModalIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

.editorTileModalTitle {
  font-weight: 800;
  font-size: 12px;
}

.editorTileModalClose {
  padding: 5px 8px;
  font-size: 11px;
}

.editorTileModalGrid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.editorTileModalGrid .btn {
  min-height: 30px;
  padding: 6px 7px;
  font-size: 11px;
  transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease;
}
.editorTileModalGrid .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(43, 36, 64, 0.12);
}
.editorTileAction.isOn {
  border-color: rgba(100, 255, 214, 0.78);
  background: rgba(100, 255, 214, 0.2);
}
.editor .btn:focus-visible,
.editorChip:focus-visible,
.editor .row input:focus-visible,
.editor .row select:focus-visible,
.editorQualityGrid input:focus-visible,
.editorQualityGrid textarea:focus-visible,
#editorJson:focus-visible,
.editorSection summary:focus-visible,
.editorHelpPanel summary:focus-visible {
  outline: 2px solid rgba(78, 170, 236, 0.95);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .editor {
    top: calc(var(--topbar-h, 56px) + 8px);
    bottom: auto;
    max-height: calc(100% - (var(--topbar-h, 56px) + 24px + env(safe-area-inset-bottom)));
  }
  .editorGrid {
    grid-template-columns: 360px 1fr;
  }
  .editorCol:first-child {
    display: block;
  }
  .editorCol:first-child > .row,
  .editorCol:first-child > .hint,
  .editorCol:first-child > .editorSelectionInfo,
  .editorCol:first-child > .editorSection,
  .editorCol:first-child > .editorValidation,
  .editorCol:first-child > .editorHistoryPanel {
    margin-top: 7px;
  }
}

@media (max-width: 980px) {
  .editor {
    width: min(98vw, 980px);
  }
  .editorGrid {
    grid-template-columns: 1fr;
  }
  .editorCol:first-child {
    max-height: 48vh;
    padding-right: 0;
  }
  #editorJson {
    min-height: 38vh;
    height: 38vh;
  }
  .editorQualityGrid {
    grid-template-columns: 1fr;
  }
  .editorQualityGrid label {
    padding-top: 2px;
  }
}

.touchControls {
  position: absolute;
  inset: 0;
  z-index: 22;
  pointer-events: none;
}

.touchLeft {
  pointer-events: none;
  position: absolute;
  left: max(14px, calc(env(safe-area-inset-left) + 10px));
  bottom: calc(16px + env(safe-area-inset-bottom));
}

.joyBase {
  position: relative;
  width: 172px;
  height: 172px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 10px 24px rgba(43, 36, 64, 0.2);
  touch-action: none;
  pointer-events: auto;
  user-select: none;
}

.joyBase.isSneakZone {
  border-color: rgba(106, 199, 168, 0.85);
  box-shadow: 0 10px 24px rgba(43, 36, 64, 0.2), 0 0 0 2px rgba(106, 199, 168, 0.32) inset;
}

.joyKnob {
  --wohoo-joy-x: 0px;
  --wohoo-joy-y: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  margin-left: -37px;
  margin-top: -37px;
  border-radius: 999px;
  border: 1px solid rgba(43, 36, 64, 0.2);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(220,235,255,0.9));
  box-shadow: 0 6px 14px rgba(43, 36, 64, 0.18);
  transform: translate(var(--wohoo-joy-x), var(--wohoo-joy-y));
  transition: transform 0.03s linear;
  will-change: transform;
}

.joyArrow {
  position: absolute;
  color: rgba(43, 36, 64, 0.55);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.joyArrowUp {
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
}

.joyArrowDown {
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
}

.joyArrowLeft {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.joyArrowRight {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.touchRight {
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  position: absolute;
  right: max(14px, calc(env(safe-area-inset-right) + 10px));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  grid-template-areas:
    "spin wall"
    "action special"
    "sneak utility";
  justify-items: end;
  align-items: center;
  gap: 10px;
}

.touchBtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border-radius: 24px;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 10px 24px rgba(43, 36, 64, 0.2);
  cursor: pointer;
  transition:
    transform 0.08s ease,
    filter 0.12s ease,
    box-shadow 0.12s ease,
    opacity 0.12s ease;
}

.touchBtnGlyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(43, 36, 64, 0.12);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.touchBtnLabel {
  font-size: 11px;
  line-height: 1;
}

.touchBtnSpin {
  grid-area: spin;
  width: 92px;
  height: 92px;
  background: linear-gradient(180deg, rgba(174, 239, 223, 0.86), rgba(122, 220, 192, 0.48));
}

.touchBtnMode {
  grid-area: wall;
  width: 84px;
  height: 84px;
  background: linear-gradient(180deg, rgba(205, 185, 255, 0.82), rgba(205, 185, 255, 0.5));
}

.touchBtnSneak {
  grid-area: sneak;
  justify-self: end;
  width: 84px;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(176, 228, 205, 0.84), rgba(176, 228, 205, 0.52));
}

.touchBtnTurbo {
  position: absolute;
  left: 118px;
  bottom: 4px;
  width: 84px;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 238, 156, 0.88), rgba(117, 221, 178, 0.56));
}

.touchBtnAction {
  grid-area: action;
  width: 120px;
  height: 120px;
  background: linear-gradient(180deg, rgba(122,220,192,0.8), rgba(122,220,192,0.48));
}

.touchBtnSpecial {
  grid-area: special;
  width: 104px;
  height: 104px;
  background: linear-gradient(180deg, rgba(255, 213, 150, 0.86), rgba(244, 170, 91, 0.5));
}

.touchBtnUtility {
  grid-area: utility;
  width: 84px;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(210, 228, 255, 0.86), rgba(139, 184, 241, 0.5));
}

.touchBtn.isDisabled {
  opacity: 0.46;
  filter: saturate(0.48) grayscale(0.1);
  box-shadow: 0 6px 14px rgba(43, 36, 64, 0.12);
}

.touchBtn.isReady:not(.isDisabled) {
  box-shadow:
    0 12px 26px rgba(43, 36, 64, 0.22),
    0 0 0 2px rgba(255, 255, 255, 0.3) inset;
}

.touchBtn.isReady:not(.isDisabled) .touchBtnGlyph {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.touchBtn.isPressed {
  transform: scale(0.96);
  filter: brightness(0.95);
}

body.layout-phone .touchLeft {
  left: max(10px, calc(env(safe-area-inset-left) + 8px));
  bottom: calc(12px + env(safe-area-inset-bottom));
}

body.layout-phone .touchRight {
  right: max(10px, calc(env(safe-area-inset-right) + 8px));
  bottom: calc(12px + env(safe-area-inset-bottom));
  gap: 8px;
}

body.layout-phone .joyBase {
  width: clamp(132px, 39vw, 156px);
  height: clamp(132px, 39vw, 156px);
}

body.layout-phone .joyKnob {
  --phone-joy-knob: clamp(56px, 16vw, 68px);
  width: var(--phone-joy-knob);
  height: var(--phone-joy-knob);
  margin-left: calc(var(--phone-joy-knob) * -0.5);
  margin-top: calc(var(--phone-joy-knob) * -0.5);
}

body.layout-phone .touchBtnSpin {
  width: clamp(68px, 21vw, 86px);
  height: clamp(68px, 21vw, 86px);
}

body.layout-phone .touchBtnMode {
  width: clamp(58px, 18vw, 72px);
  height: clamp(58px, 18vw, 72px);
}

body.layout-phone .touchBtnSneak {
  width: clamp(58px, 18vw, 72px);
  height: clamp(38px, 12vw, 48px);
}

body.layout-phone .touchBtnTurbo {
  left: 118px;
  bottom: 0;
  width: clamp(58px, 18vw, 72px);
  height: clamp(38px, 12vw, 48px);
}

body.layout-phone .touchBtnAction {
  width: clamp(88px, 28vw, 112px);
  height: clamp(88px, 28vw, 112px);
}

body.layout-phone .touchBtnSpecial {
  width: clamp(74px, 24vw, 94px);
  height: clamp(74px, 24vw, 94px);
}

body.layout-phone .touchBtnUtility {
  width: clamp(58px, 18vw, 72px);
  height: clamp(38px, 12vw, 48px);
}

body.layout-phone.layout-landscape .touchControls {
  position: fixed;
  inset: 0;
  z-index: 42;
}

body.layout-phone.layout-landscape .touchLeft {
  position: fixed;
  left: max(8px, calc(env(safe-area-inset-left) + 6px));
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

body.layout-phone.layout-landscape .touchRight {
  position: fixed;
  right: max(8px, calc(env(safe-area-inset-right) + 6px));
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  gap: 6px;
}

body.layout-phone.layout-landscape .touchBtnLabel {
  display: none;
}

body.layout-phone.layout-landscape .touchBtnGlyph {
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  font-size: 8px;
}

@media (pointer: coarse) {
  /* Prevent iOS Safari focus-zoom on form fields. */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Prevent accidental text selection on touch UI surfaces. */
  body,
  #root,
  #overlay,
  #topbar,
  .panel,
  .btn,
  .hint,
  .status,
  .brand,
  .hud,
  .touchControls {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Keep selection and caret behavior in editable controls. */
  input,
  select,
  textarea,
  #editorJson {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  .hud {
    min-height: 188px;
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
    align-items: flex-start;
  }
}

body.touch-enabled .hud {
  min-height: 188px;
  padding-bottom: calc(130px + env(safe-area-inset-bottom));
  align-items: flex-start;
}

@media (max-width: 680px) {
  .joyBase {
    width: 160px;
    height: 160px;
  }

  .joyKnob {
    width: 70px;
    height: 70px;
    margin-left: -35px;
    margin-top: -35px;
  }

  .touchBtnSpin {
    width: 88px;
    height: 88px;
  }

  .touchBtnMode {
    width: 70px;
    height: 70px;
  }

  .touchBtnSneak {
    width: 72px;
    height: 48px;
  }

  .touchBtnAction {
    width: 116px;
    height: 116px;
  }

  .touchBtnSpecial {
    width: 96px;
    height: 96px;
  }

  .touchBtnUtility {
    width: 72px;
    height: 48px;
  }
}

@media (max-width: 760px) {
  #root {
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    min-height: 100dvh;
  }

  #topbar {
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
    gap: 8px;
  }

  .zoomControls {
    top: calc(8px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    gap: 7px;
  }

  .playControls {
    top: calc(56px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    gap: 6px;
  }

  .remoteControls {
    top: calc(56px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    gap: 6px;
  }

  .homePrompt {
    top: calc(8px + env(safe-area-inset-top));
    width: calc(100% - 12px);
    padding: 10px 11px;
  }

  .playToolBtn {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 10px;
  }

  .remoteHostPanel {
    right: calc(8px + env(safe-area-inset-right));
    top: calc(96px + env(safe-area-inset-top));
    width: min(300px, calc(100% - 16px));
    padding: 9px 10px;
  }

  .zoomBtn {
    min-width: 50px;
    min-height: 42px;
    font-size: 16px;
  }

  .zoomBtnValue {
    min-width: 80px;
    font-size: 12px;
  }

  .brand {
    letter-spacing: 0;
    font-size: 12px;
  }

  .status {
    font-size: 11px;
  }

  .panel {
    top: calc(var(--topbar-h, 56px) + 8px);
    width: calc(100% - 12px);
    padding: 12px;
    border-radius: 12px;
    max-height: calc(100dvh - (var(--topbar-h, 56px) + 12px + env(safe-area-inset-bottom)));
    overflow: auto;
  }

  .row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .row label {
    min-width: 52px;
    font-size: 11px;
  }

  .row input,
  .row select,
  .btn {
    font-size: 14px;
  }

  .row input[type="number"] {
    max-width: none;
  }

  .badgeDrawer {
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .badgeDrawerCard {
    width: 100%;
    max-height: min(76dvh, 680px);
    border-radius: 18px 18px 14px 14px;
  }

  .badgeShelfHero {
    align-items: stretch;
    flex-direction: column;
  }

  .badgeShelfXp,
  .badgeShelfXp .campaignXpMeter {
    width: 100%;
    justify-items: stretch;
  }

  .levelItem {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
  }

  .levelItem .btn {
    width: 100%;
    min-height: 40px;
  }

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

  .atlasHero {
    min-height: 160px;
  }

  .atlasHeroContent {
    width: min(320px, 94%);
    margin: 10px;
  }

  .worldMap {
    min-height: 430px;
  }

  .worldNode {
    width: clamp(38px, 11vw, 46px);
    height: clamp(38px, 11vw, 46px);
    min-height: 0;
  }

  .worldNodeMedal {
    width: 15px;
    height: 15px;
    left: -1px;
    top: -3px;
  }

  .worldNodeGlyph {
    width: 18px;
    height: 18px;
  }

  .campaignChips,
  .worldScoreboard,
  .atlasRunSummary,
  .postLevelActions,
  .worldCursorControls {
    gap: 6px;
  }

  .campaignChip,
  .worldScoreChip,
  .atlasRunChip {
    font-size: 10px;
    padding: 5px 8px;
  }

  .campaignChipLevel {
    width: 100%;
    justify-content: space-between;
  }

  .campaignXpMeter {
    flex: 1;
    min-width: 68px;
  }

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

  .postLevelActions .btn,
  .worldCursorControls .btn {
    flex: 1 1 120px;
    min-height: 42px;
  }

  .worldCursorHint {
    width: 100%;
  }

  .worldLegendGrid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .hud {
    padding: 8px 10px;
  }

  .hudInner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hudCard {
    padding: 7px 9px;
  }

  .hudScoreValue {
    font-size: 20px;
  }

  .hudAbilityDock {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .hudAbilitySlot {
    min-height: 34px;
    padding: 4px 6px;
  }

  .hudAbilityName {
    font-size: 10px;
  }

  .hudAbilityHint {
    font-size: 9px;
  }

  .hudSubline {
    font-size: 10px;
  }

  .toast {
    bottom: calc(6px + var(--hud-h, 0px) + env(safe-area-inset-bottom));
    font-size: 12px;
    padding: 8px 10px;
  }

  .onboardingCard {
    padding: 10px;
  }

  .onboardingTitle {
    font-size: 12px;
  }

  .onboardingText {
    font-size: 11px;
  }

  .objectiveBanner {
    top: calc(6px + env(safe-area-inset-top));
    font-size: 11px;
    padding: 8px 10px;
    max-width: 96%;
  }

  .celebrationBanner {
    top: calc(26% + env(safe-area-inset-top));
    font-size: 30px;
    padding: 10px 16px;
    max-width: 95%;
  }

  .worldTooltip {
    font-size: 11px;
    min-width: 140px;
    max-width: min(240px, 86vw);
    padding: 7px 8px;
  }
}

@media (pointer: coarse) {
  body.ui-playing .zoomControls,
  body.ui-playing .playControls,
  body.ui-playing .remoteControls,
  body.ui-playing .pauseBtn,
  body.ui-playing .gameSettingsBtn,
  body.ui-playing .homeBtn {
    position: fixed;
    z-index: 68;
  }

  body.ui-playing .zoomControls {
    top: calc(18px + env(safe-area-inset-top));
    left: calc(18px + env(safe-area-inset-left));
    right: auto;
  }

  body.ui-playing .playControls {
    top: calc(72px + env(safe-area-inset-top));
    left: calc(18px + env(safe-area-inset-left));
    right: auto;
    flex-direction: column;
  }

  body.ui-playing .pauseBtn {
    top: calc(18px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
    left: auto;
  }

  body.ui-playing .gameSettingsBtn {
    top: calc(18px + env(safe-area-inset-top));
    right: calc(118px + env(safe-area-inset-right));
    left: auto;
  }

  body.ui-playing .homeBtn {
    top: calc(18px + env(safe-area-inset-top));
    right: calc(170px + env(safe-area-inset-right));
    left: auto;
  }

  body.ui-playing .remoteControls {
    top: calc(72px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
    left: auto;
    flex-direction: column;
  }

  body.ui-playing .remoteHostPanel {
    position: fixed;
    top: calc(122px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
    left: auto;
    width: min(320px, calc(100% - 20px));
    z-index: 70;
  }

  body.ui-playing .zoomControls:not(.hidden),
  body.ui-playing .playControls:not(.hidden),
  body.ui-playing .remoteControls:not(.hidden),
  body.ui-playing .pauseBtn:not(.hidden),
  body.ui-playing .gameSettingsBtn:not(.hidden),
  body.ui-playing .homeBtn:not(.hidden) {
    visibility: visible;
    opacity: 1;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #root {
    width: clamp(300px, calc(100vw - ((var(--touch-rail-width) * 2) + 28px)), 980px);
    margin: 0 auto;
  }

  body.ui-playing .zoomControls {
    top: calc(18px + env(safe-area-inset-top));
    left: calc(18px + env(safe-area-inset-left));
    right: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.ui-playing .playControls {
    top: calc(126px + env(safe-area-inset-top));
    left: calc(18px + env(safe-area-inset-left));
    right: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.ui-playing .pauseBtn {
    top: calc(18px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
    left: auto;
  }

  body.ui-playing .gameSettingsBtn {
    top: calc(18px + env(safe-area-inset-top));
    right: calc(118px + env(safe-area-inset-right));
    left: auto;
  }

  body.ui-playing .homeBtn {
    top: calc(18px + env(safe-area-inset-top));
    right: calc(170px + env(safe-area-inset-right));
    left: auto;
  }

  body.ui-playing .remoteControls {
    top: calc(72px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
    left: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.ui-playing .remoteHostPanel {
    top: calc(122px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
    left: auto;
    width: min(260px, calc(100vw - 16px));
  }

  body.touch-overlap-fix #root {
    width: 100%;
    max-width: 100%;
  }

  .touchControls {
    position: fixed;
    inset: 0;
    z-index: 40;
  }

  .touchLeft {
    position: fixed;
    left: max(18px, calc(env(safe-area-inset-left) + 12px));
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }

  .touchRight {
    position: fixed;
    right: max(18px, calc(env(safe-area-inset-right) + 12px));
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    grid-template-columns: repeat(2, minmax(0, auto));
    grid-template-areas:
      "spin wall"
      "action special"
      "sneak utility";
    justify-items: end;
    align-items: center;
    gap: 8px;
  }

  .joyBase {
    width: 132px;
    height: 132px;
  }

  body.touch-overlap-fix .joyBase {
    width: 118px;
    height: 118px;
  }

  .joyKnob {
    width: 56px;
    height: 56px;
    margin-left: -28px;
    margin-top: -28px;
  }

  body.touch-overlap-fix .joyKnob {
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
  }

  .touchBtnSpin {
    width: 74px;
    height: 74px;
  }

  .touchBtnMode {
    width: 58px;
    height: 58px;
  }

  .touchBtnSneak,
  .touchBtnTurbo {
    width: 58px;
    height: 42px;
  }

  body.touch-overlap-fix .touchBtnSpin {
    width: 68px;
    height: 68px;
  }

  body.touch-overlap-fix .touchBtnMode {
    width: 52px;
    height: 52px;
  }

  body.touch-overlap-fix .touchBtnSneak,
  body.touch-overlap-fix .touchBtnTurbo {
    width: 52px;
    height: 38px;
  }

  .touchBtnAction {
    width: 92px;
    height: 92px;
  }

  body.touch-overlap-fix .touchBtnAction {
    width: 84px;
    height: 84px;
  }

  .touchBtnSpecial {
    width: 78px;
    height: 78px;
  }

  body.touch-overlap-fix .touchBtnSpecial {
    width: 72px;
    height: 72px;
  }

  .touchBtnUtility {
    width: 58px;
    height: 42px;
  }

  body.touch-overlap-fix .touchBtnUtility {
    width: 52px;
    height: 38px;
  }

  .touchBtnGlyph {
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    font-size: 9px;
  }

  .touchBtnLabel {
    font-size: 10px;
  }

  .hud {
    min-height: 96px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

@media (orientation: landscape) {
  body.touch-enabled .hud {
    min-height: 96px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

body.touch-large-device.ui-playing #root {
  width: clamp(300px, calc(100vw - ((var(--touch-rail-width) * 2) + 44px)), 960px);
  margin: 6px auto calc(6px + env(safe-area-inset-bottom));
}

body.touch-large-device.ui-playing .gameplayChromeRail {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  bottom: calc(8px + env(safe-area-inset-bottom));
  width: var(--touch-rail-width);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 72;
  pointer-events: none;
}

body.touch-large-device.ui-playing .gameplayChromeRailLeft {
  left: calc(18px + env(safe-area-inset-left));
  align-items: stretch;
}

body.touch-large-device.ui-playing .gameplayChromeRailRight {
  right: calc(18px + env(safe-area-inset-right));
  align-items: stretch;
}

body.touch-large-device.ui-playing .gameplayChromeRail > .zoomControls,
body.touch-large-device.ui-playing .gameplayChromeRail > .playControls,
body.touch-large-device.ui-playing .gameplayChromeRail > .remoteControls,
body.touch-large-device.ui-playing .gameplayChromeRail > .pauseBtn,
body.touch-large-device.ui-playing .gameplayChromeRail > .gameSettingsBtn,
body.touch-large-device.ui-playing .gameplayChromeRail > .homeBtn,
body.touch-large-device.ui-playing .gameplayChromeRail > .remoteHostPanel {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: 0;
  pointer-events: auto;
}

body.touch-large-device.ui-playing .zoomControls,
body.touch-large-device.ui-playing .playControls,
body.touch-large-device.ui-playing .remoteControls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

body.touch-large-device.ui-playing .zoomBtn,
body.touch-large-device.ui-playing .playToolBtn,
body.touch-large-device.ui-playing .pauseBtn,
body.touch-large-device.ui-playing .gameSettingsBtn,
body.touch-large-device.ui-playing .homeBtn {
  width: 100%;
  min-width: 0;
}

body.touch-large-device.ui-playing .zoomControls {
  order: 1;
}

body.touch-large-device.ui-playing .playControls {
  order: 2;
}

body.touch-large-device.ui-playing .homeBtn {
  order: 1;
}

body.touch-large-device.ui-playing .pauseBtn {
  order: 2;
}

body.touch-large-device.ui-playing .gameSettingsBtn {
  order: 3;
}

body.touch-large-device.ui-playing .remoteControls {
  order: 4;
}

body.touch-large-device.ui-playing .remoteHostPanel {
  order: 5;
  width: min(280px, calc(100vw - var(--touch-rail-width) - 24px));
  max-width: calc(100vw - 24px);
}

/* Isolated iPhone gameplay pass: keep the game full-screen and reduce chrome to essentials. */
body.layout-phone.ui-playing {
  overflow: hidden;
}

body.layout-phone.ui-playing #root {
  height: var(--layout-vh, 100dvh);
  min-height: var(--layout-vh, 100dvh);
  overflow: hidden;
}

body.layout-phone.ui-playing #gameCanvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #141826;
}

body.layout-phone.ui-playing .zoomControls,
body.layout-phone.ui-playing .playControls,
body.layout-phone.ui-playing .remoteControls,
body.layout-phone.ui-playing .remoteHostPanel {
  display: none !important;
}

body.layout-phone.ui-playing .pauseBtn {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: 92;
  min-width: 64px;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
}

body.layout-phone.ui-playing .gameSettingsBtn {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(78px + env(safe-area-inset-right));
  z-index: 92;
  min-width: 38px;
  width: 38px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
}

body.layout-phone.ui-playing .homeBtn {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(124px + env(safe-area-inset-right));
  z-index: 92;
  min-width: 38px;
  width: 38px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
}

body.layout-phone.ui-playing .hud {
  position: absolute;
  inset: 0;
  z-index: 58;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

body.layout-phone.ui-playing .hudInner {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  right: calc(128px + env(safe-area-inset-right));
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  pointer-events: none;
}

body.layout-phone.ui-playing .hudCard {
  display: none;
  pointer-events: auto;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(43, 36, 64, 0.14);
}

body.layout-phone.ui-playing .hudCardHealth,
body.layout-phone.ui-playing .hudCardAmmo {
  display: block;
}

body.layout-phone.ui-playing .hudCardHealth {
  min-width: 88px;
}

body.layout-phone.ui-playing .hudCardHealth .hudCardTop {
  margin: 0 0 3px;
}

body.layout-phone.ui-playing .hudCardHealth .hudMeta,
body.layout-phone.ui-playing .hudCardHealth .hudMeter,
body.layout-phone.ui-playing .hudCardHealth .hudHealthSplit {
  display: none;
}

body.layout-phone.ui-playing .hudCardHealth .hudBadge {
  min-width: 28px;
  height: 18px;
  font-size: 10px;
}

body.layout-phone.ui-playing .hudCardHealth .hudHearts {
  min-height: 12px;
  gap: 2px;
}

body.layout-phone.ui-playing .hudCardHealth .hudHeart {
  width: 12px;
  height: 12px;
}

body.layout-phone.ui-playing .hudCardAmmo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  width: min(250px, calc(100vw - 146px));
  max-width: min(250px, calc(100vw - 146px));
  padding: 5px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(43, 36, 64, 0.14);
}

body.layout-phone.ui-playing .hudCardAmmo > :not(.hudCardTop):not(.hudQuestBtn):not(.hudPhoneLoadout) {
  display: none !important;
}

body.layout-phone.ui-playing .hudCardAmmo .hudCardTop {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  margin: 0;
  min-height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 244, 226, 0.74);
}

body.layout-phone.ui-playing .hudCardAmmo .hudBadge {
  min-width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
}

body.layout-phone.ui-playing .hudCardAmmo .hudMeta {
  display: inline-block;
  min-width: 12px;
  font-size: 13px;
  font-weight: 950;
  color: rgba(43, 36, 64, 0.92);
}

body.layout-phone.ui-playing .hudQuestBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 30px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
}

body.layout-phone.ui-playing .hudPhoneLoadout {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.layout-phone.ui-playing .hudPhoneLoadout::-webkit-scrollbar {
  display: none;
}

body.layout-phone.ui-playing .hudPhoneChip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  max-width: 74px;
  min-height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  background: rgba(255, 255, 255, 0.64);
  color: rgba(43, 36, 64, 0.92);
}

body.layout-phone.ui-playing .hudPhoneChip.isDisabled {
  opacity: 0.58;
}

body.layout-phone.ui-playing .hudPhoneChip.isTurboReady {
  border-color: rgba(80, 169, 116, 0.28);
  background: rgba(227, 255, 220, 0.76);
}

body.layout-phone.ui-playing .hudPhoneAmmoChip {
  display: none;
}

body.layout-phone.ui-playing .hudPhoneChipKey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background: rgba(122, 220, 192, 0.28);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

body.layout-phone.ui-playing .hudPhoneChip strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
}

body.layout-phone.ui-playing .objectiveBanner {
  top: calc(8px + env(safe-area-inset-top));
  max-width: min(210px, calc(100vw - 176px));
  padding: 6px 9px;
  border-radius: 16px;
  font-size: 10px;
  line-height: 1.2;
  background: rgba(255, 253, 246, 0.8);
  backdrop-filter: blur(10px);
}

body.layout-phone .touchControls {
  position: fixed;
  inset: 0;
  z-index: 82;
}

body.layout-phone.layout-portrait .touchLeft {
  left: max(10px, calc(env(safe-area-inset-left) + 8px));
  bottom: calc(14px + env(safe-area-inset-bottom));
}

body.layout-phone.layout-portrait .touchRight {
  right: max(10px, calc(env(safe-area-inset-right) + 8px));
  bottom: calc(14px + env(safe-area-inset-bottom));
  gap: 6px;
}

body.layout-phone.layout-portrait .joyBase {
  width: 112px;
  height: 112px;
}

body.layout-phone.layout-portrait .joyKnob {
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
}

body.layout-phone.layout-portrait .touchBtnSpin {
  width: 60px;
  height: 60px;
}

body.layout-phone.layout-portrait .touchBtnMode {
  width: 52px;
  height: 52px;
}

body.layout-phone.layout-portrait .touchBtnSneak {
  width: 52px;
  height: 36px;
  border-radius: 15px;
}

body.layout-phone.layout-portrait .touchBtnTurbo {
  width: 52px;
  height: 36px;
  border-radius: 15px;
}

body.layout-phone.layout-portrait .touchBtnAction {
  width: 78px;
  height: 78px;
}

body.layout-phone.layout-portrait .touchBtnSpecial {
  width: 66px;
  height: 66px;
}

body.layout-phone.layout-portrait .touchBtnUtility {
  width: 52px;
  height: 36px;
  border-radius: 15px;
}

body.layout-phone.layout-portrait .touchBtnGlyph {
  min-width: 21px;
  height: 18px;
  padding: 0 5px;
  font-size: 8px;
}

body.layout-phone.layout-portrait .touchBtnLabel {
  font-size: 8px;
}

body.layout-phone.layout-landscape .touchLeft {
  left: max(8px, calc(env(safe-area-inset-left) + 6px));
}

body.layout-phone.layout-landscape .touchRight {
  right: max(8px, calc(env(safe-area-inset-right) + 6px));
}

body.layout-phone.layout-landscape .joyBase {
  width: 132px;
  height: 132px;
}

body.layout-phone.layout-landscape .joyKnob {
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
}

body.layout-phone.layout-landscape .touchBtnSpin {
  width: 68px;
  height: 68px;
}

body.layout-phone.layout-landscape .touchBtnMode {
  width: 54px;
  height: 54px;
}

body.layout-phone.layout-landscape .touchBtnSneak {
  width: 54px;
  height: 38px;
}

body.layout-phone.layout-landscape .touchBtnAction {
  width: 84px;
  height: 84px;
}

body.layout-phone.layout-landscape .touchBtnSpecial {
  width: 70px;
  height: 70px;
}

body.layout-phone.layout-landscape .touchBtnUtility {
  width: 54px;
  height: 38px;
}

body.layout-phone .touchBtn {
  border-radius: 18px;
  letter-spacing: 0;
  text-transform: none;
  background-color: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(10px);
}

body.layout-phone .touchBtnGlyph {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 23px;
  line-height: 1;
}

body.layout-phone .touchBtnLabel {
  max-width: 100%;
  padding: 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 900;
  text-transform: none;
}

body.layout-tablet.ui-playing #root {
  height: var(--layout-vh, 100dvh);
  min-height: var(--layout-vh, 100dvh);
}

body.layout-tablet.ui-playing #gameCanvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.layout-tablet .touchControls {
  position: fixed;
  inset: 0;
  z-index: 82;
}

body.layout-tablet .touchLeft {
  left: max(24px, calc(env(safe-area-inset-left) + 18px));
  bottom: calc(28px + env(safe-area-inset-bottom));
}

body.layout-tablet .touchRight {
  right: max(24px, calc(env(safe-area-inset-right) + 18px));
  bottom: calc(28px + env(safe-area-inset-bottom));
  gap: 12px;
}

body.layout-tablet .joyBase {
  width: 190px;
  height: 190px;
}

body.layout-tablet .joyKnob {
  width: 82px;
  height: 82px;
  margin-left: -41px;
  margin-top: -41px;
}

body.layout-tablet .touchBtn {
  border-radius: 22px;
  letter-spacing: 0;
  text-transform: none;
}

body.layout-tablet .touchBtnGlyph {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 28px;
}

body.layout-tablet .touchBtnLabel {
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

body.layout-tablet .touchBtnAction {
  width: 132px;
  height: 132px;
}

body.layout-tablet .touchBtnSpecial {
  width: 112px;
  height: 112px;
}

body.layout-tablet .touchBtnSpin {
  width: 104px;
  height: 104px;
}

body.layout-tablet .touchBtnMode {
  width: 96px;
  height: 96px;
}

body.layout-tablet .touchBtnSneak {
  width: 96px;
  height: 58px;
}

body.layout-tablet .touchBtnUtility {
  width: 96px;
  height: 58px;
}

body.layout-phone .questModal {
  align-items: center;
  background: rgba(24, 20, 40, 0.32);
}

body.layout-phone .questModalCard {
  height: calc(var(--layout-vh, 100dvh) - 16px - env(safe-area-inset-bottom));
}

body.layout-phone .questBriefText {
  font-size: 15px;
  line-height: 1.36;
}

body.layout-phone .questModalTitle {
  font-size: 14px;
}

body.layout-phone .questModalSubtitle {
  font-size: 11px;
  line-height: 1.25;
}

body.layout-phone.ui-playing #root {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.layout-phone.layout-landscape.ui-playing.touch-overlap-fix #root {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
}

body.layout-phone.layout-portrait.ui-playing .objectiveBanner {
  top: calc(48px + env(safe-area-inset-top));
  max-width: min(270px, calc(100vw - 24px));
}

body.layout-phone.layout-landscape.ui-playing .objectiveBanner {
  top: calc(42px + env(safe-area-inset-top));
  max-width: min(250px, calc(100vw - 320px));
}

/* Kid-first player UI pass: keep accessible labels, show happy symbols first. */
.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.topIconBtn,
.kidIconBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
}

.kidPrimaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 50px;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(56, 154, 128, 0.22);
}

.kidBtnCount {
  margin-left: 7px;
  font-size: 15px;
  font-weight: 950;
}

.verificationModalCloseBtn.kidIconBtn {
  min-width: 48px;
  width: 48px;
  min-height: 48px;
  padding: 0;
}

.kidGlyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  font-size: 17px;
  line-height: 1;
}

body.ui-menu #levelPanel > h2,
.campaignPresetBar,
.diagnosticsPanel,
#levelPanel > .hint {
  display: none !important;
}

body.show-diagnostics .diagnosticsPanel {
  display: block !important;
}

#levelPanel.isWorldView #campaignHud,
#levelPanel.isWorldView #atlasRunSummary,
#levelPanel.isWorldView #onboardingCard {
  display: none !important;
}

body.ui-menu #topbar {
  min-height: var(--topbar-h);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(12px);
}

.campaignHud {
  padding: 14px;
  border-radius: 22px;
}

.campaignTitle {
  font-size: 24px;
}

.campaignSubTitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  font-size: 13px;
  font-weight: 850;
}

.campaignActions .campaignActionBtn {
  min-width: 56px;
  min-height: 48px;
  border-radius: 999px;
  font-size: 22px;
}

.campaignStartBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 50px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 950;
  gap: 8px;
  box-shadow: 0 14px 26px rgba(56, 154, 128, 0.22);
}

.campaignStartLabel {
  font-size: 13px;
  line-height: 1;
}

.campaignChips {
  gap: 10px;
}

.campaignChip {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 850;
}

.campaignChipLevel {
  min-width: min(100%, 260px);
}

.campaignChipLevel b {
  font-size: 15px;
}

.onboardingCard {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 22px;
}

.onboardingTitle {
  display: none;
}

.onboardingGlyphGuide {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 32px;
  line-height: 1;
}

.onboardingCard .row {
  margin: 0;
}

.atlasHeroContent {
  width: min(320px, 86%);
}

.atlasHeroStartBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 9px;
  border-radius: 999px;
  font-weight: 950;
  gap: 8px;
}

.atlasHeroStartBtn span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlasHeroMeta {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 850;
}

.atlasHeroMeta strong,
.atlasHeroMeta b {
  font-size: 14px;
}

.atlasHeader {
  padding: 8px 12px;
}

.atlasSubTitle {
  display: none;
}

.worldCard {
  min-height: 220px;
  padding: 14px;
}

.worldCardTop {
  justify-content: flex-start;
}

.worldCardTitle {
  width: max-content;
  max-width: calc(100% - 76px);
  margin-top: 68px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  font-size: 17px;
  backdrop-filter: blur(10px);
}

.worldCardIconStats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
}

.worldCardIconStats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.74);
  font-size: 13px;
  font-weight: 900;
}

.worldCardMastery {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: calc(100% - 78px);
  margin-top: 7px;
}

.worldCardMastery span {
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid color-mix(in oklab, var(--wc-ink) 15%, transparent);
  border-radius: 8px;
  background: color-mix(in oklab, var(--wc-paper) 70%, rgba(255, 255, 255, 0.76));
  color: color-mix(in oklab, var(--wc-ink) 80%, transparent);
  font-size: 8px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.worldCardLockReason {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 78px);
  margin-top: 7px;
  padding: 6px 7px;
  border-left: 3px solid color-mix(in oklab, var(--wc-accent2) 62%, var(--wc-ink));
  background: color-mix(in oklab, var(--wc-paper) 76%, rgba(255, 255, 255, 0.78));
  color: color-mix(in oklab, var(--wc-ink) 88%, transparent);
  font-size: 9px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.worldCardLockReason .wohooIcon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.worldCardLock {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  font-size: 26px;
}

.worldCardRoute,
.worldCardProgress {
  display: none;
}

.worldTitle {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin: 0 0 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  font-size: 24px;
  backdrop-filter: blur(10px);
}

#worldDesc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  font-size: 12px;
  font-weight: 850;
}

.worldScoreboard {
  display: block;
  margin: 0 0 10px;
}

.worldCursorControls {
  border-radius: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.76);
}

.worldCursorControls .btn {
  flex: 0 0 auto;
}

.worldCursorBtn {
  width: 56px;
}

.worldLegend {
  display: inline-flex;
  width: auto;
  padding: 0;
  border-radius: 999px;
  background: transparent;
}

.worldLegendDetails {
  display: inline-grid;
  gap: 8px;
}

.worldLegendDetails summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  cursor: pointer;
  font-size: 24px;
  font-weight: 950;
  list-style: none;
}

.worldLegendDetails summary::-webkit-details-marker {
  display: none;
}

.worldLegendDetails[open] {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
}

.worldLegendDetails[open] summary {
  width: 36px;
  height: 36px;
  font-size: 20px;
}

.worldLegendGrid {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.shopWalletGlyph {
  font-size: 18px;
}

.shopPresetSection {
  border-radius: 18px;
}

.shopPresetSection > summary {
  cursor: pointer;
  list-style: none;
}

.shopPresetSection > summary::-webkit-details-marker {
  display: none;
}

.shopPresetGlyphLine {
  display: inline-flex;
  gap: 8px;
  margin: 8px 0;
  font-size: 22px;
}

.shopGrid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.shopCard {
  position: relative;
  justify-items: center;
  text-align: center;
  gap: 7px;
  min-height: 286px;
  padding: 14px 12px;
  border-radius: 22px;
}

.shopItemPreview {
  width: 100%;
}

.shopPreviewStage {
  position: relative;
  width: 100%;
  height: 82px;
  overflow: hidden;
  border: 1px solid rgba(43, 36, 64, 0.1);
  border-radius: 10px;
  background:
    linear-gradient(rgba(83, 178, 151, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 178, 151, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(247, 253, 251, 0.96), rgba(234, 244, 242, 0.86));
  background-size: 16px 16px;
}

.shopPreviewStage::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 12px;
  height: 2px;
  border-radius: 2px;
  background: rgba(43, 36, 64, 0.12);
}

.shopPreviewWohoo {
  position: absolute;
  left: 18%;
  bottom: 13px;
  z-index: 3;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 5px 5px rgba(43, 36, 64, 0.2));
}

.shopPreviewHeld {
  position: absolute;
  left: calc(18% + 34px);
  top: 25px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(43, 36, 64, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #56456c;
  box-shadow: 0 4px 9px rgba(43, 36, 64, 0.14);
}

.shopPreviewHeld .wohooIcon {
  width: 19px;
  height: 19px;
}

.shopPreviewProjectile {
  position: absolute;
  left: 48%;
  right: 9%;
  top: 24px;
  z-index: 4;
  height: 34px;
}

.shopPreviewProjectile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed rgba(70, 70, 93, 0.2);
}

.shopPreviewProjectile i {
  position: absolute;
  left: 0;
  top: calc(50% + (var(--shot-index, 0) - 1) * 8px);
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 2px dotted #9b682e;
  border-radius: 50%;
  background: #e8b96b;
  box-shadow: 0 2px 5px rgba(80, 49, 18, 0.2);
  animation: shopProjectile 1.65s calc(var(--shot-index, 0) * 0.13s) linear infinite;
}

.preview-single .shopPreviewProjectile i {
  top: calc(50% - 5px);
}

.preview-twin .shopPreviewProjectile i:first-child {
  top: calc(50% - 12px);
}

.preview-twin .shopPreviewProjectile i:last-child {
  top: calc(50% + 2px);
}

.preview-burst .shopPreviewProjectile i {
  top: calc(50% - 5px);
}

.preview-ricochet .shopPreviewProjectile i {
  animation-name: shopRicochetProjectile;
}

.preview-pierce .shopPreviewProjectile i {
  width: 13px;
  border-style: solid;
  background: #d89b4a;
}

.shopPreviewTrail {
  position: absolute;
  left: 8%;
  top: 37px;
  z-index: 2;
  width: 38px;
  height: 15px;
  border-radius: 50%;
  opacity: 0;
  transform: rotate(12deg);
}

.preview-scarf_mint .shopPreviewTrail,
.preview-cape_ribbon .shopPreviewTrail,
.shopItemPreview[data-preview-slot="scarf"]:not([data-preview-world="0"]) .shopPreviewTrail {
  opacity: 1;
}

.preview-scarf_mint .shopPreviewTrail {
  border-top: 7px solid #66d9b8;
  box-shadow: 0 -3px 0 rgba(255, 255, 255, 0.48);
}

.preview-cape_ribbon .shopPreviewTrail {
  border-top: 10px solid #ff8da7;
  border-right: 8px solid transparent;
}

.shopItemPreview[data-preview-slot="scarf"]:not([data-preview-world="0"]) .shopPreviewTrail {
  width: 42px;
  height: 18px;
  border-top: 8px solid var(--preview-accent, #67bce5);
  border-right: 6px solid transparent;
  box-shadow: 0 -3px 0 color-mix(in srgb, var(--preview-secondary, #ffd56f) 72%, transparent);
}

.shopItemPreview[data-preview-slot="scarf"]:not([data-preview-world="0"]) .shopPreviewTrail::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 31px;
  border-top: 2px solid var(--preview-secondary, #ffd56f);
  transform: rotate(-8deg);
}

.shopItemPreview[data-preview-slot="scarf"][data-preview-world="4"] .shopPreviewTrail {
  height: 13px;
  border: 0;
  background:
    radial-gradient(ellipse at center, transparent 38%, var(--preview-accent) 41% 57%, transparent 60%) 0 0 / 13px 10px repeat-x;
  box-shadow: none;
}

.shopItemPreview[data-preview-slot="scarf"][data-preview-world="5"] .shopPreviewTrail,
.shopItemPreview[data-preview-slot="scarf"][data-preview-world="2"] .shopPreviewTrail {
  border-right-width: 15px;
  border-bottom: 5px solid transparent;
}

.shopItemPreview[data-preview-slot="scarf"][data-preview-world="8"] .shopPreviewTrail,
.shopItemPreview[data-preview-slot="scarf"][data-preview-world="9"] .shopPreviewTrail,
.shopItemPreview[data-preview-slot="scarf"][data-preview-world="10"] .shopPreviewTrail {
  border: 0;
  background:
    radial-gradient(ellipse at 10% 50%, var(--preview-accent) 0 18%, transparent 20%),
    radial-gradient(ellipse at 42% 38%, var(--preview-accent) 0 20%, transparent 22%),
    radial-gradient(ellipse at 76% 56%, var(--preview-accent) 0 20%, transparent 22%);
  box-shadow: inset 0 -2px 0 var(--preview-secondary);
}

.shopPreviewWearable {
  position: absolute;
  left: calc(18% + 11px);
  top: 11px;
  z-index: 6;
}

.preview-hat_party .shopPreviewWearable {
  width: 21px;
  height: 27px;
  border-right: 10px solid transparent;
  border-bottom: 27px solid #67bce5;
  border-left: 10px solid transparent;
  transform: rotate(-7deg);
}

.preview-hat_party .shopPreviewWearable::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd56f;
}

.preview-hat_crown .shopPreviewWearable {
  width: 28px;
  height: 18px;
  background: #ffd36d;
  clip-path: polygon(0 100%, 0 35%, 24% 67%, 48% 10%, 72% 67%, 100% 35%, 100% 100%);
  transform: rotate(-4deg);
}

.shopItemPreview[data-preview-slot="hat"]:not([data-preview-world="0"]) .shopPreviewWearable {
  width: 30px;
  height: 20px;
  border: 1px solid rgba(45, 39, 61, 0.72);
  border-radius: 50% 50% 24% 24%;
  background: var(--preview-accent, #67bce5);
  box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--preview-secondary, #ffd56f) 82%, transparent);
  transform: rotate(-4deg);
}

.shopItemPreview[data-preview-slot="hat"]:not([data-preview-world="0"]) .shopPreviewWearable i {
  position: absolute;
  display: block;
  background: var(--preview-secondary, #ffd56f);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="1"] .shopPreviewWearable i:first-child {
  right: -8px;
  bottom: 1px;
  width: 13px;
  height: 6px;
  border-radius: 50%;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="1"] .shopPreviewWearable i:nth-child(2),
.shopItemPreview[data-preview-slot="hat"][data-preview-world="1"] .shopPreviewWearable i:nth-child(3) {
  left: 10px;
  top: 5px;
  width: 7px;
  height: 5px;
  border-radius: 50%;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="1"] .shopPreviewWearable i:nth-child(3) {
  left: 15px;
  top: 8px;
  transform: rotate(58deg);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="2"] .shopPreviewWearable {
  height: 11px;
  top: 18px;
  border-radius: 6px;
  background: linear-gradient(105deg, var(--preview-accent) 0 48%, var(--preview-secondary) 52% 100%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--preview-accent) 52%, transparent);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="3"] .shopPreviewWearable {
  border-radius: 50% 50% 8px 8px;
  background:
    repeating-linear-gradient(75deg, transparent 0 4px, color-mix(in srgb, var(--preview-secondary) 80%, transparent) 5px 6px),
    var(--preview-accent);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="4"] .shopPreviewWearable {
  border-radius: 50% 50% 8px 8px;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="4"] .shopPreviewWearable::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: -6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--preview-secondary);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="5"] .shopPreviewWearable {
  width: 38px;
  height: 13px;
  left: -4px;
  top: 4px;
  border-radius: 50%;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="5"] .shopPreviewWearable::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -10px;
  width: 25px;
  height: 15px;
  border-radius: 70% 20% 35% 18%;
  background: var(--preview-accent);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="6"] .shopPreviewWearable {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="6"] .shopPreviewWearable i {
  bottom: 0;
  width: 9px;
  height: 22px;
  clip-path: polygon(50% 0, 100% 70%, 72% 100%, 28% 100%, 0 70%);
  background: linear-gradient(var(--preview-secondary), var(--preview-accent));
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="6"] .shopPreviewWearable i:first-child {
  left: 2px;
  height: 17px;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="6"] .shopPreviewWearable i:nth-child(2) {
  left: 11px;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="6"] .shopPreviewWearable i:nth-child(3) {
  left: 20px;
  height: 18px;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="7"] .shopPreviewWearable {
  border-radius: 50%;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="7"] .shopPreviewWearable::after {
  content: "";
  position: absolute;
  inset: 9px 3px -13px;
  border-radius: 4px 4px 45% 45%;
  background: color-mix(in srgb, var(--preview-secondary) 78%, transparent);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="8"] .shopPreviewWearable {
  height: 10px;
  top: 20px;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="8"] .shopPreviewWearable::before,
.shopItemPreview[data-preview-slot="hat"][data-preview-world="8"] .shopPreviewWearable::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 12px;
  height: 18px;
  border: 3px solid var(--preview-secondary);
  border-bottom: 0;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="8"] .shopPreviewWearable::before {
  left: 1px;
  transform: rotate(-24deg);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="8"] .shopPreviewWearable::after {
  right: 1px;
  transform: rotate(24deg);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="9"] .shopPreviewWearable {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="9"] .shopPreviewWearable i {
  left: 10px;
  top: 1px;
  width: 12px;
  height: 12px;
  border-radius: 70% 20% 70% 20%;
  transform-origin: 5px 10px;
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="9"] .shopPreviewWearable i:first-child {
  transform: rotate(0deg) translateY(-6px);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="9"] .shopPreviewWearable i:nth-child(2) {
  transform: rotate(120deg) translateY(-6px);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="9"] .shopPreviewWearable i:nth-child(3) {
  transform: rotate(240deg) translateY(-6px);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="10"] .shopPreviewWearable {
  width: 22px;
  left: 4px;
  border-radius: 5px;
  background: var(--preview-secondary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--preview-secondary) 55%, transparent);
}

.shopItemPreview[data-preview-slot="hat"][data-preview-world="10"] .shopPreviewWearable::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: -8px;
  height: 8px;
  border: 2px solid var(--preview-accent);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.shopCardCollection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 6px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(43, 36, 64, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #514766;
  text-align: left;
}

.shopCardCollection .wohooIcon {
  grid-row: 1 / span 2;
  width: 17px;
  height: 17px;
}

.shopCardCollection span {
  overflow-wrap: anywhere;
  font-size: 11px;
  font-weight: 800;
}

.shopCardCollection small {
  color: #716981;
  font-size: 10px;
  line-height: 1.2;
}

.shopPreviewShield {
  position: absolute;
  left: calc(18% - 4px);
  top: 11px;
  z-index: 7;
  width: 58px;
  height: 58px;
  border: 4px solid rgba(94, 200, 229, 0.72);
  border-left-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(94, 200, 229, 0.34);
}

.shopPreviewAmmo {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #735127;
}

.shopPreviewAmmo .wohooIcon {
  width: 17px;
  height: 17px;
}

.shopPreviewCaption {
  display: block;
  margin-top: 5px;
  color: rgba(43, 36, 64, 0.64);
  font-size: 9px;
  font-weight: 850;
}

.shopItemClassRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.shopItemClass {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid rgba(43, 36, 64, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: rgba(43, 36, 64, 0.7);
  font-size: 8px;
}

.shopItemClass.isRanked {
  border-color: rgba(70, 158, 130, 0.2);
  color: #285e50;
}

.shopItemClass .wohooIcon {
  width: 13px;
  height: 13px;
}

.shopCardLore {
  min-height: 29px;
  color: rgba(75, 61, 91, 0.62);
  font-family: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  font-size: 10px;
  font-style: italic;
  line-height: 1.25;
}

@keyframes shopProjectile {
  from { transform: translateX(0) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  to { transform: translateX(70px) rotate(360deg); opacity: 0; }
}

@keyframes shopRicochetProjectile {
  from { transform: translate(0, 11px) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  52% { transform: translate(36px, 11px) rotate(190deg); opacity: 1; }
  to { transform: translate(70px, -11px) rotate(360deg); opacity: 0; }
}

.shopCardIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.92), rgba(255,255,255,0.24) 45%),
    linear-gradient(180deg, rgba(122,220,192,0.54), rgba(255,211,109,0.38));
  border: 1px solid rgba(43,36,64,0.12);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.34), 0 12px 22px rgba(43,36,64,0.12);
  font-size: 30px;
}

.shopCardTop {
  width: 100%;
  justify-content: center;
}

.shopCardTitle {
  font-size: 13px;
  line-height: 1.15;
}

.shopCardDesc {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 11px;
  line-height: 1.28;
}

.shopCardMeta {
  justify-content: center;
}

.shopCost {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.76);
  font-size: 13px;
}

.shopActions {
  justify-content: center;
}

.shopActions .kidIconBtn {
  min-width: 42px;
  min-height: 42px;
  font-size: 20px;
}

.badgeShelfGrid {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 10px;
}

.badgeCard {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  min-height: 132px;
  padding: 12px 9px;
  border-radius: 18px;
}

.badgeIcon {
  width: 54px;
  height: 54px;
  border-radius: 20px;
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badgeName {
  font-size: 12px;
  line-height: 1.15;
}

.badgeMeta {
  font-size: 12px;
}

.questMissionStrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,211,109,0.28), transparent 48%),
    rgba(255,255,255,0.74);
  border: 1px solid rgba(72, 58, 95, 0.1);
}

.questMissionGlyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.questMissionGlyph .questInlineIcon {
  width: 38px;
  height: 38px;
}

.questMissionArrow {
  font-size: 24px;
  font-weight: 950;
  color: rgba(43,36,64,0.55);
}

.questBriefText {
  text-align: center;
}

.questControls .kidIconBtn {
  min-width: 44px;
  min-height: 44px;
  font-size: 21px;
}

.questStartBtn.kidPrimaryBtn {
  min-width: 76px;
}

.questLanguageSelect {
  max-width: 152px;
}

.hudCardScore .hudSubline:not(.hudCrumbLine):not(.hudGemLine),
.hudCardAmmo .hudSubline:not(.hudAbilitySummary),
.hudHealthSplit,
.hudAbilityHint,
.hudDockSectionLabel {
  display: none !important;
}

.hudCardAmmo .hudAbilitySummary {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hudQuestBtn {
  min-height: 30px;
  font-size: 18px;
}

body:not(.layout-phone) .touchBtnLabel {
  font-size: 20px;
  line-height: 1;
  text-transform: none;
}

body.layout-phone.layout-portrait .touchBtnLabel,
body.layout-phone.layout-landscape .touchBtnLabel {
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 640px) {
  .topIconBtn {
    min-width: 46px;
    min-height: 46px;
    font-size: 23px;
  }

  .campaignHud {
    padding: 12px;
  }

  .campaignTopRow {
    align-items: center;
  }

  .campaignTitle {
    font-size: 26px;
  }

  .campaignSubTitle {
    max-width: 100%;
    font-size: 12px;
  }

  .campaignActions {
    margin-left: auto;
  }

  .campaignActionBtn {
    min-width: 50px !important;
    width: 54px;
    padding: 0;
  }

  .kidBtnCount {
    font-size: 13px;
  }

  .campaignChip {
    min-height: 34px;
    padding: 6px 9px;
  }

  .onboardingCard {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
  }

  .worldCard {
    min-height: 180px;
  }

  .worldCardTitle {
    margin-top: 56px;
    font-size: 16px;
  }

  .worldCursorControls {
    position: sticky;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 12;
    box-shadow: 0 12px 26px rgba(43,36,64,0.14);
  }

  .shopModalCard,
  .badgeDrawerCard {
    width: calc(100vw - 16px);
  }

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

  .shopCard {
    min-height: 164px;
    padding: 12px 8px;
  }

  .shopCardIcon {
    width: 56px;
    height: 56px;
    border-radius: 19px;
    font-size: 26px;
  }

  .shopActions .kidIconBtn {
    min-width: 38px;
    min-height: 38px;
  }

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

  .questMissionGlyph .questInlineIcon {
    width: 34px;
    height: 34px;
  }
}

body.layout-phone.ui-menu #root {
  min-height: var(--layout-vh, 100dvh);
}

body.layout-phone.ui-menu #topbar {
  min-height: 48px;
  padding: calc(6px + env(safe-area-inset-top)) 8px 6px;
  gap: 6px;
}

body.layout-phone.ui-menu .brand {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0;
}

body.layout-phone.ui-menu .status {
  display: none;
}

body.layout-phone.ui-menu .topIconBtn {
  min-width: 40px;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
  font-size: 19px;
}

body.layout-phone .panel {
  top: calc(50px + env(safe-area-inset-top));
  width: calc(var(--layout-vw, 100vw) - 12px);
  max-height: calc(var(--layout-vh, 100dvh) - 58px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 10px;
  border-radius: 18px;
}

body.layout-phone .loginPanel {
  top: calc(54px + env(safe-area-inset-top));
  width: min(430px, calc(var(--layout-vw, 100vw) - 14px));
}

body.layout-phone .loginPanel .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 7px 0;
}

body.layout-phone .loginPanel .row label {
  min-width: 0;
}

body.layout-phone .loginPanel .row input {
  min-height: 44px;
  font-size: 16px;
}

body.layout-phone .loginPanel {
  grid-template-columns: 1fr;
  overflow: auto;
  padding: 0;
}

body.layout-phone .authArtPanel {
  min-height: 124px;
  border-bottom: 1px solid rgba(43, 36, 64, 0.1);
}

body.layout-phone .authArtPanel::after {
  height: 70px;
  background-size: 46% auto, 48% auto;
}

body.layout-phone .authArtBadge {
  margin: 12px 0 0 12px;
  padding: 8px 14px;
  font-size: 12px;
}

body.layout-phone .authArtTitle {
  display: none;
}

body.layout-phone .authFormPanel {
  padding: 16px 14px 14px;
}

body.layout-phone .loginPanel h2 {
  margin-bottom: 12px;
  font-size: 26px;
}

body.layout-phone .loginPanel .row {
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 8px 0;
}

body.layout-phone .loginPanel[data-auth-mode="login"] .authRegisterOnly {
  display: none;
}

body.layout-phone .loginPanel .rememberRow {
  margin: 10px 0 12px;
}

body.layout-phone .authActions .authPrimaryBtn {
  grid-column: 1;
  width: 100%;
}

body.layout-phone .authModeCopy {
  min-height: 0;
  margin-bottom: 10px;
}

body.layout-phone .loginPanel .passwordResetBox .row {
  grid-template-columns: 1fr;
}

body.layout-phone .rememberRow {
  min-height: 34px;
}

body.layout-phone .campaignHud {
  margin: 4px 0 8px;
  padding: 10px;
  border-radius: 18px;
}

body.layout-phone .campaignTopRow {
  align-items: center;
  gap: 8px;
}

body.layout-phone .campaignTitle {
  font-size: 19px;
  line-height: 1.05;
}

body.layout-phone .campaignSubTitle {
  display: none;
}

body.layout-phone .campaignActions {
  gap: 6px;
  margin-left: auto;
}

body.layout-phone .campaignStartBtn {
  min-width: 58px;
  width: 58px;
  min-height: 46px;
  padding: 0;
  font-size: 23px;
}

body.layout-phone .campaignStartBtn .campaignStartLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

body.layout-phone .campaignActions .campaignActionBtn {
  min-width: 46px !important;
  width: 46px;
  min-height: 46px;
  padding: 0;
  font-size: 21px;
}

body.layout-phone .campaignChips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.layout-phone .campaignChip {
  min-height: 32px;
  justify-content: center;
  padding: 5px 8px;
  font-size: 11px;
}

body.layout-phone .campaignChipLevel {
  grid-column: 1 / -1;
  min-width: 0;
}

body.layout-phone .onboardingCard {
  display: none;
}

body.layout-phone .atlasHeader {
  margin-bottom: 8px;
  padding: 7px 10px;
}

body.layout-phone .atlasTitle {
  font-size: 13px;
}

body.layout-phone .atlasSubTitle {
  display: none;
}

body.layout-phone .atlasHero {
  min-height: 138px;
  margin-bottom: 8px;
  border-radius: 18px;
}

body.layout-phone .atlasHeroContent {
  width: calc(100% - 20px);
  margin: 10px;
  padding: 8px 10px;
}

body.layout-phone .atlasHeroTitle {
  font-size: 14px;
}

body.layout-phone .atlasHeroMeta {
  font-size: 11px;
}

body.layout-phone .atlasHeroMeta strong,
body.layout-phone .atlasHeroMeta b {
  font-size: 12px;
}

body.layout-phone .atlasHeroStartBtn {
  min-height: 46px;
  margin-top: 7px;
  font-size: 13px;
}

body.layout-phone .worldsGrid {
  grid-template-columns: 1fr;
  gap: 10px;
}

body.layout-phone .worldCard {
  min-height: 148px;
  padding: 10px;
  border-radius: 20px;
}

body.layout-phone .worldCardTitle {
  max-width: calc(100% - 64px);
  margin-top: 48px;
  padding: 7px 10px;
  font-size: 15px;
}

body.layout-phone .worldCardIconStats {
  gap: 4px;
  margin-top: 6px;
  padding: 4px;
}

body.layout-phone .worldCardIconStats span {
  min-height: 24px;
  padding: 0 7px;
  font-size: 11px;
}

body.layout-phone .worldCardEnterCue {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
}

body.layout-phone .worldTitle {
  min-height: 34px;
  margin-bottom: 6px;
  padding: 5px 10px;
  font-size: 19px;
}

body.layout-phone #worldDesc,
body.layout-phone .worldLegend {
  display: none;
}

body.layout-phone .worldScoreboard {
  display: block;
  margin: 0 0 8px;
}

body.layout-phone .worldScoreChipRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.layout-phone .worldScoreChip {
  justify-content: center;
  min-width: 0;
  padding: 5px 7px;
  font-size: 10px;
}

body.layout-phone .worldCulturePanel {
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 6px;
  padding: 7px 2px;
}

body.layout-phone .worldCultureTitle {
  display: flex;
  gap: 6px;
}

body.layout-phone .worldCultureTitle .wohooIcon {
  width: 16px;
  height: 16px;
}

body.layout-phone .worldCultureTitle span {
  flex: 1 1 auto;
  text-align: right;
}

body.layout-phone .worldCulturePanel dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.layout-phone .worldCulturePanel dd {
  display: -webkit-box;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.layout-phone .worldLeaderboardPreview {
  width: 100%;
  margin-top: 6px;
  padding: 7px;
  border-radius: 14px;
}

body.layout-phone .worldLeaderboardHead,
body.layout-phone .worldLeaderboardRow {
  grid-template-columns: 34px minmax(62px, 1fr) 72px;
  gap: 6px;
}

body.layout-phone .worldLeaderboardMedal {
  display: none;
}

body.layout-phone .worldMap {
  min-height: min(72vh, 460px);
  margin-top: 4px;
  border-radius: 20px;
}

body.layout-phone .worldNode {
  width: 52px;
  height: 52px;
}

body.layout-phone .worldNodeLabel {
  font-size: 11px;
}

body.layout-phone .worldNodeGlyph {
  width: 25px;
  height: 25px;
}

body.layout-phone .worldNodeMedal {
  width: 18px;
  height: 18px;
}

body.layout-phone .worldCursorControls {
  position: sticky;
  bottom: calc(4px + env(safe-area-inset-bottom));
  z-index: 12;
  grid-template-columns: minmax(0, 1fr) 48px 48px;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  overflow: visible;
}

body.layout-phone .worldCursorBtn {
  width: 48px;
  min-width: 48px;
  min-height: 42px;
}

body.layout-phone .worldCursorLevelButton {
  grid-template-columns: minmax(0, 1fr) 40px;
  min-height: 52px;
  padding: 5px 6px 5px 10px;
}

body.layout-phone .worldCursorPlayRelief {
  width: 38px;
  height: 38px;
}

body.layout-phone .settingsModalCard,
body.layout-phone .shopModalCard,
body.layout-phone .badgeDrawerCard {
  width: calc(var(--layout-vw, 100vw) - 12px);
  max-height: calc(var(--layout-vh, 100dvh) - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border-radius: 20px;
}

body.layout-phone .settingsPanel {
  overflow: auto;
}

body.layout-phone .settingsRow {
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 14px;
}

body.layout-phone .settingsCheckbox {
  justify-self: start;
}

body.layout-phone .settingsValue {
  text-align: left;
}

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

body.layout-phone .settingsTabs {
  overflow-x: auto;
  grid-template-columns: repeat(5, minmax(74px, 1fr));
  scrollbar-width: none;
}

body.layout-phone .settingsTab {
  min-height: 38px;
}

body.layout-phone .questModalCard {
  width: calc(var(--layout-vw, 100vw) - 12px);
  max-height: calc(var(--layout-vh, 100dvh) - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border-radius: 20px;
}

body.layout-phone .questModalFrame {
  grid-template-columns: 1fr;
}

body.layout-phone .questModalArt {
  display: none;
}

body.layout-phone .questModalContent {
  max-height: calc(var(--layout-vh, 100dvh) - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

body.layout-phone .questModalHeader {
  padding: 12px 14px 6px;
}

body.layout-phone .questModalBody {
  padding: 0 16px 12px 14px;
}

body.layout-phone .questControls {
  justify-content: flex-end;
  gap: 7px;
  padding: 0 14px 12px;
}

body.layout-phone .questCastGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.layout-phone .questObjectiveList {
  gap: 6px;
}

body.layout-phone .questCultureFacts {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 9px;
  padding-top: 9px;
}

body.layout-phone .questCultureFacts dd {
  font-size: 10px;
  line-height: 1.35;
}

/* iPhone readability pass: keep Safari zoom available in menus, but make gameplay itself scale inside the app. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.layout-phone.ui-playing #gameCanvas {
  object-position: center center;
}

body.layout-phone.layout-portrait.ui-playing #gameCanvas {
  object-fit: cover;
}

body.layout-phone.layout-landscape.ui-playing #gameCanvas {
  object-fit: contain;
}

body.layout-phone.ui-playing .pauseBtn {
  min-width: 74px;
  min-height: 38px;
  padding: 6px 12px;
  font-size: 12px;
}

body.layout-phone.ui-playing .gameSettingsBtn {
  width: 42px;
  min-width: 42px;
  min-height: 38px;
  font-size: 18px;
}

body.layout-phone.ui-playing .homeBtn {
  width: 42px;
  min-width: 42px;
  min-height: 38px;
  font-size: 18px;
}

body.layout-phone.ui-playing .hudCard {
  padding: 6px 9px;
}

body.layout-phone.ui-playing .hudCardHealth {
  min-width: 100px;
}

body.layout-phone.ui-playing .hudCardHealth .hudBadge {
  min-width: 34px;
  height: 22px;
  font-size: 12px;
}

body.layout-phone.ui-playing .hudCardHealth .hudHearts {
  min-height: 15px;
  gap: 3px;
}

body.layout-phone.ui-playing .hudCardHealth .hudHeart {
  width: 15px;
  height: 15px;
}

body.layout-phone.ui-playing .hudQuestBtn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 12px;
}

body.layout-phone.ui-playing .objectiveBanner {
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.25;
}

body.layout-phone.layout-portrait .joyBase {
  width: clamp(138px, 38vw, 160px);
  height: clamp(138px, 38vw, 160px);
}

body.layout-phone.layout-portrait .joyKnob {
  width: clamp(58px, 16vw, 70px);
  height: clamp(58px, 16vw, 70px);
  margin-left: clamp(-35px, -8vw, -29px);
  margin-top: clamp(-35px, -8vw, -29px);
}

body.layout-phone.layout-portrait .touchBtnSpin {
  width: clamp(74px, 21vw, 88px);
  height: clamp(74px, 21vw, 88px);
}

body.layout-phone.layout-portrait .touchBtnMode {
  width: clamp(64px, 18vw, 76px);
  height: clamp(64px, 18vw, 76px);
}

body.layout-phone.layout-portrait .touchBtnSneak {
  width: clamp(64px, 18vw, 76px);
  height: clamp(42px, 12vw, 50px);
}

body.layout-phone.layout-portrait .touchBtnTurbo {
  width: clamp(64px, 18vw, 76px);
  height: clamp(42px, 12vw, 50px);
}

body.layout-phone.layout-portrait .touchBtnAction {
  width: clamp(94px, 27vw, 112px);
  height: clamp(94px, 27vw, 112px);
}

body.layout-phone.layout-portrait .touchBtnSpecial {
  width: clamp(80px, 24vw, 98px);
  height: clamp(80px, 24vw, 98px);
}

body.layout-phone.layout-portrait .touchBtnUtility {
  width: clamp(64px, 18vw, 76px);
  height: clamp(42px, 12vw, 50px);
}

body.layout-phone.layout-portrait .touchBtnGlyph,
body.layout-phone.layout-landscape .touchBtnGlyph {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
}

body.layout-phone.layout-portrait .touchBtnLabel {
  display: block;
  font-size: 12px;
  line-height: 1.05;
}

body.layout-phone.layout-landscape .touchBtnLabel {
  display: none;
}

body.layout-phone .campaignChip,
body.layout-phone .worldCardIconStats span,
body.layout-phone .worldNodeLabel,
body.layout-phone .worldCursorBtn,
body.layout-phone .questModalSubtitle {
  font-size: 12px;
}

body.layout-phone .atlasTitle,
body.layout-phone .atlasHeroTitle {
  font-size: 15px;
}

body.layout-phone.layout-portrait.ui-playing .objectiveBanner {
  top: calc(96px + env(safe-area-inset-top));
}

body.layout-phone.layout-landscape.ui-playing .hudInner {
  right: calc(138px + env(safe-area-inset-right));
}

body.layout-phone.layout-landscape.ui-playing .hudCardAmmo {
  width: min(276px, calc(100vw - 300px));
  max-width: min(276px, calc(100vw - 300px));
}

body.layout-phone.layout-landscape.ui-playing .objectiveBanner {
  top: calc(108px + env(safe-area-inset-top));
  max-width: min(320px, calc(100vw - 390px));
}

/* iPhone 13 Pro production control overlay: keep playfield full-size, controls on the edges. */
body.layout-phone.ui-playing #gameCanvas {
  height: var(--layout-vh, 100dvh);
}

body.layout-phone.ui-playing .hudPhoneAmmoChip {
  display: inline-flex;
}

body.layout-phone.ui-playing .pauseBtn {
  min-width: 80px;
  min-height: 44px;
}

body.layout-phone.ui-playing .gameSettingsBtn {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
}

body.layout-phone.ui-playing .homeBtn {
  right: calc(130px + env(safe-area-inset-right));
  width: 44px;
  min-width: 44px;
  min-height: 44px;
}

body.layout-phone.layout-landscape.ui-playing .touchLeft {
  left: max(6px, calc(env(safe-area-inset-left) + 4px));
  top: 55%;
}

body.layout-phone.layout-landscape.ui-playing .touchRight {
  right: max(6px, calc(env(safe-area-inset-right) + 4px));
  top: 55%;
  gap: 5px;
}

body.layout-phone.layout-landscape.ui-playing .joyBase {
  width: 118px;
  height: 118px;
}

body.layout-phone.layout-landscape.ui-playing .joyKnob {
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnSpin {
  width: 62px;
  height: 62px;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnMode {
  width: 60px;
  height: 52px;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnSneak,
body.layout-phone.layout-landscape.ui-playing .touchBtnUtility,
body.layout-phone.layout-landscape.ui-playing .touchBtnTurbo {
  width: 64px;
  height: 44px;
  border-radius: 16px;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnAction {
  width: 76px;
  height: 76px;
  border-radius: 21px;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnSpecial {
  width: 66px;
  height: 66px;
  border-radius: 19px;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnGlyph {
  font-size: 22px;
}

body.layout-phone.layout-landscape.ui-playing .touchBtn {
  background-color: rgba(255, 255, 255, 0.76);
}

body.layout-phone .settingsSelect,
body.layout-phone .settingsActions .btn,
body.layout-phone .questLanguageSelect,
body.layout-phone .questControls .btn {
  min-height: 44px;
}

body.layout-phone .settingsSlider {
  min-height: 44px;
}

body.layout-phone .settingsSlider::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
}

body.layout-phone .settingsSlider::-moz-range-thumb {
  width: 28px;
  height: 28px;
}

body.layout-phone .settingsCheckbox {
  width: 36px;
  height: 36px;
}

body.layout-phone .questModalHeader .verificationModalCloseBtn {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
}

body.layout-phone .questStartBtn .srOnly {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
}

/* Wohoo controller skin overlay, using inert art with real controls above it. */
.controllerSkin {
  display: none;
  pointer-events: none;
  position: fixed;
  z-index: 0;
  overflow: visible;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 12px 20px rgba(54, 30, 8, 0.18));
  opacity: 0.92;
  transition: opacity 180ms ease, filter 180ms ease;
}

.controllerSkinDebugSvg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.controller-skin-debug .controllerSkinDebugSvg {
  display: block;
}

.controllerSkinDebugHit {
  fill: rgba(44, 167, 142, 0.34);
  stroke: rgba(14, 114, 97, 0.68);
  stroke-width: 3;
}

.controllerSkinDebugHit.needsArtSocket {
  fill: rgba(255, 183, 75, 0.32);
  stroke: rgba(163, 93, 21, 0.68);
}

.controllerSkinDebugVisual {
  fill: rgba(255, 255, 255, 0.28);
  stroke: rgba(43, 36, 64, 0.64);
  stroke-width: 2;
}

.controllerSkinTopLeft {
  left: 0;
  top: max(-16px, calc(env(safe-area-inset-top) - 26px));
  width: var(--wohoo-skin-top-w, 230px);
  aspect-ratio: 640 / 260;
  background-image: url("assets/controller-skin/wohoo_corner_top_left.svg");
  background-position: left top;
  opacity: 0.78;
}

.controllerSkinTopRight {
  right: 0;
  top: max(-16px, calc(env(safe-area-inset-top) - 26px));
  width: var(--wohoo-skin-top-w, 230px);
  aspect-ratio: 640 / 260;
  background-image: url("assets/controller-skin/wohoo_corner_top_right.svg");
  background-position: right top;
  opacity: 0.78;
}

.controllerSkinBottomLeft {
  left: 0;
  bottom: max(0px, calc(env(safe-area-inset-bottom) * 0.05));
  width: var(--wohoo-skin-left-w, 250px);
  aspect-ratio: 640 / 430;
  background-image: url("assets/controller-skin/wohoo_corner_bottom_left.svg");
  background-position: left bottom;
}

.controllerSkinBottomRight {
  right: 0;
  bottom: max(0px, calc(env(safe-area-inset-bottom) * 0.05));
  width: var(--wohoo-skin-right-w, 272px);
  aspect-ratio: 680 / 460;
  background-image: url("assets/controller-skin/wohoo_corner_bottom_right.svg");
  background-position: right bottom;
}

body.layout-phone.ui-playing,
body.layout-tablet.ui-playing {
  --wohoo-skin-left-w: clamp(224px, 60vw, 244px);
  --wohoo-skin-right-w: clamp(236px, 64vw, 258px);
  --wohoo-skin-top-w: clamp(196px, 56vw, 224px);
  --wohoo-joy-hit: 112px;
  --wohoo-joy-knob: 48px;
  --wohoo-action-hit: 52px;
  --wohoo-action-large-hit: 64px;
  --wohoo-aux-hit-w: 46px;
  --wohoo-aux-hit-h: 46px;
}

body.layout-phone.layout-landscape.ui-playing {
  --wohoo-skin-left-w: clamp(250px, 35.5vw, 310px);
  --wohoo-skin-right-w: clamp(270px, 38vw, 326px);
  --wohoo-skin-top-w: clamp(190px, 27vw, 236px);
  --wohoo-joy-hit: 104px;
  --wohoo-joy-knob: 46px;
  --wohoo-action-hit: 50px;
  --wohoo-action-large-hit: 64px;
  --wohoo-aux-hit-w: 46px;
  --wohoo-aux-hit-h: 46px;
}

body.layout-tablet.ui-playing {
  --wohoo-skin-left-w: clamp(430px, 42vw, 560px);
  --wohoo-skin-right-w: clamp(460px, 45vw, 590px);
  --wohoo-skin-top-w: clamp(340px, 34vw, 470px);
  --wohoo-joy-hit: 176px;
  --wohoo-joy-knob: 72px;
  --wohoo-action-hit: 92px;
  --wohoo-action-large-hit: 116px;
  --wohoo-aux-hit-w: 68px;
  --wohoo-aux-hit-h: 50px;
}

body.layout-phone.ui-playing .touchControls,
body.layout-tablet.ui-playing .touchControls {
  position: fixed;
  inset: 0;
  z-index: 43;
  pointer-events: none;
}

body.layout-phone.ui-playing .controllerSkin,
body.layout-tablet.ui-playing .controllerSkin {
  display: block;
}

body.layout-phone.ui-playing .controllerSkinBottomLeft {
  left: max(0px, calc(env(safe-area-inset-left) - 20px));
  bottom: max(8px, calc(env(safe-area-inset-bottom) - 2px));
}

body.layout-phone.ui-playing .controllerSkinBottomRight {
  right: max(0px, calc(env(safe-area-inset-right) - 20px));
  bottom: max(8px, calc(env(safe-area-inset-bottom) - 2px));
}

body.layout-phone.ui-playing .touchLeft,
body.layout-tablet.ui-playing .touchLeft {
  pointer-events: none;
  position: fixed;
  left: max(10px, calc(env(safe-area-inset-left) + 8px));
  top: auto;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: var(--wohoo-joy-hit);
  height: var(--wohoo-joy-hit);
  aspect-ratio: auto;
  transform: none;
}

body.layout-phone.ui-playing .joyBase,
body.layout-tablet.ui-playing .joyBase {
  pointer-events: auto;
  position: fixed;
  left: calc(max(10px, env(safe-area-inset-left)) + (var(--wohoo-joy-hit) * 0.5));
  top: calc(var(--layout-vh, 100dvh) - env(safe-area-inset-bottom) - (var(--wohoo-joy-hit) * 0.5) - 18px);
  width: var(--wohoo-joy-hit);
  height: var(--wohoo-joy-hit);
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

body.layout-phone.ui-playing .joyBase.isSneakZone,
body.layout-tablet.ui-playing .joyBase.isSneakZone {
  box-shadow: 0 0 0 3px rgba(84, 209, 154, 0.34) inset;
}

body.layout-phone.ui-playing .joyArrow,
body.layout-tablet.ui-playing .joyArrow {
  display: none;
}

body.layout-phone.ui-playing .joyKnob,
body.layout-tablet.ui-playing .joyKnob {
  width: var(--wohoo-joy-knob);
  height: var(--wohoo-joy-knob);
  margin-left: calc(var(--wohoo-joy-knob) * -0.5);
  margin-top: calc(var(--wohoo-joy-knob) * -0.5);
  transition: none;
  border: 2px solid rgba(122, 70, 19, 0.42);
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 249, 207, 0.92) 0 13%, transparent 14%),
    linear-gradient(180deg, rgba(255, 222, 134, 0.96), rgba(218, 132, 37, 0.92));
  box-shadow:
    0 7px 14px rgba(86, 48, 10, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.58);
}

body.layout-phone.ui-playing .touchRight,
body.layout-tablet.ui-playing .touchRight {
  pointer-events: none;
  user-select: none;
  touch-action: none;
  position: fixed;
  right: max(10px, calc(env(safe-area-inset-right) + 8px));
  top: auto;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: calc(var(--wohoo-action-hit) * 2.8);
  height: calc(var(--wohoo-action-hit) * 2.25);
  aspect-ratio: auto;
  display: block;
  transform: none;
}

body.layout-phone.ui-playing .touchBtn,
body.layout-tablet.ui-playing .touchBtn {
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  position: fixed;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none;
  color: #553212;
  letter-spacing: 0;
  text-transform: none;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
}

body.layout-phone.ui-playing .touchBtn::before,
body.layout-tablet.ui-playing .touchBtn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(var(--wohoo-touch-face, calc(100% - 16px)), calc(100% - 16px));
  height: min(var(--wohoo-touch-face, calc(100% - 16px)), calc(100% - 16px));
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid rgba(255, 250, 219, 0.9);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.74) 0 9%, transparent 10%),
    linear-gradient(180deg, rgba(255, 227, 143, 0.97), rgba(214, 126, 33, 0.94));
  box-shadow:
    0 8px 15px rgba(80, 42, 6, 0.24),
    inset 0 -3px 0 rgba(137, 74, 17, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.58);
}

body.layout-phone.ui-playing .touchBtn.isReady:not(.isDisabled)::before,
body.layout-tablet.ui-playing .touchBtn.isReady:not(.isDisabled)::before {
  box-shadow:
    0 8px 15px rgba(80, 42, 6, 0.24),
    0 0 0 3px rgba(255, 244, 180, 0.24),
    inset 0 -3px 0 rgba(137, 74, 17, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.58);
}

body.layout-phone.ui-playing .touchBtn.isPressed,
body.layout-tablet.ui-playing .touchBtn.isPressed {
  transform: translate(-50%, -50%) scale(0.94);
  filter: brightness(0.96);
}

body.layout-phone.ui-playing .touchBtn.isDisabled,
body.layout-tablet.ui-playing .touchBtn.isDisabled {
  opacity: 0.52;
  filter: saturate(0.55);
}

body.layout-phone.ui-playing .touchBtnGlyph,
body.layout-tablet.ui-playing .touchBtnGlyph {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 1;
  display: block;
  width: min(38px, calc(var(--wohoo-touch-face, 72px) * 0.56));
  height: min(38px, calc(var(--wohoo-touch-face, 72px) * 0.56));
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transform: translate(-50%, -50%);
}

body.layout-phone.ui-playing .touchBtnLabel,
body.layout-tablet.ui-playing .touchBtnLabel {
  display: none;
}

body.layout-phone.ui-playing .touchBtnSpin,
body.layout-tablet.ui-playing .touchBtnSpin {
  left: 73.5%;
  top: 51.7%;
  width: var(--wohoo-action-hit);
  height: var(--wohoo-action-hit);
}

body.layout-phone.ui-playing .touchBtnMode,
body.layout-tablet.ui-playing .touchBtnMode {
  left: 64%;
  top: 66.5%;
  width: var(--wohoo-action-hit);
  height: var(--wohoo-action-hit);
}

body.layout-phone.ui-playing .touchBtnAction,
body.layout-tablet.ui-playing .touchBtnAction {
  left: 83.1%;
  top: 66.5%;
  width: var(--wohoo-action-hit);
  height: var(--wohoo-action-hit);
}

body.layout-phone.ui-playing .touchBtnSpecial,
body.layout-tablet.ui-playing .touchBtnSpecial {
  left: 73.5%;
  top: 82%;
  width: var(--wohoo-action-large-hit);
  height: var(--wohoo-action-large-hit);
}

body.layout-phone.ui-playing .touchBtnSneak,
body.layout-tablet.ui-playing .touchBtnSneak {
  left: 49%;
  top: 38%;
  width: var(--wohoo-aux-hit-w);
  height: var(--wohoo-aux-hit-h);
}

body.layout-phone.ui-playing .touchBtnTurbo,
body.layout-tablet.ui-playing .touchBtnTurbo {
  left: calc(max(10px, env(safe-area-inset-left)) + (var(--wohoo-joy-hit) * 0.96));
  top: calc(var(--layout-vh, 100dvh) - env(safe-area-inset-bottom) - (var(--wohoo-joy-hit) * 0.25) - 18px);
  width: var(--wohoo-aux-hit-w);
  height: var(--wohoo-aux-hit-h);
}

body.layout-phone.ui-playing .touchBtnUtility,
body.layout-tablet.ui-playing .touchBtnUtility {
  left: 90%;
  top: 38%;
  width: var(--wohoo-aux-hit-w);
  height: var(--wohoo-aux-hit-h);
}

body.layout-phone.layout-landscape.ui-playing .touchLeft {
  left: max(4px, calc(env(safe-area-inset-left) + 2px));
  bottom: max(2px, calc(env(safe-area-inset-bottom) - 10px));
  width: var(--wohoo-joy-hit);
  height: var(--wohoo-joy-hit);
  aspect-ratio: auto;
}

body.layout-phone.layout-landscape.ui-playing .touchLeft .joyBase {
  left: 50%;
  top: 50%;
}

body.layout-phone.layout-landscape.ui-playing .touchRight {
  right: max(2px, calc(env(safe-area-inset-right) + 2px));
  bottom: max(2px, calc(env(safe-area-inset-bottom) - 10px));
  width: clamp(170px, 21vw, 180px);
  height: 180px;
  aspect-ratio: auto;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnSpin {
  left: 61%;
  top: 40%;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnMode {
  left: 47%;
  top: 57%;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnAction {
  left: 75%;
  top: 57%;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnSpecial {
  left: 61%;
  top: 73%;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnSneak {
  left: 23%;
  top: 24%;
}

body.layout-phone.layout-landscape.ui-playing .touchBtnTurbo {
  left: calc(max(10px, env(safe-area-inset-left)) + (var(--wohoo-joy-hit) * 1.02));
  top: calc(var(--layout-vh, 100dvh) - env(safe-area-inset-bottom) - (var(--wohoo-joy-hit) * 0.22) - 18px);
}

body.layout-phone.layout-landscape.ui-playing .touchBtnUtility {
  left: 72%;
  top: 24%;
}

body.layout-phone.ui-playing .touchBtnSneak::before,
body.layout-phone.ui-playing .touchBtnUtility::before,
body.layout-phone.ui-playing .touchBtnTurbo::before,
body.layout-tablet.ui-playing .touchBtnSneak::before,
body.layout-tablet.ui-playing .touchBtnUtility::before,
body.layout-tablet.ui-playing .touchBtnTurbo::before {
  width: min(var(--wohoo-touch-face, calc(100% - 10px)), calc(100% - 10px));
  height: min(var(--wohoo-touch-face, calc(100% - 10px)), calc(100% - 10px));
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72) 0 10%, transparent 11%),
    linear-gradient(180deg, rgba(255, 244, 196, 0.96), rgba(222, 154, 62, 0.9));
}

body.layout-phone.ui-playing [data-touch-icon="cookie"] .touchBtnGlyph::before,
body.layout-tablet.ui-playing [data-touch-icon="cookie"] .touchBtnGlyph::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 2px solid rgba(112, 63, 18, 0.5);
  background:
    radial-gradient(circle at 34% 32%, #6f3b19 0 8%, transparent 9%),
    radial-gradient(circle at 62% 36%, #8a4b1f 0 7%, transparent 8%),
    radial-gradient(circle at 47% 63%, #6c3a18 0 7%, transparent 8%),
    radial-gradient(circle at 67% 69%, #9a5423 0 5%, transparent 6%),
    linear-gradient(180deg, #f5c96e, #d68b35);
  box-shadow: inset 0 2px 0 rgba(255, 246, 199, 0.62);
}

body.layout-phone.ui-playing [data-touch-icon="sword"] .touchBtnGlyph::before,
body.layout-tablet.ui-playing [data-touch-icon="sword"] .touchBtnGlyph::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 1px;
  width: 7px;
  height: 34px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(90deg, #ffffff, #9edcff 44%, #407aac);
  box-shadow: 0 0 0 1px rgba(38, 83, 126, 0.36);
  transform: rotate(43deg);
  transform-origin: 50% 78%;
}

body.layout-phone.ui-playing [data-touch-icon="sword"] .touchBtnGlyph::after,
body.layout-tablet.ui-playing [data-touch-icon="sword"] .touchBtnGlyph::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 25px;
  width: 25px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #724018, #f0b64f, #724018);
  box-shadow: 9px 7px 0 -2px #7d4318;
  transform: rotate(43deg);
}

body.layout-phone.ui-playing [data-touch-icon="spin"] .touchBtnGlyph::before,
body.layout-tablet.ui-playing [data-touch-icon="spin"] .touchBtnGlyph::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 4px solid #328f7e;
  border-left-color: transparent;
  border-bottom-color: #66d6b1;
  border-radius: 999px;
  transform: rotate(-34deg);
}

body.layout-phone.ui-playing [data-touch-icon="spin"] .touchBtnGlyph::after,
body.layout-tablet.ui-playing [data-touch-icon="spin"] .touchBtnGlyph::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 11px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #328f7e;
  transform: rotate(10deg);
}

body.layout-phone.ui-playing [data-touch-icon="wall"] .touchBtnGlyph::before,
body.layout-tablet.ui-playing [data-touch-icon="wall"] .touchBtnGlyph::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 8px;
  border: 2px solid rgba(87, 69, 133, 0.42);
  background:
    linear-gradient(90deg, transparent 48%, rgba(87, 69, 133, 0.42) 49% 52%, transparent 53%),
    repeating-linear-gradient(0deg, #d9c7ff 0 8px, #8f76df 9px 11px, #c1adff 12px 20px);
}

body.layout-phone.ui-playing [data-touch-icon="build"] .touchBtnGlyph::before,
body.layout-phone.ui-playing [data-touch-icon="slot"] .touchBtnGlyph::before,
body.layout-tablet.ui-playing [data-touch-icon="build"] .touchBtnGlyph::before,
body.layout-tablet.ui-playing [data-touch-icon="slot"] .touchBtnGlyph::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 3px solid #7a5a27;
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 42%, rgba(122, 90, 39, 0.35) 43% 57%, transparent 58%),
    linear-gradient(0deg, transparent 42%, rgba(122, 90, 39, 0.35) 43% 57%, transparent 58%),
    rgba(255, 221, 138, 0.58);
}

body.layout-phone.ui-playing [data-touch-icon="items"] .touchBtnGlyph::before,
body.layout-tablet.ui-playing [data-touch-icon="items"] .touchBtnGlyph::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 22px;
  height: 30px;
  clip-path: polygon(50% 0, 91% 24%, 76% 100%, 24% 100%, 9% 24%);
  background: linear-gradient(135deg, #ffffff 0 18%, #84f2dc 19% 48%, #5a9cff 49% 74%, #8c5ae8 75%);
  box-shadow: 0 0 0 2px rgba(72, 71, 158, 0.34);
}

body.layout-phone.ui-playing [data-touch-icon="sneak"] .touchBtnGlyph::before,
body.layout-tablet.ui-playing [data-touch-icon="sneak"] .touchBtnGlyph::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 13px;
  width: 21px;
  height: 18px;
  border-radius: 56% 56% 48% 48%;
  background: #5ca66d;
  box-shadow:
    -8px -7px 0 -3px #5ca66d,
    -1px -11px 0 -4px #5ca66d,
    7px -8px 0 -3px #5ca66d,
    inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

body.layout-phone.ui-playing [data-touch-icon="turbo"] .touchBtnGlyph::before,
body.layout-tablet.ui-playing [data-touch-icon="turbo"] .touchBtnGlyph::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 31px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 52%, #f3f4df 0 28%, transparent 29%),
    radial-gradient(circle at 53% 38%, #fff7ce 0 31%, transparent 32%),
    radial-gradient(circle at 74% 58%, #e8ffe7 0 24%, transparent 25%),
    linear-gradient(180deg, #f7f8de, #9be8b5);
  box-shadow:
    -6px 2px 0 -1px rgba(171, 230, 173, 0.82),
    4px 9px 0 -6px rgba(112, 180, 123, 0.76);
}

body.layout-phone.ui-playing [data-touch-icon="turbo"] .touchBtnGlyph::after,
body.layout-tablet.ui-playing [data-touch-icon="turbo"] .touchBtnGlyph::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 3px;
  width: 15px;
  height: 26px;
  clip-path: polygon(58% 0, 100% 0, 69% 39%, 96% 39%, 31% 100%, 46% 55%, 12% 55%);
  background: linear-gradient(180deg, #fff082, #f2a636);
  filter: drop-shadow(0 1px 0 rgba(96, 56, 11, 0.34));
}

/* Final phone HUD compression for the controller skin: keep status visible without covering play. */
body.layout-phone.ui-playing .hudInner {
  top: calc(6px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  right: calc(116px + env(safe-area-inset-right));
  display: grid;
  grid-template-columns: minmax(72px, 86px) minmax(0, 1fr);
  gap: 4px;
  align-items: start;
}

body.layout-phone.ui-playing .hudCard {
  padding: 4px 6px;
}

body.layout-phone.ui-playing .hudCardHealth {
  min-width: 0;
  width: 100%;
  border-radius: 22px;
}

body.layout-phone.ui-playing .hudCardHealth .hudCardTop {
  margin-bottom: 2px;
}

body.layout-phone.ui-playing .hudCardHealth .hudBadge {
  min-width: 27px;
  height: 18px;
  font-size: 10px;
}

body.layout-phone.ui-playing .hudCardHealth .hudHearts {
  min-height: 13px;
  gap: 2px;
}

body.layout-phone.ui-playing .hudCardHealth .hudHeart {
  width: 13px;
  height: 13px;
}

body.layout-phone.ui-playing .hudCardAmmo {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: auto 36px;
  gap: 4px;
  align-items: center;
  padding: 4px;
  border-radius: 17px;
}

body.layout-phone.ui-playing .hudCardAmmo .hudCardTop {
  min-height: 26px;
  padding: 0 6px;
}

body.layout-phone.ui-playing .hudCardAmmo .hudBadge {
  min-width: 20px;
  height: 20px;
  font-size: 13px;
}

body.layout-phone.ui-playing .hudCardAmmo .hudMeta {
  font-size: 12px;
}

body.layout-phone.ui-playing .hudQuestBtn {
  width: 36px;
  min-width: 36px;
  min-height: 30px;
  padding: 0;
  font-size: 12px;
}

body.layout-phone.ui-playing .hudPhoneLoadout {
  grid-column: 1 / -1;
  min-height: 28px;
}

body.layout-phone.ui-playing .hudPhoneChip {
  max-width: 58px;
  min-height: 28px;
  gap: 2px;
  padding: 0 5px;
}

body.layout-phone.ui-playing .hudPhoneChipKey {
  min-width: 16px;
  height: 16px;
  font-size: 9px;
}

body.layout-phone.ui-playing .hudPhoneChip strong {
  font-size: 10px;
}

body.layout-phone.layout-portrait.ui-playing .objectiveBanner {
  top: calc(122px + env(safe-area-inset-top));
  max-width: min(224px, calc(100vw - 132px));
}

body.layout-phone.layout-portrait.ui-playing .hudCardAmmo {
  grid-column: 1 / -1;
  width: min(250px, calc(100vw - 132px));
  max-width: 100%;
}

body.layout-phone.layout-landscape.ui-playing .hudInner {
  right: calc(124px + env(safe-area-inset-right));
  grid-template-columns: minmax(72px, 86px) minmax(160px, 260px);
}

body.layout-phone.layout-landscape.ui-playing .hudCardAmmo {
  grid-column: auto;
  width: 100%;
  max-width: none;
}

body.layout-phone.layout-landscape.ui-playing .objectiveBanner {
  top: calc(94px + env(safe-area-inset-top));
  max-width: min(310px, calc(100vw - 360px));
}

/* Results, High Scores, guest entry, and compact gameplay status. */
.authGuestRoute {
  margin-top: 2px;
  text-align: center;
}

.authGuestDivider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 4px 0 9px;
  color: rgba(43, 36, 64, 0.46);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.authGuestDivider::before,
.authGuestDivider::after {
  content: "";
  height: 1px;
  background: rgba(43, 36, 64, 0.12);
}

.authGuestBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  border-color: rgba(43, 36, 64, 0.16);
  background: rgba(255, 255, 255, 0.78);
  font-weight: 950;
}

.authGuestRoute p {
  margin: 6px 0 0;
  color: rgba(43, 36, 64, 0.58);
  font-size: 10px;
  line-height: 1.3;
}

.postLevelPanel {
  --post-level-accent: #63cdae;
  --post-level-world-paper: #f7f1dd;
  --post-level-world-ink: #2e3f56;
  --post-level-world-accent: #ffca68;
  --post-level-world-accent2: #6ac7a8;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 18px;
  border-color: color-mix(in oklab, var(--post-level-accent) 28%, rgba(43, 36, 64, 0.14));
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in oklab, var(--post-level-world-accent2) 13%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in oklab, var(--post-level-accent) 9%, rgba(255, 255, 255, 0.98)), rgba(255, 255, 255, 0.9) 52%, color-mix(in oklab, var(--post-level-world-paper) 13%, rgba(247, 250, 255, 0.88)));
  box-shadow: 0 18px 42px rgba(43, 36, 64, 0.17);
}

.postLevelPanel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--post-level-accent);
}

.postLevelPanel[data-medal="bronze"] { --post-level-accent: #c98a58; }
.postLevelPanel[data-medal="silver"] { --post-level-accent: #91a9bf; }
.postLevelPanel[data-medal="gold"] { --post-level-accent: #e8b83f; }
.postLevelPanel[data-medal="diamond"] { --post-level-accent: #66c6e8; }

.postLevelTop {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 52px auto;
  gap: 14px;
  align-items: center;
}

.postLevelWohoo {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 7px 7px rgba(43, 36, 64, 0.18));
}

.postLevelWohoo img {
  display: block;
  width: 100%;
  height: 100%;
}

.postLevelMedal {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 7px;
  border: 1px solid color-mix(in oklab, var(--post-level-accent) 44%, rgba(43, 36, 64, 0.12));
  border-radius: 50%;
  background: color-mix(in oklab, var(--post-level-accent) 16%, rgba(255, 255, 255, 0.92));
  box-shadow: 0 8px 20px color-mix(in oklab, var(--post-level-accent) 22%, transparent);
}

.postLevelMedal svg {
  width: 100%;
  height: 100%;
}

.postLevelHeading {
  min-width: 0;
}

.postLevelTitle {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.08;
}

.postLevelMedalName {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 5px;
  color: color-mix(in oklab, var(--post-level-accent) 62%, #302640);
  font-size: 13px;
  font-weight: 950;
}

.postLevelMedalName span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: rgba(43, 36, 64, 0.58);
  font-size: 9px;
}

.postLevelXp {
  min-width: 126px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
}

.postLevelBossLine {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--post-level-accent);
  background: color-mix(in oklab, var(--post-level-accent) 9%, rgba(255, 255, 255, 0.72));
  font-size: 11px;
}

.postLevelBossLine span {
  color: rgba(43, 36, 64, 0.64);
}

.postLevelDiscovery {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-top: 11px;
  padding: 8px 10px;
  border-left: 3px solid var(--post-level-world-accent2);
  background: color-mix(in oklab, var(--post-level-world-paper) 18%, rgba(255, 255, 255, 0.72));
}

.postLevelStory {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border-left: 3px solid color-mix(in oklab, var(--post-level-world-accent2) 72%, #428b78);
  background: color-mix(in oklab, var(--post-level-world-paper) 34%, rgba(255, 255, 255, 0.84));
}

.postLevelStoryGlyph {
  display: grid;
  place-items: center;
  color: var(--post-level-world-ink);
}

.postLevelStoryGlyph .wohooIcon {
  width: 26px;
  height: 26px;
}

.postLevelStoryCopy {
  min-width: 0;
}

.postLevelStoryCopy small,
.postLevelStoryCopy strong,
.postLevelStoryCopy > span {
  display: block;
}

.postLevelStoryCopy small {
  color: rgba(43, 36, 64, 0.56);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.postLevelStoryCopy strong {
  margin-top: 2px;
  color: color-mix(in oklab, var(--post-level-world-ink) 84%, #211b31);
  font-size: 12px;
  line-height: 1.35;
}

.postLevelStoryCopy > span {
  margin-top: 2px;
  color: rgba(43, 36, 64, 0.62);
  font-size: 9px;
}

.postLevelWordCard {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 5px 8px;
  border: 1px solid rgba(59, 111, 101, 0.22);
  border-radius: 8px;
  background: rgba(236, 251, 245, 0.92);
  color: #285f54;
  text-align: left;
  cursor: pointer;
}

.postLevelWordCard .wohooIcon {
  width: 19px;
  height: 19px;
}

.postLevelWordCard b,
.postLevelWordCard small {
  display: block;
  white-space: nowrap;
}

.postLevelWordCard b { font-size: 10px; }
.postLevelWordCard small { color: rgba(43, 36, 64, 0.6); font-size: 8px; }
.postLevelWordCard:focus-visible { outline: 3px solid rgba(67, 181, 149, 0.38); outline-offset: 2px; }

.postLevelDiscoveryGlyph {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--post-level-world-accent) 58%, rgba(255, 255, 255, 0.82));
  color: color-mix(in oklab, var(--post-level-world-ink) 86%, #111);
}

.postLevelDiscoveryGlyph .wohooIcon {
  width: 19px;
  height: 19px;
}

.postLevelDiscovery strong,
.postLevelDiscovery small {
  display: block;
}

.postLevelDiscovery strong {
  color: color-mix(in oklab, var(--post-level-world-ink) 80%, #2b2440);
  font-size: 11px;
}

.postLevelDiscovery small {
  margin-top: 2px;
  color: rgba(43, 36, 64, 0.66);
  font-size: 10px;
}

.postLevelGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 0;
  margin-top: 15px;
  border-top: 1px solid rgba(43, 36, 64, 0.1);
  border-bottom: 1px solid rgba(43, 36, 64, 0.1);
}

.postLevelPerformance,
.postLevelLeaderboard {
  min-width: 0;
  padding: 14px 0;
}

.postLevelPerformance {
  padding-right: 16px;
  border-right: 1px solid rgba(43, 36, 64, 0.1);
}

.postLevelLeaderboard {
  padding-left: 16px;
}

.postLevelTimeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.postLevelTimeRow > div:first-child span,
.postLevelRewards span {
  display: block;
  color: rgba(43, 36, 64, 0.56);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.postLevelTimeRow > div:first-child strong {
  display: block;
  margin-top: 2px;
  color: #241d38;
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.postLevelDelta {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.postLevelDelta strong {
  color: rgba(43, 36, 64, 0.82);
  font-size: 12px;
}

.postLevelDelta span {
  color: rgba(43, 36, 64, 0.58);
  font-size: 10px;
}

.postLevelDelta.is-best strong {
  color: #18715c;
}

.postLevelChallenge {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-top: 13px;
  padding: 9px 10px;
  border: 1px solid color-mix(in oklab, var(--post-level-accent) 30%, rgba(43, 36, 64, 0.1));
  border-radius: 10px;
  background: color-mix(in oklab, var(--post-level-accent) 8%, rgba(255, 255, 255, 0.76));
}

.postLevelChallenge.isNearMiss {
  border-color: color-mix(in oklab, #e8b83f 56%, rgba(43, 36, 64, 0.12));
  background: rgba(255, 245, 207, 0.62);
}

.postLevelChallengeGlyph {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--post-level-accent);
  color: #fff;
  font-size: 12px;
}

.postLevelChallenge strong,
.postLevelChallenge small {
  display: block;
}

.postLevelChallenge strong {
  color: rgba(43, 36, 64, 0.92);
  font-size: 12px;
}

.postLevelChallenge small {
  margin-top: 2px;
  color: rgba(43, 36, 64, 0.62);
  font-size: 10px;
}

.postLevelCoaching {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 8px;
  border-left: 2px solid color-mix(in oklab, var(--post-level-world-accent2) 72%, #5c7b71);
  background: color-mix(in oklab, var(--post-level-world-paper) 78%, white);
  color: rgba(43, 36, 64, 0.7);
}

.postLevelCoaching > span:first-child {
  display: grid;
  place-items: center;
  color: var(--post-level-world-ink);
}

.postLevelCoaching svg {
  width: 19px;
  height: 19px;
}

.postLevelCoaching strong,
.postLevelCoaching small {
  display: block;
}

.postLevelCoaching strong {
  color: rgba(43, 36, 64, 0.9);
  font-size: 11px;
}

.postLevelCoaching small {
  margin-top: 1px;
  font-size: 9px;
}

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

.postLevelRewards > div {
  min-width: 0;
  padding: 7px 8px;
  border-left: 2px solid color-mix(in oklab, var(--post-level-accent) 42%, transparent);
  background: rgba(255, 255, 255, 0.54);
}

.postLevelRewards strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(43, 36, 64, 0.92);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postLevelSync {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: rgba(43, 36, 64, 0.62);
  font-size: 9px;
  font-weight: 850;
}

.postLevelSync > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8390a5;
}

.postLevelSync.isVerified > span { background: #39aa7f; }
.postLevelSync.isRejected > span { background: #d96b72; }
.postLevelSync.isGuest > span { background: #d6a238; }
.postLevelSync.isChecking > span { animation: postLevelChecking 900ms ease-in-out infinite alternate; }

.postLevelEconomy {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(43, 36, 64, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.56);
  color: rgba(43, 36, 64, 0.72);
  text-align: left;
  cursor: pointer;
}

.postLevelEconomy > span:first-child {
  display: grid;
  place-items: center;
  color: var(--post-level-world-ink);
}

.postLevelEconomy svg {
  width: 20px;
  height: 20px;
}

.postLevelEconomy strong,
.postLevelEconomy small {
  display: block;
}

.postLevelEconomy strong {
  color: rgba(43, 36, 64, 0.9);
  font-size: 10px;
}

.postLevelEconomy small {
  margin-top: 1px;
  font-size: 9px;
}

.postLevelEconomy:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--post-level-world-accent2) 52%, transparent);
  outline-offset: 2px;
}

@keyframes postLevelChecking {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.postLevelDetails {
  margin-top: 9px;
  color: rgba(43, 36, 64, 0.7);
  font-size: 10px;
}

.postLevelDetails summary {
  min-height: 28px;
  cursor: pointer;
  font-weight: 900;
}

.postLevelDetailRows {
  display: grid;
  gap: 4px;
  padding: 4px 0 2px;
}

.postLevelDetailRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(43, 36, 64, 0.08);
}

.postLevelDetailRow strong {
  max-width: 210px;
  overflow: hidden;
  color: rgba(43, 36, 64, 0.82);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postLevelLeaderboardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.postLevelLeaderboardHead span,
.postLevelLeaderboardHead strong {
  display: block;
}

.postLevelLeaderboardHead span {
  color: rgba(43, 36, 64, 0.56);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.postLevelLeaderboardHead strong {
  margin-top: 2px;
  font-size: 13px;
}

.postLevelLeaderboardHead .kidIconBtn {
  min-width: 36px;
  width: 36px;
  min-height: 36px;
  padding: 0;
}

.postLevelRival {
  margin-top: 7px;
  padding: 6px 8px;
  border-left: 2px solid #e8b83f;
  background: rgba(255, 245, 207, 0.48);
  color: rgba(43, 36, 64, 0.74);
  font-size: 10px;
  font-weight: 850;
}

.postLevelGuestCta {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(54, 155, 127, 0.26);
  border-radius: 10px;
  background: rgba(231, 255, 247, 0.66);
}

.postLevelGuestGlyph {
  width: 40px;
  height: 40px;
}

.postLevelGuestGlyph svg {
  width: 100%;
  height: 100%;
}

.postLevelGuestCopy strong,
.postLevelGuestCopy span {
  display: block;
}

.postLevelGuestCopy strong {
  color: #215f50;
  font-size: 12px;
}

.postLevelGuestCopy span {
  margin-top: 2px;
  color: rgba(43, 36, 64, 0.66);
  font-size: 10px;
  line-height: 1.35;
}

.postLevelGuestActions {
  display: flex;
  gap: 6px;
}

.postLevelGuestActions .btn {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 10px;
}

.postLevelActions {
  align-items: stretch;
  margin-top: 13px;
}

.postLevelActions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
}

.postLevelPrimary {
  min-width: min(100%, 230px);
  border-color: color-mix(in oklab, var(--post-level-accent) 58%, rgba(43, 36, 64, 0.16));
  background: color-mix(in oklab, var(--post-level-accent) 52%, rgba(255, 255, 255, 0.72));
  font-weight: 950;
}

.postLevelChase {
  background: linear-gradient(180deg, rgba(255, 221, 111, 0.94), rgba(244, 187, 57, 0.76));
}

.postLevelPanel.isCelebrating .postLevelMedal {
  animation: postLevelMedalReveal 820ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.postLevelPanel.isCelebrating .postLevelWohoo {
  animation: postLevelWohooCelebrate 900ms 90ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.postLevelPanel.isCelebrating .postLevelChallenge {
  animation: postLevelChallengeReveal 520ms 180ms ease-out both;
}

@keyframes postLevelMedalReveal {
  0% { opacity: 0; transform: scale(0.58) rotate(-12deg); }
  68% { opacity: 1; transform: scale(1.1) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes postLevelChallengeReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes postLevelWohooCelebrate {
  0% { opacity: 0; transform: translateY(12px) scale(0.72); }
  54% { opacity: 1; transform: translateY(-5px) scale(1.08); }
  76% { transform: translateY(1px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.worldLeaderboardPreview {
  width: min(100%, 680px);
}

.worldLeaderboardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.worldLeaderboardHead > span {
  display: grid;
  gap: 1px;
}

.worldLeaderboardHead b {
  color: rgba(43, 36, 64, 0.9);
  font-size: 11px;
}

.worldLeaderboardHead small {
  color: rgba(43, 36, 64, 0.56);
  font-size: 9px;
}

.worldLeaderboardHead > strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: rgba(43, 36, 64, 0.74);
  font-size: 10px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldLeaderboardOpen {
  flex: 0 0 auto;
  min-width: 30px;
  width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(43, 36, 64, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.worldLeaderboardColumns,
.worldLeaderboardRow {
  display: grid;
  grid-template-columns: 38px minmax(80px, 1fr) 80px 66px 30px;
  gap: 7px;
  align-items: center;
}

.worldLeaderboardColumns {
  min-height: 20px;
  color: rgba(43, 36, 64, 0.46);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.worldLeaderboardRow {
  min-height: 31px;
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}

.worldLeaderboardRow.isMe {
  box-shadow: inset 3px 0 0 #5dc5a5;
}

.worldLeaderboardName,
.worldLeaderboardTime,
.worldLeaderboardScore,
.worldLeaderboardMedal {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldLeaderboardScore {
  color: rgba(43, 36, 64, 0.66);
  text-align: right;
}

.worldLeaderboardMedal {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.worldLeaderboardMedal svg {
  width: 100%;
  height: 100%;
}

.worldLeaderboardSeparator {
  min-height: 20px;
  color: rgba(43, 36, 64, 0.4);
  font-size: 10px;
  text-align: center;
}

.leaderboardModalCard {
  width: min(760px, calc(100vw - 48px));
  max-height: min(86vh, 820px);
}

.leaderboardModalHeader {
  position: sticky;
  top: -14px;
  z-index: 2;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(43, 36, 64, 0.1);
}

.leaderboardModalBody {
  min-height: 120px;
}

.leaderboardClassControl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin: 2px 0 12px;
  padding: 3px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  border-radius: 7px;
  background: rgba(233, 236, 247, 0.82);
}

.leaderboardClassControl button {
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(43, 36, 64, 0.64);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.leaderboardClassControl button.isActive {
  background: #fff;
  color: #265f53;
  box-shadow: 0 2px 7px rgba(43, 36, 64, 0.12);
}

.leaderboardClassControl button:focus-visible {
  outline: 3px solid rgba(74, 188, 157, 0.36);
  outline-offset: 1px;
}

.leaderboardModalLoading {
  padding: 36px 12px;
  color: rgba(43, 36, 64, 0.62);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.leaderboardModalSummary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  margin: 2px 0 9px;
  color: rgba(43, 36, 64, 0.58);
  font-size: 10px;
}

.leaderboardModalSummary strong {
  color: #7d6320;
}

.leaderboardModalBody .worldLeaderboardRow {
  min-height: 38px;
  font-size: 12px;
}

.worldNodeRank {
  position: absolute;
  right: -5px;
  bottom: -6px;
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 17px;
  padding: 0 4px;
  border: 1px solid rgba(43, 36, 64, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #2d6758;
  font-size: 8px;
  font-weight: 950;
  box-shadow: 0 3px 8px rgba(43, 36, 64, 0.2);
}

.hudPhoneStatus {
  display: none;
}

body.layout-phone.ui-playing #hud .hudCardAmmo > .hudPhoneStatus {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.78);
  color: rgba(43, 36, 64, 0.92);
}

body.layout-phone.ui-playing .hudPhoneStatus > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-size: 10px;
}

body.layout-phone.ui-playing .hudPhoneStatus strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.layout-phone.ui-playing .hudCardAmmo {
  grid-template-columns: auto minmax(72px, 1fr) 36px;
}

body.layout-phone.ui-playing .hudPhoneLoadout {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .postLevelPanel {
    display: flex;
    flex-direction: column;
    padding: 13px;
  }

  .postLevelTop {
    order: 1;
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    gap: 10px;
  }

  .postLevelWohoo {
    width: 40px;
    height: 40px;
  }

  .postLevelMedal {
    width: 54px;
    height: 54px;
  }

  .postLevelTitle {
    font-size: 18px;
  }

  .postLevelXp {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 6px 8px;
    text-align: left;
  }

  .postLevelXp span {
    display: inline;
    margin-left: 5px;
  }

  .postLevelGrid {
    display: contents;
  }

  .postLevelPerformance {
    order: 3;
    margin-top: 12px;
    padding-top: 13px;
    padding-right: 0;
    border-right: 0;
    border-top: 1px solid rgba(43, 36, 64, 0.1);
  }

  .postLevelLeaderboard {
    order: 6;
    margin-top: 12px;
    padding-left: 0;
    border-top: 1px solid rgba(43, 36, 64, 0.1);
    border-bottom: 1px solid rgba(43, 36, 64, 0.1);
  }

  .postLevelBossLine { order: 2; }
  .postLevelStory { order: 2; }
  .postLevelDiscovery { order: 2; }
  .postLevelActions { order: 4; }
  .postLevelGuestCta { order: 5; }

  .postLevelGuestCta {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .postLevelStory {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .postLevelWordCard {
    grid-column: 1 / -1;
    width: 100%;
  }

  .postLevelGuestGlyph {
    width: 34px;
    height: 34px;
  }

  .postLevelGuestActions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

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

  .postLevelActions .btn:first-child {
    grid-column: 1 / -1;
  }

  .postLevelPrimary {
    min-width: 0;
  }

  .leaderboardModal {
    padding: 8px;
  }

  .leaderboardModalCard {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 10px;
    border-radius: 12px;
  }

  body.layout-phone .worldLeaderboardColumns,
  body.layout-phone .worldLeaderboardRow,
  .leaderboardModalBody .worldLeaderboardColumns,
  .leaderboardModalBody .worldLeaderboardRow {
    grid-template-columns: 31px minmax(66px, 1fr) 69px 52px 25px;
    gap: 4px;
  }

  .worldLeaderboardColumns {
    font-size: 7px;
  }

  .worldLeaderboardRow {
    font-size: 9px;
  }

  body.layout-phone .worldLeaderboardMedal {
    display: grid;
  }
}

@media (max-width: 430px) {
  .postLevelTimeRow > div:first-child strong {
    font-size: 25px;
  }

  .postLevelRewards {
    gap: 4px;
  }

  .postLevelRewards > div {
    padding: 6px;
  }

  .postLevelRewards strong {
    font-size: 12px;
  }

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

  .postLevelActions .btn:first-child {
    grid-column: 1 / -1;
  }

  body.layout-phone.ui-playing .hudInner {
    right: calc(110px + env(safe-area-inset-right));
    grid-template-columns: minmax(70px, 82px) minmax(0, 1fr);
  }

  body.layout-phone.ui-playing .hudCardAmmo {
    grid-template-columns: auto minmax(66px, 1fr) 34px;
  }

  body.layout-phone.ui-playing .hudQuestBtn {
    width: 34px;
    min-width: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .postLevelPanel.isCelebrating .postLevelMedal,
  .postLevelPanel.isCelebrating .postLevelWohoo,
  .postLevelPanel.isCelebrating .postLevelChallenge,
  .postLevelSync.isChecking > span {
    animation: none;
  }

  .shopPreviewProjectile i {
    animation: none;
    opacity: 1;
    transform: translateX(32px);
  }
}

body.reduced-motion .shopPreviewProjectile i {
  animation: none;
  opacity: 1;
  transform: translateX(32px);
}

/* iPhone landscape production profile. The art is cropped without changing the source SVGs. */
:root {
  --wohoo-safe-top: env(safe-area-inset-top, 0px);
  --wohoo-safe-right: env(safe-area-inset-right, 0px);
  --wohoo-safe-bottom: env(safe-area-inset-bottom, 0px);
  --wohoo-safe-left: env(safe-area-inset-left, 0px);
  --wohoo-touch-joystick-scale: 1;
  --wohoo-touch-action-scale: 1.05;
}

body.layout-phone.layout-landscape.ui-playing {
  --wohoo-phone-left-skin-w: clamp(220px, min(29vw, 63vh), 245px);
  --wohoo-phone-right-skin-w: clamp(196px, min(26.7vw, 59vh), 225px);
  --wohoo-phone-top-skin-w: 176px;
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinTopLeft {
  display: none !important;
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinTopRight {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 11px);
  right: calc(var(--layout-vv-right-gap, 0px) + max(0px, var(--wohoo-safe-right) - 8px));
  width: var(--wohoo-phone-top-skin-w);
  aspect-ratio: 240 / 100;
  background-image: url("assets/controller-skin/wohoo_corner_top_right_phone_landscape.svg");
  opacity: 0.62;
  filter: drop-shadow(0 6px 12px rgba(54, 30, 8, 0.14));
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinBottomLeft {
  left: calc(var(--layout-vv-left, 0px) + max(0px, var(--wohoo-safe-left) - 19px));
  bottom: calc(var(--layout-vv-bottom-gap, 0px) + var(--wohoo-safe-bottom) + 1px);
  width: var(--wohoo-phone-left-skin-w);
  aspect-ratio: 480 / 310;
  background-image: url("assets/controller-skin/wohoo_corner_bottom_left_phone_landscape.svg");
  opacity: 0.66;
  filter: drop-shadow(0 8px 14px rgba(54, 30, 8, 0.17));
  -webkit-mask-image: linear-gradient(90deg, #000 0 74%, rgba(0, 0, 0, 0.7) 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 74%, rgba(0, 0, 0, 0.7) 86%, transparent 100%);
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinBottomRight {
  right: calc(var(--layout-vv-right-gap, 0px) + max(0px, var(--wohoo-safe-right) - 7px) + 1px);
  bottom: calc(var(--layout-vv-bottom-gap, 0px) + max(0px, var(--wohoo-safe-bottom) - 10px) + 1px);
  width: var(--wohoo-phone-right-skin-w);
  aspect-ratio: 400 / 330;
  background-image: url("assets/controller-skin/wohoo_corner_bottom_right_phone_landscape.svg");
  opacity: 0.66;
  filter: drop-shadow(0 8px 14px rgba(54, 30, 8, 0.17));
  -webkit-mask-image: linear-gradient(270deg, #000 0 78%, rgba(0, 0, 0, 0.72) 89%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0 78%, rgba(0, 0, 0, 0.72) 89%, transparent 100%);
}

body.layout-phone.layout-landscape.ui-playing .touchControls.isTouchActive .controllerSkinBottomLeft,
body.layout-phone.layout-landscape.ui-playing .touchControls.isTouchActive .controllerSkinBottomRight {
  opacity: 0.82;
  filter: drop-shadow(0 9px 16px rgba(54, 30, 8, 0.2));
}

body.layout-phone.layout-landscape.ui-playing .touchControls {
  top: var(--layout-vv-top, 0px);
  right: var(--layout-vv-right-gap, 0px);
  bottom: var(--layout-vv-bottom-gap, 0px);
  left: var(--layout-vv-left, 0px);
  overflow: hidden;
}

body.layout-phone.layout-landscape.ui-playing .touchBtn::before {
  width: min(var(--wohoo-touch-face, calc(100% - 6px)), calc(100% - 6px));
  height: min(var(--wohoo-touch-face, calc(100% - 6px)), calc(100% - 6px));
  border-width: 1.5px;
  box-shadow:
    0 5px 10px rgba(80, 42, 6, 0.22),
    inset 0 -2px 0 rgba(137, 74, 17, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body.layout-phone.layout-landscape.ui-playing .touchBtnSneak::before,
body.layout-phone.layout-landscape.ui-playing .touchBtnUtility::before,
body.layout-phone.layout-landscape.ui-playing .touchBtnTurbo::before {
  width: min(var(--wohoo-touch-face, calc(100% - 4px)), calc(100% - 4px));
  height: min(var(--wohoo-touch-face, calc(100% - 4px)), calc(100% - 4px));
}

body.layout-phone.layout-landscape.ui-playing .joyKnob {
  width: var(--wohoo-joy-knob);
  height: var(--wohoo-joy-knob);
  margin-left: calc(var(--wohoo-joy-knob) * -0.5);
  margin-top: calc(var(--wohoo-joy-knob) * -0.5);
  transform: translate(var(--wohoo-joy-x, 0px), var(--wohoo-joy-y, 0px));
}

body.layout-phone.layout-landscape.ui-playing .pauseBtn,
body.layout-phone.layout-landscape.ui-playing .gameSettingsBtn,
body.layout-phone.layout-landscape.ui-playing .homeBtn {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 8px);
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 17px;
}

body.layout-phone.layout-landscape.ui-playing .pauseBtn::before,
body.layout-phone.layout-landscape.ui-playing .gameSettingsBtn::before,
body.layout-phone.layout-landscape.ui-playing .homeBtn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(90, 59, 24, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 4px 10px rgba(60, 38, 14, 0.13);
}

body.layout-phone.layout-landscape.ui-playing .pauseBtn {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 30px);
}

body.layout-phone.layout-landscape.ui-playing .gameSettingsBtn {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 72px);
}

body.layout-phone.layout-landscape.ui-playing .homeBtn {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 114px);
}

body.layout-phone.layout-landscape.ui-playing .hudInner {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 6px);
  right: auto;
  left: calc(var(--layout-vv-left, 0px) + var(--wohoo-safe-left) + 8px);
  width: min(292px, calc(var(--layout-vw, 100vw) - var(--wohoo-safe-left) - var(--wohoo-safe-right) - 196px));
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 4px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth {
  width: 62px;
  min-width: 62px;
  min-height: 48px;
  padding: 4px 6px;
  border-radius: 14px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth .hudCardTop {
  min-height: 17px;
  margin: 0;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth .hudBadge {
  min-width: 22px;
  height: 17px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth .hudHearts {
  min-height: 14px;
  margin-top: 2px;
  gap: 2px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth .hudHeart {
  width: 13px;
  height: 13px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardAmmo {
  grid-column: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 52px;
  padding: 3px;
  display: grid;
  grid-template-columns: auto minmax(74px, 1fr) 32px;
  grid-template-rows: 23px 23px;
  gap: 3px;
  border-radius: 14px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardAmmo .hudCardTop {
  grid-column: 1;
  grid-row: 1;
  min-height: 23px;
  height: 23px;
  padding: 0 5px;
}

body.layout-phone.layout-landscape.ui-playing #hud .hudCardAmmo > .hudPhoneStatus {
  grid-column: 2;
  grid-row: 1;
  min-height: 23px;
  height: 23px;
  padding: 0 5px;
}

body.layout-phone.layout-landscape.ui-playing .hudQuestBtn {
  grid-column: 3;
  grid-row: 1;
  width: 32px;
  min-width: 32px;
  min-height: 23px;
  height: 23px;
  padding: 0;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneLoadout {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 23px;
  height: 23px;
  gap: 3px;
  overflow: hidden;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneChip {
  min-height: 23px;
  height: 23px;
  max-width: 62px;
  padding: 0 4px;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneChipKey {
  min-width: 15px;
  height: 15px;
  font-size: 8px;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneChip strong {
  font-size: 9px;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneChip[data-hud-slot="ammo"],
body.layout-phone.layout-landscape.ui-playing .hudPhoneChip[data-hud-slot="ability-primary"],
body.layout-phone.layout-landscape.ui-playing .hudPhoneChip[data-hud-slot="ability-secondary"] {
  display: none;
}

body.layout-phone.layout-landscape.ui-playing .objectiveBanner {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 64px);
  width: min(208px, calc(var(--layout-vw, 100vw) - 390px));
  max-width: 208px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255, 253, 246, 0.86);
  box-shadow: 0 6px 14px rgba(50, 34, 11, 0.11);
}

body.layout-phone.layout-landscape.ui-playing .objectiveBannerLevel,
body.layout-phone.layout-landscape.ui-playing .objectiveBannerDetail {
  display: none;
}

body.layout-phone.layout-landscape.ui-playing .objectiveBannerTitle {
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Device-local touch sizing. Scaling the skin and mapped controls together preserves socket alignment. */
body:is(.layout-phone, .layout-tablet).ui-playing .controllerSkinBottomLeft {
  transform: scale(var(--wohoo-touch-joystick-scale));
  transform-origin: left bottom;
}

body:is(.layout-phone, .layout-tablet).ui-playing .controllerSkinBottomRight {
  transform: scale(var(--wohoo-touch-action-scale));
  transform-origin: right bottom;
}

.settingsTouchRow {
  display: none;
}

body:is(.layout-phone, .layout-tablet) .settingsTouchRow {
  display: grid;
}

body:is(.layout-phone, .layout-tablet) .settingsModal {
  position: fixed;
  z-index: 120;
}

body:is(.layout-phone, .layout-tablet).settings-modal-open .hud {
  visibility: hidden;
}

body.layout-tablet.settings-modal-open .touchControls {
  display: block !important;
  opacity: 0.38;
  pointer-events: none !important;
}

body.layout-tablet.settings-modal-open .touchControls .joyBase,
body.layout-tablet.settings-modal-open .touchControls .touchBtn {
  pointer-events: none !important;
}

@media (orientation: landscape) {
  body.layout-phone .settingsModalCard {
    width: min(620px, calc(var(--layout-vw, 100vw) - var(--wohoo-safe-left) - var(--wohoo-safe-right) - 24px));
    max-height: calc(var(--layout-vh, 100dvh) - var(--wohoo-safe-top) - var(--wohoo-safe-bottom) - 12px);
    padding: 10px;
    border-radius: 14px;
  }

  body.layout-phone .settingsModalHeader {
    margin-bottom: 6px;
  }

  body.layout-phone .settingsPanel {
    overflow: auto;
  }

  body.layout-phone .settingsSection {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.layout-phone .settingsRow {
    grid-template-columns: minmax(74px, 96px) minmax(70px, 1fr) 44px;
    min-height: 54px;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 10px;
  }

  body.layout-phone .settingsLabel,
  body.layout-phone .settingsValue {
    font-size: 10px;
    line-height: 1.2;
  }

  body.layout-phone .settingsValue {
    min-width: 36px;
    text-align: right;
  }

  body.layout-phone .settingsActions {
    grid-column: 1 / -1;
  }

  body.layout-phone .settingsControlPreview,
  body.layout-phone .settingsAccountSummary,
  body.layout-phone .settingsInlineCommand {
    grid-column: 1 / -1;
  }

  body.layout-phone .settingsTabs {
    margin-bottom: 6px;
  }

  body.layout-phone .settingsTab {
    min-width: 70px;
    min-height: 34px;
    padding: 4px;
  }

  body.layout-phone .settingsTab span {
    font-size: 9px;
  }

  body.layout-phone .settingsControlPreview {
    min-height: 76px;
  }

  body.layout-phone .settingsFooter {
    margin-top: 6px;
    padding-top: 6px;
  }

  body.layout-phone .settingsFooter .btn {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 10px;
  }

  body.layout-phone.layout-landscape.settings-modal-open .touchControls {
    display: block !important;
    opacity: 0.48;
    pointer-events: none !important;
  }

  body.layout-phone.layout-landscape.settings-modal-open .touchControls .joyBase,
  body.layout-phone.layout-landscape.settings-modal-open .touchControls .touchBtn {
    pointer-events: none !important;
  }
}

/* Controller skin v13: normalized sockets and an iPhone-first gameplay composition. */
.touchControls .touchBtn[hidden],
.touchControls .touchBtn.isContextHidden {
  display: none !important;
  pointer-events: none !important;
}

.controllerSkinDebugLayer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  pointer-events: none;
}

body.controller-skin-debug .controllerSkinDebugLayer {
  display: block;
}

.controllerPlayableSafeRectDebug {
  position: fixed;
  border: 2px dashed rgba(30, 192, 157, 0.95);
  background: rgba(30, 192, 157, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

body.layout-phone.layout-landscape.ui-playing {
  --wohoo-phone-left-skin-w: clamp(180px, 22.5vw, 201px);
  --wohoo-phone-right-skin-w: clamp(160px, 20vw, 180px);
  --wohoo-phone-top-skin-w: clamp(128px, 17vw, 148px);
}

body.layout-phone.layout-landscape.ui-playing .touchControls {
  position: fixed;
  top: var(--layout-vv-top, 0px);
  right: var(--layout-vv-right-gap, 0px);
  bottom: var(--layout-vv-bottom-gap, 0px);
  left: var(--layout-vv-left, 0px);
  overflow: hidden;
}

body.layout-phone.layout-landscape.ui-playing .controllerSkin {
  transition: opacity 120ms ease, filter 120ms ease;
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinTopLeft {
  display: block !important;
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) - 20px);
  left: calc(var(--layout-vv-left, 0px) + max(0px, var(--wohoo-safe-left) - 12px));
  width: 128px;
  opacity: 0.2;
  filter: none;
  -webkit-mask-image: linear-gradient(135deg, #000 0 42%, transparent 88%);
  mask-image: linear-gradient(135deg, #000 0 42%, transparent 88%);
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinTopRight {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) - 12px);
  right: calc(var(--layout-vv-right-gap, 0px) + max(0px, var(--wohoo-safe-right) - 8px));
  width: var(--wohoo-phone-top-skin-w);
  aspect-ratio: 240 / 100;
  opacity: 0.34;
  filter: drop-shadow(0 4px 8px rgba(54, 30, 8, 0.1));
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinBottomLeft {
  left: calc(var(--layout-vv-left, 0px) + max(0px, var(--wohoo-safe-left) - 6px));
  bottom: calc(var(--layout-vv-bottom-gap, 0px) + max(0px, var(--wohoo-safe-bottom) - 1px));
  width: var(--wohoo-phone-left-skin-w);
  aspect-ratio: 480 / 310;
  background-image: url("assets/controller-skin/wohoo_corner_bottom_left_phone_landscape_v13.svg");
  opacity: 0.42;
  filter: drop-shadow(0 6px 11px rgba(54, 30, 8, 0.13));
  -webkit-mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0.62) 84%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0.62) 84%, transparent 100%);
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinBottomRight {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 6px);
  bottom: calc(var(--layout-vv-bottom-gap, 0px) + max(0px, var(--wohoo-safe-bottom) - 1px));
  width: var(--wohoo-phone-right-skin-w);
  aspect-ratio: 400 / 330;
  background-image: url("assets/controller-skin/wohoo_corner_bottom_right_phone_landscape_v13.svg");
  opacity: 0.42;
  filter: drop-shadow(0 6px 11px rgba(54, 30, 8, 0.13));
  -webkit-mask-image: linear-gradient(270deg, #000 0 74%, rgba(0, 0, 0, 0.64) 86%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0 74%, rgba(0, 0, 0, 0.64) 86%, transparent 100%);
}

body.layout-phone.layout-landscape.ui-playing .touchControls.isTouchActive .controllerSkinBottomLeft,
body.layout-phone.layout-landscape.ui-playing .touchControls.isTouchActive .controllerSkinBottomRight {
  opacity: 0.58;
  filter: drop-shadow(0 7px 12px rgba(54, 30, 8, 0.17));
}

body.layout-phone.layout-landscape.ui-playing .joyBase {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.layout-phone.layout-landscape.ui-playing .joyBase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wohoo-touch-face, calc(100% - 10px));
  height: var(--wohoo-touch-face, calc(100% - 10px));
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 250, 219, 0.92);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255, 246, 194, 0.22) 0 43%, transparent 44%),
    radial-gradient(circle at center, rgba(255, 249, 222, 0.92) 0 67%, rgba(226, 153, 54, 0.94) 68% 76%, rgba(129, 75, 23, 0.7) 77% 80%, rgba(255, 228, 139, 0.92) 81%);
  box-shadow:
    0 7px 13px rgba(78, 43, 10, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.62);
}

body.layout-phone.layout-landscape.ui-playing .joyBase.isSneakZone::before {
  box-shadow:
    0 7px 13px rgba(78, 43, 10, 0.2),
    0 0 0 3px rgba(84, 209, 154, 0.42),
    inset 0 2px 0 rgba(255, 255, 255, 0.62);
}

body.layout-phone.layout-landscape.ui-playing .joyKnob {
  z-index: 1;
  width: var(--wohoo-joy-knob);
  height: var(--wohoo-joy-knob);
  margin-left: calc(var(--wohoo-joy-knob) * -0.5);
  margin-top: calc(var(--wohoo-joy-knob) * -0.5);
  border-width: 1.5px;
  transform: translate(var(--wohoo-joy-x, 0px), var(--wohoo-joy-y, 0px));
}

body.layout-phone.layout-landscape.ui-playing .touchBtn {
  min-width: 44px;
  min-height: 44px;
}

body.layout-phone.layout-landscape.ui-playing .touchBtn::before {
  width: var(--wohoo-touch-face, calc(100% - 8px));
  height: var(--wohoo-touch-face, calc(100% - 8px));
  border-width: 1.5px;
  box-shadow:
    0 5px 9px rgba(80, 42, 6, 0.2),
    inset 0 -2px 0 rgba(137, 74, 17, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

body.layout-phone.layout-landscape.ui-playing .touchBtnGlyph {
  width: min(31px, calc(var(--wohoo-touch-face, 38px) * 0.68));
  height: min(31px, calc(var(--wohoo-touch-face, 38px) * 0.68));
}

body.layout-phone.layout-landscape.ui-playing .pauseBtn,
body.layout-phone.layout-landscape.ui-playing .gameSettingsBtn,
body.layout-phone.layout-landscape.ui-playing .homeBtn {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 2px);
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
}

body.layout-phone.layout-landscape.ui-playing .pauseBtn::before,
body.layout-phone.layout-landscape.ui-playing .gameSettingsBtn::before,
body.layout-phone.layout-landscape.ui-playing .homeBtn::before {
  width: 30px;
  height: 30px;
  border-color: rgba(90, 59, 24, 0.16);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 3px 8px rgba(60, 38, 14, 0.11);
}

body.layout-phone.layout-landscape.ui-playing .pauseBtn {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 4px);
}

body.layout-phone.layout-landscape.ui-playing .gameSettingsBtn {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 48px);
}

body.layout-phone.layout-landscape.ui-playing .homeBtn {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 92px);
}

body.layout-phone.layout-landscape.ui-playing .hudInner {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 4px);
  right: auto;
  left: calc(var(--layout-vv-left, 0px) + var(--wohoo-safe-left) + 7px);
  width: min(284px, calc(var(--layout-vw, 100vw) - var(--wohoo-safe-left) - var(--wohoo-safe-right) - 178px));
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 3px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth {
  width: 54px;
  min-width: 54px;
  min-height: 46px;
  padding: 3px 5px;
  border-radius: 11px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth .hudCardTop {
  min-height: 16px;
  margin: 0;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth .hudBadge {
  min-width: 20px;
  height: 16px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth .hudHearts {
  min-height: 14px;
  margin-top: 2px;
  gap: 1px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardHealth .hudHeart {
  width: 12px;
  height: 12px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardAmmo {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 3px;
  display: grid;
  grid-template-columns: auto minmax(66px, 1fr) 28px;
  grid-template-rows: 20px 20px;
  gap: 2px;
  border-radius: 11px;
}

body.layout-phone.layout-landscape.ui-playing .hudCardAmmo .hudCardTop {
  grid-column: 1;
  grid-row: 1;
  min-height: 20px;
  height: 20px;
  padding: 0 5px;
}

body.layout-phone.layout-landscape.ui-playing #hud .hudCardAmmo > .hudPhoneStatus {
  grid-column: 2;
  grid-row: 1;
  min-height: 20px;
  height: 20px;
  padding: 0 4px;
}

body.layout-phone.layout-landscape.ui-playing .hudQuestBtn {
  grid-column: 3;
  grid-row: 1;
  width: 28px;
  min-width: 28px;
  min-height: 20px;
  height: 20px;
  padding: 0;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneLoadout {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 20px;
  height: 20px;
  gap: 2px;
  overflow: hidden;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneChip {
  min-width: 0;
  min-height: 20px;
  height: 20px;
  max-width: 58px;
  padding: 0 3px;
  gap: 2px;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneChipKey {
  min-width: 14px;
  height: 14px;
  font-size: 8px;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneChip strong {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.layout-phone.layout-landscape.ui-playing .hudPhoneChip[data-hud-slot="ammo"],
body.layout-phone.layout-landscape.ui-playing .hudPhoneChip[data-hud-slot="ability-primary"],
body.layout-phone.layout-landscape.ui-playing .hudPhoneChip[data-hud-slot="ability-secondary"],
body.layout-phone.layout-landscape.ui-playing .hudPhoneChip[data-hud-slot="utility"].isDisabled {
  display: none;
}

body.layout-phone.layout-landscape.ui-playing .objectiveBanner {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 55px);
  width: min(196px, calc(var(--layout-vw, 100vw) - 390px));
  max-width: 196px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 9px;
  background: rgba(255, 253, 246, 0.8);
  box-shadow: 0 4px 10px rgba(50, 34, 11, 0.09);
}

body.layout-phone.layout-landscape.ui-playing .objectiveBannerLevel,
body.layout-phone.layout-landscape.ui-playing .objectiveBannerDetail {
  display: none;
}

body.layout-phone.layout-landscape.ui-playing .objectiveBannerTitle {
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  body.layout-phone.layout-landscape.ui-playing .controllerSkin {
    transition: none;
  }
}

/* Portrait remains fully playable, using the same normalized v13 control language. */
body.layout-phone.layout-portrait.ui-playing {
  --wohoo-phone-left-skin-w: clamp(170px, 48vw, 188px);
  --wohoo-phone-right-skin-w: clamp(160px, 46vw, 180px);
}

body.layout-phone.layout-portrait.ui-playing .touchControls {
  position: fixed;
  top: var(--layout-vv-top, 0px);
  right: var(--layout-vv-right-gap, 0px);
  bottom: var(--layout-vv-bottom-gap, 0px);
  left: var(--layout-vv-left, 0px);
  overflow: hidden;
}

body.layout-phone.layout-portrait.ui-playing .controllerSkinTopLeft {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) - 18px);
  left: calc(var(--layout-vv-left, 0px) + max(0px, var(--wohoo-safe-left) - 10px));
  width: 110px;
  opacity: 0.15;
  filter: none;
}

body.layout-phone.layout-portrait.ui-playing .controllerSkinTopRight {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) - 12px);
  right: calc(var(--layout-vv-right-gap, 0px) + max(0px, var(--wohoo-safe-right) - 8px));
  width: 118px;
  opacity: 0.2;
  filter: none;
}

body.layout-phone.layout-portrait.ui-playing .controllerSkinBottomLeft {
  left: calc(var(--layout-vv-left, 0px) + max(0px, var(--wohoo-safe-left) - 4px));
  bottom: calc(var(--layout-vv-bottom-gap, 0px) + max(0px, var(--wohoo-safe-bottom) - 2px));
  width: var(--wohoo-phone-left-skin-w);
  aspect-ratio: 480 / 310;
  background-image: url("assets/controller-skin/wohoo_corner_bottom_left_phone_landscape_v13.svg");
  opacity: 0.42;
  filter: drop-shadow(0 6px 11px rgba(54, 30, 8, 0.13));
  -webkit-mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0.62) 84%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0.62) 84%, transparent 100%);
}

body.layout-phone.layout-portrait.ui-playing .controllerSkinBottomRight {
  right: calc(var(--layout-vv-right-gap, 0px) + max(0px, var(--wohoo-safe-right) - 4px));
  bottom: calc(var(--layout-vv-bottom-gap, 0px) + max(0px, var(--wohoo-safe-bottom) - 2px));
  width: var(--wohoo-phone-right-skin-w);
  aspect-ratio: 400 / 330;
  background-image: url("assets/controller-skin/wohoo_corner_bottom_right_phone_landscape_v13.svg");
  opacity: 0.42;
  filter: drop-shadow(0 6px 11px rgba(54, 30, 8, 0.13));
  -webkit-mask-image: linear-gradient(270deg, #000 0 74%, rgba(0, 0, 0, 0.64) 86%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0 74%, rgba(0, 0, 0, 0.64) 86%, transparent 100%);
}

body.layout-phone.layout-portrait.ui-playing .touchControls.isTouchActive .controllerSkinBottomLeft,
body.layout-phone.layout-portrait.ui-playing .touchControls.isTouchActive .controllerSkinBottomRight {
  opacity: 0.58;
}

body.layout-phone.layout-portrait.ui-playing .joyBase {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.layout-phone.layout-portrait.ui-playing .joyBase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wohoo-touch-face, calc(100% - 10px));
  height: var(--wohoo-touch-face, calc(100% - 10px));
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 250, 219, 0.92);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255, 246, 194, 0.22) 0 43%, transparent 44%),
    radial-gradient(circle at center, rgba(255, 249, 222, 0.92) 0 67%, rgba(226, 153, 54, 0.94) 68% 76%, rgba(129, 75, 23, 0.7) 77% 80%, rgba(255, 228, 139, 0.92) 81%);
  box-shadow:
    0 7px 13px rgba(78, 43, 10, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.62);
}

body.layout-phone.layout-portrait.ui-playing .joyKnob {
  z-index: 1;
  width: var(--wohoo-joy-knob);
  height: var(--wohoo-joy-knob);
  margin-left: calc(var(--wohoo-joy-knob) * -0.5);
  margin-top: calc(var(--wohoo-joy-knob) * -0.5);
  transform: translate(var(--wohoo-joy-x, 0px), var(--wohoo-joy-y, 0px));
}

body.layout-phone.layout-portrait.ui-playing .touchBtn {
  min-width: 44px;
  min-height: 44px;
}

body.layout-phone.layout-portrait.ui-playing .touchBtn::before {
  width: var(--wohoo-touch-face, calc(100% - 8px));
  height: var(--wohoo-touch-face, calc(100% - 8px));
  border-width: 1.5px;
}

body.layout-phone.layout-portrait.ui-playing .touchBtnLabel {
  display: none;
}

body.layout-phone.layout-portrait.ui-playing .touchBtnGlyph {
  width: min(31px, calc(var(--wohoo-touch-face, 38px) * 0.68));
  height: min(31px, calc(var(--wohoo-touch-face, 38px) * 0.68));
  font-size: 0;
}

body.layout-phone.layout-portrait.ui-playing .pauseBtn,
body.layout-phone.layout-portrait.ui-playing .gameSettingsBtn,
body.layout-phone.layout-portrait.ui-playing .homeBtn {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 2px);
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
}

body.layout-phone.layout-portrait.ui-playing .pauseBtn::before,
body.layout-phone.layout-portrait.ui-playing .gameSettingsBtn::before,
body.layout-phone.layout-portrait.ui-playing .homeBtn::before {
  width: 30px;
  height: 30px;
  border-color: rgba(90, 59, 24, 0.16);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 3px 8px rgba(60, 38, 14, 0.11);
}

body.layout-phone.layout-portrait.ui-playing .pauseBtn {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 4px);
}

body.layout-phone.layout-portrait.ui-playing .gameSettingsBtn {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 48px);
}

body.layout-phone.layout-portrait.ui-playing .homeBtn {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 92px);
}

body.layout-phone.layout-portrait.ui-playing .hudInner {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 4px);
  right: auto;
  left: calc(var(--layout-vv-left, 0px) + var(--wohoo-safe-left) + 6px);
  width: min(246px, calc(var(--layout-vw, 100vw) - var(--wohoo-safe-left) - var(--wohoo-safe-right) - 144px));
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 3px;
}

body.layout-phone.layout-portrait.ui-playing .hudCardHealth {
  width: 54px;
  min-width: 54px;
  min-height: 46px;
  padding: 3px 5px;
  border-radius: 11px;
}

body.layout-phone.layout-portrait.ui-playing .hudCardHealth .hudCardTop {
  min-height: 16px;
  margin: 0;
}

body.layout-phone.layout-portrait.ui-playing .hudCardHealth .hudBadge {
  min-width: 20px;
  height: 16px;
}

body.layout-phone.layout-portrait.ui-playing .hudCardHealth .hudHearts {
  min-height: 14px;
  margin-top: 2px;
  gap: 1px;
}

body.layout-phone.layout-portrait.ui-playing .hudCardHealth .hudHeart {
  width: 12px;
  height: 12px;
}

body.layout-phone.layout-portrait.ui-playing .hudCardAmmo {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 46px;
  padding: 3px;
  display: grid;
  grid-template-columns: auto minmax(56px, 1fr) 28px;
  grid-template-rows: 20px 20px;
  gap: 2px;
  border-radius: 11px;
}

body.layout-phone.layout-portrait.ui-playing .hudCardAmmo .hudCardTop {
  grid-column: 1;
  grid-row: 1;
  min-height: 20px;
  height: 20px;
  padding: 0 4px;
}

body.layout-phone.layout-portrait.ui-playing #hud .hudCardAmmo > .hudPhoneStatus {
  grid-column: 2;
  grid-row: 1;
  min-height: 20px;
  height: 20px;
  padding: 0 3px;
}

body.layout-phone.layout-portrait.ui-playing .hudQuestBtn {
  grid-column: 3;
  grid-row: 1;
  width: 28px;
  min-width: 28px;
  min-height: 20px;
  height: 20px;
  padding: 0;
}

body.layout-phone.layout-portrait.ui-playing .hudPhoneLoadout {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 20px;
  height: 20px;
  gap: 2px;
  overflow: hidden;
}

body.layout-phone.layout-portrait.ui-playing .hudPhoneChip {
  min-width: 0;
  min-height: 20px;
  height: 20px;
  max-width: 58px;
  padding: 0 3px;
  gap: 2px;
}

body.layout-phone.layout-portrait.ui-playing .hudPhoneChipKey {
  min-width: 14px;
  height: 14px;
  font-size: 8px;
}

body.layout-phone.layout-portrait.ui-playing .hudPhoneChip strong {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.layout-phone.layout-portrait.ui-playing .hudPhoneChip[data-hud-slot="ammo"],
body.layout-phone.layout-portrait.ui-playing .hudPhoneChip[data-hud-slot="ability-primary"],
body.layout-phone.layout-portrait.ui-playing .hudPhoneChip[data-hud-slot="ability-secondary"],
body.layout-phone.layout-portrait.ui-playing .hudPhoneChip[data-hud-slot="utility"].isDisabled {
  display: none;
}

body.layout-phone.layout-portrait.ui-playing .objectiveBanner {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 55px);
  width: min(210px, calc(var(--layout-vw, 100vw) - 24px));
  max-width: 210px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 9px;
  background: rgba(255, 253, 246, 0.8);
  box-shadow: 0 4px 10px rgba(50, 34, 11, 0.09);
}

body.layout-phone.layout-portrait.ui-playing .objectiveBannerLevel,
body.layout-phone.layout-portrait.ui-playing .objectiveBannerDetail {
  display: none;
}

body.layout-phone.layout-portrait.ui-playing .objectiveBannerTitle {
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wohoo icon language: one currentColor SVG system from 20px HUD use to 48px controls. */
.wohooIcon {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  color: inherit;
  overflow: visible;
  pointer-events: none;
}

.wohooIcon use {
  pointer-events: none;
}

.touchBtnGlyph.hasUiIcon::before,
.touchBtnGlyph.hasUiIcon::after {
  content: none !important;
  display: none !important;
}

.touchBtnGlyph.hasUiIcon .wohooIcon {
  width: 100%;
  height: 100%;
  color: #5b3818;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.52));
}

body.layout-phone.ui-playing .touchBtnSpell::before,
body.layout-tablet.ui-playing .touchBtnSpell::before {
  width: min(var(--wohoo-touch-face, calc(100% - 10px)), calc(100% - 10px));
  height: min(var(--wohoo-touch-face, calc(100% - 10px)), calc(100% - 10px));
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.76) 0 10%, transparent 11%),
    linear-gradient(180deg, rgba(196, 238, 247, 0.98), rgba(104, 158, 205, 0.94));
}

body.layout-phone.ui-playing .touchBtnSpell .wohooIcon,
body.layout-tablet.ui-playing .touchBtnSpell .wohooIcon {
  color: #234b72;
}

.topIconBtn .wohooIcon,
.playToolBtn .wohooIcon,
.pauseBtn .wohooIcon,
.gameSettingsBtn .wohooIcon,
.homeBtn .wohooIcon,
.kidIconBtn .wohooIcon,
.hudBadge .wohooIcon,
.hudPhoneStatus .wohooIcon,
.hudPhoneChipKey .wohooIcon,
.campaignChip .wohooIcon,
.shopWalletGlyph .wohooIcon,
.shopCardIcon .wohooIcon {
  width: 1.2em;
  height: 1.2em;
}

.pauseBtn > .wohooIcon,
.gameSettingsBtn > .wohooIcon,
.homeBtn > .wohooIcon {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
}

.hudPhoneStatus .wohooIcon,
.hudPhoneChipKey .wohooIcon {
  width: 14px;
  height: 14px;
}

.shopCardIcon .wohooIcon {
  width: clamp(30px, 4vw, 42px);
  height: clamp(30px, 4vw, 42px);
}

body.high-interactable-contrast .wohooIcon,
body[data-interactable-contrast="high"] .wohooIcon {
  filter: drop-shadow(0 0 1px currentColor);
}

.campaignSubTitle,
#worldDesc,
.badgeShelfTitle,
.badgeShelfEmpty,
.shopPresetTitle,
.shopPresetState,
.shopSectionTitle,
.shopCost,
.shopActionNote,
.postLevelActions .btn,
.postLevelLeaderboardHead .btn,
.worldCardIconStats > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.badgeShelfEmpty {
  gap: 8px;
  color: rgba(72, 64, 101, 0.64);
}

.badgeShelfEmpty .wohooIcon,
.shopPresetGlyphLine .wohooIcon {
  width: 22px;
  height: 22px;
}

.builderSlotIcon .wohooIcon {
  width: 16px;
  height: 16px;
}

.builderSlotIcon-violet {
  color: #8f63df;
}

.builderSlotIcon-azure {
  color: #4faddd;
}

.builderSlotIcon-emerald {
  color: #3ea66d;
}

.builderSlotIcon-amber {
  color: #cf8b32;
}

.builderSlotIcon-door_kit {
  color: #92623f;
}

.postLevelChallengeGlyph .wohooIcon,
.postLevelActions .wohooIcon,
.worldCardIconStats .wohooIcon,
.worldCardEnterCue .wohooIcon,
.worldCardLock .wohooIcon {
  width: 20px;
  height: 20px;
}