:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05080d; }
body { user-select: none; }
#game { display: block; width: 100%; height: 100%; }
.overlay {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .8s ease;
  background: radial-gradient(circle at 50% 40%, rgba(26,44,45,.22), rgba(3,6,10,.76));
  backdrop-filter: blur(8px);
}
.overlay.visible { opacity: 1; pointer-events: auto; }
.panel {
  width: min(620px, calc(100vw - 42px)); padding: 40px; text-align: center;
  border: 1px solid rgba(255,255,255,.13); border-radius: 24px;
  background: linear-gradient(180deg, rgba(14,22,26,.79), rgba(7,11,15,.87));
  box-shadow: 0 30px 100px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.08);
}
.hero-panel { transform: translateY(2vh); }
.eyebrow { font-size: 11px; letter-spacing: .34em; color: #d8bd7d; margin-bottom: 14px; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(45px, 8vw, 82px); letter-spacing: -.045em; }
p { color: rgba(255,255,255,.7); line-height: 1.65; max-width: 510px; margin: 18px auto 28px; }
button {
  appearance: none; border: 1px solid rgba(255,255,255,.23); border-radius: 999px;
  padding: 15px 26px; font-weight: 750; font-size: 14px; letter-spacing: .04em;
  color: #11150f; background: linear-gradient(180deg,#f0e3b5,#c6aa64); cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .2s ease, filter .2s ease;
}
button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.controls { margin-top: 23px; color: rgba(255,255,255,.42); font-size: 12px; }
.bar { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.09); }
.bar span { display:block; height:100%; width:0; background:linear-gradient(90deg,#8ba760,#e7d18f); transition:width .3s ease; }
#hud { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
#hud.visible { opacity: 1; }
.hud-card {
  position: absolute; top: 22px; right: 22px; min-width: 100px; padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 14px; text-align: right;
  background: rgba(8,13,17,.45); backdrop-filter: blur(12px);
}
.hud-card span { display: block; font-family: Georgia,serif; font-size: 21px; }
.hud-card small { color:#d6bd7b; letter-spacing:.18em; font-size:9px; }
.crosshair { position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:rgba(255,255,255,.72); box-shadow:0 0 8px rgba(255,255,255,.55); }
#hint { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); padding:9px 14px; border-radius:999px; background:rgba(5,8,11,.54); color:rgba(255,255,255,.68); font-size:12px; backdrop-filter:blur(9px); transition:opacity .35s ease; }
@media (max-width: 650px) { .panel{padding:30px 22px}.controls{line-height:1.7}.hud-card{top:12px;right:12px} }

#loadingText.error { color: #ff9f9f; }
.bar.error span { width: 100% !important; background: #b64848; }

/* First-person 2D fists: CSS-drawn, no image assets. */
#firstPersonHands {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform-origin: 50% 100%;
  transition: opacity .28s ease;
  filter: drop-shadow(0 15px 13px rgba(0,0,0,.34));
  pointer-events: none;
}
#hud.visible #firstPersonHands { opacity: 1; }

.fp-arm {
  position: absolute;
  bottom: -8px;
  width: 390px;
  height: 142px;
  transform-origin: 0 58%;
}
.fp-arm-left {
  left: 50%;
  margin-left: -500px;
  transform: rotate(-8deg);
}
.fp-arm-right {
  left: 50%;
  right: auto;
  margin-left: 500px;
  transform: rotate(8deg) scaleX(-1);
}

.fp-sleeve {
  position: absolute;
  left: -14px;
  top: 51px;
  width: 321px;
  height: 76px;
  z-index: 1;
  border-radius: 0 30px 30px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 32%, rgba(0,0,0,.25)),
    repeating-linear-gradient(92deg, rgba(255,255,255,.025) 0 3px, rgba(0,0,0,.035) 3px 7px),
    linear-gradient(90deg, #182219, #46543d 52%, #29362b);
  border: 2px solid rgba(10,15,11,.72);
  box-shadow: inset 0 9px 15px rgba(255,255,255,.06), inset 0 -17px 22px rgba(0,0,0,.3);
}
.fp-sleeve::after {
  content:"";
  position:absolute;
  right: 7px;
  top: 7px;
  bottom: 7px;
  width: 19px;
  border-radius: 50%;
  border-right: 3px solid rgba(8,12,9,.42);
}

/* Only a short wrist is visible so the hand grows naturally out of the sleeve. */
.fp-forearm {
  position: absolute;
  left: 286px;
  top: 55px;
  width: 58px;
  height: 67px;
  z-index: 2;
  border-radius: 15px 28px 28px 15px / 28px 34px 34px 28px;
  background:
    radial-gradient(ellipse at 35% 20%, rgba(255,226,195,.28), transparent 45%),
    linear-gradient(180deg, #dca277 0%, #bd7654 67%, #8c4f39 100%);
  border: 2px solid rgba(70,35,25,.76);
  box-shadow: inset 0 8px 11px rgba(255,230,203,.14), inset 0 -12px 15px rgba(81,38,27,.24);
}

.fp-fist {
  position: absolute;
  left: 326px;
  top: 30px;
  width: 100px;
  height: 96px;
  z-index: 4;
  transform: rotate(-4deg);
  border-radius: 47% 50% 43% 45% / 44% 47% 52% 49%;
  background:
    radial-gradient(circle at 33% 21%, rgba(255,229,204,.34), transparent 31%),
    linear-gradient(145deg, #dea47c 0%, #bf7957 58%, #8b4b36 100%);
  border: 2.5px solid rgba(58,29,22,.92);
  box-shadow:
    inset 8px 6px 11px rgba(255,235,215,.15),
    inset -10px -11px 15px rgba(76,34,25,.3),
    0 7px 10px rgba(0,0,0,.2);
}
.fp-fist::before {
  content:"";
  position:absolute;
  left: 12px;
  top: 10px;
  width: 73px;
  height: 25px;
  border-radius: 45% 45% 32% 32%;
  border-top: 2px solid rgba(74,36,26,.55);
}

.fp-finger {
  position: absolute;
  top: 8px;
  width: 22px;
  height: 40px;
  border-radius: 48% 48% 38% 38%;
  transform-origin: 50% 90%;
  background: linear-gradient(150deg, #e0a57c, #bd7554 66%, #8d4d38);
  border: 2px solid rgba(64,31,23,.88);
  box-shadow: inset 4px 3px 6px rgba(255,233,210,.13), inset -4px -6px 7px rgba(76,34,24,.22);
}
.fp-finger::after {
  content:"";
  position:absolute;
  left: 4px;
  right: 4px;
  top: 6px;
  height: 8px;
  border-radius: 55%;
  border-top: 1.5px solid rgba(87,42,31,.45);
}
.fp-finger-1 { left: 8px;  transform: rotate(-12deg); height: 37px; }
.fp-finger-2 { left: 27px; transform: rotate(-5deg);  height: 41px; }
.fp-finger-3 { left: 47px; transform: rotate(4deg);   height: 40px; }
.fp-finger-4 { left: 67px; transform: rotate(12deg);  height: 36px; }

.fp-thumb {
  position: absolute;
  left: 30px;
  top: 45px;
  width: 54px;
  height: 30px;
  z-index: 6;
  border-radius: 58% 44% 48% 55%;
  transform: rotate(18deg);
  background: linear-gradient(155deg, #d99d76, #b96f50 67%, #844632);
  border: 2px solid rgba(61,30,23,.9);
  box-shadow: inset 6px 4px 7px rgba(255,231,208,.12), inset -6px -7px 9px rgba(74,32,24,.22);
}
.fp-thumb::after {
  content:"";
  position:absolute;
  right: 5px;
  top: 6px;
  width: 16px;
  height: 10px;
  border-radius: 55%;
  border-top: 1.5px solid rgba(84,39,29,.45);
}
.fp-palm-line {
  position:absolute;
  left: 17px;
  top: 59px;
  width: 30px;
  height: 18px;
  border-radius: 50%;
  border-bottom: 2px solid rgba(75,35,26,.48);
  transform: rotate(-18deg);
}

#firstPersonHands.is-moving .fp-arm-left { animation: leftHandWalk .48s ease-in-out infinite alternate; }
#firstPersonHands.is-moving .fp-arm-right { animation: rightHandWalk .48s ease-in-out infinite alternate; }
#firstPersonHands.is-sprinting .fp-arm-left,
#firstPersonHands.is-sprinting .fp-arm-right { animation-duration: .31s; }
#firstPersonHands.is-airborne .fp-arm-left { transform: translateY(10px) rotate(-3deg); }
#firstPersonHands.is-airborne .fp-arm-right { transform: translateY(10px) rotate(3deg) scaleX(-1); }

@keyframes leftHandWalk {
  from { transform: translate3d(-3px, 2px, 0) rotate(-7deg); }
  to   { transform: translate3d(6px, -5px, 0) rotate(-10deg); }
}
@keyframes rightHandWalk {
  from { transform: translate3d(3px, -5px, 0) rotate(10deg) scaleX(-1); }
  to   { transform: translate3d(-6px, 2px, 0) rotate(7deg) scaleX(-1); }
}

@media (max-width: 1000px) {
  .fp-arm { scale: .82; bottom: -16px; }
  .fp-arm-left { margin-left: -430px; }
  .fp-arm-right { margin-left: 430px; }
}
@media (max-width: 700px) {
  .fp-arm { scale: .66; bottom: -28px; }
  .fp-arm-left { margin-left: -350px; }
  .fp-arm-right { margin-left: 350px; }
}

/* Combat pose: forearms come up from the player instead of entering horizontally. */
.fp-arm {
  transform-origin: 91% 58%;
  bottom: -34px;
}
.fp-arm-left {
  margin-left: -430px;
  transform: rotate(-24deg);
}
.fp-arm-right {
  margin-left: 430px;
  transform: rotate(24deg) scaleX(-1);
}

/* Mouse 1: alternate quick forward punches. */
#firstPersonHands.punch-left .fp-arm-left {
  animation: fpPunchLeft .30s cubic-bezier(.2,.78,.24,1) both !important;
}
#firstPersonHands.punch-right .fp-arm-right {
  animation: fpPunchRight .30s cubic-bezier(.2,.78,.24,1) both !important;
}

/* Mouse 2: bring both fists up and inward as a guard. */
#firstPersonHands.is-blocking .fp-arm-left {
  animation: none !important;
  transform: translate3d(72px,-82px,0) rotate(-8deg) scale(1.06);
}
#firstPersonHands.is-blocking .fp-arm-right {
  animation: none !important;
  transform: translate3d(-72px,-82px,0) rotate(8deg) scaleX(-1) scale(1.06);
}
#firstPersonHands.is-blocking .fp-fist {
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.28));
}

@keyframes fpPunchLeft {
  0%   { transform: translate3d(0,0,0) rotate(-24deg) scale(1); }
  38%  { transform: translate3d(112px,-112px,0) rotate(-5deg) scale(1.13); }
  58%  { transform: translate3d(126px,-124px,0) rotate(-2deg) scale(1.16); }
  100% { transform: translate3d(0,0,0) rotate(-24deg) scale(1); }
}
@keyframes fpPunchRight {
  0%   { transform: translate3d(0,0,0) rotate(24deg) scaleX(-1) scale(1); }
  38%  { transform: translate3d(-112px,-112px,0) rotate(5deg) scaleX(-1) scale(1.13); }
  58%  { transform: translate3d(-126px,-124px,0) rotate(2deg) scaleX(-1) scale(1.16); }
  100% { transform: translate3d(0,0,0) rotate(24deg) scaleX(-1) scale(1); }
}

@media (max-width: 1000px) {
  .fp-arm-left { margin-left: -365px; }
  .fp-arm-right { margin-left: 365px; }
}
@media (max-width: 700px) {
  .fp-arm-left { margin-left: -294px; }
  .fp-arm-right { margin-left: 294px; }
}

/* v4: Symmetrical bottom-centre combat layout.
   The right arm is built as a true mirrored component instead of mirroring
   the entire positioned arm, which previously pushed it to the screen edge. */
.fp-arm {
  bottom: -34px;
  width: 390px;
  height: 142px;
  transform-origin: 50% 82%;
}
.fp-arm-left {
  left: 50%;
  right: auto;
  margin-left: -430px;
  transform: rotate(-24deg);
}
.fp-arm-right {
  left: 50%;
  right: auto;
  margin-left: 40px;
  transform: rotate(24deg);
}

/* Mirror only the artwork inside the right arm. */
.fp-arm-right .fp-sleeve {
  left: 83px;
  transform: scaleX(-1);
}
.fp-arm-right .fp-forearm {
  left: 46px;
  transform: scaleX(-1);
}
.fp-arm-right .fp-fist {
  left: -36px;
  transform: scaleX(-1) rotate(-4deg);
}

#firstPersonHands.is-airborne .fp-arm-left {
  transform: translateY(10px) rotate(-21deg);
}
#firstPersonHands.is-airborne .fp-arm-right {
  transform: translateY(10px) rotate(21deg);
}

@keyframes leftHandWalk {
  from { transform: translate3d(-3px, 2px, 0) rotate(-22deg); }
  to   { transform: translate3d(6px, -5px, 0) rotate(-26deg); }
}
@keyframes rightHandWalk {
  from { transform: translate3d(3px, -5px, 0) rotate(26deg); }
  to   { transform: translate3d(-6px, 2px, 0) rotate(22deg); }
}

#firstPersonHands.is-blocking .fp-arm-left {
  animation: none !important;
  transform: translate3d(76px,-84px,0) rotate(-9deg) scale(1.06);
}
#firstPersonHands.is-blocking .fp-arm-right {
  animation: none !important;
  transform: translate3d(-76px,-84px,0) rotate(9deg) scale(1.06);
}

@keyframes fpPunchLeft {
  0%   { transform: translate3d(0,0,0) rotate(-24deg) scale(1); }
  18%  { transform: translate3d(-12px,12px,0) rotate(-29deg) scale(.98); }
  52%  { transform: translate3d(150px,-142px,0) rotate(-3deg) scale(1.20); }
  68%  { transform: translate3d(160px,-150px,0) rotate(-1deg) scale(1.22); }
  100% { transform: translate3d(0,0,0) rotate(-24deg) scale(1); }
}
@keyframes fpPunchRight {
  0%   { transform: translate3d(0,0,0) rotate(24deg) scale(1); }
  18%  { transform: translate3d(12px,12px,0) rotate(29deg) scale(.98); }
  52%  { transform: translate3d(-150px,-142px,0) rotate(3deg) scale(1.20); }
  68%  { transform: translate3d(-160px,-150px,0) rotate(1deg) scale(1.22); }
  100% { transform: translate3d(0,0,0) rotate(24deg) scale(1); }
}

@media (max-width: 1000px) {
  .fp-arm-left { margin-left: -365px; }
  .fp-arm-right { margin-left: 33px; }
}
@media (max-width: 700px) {
  .fp-arm-left { margin-left: -294px; }
  .fp-arm-right { margin-left: 27px; }
}

/* v5: Forward-facing first-person stance.
   The forearms rise from the player's body at the bottom of the screen,
   while punches travel straight toward the crosshair. */
.fp-arm {
  bottom: -92px;
  transform-origin: 18% 62%;
}

.fp-arm-left {
  left: 50%;
  margin-left: -306px;
  transform: rotate(-57deg);
}

.fp-arm-right {
  left: 50%;
  margin-left: -84px;
  transform: rotate(57deg);
}

/* Keep the fists naturally spaced on either side of screen centre. */
.fp-arm-left .fp-fist {
  transform: rotate(7deg);
}
.fp-arm-right .fp-fist {
  transform: scaleX(-1) rotate(7deg);
}

/* Subtle body-driven movement, without making the arms swing sideways. */
@keyframes leftHandWalk {
  from { transform: translate3d(-2px, 3px, 0) rotate(-56deg); }
  to   { transform: translate3d(3px, -4px, 0) rotate(-59deg); }
}
@keyframes rightHandWalk {
  from { transform: translate3d(2px, -4px, 0) rotate(59deg); }
  to   { transform: translate3d(-3px, 3px, 0) rotate(56deg); }
}

#firstPersonHands.is-airborne .fp-arm-left {
  transform: translateY(11px) rotate(-55deg);
}
#firstPersonHands.is-airborne .fp-arm-right {
  transform: translateY(11px) rotate(55deg);
}

/* Guard: both forearms lift straight in front of the face. */
#firstPersonHands.is-blocking .fp-arm-left {
  animation: none !important;
  transform: translate3d(62px,-84px,0) rotate(-70deg) scale(1.05);
}
#firstPersonHands.is-blocking .fp-arm-right {
  animation: none !important;
  transform: translate3d(-62px,-84px,0) rotate(70deg) scale(1.05);
}

/* Straight punches: pull back slightly, then drive upward and inward toward the crosshair. */
@keyframes fpPunchLeft {
  0%   { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
  16%  { transform: translate3d(-10px,18px,0) rotate(-54deg) scale(.97); }
  52%  { transform: translate3d(105px,-174px,0) rotate(-76deg) scale(1.18); }
  68%  { transform: translate3d(112px,-188px,0) rotate(-79deg) scale(1.22); }
  100% { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
}
@keyframes fpPunchRight {
  0%   { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
  16%  { transform: translate3d(10px,18px,0) rotate(54deg) scale(.97); }
  52%  { transform: translate3d(-105px,-174px,0) rotate(76deg) scale(1.18); }
  68%  { transform: translate3d(-112px,-188px,0) rotate(79deg) scale(1.22); }
  100% { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
}

@media (max-width: 1000px) {
  .fp-arm { bottom: -86px; }
  .fp-arm-left { margin-left: -284px; }
  .fp-arm-right { margin-left: -69px; }
}
@media (max-width: 700px) {
  .fp-arm { bottom: -72px; }
  .fp-arm-left { margin-left: -250px; }
  .fp-arm-right { margin-left: -54px; }
}

/* v6: Exact left/right symmetry.
   Both arms use mirrored shoulder pivots and identical spacing from screen centre. */
.fp-arm-left {
  left: 50%;
  right: auto;
  margin-left: -306px;
  transform-origin: 18% 62%;
}
.fp-arm-right {
  left: 50%;
  right: auto;
  margin-left: -84px;
  transform-origin: 82% 62%;
}

/* Keep both fists on the same baseline. */
.fp-arm-left .fp-fist,
.fp-arm-right .fp-fist {
  top: 30px;
}

@media (max-width: 1000px) {
  .fp-arm-left { margin-left: -284px; }
  .fp-arm-right { margin-left: -106px; }
}
@media (max-width: 700px) {
  .fp-arm-left { margin-left: -250px; }
  .fp-arm-right { margin-left: -140px; }
}

/* v7: Lower, wider resting stance.
   Keep the exact mirrored layout, but move both arms farther down and
   slightly away from the centre so more of the world remains visible. */
.fp-arm {
  bottom: -140px;
}
.fp-arm-left {
  margin-left: -336px;
}
.fp-arm-right {
  margin-left: -54px;
}

@media (max-width: 1000px) {
  .fp-arm { bottom: -126px; }
  .fp-arm-left { margin-left: -314px; }
  .fp-arm-right { margin-left: -76px; }
}
@media (max-width: 700px) {
  .fp-arm { bottom: -108px; }
  .fp-arm-left { margin-left: -270px; }
  .fp-arm-right { margin-left: -120px; }
}

/* v8: Wider and slightly lower resting stance. */
.fp-arm {
  bottom: -156px;
}
.fp-arm-left {
  margin-left: -366px;
}
.fp-arm-right {
  margin-left: -24px;
}

@media (max-width: 1000px) {
  .fp-arm { bottom: -142px; }
  .fp-arm-left { margin-left: -342px; }
  .fp-arm-right { margin-left: -48px; }
}
@media (max-width: 700px) {
  .fp-arm { bottom: -122px; }
  .fp-arm-left { margin-left: -292px; }
  .fp-arm-right { margin-left: -98px; }
}

/* v9: Wider stance and true forward punches.
   The fists stay well apart in the resting pose. A punch is shown through
   perspective growth from the shoulder rather than sliding upward toward
   the centre of the screen. */
.fp-arm-left {
  margin-left: -410px;
}
.fp-arm-right {
  margin-left: 20px;
}

@keyframes fpPunchLeft {
  0%   { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
  15%  { transform: translate3d(-5px,8px,0) rotate(-59deg) scale(.97); }
  48%  { transform: translate3d(0,-18px,0) rotate(-55deg) scale(1.28); }
  66%  { transform: translate3d(0,-22px,0) rotate(-54deg) scale(1.34); }
  100% { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
}
@keyframes fpPunchRight {
  0%   { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
  15%  { transform: translate3d(5px,8px,0) rotate(59deg) scale(.97); }
  48%  { transform: translate3d(0,-18px,0) rotate(55deg) scale(1.28); }
  66%  { transform: translate3d(0,-22px,0) rotate(54deg) scale(1.34); }
  100% { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
}

@media (max-width: 1000px) {
  .fp-arm-left { margin-left: -382px; }
  .fp-arm-right { margin-left: -8px; }
}
@media (max-width: 700px) {
  .fp-arm-left { margin-left: -322px; }
  .fp-arm-right { margin-left: -68px; }
}
/* In-world Level 1 billboard prompt. Position is projected from the 3D pillar. */
#levelPillarPrompt {
  position: absolute;
  z-index: 12;
  display: grid;
  gap: 5px;
  min-width: 148px;
  padding: 10px 15px 11px;
  border: 1px solid rgba(115, 255, 211, .46);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(5, 19, 18, .91), rgba(3, 10, 12, .88));
  color: white;
  text-align: center;
  transform: translate(-50%, -100%) translateY(-10px) scale(.92);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .48));
  transition: opacity .18s ease, transform .18s ease, border-color .2s ease;
}
#levelPillarPrompt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(115, 255, 211, .46);
  border-bottom: 1px solid rgba(115, 255, 211, .46);
  background: rgba(3, 10, 12, .9);
}
#levelPillarPrompt.visible {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-15px) scale(1);
}
#levelPillarPrompt.activated {
  border-color: rgba(170, 255, 225, .95);
  transform: translate(-50%, -100%) translateY(-15px) scale(1.08);
}
#levelPillarPrompt strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .13em;
  color: #8fffd8;
  text-shadow: 0 0 12px rgba(70, 255, 194, .42);
}
#levelPillarPrompt span {
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  letter-spacing: .04em;
}
#levelPillarPrompt b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 2px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 5px;
  background: rgba(255, 255, 255, .1);
  color: white;
  font-size: 11px;
}

/* v10: Forward depth punch.
   In a 2D first-person view, an arm moving away from the player becomes
   smaller with perspective. Both fists remain in their own horizontal lane
   rather than moving inward toward the character or crosshair. */
@keyframes fpPunchLeft {
  0%   { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
  14%  { transform: translate3d(-4px,10px,0) rotate(-59deg) scale(1.03); }
  48%  { transform: translate3d(0,-34px,0) rotate(-55deg) scale(.80); }
  66%  { transform: translate3d(0,-42px,0) rotate(-54deg) scale(.72); }
  100% { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
}
@keyframes fpPunchRight {
  0%   { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
  14%  { transform: translate3d(4px,10px,0) rotate(59deg) scale(1.03); }
  48%  { transform: translate3d(0,-34px,0) rotate(55deg) scale(.80); }
  66%  { transform: translate3d(0,-42px,0) rotate(54deg) scale(.72); }
  100% { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
}

/* v11: compact level pillar prompt centered directly on the pillar. */
#levelPillarPrompt,
#levelPillarPrompt.visible,
#levelPillarPrompt.activated {
  transform: translate(-50%, -50%) scale(.94);
}
#levelPillarPrompt.visible { transform: translate(-50%, -50%) scale(1); }
#levelPillarPrompt.activated { transform: translate(-50%, -50%) scale(1.05); }
#levelPillarPrompt::after { display: none; }
#levelPillarPrompt {
  min-width: 126px;
  padding: 8px 11px 9px;
  background: rgba(3, 12, 13, .82);
}

#playerCombatHud {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 30;
  width: min(285px, 38vw);
  padding: 12px 14px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(9,18,17,.88), rgba(4,8,9,.82));
  box-shadow: 0 12px 34px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.06);
  color: #fff;
  pointer-events: none;
  backdrop-filter: blur(7px);
}
.combat-health-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.combat-health-title span { font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.7); }
.combat-health-title b { font-size:12px; font-weight:700; }
.combat-health-track { height:13px; overflow:hidden; border-radius:999px; background:rgba(0,0,0,.55); box-shadow: inset 0 1px 4px rgba(0,0,0,.7); }
.combat-health-track i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b83531,#e15a44 58%,#f18b58); box-shadow:0 0 14px rgba(229,77,59,.38); transition:width .18s ease; }
.combat-gold { margin-top:9px; font-size:12px; color:rgba(255,255,255,.72); }
.combat-gold b { margin-left:5px; color:#ffd65a; font-size:15px; }
#playerCombatHud.hit { animation: combatHudHit .28s ease; }
#playerCombatHud.danger .combat-health-track i { animation: lowHealthPulse .8s ease-in-out infinite alternate; }
@keyframes combatHudHit { 0%,100%{transform:translateX(0)} 35%{transform:translateX(-7px)} 70%{transform:translateX(5px)} }
@keyframes lowHealthPulse { from{filter:brightness(.8)} to{filter:brightness(1.45)} }
@media (max-width:700px){ #playerCombatHud{left:12px;bottom:12px;width:210px;padding:10px 11px;} }


/* Combat feedback: damage appears beside the fist that landed the hit. */
.combat-damage-number {
  position: fixed;
  top: 57%;
  z-index: 220;
  pointer-events: none;
  color: #ff3434;
  font: 900 30px/1 Arial, sans-serif;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 #5b0909, 0 0 8px rgba(255,35,35,.75);
  transform: translate(-50%, -50%) scale(.82);
  animation: combatDamageFloat .72s cubic-bezier(.18,.7,.25,1) forwards;
}
.combat-damage-number.from-left { left: 39%; }
.combat-damage-number.from-right { left: 61%; }
@keyframes combatDamageFloat {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.72); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.14); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(.92); }
}
@media (max-width:700px) {
  .combat-damage-number { top: 60%; font-size: 24px; }
  .combat-damage-number.from-left { left: 35%; }
  .combat-damage-number.from-right { left: 65%; }
}


/* v12 combat clarity: stronger forward/upward punch and centered damage text. */
@keyframes fpPunchLeft {
  0%   { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
  12%  { transform: translate3d(-5px,14px,0) rotate(-60deg) scale(1.04); }
  46%  { transform: translate3d(3px,-72px,0) rotate(-53deg) scale(.68); }
  64%  { transform: translate3d(5px,-94px,0) rotate(-50deg) scale(.56); }
  78%  { transform: translate3d(2px,-64px,0) rotate(-54deg) scale(.72); }
  100% { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
}
@keyframes fpPunchRight {
  0%   { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
  12%  { transform: translate3d(5px,14px,0) rotate(60deg) scale(1.04); }
  46%  { transform: translate3d(-3px,-72px,0) rotate(53deg) scale(.68); }
  64%  { transform: translate3d(-5px,-94px,0) rotate(50deg) scale(.56); }
  78%  { transform: translate3d(-2px,-64px,0) rotate(54deg) scale(.72); }
  100% { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
}
.combat-damage-number,
.combat-damage-number.from-left,
.combat-damage-number.from-right {
  left: 50% !important;
  top: 50% !important;
  font-size: 34px;
}
@media (max-width:700px) {
  .combat-damage-number,
  .combat-damage-number.from-left,
  .combat-damage-number.from-right {
    left: 50% !important;
    top: 50% !important;
    font-size: 28px;
  }
}


/* v13: punches travel clearly from the wide guard position to the screen centre. */
@keyframes fpPunchLeft {
  0%   { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
  10%  { transform: translate3d(-18px,16px,0) rotate(-61deg) scale(1.04); }
  48%  { transform: translate3d(205px,-86px,0) rotate(-20deg) scale(.68); }
  64%  { transform: translate3d(248px,-112px,0) rotate(-8deg) scale(.56); }
  78%  { transform: translate3d(176px,-74px,0) rotate(-28deg) scale(.74); }
  100% { transform: translate3d(0,0,0) rotate(-57deg) scale(1); }
}
@keyframes fpPunchRight {
  0%   { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
  10%  { transform: translate3d(18px,16px,0) rotate(61deg) scale(1.04); }
  48%  { transform: translate3d(-205px,-86px,0) rotate(20deg) scale(.68); }
  64%  { transform: translate3d(-248px,-112px,0) rotate(8deg) scale(.56); }
  78%  { transform: translate3d(-176px,-74px,0) rotate(28deg) scale(.74); }
  100% { transform: translate3d(0,0,0) rotate(57deg) scale(1); }
}

/* Lives and game-over state */
#playerCombatHud .combat-lives {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#playerCombatHud .combat-lives b {
  margin-left: 8px;
  color: #ff4b4b;
  font-size: 18px;
  letter-spacing: .12em;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
#gameOverScreen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(65,0,0,.4), rgba(0,0,0,.9));
  transition: opacity .25s ease;
}
#gameOverScreen.visible { opacity: 1; pointer-events: auto; }
#gameOverScreen > div {
  min-width: 320px;
  padding: 34px 42px;
  border: 1px solid rgba(255,90,90,.5);
  border-radius: 16px;
  text-align: center;
  background: rgba(15,7,7,.94);
  box-shadow: 0 24px 80px rgba(0,0,0,.75), inset 0 0 35px rgba(180,0,0,.12);
}
#gameOverScreen strong { display:block; color:#ff5353; font-size:42px; letter-spacing:.12em; }
#gameOverScreen span { display:block; margin:10px 0 22px; color:#e8d8d8; }
#gameOverScreen button {
  padding: 11px 24px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;
  color: white;
  background: linear-gradient(#7e2525,#4a1111);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

/* 2D mushroom merchant billboard prompt and shop panel. */
#shopkeeperPrompt {
  position:absolute; z-index:16; display:grid; gap:4px; min-width:150px;
  padding:9px 13px 10px; border:1px solid rgba(255,187,104,.58); border-radius:11px;
  background:linear-gradient(180deg,rgba(32,16,8,.93),rgba(10,7,5,.91)); color:#fff;
  text-align:center; transform:translate(-50%,-50%) scale(.92); opacity:0; pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); transition:opacity .16s ease,transform .16s ease;
}
#shopkeeperPrompt.visible { opacity:1; transform:translate(-50%,-50%) scale(1); }
#shopkeeperPrompt strong { font:700 14px Georgia,serif; letter-spacing:.11em; color:#ffc47e; }
#shopkeeperPrompt span { font-size:11px; color:rgba(255,255,255,.8); }
#shopkeeperPrompt b { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:2px;
  border:1px solid rgba(255,255,255,.35); border-radius:5px; background:rgba(255,255,255,.1); }

#mushroomShopPanel { position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:rgba(2,5,4,.68); opacity:0; pointer-events:none; transition:opacity .18s ease; backdrop-filter:blur(5px); }
#mushroomShopPanel.visible { opacity:1; pointer-events:auto; }
.mushroom-shop-card { position:relative; width:min(460px,calc(100vw - 34px)); padding:30px 32px 25px;
  border:1px solid rgba(255,190,111,.45); border-radius:18px;
  background:linear-gradient(145deg,rgba(35,22,14,.98),rgba(10,15,11,.98));
  box-shadow:0 26px 80px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.07); color:#f5ede2; text-align:center; }
.mushroom-shop-close { position:absolute; right:13px; top:10px; border:0; background:transparent; color:#d8c8b8;
  font-size:28px; cursor:pointer; }
.mushroom-shop-portrait { font-size:54px; filter:drop-shadow(0 8px 9px rgba(0,0,0,.45)); }
.mushroom-shop-card small { display:block; margin-top:6px; color:#e3a861; letter-spacing:.18em; }
.mushroom-shop-card h2 { margin:5px 0 10px; font:700 31px Georgia,serif; color:#ffd296; }
.mushroom-shop-card p { margin:0 auto 18px; max-width:340px; line-height:1.55; color:#d9cec2; }
.mushroom-shop-empty { padding:14px; border:1px dashed rgba(255,255,255,.18); border-radius:10px;
  background:rgba(255,255,255,.035); color:#ab9f93; }
.mushroom-shop-hint { display:block; margin-top:16px; font-size:11px; color:#857d75; }

/* Mushroom merchant upgrade shop */
.mushroom-shop-card { width:min(760px,calc(100vw - 30px)); max-height:min(88vh,760px); overflow:auto; }
.mushroom-shop-wallet { display:inline-flex; align-items:center; gap:7px; margin:-4px 0 16px; padding:7px 13px; border-radius:999px; background:rgba(255,194,79,.1); border:1px solid rgba(255,194,79,.28); color:#ffd381; }
.mushroom-shop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; text-align:left; }
.shop-upgrade { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:10px; min-height:82px; padding:12px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); color:#f5ede2; cursor:pointer; transition:transform .14s ease,border-color .14s ease,background .14s ease; }
.shop-upgrade:hover { transform:translateY(-2px); border-color:rgba(255,190,111,.55); background:linear-gradient(145deg,rgba(255,176,79,.14),rgba(255,255,255,.035)); }
.shop-upgrade:active { transform:translateY(0) scale(.985); }
.shop-upgrade-emoji { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; font-size:27px; background:rgba(0,0,0,.24); filter:drop-shadow(0 5px 5px rgba(0,0,0,.35)); }
.shop-upgrade-copy { display:grid; gap:3px; min-width:0; }
.shop-upgrade-copy strong { color:#ffe0ad; font:700 15px Georgia,serif; }
.shop-upgrade-copy small { color:#b9aea1; font-size:11px; letter-spacing:0; margin:0; }
.shop-upgrade-copy em { color:#76d99b; font-size:11px; font-style:normal; }
.shop-upgrade-price { white-space:nowrap; padding:6px 8px; border-radius:8px; background:rgba(255,197,74,.1); color:#ffd068; font-weight:700; font-size:12px; }
.mushroom-shop-message { min-height:20px; margin-top:13px; color:#d8b78c; font-size:12px; }
.mushroom-shop-message.success { color:#75e29c; }
.combat-damage-number.critical { color:#ffd52f; font-size:37px; text-shadow:0 2px 0 #7b1600,0 0 16px rgba(255,65,0,.9); }
@media (max-width:650px) { .mushroom-shop-grid{grid-template-columns:1fr}.mushroom-shop-card{padding:25px 16px 20px}.shop-upgrade{min-height:74px} }

/* === Skyrim-style world compass === */
#worldCompass {
  position: fixed;
  top: 17px;
  left: 50%;
  width: min(720px, 72vw);
  height: 66px;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.85));
}
#hud.visible #worldCompass { opacity: 1; }
.compass-track {
  position: absolute;
  inset: 0 28px;
  overflow: hidden;
  border-top: 1px solid rgba(231,222,191,.22);
  background: linear-gradient(180deg, rgba(10,13,12,.48), rgba(10,13,12,0) 72%);
}
.compass-track::before {
  content:"";
  position:absolute;
  left:0; right:0; top:12px; height:10px;
  opacity:.55;
  background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(235,226,197,.58) 31px 32px, transparent 32px 63px);
}
.compass-center {
  position:absolute;
  left:50%; top:6px;
  width:0; height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:9px solid #ead8a7;
  transform:translateX(-50%);
  filter:drop-shadow(0 1px 2px #000);
}
.compass-cardinal {
  position:absolute;
  top:12px;
  transform:translateX(-50%);
  font-family: Georgia, serif;
  font-size:17px;
  font-weight:800;
  color:#eee6ce;
  text-shadow:0 2px 3px #000;
  transition:opacity .12s;
}
.compass-cardinal.outside { opacity:0; }
.compass-marker-layer { position:absolute; inset:0; }
.compass-world-marker {
  position:absolute;
  top:28px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:92px;
  transition:left .07s linear, opacity .12s;
  color:#f3e9c9;
}
.compass-world-marker > span {
  display:grid;
  place-items:center;
  min-width:27px;
  height:27px;
  padding:0 4px;
  border:1px solid rgba(238,222,176,.7);
  background:radial-gradient(circle, rgba(79,69,43,.92), rgba(13,16,15,.92));
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-size:15px;
  font-weight:900;
}
.compass-world-marker small {
  margin-top:3px;
  padding:2px 6px;
  border-radius:3px;
  background:rgba(7,9,8,.72);
  font-size:10px;
  letter-spacing:.04em;
  white-space:nowrap;
  color:#ddd2b5;
}
.compass-world-marker.outside,
.compass-world-marker.hidden { opacity:0; }
.compass-level1 > span { color:#7fffc6; }
.compass-level2 > span { color:#8db4ff; }
.compass-merchant > span { font-size:17px; }
.compass-fade { position:absolute; top:0; bottom:0; width:72px; z-index:3; }
.compass-fade-left { left:0; background:linear-gradient(90deg, rgba(6,8,7,1), transparent); }
.compass-fade-right { right:0; background:linear-gradient(-90deg, rgba(6,8,7,1), transparent); }

/* === Escape pause + live stats === */
#pauseStatsPanel {
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  padding:24px;
  background:radial-gradient(circle at 50% 42%, rgba(39,48,37,.35), rgba(3,5,4,.88));
  backdrop-filter:blur(7px) saturate(.7);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s;
}
#pauseStatsPanel.visible { opacity:1; visibility:visible; pointer-events:auto; }
.pause-stats-card {
  width:min(680px, 92vw);
  max-height:88vh;
  overflow:auto;
  padding:28px 30px 24px;
  border:1px solid rgba(202,190,150,.48);
  background:linear-gradient(145deg, rgba(20,25,21,.98), rgba(8,11,9,.98));
  box-shadow:0 24px 75px rgba(0,0,0,.75), inset 0 0 45px rgba(115,139,88,.08);
  color:#eee7d3;
  text-align:center;
}
.pause-eyebrow { font-size:11px; letter-spacing:.28em; color:#9cad83; }
.pause-stats-card h2 { margin:5px 0 22px; font:700 38px/1 Georgia,serif; letter-spacing:.04em; }
.pause-stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; text-align:left; }
.pause-stat {
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  min-height:50px;
  padding:7px 12px;
  border:1px solid rgba(230,219,184,.13);
  background:rgba(255,255,255,.035);
}
.pause-stat span { font-size:20px; }
.pause-stat strong { font-size:13px; color:#cfc6ac; }
.pause-stat b { color:#fff7d7; font-size:14px; }
#resumeGameButton {
  display:block;
  width:min(310px,100%);
  margin:22px auto 10px;
  padding:13px 18px;
  border:1px solid #bcae82;
  background:linear-gradient(#596447,#303828);
  color:#fff9df;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
#resumeGameButton:hover { filter:brightness(1.18); }
.pause-stats-card > span { color:#8f9685; font-size:12px; }
body.game-paused #firstPersonHands { filter:brightness(.7); }
body.game-paused #hint { display:none !important; }
@media (max-width:680px) {
  #worldCompass { width:94vw; top:8px; }
  .compass-world-marker small { display:none; }
  .pause-stats-grid { grid-template-columns:1fr; }
  .pause-stats-card { padding:22px 16px; }
}

/* === Compact direction line: merchant + level markers only === */
#worldCompass {
  top: 10px !important;
  width: min(300px, 58vw) !important;
  height: 28px !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)) !important;
}
.compass-track {
  inset: 10px 0 0 !important;
  height: 2px !important;
  overflow: visible !important;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(232,224,194,.75) 14%, rgba(232,224,194,.75) 86%, transparent) !important;
}
.compass-track::before,
.compass-cardinal,
.compass-fade,
.compass-world-marker small { display:none !important; }
.compass-center {
  top: 6px !important;
  width: 1px !important;
  height: 10px !important;
  border: 0 !important;
  background: #f0e4bd !important;
  transform: translateX(-50%) !important;
}
.compass-marker-layer { position:absolute; inset:0; overflow:visible; }
.compass-world-marker {
  top: -8px !important;
  min-width: 0 !important;
  width: 18px !important;
  height: 18px !important;
  display:block !important;
  transform: translateX(-50%) !important;
}
.compass-world-marker > span {
  display:grid !important;
  place-items:center !important;
  width:18px !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 !important;
  border:0 !important;
  background:rgba(8,11,9,.78) !important;
  clip-path:none !important;
  border-radius:50% !important;
  font-size:11px !important;
  line-height:1 !important;
  box-shadow:0 0 0 1px rgba(238,222,176,.32), 0 1px 3px #000 !important;
}
.compass-merchant > span { font-size:12px !important; }
@media (max-width:680px) {
  #worldCompass { width:min(250px, 65vw) !important; top:8px !important; }
}

/* Hidden pause-screen testing menu */
#modMenuPanel { position:fixed; inset:0; z-index:240; display:grid; place-items:center; padding:18px; background:rgba(4,8,6,.78); backdrop-filter:blur(8px); opacity:0; visibility:hidden; pointer-events:none; transition:.16s ease; }
#modMenuPanel.visible { opacity:1; visibility:visible; pointer-events:auto; }
#pauseStatsPanel.mod-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.mod-menu-card { position:relative; width:min(760px,calc(100vw - 28px)); max-height:90vh; overflow:auto; padding:28px; border:1px solid rgba(172,205,142,.28); border-radius:18px; background:linear-gradient(155deg,rgba(26,35,27,.98),rgba(8,13,10,.98)); box-shadow:0 28px 80px rgba(0,0,0,.58); color:#f3efdf; }
.mod-menu-close { position:absolute; top:9px; right:13px; border:0; background:transparent; color:#d9decf; font-size:30px; cursor:pointer; }
.mod-menu-eyebrow { color:#8fb477; font-size:11px; letter-spacing:.26em; }
.mod-menu-card h2 { margin:5px 0 20px; font:700 34px Georgia,serif; }
.mod-menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mod-menu-grid label { display:grid; gap:6px; padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(255,255,255,.035); color:#cfd8c9; font-size:12px; }
.mod-menu-grid input { width:100%; box-sizing:border-box; border:1px solid rgba(170,204,141,.24); border-radius:8px; padding:9px 10px; background:#0a100c; color:#fffbdc; font:600 14px system-ui,sans-serif; outline:none; }
.mod-menu-grid input:focus { border-color:#8fbd71; box-shadow:0 0 0 3px rgba(143,189,113,.12); }
#applyModStats { width:100%; margin-top:14px; padding:12px; border:1px solid rgba(172,218,135,.35); border-radius:10px; background:linear-gradient(#4f703d,#2f4728); color:#fff; font-weight:800; cursor:pointer; }
.mod-menu-card > span { display:block; margin-top:11px; text-align:center; color:#879184; font-size:11px; }
@media (max-width:620px) { .mod-menu-grid{grid-template-columns:1fr}.mod-menu-card{padding:23px 14px} }

/* Combat impact, jump and landing feedback */
#playerImpactOverlay {
  position: fixed;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(120,0,0,0) 22%, rgba(190,8,4,.22) 72%, rgba(255,20,12,.48) 100%),
    linear-gradient(rgba(255,32,20,.08), rgba(110,0,0,.18));
  mix-blend-mode: screen;
  transition: opacity .055s linear;
}
#firstPersonHands.player-hit-impact {
  animation: playerHandsDamageShake .24s cubic-bezier(.2,.75,.25,1);
  filter: sepia(.45) saturate(4.2) hue-rotate(322deg) brightness(.92) drop-shadow(0 0 11px rgba(255,20,15,.45));
}
#firstPersonHands.hard-land-impact {
  animation: playerHandsHardLand .34s cubic-bezier(.16,.7,.2,1);
  filter: sepia(.22) saturate(2.1) hue-rotate(330deg) brightness(.95);
}
#firstPersonHands.jump-launch .fp-arm-left {
  animation: jumpLaunchLeft .30s cubic-bezier(.15,.8,.25,1) !important;
}
#firstPersonHands.jump-launch .fp-arm-right {
  animation: jumpLaunchRight .30s cubic-bezier(.15,.8,.25,1) !important;
}
#firstPersonHands.is-airborne:not(.punch-left):not(.punch-right):not(.is-blocking) .fp-arm-left {
  transform: translate(-10px, 18px) rotate(-7deg) scale(.97);
}
#firstPersonHands.is-airborne:not(.punch-left):not(.punch-right):not(.is-blocking) .fp-arm-right {
  transform: translate(10px, 18px) rotate(7deg) scaleX(-1) scale(.97);
}
@keyframes playerHandsDamageShake {
  0% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-8px,5px) rotate(-1.1deg); }
  42% { transform: translate(7px,-4px) rotate(.9deg); }
  65% { transform: translate(-4px,2px) rotate(-.5deg); }
  100% { transform: translate(0,0) rotate(0); }
}
@keyframes playerHandsHardLand {
  0% { transform: translateY(-5px) scale(1); }
  24% { transform: translateY(20px) scale(1.025,.95); }
  54% { transform: translateY(-5px) scale(.99,1.01); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes jumpLaunchLeft {
  0% { transform: translate(0,0) rotate(-2deg); }
  34% { transform: translate(-7px,18px) rotate(-8deg) scale(.96); }
  100% { transform: translate(-10px,12px) rotate(-6deg) scale(.98); }
}
@keyframes jumpLaunchRight {
  0% { transform: translate(0,0) rotate(2deg) scaleX(-1); }
  34% { transform: translate(7px,18px) rotate(8deg) scaleX(-1) scale(.96); }
  100% { transform: translate(10px,12px) rotate(6deg) scaleX(-1) scale(.98); }
}
/* Testing noclip switch */
.mod-noclip-row{margin:13px 0 4px}.mod-noclip-row label{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid rgba(123,206,255,.34);border-radius:12px;background:rgba(35,120,172,.11);cursor:pointer}.mod-noclip-row span{font-weight:800;color:#bfe9ff}.mod-noclip-row b{margin-left:auto;color:#8199a5;font:500 11px system-ui,sans-serif}.mod-noclip-row input{width:20px;height:20px;accent-color:#56c8ff}

.save-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}.save-actions button{min-width:145px}.save-actions .danger{background:rgba(90,24,24,.5);border-color:rgba(220,100,100,.45);color:#ffd7d7}.save-actions button:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(1)}.save-summary{margin-top:10px;font-size:11px;letter-spacing:.5px;color:#9fb0a6}
#saveToast{position:fixed;right:18px;bottom:18px;z-index:400;padding:8px 12px;border:1px solid rgba(160,210,175,.32);border-radius:8px;background:rgba(5,13,10,.88);color:#cfe9d7;font:11px system-ui;letter-spacing:1px;opacity:0;transform:translateY(8px);transition:.25s;pointer-events:none}#saveToast.show{opacity:1;transform:none}

.combat-callout {
  position: fixed;
  left: 50%;
  top: 42%;
  z-index: 10020;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font: 900 30px/1 system-ui, sans-serif;
  letter-spacing: .12em;
  color: #f3f0df;
  text-shadow: 0 3px 0 #140b08, 0 0 18px rgba(255,255,255,.25);
  animation: combatCallout .62s ease-out forwards;
}
.combat-callout.combo { color:#ffd264; text-shadow:0 3px 0 #5b2400,0 0 20px rgba(255,143,24,.75); }
.combat-callout.finisher { color:#ff493d; font-size:38px; text-shadow:0 4px 0 #4a0000,0 0 28px rgba(255,25,15,.9); }
.combat-callout.parry { color:#8feeff; text-shadow:0 3px 0 #073944,0 0 24px rgba(57,220,255,.85); }
@keyframes combatCallout {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.55); }
  24% { opacity:1; transform:translate(-50%,-58%) scale(1.12); }
  100% { opacity:0; transform:translate(-50%,-88%) scale(.92); }
}

/* Charged punch and stronger impact poses */
#firstPersonHands.charging-punch .fp-arm-left,
#firstPersonHands.charging-punch .fp-arm-right {
  transition: transform .18s ease-out, filter .18s ease-out;
  filter: brightness(.88) saturate(1.18);
}
#firstPersonHands.charging-punch .fp-arm-left { transform: translate(-34px, 26px) rotate(-12deg) scale(.96); }
#firstPersonHands.charging-punch .fp-arm-right { transform: translate(34px, 26px) rotate(12deg) scaleX(-1) scale(.96); }
#firstPersonHands.charged-punch.punch-left .fp-arm-left {
  animation: chargedPunchLeft .43s cubic-bezier(.18,.78,.2,1) both !important;
}
#firstPersonHands.charged-punch.punch-right .fp-arm-right {
  animation: chargedPunchRight .43s cubic-bezier(.18,.78,.2,1) both !important;
}
@keyframes chargedPunchLeft {
  0% { transform: translate(-34px,26px) rotate(-12deg) scale(.96); }
  42% { transform: translate(88px,-112px) rotate(5deg) scale(.72); }
  55% { transform: translate(96px,-118px) rotate(7deg) scale(.69); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes chargedPunchRight {
  0% { transform: translate(34px,26px) rotate(12deg) scaleX(-1) scale(.96); }
  42% { transform: translate(-88px,-112px) rotate(-5deg) scaleX(-1) scale(.72); }
  55% { transform: translate(-96px,-118px) rotate(-7deg) scaleX(-1) scale(.69); }
  100% { transform: translate(0,0) rotate(0) scaleX(-1) scale(1); }
}

/* UI stability fixes: hidden full-screen overlays must never cover part of gameplay. */
#specialDropPanel:not(.visible),
#inventoryPanel:not(.visible),
#craftingPanel:not(.visible),
#travelPanel:not(.visible),
#biomeProgressPanel:not(.visible),
#modPanel:not(.visible),
#shopPanel:not(.visible) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Single queued notification lane so item pickups never overlap in the screen centre. */
#verdantNotificationLane {
  position: fixed;
  left: 50%;
  top: 35%;
  transform: translateX(-50%);
  z-index: 10030;
  width: min(520px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}
.verdant-notification {
  max-width: 100%;
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(5,8,12,.80);
  color: #f3f0df;
  box-shadow: 0 8px 24px rgba(0,0,0,.34);
  backdrop-filter: blur(7px);
  font: 850 13px/1.15 system-ui, sans-serif;
  letter-spacing: .06em;
  text-align: center;
  white-space: normal;
  animation: verdantNoticeInOut 1.25s ease both;
}
.verdant-notification.critical {
  color: #ffd7d1;
  border-color: rgba(255,95,75,.48);
  background: rgba(62,8,6,.86);
}
.verdant-notification .notice-count {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: 10px;
}
@keyframes verdantNoticeInOut {
  0% { opacity:0; transform:translateY(8px) scale(.96); }
  14%,72% { opacity:1; transform:none; }
  100% { opacity:0; transform:translateY(-8px) scale(.98); }
}


/* Compact airborne jump counter */
#airJumpCounter {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2147482000;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 108px;
  padding: 5px 10px;
  border: 1px solid rgba(145,210,255,.62);
  border-radius: 999px;
  background: rgba(5,9,14,.88);
  color: rgba(235,242,250,.72);
  box-shadow: 0 5px 18px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  pointer-events: none;
  font-family: system-ui, sans-serif;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
#airJumpCounter .air-jump-icon { font-size: 13px; }
#airJumpCounter .air-jump-label { font-size: 8px; font-weight: 900; letter-spacing: .13em; }
#airJumpCounter strong { margin-left: auto; font-size: 13px; color: #eaf5ff; }
#airJumpCounter.airborne {
  border-color: rgba(126,196,255,.52);
  color: #d7efff;
  transform: translateX(-50%) translateY(-2px);
}
#airJumpCounter.empty { opacity: .45; }
body:not(.game-started) #airJumpCounter { display: none !important; }