/* Slangman (/slangman/): Irish slang hangman without the gallows. Sits on top of css/slangle.css and reuses
   its tiles, keyboard, Lawrence bubble, stats and how-to; only the phrase board, the wrong-guess boxes and the hint live here. */
.sm { --sm-wrong: #b5452f; --sm-slot: min(8.6vw, 2.35rem); }
.sm-lm { margin: 0.2rem 0 0.5rem; }
.sm-lm .lm-bubble { min-height: 0; }
.sm-lm .lm-bubble p { margin: 0; }

.sm-meta { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0 0 0.6rem; }
.sm-pips { display: flex; gap: 0.3rem; }
.sm-pip { width: 1.15rem; height: 1.15rem; border: 2px solid var(--rule); border-radius: 4px; background: #fff; }
.sm-pip.is-wrong { background: var(--sm-wrong); border-color: var(--sm-wrong); }
.sm-left { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.6rem; }
.sg-mini.sm-mini-wrong { background: var(--sm-wrong); }

/* The answer: one tile per letter, words kept whole and wrapped onto lines between words. */
.sm-board { display: flex; flex-wrap: wrap; justify-content: center; column-gap: calc(var(--sm-slot) * 0.6); row-gap: 0.45rem; margin: 0.2rem auto 0.7rem; }
.sm-word { display: inline-flex; flex-wrap: nowrap; gap: 0.22rem; }
.sm .sm-slot { --sg-tile: var(--sm-slot); border-radius: 5px; }
.sm .sm-slot.is-gap { width: auto; min-width: calc(var(--sm-slot) * 0.32); border-color: transparent; background: transparent; }
.sm .sm-slot.is-open { border-color: var(--ink-soft); }
.sm .sm-slot.is-lost { color: var(--sm-wrong); border-color: var(--sm-wrong); background: #fbeeea; }

.sm-clue { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.3rem; }
.sm-county { font-family: var(--sans); font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); background: #e6e2da; border-radius: 999px; padding: 0.3rem 0.75rem; }
.sm-hint-btn, .sm-again {
  font-family: var(--brand); font-weight: 700; font-size: 0.95rem; color: var(--accent); background: #fff;
  border: 2px solid var(--accent); border-radius: 999px; padding: 0.35rem 1rem; min-height: 44px; cursor: pointer;
}
.sm-hint-btn[aria-expanded="true"] { background: var(--accent); color: #fff; }
.sm-hint-btn:disabled { opacity: 0.55; cursor: default; }
.sm-hint { margin: 0.3rem auto 0.2rem; max-width: 30rem; text-align: center; font-size: 0.98rem; color: var(--ink-soft); }
.sm-hint b { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); }
.sm .sg-k { max-width: 2.7rem; }

@media (prefers-reduced-motion: no-preference) {
  .sm-pip.is-wrong { animation: sg-pop 0.25s ease-out; }
  .sm-lm.is-shake { animation: sg-shake 0.45s ease; }
}
@supports (height: 1svh) {
  .sm { --sm-slot: min(8.6vw, 2.35rem, 5.2svh); }
}