/**
 * Softstar-Whack — frontend game styles.
 * Everything is scoped under .swh-game to avoid theme conflicts.
 */

.swh-game {
	--swh-accent: #7a4b2a;
	--swh-field: #79c34e;
	--swh-hole-a: #4a2f18;
	--swh-hole-b: #2e1d0f;
	--swh-radius: 16px;
	max-width: 560px;
	margin: 1.5em auto;
	padding: 18px 18px 22px;
	border-radius: var(--swh-radius);
	background: #fffdf7;
	box-shadow: 0 10px 30px rgba(40, 25, 5, 0.18), inset 0 0 0 4px var(--swh-accent);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #33261a;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.swh-game *,
.swh-game *::before,
.swh-game *::after { box-sizing: border-box; }

/* ---------- header ---------- */
.swh-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.swh-title {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--swh-accent);
}

.swh-hud { display: flex; gap: 8px; flex-wrap: wrap; }

.swh-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #f3ead9;
	border: 2px solid #e4d5ba;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.swh-chip.pop { animation: swh-pop 0.3s ease; }
@keyframes swh-pop { 40% { transform: scale(1.22); } }

/* ---------- timer bar ---------- */
.swh-bar {
	height: 12px;
	border-radius: 999px;
	background: #efe4cf;
	overflow: hidden;
	margin-bottom: 14px;
}

.swh-bar-fill {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #8bc34a, #43a047);
	will-change: width;
}

.swh-bar-fill.low { background: linear-gradient(90deg, #ff7043, #d32f2f); }

/* ---------- play field ---------- */
.swh-field {
	position: relative;
	padding: 16px;
	border-radius: calc(var(--swh-radius) - 6px);
	background:
		radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.25), transparent 42%),
		linear-gradient(180deg, #8fd05a, var(--swh-field) 55%, #57a83a);
	box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.22);
}

.swh-grid {
	display: grid;
	grid-template-columns: repeat(var(--swh-cols, 3), 1fr);
	gap: clamp(8px, 2.6vw, 16px);
	max-width: 480px;
	margin: 0 auto;
}

.swh-hole {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	aspect-ratio: 1 / 1;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: radial-gradient(ellipse at 50% 38%, var(--swh-hole-a), var(--swh-hole-b) 72%);
	box-shadow:
		inset 0 8px 14px rgba(0, 0, 0, 0.65),
		inset 0 -3px 0 rgba(255, 255, 255, 0.06),
		0 4px 0 #3c6e24,
		0 7px 10px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	outline-offset: 3px;
	touch-action: manipulation;
}

.swh-hole:focus-visible { outline: 3px dashed #ffe082; }

/* ---------- the mole — big caricature head ---------- */
.swh-mole {
	position: absolute;
	left: 50%;
	bottom: -4%;
	width: min(96%, 170px);
	height: 126%;
	transform: translate(-50%, 110%);
	transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1.3);
	pointer-events: none;
	z-index: 1;
	will-change: transform;
}

.swh-body {
	position: absolute;
	inset: 0;
	transform-origin: 50% 92%;
}

.swh-hole.up .swh-mole { transform: translate(-50%, 4%); }
.swh-hole.up .swh-body { animation: swh-sway 1.9s ease-in-out infinite; }

@keyframes swh-sway {
	0%, 100% { transform: rotate(-2.2deg); }
	50%      { transform: rotate(2.2deg); }
}

/* face */
.swh-face {
	position: absolute;
	left: 18%;
	top: 28%;
	width: 64%;
	height: 60%;
	border-radius: 48% 48% 44% 44%;
	background:
		radial-gradient(circle at 34% 26%, #ffcf9e 0%, #f6ad72 42%, #e08c4b 78%, #cf7a3a 100%);
	box-shadow:
		inset -4px -6px 10px rgba(150, 80, 25, 0.35),
		inset 3px 4px 6px rgba(255, 230, 200, 0.5);
}

/* signature hair swoop */
.swh-hair {
	position: absolute;
	left: 11%;
	top: 9%;
	width: 78%;
	height: 32%;
	border-radius: 58% 68% 40% 62% / 78% 88% 32% 36%;
	background: linear-gradient(180deg, #fde68a 0%, #eec951 62%, #dcae37 100%);
	transform: rotate(-3deg);
	box-shadow: inset 0 -4px 6px rgba(160, 120, 20, 0.35), inset 0 3px 4px rgba(255, 245, 200, 0.7);
}

.swh-hair::after {
	content: "";
	position: absolute;
	left: -16%;
	top: 40%;
	width: 70%;
	height: 52%;
	border-radius: 62% 72% 22% 58%;
	background: linear-gradient(180deg, #fbe27f, #e7bf45);
	transform: rotate(-17deg);
	box-shadow: inset 0 -3px 5px rgba(160, 120, 20, 0.3);
}

/* brows — low, angled, blond */
.swh-brow {
	position: absolute;
	top: 41%;
	width: 16%;
	height: 4%;
	border-radius: 999px;
	background: #e3bc4e;
}
.swh-brow.swh-l { left: 27%; transform: rotate(9deg); }
.swh-brow.swh-r { right: 27%; transform: rotate(-9deg); }

/* small squinting eyes */
.swh-eye {
	position: absolute;
	top: 44.5%;
	width: 10%;
	height: 5.6%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 46%, #2f5d8f 0% 38%, #ffffff 47% 100%);
	box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.swh-eye.swh-l { left: 29.5%; }
.swh-eye.swh-r { right: 29.5%; }

/* puckered mouth */
.swh-mouth {
	position: absolute;
	left: 50%;
	top: 57%;
	width: 12.5%;
	height: 10.5%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 34%, #7c2d21 0%, #a8432f 55%, #c25f43 100%);
	box-shadow:
		inset 0 2px 3px rgba(0, 0, 0, 0.4),
		0 -1px 0 rgba(255, 220, 190, 0.35);
}

/* dark blue suit shoulders */
.swh-suit {
	position: absolute;
	left: 12%;
	bottom: 0;
	width: 76%;
	height: 15%;
	border-radius: 42% 42% 0 0;
	background: linear-gradient(180deg, #33486b 0%, #22314d 100%);
}

/* white collar notch */
.swh-suit::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 26%;
	height: 62%;
	transform: translateX(-50%);
	background: linear-gradient(#ffffff, #dfe3ec);
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

/* long red tie */
.swh-tie {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 13%;
	height: 30%;
	transform: translateX(-50%);
	background: linear-gradient(180deg, #e04338 0%, #a31515 90%);
	clip-path: polygon(50% 0%, 100% 15%, 76% 100%, 50% 82%, 24% 100%, 0% 15%);
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* ---------- custom uploaded picture mole ---------- */
/* Centered on the hole's visible circle: the .swh-mole box is 126% tall and
   rises to translate(-50%, 4%), so the hole's centre sits at ~57% from the
   box top. Sizing the img box to that centre keeps any aspect ratio fully
   visible and vertically centred while displayed. Cropped to a circle to fit
   the round hole. */
.swh-mole-img {
	position: absolute;
	left: 50%;
	top: 57%;
	width: 100%;
	height: 76%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

/* ---------- impact overlay ---------- */
.swh-boom {
	position: absolute;
	inset: -8% -12%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(38px, 11vmin, 74px);
	line-height: 1;
	opacity: 0;
	transition: opacity 0.09s ease;
	z-index: 3;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

.swh-hole.bonk .swh-boom { opacity: 1; }

.swh-hole.bonk .swh-body {
	animation: none;
	filter: saturate(0.55) brightness(0.92);
	transform: scale(1.06) rotate(-4deg);
}

.swh-hole.miss { animation: swh-shake 0.3s ease; }
@keyframes swh-shake {
	20% { transform: translateX(-5%); }
	45% { transform: translateX(5%); }
	70% { transform: translateX(-3%); }
}

.swh-hole.miss::after {
	content: "✖";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: clamp(20px, 6vw, 36px);
	color: rgba(220, 40, 40, 0.85);
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
	animation: swh-fade 0.55s ease forwards;
}

@keyframes swh-fade { to { opacity: 0; } }

/* ---------- bonus floater (transform-only: no layout thrash) ---------- */
.swh-bonus {
	position: absolute;
	top: 12%;
	left: 50%;
	transform: translate(-50%, 0);
	padding: 4px 14px;
	border-radius: 999px;
	background: #ffb300;
	color: #4a2800;
	font-weight: 800;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	animation: swh-rise 0.9s ease forwards;
	pointer-events: none;
	z-index: 5;
}

@keyframes swh-rise {
	from { opacity: 0; transform: translate(-50%, 10px); }
	25%  { opacity: 1; }
	to   { opacity: 0; transform: translate(-50%, -30px); }
}

/* ---------- overlay & panels ---------- */
.swh-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	background: rgba(46, 29, 15, 0.66);
	padding: 12px;
	z-index: 10;
}

.swh-overlay[hidden] { display: none; }

.swh-panel {
	width: min(340px, 92%);
	max-height: 100%;
	overflow: auto;
	padding: 20px 22px;
	border-radius: 14px;
	background: #fffdf7;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
	text-align: center;
}

.swh-panel-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--swh-accent);
	margin-bottom: 8px;
}

.swh-panel-text { margin: 0 0 6px; }

.swh-panel-warn {
	margin: 0 0 6px;
	font-size: 0.85em;
	color: #a3541e;
}

.swh-count .swh-big {
	font-size: 3.4rem;
	font-weight: 900;
	color: var(--swh-accent);
	animation: swh-zoom 0.5s ease;
}

@keyframes swh-zoom {
	from { transform: scale(0.3); opacity: 0; }
	60% { transform: scale(1.15); opacity: 1; }
}

.swh-final {
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.1;
	color: #2e7d32;
	font-variant-numeric: tabular-nums;
}

.swh-final-label {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #8d7a63;
	margin-bottom: 10px;
}

.swh-stats-mini {
	margin: 8px 0 14px;
	border-top: 1px solid #eadfc9;
	border-bottom: 1px solid #eadfc9;
	padding: 6px 2px;
}

.swh-stat-row {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
	font-size: 0.92em;
}

.swh-stat-k { color: #6f5d48; }

/* ---------- buttons & inputs ---------- */
.swh-btn {
	display: inline-block;
	padding: 10px 26px;
	border: 0;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.swh-btn-primary {
	background: linear-gradient(180deg, #66bb43, #43a047);
	color: #fff;
	box-shadow: 0 5px 0 #2e7d32, 0 8px 14px rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.swh-btn-secondary {
	background: linear-gradient(180deg, #ffb74d, #fb8c00);
	color: #4a2800;
	box-shadow: 0 5px 0 #e65100, 0 8px 14px rgba(0, 0, 0, 0.2);
}

.swh-btn:hover { transform: translateY(-2px); }
.swh-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.swh-btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

.swh-name {
	width: 100%;
	margin: 0 0 10px;
	padding: 10px 14px;
	border: 2px solid #e4d5ba;
	border-radius: 10px;
	font-size: 1rem;
	text-align: center;
}

.swh-name:focus { border-color: var(--swh-accent); outline: none; }

.swh-actions { margin-top: 6px; }

/* ---------- leaderboard board ---------- */
.swh-board {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #f8f1e2;
	border: 2px solid #eadfc9;
}

.swh-board-title {
	font-weight: 800;
	color: var(--swh-accent);
	margin-bottom: 8px;
	text-align: center;
}

.swh-board-empty {
	text-align: center;
	color: #6f5d48;
	margin: 4px 0;
}

.swh-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.swh-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 8px;
	font-variant-numeric: tabular-nums;
}

.swh-row:nth-child(even) { background: rgba(122, 75, 42, 0.07); }

.swh-row.me {
	background: #fff3cd;
	box-shadow: inset 0 0 0 2px #ffb300;
	font-weight: 700;
}

.swh-rank { min-width: 2.2em; text-align: right; }

.swh-name-cell {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}

.swh-meta { font-size: 0.82em; color: #6f5d48; }

.swh-pts { font-weight: 800; color: #2e7d32; }

/* ---------- pause / continue control ---------- */
.swh-pause {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 2px solid #e4d5ba;
	border-radius: 50%;
	background: #f3ead9;
	color: var(--swh-accent);
	font-size: 14px;
	line-height: 1;
	font-weight: 900;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.1s ease, background 0.15s ease;
}

.swh-pause:hover { background: #eee0c2; transform: scale(1.07); }
.swh-pause:active { transform: scale(0.93); }
.swh-pause:focus-visible { outline: 3px dashed #ffe082; outline-offset: 2px; }
.swh-pause[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.swh-game *,
	.swh-game *::before,
	.swh-game *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}