/* Slangle: daily Irish slang word game (/slangle/). Loaded only on that page, on top of book.css. */
.sg { --sg-hit: #2f7d4f; --sg-near: #c9a227; --sg-miss: #79736a; --sg-tile: min(15vw, 3.4rem); }
.sg-head { text-align: center; margin-bottom: 0.6rem; }
.sg-head .phrase { font-family: var(--brand); margin-bottom: 0.15rem; }
.sg-num { font-size: 0.6em; color: var(--muted); font-weight: 600; }
.sg-sub { margin: 0; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); }

.sg-board { display: grid; grid-template-rows: repeat(6, var(--sg-tile)); gap: 0.32rem; justify-content: center; margin: 0.7rem auto 0.4rem; }
.sg-row { display: grid; grid-template-columns: repeat(5, var(--sg-tile)); gap: 0.32rem; }
.sg-tile {
  width: var(--sg-tile); height: var(--sg-tile); display: flex; align-items: center; justify-content: center;
  font-family: var(--brand); font-weight: 700; font-size: calc(var(--sg-tile) * 0.52); line-height: 1;
  text-transform: uppercase; color: var(--ink); background: #fff;
  border: 2px solid var(--rule); border-radius: 6px; user-select: none;
}
.sg-tile.is-filled { border-color: var(--ink-soft); }
.sg-tile.is-hit, .sg-tile.is-near, .sg-tile.is-miss { color: #fff; }
.sg-tile.is-hit { background: var(--sg-hit); border-color: var(--sg-hit); }
.sg-tile.is-near { background: var(--sg-near); border-color: var(--sg-near); }
.sg-tile.is-miss { background: var(--sg-miss); border-color: var(--sg-miss); }

.sg-msg { min-height: 1.6rem; margin: 0.2rem 0 0.4rem; text-align: center; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: var(--ink); }

.sg-kb { display: flex; flex-direction: column; gap: 0.38rem; margin: 0 -0.75rem 1rem; padding: 0 0.15rem; touch-action: manipulation; }
.sg-krow { display: flex; justify-content: center; gap: 0.28rem; }
.sg-k {
  flex: 1 1 0; min-width: 0; max-width: 2.6rem; height: 3.3rem; padding: 0;
  font-family: var(--sans); font-size: 1.05rem; font-weight: 700; text-transform: uppercase;
  color: var(--ink); background: #e6e2da; border: 0; border-radius: 6px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sg-k.sg-wide { flex: 1.55 1 0; max-width: 4.1rem; font-size: 0.8rem; }
.sg-k:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 1px; }
.sg-k:active { filter: brightness(0.92); }
.sg-k.is-hit { background: var(--sg-hit); color: #fff; }
.sg-k.is-near { background: var(--sg-near); color: #fff; }
.sg-k.is-miss { background: var(--sg-miss); color: #fff; }
.sg-kb.is-off .sg-k { cursor: default; }

.sg-end { margin: 0 0 1rem; }
.sg-lm { margin-bottom: 0.7rem; }
.sg-lm .lm-bubble { min-height: 3.2rem; }
.sg-actions { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.sg-next { margin: 0; font-family: var(--sans); font-size: 0.9rem; color: var(--muted); }
.sg-next span { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-soft); }

.sg-stats h2, .sg-how h2 { display: inline; }
.sg-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0.3rem 0 0.8rem; text-align: center; }
.sg-nums div { margin: 0; }
.sg-nums dd { margin: 0; font-family: var(--brand); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.sg-nums dt { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); }
.sg-dist-h { margin: 0 0 0.3rem; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); font-weight: 700; }
.sg-dist { list-style: none; margin: 0 0 0.4rem; padding: 0; font-family: var(--sans); font-size: 0.82rem; }
.sg-dist li { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.2rem; }
.sg-dist b { width: 0.8rem; text-align: right; }
.sg-dist span { display: inline-block; min-width: 1.4rem; padding: 0.05rem 0.4rem; background: var(--sg-miss); color: #fff; text-align: right; border-radius: 3px; }
.sg-dist li.is-now span { background: var(--sg-hit); }
.sg .small-print { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin: 0.3rem 0 0; }

.sg-how summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem; min-height: 44px; }
.sg-how summary::-webkit-details-marker { display: none; }
.sg-how summary::after { content: "+"; font-family: var(--sans); font-weight: 700; color: var(--accent); }
.sg-how[open] summary::after { content: "\2212"; }
.sg-how p, .sg-how li { font-size: 0.98rem; margin: 0 0 0.5rem; }
.sg-key { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.sg-key li { display: flex; align-items: center; gap: 0.5rem; }
.sg-mini { display: inline-flex; flex: 0 0 auto; width: 1.7rem; height: 1.7rem; align-items: center; justify-content: center; border-radius: 4px; color: #fff; font-family: var(--brand); font-weight: 700; }
.sg-mini.is-hit { background: var(--sg-hit); } .sg-mini.is-near { background: var(--sg-near); } .sg-mini.is-miss { background: var(--sg-miss); }

/* Motion: tile flip on reveal, pop on type, shake on a rejected guess, a hop on the win. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .sg-tile.is-pop { animation: sg-pop 0.1s ease-out; }
  .sg-tile.is-flip { animation: sg-flip 0.5s ease-in-out both; }
  .sg-row.is-shake { animation: sg-shake 0.45s ease; }
  .sg-tile.is-hop { animation: sg-hop 0.45s ease both; }
}
@keyframes sg-pop { 50% { transform: scale(1.1); } }
@keyframes sg-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes sg-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes sg-hop { 40% { transform: translateY(-14px); } 70% { transform: translateY(3px); } }


@supports (height: 1svh) {
  .sg { --sg-tile: min(15vw, 3.4rem, 6.4svh); }
  .sg-k { height: max(2.6rem, min(3.3rem, 7svh)); }
}

/* Cross-link between the games, under the share button */
.sg-also { margin: 0.4rem 0 0; font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); text-align: center; }
.sg-also a { font-weight: 700; color: var(--link, #1e4d3a); text-underline-offset: 2px; }
.sg-also a:hover { color: var(--accent, #2f5d4a); }