/* ════════════════════════════════════════════════════════════════
   GamesOMG /play/hangman/ — game UI
   Friendlier + brighter than the card tables (it's aimed at kids and
   classrooms) but still the arcade: one frame, one accent, big taps.
   ════════════════════════════════════════════════════════════════ */

#hm-app {
  --felt-a: #1a3550; --felt-b: #122438; --felt-edge: #2e527a;
  --ink: #eaf2fb; --ink-dim: #9db4cf;
  --accent: #49c98a; --accent-ink: #06301c;
  --key: #e9eef5; --key-ink: #1a2634; --key-edge: #b9c6d6;
  --robot-body: #7f9ba6; --robot-face: #cfe6ee; --robot-edge: #5b7580;
  --glow: 92, 225, 160;
  position: relative; font-family: 'Manrope', sans-serif;
}

.hm-frame {
  position: relative;
  background: radial-gradient(130% 130% at 50% 12%, var(--felt-a) 0%, var(--felt-b) 80%);
  border: 1px solid var(--felt-edge); border-radius: 22px;
  box-shadow: 0 24px 54px -18px rgba(8, 18, 30, .45), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--ink); min-height: 600px;
  display: flex; flex-direction: column; overflow: hidden;
  isolation: isolate; container-type: inline-size;
}

.hm-hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .78rem; }
.hm-hud-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hm-title { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cat { color: var(--ink-dim); font-size: .68rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-hud-right { display: flex; gap: 8px; align-items: center; }

.hm-btn {
  font: 800 .72rem 'Manrope', sans-serif; letter-spacing: .02em;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer;
  min-height: 40px; touch-action: manipulation;
  box-shadow: 0 5px 14px -6px rgba(0,0,0,.5); transition: transform .14s, filter .14s;
}
.hm-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.hm-ghost { background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid rgba(255,255,255,.2); box-shadow: none; }

.hm-stage { flex: 1; display: flex; min-height: 0; }

/* ── Pack picker ──────────────────────────────────────────────── */
.hm-picker { flex: 1; overflow: auto; padding: 16px clamp(14px, 3cqw, 30px) 26px; width: 100%; }
.hm-daily-card {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  background: linear-gradient(100deg, rgba(var(--glow),.16), rgba(var(--glow),.05));
  border: 1px solid rgba(var(--glow),.5); border-radius: 14px; padding: 14px 18px; color: var(--ink);
  font-family: inherit; transition: transform .14s;
}
.hm-daily-card:hover { transform: translateY(-2px); }
.hm-daily-card.done { opacity: .7; }
.hm-daily-k { font-weight: 800; font-size: .95rem; }
.hm-daily-sub { font-size: .72rem; color: var(--ink-dim); }
.hm-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); margin: 20px 0 8px; }
.hm-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hm-pack {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 11px 13px; color: var(--ink); font-family: inherit; transition: transform .14s, border-color .14s;
}
.hm-pack:hover { transform: translateY(-2px); border-color: rgba(var(--glow),.6); }
.hm-pack-name { font-weight: 800; font-size: .8rem; }
.hm-pack-meta { font-size: .64rem; color: var(--ink-dim); }

/* ── Play ─────────────────────────────────────────────────────── */
.hm-play { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 18px; width: 100%; }
.hm-robot-wrap { flex: 0 0 auto; }
.hm-robot { width: clamp(120px, 22cqw, 180px); height: auto; display: block; }

.hm-word { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; padding: 0 8px; }
.hm-slot {
  min-width: 26px; font-size: clamp(1.4rem, 4cqw, 2.1rem); font-weight: 800; text-align: center;
  border-bottom: 4px solid var(--ink-dim); line-height: 1.1; color: var(--ink);
  font-family: 'Manrope', sans-serif;
}
.hm-slot.shown { border-bottom-color: transparent; }
.hm-slot.missed { color: #e5484d; border-bottom-color: #e5484d; }
.hm-space { width: 18px; }

.hm-keyboard { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; max-width: 560px; }
.hm-krow { display: flex; gap: 5px; justify-content: center; width: 100%; }
.hm-key {
  flex: 1 1 0; max-width: 46px; min-width: 0; aspect-ratio: 1 / 1.15;
  font: 800 clamp(.8rem, 3.4cqw, 1.05rem) 'Manrope', sans-serif;
  background: var(--key); color: var(--key-ink); border: 1px solid var(--key-edge);
  border-radius: 8px; cursor: pointer; touch-action: manipulation;
  transition: transform .1s, background .1s;
}
.hm-key:hover:not(:disabled) { transform: translateY(-2px); }
.hm-key.hit { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.hm-key.miss { background: #6b1f24; color: #e5a0a4; border-color: #6b1f24; }
.hm-key:disabled { cursor: default; opacity: .9; }
.hm-key.miss:disabled, .hm-key.hit:disabled { opacity: .85; }

/* ── End panel ────────────────────────────────────────────────── */
.hm-panel { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(6,14,22,.55), rgba(6,14,22,.72)); animation: hm-fade .18s ease-out; }
@keyframes hm-fade { from { opacity: 0 } }
.hm-panel-card { background: var(--felt-b); border: 1px solid var(--felt-edge); border-radius: 18px; padding: 22px 26px; max-width: min(460px, 92%); box-shadow: 0 24px 60px -12px rgba(0,0,0,.6); text-align: center; }
.hm-panel-card h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; }
.hm-p-sub { color: var(--ink-dim); font-size: .82rem; margin: 0 0 14px; }
.hm-p-sub b { color: var(--ink); }
.hm-btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Fullscreen (arcade contract) ─────────────────────────────── */
#hm-app:fullscreen, #hm-app.hm-fs {
  background: var(--felt-b); display: flex; flex-direction: column; overflow: auto;
  padding: max(clamp(6px,1.5vh,16px), env(safe-area-inset-top)) max(clamp(6px,1.5vh,16px), env(safe-area-inset-right)) max(clamp(6px,1.5vh,16px), env(safe-area-inset-bottom)) max(clamp(6px,1.5vh,16px), env(safe-area-inset-left));
}
#hm-app.hm-fs { position: fixed; inset: 0; z-index: 2147483000; }
#hm-app:fullscreen .hm-frame, #hm-app.hm-fs .hm-frame { flex: 1; min-height: 0; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) { .hm-btn, .hm-key, .hm-pack, .hm-daily-card { transition: none !important; } .hm-panel { animation: none; } }

@media (max-width: 700px) {
  .hm-frame { min-height: 480px; border-radius: 16px; }
  .hm-hud { padding: 8px 10px; }
  .hm-robot { width: clamp(96px, 30cqw, 140px); }
  .hm-key { max-width: 40px; border-radius: 7px; }
  .hm-slot { min-width: 20px; }
  .hm-m-hide { display: none; }
  .hm-packs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}