* { box-sizing: border-box; }

:root {
  color-scheme: light only;
  --stone:        #8b8b8b;
  --stone-light:  #c6c6c6;
  --stone-dark:   #373737;
  --stone-mid:    #555555;
  --dirt:         #866043;
  --grass-top:    #5cab3a;
  --grass-side:   #826030;
  --slot-bg:      #1f1f1f;
  --slot-border:  #2b2b2b;
  --text:         #ffffff;
  --text-shadow:  #3f3f3f;
}

html, body {
  background: #5a8b3a;
  color: var(--text);
}

body {
  margin: 0;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 22px;
  min-height: 100vh;
  /* Dirt block pattern */
  background-color: #866043;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'><rect width='32' height='32' fill='%23866043'/><rect x='0' y='0' width='6' height='5' fill='%236b4a30'/><rect x='10' y='2' width='5' height='4' fill='%239a7350'/><rect x='20' y='0' width='4' height='6' fill='%23704b32'/><rect x='4' y='10' width='6' height='4' fill='%237a5538'/><rect x='16' y='12' width='5' height='5' fill='%23966c4a'/><rect x='26' y='8' width='4' height='6' fill='%236b4a30'/><rect x='0' y='20' width='5' height='5' fill='%239a7350'/><rect x='10' y='22' width='6' height='4' fill='%236b4a30'/><rect x='20' y='24' width='5' height='6' fill='%23704b32'/><rect x='6' y='28' width='4' height='3' fill='%239a7350'/></svg>");
  background-size: 64px 64px;
  image-rendering: pixelated;
}

.app {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px;
}

header { text-align: center; }
header h1 {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.6rem;
  color: #ffd23f;
  text-shadow: 3px 3px 0 #3f2a00, -1px -1px 0 #000;
  letter-spacing: 2px;
}
.subtitle {
  margin: 14px 0 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
}

/* Stone-block panel */
.game {
  background: var(--stone);
  padding: 22px;
  border: 4px solid #000;
  /* Beveled stone look */
  box-shadow:
    inset 4px 4px 0 0 var(--stone-light),
    inset -4px -4px 0 0 var(--stone-mid),
    0 0 0 2px #000,
    6px 6px 0 0 rgba(0,0,0,0.4);
  color: var(--text);
}

.hangman-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #5fb4e0 0%, #87ceeb 55%, #a3dcf0 100%);
  padding: 36px 28px;
  border: 4px solid #000;
  perspective: 1100px;
  perspective-origin: 50% 40%;
  box-shadow:
    inset 3px 3px 0 0 rgba(255,255,255,0.4),
    inset -3px -3px 0 0 rgba(0,0,0,0.3);
}

/* 3D scene that holds the SVG (sky/gallows) and the 3D character */
.scene {
  position: relative;
  width: 220px;
  height: 270px;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-5deg);
}
.scene > #hangman {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Push the sky+gallows behind the 3D character so clouds can't cross it */
  transform: translateZ(-50px);
  transform-style: preserve-3d;
}

/* Drifting Minecraft clouds */
.cloud {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
/* All clouds enter fresh from the LEFT edge of the rectangle.
   Positive staggered delays space them out without pre-positioning them mid-sky. */
.cloud-a { animation: cloud-drift-a 30s linear infinite; animation-delay:  0s; }
.cloud-b { animation: cloud-drift-b 42s linear infinite; animation-delay:  6s; }
.cloud-c { animation: cloud-drift-c 26s linear infinite; animation-delay:  2s; }
.cloud-d { animation: cloud-drift-d 48s linear infinite; animation-delay: 10s; }
.cloud-e { animation: cloud-drift-e 34s linear infinite; animation-delay:  4s; }
.cloud-f { animation: cloud-drift-f 40s linear infinite; animation-delay: 14s; }
.cloud-g { animation: cloud-drift-g 28s linear infinite; animation-delay:  8s; }

/* Each cloud enters from the left edge of the sky (x=0) and exits at the right (x=200).
   start translateX = -rightmost_x; end translateX = 200 - leftmost_x */
@keyframes cloud-drift-a {  /* span 16-54   */
  0%   { transform: translateX(-54px); }
  100% { transform: translateX(184px); }
}
@keyframes cloud-drift-b {  /* span 116-174 */
  0%   { transform: translateX(-174px); }
  100% { transform: translateX(84px); }
}
@keyframes cloud-drift-c {  /* span 0-40    */
  0%   { transform: translateX(-40px); }
  100% { transform: translateX(200px); }
}
@keyframes cloud-drift-d {  /* span 135-195 */
  0%   { transform: translateX(-195px); }
  100% { transform: translateX(65px); }
}
@keyframes cloud-drift-e {  /* span 6-40    */
  0%   { transform: translateX(-40px); }
  100% { transform: translateX(194px); }
}
@keyframes cloud-drift-f {  /* span 125-179 */
  0%   { transform: translateX(-179px); }
  100% { transform: translateX(75px); }
}
@keyframes cloud-drift-g {  /* span 56-94   */
  0%   { transform: translateX(-94px); }
  100% { transform: translateX(144px); }
}
.character .part { opacity: 0; transition: opacity 0.3s; transform-style: preserve-3d; }
.character .part.show,
.scene.dancing .character .part,
.scene.sad .character .part { opacity: 1; }

/* Face swap on the 3D head */
.cube.box-head .face.front.face-sad { display: none; }
.scene.sad .cube.box-head .face.front.face-normal { display: none; }
.scene.sad .cube.box-head .face.front.face-sad { display: block; }

.info { text-align: center; margin-top: 14px; }
.category, .hint {
  font-size: 1rem;
  color: #ffe082;
  margin: 4px 0;
  text-shadow: 2px 2px 0 #000;
}
.category span, .hint span { color: #fff; }

/* Inventory-style word slot — full screen width */
.word {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.6rem;
  letter-spacing: 0.6rem;
  margin: 20px 0 20px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 20px 16px;
  color: #ffffff;
  text-shadow: 3px 3px 0 #000;
  background: var(--slot-bg);
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  box-shadow:
    inset 4px 4px 0 0 #000,
    inset -4px -4px 0 0 #555;
  min-height: 3rem;
  width: 100vw;
  max-width: none;
  overflow-wrap: break-word;
  word-break: break-word;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 1.1rem;
  margin: 14px 0 10px;
  flex-wrap: wrap;
  text-shadow: 2px 2px 0 #000;
}
.stats strong { color: #ffd23f; }

.message {
  min-height: 1.8rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  margin: 10px 0;
  text-shadow: 2px 2px 0 #000;
}
.message.win  { color: #6ee36e; }
.message.lose { color: #ff6b6b; }

/* Minecraft-style keyboard buttons */
.keyboard {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  margin: 20px 0;
}

.keyboard button {
  padding: 10px 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  background: var(--stone);
  border: 2px solid #000;
  cursor: pointer;
  box-shadow:
    inset 2px 2px 0 0 var(--stone-light),
    inset -2px -2px 0 0 var(--stone-mid);
  transition: none;
}
.keyboard button:hover:not(:disabled) {
  background: #a0a0a0;
  color: #ffff7f;
}
.keyboard button:active:not(:disabled) {
  box-shadow:
    inset 2px 2px 0 0 var(--stone-mid),
    inset -2px -2px 0 0 var(--stone-light);
}
.keyboard button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.keyboard button.correct {
  background: #4a8a3a;
  box-shadow:
    inset 2px 2px 0 0 #8fd66e,
    inset -2px -2px 0 0 #2c5b22;
}
.keyboard button.wrong {
  background: #8a3a3a;
  box-shadow:
    inset 2px 2px 0 0 #d66e6e,
    inset -2px -2px 0 0 #5b2222;
}

/* Big Minecraft buttons (controls) */
.controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.controls button, .controls select {
  padding: 12px 22px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  background: var(--stone);
  border: 2px solid #000;
  cursor: pointer;
  box-shadow:
    inset 2px 2px 0 0 var(--stone-light),
    inset -2px -2px 0 0 var(--stone-mid);
}
.controls button:hover, .controls select:hover {
  background: #a0a0a0;
  color: #ffff7f;
}
.controls button:active {
  box-shadow:
    inset 2px 2px 0 0 var(--stone-mid),
    inset -2px -2px 0 0 var(--stone-light);
}
.controls select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><polygon points='0,0 10,0 5,6' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

footer {
  text-align: center;
  margin-top: 18px;
  font-size: 1rem;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}

.credit {
  margin-top: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: #ffd23f;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #3f2a00;
  letter-spacing: 1px;
}
.credit strong {
  color: #ffffff;
}

/* ============================================================
   TRUE 3D MINECRAFT CHARACTER (CSS cubes)
   ============================================================ */
.character {
  position: absolute;
  top: 120px;
  left: 135px;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

/* Joints (rotation pivots) */
.joint { position: absolute; top: 0; left: 0; transform-style: preserve-3d; }
.joint-head { transform: translate3d(0, -36px, 0); }
.joint-larm { transform: translate3d(-34px, -36px, 0); }
.joint-rarm { transform: translate3d(34px, -36px, 0); }
.joint-lleg { transform: translate3d(-12px, 36px, 0); }
.joint-rleg { transform: translate3d(12px, 36px, 0); }

/* Cubes — anchored at their center; faces extend outward */
.cube {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.joint-head .cube.box-head { transform: translateY(-24px); }
.joint-larm .cube.box-arm,
.joint-rarm .cube.box-arm { transform: translateY(36px); }
.joint-lleg .cube.box-leg,
.joint-rleg .cube.box-leg { transform: translateY(36px); }

.cube .face {
  position: absolute;
  top: 50%; left: 50%;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
  background-color: #c68642;
}

/* HEAD: 48 × 48 × 48 */
.cube.box-head .face { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.cube.box-head .face.front  { transform: translateZ(24px); background: linear-gradient(to bottom, #2b1d0e 0%, #2b1d0e 27%, #c68642 27%, #c68642 100%); }
.cube.box-head .face.back   { transform: translateZ(-24px) rotateY(180deg); background: linear-gradient(to bottom, #2b1d0e 0%, #2b1d0e 27%, #b87838 27%, #b87838 100%); }
.cube.box-head .face.right  { transform: translateX(24px) rotateY(90deg); background: linear-gradient(to bottom, #2b1d0e 0%, #2b1d0e 27%, #a86a2f 27%, #a86a2f 100%); }
.cube.box-head .face.left   { transform: translateX(-24px) rotateY(-90deg); background: linear-gradient(to bottom, #2b1d0e 0%, #2b1d0e 27%, #a86a2f 27%, #a86a2f 100%); }
.cube.box-head .face.top    { transform: translateY(-24px) rotateX(90deg); background: #2b1d0e; }
.cube.box-head .face.bottom { transform: translateY(24px) rotateX(-90deg); background: #94582a; }

/* Head face features */
.cube.box-head .face.front > div {
  position: absolute;
  box-sizing: border-box;
}
.face.front .eye-l    { left: 8px;  top: 22px; width: 8px; height: 6px; background: #fff; }
.face.front .eye-r    { left: 32px; top: 22px; width: 8px; height: 6px; background: #fff; }
.face.front .pupil-l  { left: 12px; top: 22px; width: 4px; height: 6px; background: #3a2a8a; }
.face.front .pupil-r  { left: 32px; top: 22px; width: 4px; height: 6px; background: #3a2a8a; }
.face.front .nose     { left: 22px; top: 28px; width: 4px; height: 4px; background: #a86a2f; }
.face.front .mouth    { left: 14px; top: 36px; width: 20px; height: 2px; background: #3a1f0e; }

/* Sad face features */
.face.front.face-sad .eye-l.sad    { top: 24px; height: 4px; }
.face.front.face-sad .eye-r.sad    { top: 24px; height: 4px; }
.face.front.face-sad .pupil-l.sad  { top: 26px; height: 2px; }
.face.front.face-sad .pupil-r.sad  { top: 26px; height: 2px; }
.face.front.face-sad .eyebrow-l    { left: 6px;  top: 17px; width: 10px; height: 2px; background: #2b1d0e; transform: rotate(15deg); transform-origin: right center; }
.face.front.face-sad .eyebrow-r    { left: 32px; top: 17px; width: 10px; height: 2px; background: #2b1d0e; transform: rotate(-15deg); transform-origin: left center; }
.face.front.face-sad .frown-mid    { left: 18px; top: 36px; width: 12px; height: 2px; background: #3a1f0e; }
.face.front.face-sad .frown-l      { left: 14px; top: 38px; width: 4px;  height: 2px; background: #3a1f0e; }
.face.front.face-sad .frown-r      { left: 30px; top: 38px; width: 4px;  height: 2px; background: #3a1f0e; }
.face.front.face-sad .tear         { left: 11px; top: 30px; width: 3px;  height: 5px; background: #5cc8ff; animation: mc3d-tear 1.6s linear infinite; }

@keyframes mc3d-tear {
  0%   { transform: translateY(0)  scaleY(1);   opacity: 1; }
  70%  { transform: translateY(10px) scaleY(1.4); opacity: 1; }
  100% { transform: translateY(16px) scaleY(0.2); opacity: 0; }
}

/* BODY: 48 × 72 × 24 */
.cube.box-body .face.front,
.cube.box-body .face.back  { width: 48px; height: 72px; margin: -36px 0 0 -24px; background: #1ca5c4; }
.cube.box-body .face.back  { background: #178fa8; }
.cube.box-body .face.left,
.cube.box-body .face.right { width: 24px; height: 72px; margin: -36px 0 0 -12px; background: #178fa8; }
.cube.box-body .face.top   { width: 48px; height: 24px; margin: -12px 0 0 -24px; background: #2bc6e6; }
.cube.box-body .face.bottom{ width: 48px; height: 24px; margin: -12px 0 0 -24px; background: #115d70; }
.cube.box-body .face.front { transform: translateZ(12px); }
.cube.box-body .face.back  { transform: translateZ(-12px) rotateY(180deg); }
.cube.box-body .face.right { transform: translateX(24px) rotateY(90deg); }
.cube.box-body .face.left  { transform: translateX(-24px) rotateY(-90deg); }
.cube.box-body .face.top   { transform: translateY(-36px) rotateX(90deg); }
.cube.box-body .face.bottom{ transform: translateY(36px) rotateX(-90deg); }

/* ARM: 20 × 72 × 20 */
.cube.box-arm .face.front,
.cube.box-arm .face.back   { width: 20px; height: 72px; margin: -36px 0 0 -10px; }
.cube.box-arm .face.left,
.cube.box-arm .face.right  { width: 20px; height: 72px; margin: -36px 0 0 -10px; }
.cube.box-arm .face.top    { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: #2bc6e6; }
.cube.box-arm .face.bottom { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: #a86a2f; }
.cube.box-arm .face.front  { background: linear-gradient(to bottom, #1ca5c4 0%, #1ca5c4 80%, #c68642 80%, #c68642 100%); transform: translateZ(10px); }
.cube.box-arm .face.back   { background: linear-gradient(to bottom, #178fa8 0%, #178fa8 80%, #a86a2f 80%, #a86a2f 100%); transform: translateZ(-10px) rotateY(180deg); }
.cube.box-arm .face.right  { background: linear-gradient(to bottom, #178fa8 0%, #178fa8 80%, #a86a2f 80%, #a86a2f 100%); transform: translateX(10px) rotateY(90deg); }
.cube.box-arm .face.left   { background: linear-gradient(to bottom, #178fa8 0%, #178fa8 80%, #a86a2f 80%, #a86a2f 100%); transform: translateX(-10px) rotateY(-90deg); }
.cube.box-arm .face.top    { transform: translateY(-36px) rotateX(90deg); }
.cube.box-arm .face.bottom { transform: translateY(36px) rotateX(-90deg); }

/* LEG: 24 × 72 × 24 */
.cube.box-leg .face.front,
.cube.box-leg .face.back   { width: 24px; height: 72px; margin: -36px 0 0 -12px; }
.cube.box-leg .face.left,
.cube.box-leg .face.right  { width: 24px; height: 72px; margin: -36px 0 0 -12px; }
.cube.box-leg .face.top    { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: #4a4ab8; }
.cube.box-leg .face.bottom { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: #5a4a2a; }
.cube.box-leg .face.front  { background: linear-gradient(to bottom, #3a3aa8 0%, #3a3aa8 92%, #5a4a2a 92%, #5a4a2a 100%); transform: translateZ(12px); }
.cube.box-leg .face.back   { background: linear-gradient(to bottom, #2a2a78 0%, #2a2a78 92%, #4a3a1a 92%, #4a3a1a 100%); transform: translateZ(-12px) rotateY(180deg); }
.cube.box-leg .face.right  { background: linear-gradient(to bottom, #2a2a78 0%, #2a2a78 92%, #4a3a1a 92%, #4a3a1a 100%); transform: translateX(12px) rotateY(90deg); }
.cube.box-leg .face.left   { background: linear-gradient(to bottom, #2a2a78 0%, #2a2a78 92%, #4a3a1a 92%, #4a3a1a 100%); transform: translateX(-12px) rotateY(-90deg); }
.cube.box-leg .face.top    { transform: translateY(-36px) rotateX(90deg); }
.cube.box-leg .face.bottom { transform: translateY(36px) rotateX(-90deg); }

/* ============================================================
   ANIMATIONS — celebration backflip & sad slump
   ============================================================ */
.scene.dancing #rope { display: none; }

.scene.dancing .character {
  animation: mc3d-backflip 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes mc3d-backflip {
  0%   { transform: translate3d(20px, 60px, 0) rotateY(75deg) rotateX(0deg); }
  10%  { transform: translate3d(20px, 70px, 0) rotateY(75deg) rotateX(0deg) scaleY(0.85); }
  20%  { transform: translate3d(15px, 30px, 0) rotateY(75deg) rotateX(-40deg); }
  50%  { transform: translate3d(0,   -25px, 0) rotateY(75deg) rotateX(-180deg); }
  80%  { transform: translate3d(-20px, 35px, 0) rotateY(75deg) rotateX(-320deg); }
  92%  { transform: translate3d(-30px, 70px, 0) rotateY(75deg) rotateX(-360deg) scaleY(0.85); }
  100% { transform: translate3d(-30px, 60px, 0) rotateY(75deg) rotateX(-360deg); }
}

/* Limb swings during backflip — rotate around joint pivots, preserving the joint's position */
.scene.dancing .joint-larm { animation: mc3d-arm-l 0.4s ease-in-out infinite; }
.scene.dancing .joint-rarm { animation: mc3d-arm-r 0.4s ease-in-out infinite; }
.scene.dancing .joint-lleg { animation: mc3d-leg-l 0.4s ease-in-out infinite; }
.scene.dancing .joint-rleg { animation: mc3d-leg-r 0.4s ease-in-out infinite; }

@keyframes mc3d-arm-l {
  0%, 100% { transform: translate3d(-34px, -36px, 0) rotateX(-50deg); }
  50%      { transform: translate3d(-34px, -36px, 0) rotateX(60deg); }
}
@keyframes mc3d-arm-r {
  0%, 100% { transform: translate3d(34px, -36px, 0) rotateX(60deg); }
  50%      { transform: translate3d(34px, -36px, 0) rotateX(-50deg); }
}
@keyframes mc3d-leg-l {
  0%, 100% { transform: translate3d(-12px, 36px, 0) rotateX(-30deg); }
  50%      { transform: translate3d(-12px, 36px, 0) rotateX(35deg); }
}
@keyframes mc3d-leg-r {
  0%, 100% { transform: translate3d(12px, 36px, 0) rotateX(35deg); }
  50%      { transform: translate3d(12px, 36px, 0) rotateX(-30deg); }
}

/* Sad slump when losing */
.scene.sad .joint-head {
  animation: mc3d-sad-head 2.4s ease-in-out infinite;
}
.scene.sad .character {
  animation: mc3d-sad-body 2.4s ease-in-out infinite;
}

@keyframes mc3d-sad-head {
  0%, 100% { transform: translate3d(0, -36px, 0) rotateZ(-15deg) rotateX(15deg); }
  50%      { transform: translate3d(0, -34px, 0) rotateZ(-12deg) rotateX(18deg); }
}
@keyframes mc3d-sad-body {
  0%, 100% { transform: rotateZ(-3deg) translateY(0); }
  50%      { transform: rotateZ(-2deg) translateY(3px); }
}

@media (max-width: 480px) {
  body { font-size: 18px; }
  .keyboard { grid-template-columns: repeat(7, 1fr); }
  .word { font-size: 1.1rem; letter-spacing: 0.35rem; padding: 16px 10px; }
  header h1 { font-size: 1.1rem; }
  .subtitle { font-size: 0.55rem; }
  .controls button, .controls select { font-size: 0.6rem; padding: 10px 14px; }
  .keyboard button { font-size: 0.7rem; }
}