/* Five-letter word game (wordle.js): /games/ and /webmaster/. */

.wordle-wrap { scroll-margin-top: var(--s-2); touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wordle { position: relative; display: grid; gap: 6px; width: min(100%, 20rem); cursor: text; }
.wordle__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wordle__tile { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--rule); font-family: var(--serif); font-size: 1.6rem; font-weight: 500; text-transform: uppercase; }
.wordle__tile.is-filled { border-color: var(--ink); }
.wordle__row.is-current .wordle__tile { border-color: var(--ink-3); }
.wordle__row.is-current .wordle__tile.is-active { border: 2px solid var(--green-deep); background: color-mix(in srgb, var(--green) 16%, transparent); }
/* The hidden field the phone keyboard types into. 16px so iOS does not zoom when it gets focus. */
.wordle__input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; pointer-events: none; }
.wordle__tile.is-hit, .wordle__key.is-hit { background: var(--green); border-color: var(--green); color: var(--black); }
.wordle__tile.is-near, .wordle__key.is-near { background: var(--ochre); border-color: var(--ochre); color: #fff; }
.wordle__tile.is-miss, .wordle__key.is-miss { background: var(--ink-3); border-color: var(--ink-3); color: var(--paper); }
.wordle__msg { font-family: var(--sans); font-size: var(--fs-ui); min-height: 1.5em; margin: var(--s-3) 0 0; }
.wordle__keys { display: grid; gap: 6px; margin-top: var(--s-3); width: min(100%, 32rem); }
.wordle__keyrow { display: flex; gap: 5px; justify-content: center; }
.wordle__key { flex: 1 1 0; min-width: 0; min-height: 3rem; padding: 0; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper-2); color: var(--ink); font-family: var(--sans); font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.wordle__key--wide { flex-grow: 1.6; font-size: 0.8rem; }
.wordle__key:active { filter: brightness(0.88); }
@media (pointer: coarse) {
	/* The phone keyboard is up: hide ours so the board has the room. */
	.wordle-wrap.is-typing .wordle__keys { display: none; }
}
/* While a game is in progress on a phone, the header scrolls away and the page does not bounce. */
.is-playing { scroll-padding-top: 0; overscroll-behavior-y: none; }
.is-playing .site-header { position: static; }
@media (prefers-reduced-motion: no-preference) {
	.wordle__tile:is(.is-hit, .is-near, .is-miss):not(.is-restored) { animation: wordle-flip 0.4s var(--ease) backwards; }
	.wordle__row.is-shaking { animation: wordle-shake 0.3s; }
	.is-typing .wordle__tile.is-active { animation: wordle-caret 1.1s steps(1) infinite; }
}
@keyframes wordle-flip { from { transform: rotateX(90deg); background: transparent; color: var(--ink); } }
@keyframes wordle-caret { 50% { border-color: var(--rule); } }
@keyframes wordle-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* /games/ */
.games__title { font-size: var(--fs-h2); margin-bottom: var(--s-2); }
.games__num { color: var(--ink-3); font-weight: 400; }
.games__streak { font-family: var(--sans); font-size: var(--fs-ui); font-weight: 600; color: var(--green-deep); margin: 0 0 var(--s-2); }
.games__rules { font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink-2); max-width: 34rem; margin: 0 0 var(--s-6); }
.games__board, .games__board .wordle-wrap { display: grid; justify-items: center; width: 100%; }
.games__board .wordle { width: min(100%, 22rem); }
.games__board .wordle__keys { width: 100%; max-width: 32rem; }

.greenle__result { width: 100%; max-width: 32rem; margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.greenle__verdict { font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink-3); margin: 0; }
.greenle__word { font-size: var(--fs-h1); letter-spacing: 0.08em; margin: var(--s-1) 0 var(--s-2); }
.greenle__word:focus { outline: none; }
.greenle__note { margin: 0 0 var(--s-5); }
.greenle__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-5); }
.greenle__stats div { display: flex; flex-direction: column-reverse; }
.greenle__stats dt { font-family: var(--sans); font-size: var(--fs-caption); color: var(--ink-3); }
.greenle__stats dd { margin: 0; font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.1; }
.greenle__actions { margin: 0; }
.greenle__shared, .greenle__next { font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink-3); margin: var(--s-3) 0 0; min-height: 1.5em; }
.greenle__copy { display: block; width: 100%; margin-top: var(--s-3); font-family: var(--sans); font-size: var(--fs-ui); }