* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  background: #0e0e10;
}

/* ---------- Entrance page ---------- */

.entrance-body {
  background: radial-gradient(circle at center, #1a1a1d 0%, #0a0a0b 100%);
}

.entrance-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.entry-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px;
  border-radius: 50%;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
}

.entry-btn:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.8));
}

.entry-btn:active {
  transform: scale(0.97);
}

.hand-svg {
  width: 160px;
  height: auto;
  display: block;
  transform-origin: 50% 90%;
  animation: tremble 4s ease-in-out infinite;
}

@keyframes tremble {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2deg); }
}

/* ---------- Bell entrance graphic ---------- */

.bell-svg {
  width: 195px;
  height: auto;
  display: block;
  overflow: visible;
}

.bell-body {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: bell-sway 5s ease-in-out infinite;
}

@keyframes bell-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.2deg); }
}

.clapper {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

/* Ripple rings, hidden until the bell rings */
.chime-ring {
  fill: none;
  stroke: #6b6b70;
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* --- Active ring, triggered on click --- */
.bell-svg.ringing .bell-body {
  animation: bell-ring 0.9s ease-in-out 2;
}

.bell-svg.ringing .clapper {
  animation: clapper-swing 0.9s ease-in-out 2;
}

.bell-svg.ringing .chime-ring1 { animation: chime-out 1.4s ease-out 0.05s; }
.bell-svg.ringing .chime-ring2 { animation: chime-out 1.4s ease-out 0.35s; }
.bell-svg.ringing .chime-ring3 { animation: chime-out 1.4s ease-out 0.65s; }

@keyframes bell-ring {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}

@keyframes clapper-swing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-14deg); }
  75% { transform: rotate(14deg); }
}

@keyframes chime-out {
  0% { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Each finger rotates about its base (bottom of its own shape) to curl into a fist */
.finger {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 0.45s cubic-bezier(0.55, 0, 0.55, 1);
}

.hand-svg.curled .finger {
  transform: rotate(120deg);
}

.hand-svg.curled .finger.thumb {
  transform: rotate(80deg);
}

/* stagger the curl slightly per finger for a more organic motion */
.hand-svg.curled rect.finger:nth-of-type(1) { transition-delay: 0s; }
.hand-svg.curled rect.finger:nth-of-type(2) { transition-delay: 0.04s; }
.hand-svg.curled rect.finger:nth-of-type(3) { transition-delay: 0.08s; }
.hand-svg.curled rect.finger:nth-of-type(4) { transition-delay: 0.12s; }

.hint {
  color: #6b6b70;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

/* ---------- Fade transition overlay (shared) ---------- */

.fade-overlay {
  position: fixed;
  inset: 0;
  background: #0a0a0b;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 1.4s ease;
}

.fade-overlay.fade-active {
  opacity: 1;
  pointer-events: all;
}

/* ---------- Const page ---------- */

.const-body {
  background: radial-gradient(circle at center, #1a1a1d 0%, #0a0a0b 100%);
  perspective: 1200px;
  overflow: hidden;
}

.const-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 20px;
}

/* Container that holds both slides stacked in the same spot */
.slides-wrap {
  position: relative;
  width: 300px;
  height: 380px;
}

/* Each slide gets the 3D flip transition when switching */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: perspective(1000px) rotateY(0deg) translateX(0);
  opacity: 1;
}

.slide.content-exit-right {
  transform: perspective(1000px) rotateY(-70deg) translateX(-60px);
  opacity: 0;
}

.slide.content-exit-left {
  transform: perspective(1000px) rotateY(70deg) translateX(60px);
  opacity: 0;
}

.slide.content-enter-from-right {
  transform: perspective(1000px) rotateY(70deg) translateX(60px);
  opacity: 0;
}

.slide.content-enter-from-left {
  transform: perspective(1000px) rotateY(-70deg) translateX(-60px);
  opacity: 0;
}

/* Arrow navigation buttons */
.arrow-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #cfcfd4;
  background: linear-gradient(145deg, #2a2a2e, #131315);
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.6),
    -2px -2px 6px rgba(255, 255, 255, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  z-index: 500;
}

.arrow-btn:hover {
  color: #ffffff;
  transform: translateY(-50%) scale(1.08);
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.7),
    -3px -3px 8px rgba(255, 255, 255, 0.05);
}

.arrow-btn:active {
  transform: translateY(-50%) scale(0.94);
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.7),
    inset 2px 2px 6px rgba(0, 0, 0, 0.5);
}

.arrow-right {
  right: 30px;
}

.arrow-left {
  left: 30px;
}

/* Crossfade wrapper for switching between the main view and the bonus view */
.view-fade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* Small round icon buttons, same raised 3D look as the arrows, different placement */
.icon-btn {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #cfcfd4;
  background: linear-gradient(145deg, #2a2a2e, #131315);
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.6),
    -2px -2px 6px rgba(255, 255, 255, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  z-index: 500;
}

.icon-btn:hover {
  color: #ffffff;
  transform: scale(1.08);
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.7),
    -3px -3px 8px rgba(255, 255, 255, 0.05);
}

.icon-btn:active {
  transform: scale(0.94);
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.7),
    inset 2px 2px 6px rgba(0, 0, 0, 0.5);
}

.corner-btn {
  top: 30px;
  right: 30px;
}

.back-btn {
  top: 30px;
  left: 30px;
}

/* Circular image frame — works no matter the source image's aspect ratio */
.circle-frame {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.circle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crops non-square images so they still fill the circle */
  object-position: center;
  display: block;
}

/* Dark, shadowy text style (also used as a clickable link) */
.shadow-text {
  color: #3a3a3f;
  font-size: 1.3rem;
  text-align: center;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 0 12px rgba(0, 0, 0, 0.8),
    0 0 24px rgba(0, 0, 0, 0.5);
}

.shadow-text:hover {
  color: #55555c;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 0 16px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(0, 0, 0, 0.6);
}

/* Small trademark line, fixed at the bottom of the screen */
.footer-trademark {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 1rem;
  color: #4a4a50;
  letter-spacing: 0.03em;
  z-index: 400;
}

/* Top-center label, reuses the same dark shadowy text look */
.top-label {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 1.7rem;
  z-index: 400;
}

/* ---------- Play Game button ---------- */

.play-game-btn {
  position: fixed;
  top: 30px;
  right: 30px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid #2a0808;
  background: linear-gradient(145deg, #1c0606, #0a0202);
  color: #8b1a1a;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow:
    0 0 14px rgba(139, 0, 0, 0.35),
    4px 4px 10px rgba(0, 0, 0, 0.6),
    -2px -2px 6px rgba(255, 255, 255, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  z-index: 500;
}

.play-game-btn:hover {
  color: #c62828;
  transform: scale(1.06);
  box-shadow:
    0 0 22px rgba(180, 10, 10, 0.55),
    6px 6px 14px rgba(0, 0, 0, 0.7),
    -3px -3px 8px rgba(255, 255, 255, 0.04);
}

.play-game-btn:active {
  transform: scale(0.95);
}

.shop-btn {
  position: fixed;
  top: 30px;
  right: 30px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid #2a0808;
  background: linear-gradient(145deg, #1c0606, #0a0202);
  color: #8b1a1a;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow:
    0 0 14px rgba(139, 0, 0, 0.35),
    4px 4px 10px rgba(0, 0, 0, 0.6),
    -2px -2px 6px rgba(255, 255, 255, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  z-index: 500;
}

.shop-btn:hover {
  color: #c62828;
  transform: scale(1.06);
  box-shadow:
    0 0 22px rgba(180, 10, 10, 0.55),
    6px 6px 14px rgba(0, 0, 0, 0.7),
    -3px -3px 8px rgba(255, 255, 255, 0.04);
}

.shop-btn:active {
  transform: scale(0.95);
}

.view-outcomes-btn {
  position: fixed;
  bottom: 26px;
  right: 26px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid #2a0808;
  background: linear-gradient(145deg, #1c0606, #0a0202);
  color: #6b6b70;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow:
    0 0 12px rgba(139, 0, 0, 0.25),
    4px 4px 10px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  z-index: 500;
}

.view-outcomes-btn:hover {
  color: #c62828;
  transform: scale(1.06);
  box-shadow:
    0 0 20px rgba(180, 10, 10, 0.45),
    6px 6px 14px rgba(0, 0, 0, 0.7);
}

.view-outcomes-btn:active {
  transform: scale(0.95);
}

.cutscene-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  animation: cutscene-fade-in 1.6s ease both;
}

.cutscene-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #2a0808;
  background: linear-gradient(145deg, #1c0606, #0a0202);
  color: #8b1a1a;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.cutscene-nav-btn:hover {
  color: #c62828;
  transform: scale(1.1);
}

.cutscene-index {
  color: #6b6b70;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin: 0;
  min-width: 44px;
  text-align: center;
}

.points-badge {
  position: fixed;
  top: 30px;
  left: 30px;
  margin: 0;
  color: #8b1a1a;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
  z-index: 400;
}

.shop-points {
  position: static;
  margin-top: -6px;
  margin-bottom: 6px;
  text-align: center;
}

/* ---------- Knife game ---------- */

@property --blood-pct {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 18px;
  padding: 20px;
}

.game-hud {
  display: flex;
  align-items: center;
  gap: 16px;
}

.knife-container {
  position: relative;
  width: 44px;
  height: 150px;
  --knife-scale: 1;
  --glow-color: transparent;
  transform: scale(var(--knife-scale));
  transform-origin: 50% 85%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s ease;
  --knife-clip: polygon(
    50% 0%, 57% 10%, 56% 45%, 53% 55%,
    74% 58%, 74% 64%, 60% 64%, 60% 100%,
    40% 100%, 40% 64%, 26% 64%, 26% 58%,
    47% 55%, 44% 45%, 43% 10%
  );
  --blade-grad: linear-gradient(180deg, #b9b9be 0%, #6a6a70 18%, #38383c 38%, #17171a 54%, #3c2a20 62%, #241811 80%, #120c08 100%);
  --blood-color: rgba(110, 4, 4, 0.9);
}

/* Center blood-groove highlight running down the blade */
.knife-fuller {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: polygon(49% 9%, 51% 9%, 51% 52%, 49% 52%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.03));
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Ridged grip texture on the handle */
.knife-grip {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: polygon(42% 68%, 58% 68%, 58% 97%, 42% 97%);
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.55) 0px,
    rgba(0, 0, 0, 0.55) 2px,
    rgba(255, 255, 255, 0.14) 2px,
    rgba(255, 255, 255, 0.14) 3px,
    transparent 3px,
    transparent 7px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

.knife-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-color) 0%, transparent 68%);
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.knife-blade-base,
.knife-gloss,
.knife-blood-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: var(--knife-clip);
}

.knife-blade-base {
  background: var(--blade-grad);
}

.knife-gloss {
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0.32) 47%,
    rgba(255, 255, 255, 0) 62%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

.knife-blood-overlay {
  --blood-pct: 0%;
  background:
    radial-gradient(circle at 32% 22%, rgba(60, 0, 0, 0.65) 0%, rgba(60, 0, 0, 0.65) 5%, transparent 6%),
    radial-gradient(circle at 62% 34%, rgba(60, 0, 0, 0.55) 0%, rgba(60, 0, 0, 0.55) 4%, transparent 5%),
    radial-gradient(circle at 44% 44%, rgba(60, 0, 0, 0.5) 0%, rgba(60, 0, 0, 0.5) 3%, transparent 4%),
    linear-gradient(
      to bottom,
      var(--blood-color) 0%,
      var(--blood-color) var(--blood-pct),
      transparent var(--blood-pct),
      transparent 100%
    );
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
  transition: --blood-pct 0.5s ease;
}

.blood-drip {
  position: absolute;
  top: 6%;
  width: 3px;
  height: 9px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(to bottom, rgba(130, 6, 6, 0.95), rgba(80, 2, 2, 0.6));
  pointer-events: none;
  animation: drip-fall 1.2s ease-in forwards;
  z-index: 2;
}

@keyframes drip-fall {
  0% { opacity: 1; transform: translate(-50%, 0) scaleY(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 130px) scaleY(1.5); }
}

.knife-ember {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff7a3d, #b31212 65%, transparent);
  box-shadow: 0 0 6px rgba(255, 100, 40, 0.85);
  pointer-events: none;
  animation: ember-rise 1.5s ease-out forwards;
  z-index: 2;
}

.knife-ember.ember-violet {
  background: radial-gradient(circle, #d9a8ff, #7b2fc9 65%, transparent);
  box-shadow: 0 0 6px rgba(160, 70, 230, 0.85);
}

@keyframes ember-rise {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(6px, -75px) scale(0.35); }
}

.knife-container.skin-rusty {
  --knife-scale: 1;
  --glow-color: transparent;
  --knife-clip: polygon(
    50% 0%, 57% 10%, 56% 45%, 53% 55%,
    74% 58%, 74% 64%, 60% 64%, 60% 100%,
    40% 100%, 40% 64%, 26% 64%, 26% 58%,
    47% 55%, 44% 45%, 43% 10%
  );
  --blade-grad: linear-gradient(180deg, #9a9a9d 0%, #5a5a5e 20%, #333335 40%, #1a1a1c 55%, #4a3324 63%, #2a1c12 82%, #14100a 100%);
  --blood-color: rgba(110, 4, 4, 0.9);
}

.knife-container.skin-shiv {
  --knife-scale: 0.82;
  --glow-color: transparent;
  /* crude, narrow, uneven blade with a stubby wrapped handle */
  --knife-clip: polygon(
    50% 12%, 55% 26%, 53% 48%, 51% 56%,
    64% 60%, 64% 66%, 55% 65%, 55% 100%,
    45% 100%, 45% 65%, 36% 66%, 36% 60%,
    47% 56%, 45% 48%, 44% 26%
  );
  --blade-grad: linear-gradient(180deg, #8a8a8c 0%, #4a4a4c 25%, #232325 48%, #101011 58%, #362a20 68%, #1c150f 86%, #0d0a07 100%);
  --blood-color: rgba(110, 4, 4, 0.9);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
}

.knife-container.skin-serrated {
  --knife-scale: 1.06;
  --glow-color: rgba(100, 150, 190, 0.4);
  /* smooth true edge on the left, sawtooth cutting edge on the right */
  --knife-clip: polygon(
    50% 0%,
    57% 10%, 53% 14%, 57% 18%, 53% 22%, 57% 26%,
    53% 30%, 57% 34%, 53% 38%, 57% 42%, 55% 45%,
    53% 55%,
    74% 58%, 74% 64%, 60% 64%, 60% 100%,
    40% 100%, 40% 64%, 26% 64%, 26% 58%,
    47% 55%, 44% 45%, 43% 10%
  );
  --blade-grad: linear-gradient(180deg, #cfe4f5 0%, #7d99ab 18%, #384955 38%, #131c20 54%, #35404a 62%, #1b2226 80%, #0c1012 100%);
  --blood-color: rgba(150, 4, 4, 0.92);
}

.knife-container.skin-serrated .knife-glow {
  opacity: 0.4;
  animation: glow-pulse-soft 3.2s ease-in-out infinite;
}

.knife-container.skin-serrated .knife-gloss {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(190, 225, 255, 0.55) 10%, rgba(255, 255, 255, 0) 20%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.32) 47%, rgba(255, 255, 255, 0) 62%);
  background-size: 260% 260%, 100% 100%;
  animation: shimmer-sweep 3s linear infinite;
}

.knife-container.skin-hunter {
  --knife-scale: 1.1;
  --glow-color: transparent;
  /* wider fixed-blade with an offset clip-point tip and a stout wood-toned handle */
  --knife-clip: polygon(
    46% 4%, 60% 8%, 57% 20%, 60% 34%, 56% 50%, 54% 56%,
    78% 58%, 78% 64%, 62% 64%, 62% 100%,
    38% 100%, 38% 64%, 24% 64%, 24% 58%,
    44% 55%, 42% 40%, 44% 24%, 40% 10%
  );
  --blade-grad: linear-gradient(180deg, #b3b3b6 0%, #6c6c70 18%, #3a3a3d 38%, #18181a 54%, #6b4322 63%, #402910 82%, #201408 100%);
  --blood-color: rgba(120, 6, 6, 0.9);
}

.knife-container.skin-bowie {
  --knife-scale: 1.14;
  --glow-color: transparent;
  /* classic clip-point swedge notched near the tip, brass-toned guard */
  --knife-clip: polygon(
    42% 2%, 60% 2%, 68% 14%, 60% 22%, 62% 36%, 57% 52%, 55% 57%,
    80% 60%, 80% 66%, 63% 66%, 63% 100%,
    37% 100%, 37% 66%, 20% 66%, 20% 60%,
    45% 57%, 43% 40%, 41% 24%, 44% 12%
  );
  --blade-grad: linear-gradient(180deg, #c7c7ca 0%, #83838a 16%, #45454a 36%, #1c1c1f 52%, #5c4118 62%, #382a10 84%, #1a1408 100%);
  --blood-color: rgba(130, 6, 6, 0.92);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.6));
}

.knife-container.skin-karambit {
  --knife-scale: 1.08;
  --glow-color: rgba(80, 200, 130, 0.4);
  /* hooked claw blade curving back toward the grip */
  --knife-clip: polygon(
    62% 6%, 74% 14%, 80% 28%, 78% 42%, 68% 50%, 56% 52%,
    60% 58%, 78% 62%, 78% 68%, 60% 66%, 58% 100%,
    42% 100%, 44% 66%, 30% 66%, 26% 60%,
    46% 56%, 40% 48%, 34% 36%, 38% 22%, 48% 10%
  );
  --blade-grad: linear-gradient(180deg, #a9d6b8 0%, #4f8f68 16%, #1f4530 36%, #0c1c14 52%, #223018 62%, #121a0d 84%, #090c06 100%);
  --blood-color: rgba(120, 6, 6, 0.92);
}

.knife-container.skin-karambit .knife-glow {
  opacity: 0.4;
  animation: glow-pulse-soft 3s ease-in-out infinite;
}

.knife-container.skin-stiletto {
  --knife-scale: 1.18;
  --glow-color: rgba(200, 200, 210, 0.35);
  /* long thin needle blade with a minimal guard */
  --knife-clip: polygon(
    50% 0%, 53% 30%, 52% 50%, 51% 56%,
    62% 58%, 62% 64%, 55% 64%, 55% 100%,
    45% 100%, 45% 64%, 38% 64%, 38% 58%,
    49% 56%, 48% 50%, 47% 30%
  );
  --blade-grad: linear-gradient(180deg, #e6e6ea 0%, #a3a3aa 16%, #5c5c62 36%, #232326 54%, #3a3a3e 63%, #1c1c1f 84%, #0c0c0d 100%);
  --blood-color: rgba(150, 6, 6, 0.92);
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.6));
}

.knife-container.skin-obsidian {
  --knife-scale: 1.22;
  --glow-color: rgba(150, 60, 230, 0.55);
  /* fractured glassy blade with jagged edges on both sides */
  --knife-clip: polygon(
    50% 0%, 58% 8%, 54% 16%, 60% 22%, 53% 30%, 59% 38%, 52% 46%, 56% 52%,
    57% 56%,
    80% 59%, 84% 65%, 74% 68%, 60% 66%, 60% 100%,
    40% 100%, 40% 66%, 26% 68%, 16% 65%, 20% 59%,
    43% 56%, 44% 52%, 37% 46%, 44% 38%, 38% 30%, 45% 22%, 39% 16%, 43% 8%
  );
  --blade-grad: linear-gradient(180deg, #c79bf0 0%, #6a2f9c 16%, #341959 36%, #140a24 52%, #2b1240 62%, #150a1f 84%, #0a0510 100%);
  --blood-color: rgba(150, 6, 6, 0.95);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 12px rgba(150, 60, 230, 0.45));
}

.knife-container.skin-obsidian .knife-glow {
  opacity: 0.5;
  animation: glow-pulse-strong 2.4s ease-in-out infinite;
}

.knife-container.skin-cleaver {
  --knife-scale: 1.16;
  --glow-color: rgba(130, 0, 0, 0.45);
  /* flat spine at top, wide curved chopping edge at the widest point, stout handle */
  --knife-clip: polygon(
    46% 2%, 66% 2%,
    84% 14%, 90% 34%, 88% 48%,
    80% 56%, 64% 60%, 64% 100%,
    36% 100%, 36% 60%, 20% 56%,
    12% 48%, 10% 34%, 16% 14%
  );
  --blade-grad: linear-gradient(180deg, #7a7a7e 0%, #3c3c40 20%, #17171a 40%, #050506 55%, #2c1e15 65%, #17100b 84%, #0a0705 100%);
  --blood-color: rgba(90, 0, 0, 0.95);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85));
}

.knife-container.skin-cleaver .knife-glow {
  opacity: 0.45;
  animation: glow-pulse-soft 3.8s ease-in-out infinite;
}

.knife-container.skin-reaper {
  --knife-scale: 1.26;
  --glow-color: rgba(230, 20, 20, 0.6);
  /* wavy flame-style blade with a hooked, ornate crossguard */
  --knife-clip: polygon(
    50% 0%,
    58% 6%, 52% 12%, 60% 18%, 52% 24%, 62% 30%,
    53% 36%, 63% 42%, 55% 48%, 57% 55%,
    82% 58%, 88% 64%, 80% 68%, 62% 66%, 62% 100%,
    38% 100%, 38% 66%, 20% 68%, 12% 64%, 18% 58%,
    43% 55%, 45% 48%, 37% 42%, 47% 36%,
    38% 30%, 48% 24%, 40% 18%, 48% 12%, 42% 6%
  );
  --blade-grad: linear-gradient(180deg, #ff5a5a 0%, #a10f0f 16%, #4a0505 36%, #1a0202 52%, #3a0a0a 62%, #1c0505 82%, #0d0202 100%);
  --blood-color: rgba(200, 10, 10, 0.95);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(210, 15, 15, 0.5));
  animation: knife-sway 4s ease-in-out infinite;
}

.knife-container.skin-reaper .knife-glow {
  opacity: 0.55;
  animation: glow-pulse-strong 2s ease-in-out infinite;
}

@keyframes glow-pulse-soft {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.55; }
}

@keyframes glow-pulse-strong {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.12); }
}

@keyframes shimmer-sweep {
  0% { background-position: -60% -60%, 0 0; }
  100% { background-position: 160% 160%, 0 0; }
}

@keyframes knife-sway {
  0%, 100% { transform: scale(var(--knife-scale)) rotate(0deg); }
  50% { transform: scale(var(--knife-scale)) rotate(-4deg); }
}

.hud-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.level-badge {
  color: #8b8b90;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.timer-badge {
  color: #b71c1c;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(183, 28, 28, 0.5);
  min-width: 60px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.timer-badge.time-low {
  color: #ff3b3b;
  text-shadow: 0 0 14px rgba(255, 59, 59, 0.85);
  animation: timer-pulse 0.6s ease-in-out infinite;
}

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

.kill-counter {
  color: #6b6b70;
  font-size: 1rem;
  letter-spacing: 0.05em;
  min-width: 60px;
}

.canvas-frame {
  width: 320px;
  height: 430px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1a1a1d;
  box-shadow:
    0 0 24px rgba(0, 0, 0, 0.7),
    inset 0 0 30px rgba(0, 0, 0, 0.8);
}

#gameCanvas {
  display: block;
  cursor: crosshair;
}

.game-hint {
  color: #4a4a50;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* Reward overlay, shown once every dummy is down */
.reward-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(5, 2, 2, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 600;
}

.reward-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.reward-title {
  color: #6b6b70;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}

.reward-points {
  color: #b71c1c;
  font-size: 2rem;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 12px rgba(183, 28, 28, 0.7),
    0 0 30px rgba(183, 28, 28, 0.4);
}

.play-again-btn {
  margin-top: 10px;
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid #2a0808;
  background: linear-gradient(145deg, #1c0606, #0a0202);
  color: #8b1a1a;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.play-again-btn:hover {
  color: #c62828;
  transform: scale(1.05);
}

.reward-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Finale cutscene ---------- */

.cutscene-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(4, 1, 1, 0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  z-index: 700;
}

.cutscene-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.cutscene-frame {
  width: 280px;
  height: 340px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1a0505;
  box-shadow:
    0 0 40px rgba(120, 0, 0, 0.35),
    inset 0 0 40px rgba(0, 0, 0, 0.85);
  animation: cutscene-fade-in 1.2s ease both;
}

#cutsceneCanvas {
  display: block;
}

.cutscene-caption {
  color: #8b3030;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0 20px;
  animation: cutscene-fade-in 1.6s ease both;
}

.skip-cutscene-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #2a0808;
  background: linear-gradient(145deg, #1c0606, #0a0202);
  color: #6b6b70;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 701;
}

.skip-cutscene-btn:hover {
  color: #c62828;
  transform: scale(1.05);
}

@keyframes cutscene-fade-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

#shopView {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: center;
  justify-content: flex-start;
}

.shop-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 90px 20px 60px;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.shop-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.shop-section-title {
  color: #6b6b70;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.shop-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.shop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(145deg, #1a1a1d, #0a0a0b);
  border: 1px solid #1e1e21;
  box-shadow:
    3px 3px 8px rgba(0, 0, 0, 0.5),
    -1px -1px 4px rgba(255, 255, 255, 0.02);
}

.shop-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shop-item-name {
  color: #cfcfd4;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.shop-item-cost {
  color: #6b6b70;
  font-size: 0.75rem;
}

.shop-item-btn {
  align-self: stretch;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #2a0808;
  background: linear-gradient(145deg, #1c0606, #0a0202);
  color: #8b1a1a;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.shop-item-btn:hover:not(:disabled) {
  color: #c62828;
  transform: scale(1.05);
}

.shop-item-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.shop-item-btn.equipped {
  background: linear-gradient(145deg, #3a0a0a, #150303);
  color: #e04b4b;
  border-color: #5c1010;
  box-shadow: 0 0 10px rgba(200, 20, 20, 0.4);
  opacity: 1;
}

@media (min-width: 700px) {
  .shop-wrap {
    max-width: 640px;
  }

  .shop-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Mobile responsiveness ---------- */

@media (max-width: 600px) {
  .hand-svg {
    width: 120px;
  }

  .hint {
    font-size: 0.85rem;
    padding: 0 20px;
    text-align: center;
  }

  .circle-frame {
    width: 190px;
    height: 190px;
  }

  .slides-wrap {
    width: 220px;
    height: 300px;
  }

  .shadow-text {
    font-size: 1.1rem;
    padding: 0 10px;
  }

  .top-label {
    font-size: 1.3rem;
    top: 20px;
    padding: 0 10px;
    text-align: center;
  }

  .arrow-btn,
  .icon-btn {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }

  .arrow-right {
    right: 12px;
  }

  .arrow-left {
    left: 12px;
  }

  .corner-btn {
    top: 16px;
    right: 16px;
  }

  .back-btn {
    top: 16px;
    left: 16px;
  }

  .footer-trademark {
    font-size: 0.85rem;
    bottom: 12px;
  }

  .play-game-btn {
    top: 16px;
    right: 16px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .shop-btn {
    top: 16px;
    right: 16px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .view-outcomes-btn {
    bottom: 16px;
    right: 16px;
    padding: 9px 14px;
    font-size: 0.78rem;
  }

  .points-badge {
    top: 16px;
    left: 16px;
    font-size: 0.9rem;
  }

  .shop-wrap {
    padding: 76px 14px 50px;
  }

  .canvas-frame {
    width: 260px;
    height: 360px;
  }

  .cutscene-frame {
    width: 230px;
    height: 300px;
  }

  .knife-container {
    width: 36px;
    height: 120px;
  }

  .reward-points {
    font-size: 1.5rem;
  }
}

@media (max-width: 380px) {
  .hand-svg {
    width: 100px;
  }

  .circle-frame {
    width: 160px;
    height: 160px;
  }

  .slides-wrap {
    width: 190px;
    height: 260px;
  }

  .top-label {
    font-size: 1.1rem;
  }

  .canvas-frame {
    width: 220px;
    height: 320px;
  }

  .cutscene-frame {
    width: 190px;
    height: 260px;
  }

  .knife-container {
    width: 30px;
    height: 100px;
  }
}