/* ==========================================================================
   Mevabi Daily Word Puzzle — Front-end game styles
   ========================================================================== */

.mevabi-dwp-wrap {
	--mw-correct: #6aaa64;
	--mw-present: #c9b458;
	--mw-absent:  #787c7e;
	--mw-empty:   #ffffff;
	--mw-border:  #d3d6da;
	--mw-text:    #1a1a1b;
	--mw-tile-size: clamp(46px, 10vw, 62px);
	--mw-gap:     6px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 16px 8px;
	max-width: 500px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* --- Board --- */
.mevabi-board {
	display: flex;
	flex-direction: column;
	gap: var(--mw-gap);
}

.mevabi-row {
	display: flex;
	gap: var(--mw-gap);
}

.mevabi-tile {
	width:  var(--mw-tile-size);
	height: var(--mw-tile-size);
	border: 2px solid var(--mw-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc( var(--mw-tile-size) * 0.52 );
	font-weight: 700;
	text-transform: uppercase;
	color: var(--mw-text);
	background: var(--mw-empty);
	transition: border-color 0.1s, background 0.35s, color 0.35s, transform 0.1s;
	user-select: none;
	border-radius: 3px;
}

.mevabi-tile[data-state="active"] {
	border-color: #878a8c;
	transform: scale(1.06);
}

.mevabi-tile[data-state="correct"] {
	background: var(--mw-correct);
	border-color: var(--mw-correct);
	color: #fff;
}

.mevabi-tile[data-state="present"] {
	background: var(--mw-present);
	border-color: var(--mw-present);
	color: #fff;
}

.mevabi-tile[data-state="absent"] {
	background: var(--mw-absent);
	border-color: var(--mw-absent);
	color: #fff;
}

/* shake animation */
@keyframes mevabi-dwp-shake {
	0%, 100% { transform: translateX(0); }
	20%       { transform: translateX(-4px); }
	40%       { transform: translateX(4px); }
	60%       { transform: translateX(-4px); }
	80%       { transform: translateX(4px); }
}
.mevabi-row--shake { animation: mevabi-dwp-shake 0.4s ease; }

/* bounce animation */
@keyframes mevabi-dwp-bounce {
	0%, 100% { transform: scaleY(1); }
	50%       { transform: scaleY(1.18); }
}
.mevabi-tile--bounce { animation: mevabi-dwp-bounce 0.25s ease; }

/* --- Message --- */
.mevabi-message {
	min-height: 1.5em;
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	color: var(--mw-text);
}

/* --- Keyboard --- */
.mevabi-keyboard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: 480px;
}

.mevabi-kb-row {
	display: flex;
	justify-content: center;
	gap: 5px;
}

.mevabi-key {
	height: 56px;
	min-width: 36px;
	padding: 0 8px;
	border: none;
	border-radius: 4px;
	background: #d3d6da;
	color: var(--mw-text);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	transition: background 0.2s, color 0.2s;
	flex: 1;
	max-width: 43px;
}

/* Enter key — wider, darker, labelled */
.mevabi-key-enter {
	flex: 2;
	max-width: 80px;
	font-size: 0.72rem;
	background: #4a4a4a;
	color: #fff;
	letter-spacing: 0.03em;
}
.mevabi-key-enter:hover { background: #2a2a2a; }

/* Backspace key */
.mevabi-key-backspace {
	flex: 1.5;
	max-width: 56px;
	font-size: 1rem;
}

.mevabi-key[data-state="correct"] { background: var(--mw-correct); color: #fff; }
.mevabi-key[data-state="present"] { background: var(--mw-present); color: #fff; }
.mevabi-key[data-state="absent"]  { background: var(--mw-absent);  color: #fff; }

.mevabi-key:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

/* --- Play Again — subtle text link style --- */
.mevabi-actions { margin-top: 4px; }

.mevabi-reset {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #555;
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.7;
	transition: opacity 0.2s, color 0.2s;
}

.mevabi-reset:hover,
.mevabi-reset:focus-visible {
	opacity: 1;
	color: var(--mw-text);
	outline: none;
}

/* --- Error --- */
.mevabi-dwp-error { color: #b32d2e; font-style: italic; }

/* --- Dark-mode --- */
@media (prefers-color-scheme: dark) {
	.mevabi-dwp-wrap {
		--mw-empty:  #121213;
		--mw-border: #3a3a3c;
		--mw-text:   #ffffff;
	}
	.mevabi-key             { background: #818384; color: #fff; }
	.mevabi-key-enter       { background: #e0e0e0; color: #111; }
	.mevabi-key-enter:hover { background: #ffffff; }
	.mevabi-reset           { color: #aaa; }
}