.spellie-widget {
	--spellie-accent: #6C5CE7;
	--spellie-cell-size: clamp(32px, 9.5vw, 50px);
	--spellie-key-size: clamp(30px, 8.6vw, 46px);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	max-width: 480px;
	margin: 0 auto;
	padding: 24px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	text-align: center;
	box-sizing: border-box;
}

.spellie-widget *, .spellie-widget *::before, .spellie-widget *::after {
	box-sizing: border-box;
}

.spellie-icon {
	flex-shrink: 0;
	vertical-align: middle;
}

/* ---------- Toast (hint) ---------- */

.spellie-toast {
	display: flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #6ecb63, #4fb84a);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	padding: 12px 16px;
	border-radius: 14px;
	margin-bottom: 14px;
	text-align: left;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.spellie-toast[hidden] { display: none; }
.spellie-toast.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Word Guess ---------- */

.spellie-tabs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.spellie-tab {
	border: 2px solid var(--spellie-accent);
	background: #fff;
	color: var(--spellie-accent);
	border-radius: 999px;
	padding: 8px 18px;
	font-weight: 700;
	cursor: pointer;
	font-size: 14px;
}

.spellie-tab.is-active {
	background: var(--spellie-accent);
	color: #fff;
}

.spellie-board {
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 1.5vw, 6px);
	margin-bottom: 16px;
}

.spellie-row {
	display: flex;
	justify-content: center;
	gap: clamp(4px, 1.5vw, 6px);
}

.spellie-cell {
	width: var(--spellie-cell-size);
	height: var(--spellie-cell-size);
	border: 2px solid #e0e0e0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--spellie-cell-size) * 0.4);
	font-weight: 800;
	text-transform: lowercase;
	color: #333;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

@keyframes spellie-cell-pop {
	0%   { transform: scale( 0.75 ); }
	55%  { transform: scale( 1.12 ); }
	100% { transform: scale( 1 ); }
}

.spellie-cell.is-filled {
	border-color: var(--spellie-accent);
	animation: spellie-cell-pop 0.18s ease;
	box-shadow: 0 0 0 4px color-mix( in srgb, var(--spellie-accent) 22%, transparent ),
		0 0 10px color-mix( in srgb, var(--spellie-accent) 45%, transparent );
}

.spellie-cell.is-correct {
	background: #6ecb63;
	border-color: #6ecb63;
	color: #fff;
	box-shadow: 0 0 12px rgba( 110, 203, 99, 0.7 );
}
.spellie-cell.is-present {
	background: #ff9f1a;
	border-color: #ff9f1a;
	color: #fff;
	box-shadow: 0 0 12px rgba( 255, 159, 26, 0.7 );
}
.spellie-cell.is-absent {
	background: #b0b0b0;
	border-color: #b0b0b0;
	color: #fff;
	box-shadow: none;
}

.spellie-message {
	min-height: 24px;
	font-weight: 600;
	margin-bottom: 12px;
	color: #333;
}
.spellie-message.is-error { color: #e74c3c; }

.spellie-keyboard {
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 1.4vw, 6px);
	margin-bottom: 14px;
}

.spellie-kb-row {
	display: flex;
	justify-content: center;
	gap: clamp(3px, 1vw, 5px);
}

.spellie-key {
	width: var(--spellie-key-size);
	height: var(--spellie-key-size);
	border: none;
	background: linear-gradient( 180deg, #ffffff 0%, #f1efff 100% );
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	cursor: pointer;
	font-size: calc(var(--spellie-key-size) * 0.36);
	text-transform: lowercase;
	color: #333;
	box-shadow:
		0 3px 0 #d8d3f5,
		0 5px 8px rgba( 0, 0, 0, 0.12 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.9 );
	transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.spellie-key:hover {
	box-shadow:
		0 3px 0 #d8d3f5,
		0 6px 12px color-mix( in srgb, var(--spellie-accent) 30%, transparent ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.9 );
}

.spellie-key:active {
	transform: translateY( 2px );
	box-shadow:
		0 1px 0 #d8d3f5,
		0 2px 4px rgba( 0, 0, 0, 0.12 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.9 );
}

.spellie-key.is-correct {
	background: linear-gradient( 180deg, #82d977 0%, #6ecb63 100% );
	color: #fff;
	box-shadow: 0 3px 0 #4fa93f, 0 0 14px rgba( 110, 203, 99, 0.75 );
}
.spellie-key.is-present {
	background: linear-gradient( 180deg, #ffb54d 0%, #ff9f1a 100% );
	color: #fff;
	box-shadow: 0 3px 0 #d17f0c, 0 0 14px rgba( 255, 159, 26, 0.75 );
}
.spellie-key.is-absent {
	background: linear-gradient( 180deg, #c2c2c2 0%, #b0b0b0 100% );
	color: #fff;
	box-shadow: 0 3px 0 #8f8f8f;
}

.spellie-guess-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-bottom: 12px;
}

.spellie-guess-btn {
	flex: 1;
	background: var(--spellie-accent);
	color: #fff;
	border: none;
	border-radius: 14px;
	padding: 14px;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
}

.spellie-hint-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	background: #fff;
	color: var(--spellie-accent);
	border: 2px solid var(--spellie-accent);
	border-radius: 999px;
	padding: 10px 18px;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Word Guess: reveal / "check your spelling" screen ---------- */

.spellie-reveal {
	background: #4c8bf5;
	border-radius: 18px;
	padding: 20px 16px 24px;
	margin: 0 -8px;
}

.spellie-reveal-header {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #1e2a44;
	color: #fff;
	font-weight: 700;
	border-radius: 999px;
	padding: 10px 20px;
	margin-bottom: 18px;
}

.spellie-reveal-board {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	margin-bottom: 16px;
	transition: opacity 0.2s ease;
}

.spellie-reveal-board.is-hidden {
	opacity: 0;
	pointer-events: none;
	height: 0;
	overflow: hidden;
	margin: 0;
}

.spellie-reveal-row {
	display: flex;
	gap: 10px;
}

.spellie-reveal-dot {
	width: var(--spellie-cell-size);
	height: var(--spellie-cell-size);
	border-radius: 50%;
	background: #4c8bf5;
	border: 2px solid #1e2a44;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: calc(var(--spellie-cell-size) * 0.38);
	color: #1e2a44;
	text-transform: lowercase;
}

.spellie-reveal-dot.is-correct { background: #8be04f; border-color: #8be04f; color: #1e2a44; }
.spellie-reveal-dot.is-present { background: #ffb02e; border-color: #ffb02e; color: #1e2a44; }
.spellie-reveal-dot.is-absent  { background: #cfe0fb; border-color: #cfe0fb; color: #1e2a44; }

.spellie-reveal-text {
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 16px;
}

.spellie-reveal-actions {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.spellie-reveal-actions button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 700;
	cursor: pointer;
	color: #1e2a44;
}

/* ---------- Word Builder ---------- */

.spellie-builder-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.spellie-score {
	font-weight: 700;
	color: var(--spellie-accent);
}

.spellie-input-display {
	font-size: clamp(20px, 6vw, 26px);
	font-weight: 800;
	letter-spacing: 2px;
	min-height: 34px;
	text-transform: uppercase;
}

.spellie-honeycomb {
	display: grid;
	grid-template-columns: repeat(3, clamp(48px, 15vw, 64px));
	grid-auto-rows: clamp(48px, 15vw, 64px);
	justify-content: center;
	gap: 6px;
	margin: 16px auto;
}

.spellie-hex {
	border: none;
	background: #f1eafc;
	color: #333;
	font-weight: 800;
	font-size: clamp(16px, 4.5vw, 20px);
	border-radius: 16px;
	cursor: pointer;
}

.spellie-hex.is-center {
	background: var(--spellie-accent);
	color: #fff;
}

.spellie-builder-controls {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.spellie-builder-controls button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 2px solid var(--spellie-accent);
	background: #fff;
	color: var(--spellie-accent);
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
	cursor: pointer;
	font-size: 13px;
}

.spellie-submit-btn {
	background: var(--spellie-accent) !important;
	color: #fff !important;
}

.spellie-found-words {
	text-align: left;
	margin-top: 12px;
	border-top: 1px solid #eee;
	padding-top: 10px;
}

.spellie-found-words h4 { margin: 0 0 8px; font-size: 14px; color: #666; }

.spellie-found-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.spellie-found-list li {
	background: #f1eafc;
	color: #333;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

/* ---------- Responsive ---------- */

@media (max-width: 400px) {
	.spellie-widget { padding: 16px; border-radius: 18px; }
	.spellie-widget {
		--spellie-cell-size: clamp(28px, 10.5vw, 42px);
		--spellie-key-size: clamp(26px, 9.2vw, 38px);
	}
	.spellie-guess-btn { font-size: 14px; padding: 12px; }
	.spellie-hint-btn { padding: 10px 14px; font-size: 13px; }
	.spellie-tab { padding: 7px 14px; font-size: 13px; }
}

@media (min-width: 600px) {
	.spellie-widget {
		--spellie-cell-size: 52px;
		--spellie-key-size: 46px;
	}
}