/* «Щоденне слово» (mu-plugins/zno-slovo.php). Tile colours: green — on its place, yellow — elsewhere, grey — absent. */

/* the game page is full width: no sidebar */
.zno-slovo-page #secondary { display: none; }
body.zno-slovo-page .content-area,
body.zno-slovo-page .site-main { float: none; width: auto; max-width: none; }

.zsl { --ok: #3a9d5d; --near: #d9a400; --no: #8a949e; --ink: #1f2328; --muted: #5b6470; --line: #d3dbe4; --bg: #f6f9fc;
  --red: #ff2b2b; --red-ink: #b0281c; --key: #e4e9ef;
  max-width: 520px; margin: 1em auto 2em; color: var(--ink); -webkit-hyphens: manual; hyphens: manual; }
.zsl ul, .zsl ol, .entry-content .zsl ul, .entry-content .zsl ol { margin: 0; padding: 0; list-style: none; }
.zsl li, .entry-content .zsl li { margin: 0; }
.zsl a, .entry-content .zsl a { color: var(--red-ink); box-shadow: none; border: 0; }

/* the theme paints every button:hover/:focus dark blue with white text — reset for game buttons */
.zsl button { width: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  line-height: inherit; text-transform: none; letter-spacing: normal; outline: none; box-shadow: none; transition: none;
  -webkit-appearance: none; appearance: none; }
.zsl button:hover, .zsl button:focus { background: none; color: inherit; border: 0; box-shadow: none; outline: none; }
.zsl button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.zsl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.zsl-num { font: 600 22px Oswald, sans-serif; letter-spacing: .02em; }
.zsl-streak { padding: 3px 12px; border-radius: 99px; background: #fff0e0; color: #c2410c; font: 600 16px Oswald, sans-serif; }

/* board */
.zsl-board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; width: min(100%, 330px); margin: 0 auto; }
.zsl-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.zsl-row--shake { animation: zsl-shake .4s; }
@keyframes zsl-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.zsl-t { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 6px;
  background: #fff; font: 600 clamp(24px, 8vw, 32px)/1 Oswald, sans-serif; text-transform: uppercase; user-select: none; }
.zsl-t--filled { border-color: #8f9ba8; }
.zsl-t--pop { animation: zsl-pop .1s; }
@keyframes zsl-pop { 50% { transform: scale(1.1); } }
.zsl-t--ok, .zsl-t--near, .zsl-t--no { color: #fff; border-color: transparent; }
.zsl-t--ok { background: var(--ok); }
.zsl-t--near { background: var(--near); }
.zsl-t--no { background: var(--no); }
.zsl-t--flip { animation: zsl-flip .5s ease-in-out both; }
@keyframes zsl-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
.zsl-t--win { animation: zsl-jump .5s ease both; }
@keyframes zsl-jump { 30% { transform: translateY(-14px); } 60% { transform: translateY(3px); } }

.zsl-app { position: relative; }
.zsl-toast { position: absolute; top: 48px; left: 50%; z-index: 5; transform: translateX(-50%); max-width: 90%; padding: 10px 16px;
  border-radius: 8px; background: var(--ink); color: #fff; font: 500 16px Roboto, sans-serif; text-align: center;
  pointer-events: none; opacity: 0; transition: opacity .2s; }
.zsl-toast--on { opacity: 1; }

/* keyboard */
.zsl-kb { margin-top: 18px; user-select: none; }
.zsl-kb__row { display: flex; gap: 4px; margin-bottom: 6px; justify-content: center; }
.zsl .zsl-key { flex: 1 1 0; min-width: 0; max-width: 40px; height: 52px; border-radius: 6px; background: var(--key); color: var(--ink);
  font: 600 18px Roboto, sans-serif; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.zsl .zsl-key:hover, .zsl .zsl-key:focus { background: #d5dce4; color: var(--ink); }
.zsl .zsl-key--wide { flex: 1.6 1 0; max-width: 64px; font-size: 13px; text-transform: none; }
.zsl .zsl-key--ok, .zsl .zsl-key--ok:hover, .zsl .zsl-key--ok:focus { background: var(--ok); color: #fff; }
.zsl .zsl-key--near, .zsl .zsl-key--near:hover, .zsl .zsl-key--near:focus { background: var(--near); color: #fff; }
.zsl .zsl-key--no, .zsl .zsl-key--no:hover, .zsl .zsl-key--no:focus { background: var(--no); color: #fff; }

/* result */
.zsl-result { margin-top: 18px; }
.zsl-card { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--ok); border-radius: 14px; padding: 18px 18px 20px; text-align: center; }
.zsl-card__head { font: 600 22px Oswald, sans-serif; }
.zsl-answer { display: inline-block; margin: 10px 0 6px; padding: 4px 18px; border-radius: 8px; background: var(--bg);
  font: 600 34px/1.2 Oswald, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.zsl-meaning { display: block; font-size: 15px; }
.zsl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0 10px; }
.zsl-stats span { font-size: 12px; color: var(--muted); }
.zsl-stats b { display: block; font: 600 28px/1.1 Oswald, sans-serif; color: var(--ink); }
.zsl-dist__title { font: 500 14px Oswald, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.zsl-dist { text-align: left; }
.zsl-dist li { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 14px; }
.zsl-dist span { width: 12px; text-align: right; }
.zsl-dist i { display: block; padding: 1px 6px; border-radius: 3px; background: var(--no); color: #fff; font-style: normal; font-weight: 700;
  text-align: right; min-width: 22px; box-sizing: border-box; }
.zsl-dist i.zsl-mine { background: var(--ok); }
.zsl-card__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.zsl .zsl-btn { font: 500 18px Oswald, sans-serif; letter-spacing: .03em; border-radius: 10px; padding: 11px 26px; cursor: pointer;
  background: var(--ok); color: #fff; box-shadow: 0 3px 0 #2b7a47; }
.zsl .zsl-btn:hover, .zsl .zsl-btn:focus { background: var(--ok); color: #fff; box-shadow: 0 3px 0 #2b7a47; }
.zsl .zsl-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #2b7a47; }
.zsl-next { font-size: 14px; color: var(--muted); }
.zsl-next b { font: 600 18px Oswald, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }

/* rules (server-rendered) */
.zsl-rules { margin-top: 2.2em; font-size: 15px; }
.zsl-rules h2 { margin: 0 0 .5em; font: 500 1.25em Oswald, sans-serif; }
.zsl-rules li { margin: 0 0 .3em; }
.zsl-c { display: inline-block; padding: 0 8px; border-radius: 4px; color: #fff; }
.zsl-c--ok { background: var(--ok); }
.zsl-c--near { background: var(--near); }
.zsl-c--no { background: var(--no); }

/* «Помилка в завданні?» from report.js */
.zsl .zr-qlink { margin: 1em 0 0; font-size: 14px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .zsl *, .zsl *::before { animation: none !important; transition: none !important; }
}