/* ==========================================================================
   Mevabi Daily Word Puzzle: Extended — front-end styles
   ========================================================================== */

.mevabi-dwpx-wrap {
	--mdx-correct: #6aaa64;
	--mdx-present: #c9b458;
	--mdx-absent:  #787c7e;
	--mdx-empty:   #ffffff;
	--mdx-border:  #d3d6da;
	--mdx-text:    #1a1a1b;
	--mdx-overlay: rgba(255, 255, 255, 0.95);
	--mdx-btn-bg:  #1a1a1b;
	--mdx-btn-fg:  #ffffff;
	--mdx-danger:  #c0392b;

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

.mevabi-dwpx-wrap *,
.mevabi-dwpx-wrap *::before,
.mevabi-dwpx-wrap *::after { box-sizing: border-box; }

.mevabi-dwpx-wrap [hidden] { display: none !important; }

/* --- HUD (level / timer / lives) --- */
.mdx-hud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 1.6em;
	font-weight: 700;
	font-size: 0.95rem;
}
.mdx-hud > * { flex: 1; }
.mdx-level { text-align: left; }
.mdx-timer { text-align: center; font-variant-numeric: tabular-nums; }
.mdx-lives { text-align: right; letter-spacing: 0.1em; }
.mdx-timer--low { color: var(--mdx-danger); animation: mdx-pulse 1s ease-in-out infinite; }
.mdx-heart { color: var(--mdx-danger); }
.mdx-heart--lost { opacity: 0.45; }

@keyframes mdx-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

/* --- Stage: board + overlay --- */
.mdx-stage {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
}

/* --- Board (variable number of columns) --- */
.mdx-board {
	--mdx-gap: 6px;
	display: flex;
	flex-direction: column;
	gap: var(--mdx-gap);
	width: min(100%, calc(var(--mdx-cols, 5) * 62px + (var(--mdx-cols, 5) - 1) * var(--mdx-gap)));
	container-type: inline-size;
}

.mdx-row {
	display: grid;
	grid-template-columns: repeat(var(--mdx-cols, 5), minmax(0, 1fr));
	gap: var(--mdx-gap);
}

.mdx-tile {
	aspect-ratio: 1 / 1;
	border: 2px solid var(--mdx-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-size: calc(100cqw / var(--mdx-cols, 5) * 0.5);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--mdx-text);
	background: var(--mdx-empty);
	transition: border-color 0.1s, background 0.35s, color 0.35s, transform 0.1s;
	user-select: none;
	border-radius: 3px;
	line-height: 1;
}

.mdx-tile[data-state="active"]  { border-color: #878a8c; transform: scale(1.06); }
.mdx-tile[data-state="correct"] { background: var(--mdx-correct); border-color: var(--mdx-correct); color: #fff; }
.mdx-tile[data-state="present"] { background: var(--mdx-present); border-color: var(--mdx-present); color: #fff; }
.mdx-tile[data-state="absent"]  { background: var(--mdx-absent);  border-color: var(--mdx-absent);  color: #fff; }

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

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

/* --- Overlay (start / win / game over) --- */
.mdx-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	text-align: center;
	background: var(--mdx-overlay);
	border-radius: 6px;
}
.mdx-overlay-title { font-size: 1.4rem; font-weight: 800; }
.mdx-overlay-text  { white-space: pre-line; font-size: 1rem; line-height: 1.5; }

.mdx-primary {
	margin-top: 6px;
	padding: 10px 26px;
	border: none;
	border-radius: 999px;
	background: var(--mdx-btn-bg);
	color: var(--mdx-btn-fg);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}
.mdx-primary:hover { opacity: 0.88; }
.mdx-primary:focus-visible,
.mdx-reset:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

/* --- Message --- */
.mdx-message {
	min-height: 1.5em;
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
}

/* --- Keyboard --- */
.mdx-keyboard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: 480px;
}
.mdx-kb-row { display: flex; justify-content: center; gap: 5px; }

.mdx-key {
	height: 56px;
	min-width: 0;
	padding: 0 4px;
	border: none;
	border-radius: 4px;
	background: #d3d6da;
	color: var(--mdx-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;
}
.mdx-key-enter     { flex: 2; max-width: 80px; font-size: 0.72rem; background: #4a4a4a; color: #fff; letter-spacing: 0.03em; }
.mdx-key-enter:hover { background: #2a2a2a; }
.mdx-key-backspace { flex: 1.5; max-width: 56px; font-size: 1rem; }

.mdx-key[data-state="correct"] { background: var(--mdx-correct); color: #fff; }
.mdx-key[data-state="present"] { background: var(--mdx-present); color: #fff; }
.mdx-key[data-state="absent"]  { background: var(--mdx-absent);  color: #fff; }
.mdx-key:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

/* --- Restart link --- */
.mdx-actions { margin-top: 2px; }
.mdx-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;
}
.mdx-reset:hover { opacity: 1; }

/* --- Notices / errors --- */
.mdx-error  { color: #b32d2e; font-style: italic; }
.mdx-notice {
	max-width: 500px;
	margin: 0 auto 8px;
	padding: 8px 12px;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	color: #3c3c3c;
	font-size: 0.85rem;
}

/* --- Dark mode --- */
@media (prefers-color-scheme: dark) {
	.mevabi-dwpx-wrap {
		--mdx-empty:   #121213;
		--mdx-border:  #3a3a3c;
		--mdx-text:    #ffffff;
		--mdx-overlay: rgba(18, 18, 19, 0.95);
		--mdx-btn-bg:  #ffffff;
		--mdx-btn-fg:  #111111;
	}
	.mdx-key             { background: #818384; color: #fff; }
	.mdx-key-enter       { background: #e0e0e0; color: #111; }
	.mdx-key-enter:hover { background: #ffffff; }
	.mdx-reset           { color: #aaa; }
}

@media (prefers-reduced-motion: reduce) {
	.mdx-timer--low,
	.mdx-row--shake,
	.mdx-tile--bounce { animation: none; }
}