/* ═══════════════════════════════════════════
   hangman.css — Game Boy Edition
   ═══════════════════════════════════════════ */

/* ── Variables ─────────────────────────────── */
:root {
  --gb-lightest: #9bbc0f;
  --gb-light:    #8bac0f;
  --gb-dark:     #306230;
  --gb-darkest:  #0f380f;
  --pixel:       'Press Start 2P', monospace;
}

/* ── Reset ──────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ───────────────────────────────────── */
body {
  background:       var(--gb-darkest);
  color:            var(--gb-lightest);
  font-family:      var(--pixel);
  min-height:       100vh;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  padding:          16px 8px 32px;
  image-rendering:  pixelated;
}

/* ── Scanline overlay ───────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 999;
}

/* ── Back button ────────────────────────────── */
.back-btn {
  align-self:      flex-start;
  font-size:       7px;
  color:           var(--gb-dark);
  text-decoration: none;
  margin-bottom:   8px;
  letter-spacing:  1px;
}
.back-btn:hover { color: var(--gb-light); }

/* ── Title ──────────────────────────────────── */
h1 {
  font-size:     clamp(10px, 3vw, 18px);
  color:         var(--gb-lightest);
  text-shadow:   3px 3px 0 var(--gb-darkest);
  letter-spacing: 4px;
  margin-bottom: 6px;
  text-align:    center;
}

.subtitle {
  font-size:      7px;
  color:          var(--gb-dark);
  letter-spacing: 2px;
  margin-bottom:  20px;
}

/* ── Game container ─────────────────────────── */
.game-container {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
  width:          100%;
  max-width:      560px;
}

/* ── Pixel box ──────────────────────────────── */
.pixel-box {
  background: var(--gb-darkest);
  border:     4px solid var(--gb-light);
  box-shadow:
    0 0 0 4px var(--gb-darkest),
    0 0 0 8px var(--gb-dark),
    4px 4px 0 8px var(--gb-darkest);
  padding: 16px;
  width:   100%;
}

/* ── Info row ───────────────────────────────── */
.info-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  width:           100%;
  max-width:       560px;
  font-size:       10px;
  color:           var(--gb-lightest);
  padding:         4px 6px;
}

#category-label {
  font-size:      9px;
  color:          var(--gb-lightest);
  letter-spacing: 1px;
  text-shadow:    2px 2px 0 var(--gb-darkest);
}

.lives-hearts {
  display: flex;
  gap:     4px;
}

.lives-hearts span {
  font-size:   18px;
  color:       #e05555;
  text-shadow: 0 0 6px #e05555;
  transition:  opacity 0.3s, transform 0.3s;
  display:     inline-block;
}

.lives-hearts span.lost {
  opacity:   0.15;
  transform: scale(0.8);
  filter:    grayscale(1);
}

/* ── Mid row (hangman + wrong letters) ─────── */
.mid-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  align-items: stretch;
}

.mid-row .wrong-box {
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

/* ── SVG Hangman ────────────────────────────── */
.hangman-box {
  display:         flex;
  justify-content: center;
}

#hangman-svg {
  width:  180px;
  height: 180px;
}

#hangman-svg line,
#hangman-svg circle,
#hangman-svg path {
  stroke:         var(--gb-lightest);
  stroke-width:   4;
  stroke-linecap: square;
  fill:           none;
  filter:         drop-shadow(0 0 4px var(--gb-light));
}

.part {
  opacity:    0;
  transition: opacity 0.4s ease;
}

.part.show {
  opacity: 1;
}

/* ── Word display ───────────────────────────── */
.word-row {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             8px;
  padding:         8px 0;
}

.letter-slot {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
}

.letter-char {
  font-size:  clamp(10px, 3vw, 14px);
  color:      var(--gb-lightest);
  min-width:  18px;
  text-align: center;
  min-height: 20px;
  opacity:    0;
  transform:  translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.letter-char.revealed {
  opacity:   1;
  transform: translateY(0);
}

.letter-line {
  width:      18px;
  height:     3px;
  background: var(--gb-light);
}

/* ── Wrong letters ──────────────────────────── */
.wrong-box {
  text-align: center;
  padding:    10px 16px;
}

.wrong-label {
  font-size:     7px;
  color:         var(--gb-light);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.wrong-letters {
  font-size:      10px;
  color:          #e05555;
  letter-spacing: 4px;
  min-height:     14px;
  line-height:    2;
  text-shadow:    0 0 6px #e05555;
  word-break:     break-all;
}

/* ── Keyboard ───────────────────────────────── */
.keyboard {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  width:          100%;
}

.key-row {
  display:         flex;
  gap:             5px;
  flex-wrap:       wrap;
  justify-content: center;
}

.key {
  font-family:      var(--pixel);
  font-size:        8px;
  width:            34px;
  height:           34px;
  background:       var(--gb-dark);
  color:            var(--gb-lightest);
  border:           3px solid var(--gb-light);
  box-shadow:       3px 3px 0 var(--gb-darkest);
  cursor:           pointer;
  transition:       background 0.1s, transform 0.1s;
  image-rendering:  pixelated;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.key:hover:not(:disabled) {
  background: var(--gb-light);
  color:      var(--gb-darkest);
}

.key:active:not(:disabled) {
  transform:  translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--gb-darkest);
}

.key:disabled {
  cursor:     default;
  box-shadow: none;
}

.key.correct {
  background:   var(--gb-lightest);
  color:        var(--gb-darkest);
  border-color: var(--gb-lightest);
  animation:    flash-correct 0.4s ease;
}

.key.wrong {
  background:   var(--gb-darkest);
  color:        var(--gb-dark);
  border-color: var(--gb-dark);
  animation:    shake 0.4s ease;
}

/* ── Animations ─────────────────────────────── */
@keyframes flash-correct {
  0%   { background: var(--gb-lightest); transform: scale(1.2); }
  50%  { background: #fff;               transform: scale(1.3); }
  100% { background: var(--gb-lightest); transform: scale(1);   }
}

@keyframes shake {
  0%, 100% { transform: translateX(0);    }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px);  }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px);  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── Message overlay ────────────────────────── */
#message-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(15, 56, 15, 0.92);
  z-index:         100;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  text-align:      center;
  padding:         24px;
}

#message-overlay.show {
  display: flex;
}

#message-title {
  font-size:   clamp(14px, 4vw, 24px);
  text-shadow: 4px 4px 0 var(--gb-darkest);
  animation:   blink 1s step-end infinite;
}

#message-title.win  { color: var(--gb-lightest); }
#message-title.lose { color: var(--gb-dark);     }

#message-word {
  font-size:   9px;
  color:       var(--gb-light);
  line-height: 2;
}

/* ── Button ─────────────────────────────────── */
.btn {
  font-family:    var(--pixel);
  font-size:      9px;
  padding:        12px 20px;
  background:     var(--gb-dark);
  color:          var(--gb-lightest);
  border:         3px solid var(--gb-light);
  box-shadow:     4px 4px 0 var(--gb-darkest);
  cursor:         pointer;
  letter-spacing: 1px;
  transition:     transform 0.1s, box-shadow 0.1s;
}

.btn:hover  { background: var(--gb-light); color: var(--gb-darkest); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--gb-darkest); }