/* Bible Hangman (hangman.js) — Game section look; the "hangman" is an oil lamp that fills and lights with each miss. */
.hm-cats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.hm-seg .gm-btn { font-size: 14px; }
.hm-playv { min-height: calc(100dvh - 24px); }
.hm-board { display: flex; flex-direction: column; align-items: center; gap: 6px; background: radial-gradient(ellipse at 50% 30%, #1f2c58cc, #0b143000 70%); border-radius: 16px; padding: 4px 0; }
.hm-art { display: flex; flex-direction: column; align-items: center; }
.hm-lamp { width: 190px; height: 150px; overflow: visible; }
.hm-p { fill: none; stroke: #f4ecd855; stroke-width: 2; stroke-dasharray: 5 6; transition: fill .4s, stroke .4s, opacity .4s; }
.hm-p.on { stroke: #e0b552; stroke-dasharray: none; fill: #a8743a; }
.hm-oil.on { fill: #d4a63a; stroke: #f3c862; }
.hm-spout.on { fill: #8a5a32; }
.hm-flame { stroke-dasharray: 3 5; } .hm-flame.on { fill: #ffcf5a; stroke: #ff9f2a; filter: drop-shadow(0 0 6px #ffb84a); animation: hm-flick 1.6s ease-in-out infinite; transform-origin: 184px 82px; }
.hm-glow { stroke: none; fill: none; } .hm-glow.on { fill: #ffcf6a55; stroke: none; filter: blur(4px); animation: hm-pulse 2.4s ease-in-out infinite; }
.hm-lamp.out .hm-flame.on { animation: none; }
@keyframes hm-flick { 0%, 100% { transform: scale(1) rotate(0); } 40% { transform: scale(1.06, .95) rotate(-3deg); } 70% { transform: scale(.96, 1.05) rotate(2deg); } }
@keyframes hm-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.hm-lives { margin: 0; color: #f1d9a0; font-size: 14px; min-height: 1.2em; }
.hm-side { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.hm-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 4px 0; }
.hm-word.shake { animation: hm-shake .32s; }
@keyframes hm-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.hm-wd { display: inline-flex; gap: 4px; white-space: nowrap; }
.hm-slot { width: 26px; height: 38px; display: inline-flex; align-items: flex-end; justify-content: center; border-bottom: 3px solid #f3c862; color: #fff6e6; font: 700 1.5rem var(--serif); line-height: 1; padding-bottom: 2px; }
.hm-word.mid .hm-slot { width: 22px; font-size: 1.3rem; } .hm-word.long .hm-slot { width: 19px; font-size: 1.15rem; } .hm-word.long .hm-wd, .hm-word.mid .hm-wd { gap: 3px; }
.hm-slot.got { animation: hm-pop .3s; } .hm-slot.hint { color: #9fd0ff; } .hm-slot.miss { color: #ffb08a; }
.hm-gap { color: #f3c862; font: 700 1.3rem var(--serif); align-self: flex-end; }
@keyframes hm-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.hm-clue { margin: 2px 8px 0; color: #f4ecd8; font: 1.05rem var(--serif); text-align: center; min-height: 1.4em; }
.hm-dim { color: #a99e86; font-style: italic; font-family: var(--sans); font-size: 14px; }
.hm-hints { display: flex; gap: 8px; } .hm-hints .gm-btn { flex: 1; font-size: 14px; padding: 6px 8px; } .hm-hints small { font-weight: 500; color: #8a7350; }
.hm-kb { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 5px 4px; user-select: none; -webkit-user-select: none; }
.hm-key { min-width: 44px; height: 48px; border-radius: 9px; border: 1px solid #b39a68; background: linear-gradient(180deg, #fffaf0, #efe2c3); color: var(--ink); font: 700 18px var(--sans); cursor: pointer; touch-action: manipulation; padding: 0; box-shadow: 0 2px 0 #8a7350; }
.hm-key:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.hm-key.hit { background: #2d6a27; color: #fff; border-color: #1d4a19; box-shadow: none; }
.hm-key.no { background: #4a4030; color: #a99e86; border-color: #3a3020; box-shadow: none; text-decoration: line-through; }
.hm-key:disabled { cursor: default; }
.hm-end { text-align: center; } .hm-end .qz-verse { text-align: left; }
.hm-res { margin: 0; font: 600 1.15rem var(--sans); } .hm-end.won .hm-res { color: #2d6a27; } .hm-end.lost .hm-res { color: #7a4a2a; }
.hm-ans { margin: 4px 0; font: 700 2rem var(--serif); letter-spacing: .08em; color: #5a3519; word-break: break-word; }
.hm-cl { margin: 0 0 6px; color: #6b5a40; }
.hm-sline { color: #6b5a40; font-size: 14px; margin: 8px 0 0; }
.hm-end mark, .hm-vt mark { background: #f3c86288; color: inherit; border-radius: 3px; padding: 0 2px; }
html:not(.light) .hm-key { background: linear-gradient(180deg, #2a2416, #221d12); border-color: #6a5530; color: #f1e6cf; box-shadow: 0 2px 0 #0008; }
html:not(.light) .hm-key.hit { background: #2d6a27; color: #fff; }
html:not(.light) .hm-key.no { background: #15120b; color: #6a604e; }
html:not(.light) .hm-end { color: #f1e6cf; } html:not(.light) .hm-ans { color: #f3c862; } html:not(.light) .hm-cl, html:not(.light) .hm-sline, html:not(.light) .hm-hints small { color: #cdb98f; }
html:not(.light) .hm-end.won .hm-res { color: #9fd89a; } html:not(.light) .hm-end.lost .hm-res { color: #f3c862; }
html:not(.light) .hm-end mark { background: #f3c86255; }
@media (max-height: 460px) and (orientation: landscape) {
  .hm-playv { min-height: 0; }
  .hm-board { flex-direction: row; justify-content: center; gap: 14px; }
  .hm-lamp { width: 120px; height: 96px; }
  .hm-key { height: 44px; }
  .hm-kb { grid-template-columns: repeat(9, minmax(44px, 1fr)); gap: 4px; }
  .hm-hints .gm-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hm-flame.on, .hm-glow.on, .hm-word.shake, .hm-slot.got { animation: none; } .hm-p { transition: none; } }