@font-face {
  font-family: Duplet;
  src: url("assets/fonts/duplet-bold.otf");
}
@font-face {
  font-family: Core;
  src: url("assets/fonts/CoreSansG-Regular.ttf");
}
@font-face {
  font-family: Clairo;
  src: url("assets/fonts/clairo-sans-bold-tr.ttf");
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080503;
  color: #fff;
  font-family: Duplet, Arial, sans-serif;
}
button,
input {
  font: inherit;
}
button {
  -webkit-tap-highlight-color: transparent;
}
#viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #080503;
  overflow: hidden;
}
#viewport::before {
  content: "";
  position: absolute;
  inset: -1.2%;
  background: url("assets/ui/Background.png") center/cover no-repeat;
  transform-origin: center;
  animation: soilBreath 16s ease-in-out infinite;
  will-change: transform, filter;
}
#stage {
  position: absolute;
  z-index: 1;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}
.global-logo {
  position: absolute;
  z-index: 90;
  left: 50%;
  top: 48px;
  translate: -50% 0;
  width: 390px;
  height: 145px;
  object-fit: contain;
  cursor: pointer;
}
.copyright {
  position: absolute;
  right: 35px;
  bottom: 24px;
  z-index: 85;
  text-align: right;
  color: #6e6a66;
  font:
    16px/1.05 Core,
    Arial;
  pointer-events: none;
}
.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.012);
  transition:
    opacity 0.5s ease,
    transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0.5s;
}
.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}
.overlay {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease,
    visibility 0.8s;
}
.overlay.active {
  opacity: 1;
  visibility: visible;
}
.loader-logo {
  position: absolute;
  top: 48px;
  left: 50%;
  translate: -50% 0;
  width: 390px;
  height: 145px;
  object-fit: contain;
}
.loader-wheel {
  width: 260px;
  height: 260px;
  object-fit: contain;
  animation: spin 2.4s linear infinite;
}
.overlay.leaving {
  opacity: 0;
  transform: scale(1.03);
}
#loadPercent {
  position: absolute;
  top: 680px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 22px;
  color: #ccc;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes soilBreath {
  0%,
  100% {
    transform: scale(1.004);
    filter: brightness(0.98);
  }
  50% {
    transform: scale(1.014);
    filter: brightness(1.025);
  }
}
.main-nav {
  position: absolute;
  left: 255px;
  top: 248px;
  width: 1410px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 34px;
}
.main-nav button,
.pill,
.back-button,
.result-button,
.score-entry button {
  height: 66px;
  border: 1.5px solid #fff;
  border-radius: 38px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 27px;
  font-weight: 900;
  cursor: pointer;
  transition: 0.18s ease;
  backdrop-filter: blur(2px);
}
.main-nav button:hover,
.pill:hover,
.back-button:hover,
.result-button.dark:hover,
.score-entry button:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 0 22px #ffffff24;
}
.home-hero {
  position: absolute;
  left: 0;
  right: 0;
  top: 330px;
  height: 650px;
  overflow: visible;
}
.home-shit {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  width: 1900px;
  height: 610px;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px #0008);
  animation: heroIn 1.05s cubic-bezier(0.16, 0.9, 0.25, 1) both;
}
@keyframes heroIn {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.975);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.start {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  width: 650px;
  height: 78px;
  font-size: 36px;
  letter-spacing: 0.02em;
}
.info-screen h1 {
  position: absolute;
  top: 252px;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 112px;
  line-height: 0.86;
  letter-spacing: -4px;
}
.back-button {
  position: absolute;
  left: 50%;
  bottom: 30px;
  translate: -50% 0;
  width: 340px;
  height: 58px;
  font-size: 23px;
}
.story-grid {
  position: absolute;
  left: 250px;
  top: 445px;
  width: 1420px;
  display: grid;
  grid-template-columns: 1fr 270px 1fr;
  align-items: center;
  gap: 60px;
  text-align: center;
}
.story-grid p,
.how-copy {
  font-size: 22px;
  line-height: 1.04;
  margin: 0;
}
.story-grid img {
  width: 270px;
  max-height: 270px;
  object-fit: contain;
}
.how-copy {
  position: absolute;
  top: 440px;
  left: 625px;
  width: 670px;
  text-align: center;
}
.how-left,
.how-right {
  position: absolute;
  top: 490px;
  width: 330px;
  height: 260px;
  object-fit: contain;
}
.how-left {
  left: 220px;
}
.how-right {
  right: 210px;
}
.credits-copy {
  position: absolute;
  left: 210px;
  top: 475px;
  width: 1500px;
  text-align: center;
  font-size: 43px;
  line-height: 0.98;
}
.credits-small {
  position: absolute;
  left: 0;
  top: 775px;
  width: 100%;
  text-align: center;
  color: #4d4a47;
  font: 24px/1 Core;
}
.credit-creatures {
  position: absolute;
  left: 230px;
  right: 230px;
  top: 700px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.credit-creatures img {
  width: 210px;
  height: 140px;
  object-fit: contain;
}
.scoreboard-screen ol {
  position: absolute;
  left: 520px;
  top: 440px;
  width: 880px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.score-row {
  height: 70px;
  border: 1.4px solid #fff;
  border-radius: 40px;
  margin-bottom: 15px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 29px;
}
.score-row:nth-child(1) {
  color: #ffa11d;
}
.score-row:nth-child(2) {
  color: #2bd059;
}
.score-row:nth-child(3) {
  color: #ff5b2a;
}
.score-creature {
  position: absolute;
  top: 590px;
  width: 300px;
  height: 220px;
  object-fit: contain;
}
.score-creature.left {
  left: 190px;
}
.score-creature.right {
  right: 180px;
}
.species-track {
  position: absolute;
  left: 110px;
  right: 110px;
  top: 430px;
  height: 470px;
  display: flex;
  gap: 24px;
  overflow: hidden;
  align-items: flex-start;
  padding: 22px 25px 28px;
  transition:
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.species-track.slide-left {
  opacity: 0.2;
  transform: translateX(-105px);
}
.species-track.slide-right {
  opacity: 0.2;
  transform: translateX(105px);
}
.species-card {
  flex: 0 0 300px;
  height: 400px;
  border: 1.5px solid #fff;
  border-radius: 72px;
  background: #000;
  padding: 20px 18px 25px;
  text-align: center;
  cursor: pointer;
  transform-origin: center center;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
  will-change: transform;
}
.species-card:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow:
    0 22px 48px #000b,
    0 0 0 1px #ffffff55;
  border-color: #fff;
}
.species-card img {
  width: 100%;
  height: 235px;
  object-fit: contain;
  transition: transform 0.35s ease;
}
.species-card:hover img {
  transform: scale(1.035);
}
.species-card h3 {
  font-size: 24px;
  margin: 8px 0 8px;
}
.species-card em {
  font: italic 23px/1 Core;
}
.species-arrow {
  position: absolute;
  top: 635px;
  width: 60px;
  height: 70px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 64px;
  cursor: pointer;
  z-index: 5;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.species-arrow:hover {
  transform: scale(1.16);
  opacity: 0.8;
}
.species-arrow.left {
  left: 48px;
}
.species-arrow.right {
  right: 48px;
}
.species-modal {
  position: absolute;
  inset: 0;
  z-index: 600;
  background: #0007;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.42s ease,
    visibility 0.42s;
  backdrop-filter: blur(7px);
}
.species-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal-card {
  width: 700px;
  height: 860px;
  border: 1.5px solid #fff;
  border-radius: 70px;
  background: #000;
  position: relative;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.5s cubic-bezier(0.16, 0.9, 0.25, 1);
}
.species-modal.open .modal-card {
  transform: none;
}
.modal-card.visual {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.modal-card.visual img {
  width: 92%;
  height: 88%;
  object-fit: contain;
  animation: specimenFloat 3.2s ease-in-out infinite;
  filter: drop-shadow(0 18px 24px #000);
}
@keyframes specimenFloat {
  0%,
  100% {
    transform: translateY(-7px) rotate(-0.5deg);
  }
  50% {
    transform: translateY(9px) rotate(0.5deg);
  }
}
.modal-card.copy {
  padding: 170px 100px 80px;
  text-align: center;
}
.modal-card h2 {
  font-size: 48px;
  margin: 0 0 24px;
}
.modal-card h3 {
  font: italic 43px Core;
  margin: 0 0 105px;
}
.modal-card p {
  font: 25px/1.35 Core;
  color: #aaa;
}
.modal-card #modalClose {
  position: absolute;
  right: -8px;
  top: -55px;
  width: 90px;
  height: 90px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 62px;
  font-family: Core;
  cursor: pointer;
  transition: 0.22s ease;
}
.modal-card #modalClose:hover {
  background: #fff;
  color: #000;
  transform: rotate(90deg);
}
.game-screen {
  cursor: none;
}
.game-screen canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.game-hud {
  position: absolute;
  left: 42px;
  top: 90px;
  width: 410px;
  z-index: 30;
}
.hud-row {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  margin-bottom: 13px;
}
.power-track {
  height: 28px;
  background: #1c1d1f;
  position: relative;
  overflow: hidden;
}
.power-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #a9aaad;
  transform-origin: left center;
  transition: filter 0.2s ease;
}
.power-track b {
  position: absolute;
  right: 13px;
  top: 1px;
  font-size: 21px;
}
.game-hud.danger .power-track {
  animation: danger 0.7s infinite alternate;
}
@keyframes danger {
  to {
    filter: brightness(1.55);
  }
}
#levelLabel {
  position: absolute;
  right: 42px;
  top: 90px;
  z-index: 30;
  font-size: 47px;
}
#reticle {
  position: absolute;
  z-index: 100;
  width: 80px;
  height: 80px;
  border: 2px solid #fff;
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
}
#reticle:before,
#reticle:after,
#reticle i:before,
#reticle i:after {
  content: "";
  position: absolute;
  background: #fff;
}
#reticle:before {
  width: 34px;
  height: 2px;
  left: 22px;
  top: 38px;
}
#reticle:after {
  width: 2px;
  height: 34px;
  left: 38px;
  top: 22px;
}
#reticle i {
  position: absolute;
  inset: 10px;
  border: 1px solid #ffffff77;
  border-radius: 50%;
}
#butterflyWarning {
  position: absolute;
  right: 34px;
  bottom: 34px;
  z-index: 920;
  width: 320px;
  pointer-events: none;
  opacity: 0;
  text-align: left;
  color: #fff;
  text-shadow: none;
}
.butterfly-card {
  width: 100%;
  padding: 13px 16px 12px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.94);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  font-family: Duplet, Arial, sans-serif;
}
.butterfly-card small {
  display: block;
  font:
    700 9px/1 Duplet,
    Arial,
    sans-serif;
  letter-spacing: 0.12em;
  opacity: 0.55;
  margin-bottom: 5px;
}
.butterfly-card b {
  display: block;
  font:
    900 15px/1.15 Duplet,
    Arial,
    sans-serif;
  letter-spacing: 0.005em;
}
.butterfly-card strong {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 12px;
  font:
    900 12px/1 Duplet,
    Arial,
    sans-serif;
}
#butterflyWarning.show {
  animation: butterflyWarning 2.15s cubic-bezier(0.16, 0.84, 0.2, 1) both;
}
@keyframes butterflyWarning {
  0% {
    opacity: 0;
    transform: translateX(28px) scale(0.96);
  }
  12% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  72% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateX(18px) scale(0.98);
  }
}
#comboText {
  position: absolute;
  left: 0;
  top: 200px;
  width: 100%;
  z-index: 80;
  text-align: center;
  font-size: 64px;
  opacity: 0;
}
#comboText.pop {
  animation: combo 0.65s ease;
}
@keyframes combo {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  30% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}
#levelCurtain {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0009;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
}
#levelCurtain.show {
  opacity: 1;
  visibility: visible;
}
#levelCurtain b {
  font-size: 150px;
}
#levelCurtain span {
  font-size: 34px;
}
.result-screen .splash {
  position: absolute;
  inset: 0;
  background: url("assets/ui/Splash.png") center/cover no-repeat;
  opacity: 0.75;
}
.result-content {
  position: absolute;
  inset: 0;
  z-index: 4;
  text-align: center;
  padding-top: 255px;
}
.result-content h1 {
  font-size: 145px;
  line-height: 0.7;
  margin: 0;
}
.result-content h1 span {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}
.result-content h1.final {
  font-size: 175px;
}
.result-content h1.final span {
  display: block;
  color: #fff;
  -webkit-text-stroke: 0;
  font-size: 75px;
  line-height: 1.1;
}
.result-content p {
  font-size: 30px;
  line-height: 1.05;
  margin: 50px 0 20px;
}
.result-content #finalScore {
  font-size: 110px;
}
.score-entry {
  position: absolute;
  left: 1425px;
  top: 650px;
  width: 390px;
}
.score-status {
  min-height: 54px;
  margin-bottom: 10px;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 8px #000;
}
.score-status.good {
  color: #49d56d;
}
.score-status.bad {
  color: #ff765f;
}
.score-status.wait {
  color: #fff;
}
.score-entry.hidden-form #scoreForm {
  display: none;
}
.score-entry input,
.score-entry button {
  width: 100%;
  height: 48px;
  border-radius: 26px;
  margin-bottom: 8px;
  text-align: center;
  border: 1px solid #fff;
}
.score-entry button {
  background: #b10d14;
}
.result-button {
  display: block;
  width: 510px;
  margin: 18px auto 0;
}
.result-button.light {
  background: #fff;
  color: #000;
}
.result-screen #fireworks {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.rotateNotice {
  display: none;
}
#rotateNotice {
  display: none;
}
@media (max-aspect-ratio: 1.1/1) and (orientation: portrait) {
  #rotateNotice {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    text-align: center;
    background: #080503 url("assets/ui/Background.png") center/cover;
    color: #fff;
    font-size: 34px;
  }
  #rotateNotice small {
    font-size: 18px;
  }
}
@media (pointer: coarse) {
  .main-nav button:hover,
  .pill:hover,
  .back-button:hover {
    transform: none;
  }
  .species-card:hover {
    transform: none;
  }
}

.booting .screen,
.booting .global-logo,
.booting .copyright {
  opacity: 0 !important;
  visibility: hidden !important;
}

.game-screen.intro #gameCanvas {
  animation: canvasReveal 0.9s cubic-bezier(0.16, 0.9, 0.25, 1) both;
}
@keyframes canvasReveal {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* v22 refinements */
.home-species {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.home-species .hs {
  position: absolute;
  width: 112px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 9px 10px #000b);
  will-change: transform;
  animation: homeFloat 4.8s ease-in-out infinite alternate;
}
.home-species .hs1 {
  left: 135px;
  top: 84px;
  animation-delay: -0.7s;
}
.home-species .hs2 {
  right: 165px;
  top: 105px;
  animation-delay: -2.1s;
}
.home-species .hs3 {
  left: 78px;
  top: 352px;
  animation-delay: -1.4s;
}
.home-species .hs4 {
  right: 72px;
  top: 365px;
  animation-delay: -3.2s;
}
.home-species .hs5 {
  left: 300px;
  bottom: 52px;
  animation-delay: -2.5s;
}
.home-species .hs6 {
  right: 305px;
  bottom: 35px;
  animation-delay: -0.3s;
}
.home-species .hs7 {
  left: 560px;
  top: 38px;
  animation-delay: -3.7s;
}
.home-species .hs8 {
  right: 540px;
  top: 35px;
  animation-delay: -1.8s;
}
.home-species .hs9 {
  left: 470px;
  bottom: 6px;
  animation-delay: -4.1s;
}
.home-species .hs10 {
  right: 470px;
  bottom: 4px;
  animation-delay: -2.9s;
}
@keyframes homeFloat {
  0% {
    transform: translate3d(-5px, 7px, 0) rotate(-2deg);
  }
  50% {
    transform: translate3d(5px, -9px, 0) rotate(2deg);
  }
  100% {
    transform: translate3d(-2px, 4px, 0) rotate(-1deg);
  }
}
#liveScore {
  font-size: 34px;
  line-height: 1;
  margin: 0 0 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.game-hud {
  width: 470px;
}
.hud-row {
  font-size: 23px;
}
.power-track {
  height: 31px;
}
.power-track b {
  font-size: 24px;
  top: 0;
}
.species-viewport {
  position: absolute;
  left: 110px;
  right: 110px;
  top: 420px;
  height: 500px;
  overflow: hidden;
  padding: 28px 25px 34px;
}
.species-track {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  height: 430px;
  display: flex;
  gap: 24px;
  overflow: visible;
  align-items: flex-start;
  padding: 0;
  transition: transform 0.72s cubic-bezier(0.18, 0.8, 0.2, 1);
  will-change: transform;
}
.species-card {
  flex: 0 0 300px;
}
.species-arrow:disabled {
  opacity: 0.22;
  cursor: default;
  transform: none;
}

/* v23 visual fixes */
.home-shit {
  width: 1840px;
  height: 600px;
}
.content-creature {
  will-change: transform;
  filter: drop-shadow(0 12px 18px #000a);
}
.float-a {
  animation: contentFloatA 4.6s ease-in-out infinite;
}
.float-b {
  animation: contentFloatB 5.2s ease-in-out infinite;
}
.float-c {
  animation: contentFloatC 4.9s ease-in-out infinite;
}
@keyframes contentFloatA {
  0%,
  100% {
    transform: translate3d(0, -7px, 0) rotate(-1deg);
  }
  50% {
    transform: translate3d(7px, 10px, 0) rotate(1.5deg);
  }
}
@keyframes contentFloatB {
  0%,
  100% {
    transform: translate3d(-5px, 8px, 0) rotate(1deg);
  }
  50% {
    transform: translate3d(5px, -11px, 0) rotate(-1.3deg);
  }
}
@keyframes contentFloatC {
  0%,
  100% {
    transform: translate3d(5px, -6px, 0) rotate(0.8deg);
  }
  50% {
    transform: translate3d(-6px, 9px, 0) rotate(-1deg);
  }
}
.species-viewport {
  left: 80px;
  right: 80px;
  top: 390px;
  height: 545px;
  padding: 36px 30px 42px;
}
.species-track {
  height: 455px;
  gap: 28px;
  transform: translate3d(0, 0, 0);
}
.species-card {
  flex-basis: 315px;
  height: 420px;
  opacity: 1;
  visibility: visible;
}
.species-card img {
  height: 250px;
}
.species-arrow {
  top: 610px;
}
@media (prefers-reduced-motion: reduce) {
  .content-creature,
  .home-species .hs,
  .modal-card.visual img,
  #viewport::before {
    animation: none !important;
  }
}

/* v25 multilingual language gate */
.language-select {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: none;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.55s ease,
    visibility 0.55s;
}
.language-select.active {
  display: block;
  opacity: 1;
  visibility: visible;
}
.language-logo {
  position: absolute;
  left: 50%;
  top: 48px;
  translate: -50% 0;
  width: 340px;
  height: auto;
  filter: drop-shadow(0 12px 20px #0008);
}
.language-grid {
  position: absolute;
  left: 300px;
  right: 300px;
  top: 352px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 62px;
}
.language-grid button {
  height: 90px;
  border: 1.5px solid #fff;
  border-radius: 48px;
  background: #0003;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  padding: 0 36px;
  font: 34px/1 Duplet;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.language-grid button:hover {
  transform: translateY(-4px) scale(1.02);
  background: #ffffff13;
  box-shadow:
    0 18px 45px #0009,
    0 0 0 1px #ffffff44;
}
.language-grid .flag {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px #0008);
}
.language-grid b {
  font-weight: 700;
  white-space: nowrap;
}
.language-select.leaving {
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
}
.language-select + .overlay {
  z-index: 1100;
}
html[lang="ja"] .info-screen h1,
html[lang="ja"] .main-nav button,
html[lang="ja"] .pill,
html[lang="ja"] .back-button,
html[lang="ja"] .result-button,
html[lang="ja"] .language-grid button {
  letter-spacing: 0.01em;
}
html[lang="ja"] .story-grid p,
html[lang="ja"] .how-copy,
html[lang="ja"] .modal-card p {
  line-height: 1.55;
}
@media (max-aspect-ratio: 1.35/1) {
  .language-grid {
    left: 150px;
    right: 150px;
    grid-template-columns: repeat(2, 1fr);
    top: 320px;
  }
  .language-logo {
    top: 34px;
    width: 300px;
  }
}

/* v26 multilingual fit fixes */
.main-nav button {
  white-space: nowrap;
  line-height: 1;
  padding: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-lang="fr"] .main-nav button,
body[data-lang="es"] .main-nav button,
body[data-lang="it"] .main-nav button {
  font-size: 24px;
  letter-spacing: -0.5px;
}
body[data-lang="ja"] .main-nav button {
  font-size: 23px;
}
.game-hud .hud-row strong {
  white-space: nowrap;
}
body[data-lang="fr"] .game-hud .hud-row,
body[data-lang="es"] .game-hud .hud-row,
body[data-lang="it"] .game-hud .hud-row {
  font-size: 22px;
  gap: 16px;
}
body[data-lang="fr"] .game-hud,
body[data-lang="es"] .game-hud,
body[data-lang="it"] .game-hud {
  width: 470px;
}
@media (max-width: 900px) {
  body[data-lang="fr"] .main-nav button,
  body[data-lang="es"] .main-nav button,
  body[data-lang="it"] .main-nav button {
    font-size: clamp(12px, 2.6vw, 18px);
  }
  body[data-lang="fr"] .game-hud .hud-row,
  body[data-lang="es"] .game-hud .hud-row,
  body[data-lang="it"] .game-hud .hud-row {
    font-size: clamp(12px, 2.4vw, 18px);
  }
}

.language-copyright {
  position: absolute;
  right: 42px;
  bottom: 28px;
  width: 190px;
  height: auto;
  object-fit: contain;
  opacity: 0.78;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
@media (max-width: 900px) {
  .language-copyright {
    right: 18px;
    bottom: 16px;
    width: 135px;
  }
}

#ambientCanvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}
.screen,
.global-logo,
.copyright,
.language-select,
.overlay {
  position: absolute;
}
.screen {
  z-index: 10;
}
.global-logo,
.copyright {
  z-index: 90;
}
.language-select {
  z-index: 1200;
}
.overlay {
  z-index: 1100;
}

/* v35 Living Ecosystem */
.world-stats {
  position: absolute;
  left: 50%;
  bottom: 145px;
  translate: -50% 0;
  width: 920px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  z-index: 28;
  text-align: center;
}
.world-stats > div {
  padding: 13px 18px 11px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.world-stats span {
  display: block;
  font-family: Core, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  opacity: 0.72;
  white-space: nowrap;
}
.world-stats b {
  display: block;
  margin-top: 3px;
  font-size: 29px;
  letter-spacing: 0.035em;
}
.achievement-toast {
  position: absolute;
  right: 38px;
  top: 210px;
  z-index: 210;
  width: 360px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  background: rgba(4, 3, 2, 0.9);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateX(50px) scale(0.96);
  pointer-events: none;
}
.achievement-toast.show {
  animation: achievementIn 4s cubic-bezier(0.22, 0.75, 0.2, 1) both;
}
.achievement-toast small {
  display: block;
  font-family: Core, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  opacity: 0.6;
}
.achievement-toast b {
  display: block;
  margin-top: 5px;
  font-size: 28px;
}
.ambient-hit {
  filter: brightness(1.3);
}
@keyframes achievementIn {
  0% {
    opacity: 0;
    transform: translateX(50px) scale(0.96);
  }
  12%,
  78% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateX(20px) scale(0.98);
  }
}
@media (max-aspect-ratio: 1/1) {
  .world-stats {
    width: 1080px;
    bottom: 158px;
    gap: 12px;
  }
  .world-stats span {
    font-size: 17px;
  }
  .world-stats b {
    font-size: 31px;
  }
}

.home-shit {
  top: -32px;
}
.world-stats {
  bottom: 148px;
}

/* v36 home stats and start button refinement */
@media (max-width: 900px) {
  .world-stats {
    bottom: 132px;
    width: min(94vw, 920px);
    gap: 8px;
  }
  .world-stats > div {
    padding: 9px 8px 8px;
    border-radius: 16px;
  }
  .world-stats span {
    font-size: 11px;
    letter-spacing: 0.035em;
  }
  .world-stats b {
    font-size: 22px;
  }
  .start {
    bottom: 24px;
    width: min(78vw, 650px);
    height: 72px;
    font-size: 31px;
  }
}
@media (max-width: 620px) {
  .world-stats {
    bottom: 118px;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .world-stats span {
    font-size: 9px;
    white-space: normal;
    line-height: 1.05;
    min-height: 20px;
  }
  .world-stats b {
    font-size: 17px;
  }
  .start {
    bottom: 18px;
    height: 64px;
    font-size: 27px;
  }
}

/* v37: creator corner link and multilingual entry artwork */
.creator-corner-link {
  position: absolute;
  left: 38px;
  bottom: 28px;
  z-index: 1305;
  width: 145px;
  height: auto;
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.3s ease,
    transform 0.25s ease,
    visibility 0.3s;
}
.creator-corner-link img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.creator-corner-link:hover {
  transform: translateY(-3px) scale(1.035);
}
#stage.game-active .creator-corner-link {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.language-entry-text {
  position: absolute;
  left: 50%;
  top: 730px;
  translate: -50% 0;
  width: 1140px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 7px 14px #0008);
}
@media (max-aspect-ratio: 1.35/1) {
  .language-entry-text {
    top: 836px;
    width: 980px;
  }
}
@media (max-width: 900px) {
  .creator-corner-link {
    left: 20px;
    bottom: 18px;
    width: 112px;
  }
}

/* v40 gameplay visibility and interaction refinements */
.game-screen {
  pointer-events: auto;
  touch-action: none;
}
#gameCanvas {
  z-index: 1;
  pointer-events: none;
}
.game-gradient {
  position: absolute;
  left: 0;
  width: 1920px;
  height: auto;
  z-index: 22;
  pointer-events: none;
  user-select: none;
}
.game-gradient-up {
  top: 0;
}
.game-gradient-down {
  bottom: 0;
}
.game-hud,
#levelLabel,
#comboText,
#butterflyWarning,
#levelCurtain {
  pointer-events: none;
}
#stage.game-active .global-logo,
#stage.game-active .copyright {
  pointer-events: none;
}
#stage.game-active .global-logo {
  z-index: 32;
}
#stage.game-active .copyright {
  z-index: 32;
}
#reticle {
  z-index: 120;
}

/* v58 AAA species carousel: exact edge alignment, no clipped final card */
.species-viewport {
  overflow: hidden !important;
  left: 92px !important;
  right: 92px !important;
  padding: 34px 34px 48px !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 30px,
    #000 calc(100% - 30px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 30px,
    #000 calc(100% - 30px),
    transparent 100%
  );
}
.species-track {
  gap: 26px !important;
  padding: 0 !important;
  width: max-content !important;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.species-card {
  flex: 0 0 302px !important;
  height: 414px !important;
  border-radius: 54px !important;
  background: linear-gradient(
    180deg,
    rgba(19, 19, 19, 0.98),
    rgba(0, 0, 0, 0.98)
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 16px 36px rgba(0, 0, 0, 0.42);
}
.species-card img {
  height: 246px !important;
}
.species-card h3 {
  font-size: 23px !important;
  min-height: 48px;
  display: grid;
  place-items: center;
  margin: 8px 4px 4px !important;
}
.species-card em {
  font-size: 19px !important;
  opacity: 0.72;
}
.species-arrow {
  width: 72px !important;
  height: 72px !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.78) !important;
  font-size: 48px !important;
  line-height: 1 !important;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.species-arrow.left {
  left: 24px !important;
}
.species-arrow.right {
  right: 24px !important;
}
.species-arrow:hover:not(:disabled) {
  background: #fff !important;
  color: #000 !important;
  transform: scale(1.06) !important;
}
.species-arrow:disabled {
  opacity: 0.18 !important;
}

/* v59 compact gameplay HUD — visual scale only, engine untouched */
#liveScore {
  font-size: 28px !important;
  line-height: 1 !important;
  margin: 0 0 16px !important;
  letter-spacing: 0.35px !important;
}
.game-hud {
  left: 42px !important;
  top: 76px !important;
  width: 390px !important;
  transform: scale(0.88);
  transform-origin: top left;
}
.hud-row {
  font-size: 18px !important;
  margin-bottom: 9px !important;
  gap: 12px !important;
}
.power-track {
  height: 23px !important;
}
.power-track b {
  font-size: 18px !important;
  right: 10px !important;
  top: 0 !important;
}
body[data-lang="fr"] .game-hud,
body[data-lang="es"] .game-hud,
body[data-lang="it"] .game-hud {
  width: 410px !important;
}
body[data-lang="fr"] .game-hud .hud-row,
body[data-lang="es"] .game-hud .hud-row,
body[data-lang="it"] .game-hud .hud-row {
  font-size: 17px !important;
}

/* v63 full viewport correction: stage fills every screen edge without side gutters */
#viewport {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#stage {
  left: 50%;
  top: 50%;
  margin-left: -960px;
  margin-top: -540px;
  transform-origin: center center;
}
.game-screen canvas {
  display: block;
}

/* v64: remove only the bottom game-screen gradient overlay */
.game-gradient-down {
  display: none !important;
}

#powerCountdown {
  position: absolute;
  z-index: 95;
  left: 50%;
  top: 177px;
  transform: translateX(-50%);
  min-width: 220px;
  text-align: center;
  font-family: Duplet, Arial, sans-serif;
  font-weight: 900;
  font-size: 31px;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
#powerCountdown.show {
  opacity: 1;
}
#stage:not(.game-active) #powerCountdown {
  display: none;
}

/* v78 - level-opening Shit Fact card */
.shit-fact-overlay {
  position: absolute;
  inset: 0;
  z-index: 980;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.52);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.32s ease,
    visibility 0.32s ease;
}
.shit-fact-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.shit-fact-card {
  position: relative;
  width: 1000px;
  min-height: 258px;
  border: 1.5px solid #fff;
  border-radius: 82px;
  background: #000;
  padding: 34px 86px 34px 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: none;
}
.shit-fact-icon {
  position: absolute;
  left: 54px;
  top: 20px;
  width: 142px;
  height: 108px;
  object-fit: contain;
}
.shit-fact-title {
  position: absolute;
  left: 220px;
  right: 220px;
  top: 28px;
  color: #d99427;
  font:
    900 45px/1 Duplet,
    Arial,
    sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.shit-fact-number {
  position: absolute;
  right: 82px;
  top: 27px;
  color: #d99427;
  font:
    900 45px/1 Duplet,
    Arial,
    sans-serif;
}
.shit-fact-text {
  width: 100%;
  padding-top: 55px;
  color: #fff;
  font:
    700 30px/1.13 Duplet,
    Arial,
    sans-serif;
}
.shit-fact-overlay[data-lang="ja"] .shit-fact-title {
  font-size: 39px;
}
.shit-fact-overlay[data-lang="ja"] .shit-fact-text {
  font-size: 28px;
  line-height: 1.28;
}
.shit-fact-overlay[data-lang="it"] .shit-fact-title {
  font-size: 34px;
}
.shit-fact-overlay[data-lang="es"] .shit-fact-title {
  font-size: 38px;
}
@media (max-width: 900px) {
  .shit-fact-card {
    width: 92%;
    min-height: 250px;
    padding-left: 190px;
    padding-right: 55px;
  }
  .shit-fact-icon {
    left: 35px;
  }
  .shit-fact-number {
    right: 50px;
  }
}

/* v80 exact-screen polish */
.language-select.active .language-logo {
  animation: v80FadeDown 0.75s 0.08s both;
}
.language-select.active .language-grid button {
  opacity: 0;
  animation: v80FadeUp 0.62s both;
}
.language-select.active .language-grid button:nth-child(1) {
  animation-delay: 0.2s;
}
.language-select.active .language-grid button:nth-child(2) {
  animation-delay: 0.28s;
}
.language-select.active .language-grid button:nth-child(3) {
  animation-delay: 0.36s;
}
.language-select.active .language-grid button:nth-child(4) {
  animation-delay: 0.44s;
}
.language-select.active .language-grid button:nth-child(5) {
  animation-delay: 0.52s;
}
.language-select.active .language-grid button:nth-child(6) {
  animation-delay: 0.6s;
}
.language-select.active .language-entry-text {
  animation: v80FadeUp 0.75s 0.68s both;
}
.language-select.active .language-copyright {
  animation: v80FadeUp 0.75s 0.78s both;
}
#menu.active .main-nav {
  animation: v80FadeDown 0.65s 0.1s both;
}
#menu.active .home-hero {
  animation: v80FadeUp 0.85s 0.22s both;
}
#menu.active .world-stats {
  animation: v80FadeUp 0.65s 0.42s both;
}
#menu.active #startGame {
  animation: v80FadeUp 0.65s 0.55s both;
}
@keyframes v80FadeUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes v80FadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.result-screen {
  background: transparent;
}
.result-screen .splash {
  background: url("assets/ui/Background.png") center/cover no-repeat;
  opacity: 1;
}
.result-screen .result-content {
  left: 255px;
  right: 255px;
  top: 242px;
  bottom: 155px;
  inset: auto;
  min-height: 665px;
  padding: 72px 80px 58px;
  border: 1.4px solid #fff;
  border-radius: 82px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "title title" "message message" "score score" "stats stats" "entry entry" "restart back";
  align-content: start;
  column-gap: 18px;
  animation: v80ResultIn 0.7s both;
}
.result-content h1 {
  grid-area: title;
  font-size: 138px;
  line-height: 0.72;
  margin: 0;
}
.result-content h1 span {
  color: #f00000;
  -webkit-text-stroke: 0;
}
.result-content p {
  grid-area: message;
  font-size: 29px;
  line-height: 1.05;
  margin: 30px 0 24px;
}
.result-content #finalScore {
  grid-area: score;
  font-size: 92px;
  line-height: 1;
}
.result-stats {
  grid-area: stats;
  margin: 12px auto 20px;
  font-size: 31px;
  line-height: 1.18;
  max-width: 1100px;
}
.result-stats b {
  color: #f00000;
}
.score-entry {
  grid-area: entry;
  position: static;
  width: 760px;
  margin: 4px auto 12px;
}
.score-entry input,
.score-entry button {
  height: 52px;
}
.result-button {
  width: 100%;
  margin: 0;
  height: 70px;
}
.result-button.dark {
  grid-area: restart;
}
.result-button.light {
  grid-area: back;
}
.result-screen.win .result-content {
  left: 255px;
  right: 255px;
  top: 242px;
  bottom: 145px;
  padding: 0;
  border: 0;
  border-radius: 72px;
  background: url("assets/ui/Final.png") center/cover no-repeat;
  overflow: hidden;
  display: block;
  text-align: left;
}
.result-screen.win .result-content:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.5) 38%,
    rgba(0, 0, 0, 0.02) 68%
  );
  pointer-events: none;
}
.result-screen.win h1,
.result-screen.win p,
.result-screen.win #finalScore,
.result-screen.win .result-stats,
.result-screen.win .score-entry,
.result-screen.win .result-button {
  position: absolute;
  z-index: 2;
}
.result-screen.win h1 {
  left: 95px;
  top: 78px;
  font-size: 102px;
  line-height: 0.72;
}
.result-screen.win h1 span {
  display: block;
  color: #fff;
  font-size: 52px;
  line-height: 0.9;
}
.result-screen.win p {
  left: 95px;
  top: 205px;
  width: 620px;
  font-size: 23px;
  text-align: center;
  margin: 0;
}
.result-screen.win #finalScore {
  left: 95px;
  top: 292px;
  width: 620px;
  text-align: center;
  font-size: 70px;
}
.result-screen.win .result-stats {
  left: 70px;
  top: 370px;
  width: 690px;
  text-align: center;
  font-size: 27px;
}
.result-screen.win .score-entry {
  left: 95px;
  bottom: 92px;
  width: 620px;
}
.result-screen.win .result-button {
  bottom: 20px;
  width: 500px;
  height: 64px;
}
.result-screen.win #restartGame {
  left: 180px;
}
.result-screen.win .result-button.light {
  right: 180px;
}
.result-screen.win #fireworks {
  display: block;
}
@keyframes v80ResultIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.shit-fact-overlay {
  background: rgba(0, 0, 0, 0.18);
}
.shit-fact-card {
  width: 1280px;
  min-height: 330px;
  border-radius: 86px;
  padding: 52px 110px 74px 250px;
}
.shit-fact-icon {
  left: 78px;
  top: 16px;
  width: 165px;
  height: 130px;
}
.shit-fact-title {
  left: 250px;
  right: 250px;
  top: 42px;
  font-size: 53px;
}
.shit-fact-number {
  right: 90px;
  top: 40px;
  font-size: 53px;
}
.shit-fact-text {
  padding-top: 78px;
  font-size: 32px;
}
.shit-fact-continue {
  position: absolute;
  z-index: 3;
  pointer-events: auto;
  touch-action: manipulation;
  left: 50%;
  bottom: -66px;
  translate: -50% 0;
  width: 500px;
  height: 92px;
  border: 1.5px solid #fff;
  border-radius: 42px;
  background: #000;
  color: #fff;
  font: 900 27px/1 Duplet;
  cursor: pointer;
  padding: 0 30px;
}
.shit-fact-continue:hover {
  background: #fff;
  color: #000;
}

/* v81 — Center the Game Over panel and its contents */
.result-screen:not(.win) .result-content {
  top: 50%;
  bottom: auto;
  min-height: 0;
  height: 760px;
  padding: 76px 80px 60px;
  align-content: center;
  transform: translateY(-50%);
  animation: v81ResultCenterIn 0.7s both;
}
.result-screen:not(.win) .result-content h1 {
  line-height: 0.82;
  margin: 0 0 8px;
}
.result-screen:not(.win) .result-content p {
  margin: 24px 0 18px;
}
.result-screen:not(.win) .result-content #finalScore {
  line-height: 1;
}
.result-screen:not(.win) .result-stats {
  margin: 10px auto 18px;
}
@keyframes v81ResultCenterIn {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 22px)) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* v83 verified polish and layering */
#menu .home-hero {
  z-index: 12;
}
#menu .home-shit {
  z-index: 2;
}
#menu .home-species {
  z-index: 3;
  pointer-events: none;
}
#menu .main-nav,
#menu .world-stats,
#menu #startGame {
  z-index: 20;
}
#menu.active .main-nav {
  animation: v83FadeDown 0.55s 0.08s both;
}
#menu.active .home-hero {
  animation: v83FadeUp 0.7s 0.18s both;
}
#menu.active .world-stats {
  animation: v83FadeUp 0.6s 0.38s both;
}
#menu.active #startGame {
  animation: v83FadeUp 0.55s 0.52s both;
}
@keyframes v83FadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes v83FadeDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.shit-fact-overlay {
  pointer-events: none;
}
.shit-fact-overlay.show {
  pointer-events: auto;
}
.shit-fact-card,
.shit-fact-continue {
  pointer-events: auto;
}


/* v84: one species per level */
#speciesIntro{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;pointer-events:none;opacity:0;background:rgba(0,0,0,.58);backdrop-filter:blur(3px);transition:opacity .28s ease}
#speciesIntro.show{opacity:1}#speciesIntro.hide{opacity:0}
.species-intro-card{width:min(720px,84vw);min-height:330px;box-sizing:border-box;padding:26px 38px 30px;border:1px solid rgba(255,255,255,.55);border-radius:38px;background:rgba(0,0,0,.92);color:#fff;text-align:center;box-shadow:0 22px 80px rgba(0,0,0,.65);transform:translateY(18px) scale(.97);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
#speciesIntro.show .species-intro-card{transform:translateY(0) scale(1)}
#speciesIntroLevel{color:#d38b18;font-weight:900;font-size:22px;letter-spacing:.12em}
#speciesIntroImage{display:block;width:150px;height:120px;object-fit:contain;margin:8px auto 0}
#speciesIntroName{margin:0;font-size:clamp(30px,4vw,54px);line-height:1;font-weight:950;text-transform:uppercase}
#speciesIntroLatin{display:block;margin-top:7px;color:#d38b18;font-size:19px}
#speciesIntroRule{margin:18px 0 0;font-size:16px;font-weight:800;letter-spacing:.04em}
@media(max-width:700px){.species-intro-card{min-height:280px;padding:22px 20px 25px;border-radius:28px}#speciesIntroImage{width:120px;height:96px}#speciesIntroRule{font-size:13px}}

/* v89 - result windows: exact center and topmost layer */
#result.result-screen {
  z-index: 5000 !important;
}

#result.result-screen.active {
  z-index: 5000 !important;
}

#result .splash {
  z-index: 0 !important;
}

#result .result-content,
#result.result-screen:not(.win) .result-content,
#result.result-screen.win .result-content {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  translate: -50% -50% !important;
  z-index: 5002 !important;
  margin: 0 !important;
  transform-origin: center center !important;
  animation: v89ResultExactCenter 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

#result.result-screen:not(.win) .result-content {
  width: 1410px !important;
  height: 760px !important;
}

#result.result-screen.win .result-content {
  width: 1410px !important;
  height: 693px !important;
}

#result #fireworks {
  z-index: 5001 !important;
}

@keyframes v89ResultExactCenter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ===== Concept-accurate collection update ===== */
.main-nav{left:198px!important;top:250px!important;width:1524px!important;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:28px!important;white-space:nowrap!important}
.main-nav button{min-width:0!important;width:100%!important;height:64px!important;font-size:24px!important;padding:0 12px!important}
.species-screen h1{top:258px!important;font-size:112px!important}
.species-viewport{position:absolute!important;left:132px!important;right:132px!important;top:420px!important;height:480px!important;padding:0!important;overflow:hidden!important;mask-image:none!important;-webkit-mask-image:none!important}
.species-track{position:relative!important;left:auto!important;right:auto!important;top:auto!important;height:456px!important;display:flex!important;gap:20px!important;padding:0!important;align-items:flex-start!important;width:max-content!important}
.species-card{position:relative!important;flex:0 0 318px!important;height:444px!important;border:0!important;border-radius:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;overflow:hidden!important}
.species-card::before{content:"";position:absolute;inset:0;background:url("assets/ui/Tur-P-Small.png") center/100% 100% no-repeat;z-index:0;pointer-events:none}
.species-card img{position:absolute!important;z-index:1!important;left:25px!important;top:34px!important;width:268px!important;height:245px!important;object-fit:contain!important}
.species-card h3{position:absolute!important;z-index:2!important;left:28px!important;right:28px!important;bottom:64px!important;margin:0!important;min-height:0!important;font-size:23px!important;color:#080604!important;text-align:center!important;display:block!important}
.species-card em{position:absolute!important;z-index:2!important;left:30px!important;right:30px!important;bottom:34px!important;font:italic 21px/1.05 Core!important;color:#080604!important;opacity:1!important;text-align:center!important}
.shits-track .species-card::before{background-image:url("assets/ui/Shits-P-Small.png")}
.shits-track .species-card img{left:35px!important;top:28px!important;width:248px!important;height:250px!important}
.shits-track .species-card h3,.shits-track .species-card em{color:#b5833f!important}
.species-arrow{top:610px!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:72px!important;width:72px!important;height:72px!important}
.species-arrow.left{left:34px!important}.species-arrow.right{right:34px!important}
.species-arrow:hover:not(:disabled){background:transparent!important;color:#fff!important;transform:scale(1.15)!important}
.species-modal{background:rgba(0,0,0,.38)!important;backdrop-filter:blur(3px)!important;gap:48px!important}
.modal-card{width:705px!important;height:985px!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
.modal-card.visual,.modal-card.copy{display:block!important;padding:0!important}
.modal-card.visual::before{content:"";position:absolute;inset:0;background:url("assets/ui/Tur-P-Sol.png") center/100% 100% no-repeat}
.modal-card.copy::before{content:"";position:absolute;inset:0;background:url("assets/ui/Tur-P-Sag.png") center/100% 100% no-repeat}
.modal-card.visual img:not(.modal-frame){position:absolute!important;z-index:2!important;left:-30px!important;top:105px!important;width:770px!important;height:650px!important;object-fit:contain!important;animation:none!important;filter:drop-shadow(0 20px 20px #0008)!important}
.modal-card.copy h2{position:absolute;z-index:2;top:185px;left:85px;right:85px;margin:0!important;font-size:48px!important;color:#080604}
.modal-card.copy h3{position:absolute;z-index:2;top:245px;left:85px;right:85px;margin:0!important;font:italic 42px Core!important;color:#080604}
.modal-card.copy p{position:absolute;z-index:2;top:350px;left:100px;right:100px;margin:0!important;font:25px/1.36 Core!important;color:#080604!important;text-align:center}
.modal-card #modalClose,.shit-modal #shitModalClose{right:-8px!important;top:34px!important;background:#020202!important;color:#fff!important;z-index:9!important}
.shit-modal .modal-card.visual::before,.shit-modal .modal-card.copy::before{display:none}
.modal-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important;z-index:0!important}
.shit-modal .modal-object{position:absolute!important;z-index:2!important;left:45px!important;top:90px!important;width:615px!important;height:650px!important;object-fit:contain!important;filter:drop-shadow(0 18px 22px #000a)!important}
.modal-copy-inner{position:absolute;z-index:2;inset:0;text-align:center;color:#b5833f}
.shit-modal .modal-copy-inner h2{position:absolute;top:185px;left:85px;right:85px;margin:0;font-size:48px;color:#b5833f}
.shit-modal .modal-copy-inner h3{position:absolute;top:250px;left:85px;right:85px;margin:0;font:italic 40px Core;color:#b5833f}
.shit-modal .modal-copy-inner p{position:absolute;top:350px;left:100px;right:100px;margin:0;font:25px/1.36 Core;color:#b5833f}
#speciesIntro{position:absolute;inset:0;z-index:700;background:rgba(0,0,0,.28);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:.3s}
#speciesIntro.show{opacity:1;visibility:visible;pointer-events:auto}
.level-preview-grid{position:absolute;left:115px;right:115px;top:235px;height:735px;display:grid;grid-template-columns:430px 560px 430px;gap:42px;align-items:center;justify-content:center}
.preview-card{position:relative;height:650px}
.preview-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.preview-object{position:absolute;z-index:2;object-fit:contain;filter:drop-shadow(0 14px 18px #0009)}
.shit-object{left:32px;right:32px;top:75px;width:366px;height:390px}.species-object{left:40px;top:70px;width:350px;height:370px}
.preview-copy{position:absolute;z-index:2;left:58px;right:58px;top:150px;text-align:center;color:#d39431}.preview-copy h2{font-size:39px;margin:0 0 20px}.preview-copy strong{display:block;font-size:38px;border-top:1px solid #815e27;padding-top:15px}.preview-copy p{font:24px/1.25 Duplet;margin:38px 0 0;color:#fff}
.preview-species-copy{position:absolute;z-index:2;left:45px;right:45px;bottom:78px;text-align:center;color:#080604}.preview-species-copy h2{font-size:30px;margin:0 0 10px}.preview-species-copy em{font:italic 27px Core}
#speciesIntroClose{position:absolute;z-index:10;top:-20px;left:50%;transform:translateX(-50%);width:88px;height:88px;border:1px solid #fff;border-radius:50%;background:#020202;color:#fff;font:58px/1 Core;cursor:pointer}
#speciesIntroClose:hover{background:#fff;color:#000}
@media(max-width:1100px){.main-nav{gap:16px!important}.main-nav button{font-size:20px!important}}


/* 2026-07-14 interaction, preview and performance corrections */
.species-viewport{cursor:grab;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.species-viewport.is-dragging{cursor:grabbing}
.species-viewport.is-dragging .species-card{pointer-events:none}
.species-track{will-change:transform;contain:layout paint style}
.species-card{contain:layout paint style;transform:translateZ(0)}
.species-modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(0,0,0,.62)!important;cursor:pointer}
#speciesIntro{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(0,0,0,.66)!important;cursor:pointer}
#speciesIntro .level-preview-grid{pointer-events:none}
#speciesIntroClose{pointer-events:auto}
.preview-card{contain:layout paint style}
.species-preview .species-object{left:48px!important;right:48px!important;top:105px!important;width:344px!important;height:330px!important;object-fit:contain!important}
.preview-species-copy{left:48px!important;right:48px!important;top:445px!important;bottom:auto!important;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:7px}
.preview-species-copy h2{margin:0!important;font-size:32px!important;line-height:1.05!important;max-width:330px}
.preview-species-copy em{font-size:24px!important;line-height:1.05!important;max-width:330px}
.modal-card.visual img:not(.modal-frame){animation:speciesFloat 3.2s ease-in-out infinite!important;will-change:transform}
@keyframes speciesFloat{0%,100%{transform:translate3d(0,-4px,0) rotate(-1deg)}50%{transform:translate3d(0,12px,0) rotate(1deg)}}
.shit-modal .modal-card.visual img:not(.modal-frame){animation:none!important}
.shit-modal .modal-copy-inner{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:90px!important;box-sizing:border-box!important}
.shit-modal .modal-copy-inner h2,.shit-modal .modal-copy-inner h3{position:static!important;left:auto!important;right:auto!important;top:auto!important;text-align:center!important;width:100%!important}
.shit-modal .modal-copy-inner h2{margin:0 0 12px!important}
.shit-modal .modal-copy-inner h3{margin:0!important}
.shit-modal .modal-copy-inner p{display:none!important}
#gameCanvas{transform:translateZ(0);will-change:auto;contain:strict;backface-visibility:hidden}
.game-gradient{will-change:auto!important}
@media (prefers-reduced-motion:reduce){.modal-card.visual img:not(.modal-frame){animation:none!important}}

/* 2026-07-14 card repair: five visible cards, reliable click and responsive sizing */
#species .species-viewport,
#shits .species-viewport {
  left: 50px !important;
  right: 50px !important;
  top: 392px !important;
  height: 470px !important;
  overflow: hidden !important;
}
#species .species-track,
#shits .species-track {
  gap: 20px !important;
  padding-left: max(0px, calc((100vw - 1770px) / 2)) !important;
  padding-right: max(0px, calc((100vw - 1770px) / 2)) !important;
  pointer-events: auto !important;
}
#species .species-card,
#shits .species-card {
  flex: 0 0 min(318px, calc((100vw - 180px) / 5)) !important;
  width: min(318px, calc((100vw - 180px) / 5)) !important;
  height: min(444px, calc((100vw - 180px) / 5 * 1.39623)) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
#species .species-card img,
#shits .species-card img {
  left: 8% !important;
  top: 7.5% !important;
  width: 84% !important;
  height: 55% !important;
}
#shits .species-card img {
  left: 11% !important;
  top: 6.5% !important;
  width: 78% !important;
  height: 57% !important;
}
#species .species-card h3,
#shits .species-card h3 {
  left: 8% !important;
  right: 8% !important;
  bottom: 14.4% !important;
  font-size: clamp(17px, 1.25vw, 23px) !important;
}
#species .species-card em,
#shits .species-card em {
  left: 8% !important;
  right: 8% !important;
  bottom: 7.6% !important;
  font-size: clamp(16px, 1.12vw, 21px) !important;
}
@media (max-width: 1100px) {
  #species .species-card,
  #shits .species-card {
    flex-basis: min(286px, calc((100vw - 120px) / 3)) !important;
    width: min(286px, calc((100vw - 120px) / 3)) !important;
    height: min(399px, calc((100vw - 120px) / 3 * 1.39623)) !important;
  }
}

/* 2026-07-14 professional carousel and level-preview repair */
#species .species-viewport,
#shits .species-viewport {
  left: 118px !important;
  right: 118px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#species .species-track,
#shits .species-track {
  width: max-content !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
}
#species .species-card,
#shits .species-card {
  flex: 0 0 318px !important;
  width: 318px !important;
  height: 444px !important;
}
/* Arrows remain outside the five-card viewport and can never cover a card. */
#species .species-arrow,
#shits .species-arrow {
  z-index: 30 !important;
  top: 585px !important;
  width: 72px !important;
  height: 86px !important;
  pointer-events: auto !important;
}
#species .species-arrow.left,
#shits .species-arrow.left { left: 24px !important; }
#species .species-arrow.right,
#shits .species-arrow.right { right: 24px !important; }
#species.active #speciesTrack,
#shits.active #shitsTrack { pointer-events: auto !important; }
#species:not(.active) #speciesTrack,
#shits:not(.active) #shitsTrack { pointer-events: none !important; }

/* Never show the old close circle on the level-intro cards. */
#speciesIntroClose { display: none !important; }
#speciesIntro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .48s ease, visibility .48s ease;
}
#speciesIntro.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#speciesIntro.closing {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}
#speciesIntro .preview-card {
  opacity: 0;
  transform: translate3d(0,34px,0) scale(.94);
  filter: blur(8px);
  transition:
    opacity .56s ease,
    transform .7s cubic-bezier(.16,.86,.2,1),
    filter .56s ease;
}
#speciesIntro.show .preview-card {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}
#speciesIntro.show .preview-card:nth-child(1) { transition-delay: .04s; }
#speciesIntro.show .preview-card:nth-child(2) { transition-delay: .12s; }
#speciesIntro.show .preview-card:nth-child(3) { transition-delay: .20s; }
#speciesIntro.closing .preview-card {
  opacity: 0;
  transform: translate3d(0,-22px,0) scale(.97);
  filter: blur(6px);
  transition-delay: 0s !important;
  transition-duration: .38s !important;
}

@media (max-width: 1500px) {
  #species .species-viewport,
  #shits .species-viewport { left: 100px !important; right: 100px !important; }
  #species .species-card,
  #shits .species-card {
    flex-basis: calc((100vw - 280px) / 5) !important;
    width: calc((100vw - 280px) / 5) !important;
    height: calc((100vw - 280px) / 5 * 1.39623) !important;
  }
}

/* 2026-07 interaction repair: five-card collections and isolated gameplay */
#species .species-viewport,
#shits .species-viewport{
  left:108px!important;
  right:108px!important;
  pointer-events:auto!important;
  touch-action:pan-y!important;
  z-index:4!important;
}
#species .species-track,
#shits .species-track{pointer-events:auto!important}
#species .species-card,
#shits .species-card{
  flex:0 0 calc((100vw - 216px - 80px)/5)!important;
  max-width:318px!important;
  min-width:250px!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
#species .species-arrow,
#shits .species-arrow{z-index:6!important;pointer-events:auto!important}
#speciesIntro{z-index:9999!important;pointer-events:auto!important}
#speciesIntro .level-preview-grid{pointer-events:auto!important}
#speciesIntro .preview-card,
#speciesIntro .preview-card *{pointer-events:none!important}
#game #shitImg,#game .shit,#game [data-shit]{pointer-events:none!important}

/* Final interaction hardening */
#species .species-viewport,
#shits .species-viewport { touch-action: pan-y !important; }
#species .species-card,
#shits .species-card { -webkit-user-drag: none; user-select: none; }
#species .species-card img,
#shits .species-card img { pointer-events: none !important; }
#speciesIntro .level-preview-grid,
#speciesIntro .preview-card,
#speciesIntro .preview-card * { pointer-events: none !important; }
#game, #game canvas { cursor: none !important; }


/* Definitive interaction fix */
#speciesIntro.show,
#speciesIntro.show .level-preview-grid,
#speciesIntro.show .preview-card,
#speciesIntro.show .preview-card * { pointer-events: auto !important; }
#species .species-viewport { cursor: grab !important; }
#species .species-viewport.is-dragging { cursor: grabbing !important; }
#species .species-track,
#species .species-card { pointer-events: auto !important; }
#game,
#gameCanvas { cursor: none !important; }
#game.active ~ #speciesModal,
#game.active ~ #shitModal { pointer-events: none !important; }


/* 2026-07-14 definitive playable interaction repair */
/* Hidden level preview must never sit invisibly above Species, Shits or Game. */
#speciesIntro,
#speciesIntro.closing {
  pointer-events: none !important;
}
#speciesIntro.show {
  pointer-events: auto !important;
}
#speciesIntro.show .level-preview-grid {
  pointer-events: none !important;
}
#speciesIntro.show .preview-card {
  pointer-events: auto !important;
  cursor: pointer !important;
}
#speciesIntro.show .preview-card * {
  pointer-events: none !important;
}

/* Species behaves exactly like Shits: hover, click, drag and wheel all stay available. */
#species.active .species-viewport,
#species.active #speciesTrack,
#species.active .species-card {
  pointer-events: auto !important;
}
#species .species-card:hover {
  transform: translate3d(0,-7px,0) scale(1.025) !important;
  filter: brightness(1.08) drop-shadow(0 18px 24px rgba(0,0,0,.55)) !important;
}
#species .species-card:hover img {
  transform: scale(1.04) !important;
}
#species .species-card { cursor: pointer !important; }
#species .species-viewport { cursor: grab !important; }
#species .species-viewport.is-dragging { cursor: grabbing !important; }

/* Gameplay pile is canvas scenery: no hand cursor and no DOM interaction. */
#game,
#game *,
#gameCanvas {
  cursor: none !important;
}
#game img,
#game .shit,
#game [data-shit] {
  pointer-events: none !important;
}

/* === SHITART ROOT INTERACTION REPAIR 2026-07-14 === */
/* Inactive screens and every descendant are fully removed from hit testing. */
#stage .screen:not(.active),
#stage .screen:not(.active) * {
  pointer-events: none !important;
}

/* Collection screens: only the currently active collection can receive input. */
#species.active,
#shits.active {
  pointer-events: auto !important;
}
#species.active .species-viewport,
#species.active #speciesTrack,
#species.active .species-card,
#species.active .species-arrow,
#shits.active .species-viewport,
#shits.active #shitsTrack,
#shits.active .species-card,
#shits.active .species-arrow {
  pointer-events: auto !important;
}
#species.active .species-card,
#shits.active .species-card {
  cursor: pointer !important;
}
#species.active .species-card:hover,
#shits.active .species-card:hover {
  transform: translate3d(0,-8px,0) scale(1.025) !important;
  filter: brightness(1.08) drop-shadow(0 18px 24px rgba(0,0,0,.55)) !important;
}
#species.active .species-card:hover img,
#shits.active .species-card:hover img {
  transform: scale(1.04) !important;
}
#species.active .species-viewport,
#shits.active .species-viewport {
  cursor: grab !important;
  touch-action: none !important;
  overflow: hidden !important;
}
#species.active .species-viewport.is-dragging,
#shits.active .species-viewport.is-dragging {
  cursor: grabbing !important;
}

/* Closed overlays are physically absent, not merely transparent. */
#speciesIntro[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#speciesIntro[aria-hidden="false"] {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#speciesIntro[aria-hidden="false"] .level-preview-grid {
  pointer-events: none !important;
}
#speciesIntro[aria-hidden="false"] .preview-card {
  pointer-events: auto !important;
  cursor: pointer !important;
}
#speciesIntro[aria-hidden="false"] .preview-card * {
  pointer-events: none !important;
}

#speciesModal:not(.open),
#shitModal:not(.open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#speciesModal.open,
#shitModal.open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Gameplay always keeps the custom game cursor; the rendered pile is canvas-only. */
#game.active,
#game.active #gameCanvas {
  pointer-events: auto !important;
  cursor: none !important;
}
#game.active .game-gradient,
#game.active .game-hud,
#game.active #levelLabel,
#game.active #comboText {
  pointer-events: none !important;
}
#game.active #reticle {
  pointer-events: none !important;
  cursor: none !important;
}

/* 2026-07-14 stable interaction layer: no observer loops, no invisible blockers */
#stage .screen:not(.active),
#stage .screen:not(.active) * {
  pointer-events: none !important;
}
#stage .screen.active {
  pointer-events: auto !important;
}
#speciesIntro:not(.show) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#speciesIntro.show {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#speciesIntro.show .level-preview-grid,
#speciesIntro.show .preview-card {
  pointer-events: auto !important;
}
#speciesIntro.show .preview-card * {
  pointer-events: none !important;
}
#game.active,
#game.active canvas,
#game.active #shitImg,
#game.active .shit,
#game.active [data-shit] {
  cursor: none !important;
}
#game.active #shitImg,
#game.active .shit,
#game.active [data-shit] {
  pointer-events: none !important;
}
\n\n/* ===== CARD UNLOCK PROGRESSION — isolated from existing interaction system ===== */\n.species-card.is-locked{cursor:pointer!important}\n.species-card.is-locked img{object-fit:contain!important;filter:none!important;transform:scale(.78)}\n.species-card.is-locked h3,.species-card.is-locked em{opacity:.22}\n.locked-card-notice{position:fixed;left:50%;top:50%;z-index:100000;max-width:min(760px,86vw);padding:24px 34px;transform:translate(-50%,-50%) scale(.86);border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(5,4,3,.96);box-shadow:0 24px 80px #000;color:#fff;font:800 clamp(16px,1.4vw,26px)/1.25 Arial,sans-serif;text-align:center;letter-spacing:.04em;opacity:0;visibility:hidden;pointer-events:none;transition:.22s ease}\n.locked-card-notice.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}\n.unlock-reveal{position:absolute;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at center,rgba(32,20,12,.82),rgba(0,0,0,.97) 68%);overflow:hidden;pointer-events:auto}\n.unlock-reveal.show{display:flex}\n.unlock-lock-wrap{position:absolute;left:50%;top:50%;width:min(460px,34vw);aspect-ratio:744/996;transform:translate(-50%,-50%);z-index:2}\n#unlockBigLock{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 40px #000);transform-origin:center}\n.unlock-reveal.cracking #unlockBigLock{animation:unlockCrack .72s cubic-bezier(.2,.8,.2,1) forwards}\n@keyframes unlockCrack{0%{transform:scale(.82);opacity:0}20%{transform:scale(1.02);opacity:1}34%{transform:translate(-4px,2px) rotate(-1deg) scale(1.03)}46%{transform:translate(5px,-2px) rotate(1.4deg) scale(1.04)}58%{transform:translate(-7px,3px) rotate(-2deg) scale(1.05);filter:brightness(1.8) drop-shadow(0 0 28px #b87939)}100%{transform:scale(1.3);opacity:0;filter:brightness(2)}}\n.unlock-shards{position:absolute;inset:0;pointer-events:none}\n.unlock-shard{position:absolute;inset:0;background:url('assets/ui/Lock-Big.png') center/contain no-repeat;opacity:0;clip-path:polygon(var(--p));transform:translate(0,0) rotate(0);filter:drop-shadow(0 10px 15px #000)}\n.unlock-reveal.cracking .unlock-shard{animation:shardFly 1s .48s cubic-bezier(.2,.7,.2,1) forwards}\n@keyframes shardFly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.72)}}\n.unlock-cards{position:relative;z-index:4;display:flex;gap:clamp(20px,4vw,78px);align-items:center;justify-content:center;opacity:0;transform:scale(.76);pointer-events:none}\n.unlock-reveal.cards-visible .unlock-cards{animation:cardsReveal .55s cubic-bezier(.16,1,.3,1) forwards}\n@keyframes cardsReveal{to{opacity:1;transform:scale(1)}}\n.unlock-card{position:relative;width:min(390px,29vw);aspect-ratio: .78;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 30px 35px #000)}\n.unlock-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}\n.unlock-object{position:relative;z-index:2;max-width:64%;max-height:58%;object-fit:contain}\n.unlock-species-object{max-width:60%;max-height:52%}\n.unlock-card h2{position:absolute;z-index:3;left:10%;right:10%;bottom:8%;margin:0;color:#fff;text-align:center;font:800 clamp(14px,1.2vw,22px)/1.1 Arial,sans-serif;text-shadow:0 2px 8px #000}\n.unlock-card.empty{display:none}\n@media(max-width:800px){.unlock-lock-wrap{width:48vw}.unlock-card{width:39vw}.unlock-cards{gap:8px}}\n
/* ===== UNLOCK PRESENTATION V2: pre-game, compact, isolated ===== */
.unlock-reveal{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  background:#050403!important;
  contain:strict;
  isolation:isolate;
}
.unlock-lock-wrap{
  width:clamp(190px,19vw,285px)!important;
  max-height:58vh!important;
}
.unlock-cards{gap:clamp(18px,3vw,52px)!important}
.unlock-card{width:clamp(220px,22vw,315px)!important}
@media(max-width:800px){
  .unlock-lock-wrap{width:clamp(155px,42vw,235px)!important}
  .unlock-card{width:min(41vw,245px)!important}
}

/* Locked collection cards use the supplied bag as the complete card face. */
#species .species-card.is-locked::before,
#shits .species-card.is-locked::before{display:none!important}
#species .species-card.is-locked,
#shits .species-card.is-locked{
  background:transparent!important;
  cursor:pointer!important;
}
#species .species-card.is-locked .locked-cover,
#shits .species-card.is-locked .locked-cover{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  transform:none!important;
  filter:none!important;
  border-radius:0!important;
}
#species .species-card.is-locked h3,
#species .species-card.is-locked em,
#shits .species-card.is-locked h3,
#shits .species-card.is-locked em{display:none!important}

/* ===== UNLOCK V3: physically isolated from the scaled game viewport ===== */
body.unlock-running #viewport,
body.unlock-running #rotateNotice { visibility:hidden !important; }
#unlockReveal.unlock-reveal {
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100vh !important;
  display:none !important; z-index:2147483646 !important;
  background:#050403 !important; overflow:hidden !important;
  pointer-events:none !important; transform:none !important; zoom:1 !important;
}
#unlockReveal.unlock-reveal.show { display:flex !important; pointer-events:auto !important; }
#unlockReveal:not(.show), #unlockReveal:not(.show) * {
  visibility:hidden !important; animation:none !important;
}
#unlockReveal.show, #unlockReveal.show * { visibility:visible !important; }
#unlockReveal .unlock-lock-wrap { width:clamp(180px,18vw,270px) !important; max-height:56vh !important; }
#unlockReveal .unlock-card { width:clamp(210px,21vw,300px) !important; }

/* ===== CINEMATIC BETWEEN-LEVEL UNLOCK — lightweight isolated overlay ===== */
body.unlock-running{overflow:hidden!important;background:#000!important}
body.unlock-running #viewport,
body.unlock-running #rotateNotice{visibility:hidden!important;pointer-events:none!important}
#unlockReveal.unlock-reveal{
  position:fixed!important;inset:0!important;z-index:2147483000!important;
  display:none;align-items:center!important;justify-content:center!important;
  background:#000!important;overflow:hidden!important;pointer-events:auto!important;
  opacity:1!important;visibility:hidden!important;contain:layout paint style;
}
#unlockReveal.unlock-reveal.show{display:flex!important;visibility:visible!important}
#unlockReveal.unlock-reveal.leaving{animation:unlockSceneOut .42s ease forwards}
@keyframes unlockSceneOut{to{opacity:0}}
#unlockReveal .unlock-lock-wrap{
  position:absolute!important;left:50%!important;top:50%!important;
  width:clamp(150px,15vw,230px)!important;max-height:52vh!important;
  transform:translate(-50%,-50%)!important;z-index:3!important;
}
#unlockReveal #unlockBigLock{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 18px 32px rgba(0,0,0,.9))!important}
#unlockReveal.cracking #unlockBigLock{animation:cinematicLockBreak .75s cubic-bezier(.2,.8,.2,1) forwards!important}
@keyframes cinematicLockBreak{
  0%{opacity:0;transform:scale(.72)}
  18%{opacity:1;transform:scale(.96)}
  34%{transform:translate(-4px,1px) rotate(-1deg) scale(1)}
  44%{transform:translate(4px,-2px) rotate(1.2deg) scale(1.015)}
  54%{transform:translate(-6px,2px) rotate(-1.6deg) scale(1.025);filter:brightness(1.5) drop-shadow(0 0 18px rgba(189,116,46,.65))}
  100%{opacity:0;transform:scale(1.14);filter:brightness(1.7)}
}
#unlockReveal .unlock-shards{position:absolute!important;inset:0!important;pointer-events:none!important}
#unlockReveal .unlock-shard{will-change:transform,opacity}
#unlockReveal.cracking .unlock-shard{animation-duration:.9s!important}
#unlockReveal .unlock-cards{
  position:relative!important;z-index:5!important;display:flex!important;
  align-items:center!important;justify-content:center!important;
  gap:clamp(48px,8vw,140px)!important;width:min(900px,88vw)!important;
  opacity:0!important;transform:translateY(14px) scale(.92)!important;pointer-events:none!important;
}
#unlockReveal.cards-visible .unlock-cards{animation:cinematicRewardsIn .62s cubic-bezier(.16,1,.3,1) forwards!important}
@keyframes cinematicRewardsIn{to{opacity:1;transform:translateY(0) scale(1)}}
#unlockReveal .unlock-card{
  position:relative!important;width:clamp(190px,22vw,300px)!important;height:clamp(270px,53vh,430px)!important;
  aspect-ratio:auto!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;filter:none!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
#unlockReveal .unlock-card.empty{display:none!important}
#unlockReveal .unlock-frame{display:none!important}
#unlockReveal .unlock-object{
  position:relative!important;z-index:2!important;width:auto!important;height:auto!important;
  max-width:92%!important;max-height:76%!important;object-fit:contain!important;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.9))!important;
  animation:rewardFloat 2.4s ease-in-out infinite!important;
}
#unlockReveal .unlock-species-object{max-width:88%!important;max-height:68%!important}
@keyframes rewardFloat{50%{transform:translateY(-7px)}}
#unlockReveal .unlock-card h2{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
  margin:20px 0 0!important;max-width:100%!important;color:#fff!important;
  font:800 clamp(15px,1.25vw,21px)/1.15 Arial,sans-serif!important;
  text-align:center!important;letter-spacing:.035em!important;text-shadow:0 3px 14px #000!important;
}
#unlockReveal.leaving .unlock-cards{animation:cinematicRewardsOut .4s ease forwards!important}
@keyframes cinematicRewardsOut{to{opacity:0;transform:translateY(-8px) scale(.97)}}
@media(max-width:800px){
  #unlockReveal .unlock-lock-wrap{width:clamp(130px,34vw,190px)!important}
  #unlockReveal .unlock-cards{gap:18px!important;width:94vw!important}
  #unlockReveal .unlock-card{width:min(43vw,230px)!important;height:min(54vh,350px)!important}
}

/* ===== UNLOCK REWARD VISIBILITY FIX V5 ===== */
#unlockReveal .unlock-cards::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:min(980px,92vw);height:min(560px,70vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,218,160,.20) 0%,rgba(179,111,45,.10) 38%,rgba(0,0,0,0) 72%);
  filter:blur(2px);
  pointer-events:none;
  z-index:0;
}
#unlockReveal .unlock-card{
  z-index:2!important;
  isolation:isolate!important;
}
#unlockReveal .unlock-card::before{
  content:"";
  position:absolute;
  left:50%;top:48%;
  width:112%;height:82%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,239,210,.28) 0%,rgba(207,139,69,.13) 40%,rgba(0,0,0,0) 72%);
  filter:blur(8px);
  z-index:0;
  pointer-events:none;
}
#unlockReveal .unlock-object{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:3!important;
  max-width:96%!important;
  max-height:78%!important;
  filter:brightness(1.35) contrast(1.08) saturate(1.08) drop-shadow(0 0 18px rgba(255,221,170,.36)) drop-shadow(0 24px 28px rgba(0,0,0,.82))!important;
}
#unlockReveal .unlock-species-object{
  max-width:94%!important;
  max-height:74%!important;
}
#unlockReveal .unlock-card h2{
  z-index:4!important;
  color:#fff!important;
  text-shadow:0 2px 5px #000,0 0 16px rgba(255,214,153,.55)!important;
}
@media(max-width:800px){
  #unlockReveal .unlock-object{max-width:98%!important;max-height:72%!important}
  #unlockReveal .unlock-species-object{max-width:96%!important;max-height:68%!important}
}


/* ===== CONCEPT-FAITHFUL UNLOCK REVEAL V6 ===== */
/* Match Concept-19: two complete cards, slightly opened like a pair, on pure black. */
#unlockReveal .unlock-cards::before,
#unlockReveal .unlock-card::before{display:none!important}
#unlockReveal .unlock-cards{
  gap:clamp(8px,1.6vw,26px)!important;
  width:min(760px,84vw)!important;
  perspective:1100px!important;
  align-items:center!important;
}
#unlockReveal .unlock-card{
  width:clamp(205px,22vw,310px)!important;
  height:auto!important;
  aspect-ratio:744/996!important;
  overflow:visible!important;
  filter:drop-shadow(0 28px 40px rgba(0,0,0,.92))!important;
  transform-origin:50% 86%!important;
}
#unlockReveal #unlockShitCard{transform:rotate(-7deg) translateX(8px)!important}
#unlockReveal #unlockSpeciesCard{transform:rotate(7deg) translateX(-8px)!important}
#unlockReveal .unlock-frame{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  z-index:1!important;
  opacity:1!important;
  visibility:visible!important;
}
#unlockReveal .unlock-object{
  position:absolute!important;
  z-index:2!important;
  left:10%!important;
  right:10%!important;
  top:13%!important;
  width:80%!important;
  height:62%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.58))!important;
  animation:none!important;
}
#unlockReveal .unlock-species-object{
  left:8%!important;right:8%!important;top:11%!important;
  width:84%!important;height:61%!important;
  max-width:none!important;max-height:none!important;
}
/* The supplied concept has no extra caption under the reward cards. */
#unlockReveal .unlock-card h2{display:none!important}
#unlockReveal.cards-visible #unlockShitCard{animation:conceptLeftCardIn .68s cubic-bezier(.16,1,.3,1) forwards!important}
#unlockReveal.cards-visible #unlockSpeciesCard{animation:conceptRightCardIn .68s cubic-bezier(.16,1,.3,1) forwards!important}
@keyframes conceptLeftCardIn{
  0%{opacity:0;transform:translate3d(36px,22px,0) rotate(0deg) scale(.72)}
  100%{opacity:1;transform:translate3d(8px,0,0) rotate(-7deg) scale(1)}
}
@keyframes conceptRightCardIn{
  0%{opacity:0;transform:translate3d(-36px,22px,0) rotate(0deg) scale(.72)}
  100%{opacity:1;transform:translate3d(-8px,0,0) rotate(7deg) scale(1)}
}
@media(max-width:800px){
  #unlockReveal .unlock-cards{width:92vw!important;gap:2px!important}
  #unlockReveal .unlock-card{width:min(42vw,235px)!important}
  #unlockReveal #unlockShitCard{transform:rotate(-5deg) translateX(4px)!important}
  #unlockReveal #unlockSpeciesCard{transform:rotate(5deg) translateX(-4px)!important}
}

/* Level-opening left card: show the shit name in the same gold as BOK BİLGİSİ. */
.preview-shit-name{
  position:absolute!important;
  z-index:4!important;
  left:38px!important;
  right:38px!important;
  bottom:72px!important;
  margin:0!important;
  color:#d39431!important;
  text-align:center!important;
  text-transform:uppercase!important;
  font:900 30px/1.08 Duplet,Arial,sans-serif!important;
  letter-spacing:.015em!important;
  text-shadow:0 2px 8px rgba(0,0,0,.72)!important;
}
@media(max-width:1500px){.preview-shit-name{font-size:25px!important;bottom:62px!important}}


/* ===== REWARD CARDS DEFINITIVE VISIBILITY FIX V7 =====
   Important declarations on the hidden state previously overrode the reveal animation. */
#unlockReveal.cards-visible .unlock-cards{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0) scale(1)!important;
}
#unlockReveal.cards-visible .unlock-card:not(.empty),
#unlockReveal.cards-visible .unlock-frame,
#unlockReveal.cards-visible .unlock-object{
  opacity:1!important;
  visibility:visible!important;
}
#unlockReveal.cards-visible #unlockShitCard{
  transform:translate3d(8px,0,0) rotate(-7deg) scale(1)!important;
}
#unlockReveal.cards-visible #unlockSpeciesCard{
  transform:translate3d(-8px,0,0) rotate(7deg) scale(1)!important;
}
@media(max-width:800px){
  #unlockReveal.cards-visible #unlockShitCard{transform:translate3d(4px,0,0) rotate(-5deg) scale(1)!important}
  #unlockReveal.cards-visible #unlockSpeciesCard{transform:translate3d(-4px,0,0) rotate(5deg) scale(1)!important}
}


/* ===== SEAMLESS UNLOCK -> LEVEL PREVIEW HANDOFF V8 ===== */
/* Reward pair fades in smoothly, rests for two seconds and fades out. */
#unlockReveal .unlock-cards{
  animation:none!important;
  opacity:0!important;
  visibility:visible!important;
  transform:translate3d(0,14px,0) scale(.96)!important;
  transition:opacity .56s ease,transform .56s cubic-bezier(.2,.8,.2,1)!important;
}
#unlockReveal.cards-visible .unlock-cards{
  animation:none!important;
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
#unlockReveal.cards-visible .unlock-card{
  animation:none!important;
  opacity:1!important;
  visibility:visible!important;
  transition:opacity .56s ease!important;
}
#unlockReveal.cards-fading .unlock-cards,
#unlockReveal.cards-fading .unlock-card{
  animation:none!important;
  opacity:0!important;
  transform:translate3d(0,-10px,0) scale(.975)!important;
  transition:opacity .5s ease,transform .5s ease!important;
}
/* Black remains as one continuous visual surface while the level cards appear above it. */
#unlockReveal.handoff{
  display:flex!important;
  visibility:visible!important;
  pointer-events:none!important;
  z-index:9000!important;
  opacity:1!important;
  background:#000!important;
  transition:opacity .48s ease!important;
}
#unlockReveal.handoff .unlock-lock-wrap,
#unlockReveal.handoff .unlock-cards{display:none!important}
#unlockReveal.handoff-fade{opacity:0!important}
#speciesIntro{z-index:9999!important}

.collection-count{font-size:.38em;color:#c58a35;margin-left:22px;vertical-align:middle;letter-spacing:.04em}

/* SHITART v3 concept-faithful world and level selection */
.world-select{position:fixed;inset:0;z-index:30000;display:none;overflow:hidden;color:#fff;background:#080604 url("assets/ui/Background.png") center/cover no-repeat;contain:layout paint style;isolation:isolate}
.world-select::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(60,39,18,.08),rgba(0,0,0,.38) 58%,rgba(0,0,0,.72));pointer-events:none}
.world-select.show{display:block}
.world-shell{position:relative;width:100%;height:100%;max-width:none;margin:0;padding:3.2vh 4.5vw 4vh;box-sizing:border-box;contain:layout paint}
.world-brand{height:13vh;display:flex;align-items:center;justify-content:center;pointer-events:none}
.world-brand img{display:block;max-height:100%;width:auto;object-fit:contain}
.world-title{position:relative;margin:1.2vh 0 3.2vh;text-align:center;font-size:clamp(54px,7vw,126px);line-height:.9;letter-spacing:-.055em;color:#fff;font-weight:1000;text-shadow:0 8px 25px rgba(0,0,0,.65)}
.world-grid{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.7vw,34px);width:min(92vw,1580px);margin:0 auto;align-items:center}
.world-card{appearance:none;border:0;padding:0;background:transparent;position:relative;min-width:0;cursor:pointer;transform:translateZ(0);transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease;will-change:transform}
.world-card:hover,.world-card:focus-visible{transform:translate3d(0,-10px,0) scale(1.018);outline:none}
.world-card-frame{position:relative;width:100%;aspect-ratio:0.63;overflow:hidden;border-radius:2.6% / 1.7%;background:rgba(4,3,2,.58);box-shadow:0 18px 48px rgba(0,0,0,.42)}
.world-card-frame>img.world-card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.world-card-meta{position:absolute;left:8%;right:8%;bottom:5.8%;display:flex;flex-direction:column;align-items:center;z-index:4;text-shadow:0 4px 12px #000}
.world-card-name{font-size:clamp(19px,2.15vw,40px);font-weight:1000;color:#a66f2e;line-height:1;text-transform:uppercase}
.world-card-progress{margin-top:10px;font-size:clamp(14px,1.25vw,24px);font-weight:900;color:#b27a37}
.world-card.locked{filter:brightness(.31) saturate(.45);cursor:pointer}
.world-card.locked:hover{filter:brightness(.43) saturate(.6)}
.world-card-chain{position:absolute;inset:4% 1% 4%;z-index:3;width:98%;height:92%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.65))}
.world-card:not(.locked) .world-card-chain{display:none}
.level-select-panel{position:absolute;inset:0;z-index:10;display:none;box-sizing:border-box;padding:3.2vh 7.5vw 5vh;background:#080604 url("assets/ui/Background.png") center/cover no-repeat;contain:layout paint style}
.level-select-panel::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22);pointer-events:none}
.level-select-panel.show{display:block}
.world-back{position:absolute;left:2.6vw;top:9.8vh;z-index:3;border:0;background:none;color:#fff;font-size:clamp(38px,4vw,70px);line-height:1;cursor:pointer;transition:transform .2s ease}
.world-back:hover{transform:translateX(-5px)}
.level-world-title{position:relative;z-index:2;margin:6.7vh 0 5.5vh;text-align:left;font-size:clamp(44px,5.5vw,92px);line-height:1;color:#8f5e27;font-weight:1000;letter-spacing:-.04em}
.level-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:clamp(8px,.8vw,16px);width:100%;max-height:none;overflow:visible;padding:0;contain:layout paint}
.level-grid button{appearance:none;aspect-ratio:1;background:rgba(0,0,0,.18);border:1px solid rgba(195,157,110,.42);border-radius:0;color:#8f5e27;font-weight:1000;font-size:clamp(15px,1.35vw,27px);cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease;transform:translateZ(0)}
.level-grid button:hover,.level-grid button:focus-visible{background:rgba(20,13,7,.9);border-color:#a9783b;transform:scale(1.045);outline:none}
.level-grid button.current{background:#080706;border-color:#caa06d;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.level-grid button.locked{opacity:.2;cursor:not-allowed}
.world-unlock{position:fixed;inset:0;background:#000;z-index:31000;display:none;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;contain:layout paint style}
.world-unlock.show{display:flex}.world-chain{position:absolute;width:min(420px,33vw);z-index:3;transition:opacity .62s ease,transform .62s ease;will-change:transform,opacity}.world-unlock-image{width:min(430px,34vw);opacity:0;transform:scale(.72);transition:opacity .82s ease,transform .82s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}.world-unlock h2{color:#9a672d;font-size:clamp(42px,5vw,82px);opacity:0;margin-top:18px;transition:opacity .8s ease}.world-unlock.revealed .world-chain{opacity:0;transform:scale(1.22) rotate(7deg)}.world-unlock.revealed .world-unlock-image,.world-unlock.revealed h2{opacity:1;transform:scale(1)}
@media(max-width:1100px){.world-grid{gap:10px}.world-shell{padding-left:2vw;padding-right:2vw}.level-grid{grid-template-columns:repeat(10,1fr)}.level-world-title{margin-top:8vh}}
#speciesIntro .preview-card.info-preview{min-height:720px;transform:none!important}
body[data-world="forest"] #ambientCanvas,body[data-world="rock"] #ambientCanvas,body[data-world="canyon"] #ambientCanvas,body[data-world="volcano"] #ambientCanvas{filter:none}

/* v3 world theme correction — exact supplied world art, no Earth bleed-through */
body[data-world="earth"] #stage{background-image:url("assets/ui/Background.png")!important}
body[data-world="forest"] #stage{background-image:url("assets/ui/W-Forest-Background.png")!important}
body[data-world="rock"] #stage{background-image:url("assets/ui/W-Rock-Background.png")!important}
body[data-world="canyon"] #stage{background-image:url("assets/ui/W-Canyon-Background.png")!important}
body[data-world="volcano"] #stage{background-image:url("assets/ui/W-Volcano-Background.png")!important}
body:not([data-world="earth"]) #ambientCanvas{display:none!important}
.world-select{background:#080604 url("assets/ui/Background.png") center/cover no-repeat!important}
.world-shell{padding-top:2.4vh!important}
.world-brand{height:14vh!important}
.world-title{margin:.2vh 0 2.5vh!important}
.world-grid{width:min(91vw,1600px)!important;gap:clamp(16px,1.45vw,30px)!important}
.world-card-frame{aspect-ratio:0.6667!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.world-card-frame>img.world-card-art{object-fit:contain!important}
.world-card-meta{bottom:3.2%!important;z-index:5!important}
.world-card-progress{font-size:clamp(15px,1.35vw,26px)!important;color:#b57931!important;text-shadow:0 3px 10px #000!important}
.world-card-chain{inset:5% 0 4%!important;width:100%!important;height:91%!important;object-fit:contain!important}
.level-select-panel{background:#080604 url("assets/ui/Background.png") center/cover no-repeat!important;padding-top:2.4vh!important}
.level-select-panel .world-brand{height:13vh!important}
.level-world-title{position:absolute!important;left:7.5vw!important;top:8.5vh!important;margin:0!important}
.level-grid{margin-top:5.5vh!important}


/* v3.0 concept-accurate WORLD / LEVEL SELECT — final */
.world-select{
  background:#070503 url("assets/ui/Background.png") center/cover no-repeat!important;
}
.world-select::before{
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.28) 54%,rgba(0,0,0,.52))!important;
}
.world-shell{
  padding:2.5vh 4.2vw 3vh!important;
  display:flex;
  flex-direction:column;
}
.world-brand{
  flex:0 0 auto;
  height:12.5vh!important;
}
.world-title{
  flex:0 0 auto;
  margin:.4vh 0 3vh!important;
  font-size:clamp(62px,7.2vw,132px)!important;
  line-height:.86!important;
}
.world-grid{
  flex:1 1 auto;
  width:min(91vw,1540px)!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:center!important;
  gap:clamp(18px,1.55vw,32px)!important;
  margin:0 auto!important;
  min-height:0;
}
.world-card{
  width:100%;
  max-height:58vh;
}
.world-card-frame{
  aspect-ratio:2/3!important;
  overflow:visible!important;
  background:transparent!important;
}
.world-card-frame>img.world-card-art{
  object-fit:contain!important;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.58));
}
.world-card-meta{
  bottom:3.6%!important;
  z-index:6!important;
}
.world-card-progress{
  font-size:clamp(15px,1.28vw,25px)!important;
  color:#fff!important;
  text-shadow:0 3px 9px #000,0 0 2px #000!important;
}
.world-card.locked{
  filter:brightness(.34) saturate(.58)!important;
}
.world-card.locked:hover{
  filter:brightness(.44) saturate(.7)!important;
}
.world-card-chain{
  inset:7% -2% 8%!important;
  width:104%!important;
  height:85%!important;
  object-fit:contain!important;
  z-index:5!important;
}

.level-select-panel{
  background:#070503 url("assets/ui/Background.png") center/cover no-repeat!important;
  padding:3vh 8.2vw 4vh!important;
}
.level-select-panel::before{
  background:rgba(0,0,0,.18)!important;
}
.level-select-panel .world-brand{
  height:12.5vh!important;
}
.world-back{
  left:2.6vw!important;
  top:10.1vh!important;
  font-size:clamp(42px,4vw,72px)!important;
}
.level-world-title{
  left:7.6vw!important;
  top:10.1vh!important;
  font-size:clamp(48px,5.3vw,92px)!important;
  color:#9c692d!important;
}
.level-grid{
  margin-top:5.8vh!important;
  grid-template-columns:repeat(15,minmax(0,1fr))!important;
  gap:clamp(8px,.72vw,14px)!important;
  width:100%!important;
}
.level-grid button{
  aspect-ratio:1!important;
  min-width:0;
  background:rgba(0,0,0,.16)!important;
  border:1px solid rgba(188,151,109,.44)!important;
  color:#a16b2e!important;
  font-size:clamp(14px,1.25vw,25px)!important;
}
.level-grid button.current{
  background:rgba(7,6,5,.94)!important;
  border-color:#d7bc99!important;
}
.level-grid button.locked{
  color:transparent!important;
  opacity:.26!important;
}
@media(max-width:1100px){
  .world-grid{gap:10px!important;width:96vw!important}
  .world-title{font-size:clamp(48px,8vw,88px)!important}
  .level-grid{grid-template-columns:repeat(10,1fr)!important}
}

/* v3.0 exact reference UI + performance final override */
.world-shell{padding:2.2vh 3.8vw 3vh!important}
.world-brand{height:12vh!important}
.world-title{margin:.2vh 0 2.2vh!important;font-size:clamp(64px,7vw,128px)!important}
.world-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(12px,1.25vw,24px)!important;width:min(92vw,1560px)!important;align-items:center!important}
.world-card{display:block!important;visibility:visible!important;opacity:1!important;min-width:0!important;max-height:none!important}
.world-card-frame{display:block!important;position:relative!important;width:100%!important;aspect-ratio:2/3!important;visibility:visible!important;opacity:1!important}
.world-card-frame>img.world-card-art{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;height:100%!important;object-fit:contain!important}
.world-card-meta{bottom:4.8%!important}
.world-card-progress{font-size:clamp(15px,1.22vw,24px)!important;color:#fff!important}
.world-card.locked{filter:brightness(.34) saturate(.55)!important}
.world-card-chain{display:block!important;inset:2% -4% 3%!important;width:108%!important;height:95%!important;object-fit:contain!important}
.world-card:not(.locked) .world-card-chain{display:none!important}

.level-select-panel{padding:2.5vh 7.2vw 4vh!important}
.level-select-panel .world-brand{height:12vh!important}
.world-back{left:2.5vw!important;top:10.4vh!important}
.level-world-title{left:7.5vw!important;top:10.6vh!important;font-size:clamp(48px,5vw,88px)!important}
.level-grid{display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr))!important;grid-template-rows:repeat(10,minmax(0,1fr))!important;gap:clamp(6px,.62vw,12px)!important;margin-top:5vh!important;height:72vh!important;width:100%!important;overflow:hidden!important;contain:layout paint style!important}
.level-grid button{aspect-ratio:auto!important;min-height:0!important;font-size:clamp(13px,1.05vw,21px)!important;will-change:auto!important;transition:background .12s ease,border-color .12s ease!important}
.level-grid button:hover,.level-grid button:focus-visible{transform:none!important}

.collection-count{font-size:.38em!important;color:#fff!important;margin-left:22px!important}
#speciesCount,#shitsCount{display:inline-block!important;visibility:visible!important;opacity:1!important}

/* avoid expensive effects outside active gameplay */
body.world-ui-open #ambientCanvas,body.world-ui-open #gameCanvas{visibility:hidden!important}

/* v3.0 exact component UI repair — supplied cards are card assets, never full-screen screenshots */
.world-select{background:#080604 url("assets/ui/Background.png") center/cover no-repeat!important}
.world-select::before{background:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.34))!important}
.world-shell{padding:2.1vh 3.8vw 3.2vh!important}
.world-brand{height:12.2vh!important}
.world-title{
  margin:.35vh 0 3.2vh!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(68px,7.15vw,132px)!important;
  font-weight:900!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
  color:#fff!important;
  background:none!important;
  filter:none!important;
  text-shadow:0 7px 18px rgba(0,0,0,.72)!important;
}
.world-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(18px,1.55vw,30px)!important;
  width:min(91vw,1540px)!important;
  margin:0 auto!important;
  align-items:center!important;
}
.world-card{display:block!important;opacity:1!important;visibility:visible!important;filter:none!important}
.world-card-frame{aspect-ratio:2/3!important;width:100%!important;overflow:visible!important}
.world-card-frame>img.world-card-art{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.world-card:hover,.world-card:focus-visible{transform:translate3d(0,-8px,0) scale(1.018)!important}
.world-card.locked{filter:brightness(.34) saturate(.55)!important}
.world-card.locked:hover{filter:brightness(.43) saturate(.62)!important}
.world-card-meta{bottom:-5.2%!important;left:0!important;right:0!important}
.world-card-progress{font-size:clamp(16px,1.35vw,25px)!important;color:#fff!important;text-shadow:0 3px 10px #000!important}
.world-card-chain{inset:1.5% -5% 1%!important;width:110%!important;height:98%!important;object-fit:contain!important}

/* Level Select follows the supplied reference: logo top centre, title left, compact 15-column grid. */
.level-select-panel{padding:2.1vh 7.5vw 4vh!important;background:#080604 url("assets/ui/Background.png") center/cover no-repeat!important}
.level-select-panel .world-brand{height:12.2vh!important}
.world-back{left:2.5vw!important;top:10.3vh!important;font-size:clamp(38px,4vw,66px)!important}
.level-world-title{left:7.6vw!important;top:10.2vh!important;font-size:clamp(44px,4.9vw,84px)!important;color:#8f5e27!important}
.level-grid{
  grid-template-columns:repeat(15,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  gap:clamp(7px,.66vw,12px)!important;
  width:100%!important;
  height:auto!important;
  max-height:70vh!important;
  margin-top:6vh!important;
  overflow:visible!important;
}
.level-grid button{
  aspect-ratio:1!important;
  min-height:0!important;
  border:1px solid rgba(194,158,113,.43)!important;
  background:rgba(0,0,0,.18)!important;
  color:#8f5e27!important;
  font-size:clamp(14px,1.18vw,23px)!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
.level-grid button.unlocked{cursor:pointer!important;opacity:1!important}
.level-grid button.unlocked:hover,.level-grid button.unlocked:focus-visible{
  transform:translateY(-3px) scale(1.045)!important;
  background:rgba(19,12,6,.95)!important;
  border-color:#c28b47!important;
  box-shadow:0 8px 20px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.08)!important;
  outline:none!important;
}
.level-grid button.locked{
  opacity:.24!important;
  cursor:default!important;
  color:rgba(143,94,39,.58)!important;
  pointer-events:none!important;
  filter:saturate(.55)!important;
}
.level-grid button.locked:hover,.level-grid button.locked:focus-visible{
  transform:none!important;
  background:rgba(0,0,0,.18)!important;
  border-color:rgba(194,158,113,.43)!important;
  box-shadow:none!important;
  outline:none!important;
}

/* Collection counter: fixed at the right side above the last card, exactly X/100. */
.species-screen h1{position:relative!important;width:100%!important;text-align:center!important}
.species-screen h1 .collection-count{
  position:absolute!important;
  right:6.5vw!important;
  top:50%!important;
  transform:translateY(-42%)!important;
  display:block!important;
  margin:0!important;
  color:#fff!important;
  font-size:.38em!important;
  font-weight:900!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
@media(max-width:1100px){
  .world-grid{width:96vw!important;gap:10px!important}
  .level-grid{grid-template-columns:repeat(10,minmax(0,1fr))!important;max-height:72vh!important}
  .species-screen h1 .collection-count{right:3vw!important}
}


/* ===== V3 FINAL CARD PROPORTION + COLLECTION COUNTER FIX ===== */
/* Preserve the original portrait ratio of the centre information card.
   It is deliberately slightly taller than the two visual cards. */
#speciesIntro .level-preview-grid{
  grid-template-columns:430px 500px 430px!important;
  height:760px!important;
  align-items:center!important;
}
#speciesIntro .preview-card{
  height:650px!important;
  min-height:650px!important;
}
#speciesIntro .preview-card.fact-preview{
  height:710px!important;
  min-height:710px!important;
  align-self:center!important;
}
#speciesIntro .preview-card .preview-frame{
  object-fit:contain!important;
}
#speciesIntro .fact-preview .preview-copy{
  top:168px!important;
  left:58px!important;
  right:58px!important;
}
#speciesIntro .fact-preview .preview-copy p{
  margin-top:42px!important;
}

/* Counters remain separate from translated headings and sit above the final card. */
#species.species-screen h1,
#shits.species-screen h1{
  position:relative!important;
  overflow:visible!important;
}
#species.species-screen .collection-count,
#shits.species-screen .collection-count{
  position:absolute!important;
  right:5.7vw!important;
  top:56%!important;
  transform:translateY(-50%)!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  margin:0!important;
  color:#fff!important;
  font-size:.38em!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  z-index:20!important;
}
@media(max-width:1500px){
  #speciesIntro .level-preview-grid{grid-template-columns:390px 455px 390px!important;gap:30px!important}
  #speciesIntro .preview-card{height:590px!important;min-height:590px!important}
  #speciesIntro .preview-card.fact-preview{height:650px!important;min-height:650px!important}
  #speciesIntro .fact-preview .preview-copy{top:152px!important}
}
@media(max-width:1100px){
  #species.species-screen .collection-count,
  #shits.species-screen .collection-count{right:3vw!important}
}


/* v3.0 home progress summary and lightweight world ambience */
.local-progress-summary{
  position:absolute;
  left:50%;
  bottom:224px;
  transform:translateX(-50%);
  z-index:32;
  width:min(1120px,82vw);
  text-align:center;
  font-family:Core,Arial,sans-serif;
  font-size:clamp(18px,1.45vw,29px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.025em;
  color:#fff;
  text-shadow:0 4px 14px rgba(0,0,0,.9);
  white-space:nowrap;
  pointer-events:none;
}
.local-progress-summary .value{color:#ff2028}
.home-edition-summary{
  position:absolute;
  right:38px;
  bottom:116px;
  z-index:33;
  width:280px;
  text-align:right;
  color:#fff;
  font-family:Core,Arial,sans-serif;
  font-weight:1000;
  text-transform:uppercase;
  text-shadow:0 5px 16px rgba(0,0,0,.95);
  pointer-events:none;
}
.home-edition-summary span{display:block;line-height:.82;letter-spacing:-.055em}
.home-edition-summary .edition-worlds{font-size:31px}
.home-edition-summary .edition-levels{font-size:45px}
.home-edition-summary .edition-collection{margin-top:8px;font-size:18px;line-height:1.02;letter-spacing:-.025em}
#menu:not(.active) .local-progress-summary,
#menu:not(.active) .home-edition-summary{display:none}
body:not([data-world="earth"]) #stage.game-active #ambientCanvas{display:block!important;opacity:1!important}
#stage:not(.game-active) #ambientCanvas{visibility:hidden}
@media(max-width:1100px){
  .local-progress-summary{bottom:207px;font-size:18px;width:90vw}
  .home-edition-summary{right:24px;bottom:106px;width:220px}
  .home-edition-summary .edition-worlds{font-size:24px}
  .home-edition-summary .edition-levels{font-size:36px}
  .home-edition-summary .edition-collection{font-size:14px}
}
@media(max-width:760px){
  .local-progress-summary{bottom:192px;font-size:14px;white-space:normal;line-height:1.15}
  .home-edition-summary{right:14px;bottom:96px;width:150px}
  .home-edition-summary .edition-worlds{font-size:17px}
  .home-edition-summary .edition-levels{font-size:25px}
  .home-edition-summary .edition-collection{font-size:10px}
}

/* ===== v3.0 TYPOGRAPHY + SPACING POLISH ===== */
#menu .local-progress-summary{
  bottom:258px!important;
  width:min(1260px,84vw)!important;
  font-family:Duplet,Arial,sans-serif!important;
  font-size:clamp(18px,1.28vw,26px)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.005em!important;
  word-spacing:.12em!important;
}
#menu .local-progress-summary .value{
  display:inline-block;
  margin-left:3px;
  margin-right:13px;
  color:#ff2028!important;
}
#menu .world-stats{
  bottom:146px!important;
}
#menu .home-edition-summary{
  right:42px!important;
  bottom:112px!important;
  width:300px!important;
  font-family:Duplet,Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:0!important;
}
#menu .home-edition-summary span{
  line-height:.9!important;
  letter-spacing:0!important;
}
#menu .home-edition-summary .edition-worlds{
  font-size:32px!important;
}
#menu .home-edition-summary .edition-levels{
  margin-top:4px!important;
  font-size:47px!important;
}
#menu .home-edition-summary .edition-collection{
  margin-top:12px!important;
  font-size:18px!important;
  line-height:1.05!important;
  letter-spacing:.02em!important;
}

/* Raise names and Latin names inside collection cards. */
#species .species-card h3,
#shits .species-card h3{
  bottom:18.2%!important;
}
#species .species-card em,
#shits .species-card em{
  bottom:11.2%!important;
}

@media(max-width:1100px){
  #menu .local-progress-summary{bottom:242px!important;font-size:17px!important;width:88vw!important}
  #menu .home-edition-summary{right:24px!important;bottom:104px!important;width:230px!important}
  #menu .home-edition-summary .edition-worlds{font-size:25px!important}
  #menu .home-edition-summary .edition-levels{font-size:37px!important}
  #menu .home-edition-summary .edition-collection{font-size:14px!important}
}
@media(max-width:760px){
  #menu .local-progress-summary{bottom:226px!important;font-size:13px!important;line-height:1.25!important;white-space:normal!important}
  #menu .local-progress-summary .value{margin-right:7px!important}
  #menu .home-edition-summary{right:14px!important;bottom:94px!important;width:160px!important}
  #menu .home-edition-summary .edition-worlds{font-size:18px!important}
  #menu .home-edition-summary .edition-levels{font-size:27px!important}
  #menu .home-edition-summary .edition-collection{font-size:10px!important}
}

/* v3 level select visibility polish - locked levels remain readable, unlocked hover is never clipped */
.level-grid{
  contain:layout style!important;
  overflow:visible!important;
  padding:8px!important;
}
.level-grid button{
  position:relative!important;
  z-index:1!important;
  box-sizing:border-box!important;
}
.level-grid button.unlocked:hover,
.level-grid button.unlocked:focus-visible{
  z-index:5!important;
  transform:translateY(-3px) scale(1.045)!important;
  border-style:solid!important;
  border-width:2px!important;
  border-color:#c69552!important;
  box-shadow:0 0 0 1px rgba(255,215,154,.16),0 8px 22px rgba(0,0,0,.5),0 0 18px rgba(175,112,42,.18)!important;
}
.level-grid button.locked{
  opacity:.72!important;
  color:rgba(166,111,46,.82)!important;
  background:rgba(24,16,9,.38)!important;
  border:2px solid rgba(151,105,54,.68)!important;
  filter:none!important;
  cursor:default!important;
  pointer-events:none!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)!important;
}
.level-grid button.locked:hover,
.level-grid button.locked:focus-visible{
  transform:none!important;
  background:rgba(24,16,9,.38)!important;
  border:2px solid rgba(151,105,54,.68)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)!important;
}


/* FINAL TWO VISUAL FIXES: keep intro curtain black but hide the level copy behind cards. */
#levelCurtain.cards-only b,
#levelCurtain.cards-only span {
  display: none !important;
}

/* v3 performance-only rendering containment; no visual or gameplay features removed. */
#gameCanvas,#ambientCanvas{contain:strict;backface-visibility:hidden;transform:translateZ(0)}


/* ============================================================
   SHITART v4.0 — AAA GAMEPLAY / CAREER / CINEMATIC LAYER
   ============================================================ */
.v4-completion{position:absolute;right:46px;bottom:146px;z-index:36;width:310px;padding:0;border:0;background:transparent;color:#fff;text-align:left;font-family:Duplet,Core,sans-serif;cursor:pointer;opacity:.9;transition:opacity .2s ease,transform .2s ease}
.v4-completion:hover{opacity:1;transform:translateY(-3px)}
.v4-completion span{display:block;font-size:17px;font-weight:850;letter-spacing:.12em}
.v4-completion b{position:absolute;right:0;top:-4px;color:#bb1f16;font-size:26px;line-height:1}
.v4-completion i{display:block;height:3px;margin-top:9px;background:rgba(255,255,255,.18);overflow:hidden}
.v4-completion em{display:block;width:100%;height:100%;transform-origin:left center;background:#bb1f16;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.achievement-panel{position:fixed;inset:0;z-index:60000;display:grid;place-items:center;background:rgba(0,0,0,.88);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;font-family:Duplet,Core,sans-serif}
.achievement-panel.show{opacity:1;visibility:visible;pointer-events:auto}
.achievement-panel-card{position:relative;width:min(1120px,86vw);max-height:86vh;overflow:auto;padding:62px 68px 56px;background:linear-gradient(145deg,rgba(28,20,13,.98),rgba(5,4,3,.99));border:1px solid rgba(199,150,85,.5);box-shadow:0 30px 100px #000;color:#fff}
#achievementPanelClose{position:absolute;right:24px;top:18px;border:0;background:none;color:#fff;font:42px/1 Duplet,Core,sans-serif;cursor:pointer}
#achievementPanelEyebrow{color:#b9792e;font-size:15px;font-weight:900;letter-spacing:.2em}
#achievementPanelTitle{margin:8px 0 8px;font-size:58px;letter-spacing:.04em}
.achievement-completion{position:absolute;right:70px;top:62px;color:#b51f17;font-size:58px;font-weight:1000}
.achievement-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.achievement-item{display:flex;align-items:center;gap:18px;min-height:92px;padding:15px 19px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035)}
.achievement-item>i{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(190,135,66,.55);color:#d79a4b;font-style:normal;font-size:22px;font-weight:1000}
.achievement-item b{display:block;font-size:17px;line-height:1.2}.achievement-item small{display:block;margin-top:7px;color:#8d6a43;font-weight:900;letter-spacing:.14em}
.achievement-item.locked{opacity:.42;filter:saturate(.25)}.achievement-item.earned{border-color:rgba(203,147,70,.72);box-shadow:inset 0 0 30px rgba(132,71,19,.12)}

.level-grade{position:absolute;inset:0;z-index:22000;display:grid;place-items:center;background:rgba(0,0,0,.94);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .42s ease,visibility .42s ease;font-family:Duplet,Core,sans-serif}
.level-grade.show{opacity:1;visibility:visible;pointer-events:auto}.level-grade.leaving{opacity:0}
.grade-card{position:relative;width:1040px;min-height:700px;padding:48px 64px 50px;text-align:center;color:#fff;background:radial-gradient(circle at 50% 22%,rgba(108,57,19,.22),transparent 42%),linear-gradient(145deg,#17100b,#050403 68%);border:1px solid rgba(197,143,72,.55);box-shadow:0 40px 130px #000;transform:translateY(30px) scale(.96);transition:transform .52s cubic-bezier(.2,.86,.2,1)}
.level-grade.show .grade-card{transform:translateY(0) scale(1)}
#gradeEyebrow{color:#bd792c;font-size:16px;font-weight:950;letter-spacing:.22em}
.grade-rank{margin:14px auto 2px;color:#fff;font-size:132px;line-height:.86;font-weight:1000;letter-spacing:-.045em;text-shadow:0 0 50px rgba(255,255,255,.18)}
.grade-rank[data-rank="S"]{color:#e4aa55;text-shadow:0 0 55px rgba(229,152,56,.35)}
.grade-rank[data-rank="SHIT PERFECT"]{font-size:75px;color:#e6ae55;text-shadow:0 0 65px rgba(229,152,56,.42)}
#gradeTitle{margin:13px 0 24px;font-size:29px;letter-spacing:.12em}
.grade-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.14)}
.grade-metrics div{min-height:112px;display:flex;flex-direction:column;justify-content:center;background:#0c0907;padding:13px}
.grade-metrics div:last-child{grid-column:span 2}.grade-metrics span{color:#8e6841;font-size:13px;font-weight:900;letter-spacing:.1em}.grade-metrics b{margin-top:8px;font-size:25px}
.grade-score-line{display:flex;justify-content:center;align-items:center;gap:20px;margin:24px 0 18px;color:#a77b4c;font-weight:900;letter-spacing:.12em}.grade-score-line b{color:#fff;font-size:34px}
#gradeContinue{min-width:260px;padding:14px 28px;border:1px solid #fff;background:#fff;color:#000;font:900 18px Duplet,Core,sans-serif;letter-spacing:.08em;cursor:pointer;transition:.18s}#gradeContinue:hover{background:#a51d16;border-color:#a51d16;color:#fff;transform:translateY(-2px)}

#speciesIntro{overflow:hidden!important;background:#020201!important;isolation:isolate}
#speciesIntro::before{content:"";position:absolute;inset:-5%;z-index:-2;background-image:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.82)),var(--intro-bg);background-position:center;background-size:cover;transform:scale(1.08);animation:introWorldDrift 8s ease-in-out infinite alternate;will-change:transform}
#speciesIntro::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 48%,transparent 0,rgba(0,0,0,.22) 42%,rgba(0,0,0,.72) 100%)}
@keyframes introWorldDrift{from{transform:scale(1.08) translate3d(-1.2%,0,0)}to{transform:scale(1.13) translate3d(1.2%,-.8%,0)}}
#speciesIntro .level-preview-grid{perspective:1200px!important}
#speciesIntro .preview-card{opacity:0!important;will-change:transform,opacity!important;transition:transform .7s cubic-bezier(.16,.85,.24,1),opacity .46s ease!important}
#speciesIntro.show .preview-card{opacity:1!important}
#speciesIntro.show .preview-card:nth-child(1){transform:translate3d(0,0,0) rotateY(3deg) rotate(-1.5deg)!important}
#speciesIntro.show .preview-card:nth-child(2){transform:translate3d(0,-8px,45px) scale(1.035)!important}
#speciesIntro.show .preview-card:nth-child(3){transform:translate3d(0,0,0) rotateY(-3deg) rotate(1.5deg)!important}
#speciesIntro.closing .preview-card:nth-child(1){transform:translate3d(-680px,90px,0) rotate(-18deg) scale(.88)!important;opacity:0!important}
#speciesIntro.closing .preview-card:nth-child(2){transform:translate3d(0,-680px,0) scale(.78)!important;opacity:0!important}
#speciesIntro.closing .preview-card:nth-child(3){transform:translate3d(680px,90px,0) rotate(18deg) scale(.88)!important;opacity:0!important}
#speciesIntro.show .species-object{animation:v4SpeciesAlive 1.9s ease-in-out infinite alternate!important;transform-origin:50% 58%}
#speciesIntro.show .shit-object{animation:v4ShitTurn 2.4s ease-in-out infinite alternate!important;transform-origin:50% 62%}
@keyframes v4SpeciesAlive{from{transform:translateY(2px) rotate(-1deg) scale(.99)}to{transform:translateY(-10px) rotate(2deg) scale(1.035)}}
@keyframes v4ShitTurn{from{transform:translateY(2px) rotate(-1.4deg) scale(.99)}to{transform:translateY(-5px) rotate(1.4deg) scale(1.02)}}
.level-mission{position:absolute;left:52px;right:52px;bottom:54px;padding-top:15px;border-top:1px solid rgba(190,126,50,.45);text-align:center}.level-mission small{display:block;color:#b8752b;font-size:12px;font-weight:1000;letter-spacing:.18em}.level-mission b{display:block;margin-top:8px;color:#fff;font-size:14px;line-height:1.35;letter-spacing:.04em}

.level-grid button{position:relative}.level-grid button>span{position:relative;z-index:1}.level-rank{position:absolute;right:5px;bottom:3px;color:#c1843c;font-size:9px;font-weight:1000;line-height:1;letter-spacing:.02em}.level-rank.rank-s,.level-rank.rank-shit-perfect{color:#fff;text-shadow:0 0 8px #d69339}

@media(max-width:1100px){.grade-card{width:86vw;min-height:0;padding:34px}.grade-rank{font-size:88px}.grade-metrics{grid-template-columns:repeat(4,1fr)}.achievement-list{grid-template-columns:1fr}.v4-completion{right:28px;bottom:125px;width:260px}}

/* v4.0 hotfix: remove home edition summary */
#homeEditionSummary,.home-edition-summary,#menu .home-edition-summary{display:none !important;}


/* v4 hotfix: remove bottom-right edition summary from home screen */
#homeEditionSummary, .home-edition-summary{display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;}


/* ===== v4.0 professional stability / level-history hotfix ===== */
#homeEditionSummary,
.home-edition-summary,
#levelMission,
.level-mission{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* A played level is visually distinct even when it was completed before v4 ranks existed. */
.level-grid button.played{
  background:linear-gradient(145deg,rgba(91,54,20,.78),rgba(25,15,8,.9))!important;
  border-color:rgba(194,132,61,.92)!important;
  box-shadow:inset 0 0 20px rgba(154,91,27,.13)!important;
}
.level-grid button.has-grade.rank-c{
  background:linear-gradient(145deg,rgba(94,39,31,.86),rgba(27,12,10,.94))!important;
  border-color:rgba(159,76,61,.92)!important;
}
.level-grid button.has-grade.rank-b{
  background:linear-gradient(145deg,rgba(103,61,28,.88),rgba(30,18,9,.94))!important;
  border-color:rgba(185,116,54,.96)!important;
}
.level-grid button.has-grade.rank-a{
  background:linear-gradient(145deg,rgba(125,82,29,.9),rgba(35,23,9,.95))!important;
  border-color:rgba(218,158,70,.98)!important;
}
.level-grid button.has-grade.rank-s{
  background:linear-gradient(145deg,rgba(132,111,69,.92),rgba(38,31,18,.96))!important;
  border-color:rgba(244,216,151,.98)!important;
  box-shadow:inset 0 0 22px rgba(255,220,142,.16),0 0 12px rgba(208,150,61,.12)!important;
}
.level-grid button.has-grade.rank-shit-perfect{
  background:linear-gradient(145deg,rgba(131,22,18,.94),rgba(40,10,7,.96))!important;
  border-color:#f0b353!important;
  box-shadow:inset 0 0 24px rgba(255,172,58,.18),0 0 14px rgba(174,34,22,.18)!important;
}
.level-grid button .level-number{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  z-index:1!important;
}
.level-grid button .level-rank{
  position:absolute!important;
  left:5px!important;
  top:4px!important;
  right:auto!important;
  bottom:auto!important;
  z-index:3!important;
  font-size:clamp(8px,.62vw,12px)!important;
  line-height:1!important;
  color:#f1c078!important;
  text-shadow:0 2px 5px #000!important;
}
.level-grid button .level-score{
  position:absolute!important;
  right:5px!important;
  bottom:4px!important;
  z-index:3!important;
  color:rgba(255,255,255,.8)!important;
  font-size:clamp(7px,.54vw,10px)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-shadow:0 2px 5px #000!important;
}
.level-grid button .level-played-mark{
  position:absolute!important;
  right:5px!important;
  bottom:3px!important;
  z-index:3!important;
  color:#d29a50!important;
  font-size:clamp(8px,.65vw,12px)!important;
  font-weight:1000!important;
}
.level-grid button.unlocked:hover,
.level-grid button.unlocked:focus-visible{
  filter:brightness(1.14)!important;
}
.level-grid button.locked{
  filter:none!important;
}


/* ========================================================================== 
   SHITART v4 — UNIFIED ROUNDED UI
   Visual-only override. Windows, alerts, cards and rectangular controls now
   share the same curved design language as the existing pill buttons.
   ========================================================================== */
body.rounded-ui{
  --ui-radius-xs:10px;
  --ui-radius-sm:14px;
  --ui-radius-md:20px;
  --ui-radius-lg:30px;
  --ui-radius-xl:40px;
}

/* Large windows and dialogs */
body.rounded-ui .achievement-panel-card,
body.rounded-ui .grade-card,
body.rounded-ui #result .result-content,
body.rounded-ui .shit-fact-card,
body.rounded-ui .species-intro-card,
body.rounded-ui .locked-card-notice{
  border-radius:var(--ui-radius-xl)!important;
  background-clip:padding-box!important;
}

/* Preserve clean curved silhouettes on panels that own their backgrounds. */
body.rounded-ui .achievement-panel-card,
body.rounded-ui .grade-card,
body.rounded-ui #result .result-content,
body.rounded-ui .shit-fact-card{
  overflow:hidden!important;
}

/* Collection, preview, unlock and world cards */
body.rounded-ui .preview-card,
body.rounded-ui .species-card,
body.rounded-ui .unlock-card,
body.rounded-ui .world-card-frame{
  border-radius:var(--ui-radius-lg)!important;
  background-clip:padding-box!important;
}
body.rounded-ui .preview-card,
body.rounded-ui .species-card,
body.rounded-ui .unlock-card,
body.rounded-ui .world-card-frame{
  overflow:hidden!important;
}
body.rounded-ui .preview-frame,
body.rounded-ui .unlock-frame,
body.rounded-ui .modal-frame{
  border-radius:inherit!important;
}

/* Species / Shit detail windows use image-built frames, so curve the frame
   without clipping the floating creature or the external close button. */
body.rounded-ui .modal-card{
  border-radius:var(--ui-radius-lg)!important;
  background-clip:padding-box!important;
}
body.rounded-ui .modal-card::before{
  border-radius:inherit!important;
}

/* Achievement rows and metric tiles */
body.rounded-ui .achievement-item,
body.rounded-ui .achievement-item>i,
body.rounded-ui .grade-metrics,
body.rounded-ui .grade-metrics>div,
body.rounded-ui .world-stats>div,
body.rounded-ui .score-row,
body.rounded-ui .score-entry input,
body.rounded-ui .score-entry button,
body.rounded-ui .butterfly-card,
body.rounded-ui .butterfly-card strong{
  border-radius:var(--ui-radius-md)!important;
  background-clip:padding-box!important;
}
body.rounded-ui .achievement-item>i,
body.rounded-ui .butterfly-card strong{
  border-radius:var(--ui-radius-sm)!important;
}
body.rounded-ui .grade-metrics{
  gap:8px!important;
  padding:8px!important;
  border-radius:var(--ui-radius-lg)!important;
  background:rgba(255,255,255,.055)!important;
  overflow:hidden!important;
}
body.rounded-ui .grade-metrics>div{
  border-radius:var(--ui-radius-sm)!important;
}

/* Level select: every level remains visibly separate, but no hard corners. */
body.rounded-ui .level-grid button{
  border-radius:var(--ui-radius-sm)!important;
  background-clip:padding-box!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
body.rounded-ui .level-grid button.current,
body.rounded-ui .level-grid button.played,
body.rounded-ui .level-grid button.has-grade{
  border-radius:var(--ui-radius-sm)!important;
}

/* Rectangular HUD and progress surfaces */
body.rounded-ui .power-track,
body.rounded-ui .v4-completion i{
  border-radius:999px!important;
  overflow:hidden!important;
}
body.rounded-ui .power-track i,
body.rounded-ui .v4-completion em{
  border-radius:inherit!important;
}

/* Small alert/status surfaces and form fields */
body.rounded-ui .achievement-toast,
body.rounded-ui .score-status,
body.rounded-ui .result-stats,
body.rounded-ui .language-entry-text{
  border-radius:var(--ui-radius-md)!important;
  background-clip:padding-box!important;
}

/* Result and ranking buttons already use pill geometry; keep their children
   clipped to the same smooth outline. */
body.rounded-ui .main-nav button,
body.rounded-ui .pill,
body.rounded-ui .back-button,
body.rounded-ui .result-button,
body.rounded-ui #gradeContinue,
body.rounded-ui .language-grid button{
  overflow:hidden!important;
  background-clip:padding-box!important;
}

/* Responsive radii: still curved, never oversized on small viewports. */
@media(max-width:1100px){
  body.rounded-ui{
    --ui-radius-sm:12px;
    --ui-radius-md:17px;
    --ui-radius-lg:24px;
    --ui-radius-xl:32px;
  }
}


/* ===== v4.0 career depth, stable level hover and compact French label ===== */
.v4-completion span{white-space:nowrap!important;font-size:clamp(13px,1vw,17px)!important;letter-spacing:.095em!important}
html[lang="fr"] .v4-completion span{font-size:15px!important;letter-spacing:.08em!important}

/* Hover never changes the grid geometry: no scale, no translate, no border-width swap. */
.level-grid{contain:layout style!important;align-items:stretch!important}
.level-grid button{
  box-sizing:border-box!important;
  border-width:2px!important;
  transform:none!important;
  translate:none!important;
  transition:filter .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease!important;
}
.level-grid button.unlocked:hover,
.level-grid button.unlocked:focus-visible{
  transform:none!important;
  translate:none!important;
  filter:brightness(1.18)!important;
  border-width:2px!important;
  box-shadow:inset 0 0 0 2px rgba(255,214,145,.55),inset 0 0 24px rgba(196,126,47,.18)!important;
}

/* Large career catalogue: fixed header, independently scrollable milestone list. */
.achievement-panel-card{
  display:flex!important;
  flex-direction:column!important;
  width:min(1180px,88vw)!important;
  height:min(820px,88vh)!important;
  max-height:88vh!important;
  overflow:hidden!important;
  padding:54px 62px 42px!important;
}
.achievement-list{
  display:block!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  margin-top:24px!important;
  padding:0 14px 20px 0!important;
  scrollbar-width:thin;
  scrollbar-color:#a56c2d rgba(255,255,255,.06);
}
.achievement-list::-webkit-scrollbar{width:8px}
.achievement-list::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:999px}
.achievement-list::-webkit-scrollbar-thumb{background:#9a6128;border-radius:999px}
.achievement-group{margin:0 0 28px}
.achievement-group h3{margin:0 0 12px;color:#c88739;font-size:15px;font-weight:1000;letter-spacing:.18em}
.achievement-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.achievement-item{min-height:82px!important;padding:13px 17px!important}
.achievement-item b{font-size:15px!important;line-height:1.22!important}
.achievement-item small{font-size:11px!important}
.achievement-completion{right:62px!important;top:52px!important}
@media(max-width:900px){
  .achievement-panel-card{width:94vw!important;padding:48px 24px 28px!important}
  .achievement-group-grid{grid-template-columns:1fr}
  .achievement-completion{right:28px!important;top:48px!important;font-size:42px!important}
  #achievementPanelTitle{font-size:42px!important}
}

/* ===== v4.0 LEVEL SELECT LAYOUT RESTORE =====
   The 100 level buttons must occupy a stable 15 x 7 board. Previous absolute
   labels removed intrinsic button height, so the grid collapsed into tiny dots.
   This final override restores explicit row sizing without hover reflow. */
.level-select-panel .level-grid{
  display:grid!important;
  grid-template-columns:repeat(15,minmax(0,1fr))!important;
  grid-template-rows:repeat(7,minmax(0,1fr))!important;
  grid-auto-rows:minmax(0,1fr)!important;
  width:100%!important;
  height:68vh!important;
  max-height:68vh!important;
  gap:clamp(6px,.62vw,12px)!important;
  margin-top:5.8vh!important;
  padding:8px!important;
  overflow:visible!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  box-sizing:border-box!important;
  contain:layout style!important;
}
.level-select-panel .level-grid button{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  transform:none!important;
  translate:none!important;
  border-width:2px!important;
  overflow:hidden!important;
}
.level-select-panel .level-grid button .level-number{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  z-index:1!important;
  pointer-events:none!important;
}
.level-select-panel .level-grid button.unlocked:hover,
.level-select-panel .level-grid button.unlocked:focus-visible{
  transform:none!important;
  translate:none!important;
  filter:brightness(1.18)!important;
  border-width:2px!important;
  box-shadow:inset 0 0 0 2px rgba(255,214,145,.55),inset 0 0 24px rgba(196,126,47,.18)!important;
}
@media(max-width:1100px){
  .level-select-panel .level-grid{
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    grid-template-rows:repeat(10,minmax(0,1fr))!important;
    height:72vh!important;
    max-height:72vh!important;
  }
}

/* v4 Full-HD clarity pass: preserve photographic detail without CSS filtering. */
#gameCanvas,
#ambientCanvas {
  image-rendering: auto;
  filter: none !important;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
}
#stage.game-active #gameCanvas {
  opacity: 1;
}

/* ===== V4 SCOREBOARD 30 — three-column premium leaderboard ===== */
#scoreboard.scoreboard-screen h1{
  top:205px!important;
  font-size:118px!important;
  line-height:.86!important;
  letter-spacing:-4px!important;
}
#scoreboard .score-creature{
  top:54px!important;
  width:260px!important;
  height:175px!important;
  object-fit:contain!important;
  z-index:2!important;
  pointer-events:none!important;
}
#scoreboard .score-creature.left{left:88px!important}
#scoreboard .score-creature.right{right:82px!important}
#scoreboard #scoreList{
  position:absolute!important;
  left:68px!important;
  right:68px!important;
  top:382px!important;
  width:auto!important;
  height:488px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(10,minmax(0,1fr))!important;
  grid-auto-flow:column!important;
  column-gap:30px!important;
  row-gap:9px!important;
  list-style:none!important;
  overflow:visible!important;
  align-content:stretch!important;
}
#scoreboard .score-row{
  position:relative!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0 18px!important;
  border:1.35px solid rgba(255,255,255,.84)!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.9)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  color:#fff!important;
  font-family:Duplet,Core,Arial,sans-serif!important;
  font-size:18px!important;
  line-height:1!important;
  letter-spacing:-.015em!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 4px 14px rgba(0,0,0,.28)!important;
  contain:layout paint style!important;
}
#scoreboard .score-player{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
#scoreboard .score-player i{
  flex:0 0 auto!important;
  min-width:25px!important;
  font-style:normal!important;
  font-weight:800!important;
}
#scoreboard .score-player strong{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-weight:800!important;
}
#scoreboard .score-row>b{
  flex:0 0 auto!important;
  font-weight:800!important;
  font-variant-numeric:tabular-nums!important;
}
#scoreboard .score-rank-1{color:#f0a321!important;border-color:rgba(240,163,33,.92)!important}
#scoreboard .score-rank-2{color:#35d05b!important;border-color:rgba(53,208,91,.72)!important}
#scoreboard .score-rank-3{color:#ff5b27!important;border-color:rgba(255,91,39,.72)!important}
#scoreboard .score-gold-shit{
  position:absolute!important;
  left:-53px!important;
  top:50%!important;
  width:40px!important;
  height:40px!important;
  object-fit:contain!important;
  transform:translateY(-50%)!important;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.8))!important;
  pointer-events:none!important;
}
#scoreboard .back-button{
  bottom:22px!important;
  height:52px!important;
}
@media(max-width:1100px){
  #scoreboard #scoreList{left:55px!important;right:55px!important;column-gap:18px!important}
  #scoreboard .score-row{padding:0 12px!important;font-size:15px!important}
  #scoreboard .score-gold-shit{left:-43px!important;width:32px!important;height:32px!important}
}

/* ===== CREDITS / KÜNYE — Concept-07 centered layout ===== */
#credits.credits-screen{
  overflow:hidden;
}
#credits.credits-screen h1{
  position:absolute!important;
  z-index:8!important;
  top:204px!important;
  left:400px!important;
  width:1120px!important;
  margin:0!important;
  font-family:Duplet,Arial,sans-serif!important;
  font-size:108px!important;
  font-weight:900!important;
  line-height:.9!important;
  letter-spacing:-.045em!important;
  text-align:center!important;
  text-transform:uppercase!important;
  color:#fff!important;
  text-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
.credits-signature{
  position:absolute;
  z-index:4;
  left:72px;
  top:150px;
  width:390px;
  height:292px;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));
  transform-origin:50% 60%;
  animation:creditsSignatureFloat 6.8s ease-in-out infinite;
  will-change:transform;
}
.credits-portrait{
  position:absolute;
  z-index:3;
  right:54px;
  top:132px;
  width:650px;
  height:780px;
  object-fit:contain;
  object-position:right bottom;
  pointer-events:none;
  filter:drop-shadow(-24px 25px 32px rgba(0,0,0,.62));
  animation:creditsPortraitFloat 8.4s ease-in-out infinite;
  will-change:transform;
}
.credits-role-list{
  position:absolute;
  z-index:9;
  left:400px;
  top:405px;
  width:1120px;
  margin:0;
  font-family:Duplet,Arial,sans-serif!important;
  font-size:42px;
  font-weight:900;
  line-height:1.12;
  letter-spacing:-.035em;
  text-align:center;
  text-transform:uppercase;
  text-wrap:balance;
  color:#fff;
  text-shadow:none;
}
.credits-role-line{
  min-height:47px;
  white-space:normal;
  text-align:center;
}
.credits-names{
  position:absolute;
  z-index:9;
  left:400px;
  top:782px;
  width:1120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0;
  font-family:Duplet,Arial,sans-serif!important;
  text-align:center;
  text-transform:uppercase;
  text-shadow:none;
}
.credits-names strong{
  display:block;
  width:100%;
  font-family:Duplet,Arial,sans-serif!important;
  font-size:49px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.035em;
  text-align:center;
}
.credits-names span{
  display:block;
  width:100%;
  font-family:Duplet,Arial,sans-serif!important;
  font-size:28px;
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.025em;
  text-align:center;
}
#credits.credits-screen .back-button{
  z-index:12;
}
@keyframes creditsPortraitFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(.15deg)}
  50%{transform:translate3d(0,-13px,0) rotate(-.35deg)}
}
@keyframes creditsSignatureFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-1.2deg)}
  50%{transform:translate3d(8px,-9px,0) rotate(.8deg)}
}
body[data-lang="ja"] #credits.credits-screen h1{
  font-size:96px!important;
  letter-spacing:-.02em!important;
}
body[data-lang="ja"] .credits-role-list{
  top:410px;
  font-size:36px;
  line-height:1.2;
  letter-spacing:.01em;
}
body[data-lang="fr"] .credits-role-list,
body[data-lang="es"] .credits-role-list,
body[data-lang="it"] .credits-role-list{
  top:410px;
  font-size:38px;
  line-height:1.14;
}
@media (prefers-reduced-motion:reduce){
  .credits-signature,.credits-portrait{animation:none!important}
}


/* ===== Concept-06 HOW TO PLAY — fixed 1920x1080 layout, no page shift ===== */
#how.how-screen{
  overflow:hidden!important;
  contain:layout paint style;
}
#how.how-screen h1{
  top:218px!important;
  font-family:Duplet,Arial,sans-serif!important;
  font-size:104px!important;
  line-height:.88!important;
  letter-spacing:-3.5px!important;
  white-space:nowrap;
  text-shadow:0 4px 10px rgba(0,0,0,.55);
}
.how-hero-creature{
  position:absolute;
  z-index:3;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.6));
  will-change:transform;
}
.how-hero-left{
  left:65px;
  top:76px;
  width:290px;
  height:214px;
  animation:howFloatLeft 6.8s ease-in-out infinite;
}
.how-hero-right{
  right:45px;
  top:55px;
  width:390px;
  height:325px;
  animation:howFloatRight 7.7s ease-in-out infinite;
}
@keyframes howFloatLeft{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(8px,-10px,0) rotate(1.5deg)}}
@keyframes howFloatRight{0%,100%{transform:translate3d(0,0,0) rotate(1deg)}50%{transform:translate3d(-9px,-12px,0) rotate(-1.5deg)}}
.how-guide{
  position:absolute;
  z-index:4;
  left:44px;
  right:44px;
  top:386px;
  height:470px;
  display:grid;
  grid-template-columns:390px repeat(3,minmax(0,1fr));
  column-gap:24px;
  align-items:stretch;
  overflow:hidden;
}
.how-intro{
  min-width:0;
  height:100%;
  padding:10px 18px 0 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
}
.how-intro h2{
  margin:0 0 24px;
  max-width:375px;
  color:#fff;
  font:900 39px/.94 Duplet,Arial,sans-serif;
  letter-spacing:-1px;
  white-space:pre-line;
  text-wrap:balance;
}
.how-intro p{
  margin:0;
  max-width:355px;
  color:#fff;
  font:700 18px/1.12 Duplet,Arial,sans-serif;
  text-wrap:balance;
}
.how-intro strong{
  display:block;
  margin:17px 0 19px;
  color:#fff;
  font:900 22px/1 Duplet,Arial,sans-serif;
}
.how-intro p:last-child{
  max-width:370px;
  font-size:17px;
  line-height:1.14;
}
.how-column{
  min-width:0;
  height:470px;
  display:grid;
  grid-template-rows:repeat(3,1fr);
  row-gap:8px;
  overflow:hidden;
}
.how-rule{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  column-gap:14px;
  align-items:center;
  overflow:hidden;
}
.how-rule>img{
  display:block;
  width:102px;
  height:102px;
  object-fit:contain;
  align-self:center;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));
}
.how-rule>div{
  min-width:0;
  align-self:center;
  overflow:hidden;
}
.how-rule h3{
  margin:0 0 6px;
  color:#fff;
  font:900 21px/.98 Duplet,Arial,sans-serif;
  letter-spacing:-.3px;
  text-transform:uppercase;
  text-wrap:balance;
}
.how-rule p{
  margin:0;
  color:rgba(255,255,255,.86);
  font:500 13.2px/1.09 Core,Arial,sans-serif;
  letter-spacing:-.05px;
}
.how-footer{
  position:absolute;
  z-index:4;
  left:355px;
  right:355px;
  top:879px;
  color:#fff;
  text-align:center;
  white-space:pre-line;
  font:900 34px/.92 Duplet,Arial,sans-serif;
  letter-spacing:-.8px;
  text-wrap:balance;
}
#how .back-button{
  z-index:5;
  bottom:20px!important;
  width:290px!important;
  height:48px!important;
  font-size:19px!important;
}
body[data-lang="es"] #how.how-screen h1,
body[data-lang="fr"] #how.how-screen h1,
body[data-lang="it"] #how.how-screen h1{font-size:91px!important;letter-spacing:-2.8px!important}
body[data-lang="ja"] #how.how-screen h1{font-size:94px!important;letter-spacing:-1px!important}
body[data-lang="es"] .how-intro h2,
body[data-lang="fr"] .how-intro h2,
body[data-lang="it"] .how-intro h2{font-size:34px}
body[data-lang="ja"] .how-intro h2{font-size:31px;line-height:1.03}
body[data-lang="es"] .how-intro p,
body[data-lang="fr"] .how-intro p,
body[data-lang="it"] .how-intro p{font-size:16px;line-height:1.1}
body[data-lang="ja"] .how-intro p{font-size:16px;line-height:1.18}
body[data-lang="es"] .how-intro p:last-child,
body[data-lang="fr"] .how-intro p:last-child,
body[data-lang="it"] .how-intro p:last-child{font-size:14.7px;line-height:1.1}
body[data-lang="ja"] .how-intro p:last-child{font-size:14.8px;line-height:1.18}
body[data-lang="es"] .how-rule h3,
body[data-lang="fr"] .how-rule h3,
body[data-lang="it"] .how-rule h3{font-size:18px;line-height:1}
body[data-lang="ja"] .how-rule h3{font-size:18px;line-height:1.05}
body[data-lang="es"] .how-rule p,
body[data-lang="fr"] .how-rule p,
body[data-lang="it"] .how-rule p{font-size:11.8px;line-height:1.07}
body[data-lang="ja"] .how-rule p{font-size:12.5px;line-height:1.14;font-family:Arial,"Noto Sans JP",sans-serif}
body[data-lang="es"] .how-footer,
body[data-lang="fr"] .how-footer,
body[data-lang="it"] .how-footer{font-size:29px;line-height:.96;left:290px;right:290px}
body[data-lang="ja"] .how-footer{font-size:30px;line-height:1.04}
@media (prefers-reduced-motion:reduce){.how-hero-creature{animation:none!important}}

/* ===== Concept-05 SHIT STORY — fixed 1920x1080 composition ===== */
#story.story-screen{
  overflow:hidden!important;
  contain:layout paint style;
}
#story.story-screen h1{
  top:218px!important;
  font-family:Duplet,Arial,sans-serif!important;
  font-size:100px!important;
  line-height:.88!important;
  letter-spacing:-3.4px!important;
  white-space:nowrap;
  text-shadow:0 4px 10px rgba(0,0,0,.55);
}
.story-hero-creature{
  position:absolute;
  z-index:3;
  pointer-events:none;
  object-fit:contain;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.62));
  will-change:transform;
}
.story-hero-left{
  left:76px;
  top:92px;
  width:310px;
  height:230px;
  animation:storyFloatLeft 7.1s ease-in-out infinite;
}
.story-hero-right{
  right:60px;
  top:94px;
  width:330px;
  height:225px;
  animation:storyFloatRight 7.8s ease-in-out infinite;
}
@keyframes storyFloatLeft{
  0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}
  50%{transform:translate3d(9px,-11px,0) rotate(1.5deg)}
}
@keyframes storyFloatRight{
  0%,100%{transform:translate3d(0,0,0) rotate(1.5deg)}
  50%{transform:translate3d(-10px,-12px,0) rotate(-1.2deg)}
}
.story-concept-layout{
  position:absolute;
  z-index:4;
  left:70px;
  right:70px;
  top:382px;
  height:498px;
  display:grid;
  grid-template-columns:380px minmax(0,1fr) 380px;
  column-gap:34px;
  align-items:center;
  overflow:hidden;
}
.story-copy{
  min-width:0;
  max-height:478px;
  overflow:hidden;
  color:#fff;
  text-align:center;
  align-self:center;
  padding:0 8px;
}
.story-copy h2{
  margin:0 0 24px;
  color:#fff;
  font:900 39px/.94 Duplet,Arial,sans-serif;
  letter-spacing:-1px;
  text-transform:uppercase;
  text-wrap:balance;
}
.story-copy div{
  color:rgba(255,255,255,.95);
  font:650 17.2px/1.16 Core,Arial,sans-serif;
  letter-spacing:-.08px;
}
.story-copy p{
  margin:0 0 14px;
  text-wrap:balance;
}
.story-copy p:last-child{margin-bottom:0}
.story-copy strong{
  color:#fff;
  font-family:Duplet,Arial,sans-serif;
  font-weight:900;
  letter-spacing:.01em;
}
.story-visual-center{
  position:relative;
  min-width:0;
  height:498px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
}
.story-main-art{
  display:block;
  width:min(100%,760px);
  height:398px;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.72));
  pointer-events:none;
}
.story-trailer-launch{
  position:absolute;
  left:50%;
  bottom:2px;
  translate:-50% 0;
  width:590px;
  height:112px;
  padding:0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  overflow:visible!important;
  cursor:pointer;
  z-index:5;
}
.story-trailer-launch img{
  position:relative;
  z-index:2;
  width:264px;
  height:142px;
  object-fit:contain;
  transform:rotate(-5deg) translateX(18px);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.7));
  transition:transform .2s ease,filter .2s ease;
}
.story-trailer-launch span{
  position:relative;
  z-index:1;
  width:320px;
  height:72px;
  margin-left:-12px;
  border:2px solid rgba(255,255,255,.95);
  border-radius:999px;
  background:rgba(0,0,0,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font:900 27px/1 Duplet,Arial,sans-serif;
  letter-spacing:-.3px;
  white-space:nowrap;
  transition:background .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.story-trailer-launch:hover img{transform:rotate(-3deg) translateX(20px) translateY(-3px);filter:drop-shadow(0 18px 22px rgba(0,0,0,.78))}
.story-trailer-launch:hover span{background:rgba(33,20,9,.96);border-color:#c78c37;box-shadow:0 0 0 4px rgba(199,140,55,.13),0 14px 28px rgba(0,0,0,.38)}
#story .back-button{
  z-index:6;
  bottom:18px!important;
  width:290px!important;
  height:48px!important;
  font-size:19px!important;
}
.story-video-modal{
  position:absolute;
  z-index:10000;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 82px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .34s ease,visibility 0s linear .34s;
}
.story-video-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .34s ease;
}
.story-video-shell{
  position:relative;
  width:min(1540px,88vw);
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(198,139,55,.72);
  border-radius:34px;
  background:#000;
  box-shadow:0 32px 80px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.05) inset;
  transform:scale(.97);
  transition:transform .34s ease;
}
.story-video-modal.open .story-video-shell{transform:scale(1)}
.story-video-shell video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
.story-video-close{
  position:absolute;
  z-index:3;
  top:18px;
  right:18px;
  width:58px;
  height:58px;
  padding:0;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.72)!important;
  color:#fff;
  font:400 46px/.8 Arial,sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.story-video-close:hover{background:#8d201e!important;border-color:#fff!important}
body.story-video-open{overflow:hidden}
body.story-video-open #globalLogo{pointer-events:none}

/* Language fitting without reflow */
body[data-lang="es"] #story.story-screen h1,
body[data-lang="fr"] #story.story-screen h1,
body[data-lang="it"] #story.story-screen h1{font-size:82px!important;letter-spacing:-2.5px!important}
body[data-lang="ja"] #story.story-screen h1{font-size:91px!important;letter-spacing:-1px!important}
body[data-lang="es"] .story-copy h2,
body[data-lang="fr"] .story-copy h2,
body[data-lang="it"] .story-copy h2{font-size:34px;line-height:.98}
body[data-lang="ja"] .story-copy h2{font-size:31px;line-height:1.06}
body[data-lang="es"] .story-copy div,
body[data-lang="fr"] .story-copy div,
body[data-lang="it"] .story-copy div{font-size:15.5px;line-height:1.13}
body[data-lang="ja"] .story-copy div{font-size:15.2px;line-height:1.24;font-family:Arial,"Noto Sans JP",sans-serif}
body[data-lang="es"] .story-copy p,
body[data-lang="fr"] .story-copy p,
body[data-lang="it"] .story-copy p{margin-bottom:11px}
body[data-lang="ja"] .story-copy p{margin-bottom:10px}
body[data-lang="es"] .story-trailer-launch span,
body[data-lang="fr"] .story-trailer-launch span,
body[data-lang="it"] .story-trailer-launch span{font-size:23px}
body[data-lang="ja"] .story-trailer-launch span{font-size:24px}
@media (prefers-reduced-motion:reduce){
  .story-hero-creature{animation:none!important}
  .story-video-modal,.story-video-shell,.story-trailer-launch img,.story-trailer-launch span{transition:none!important}
}

/* ===== SHITART v5.0 — Concept-20 ten-world selection ===== */
.world-select .world-shell{
  padding:1.7vh 4vw 2.2vh!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.world-select .world-brand{
  flex:0 0 auto!important;
  height:12.4vh!important;
  min-height:104px!important;
}
.world-select .world-title{
  flex:0 0 auto!important;
  margin:.2vh 0 2.4vh!important;
  font-family:Duplet,Arial,sans-serif!important;
  font-size:clamp(70px,7.2vw,132px)!important;
  line-height:.84!important;
  letter-spacing:-.055em!important;
}
.world-select .world-grid{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  column-gap:clamp(18px,1.35vw,30px)!important;
  row-gap:clamp(10px,1.05vh,16px)!important;
  width:min(78vw,1320px)!important;
  height:min(65vh,704px)!important;
  margin:0 auto!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  overflow:visible!important;
}
.world-select .world-card{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  transform:translateZ(0)!important;
  contain:layout paint style!important;
}
.world-select .world-card-frame{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
  border-radius:22px!important;
  background:transparent!important;
  box-shadow:none!important;
}
.world-select .world-card-frame>img.world-card-art{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 14px 21px rgba(0,0,0,.42));
}
.world-select .world-card:hover,
.world-select .world-card:focus-visible{
  transform:translate3d(0,-5px,0)!important;
  filter:brightness(1.08)!important;
  outline:none!important;
}
.world-select .world-card.locked{
  filter:brightness(.36) saturate(.52)!important;
}
.world-select .world-card.locked:hover,
.world-select .world-card.locked:focus-visible{
  transform:translate3d(0,-3px,0)!important;
  filter:brightness(.45) saturate(.62)!important;
}
.world-select .world-card-chain{
  inset:4% -4% 5%!important;
  width:108%!important;
  height:91%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 9px 12px rgba(0,0,0,.78))!important;
}
.world-select .world-card-meta{
  left:18%!important;
  right:18%!important;
  bottom:3.8%!important;
  z-index:6!important;
  pointer-events:none!important;
}
.world-select .world-card-progress{
  margin:0!important;
  padding:3px 9px!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.68)!important;
  color:#c38a40!important;
  font:900 clamp(10px,.75vw,14px)/1 Duplet,Arial,sans-serif!important;
  letter-spacing:.02em!important;
  text-shadow:0 2px 5px #000!important;
}
.world-select .world-card.locked .world-card-progress{color:#8c632f!important}

/* Level selector remains a stable 10x10 board in every one of the ten worlds. */
.level-select-panel .level-grid{
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  grid-template-rows:repeat(10,minmax(0,1fr))!important;
}

/* New v5 world backgrounds are exact supplied artwork. */
body[data-world="swamp"] #stage{background-image:url("assets/ui/W-Swamp-Background.png")!important}
body[data-world="ice"] #stage{background-image:url("assets/ui/W-Ice-Background.png")!important}
body[data-world="toxic"] #stage{background-image:url("assets/ui/W-Toxic-Background.png")!important}
body[data-world="sewer"] #stage{background-image:url("assets/ui/W-Sewer-Background.png")!important}
body[data-world="ruins"] #stage{background-image:url("assets/ui/W-Ruins-Background.png")!important}
body[data-world="swamp"] #ambientCanvas,
body[data-world="ice"] #ambientCanvas,
body[data-world="toxic"] #ambientCanvas,
body[data-world="sewer"] #ambientCanvas,
body[data-world="ruins"] #ambientCanvas{filter:none!important}

@media(max-width:1280px){
  .world-select .world-grid{width:90vw!important;height:min(65vh,650px)!important;column-gap:12px!important}
  .world-select .world-title{font-size:clamp(58px,7.6vw,96px)!important}
  .world-select .world-card-progress{font-size:10px!important}
}
@media(max-height:820px){
  .world-select .world-shell{padding-top:1vh!important}
  .world-select .world-brand{height:10.5vh!important;min-height:76px!important}
  .world-select .world-title{margin:0 0 1.4vh!important;font-size:clamp(56px,6.6vw,96px)!important}
  .world-select .world-grid{height:70vh!important;width:min(76vw,1250px)!important;row-gap:6px!important}
}


/* v5.1 release catalogue: one cryptic pseudo-Latin identity per Shit */
.shits-screen .shit-card em,
#shitModalLatin { display:none !important; }
.shits-screen .shit-card .shit-cryptic-name {
  width:88%;
  margin:0 auto 7%;
  text-align:center;
  font-style:italic;
  font-size:clamp(17px,1.28vw,25px);
  line-height:1.05;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}
.shit-modal #shitModalName {
  max-width:82%;
  margin-inline:auto;
  text-align:center;
  font-style:italic;
  letter-spacing:.015em;
}


/* ============================================================
   v5.1 SEAMLESS LEVEL START — remove the double black blink
   ============================================================ */
/* The cinematic three-card preview is now the sole transition layer. */
#levelCurtain.cards-only,
.game-screen.seamless-level-start #levelCurtain {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}
.game-screen.seamless-level-start #gameCanvas {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}
/* Keep the preview alive during its fade-out, despite older !important rules
   that hid every non-.show state immediately. */
#speciesIntro.show.closing {
  display: block !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity .5s ease !important;
}
#speciesIntro.show.closing .level-preview-grid,
#speciesIntro.show.closing .preview-card {
  pointer-events: none !important;
}


/* ============================================================
   v5.1.2 TRUE SEAMLESS LEVEL HANDOFF
   The full-screen preview never fades through black. Only the cards leave;
   the backdrop is released after the live canvas has painted twice.
   ============================================================ */
#speciesIntro.show {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}
#speciesIntro.show.closing:not(.scene-handoff) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: none !important;
}
#speciesIntro.show.closing:not(.scene-handoff)::before,
#speciesIntro.show.closing:not(.scene-handoff)::after {
  opacity: 1 !important;
}
#speciesIntro.show.closing.scene-handoff {
  display: block !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity .24s linear !important;
}
/* The game screen itself never performs a second fade during level-to-level play. */
#game.active,
#game.active #gameCanvas {
  opacity: 1 !important;
  visibility: visible !important;
}
#game.level-transitioning,
#game.level-transitioning #gameCanvas {
  transition: none !important;
  animation: none !important;
}


/* ============================================================
   v5.1.3 DEFINITIVE SINGLE-FRAME LEVEL START
   One stable live stage + one translucent intro layer. No black surfaces.
   ============================================================ */
#stage.game-active #game.screen.active,
#stage.game-active #game.game-screen.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
#stage.game-active #game.screen.active #gameCanvas {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
}
#levelCurtain {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#speciesIntro.stable-level-intro {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(0,0,0,.48) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity .28s ease !important;
  isolation: isolate !important;
}
#speciesIntro.stable-level-intro::before {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}
#speciesIntro.stable-level-intro::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: radial-gradient(circle at 50% 48%,rgba(0,0,0,.04) 0,rgba(0,0,0,.16) 54%,rgba(0,0,0,.34) 100%) !important;
  opacity: 1 !important;
  transition: none !important;
}
#speciesIntro.stable-level-intro .level-preview-grid {
  opacity: 1 !important;
  visibility: visible !important;
}
#speciesIntro.stable-level-intro .preview-card {
  opacity: 0 !important;
}
#speciesIntro.stable-level-intro.cards-ready .preview-card {
  opacity: 1 !important;
}
#speciesIntro.stable-level-intro.closing {
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(0,0,0,.48) !important;
}
#speciesIntro.stable-level-intro.closing .preview-card {
  opacity: 0 !important;
}
#speciesIntro.stable-level-intro.scene-handoff {
  opacity: 0 !important;
  visibility: visible !important;
  transition: opacity .28s ease !important;
}


/* ============================================================
   v5.1.4 ATOMIC LEVEL HANDOFF — authoritative no-blink layer
   The previous screen is never released until the next three-card frame is
   decoded and painted. No full-screen surface fades through an empty frame.
   ============================================================ */
.level-grade.handoff-wait{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  transition:none!important;
}
#unlockReveal.unlock-reveal,
#unlockReveal.unlock-reveal.handoff{
  z-index:2147483000!important;
}
#speciesIntro.stable-level-intro{
  background:rgba(0,0,0,.48)!important;
  transition:none!important;
}
#speciesIntro.stable-level-intro.scene-handoff{
  transition:opacity .28s linear!important;
}
#game.screen.active,
#game.screen.active #gameCanvas{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  animation:none!important;
}


/* ============================================================
   v5.1.5 MOBILE LANDSCAPE / iOS SAFARI VIEWPORT FIT
   Presentation-only patch. No game rules, content, assets or progression
   values are changed. The logical game stage remains 1920 x 1080.
   ============================================================ */
html,
body{
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

/* JS writes the VisualViewport dimensions into these variables. The fallbacks
   keep the exact previous desktop behaviour when VisualViewport is absent. */
#viewport{
  left:var(--shitart-vv-left,0px);
  top:var(--shitart-vv-top,0px);
  right:auto;
  bottom:auto;
  width:var(--shitart-vv-width,100vw);
  height:var(--shitart-vv-height,100vh);
}
@supports (height:100dvh){
  #viewport{height:var(--shitart-vv-height,100dvh)}
}

/* Full-screen layers that live outside the scaled 1920x1080 stage must use
   the same *visible* rectangle, otherwise Safari's toolbar can cover them. */
#rotateNotice,
.world-select,
.world-unlock,
#unlockReveal.unlock-reveal,
.achievement-panel{
  left:var(--shitart-vv-left,0px)!important;
  top:var(--shitart-vv-top,0px)!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--shitart-vv-width,100vw)!important;
  height:var(--shitart-vv-height,100vh)!important;
}
@supports (height:100dvh){
  #rotateNotice,
  .world-select,
  .world-unlock,
  #unlockReveal.unlock-reveal,
  .achievement-panel{height:var(--shitart-vv-height,100dvh)!important}
}

/* Short landscape phones (iPhone / Android): fit the complete WORLD screen
   into the live visible height instead of the legacy large-viewport vh. */
@media (orientation:landscape) and (max-height:600px){
  .world-select .world-shell{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:clamp(3px,1vh,8px) clamp(12px,3.2vw,34px) clamp(4px,1.2vh,10px)!important;
    overflow:hidden!important;
  }
  .world-select .world-brand{
    flex:0 0 auto!important;
    width:100%!important;
    height:clamp(34px,11vh,50px)!important;
    min-height:0!important;
  }
  .world-select .world-brand img{
    width:auto!important;
    max-width:34vw!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .world-select .world-title{
    flex:0 0 auto!important;
    margin:0 0 clamp(2px,.8vh,5px)!important;
    font-size:clamp(30px,10vh,46px)!important;
    line-height:.86!important;
  }
  .world-select .world-grid{
    flex:1 1 auto!important;
    width:min(94vw,920px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    column-gap:clamp(5px,1.2vw,11px)!important;
    row-gap:clamp(2px,.9vh,5px)!important;
    overflow:hidden!important;
  }
  .world-select .world-card,
  .world-select .world-card-frame{
    min-height:0!important;
    max-height:none!important;
    height:100%!important;
  }
  .world-select .world-card-progress{
    padding:2px 6px!important;
    font-size:clamp(8px,2.5vh,10px)!important;
  }

  /* 100-level selector: reserve a compact header and give the rest of the
     *actual* visible height to a stable 10 x 10 board. */
  .level-select-panel{
    width:100%!important;
    height:100%!important;
    padding:4px 5vw 5px!important;
    overflow:hidden!important;
  }
  .level-select-panel .world-brand{
    height:clamp(32px,10vh,46px)!important;
    min-height:0!important;
  }
  .world-back{
    left:2.2vw!important;
    top:clamp(13px,7.5vh,30px)!important;
    font-size:clamp(27px,9vh,39px)!important;
    line-height:1!important;
  }
  .level-world-title{
    left:7.2vw!important;
    top:clamp(14px,7.4vh,30px)!important;
    font-size:clamp(26px,8.5vh,39px)!important;
    line-height:1!important;
  }
  .level-select-panel .level-grid{
    position:absolute!important;
    left:5vw!important;
    right:5vw!important;
    top:clamp(60px,20vh,78px)!important;
    bottom:5px!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:4px!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    grid-template-rows:repeat(10,minmax(0,1fr))!important;
    gap:clamp(2px,.75vh,4px)!important;
    overflow:hidden!important;
  }
  .level-select-panel .level-grid button{
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    padding:0!important;
    font-size:clamp(8px,2.7vh,12px)!important;
    line-height:1!important;
  }
  .level-select-panel .level-rank{
    right:2px!important;
    bottom:1px!important;
    font-size:clamp(5px,1.5vh,7px)!important;
  }

  /* Career overlay: compact header + scrollable list. */
  .achievement-panel-card{
    width:min(94vw,980px)!important;
    height:calc(100% - 12px)!important;
    max-height:calc(100% - 12px)!important;
    padding:14px 22px 12px!important;
  }
  #achievementPanelClose{
    right:12px!important;
    top:7px!important;
    font-size:30px!important;
  }
  #achievementPanelEyebrow{font-size:10px!important}
  #achievementPanelTitle{
    margin:2px 0 2px!important;
    font-size:clamp(24px,8vh,34px)!important;
  }
  .achievement-completion{
    right:48px!important;
    top:12px!important;
    font-size:clamp(27px,8vh,36px)!important;
  }
  .achievement-list{
    margin-top:8px!important;
    padding-right:8px!important;
    padding-bottom:8px!important;
  }
  .achievement-group{margin-bottom:15px!important}
  .achievement-group h3{margin-bottom:7px!important;font-size:10px!important}
  .achievement-group-grid{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .achievement-item{min-height:54px!important;padding:7px 10px!important;gap:10px!important}
  .achievement-item>i{width:38px!important;height:38px!important;font-size:15px!important}
  .achievement-item b{font-size:11px!important}
  .achievement-item small{margin-top:3px!important;font-size:8px!important}

  /* The reward reveal is outside #stage too; percentages here are relative to
     the fitted overlay and cannot disappear below Safari chrome. */
  #unlockReveal .unlock-lock-wrap{
    width:clamp(105px,23vw,180px)!important;
    max-height:52%!important;
  }
  #unlockReveal .unlock-cards{
    width:min(88%,720px)!important;
    max-height:78%!important;
    gap:clamp(4px,1.4vw,12px)!important;
  }
  #unlockReveal .unlock-card{
    width:min(36vw,205px)!important;
    height:min(72%,300px)!important;
    max-height:72%!important;
  }
}

/* Ultra-short browser chrome states can briefly drop below ~330 CSS px on
   landscape phones. Keep every external full-screen flow usable there too. */
@media (orientation:landscape) and (max-height:340px){
  .world-select .world-brand{height:32px!important}
  .world-select .world-title{font-size:28px!important;margin-bottom:2px!important}
  .world-select .world-grid{width:min(92vw,820px)!important}
  .level-select-panel .world-brand{height:30px!important}
  .level-select-panel .level-grid{top:56px!important;bottom:4px!important}
  .achievement-panel-card{height:calc(100% - 8px)!important;max-height:calc(100% - 8px)!important;padding:10px 16px 8px!important}
}


/* ============================================================
   v5.1.6 MOBILE LANDSCAPE — NO DISTORTION / ASPECT-SAFE
   All game art keeps its original 1920x1080 geometry. Extra-wide phone
   space becomes themed bleed/background instead of horizontal stretching.
   ============================================================ */

/* The uniform 16:9 stage can leave safe side gutters on 19.5:9/20:9 phones.
   Continue the current world's existing background into those gutters. */
body[data-world="earth"] #viewport::before,
body:not([data-world]) #viewport::before{
  background-image:url("assets/ui/Background.png")!important;
}
body[data-world="forest"] #viewport::before{
  background-image:url("assets/ui/W-Forest-Background.png")!important;
}
body[data-world="rock"] #viewport::before{
  background-image:url("assets/ui/W-Rock-Background.png")!important;
}
body[data-world="canyon"] #viewport::before{
  background-image:url("assets/ui/W-Canyon-Background.png")!important;
}
body[data-world="volcano"] #viewport::before{
  background-image:url("assets/ui/W-Volcano-Background.png")!important;
}

@media (orientation:landscape) and (max-height:600px){
  /* WORLD cards remain true 2:3 cards. The previous mobile rule forced their
     height to the viewport and visually flattened the composition. */
  .world-select .world-shell{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:clamp(3px,1vh,7px) 2vw clamp(3px,1vh,7px)!important;
  }
  .world-select .world-brand{
    width:100%!important;
    height:clamp(32px,10.5vh,48px)!important;
    flex:0 0 auto!important;
  }
  .world-select .world-brand img{
    width:auto!important;
    height:100%!important;
    max-width:34vw!important;
    object-fit:contain!important;
  }
  .world-select .world-title{
    flex:0 0 auto!important;
    margin:0 0 clamp(3px,1vh,6px)!important;
    font-size:clamp(28px,9.5vh,44px)!important;
    line-height:.9!important;
  }
  .world-select .world-grid{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    width:min(96vw,980px,var(--shitart-world-grid-max,96vw))!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    column-gap:clamp(5px,1vw,10px)!important;
    row-gap:0!important;
    align-items:start!important;
    overflow:visible!important;
  }
  .world-select .world-card{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .world-select .world-card-frame{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:2/3!important;
  }
  .world-select .world-card-frame>img.world-card-art{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .world-select .world-card-progress{
    padding:2px 4px!important;
    font-size:clamp(8px,2.35vh,10px)!important;
  }

  /* 100 levels: use 20 x 5 square cells on short landscape phones. This is a
     responsive reflow only; level order, state and gameplay are unchanged. */
  .level-select-panel{
    width:100%!important;
    height:100%!important;
    padding:3px 2vw!important;
    overflow:hidden!important;
  }
  .level-select-panel .world-brand{
    height:clamp(30px,9.5vh,44px)!important;
  }
  .world-back{
    position:absolute!important;
    left:2.2vw!important;
    top:clamp(11px,5.2vh,22px)!important;
    font-size:clamp(26px,8.5vh,38px)!important;
  }
  .level-world-title{
    position:absolute!important;
    left:7vw!important;
    top:clamp(12px,5.3vh,23px)!important;
    margin:0!important;
    font-size:clamp(24px,8vh,37px)!important;
    line-height:1!important;
  }
  .level-select-panel .level-grid{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:clamp(76px,24vh,96px)!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    display:grid!important;
    grid-template-columns:repeat(20,minmax(0,1fr))!important;
    grid-template-rows:repeat(5,auto)!important;
    width:min(94vw,820px,var(--shitart-level-grid-max,820px))!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    gap:clamp(2px,.55vh,4px)!important;
    overflow:visible!important;
  }
  .level-select-panel .level-grid button{
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
    padding:0!important;
    font-size:clamp(7px,2.25vh,11px)!important;
    line-height:1!important;
  }
  .level-select-panel .level-rank{
    right:1px!important;
    bottom:1px!important;
    font-size:clamp(4px,1.2vh,6px)!important;
  }

  /* Reward cards also keep their native portrait ratio; no independent height
     clamp is allowed to flatten them. */
  #unlockReveal .unlock-card{
    width:min(36vw,205px,var(--shitart-unlock-card-max,205px))!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:744/996!important;
  }
}

@media (orientation:landscape) and (max-height:340px){
  .world-select .world-brand{height:30px!important}
  .world-select .world-title{font-size:27px!important;margin-bottom:2px!important}
  .world-select .world-grid{
    width:min(96vw,900px,var(--shitart-world-grid-max,96vw))!important;
  }
  .level-select-panel .world-brand{height:28px!important}
  .level-select-panel .level-grid{top:70px!important}
}
/* v5.1.6 themed bleed for the five later worlds too. */
body[data-world="swamp"] #viewport::before{background-image:url("assets/ui/W-Swamp-Background.png")!important}
body[data-world="ice"] #viewport::before{background-image:url("assets/ui/W-Ice-Background.png")!important}
body[data-world="toxic"] #viewport::before{background-image:url("assets/ui/W-Toxic-Background.png")!important}
body[data-world="sewer"] #viewport::before{background-image:url("assets/ui/W-Sewer-Background.png")!important}
body[data-world="ruins"] #viewport::before{background-image:url("assets/ui/W-Ruins-Background.png")!important}

/* v5.1.8 — gameplay breathing room on every screen size: the global SHITART
   logo is removed only while the live game screen is active (mobile + desktop). */
#stage.game-active .global-logo {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   v5.1.9 FIXED CAMERA / CINEMATIC UI / MOBILE PERFORMANCE LOCK
   Presentation-only pass: no gameplay rules, art geometry or progression changed.
   ============================================================ */
:root{
  --shitart-cine-ease:cubic-bezier(.16,1,.3,1);
  --shitart-cine-fast:360ms;
  --shitart-cine-slow:620ms;
}

/* Keep the environment visually anchored. The old breathing background applied a
   perpetual transform/filter to a full-screen layer and could read as camera motion. */
#viewport::before{
  animation:none!important;
  transform:none!important;
  filter:none!important;
  will-change:auto!important;
}

/* One transition language for the navigable full-screen sections. Gameplay itself
   stays mathematically fixed and never scales, pans or shakes. */
#stage .screen:not(#game){
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,12px,0) scale(.996)!important;
  transition:
    opacity var(--shitart-cine-fast) ease,
    transform var(--shitart-cine-slow) var(--shitart-cine-ease),
    visibility 0s linear var(--shitart-cine-slow)!important;
}
#stage .screen.active:not(#game){
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0) scale(1)!important;
  transition-delay:50ms,0ms,0ms!important;
}

/* Consistent cinematic modal language: soft fade + very small vertical settle.
   No full-screen blur is used; this is substantially cheaper on mobile GPUs. */
.species-modal,
.shit-fact-overlay,
.story-video-modal,
.achievement-panel,
.level-grade{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:opacity var(--shitart-cine-fast) ease,visibility 0s linear var(--shitart-cine-fast)!important;
}
.species-modal.open,
.shit-fact-overlay.show,
.story-video-modal.open,
.achievement-panel.show,
.level-grade.show{
  transition:opacity var(--shitart-cine-fast) ease,visibility 0s linear 0s!important;
}
.modal-card,
.shit-fact-card,
.story-video-shell,
.achievement-panel-card,
.grade-card{
  transform:translate3d(0,14px,0) scale(.985)!important;
  opacity:.001;
  transition:transform var(--shitart-cine-slow) var(--shitart-cine-ease),opacity var(--shitart-cine-fast) ease!important;
}
.species-modal.open .modal-card,
.shit-fact-overlay.show .shit-fact-card,
.story-video-modal.open .story-video-shell,
.achievement-panel.show .achievement-panel-card,
.level-grade.show .grade-card{
  transform:translate3d(0,0,0) scale(1)!important;
  opacity:1;
}

/* WORLD / level selectors are display-toggled for interaction safety. Their content
   performs the same cinematic settle on every open, without touching the camera. */
.world-select.show .world-shell,
.level-select-panel.show{
  animation:shitartCineSettle var(--shitart-cine-slow) var(--shitart-cine-ease) both;
}
@keyframes shitartCineSettle{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.992)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* Gameplay camera guarantee. These rules also block accidental CSS transforms on
   the live game surface if a future UI patch adds generic screen animation. */
#stage.game-active #game.screen.active,
#stage.game-active #game.screen.active #gameCanvas{
  transform:none!important;
  animation:none!important;
  transition:none!important;
}

/* Mobile input and compositor stability. */
/* Hidden screens do not spend CPU/GPU time advancing decorative animations. */
#stage .screen:not(.active) *{
  animation-play-state:paused!important;
}

#viewport,#stage,#game,#gameCanvas{
  -webkit-user-select:none;
  user-select:none;
}
#game,#gameCanvas{
  touch-action:none!important;
}
@media (pointer:coarse){
  .world-card,.level-grid button,.main-nav button,.pill,.back-button,.result-button{
    -webkit-tap-highlight-color:transparent!important;
  }
}


/* ============================================================
   v5.2.0 CRISP GAMEPLAY / ISOLATED LANGUAGE GATE / AIM BALANCE
   ============================================================ */

/* Language selection is its own scene. Nothing from HOME may visually leak
   underneath it, even during a slow first load or compositor transition. */
body.language-gate-open #stage > .screen,
body.language-gate-open #globalLogo,
body.language-gate-open #stage > .copyright,
body.language-gate-open .creator-corner-link{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.language-select{
  background:#080503 url("assets/ui/Background.png") center/cover no-repeat!important;
  isolation:isolate;
  overflow:hidden;
}
.language-select::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(0,0,0,.04);
  pointer-events:none;
}
.language-grid button:disabled{
  pointer-events:none;
}

/* Keep the live canvas crisp while the 1920x1080 stage is fitted to fractional
   CSS pixels. The backing store is DPR-aware in JS; these rules prevent an
   extra CSS filter/resample layer from being introduced. */
#gameCanvas{
  filter:none!important;
  -webkit-filter:none!important;
  image-rendering:auto;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#stage.game-active{
  filter:none!important;
  -webkit-filter:none!important;
}

/* Subtle target acquisition feedback without adding new artwork or changing
   the SHITART visual language. Hostiles tighten the ring; butterflies stay
   intentionally softer so accidental kills are easier to avoid. */
#reticle{
  transition:width 90ms ease,height 90ms ease,border-width 90ms ease,opacity 90ms ease;
}
#reticle.target-hostile{
  width:72px;
  height:72px;
  border-width:3px;
}
#reticle.target-hostile:before{left:18px;top:33px;width:34px}
#reticle.target-hostile:after{left:33px;top:18px;height:34px}
#reticle.target-butterfly{
  width:84px;
  height:84px;
  opacity:.68!important;
}

#reticle.impact{
  animation:shitartReticleImpact 180ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes shitartReticleImpact{
  0%{transform:scale(.9)}
  48%{transform:scale(1.12)}
  100%{transform:scale(1)}
}


/* ============================================================
   v5.2.1 GAME BACK ARROW
   Reuses the exact collection-page arrow language. It lives above
   #game so pressing it never registers as a gameplay shot.
   ============================================================ */
.game-back-arrow{
  display:none!important;
}
#stage.game-active .game-back-arrow{
  display:grid!important;
  position:absolute!important;
  top:8px!important;
  right:28px!important;
  left:auto!important;
  width:96px!important;
  height:96px!important;
  z-index:180!important;
  font-size:72px!important;
  color:#fff!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:.92!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
#stage.game-active .game-back-arrow:hover{
  background:transparent!important;
  color:#fff!important;
  opacity:1!important;
  transform:scale(1.15)!important;
}
#stage.game-active .game-back-arrow:active{
  transform:scale(.94)!important;
  opacity:1!important;
}
#stage.game-active .game-back-arrow:focus-visible{
  outline:2px solid rgba(255,255,255,.82);
  outline-offset:-10px;
}

/* ============================================================
   v5.2.5 NATIVE GAME ART CLARITY
   Keep the DPR-sized backing buffers mapped to the fixed 1920x1080 stage.
   This prevents the browser from treating the enlarged backing store as a
   larger CSS element and resampling it a second time.
   ============================================================ */
#stage.game-active #gameCanvas,
#gameCanvas{
  width:1920px!important;
  height:1080px!important;
  max-width:none!important;
  max-height:none!important;
}
#stage.game-active{
  background-size:1920px 1080px!important;
  background-position:0 0!important;
  background-repeat:no-repeat!important;
}
/* DegradeUp/Down are supplied at 1969x345. Keep them at native pixel size and
   crop the tiny side bleed instead of shrinking them to 1920 and softening it. */
#stage.game-active .game-gradient{
  left:50%!important;
  width:1969px!important;
  height:345px!important;
  max-width:none!important;
  transform:translateX(-50%)!important;
  image-rendering:auto!important;
  filter:none!important;
}

/* Dedicated DPR-aware world plate. It sits below ambience and gameplay and is
   visible only during live gameplay; menu/language scenes keep their original CSS art. */
#worldBackgroundCanvas{
  position:absolute;
  inset:0;
  z-index:0;
  width:1920px!important;
  height:1080px!important;
  max-width:none!important;
  max-height:none!important;
  pointer-events:none!important;
  visibility:hidden;
  image-rendering:auto;
  filter:none!important;
}
#stage.game-active #worldBackgroundCanvas{
  visibility:visible;
}

/* ============================================================
   v5.2.6 COLLECTION HOVER + SOFT EDGE FADE
   Species/Shits cards may lift/scale on rollover without being
   hard-clipped. Horizontal exits dissolve softly at both edges.
   ============================================================ */
#species .species-viewport,
#shits .species-viewport{
  top:378px!important;
  height:500px!important;
  padding:14px 0 20px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0,
    rgba(0,0,0,.32) 10px,
    rgba(0,0,0,.72) 22px,
    #000 36px,
    #000 calc(100% - 36px),
    rgba(0,0,0,.72) calc(100% - 22px),
    rgba(0,0,0,.32) calc(100% - 10px),
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    to right,
    transparent 0,
    rgba(0,0,0,.32) 10px,
    rgba(0,0,0,.72) 22px,
    #000 36px,
    #000 calc(100% - 36px),
    rgba(0,0,0,.72) calc(100% - 22px),
    rgba(0,0,0,.32) calc(100% - 10px),
    transparent 100%
  )!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
}

#species .species-track,
#shits .species-track{
  overflow:visible!important;
  contain:layout style!important;
}

#species .species-card,
#shits .species-card{
  overflow:visible!important;
  contain:layout style!important;
  position:relative!important;
  z-index:1!important;
}

#species .species-card:hover,
#shits .species-card:hover{
  z-index:20!important;
}

/* Keep the hover lift tasteful and entirely inside the new vertical breathing room. */
@media (hover:hover) and (pointer:fine){
  #species .species-card:hover,
  #shits .species-card:hover{
    transform:translateY(-5px) scale(1.025)!important;
  }
}

/* ============================================================
   v5.2.8 INSTANT HOME INTERACTION AFTER LANGUAGE SELECTION
   The loader is purely visual. It must never sit invisibly above HOME and
   intercept hover/click input while its cinematic fade-out is finishing.
   ============================================================ */
#loader,
#loader.active,
#loader.leaving {
  pointer-events: none !important;
}

/* As soon as HOME becomes visible, its controls are live on the same frame. */
#menu.active,
#menu.active .main-nav,
#menu.active .main-nav button,
#menu.active #startGame,
#menu.active #v4Completion {
  pointer-events: auto;
}

/* ============================================================
   v5.3.0 HOME CTA + STATISTICS REBALANCE
   Make the localized START GAME CTA the primary lower-home action, then
   cascade player and worldwide statistics beneath it with quieter scale.
   ============================================================ */
#menu #startGame{
  left:50%!important;
  bottom:248px!important;
  translate:-50% 0!important;
  width:min(760px,72vw)!important;
  height:92px!important;
  padding:0 42px!important;
  border-radius:48px!important;
  font-size:clamp(32px,2.15vw,43px)!important;
  line-height:1!important;
  white-space:nowrap!important;
  z-index:40!important;
}

/* Player/local summary now sits below the CTA and is intentionally quieter. */
#menu .local-progress-summary{
  bottom:164px!important;
  width:min(1080px,80vw)!important;
  font-size:clamp(15px,1.05vw,21px)!important;
  line-height:1.08!important;
  letter-spacing:.01em!important;
  word-spacing:.08em!important;
}
#menu .local-progress-summary .value{
  margin-right:10px!important;
}

/* Worldwide stats move lower and become lighter/smaller. */
#menu .world-stats{
  bottom:66px!important;
  width:min(820px,76vw)!important;
  gap:12px!important;
}
#menu .world-stats>div{
  padding:9px 14px 8px!important;
  border-radius:18px!important;
}
#menu .world-stats span{
  font-size:12px!important;
  letter-spacing:.045em!important;
}
#menu .world-stats b{
  margin-top:2px!important;
  font-size:24px!important;
  letter-spacing:.025em!important;
}

/* Keep career completion visually subordinate to the enlarged CTA. */
#menu .v4-completion{
  bottom:92px!important;
  width:275px!important;
  opacity:.82!important;
}
#menu .v4-completion span{
  font-size:14px!important;
}
#menu .v4-completion b{
  font-size:23px!important;
}

@media (max-width:1100px){
  #menu #startGame{
    bottom:224px!important;
    width:min(760px,74vw)!important;
    height:82px!important;
    font-size:clamp(28px,3.5vw,38px)!important;
  }
  #menu .local-progress-summary{
    bottom:146px!important;
    width:84vw!important;
    font-size:15px!important;
  }
  #menu .world-stats{
    bottom:54px!important;
    width:min(790px,78vw)!important;
    gap:8px!important;
  }
  #menu .world-stats>div{
    padding:7px 9px 7px!important;
    border-radius:15px!important;
  }
  #menu .world-stats span{font-size:10px!important;}
  #menu .world-stats b{font-size:20px!important;}
  #menu .v4-completion{
    right:24px!important;
    bottom:82px!important;
    width:225px!important;
  }
}

@media (max-width:760px){
  #menu #startGame{
    bottom:202px!important;
    width:min(800px,76vw)!important;
    height:74px!important;
    padding:0 24px!important;
    font-size:clamp(25px,4.4vw,34px)!important;
  }
  #menu .local-progress-summary{
    bottom:130px!important;
    width:80vw!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  #menu .world-stats{
    bottom:42px!important;
    width:78vw!important;
    gap:5px!important;
  }
  #menu .world-stats>div{
    padding:6px 5px!important;
    border-radius:12px!important;
  }
  #menu .world-stats span{
    font-size:8px!important;
    line-height:1.05!important;
    white-space:normal!important;
    min-height:17px!important;
  }
  #menu .world-stats b{font-size:16px!important;}
  #menu .v4-completion{
    right:14px!important;
    bottom:68px!important;
    width:180px!important;
  }
  #menu .v4-completion span{font-size:11px!important;}
  #menu .v4-completion b{font-size:18px!important;}
}


/* ========================================================================== */
/* SHITART v5.3.2 — LOCKED COLLECTION NOTICE                                 */
/* Full-screen dismiss layer + centered pill-frame. Prevents stale notices   */
/* from lingering over HOME and prevents the dismiss click reaching content. */
/* ========================================================================== */
.locked-card-notice{
  position:absolute!important;
  inset:0!important;
  z-index:100000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:none!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:rgba(0,0,0,.16)!important;
  box-shadow:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:none!important;
  transition:opacity .24s ease,visibility 0s linear .24s!important;
  cursor:pointer!important;
}
.locked-card-notice.show{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  transition:opacity .24s ease,visibility 0s linear 0s!important;
}
.locked-card-notice-frame{
  width:min(940px,78vw);
  min-height:132px;
  padding:36px 62px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.96);
  border-radius:56px;
  background:rgba(0,0,0,.78);
  box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.06) inset;
  color:#fff;
  text-align:center;
  font:900 clamp(22px,1.78vw,35px)/1.18 Arial,sans-serif;
  letter-spacing:.025em;
  opacity:0;
  transform:translateY(14px) scale(.94);
  transition:opacity .24s ease,transform .32s cubic-bezier(.16,.86,.2,1),background .18s ease,color .18s ease;
  pointer-events:none;
}
.locked-card-notice.show .locked-card-notice-frame{
  opacity:1;
  transform:translateY(0) scale(1);
}
@media (max-width:900px){
  .locked-card-notice-frame{
    width:min(900px,84vw);
    min-height:108px;
    padding:26px 46px;
    border-radius:46px;
    font-size:clamp(18px,2.4vw,28px);
  }
}