.pw-embed {
	max-width: 560px;
	margin: 24px auto;
	font-family: Helvetica, Arial, sans-serif;
	color: #201b13;
	text-align: center;
}
.pw-embed * { box-sizing: border-box; }

.pw-grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	margin-bottom: 18px;
}
.pw-row {
	display: flex;
	gap: 10px;
	align-items: center;
}
.pw-word-group { display: flex; gap: 5px; }
.pw-word-gap { width: 14px; }
.pw-row.pw-shake { animation: pw-shake 0.4s ease; }
@keyframes pw-shake {
	10%, 90% { transform: translateX(-2px); }
	20%, 80% { transform: translateX(4px); }
	30%, 50%, 70% { transform: translateX(-6px); }
	40%, 60% { transform: translateX(6px); }
}

.pw-tile {
	width: 38px;
	height: 38px;
	border: 2px solid #d3d6da;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	background: #fff;
	color: #1a1a1a;
	border-radius: 3px;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.pw-tile:not(:empty) { border-color: #878a8c; }
.pw-tile.correct { background: #6aaa64; border-color: #6aaa64; color: #fff; }
.pw-tile.present { background: #c9b458; border-color: #c9b458; color: #fff; }
.pw-tile.absent { background: #787c7e; border-color: #787c7e; color: #fff; }

.pw-message {
	min-height: 1.4em;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 12px;
	color: #b23abe;
}

.pw-reveal {
	background: #faf5fb;
	border: 1px solid #e6d3e9;
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 18px;
	text-align: left;
}
.pw-reveal strong { font-size: 18px; letter-spacing: 0.02em; color: #201b13; }
.pw-reveal p { margin: 8px 0 0; font-size: 14px; color: #4a4340; line-height: 1.5; }
.pw-readmore {
	display: inline-block;
	font-weight: 600;
	font-size: 13px;
	color: #b23abe;
	text-decoration: none;
	border-bottom: 1px solid #b23abe;
}
.pw-readmore:hover { opacity: 0.8; }

.pw-keyboard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}
.pw-kb-row { display: flex; justify-content: center; gap: 6px; }
.pw-key {
	min-width: 32px;
	height: 44px;
	padding: 0 8px;
	border: none;
	border-radius: 4px;
	background: #d3d6da;
	color: #1a1a1a;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.pw-key:hover { filter: brightness(0.95); }
.pw-key-wide { min-width: 56px; font-size: 11px; }
.pw-key.correct { background: #6aaa64; color: #fff; }
.pw-key.present { background: #c9b458; color: #fff; }
.pw-key.absent { background: #787c7e; color: #fff; }

.pw-footer { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.pw-footer button {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid #b23abe;
	background: #b23abe;
	color: #fff;
	cursor: pointer;
}
.pw-footer button.pw-ghost { background: transparent; color: #b23abe; }
.pw-share-status { font-size: 12px; color: #6a6058; }

.pw-view-stats {
	display: none;
	margin: 0 auto 16px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid #b23abe;
	background: transparent;
	color: #b23abe;
	cursor: pointer;
}

.pw-stats-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(32, 27, 19, 0.55);
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 16px;
}
.pw-stats-modal {
	background: #fff;
	border-radius: 12px;
	padding: 24px 28px 28px;
	max-width: 380px;
	width: 100%;
	position: relative;
	text-align: center;
}
.pw-stats-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #8a8072;
}
.pw-stats-modal h3 { margin: 0 0 16px; font-size: 18px; letter-spacing: 0.02em; }
.pw-stats-modal h4 { margin: 20px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #8a8072; }
.pw-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.pw-stat { display: flex; flex-direction: column; }
.pw-stat-num { font-size: 26px; font-weight: 700; color: #201b13; }
.pw-stat-label { font-size: 10px; color: #8a8072; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }

.pw-distribution { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.pw-dist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pw-dist-label { width: 12px; font-weight: 700; color: #4a4340; }
.pw-dist-bar-track { flex: 1; background: #f0ebe2; border-radius: 3px; overflow: hidden; }
.pw-dist-bar {
	background: #b23abe;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: right;
	padding: 3px 6px;
	border-radius: 3px;
	min-width: 20px;
	box-sizing: border-box;
}

.pw-modal-timer {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #ede6d9;
	font-size: 13px;
	font-weight: 600;
	color: #6a6058;
}
.pw-modal-timer .pw-timer-value { font-variant-numeric: tabular-nums; color: #201b13; margin-left: 4px; }

@media (max-width: 480px) {
	.pw-tile { width: 30px; height: 30px; font-size: 16px; }
	.pw-key { min-width: 24px; height: 38px; font-size: 11px; padding: 0 5px; }
	.pw-key-wide { min-width: 42px; font-size: 9px; }
}