/* เกมทายคำ (Word Guess Game) — front-end theme.
 * White / soft-blue / purple-pink accent, big bold Thai type — a
 * sibling look to trip-game's game.css but its own palette so the two
 * games on the same site don't feel identical. */

/* Digital-clock style face used only for the round timer's digits
   (#wg-timer-value below) — same font file/purpose as trip-game's own
   copy in its game.css, kept as a separate per-plugin @font-face
   since the two games don't share a stylesheet. */
@font-face {
	font-family: 'Digital-Dismay';
	src: url('../fonts/Digital-Dismay.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Headings (h1-h5) and <p> text are deliberately excluded from the
 * app-wide font below, so the site theme's own Additional CSS
 * (h1-h5 / body,p font rules) governs them instead -- the game's own
 * font stack still applies to everything else (buttons, labels, UI
 * chrome), and the Digital-Dismay timer digits keep their own
 * higher-specificity rule further down, untouched. */
#wg-app,
#wg-app * {
	box-sizing: border-box;
}
#wg-app,
#wg-app *:not(h1, h2, h3, h4, h5, p) {
	font-family: 'db', 'SF Thonburi', 'Sarabun', sans-serif !important;
	font-weight: normal !important;
}

#wg-app {
	--wg-white: #ffffff;
	--wg-bg-soft: #eef1ff;
	--wg-purple: #7b5cff;
	--wg-purple-dark: #5b3bd6;
	--wg-pink: #ff5c9e;
	--wg-pink-dark: #e83c80;
	--wg-text: #23213a;
	--wg-text-light: #79768f;
	--wg-success: #22c55e;
	--wg-success-dark: #16a34a;
	--wg-danger: #ff5c5c;
	--wg-border: #ddd7ff;
	--wg-radius: 20px;
	--wg-radius-sm: 12px;
	--wg-shadow: 0 10px 30px rgba(30, 20, 60, 0.14);
	--wg-shadow-sm: 0 4px 14px rgba(30, 20, 60, 0.1);
	/* Fixed accent colour for outline icons landing on a plain white/
	   near-white surface (.wg-card, .wg-badge, a review-list row) —
	   see the .wg-icon rules below for exactly where this applies. */
	--wg-icon-accent: #ff6a3d;

	color: var(--wg-text);
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select: none;
	position: relative;
	width: 100%;
}

/* The actual background paint (solid colour, gradient, or a blurred
   image) lives on its OWN fixed, viewport-anchored layer behind every
   screen — not on #wg-app's own box. #wg-app just flows normally
   inside whatever column width the theme gives it (a negative-margin
   "breakout" trick on #wg-app itself turned out unreliable on some
   theme layouts, leaving a strip of the theme's own background on
   each side) — position:fixed always covers the FULL viewport
   regardless of that, so the game background reliably fills the
   screen edge-to-edge on any theme. Also handles "ภาพนิ่ง"/random
   image backgrounds, blurred independently so the blur never touches
   the word text or UI drawn on top of it. inset:-30px overscans past
   the viewport edge so a blurred image's edge is never visible. */
.wg-bg-layer {
	position: fixed;
	inset: -30px;
	background-size: cover;
	background-position: center;
	z-index: 0;
	pointer-events: none;
}

.wg-screen {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
	gap: 16px;
	animation: wg-fade-in 0.25s ease;
}

/* Play screen only (not the shared .wg-screen gap above, which other
   screens still use) — per explicit request, no space between the
   topbar/timer and the manual buttons row at the bottom; .wg-word-stage
   is flex:1 already so it still fills the space between them, this
   just drops the extra 16px .wg-screen was adding on top of that. */
.wg-screen--play {
	gap: 0;
}

/* Play screen only, on an actual phone (this game is always played in
   landscape on mobile — the rotate-overlay blocks portrait entirely,
   see below) — the play screen's own 620px max-width was capping the
   word card well inside a real landscape phone's much wider viewport,
   which was enough to wrap a long single Thai word (e.g.
   "จักรยานยนต์") and lose its last glyph off the bottom. Per request:
   widen by half the manual-buttons home button's own width (48px / 2
   = 24px) on each side, then another 20px each side (40px) on top of
   that per a follow-up request. */
@media (hover: none), (pointer: coarse) {
	.wg-screen--play {
		max-width: calc(620px + 48px + 40px);
	}
}

@keyframes wg-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.wg-screen--loading {
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
}

.wg-spinner {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 4px solid var(--wg-border);
	border-top-color: var(--wg-purple);
	animation: wg-spin 0.8s linear infinite;
}

@keyframes wg-spin {
	to { transform: rotate(360deg); }
}

/* -------------------------------------------------- generic card / button */

.wg-card {
	width: 100%;
	background: var(--wg-white);
	border-radius: var(--wg-radius);
	box-shadow: var(--wg-shadow);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
}

.wg-logo { text-align: center; margin: 0 0 -4px; }
.wg-logo img { width: 220px; max-width: 80%; height: auto; display: inline-block; }

.wg-title {
	font-size: clamp(22px, 6vw, 30px);
	font-weight: 700;
	color: var(--wg-purple-dark);
	text-align: center;
	margin: 0;
}

.wg-subtitle {
	font-size: clamp(13px, 3.6vw, 15px);
	color: var(--wg-text-light);
	text-align: center;
	margin: -6px 0 0;
}

/* Home screen's title/subtitle sit directly on the page background
   (not inside a white .wg-card, unlike every other screen that reuses
   these same classes) — same admin-configurable colour as the word
   text below, via --wg-content-text on #wg-app. The ">" keeps this
   from also repainting the "no categories yet" card's own title/desc,
   which IS nested inside a .wg-card a level deeper. */
.wg-screen--home > .wg-title,
.wg-screen--home > .wg-subtitle {
	color: var(--wg-content-text, var(--wg-purple-dark));
}

.wg-btn {
	appearance: none;
	border: none;
	cursor: pointer;
	border-radius: var(--wg-radius-sm);
	/* Shorter top/bottom padding than before (was 15px) — left/right kept
	 * the same per request, so the button gets less tall without
	 * shrinking its horizontal footprint. */
	padding: 11px 22px;
	font-size: clamp(15px, 4vw, 18px);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.12s ease;
	box-shadow:
		0 4px 0 var(--wg-btn-shade, rgba(30, 20, 60, 0.28)),
		0 6px 14px rgba(30, 20, 60, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.wg-btn:hover:not(:disabled) {
	transform: translateY(-3px);
	box-shadow:
		0 7px 0 var(--wg-btn-shade, rgba(30, 20, 60, 0.28)),
		0 14px 22px rgba(30, 20, 60, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.wg-btn:active,
.wg-btn.is-pressed {
	transform: translateY(3px) scale(0.96);
	box-shadow:
		0 1px 0 var(--wg-btn-shade, rgba(30, 20, 60, 0.28)),
		0 2px 6px rgba(30, 20, 60, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition-duration: 0.05s;
}

.wg-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: var(--wg-shadow-sm);
}

.wg-btn--block {
	width: 100%;
}

/* Sizes to fit its own text/icon instead of stretching full-width, for
 * a button inside a .wg-card even though the card's own
 * align-items:stretch would otherwise stretch every child. */
.wg-btn--fit {
	align-self: center;
}

/* Smaller footprint for the 3-button play-screen row (🏠 / pass /
   correct) — the full-size .wg-btn padding/font-size ate too much of
   the screen once a third button joined the row. */
.wg-btn--sm {
	padding: 10px 14px;
	font-size: clamp(13px, 3.4vw, 16px);
	box-shadow:
		0 3px 0 var(--wg-btn-shade, rgba(30, 20, 60, 0.28)),
		0 4px 10px rgba(30, 20, 60, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.wg-btn--hero {
	align-self: center;
	width: 80%;
	border-radius: 999px;
	padding-top: 13px;
	padding-bottom: 13px;
	font-size: clamp(17px, 4.6vw, 20px);
}

.wg-btn--primary {
	background: linear-gradient(160deg, #a98bff 0%, var(--wg-purple) 50%, var(--wg-purple-dark) 100%);
	color: var(--wg-white);
	--wg-btn-shade: #3c2588;
}

.wg-btn--accent {
	background: linear-gradient(160deg, #ff92c0 0%, var(--wg-pink) 50%, var(--wg-pink-dark) 100%);
	color: var(--wg-white);
	--wg-btn-shade: #a91f5c;
}

.wg-btn--ghost {
	background: linear-gradient(160deg, #ffffff 0%, var(--wg-bg-soft) 55%, #dcd6ff 100%);
	color: var(--wg-purple-dark);
	--wg-btn-shade: #c3b8f0;
}

/* Soft orange gradient for the ready screen's sound-toggle button in
 * its "off" state — deliberately a different colour family from every
 * other ghost button on the screen so it stands out as its own thing. */
.wg-btn--soft-orange {
	background: linear-gradient(160deg, #fff1e0 0%, #ffd9b3 55%, #ffc285 100%);
	color: #92650a;
	--wg-btn-shade: #e0a05c;
}

.wg-btn--success {
	background: linear-gradient(160deg, #6ee7a0 0%, var(--wg-success) 50%, var(--wg-success-dark) 100%);
	color: var(--wg-white);
	--wg-btn-shade: #0f6b30;
}

.wg-btn--danger {
	background: linear-gradient(160deg, #ff9a9a 0%, var(--wg-danger) 50%, #d43f3f 100%);
	color: var(--wg-white);
	--wg-btn-shade: #8f2a2a;
}

.wg-alert {
	border-radius: var(--wg-radius-sm);
	padding: 10px 14px;
	font-size: 14px;
	text-align: center;
	font-weight: 600;
}

.wg-alert--warning {
	background: #fff6e0;
	color: #92650a;
}

.wg-alert--info {
	background: #eef1ff;
	color: var(--wg-purple-dark);
}

/* -------------------------------------------------- inline outline icons
   Small stroke-only SVG icons (built in game.js — see icon()/ICON_PATHS
   there) used for the game's own fixed UI — buttons, headings, badges.
   Deliberately NOT applied to the admin-picked category icons
   (.wg-category-icon, e.g. 🍎/🍜), which stay full-colour emoji.

   Sizing is in `em` so every icon scales with whatever text it sits
   next to (a button's own font-size, the home title's clamp(), etc.)
   without needing per-usage overrides. Colour defaults to
   `currentColor`, i.e. it just inherits the surrounding text's own
   colour — a button's own text colour, --wg-content-text on the home
   title, the rotate overlay's white text, and so on. The exception is
   anywhere an icon lands on a plain white/near-white surface where
   ordinary body text is comparatively faint (a .wg-card, a .wg-badge,
   a review-list row): there it switches to a fixed warm accent colour
   instead so it stays clearly visible. Icons inside a BUTTON keep
   using currentColor even when that button happens to sit inside a
   card — the button's own background/text pairing already handles
   its own contrast. */
.wg-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: -0.15em;
}

.wg-card .wg-icon,
.wg-badge .wg-icon,
.wg-review-item .wg-icon {
	color: var(--wg-icon-accent, #ff6a3d);
}

.wg-card .wg-btn .wg-icon {
	color: currentColor;
}

/* -------------------------------------------------- home screen: category grid */

.wg-category-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.wg-category-card {
	appearance: none;
	border: 3px solid var(--wg-border);
	background: var(--wg-white);
	border-radius: var(--wg-radius);
	padding: 20px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	box-shadow: var(--wg-shadow-sm);
	transition: transform 0.14s ease-out, border-color 0.14s ease, box-shadow 0.14s ease;
}

.wg-category-card:hover:not(:active) {
	transform: translateY(-4px);
	border-color: var(--wg-purple);
	box-shadow: 0 10px 24px rgba(30, 20, 60, 0.18);
}

.wg-category-card:active,
.wg-category-card.is-pressed {
	transform: translateY(2px) scale(0.95);
	border-color: var(--wg-purple);
	box-shadow: 0 2px 8px rgba(30, 20, 60, 0.14);
}

/* "สุ่มหมวดหมู่" (random category) animation states — .is-scanning
   sweeps across cards while the pick is still cycling, .is-selected
   marks the one it landed on. */
.wg-category-card.is-scanning {
	border-color: #ff9233;
	box-shadow: 0 0 0 3px rgba(255, 146, 51, 0.25);
}

.wg-category-card.is-selected {
	border-color: #e6392f;
	box-shadow: 0 0 0 3px rgba(230, 57, 47, 0.25);
}

.wg-category-icon {
	font-size: clamp(34px, 9vw, 46px);
	line-height: 1;
}

.wg-category-name {
	font-size: clamp(15px, 4vw, 18px);
	font-weight: 700;
	color: var(--wg-text);
	text-align: center;
}

.wg-category-count {
	font-size: 12px;
	color: var(--wg-text-light);
}

/* Small cross-link to the sibling "เกมออกทริป" (Trip Game) plugin —
   home screen only, deliberately understated (plain outline pill, no
   big shadow like .wg-btn) so it doesn't compete with the real game
   actions above it. */
.wg-crosslink-btn {
	appearance: none;
	margin-top: 4px;
	padding: 8px 16px;
	border: 2px solid var(--wg-border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.wg-crosslink-btn .wg-icon {
	width: 14px;
	height: 14px;
}

/* Developer credit — home screen only, pinned at the bottom below the
   cross-link pill. Sits directly on the page's own background (solid/
   gradient/image), not inside a .wg-card, so it's white with a soft
   shadow for legibility against whatever's behind it, kept small and
   slightly translucent so it doesn't compete with the real UI. */
.wg-credit {
	align-self: center;
	margin-top: 10px;
	margin-bottom: 0;
	font-size: 13px;
	color: var(--wg-white);
	opacity: 0.85;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------------------- ready screen */

.wg-howto {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--wg-bg-soft);
	border-radius: var(--wg-radius-sm);
	padding: 16px 18px;
}

.wg-howto p {
	margin: 0;
	font-size: clamp(14px, 3.8vw, 16px);
	font-weight: 600;
	color: var(--wg-text);
}

/* -------------------------------------------------- play screen */

/* Three columns so the timer badge sits dead-center between the word
   counter and the score, regardless of how wide either label gets. */
.wg-topbar {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
}

.wg-badge {
	background: var(--wg-white);
	border: 2px solid var(--wg-border);
	color: var(--wg-purple-dark);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	/* Shorter top/bottom than before (was 8px) — left/right kept the
	 * same per request, so these topbar pills (เหลือ/timer/คะแนน) get
	 * less tall without narrowing. */
	padding: 5px 16px;
	border-radius: 999px;
	box-shadow: var(--wg-shadow-sm);
	font-size: clamp(14px, 3.6vw, 17px);
	white-space: nowrap;
}

.wg-topbar .wg-badge:first-child {
	justify-self: start;
}

.wg-topbar .wg-badge:last-child {
	justify-self: end;
}

.wg-badge--score {
	color: var(--wg-pink-dark);
}

/* The whole round's remaining time (admin-set total, see
   WG_Game::round_total_seconds() / startRoundTimer() in game.js) — the
   only clock in the game now, sitting in the topbar's middle column.
   In its last ROUND_TIMER_URGENT_SECONDS (15s): the number turns red,
   the badge's border blinks, and the big word on screen blinks too
   (see .wg-word-text.is-urgent below) — all driven off this one
   timer, toggled together in updateRoundTimerDisplay(). */
.wg-badge--timer {
	/* No badge/pill look here, matching the trip-game sibling's own
	   timer treatment (per explicit request) — background/border/
	   shadow all dropped, just the icon + bigger digits. The other two
	   topbar badges (เหลือ x/x, คะแนน) keep their normal pill look;
	   this override only touches the timer. */
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 5px 4px;
	/* White by default (was --wg-purple) — only turns orange in the
	   .is-urgent state below. This game leans on time pressure more
	   than trip-game does, so its timer is sized up further still. */
	color: var(--wg-white);
	white-space: nowrap;
	font-size: calc(clamp(14px, 3.6vw, 17px) + 9px);
}

/* Digital-Dismay only on the digits themselves, not the clock icon
   next to them. #wg-app prefix is needed to outweigh the page-wide
   font picker's own `#wg-app * { font-family: ... !important }` rule
   (admin's "ฟอนต์" screen, class-wg-shortcode.php::enqueue_font()) —
   that rule and this one are both !important, so it comes down to
   selector specificity, and the extra ID here wins. Size/spacing are
   a first pass (this font reads narrower/taller than the UI font at
   the same px) — nudge later once seen live. The badge itself has no
   fixed width, so it grows on its own to fit whatever this needs. */
#wg-app #wg-timer-value {
	font-family: 'Digital-Dismay', monospace !important;
	font-size: calc(1.2em + 3px);
	letter-spacing: 1px;
}

/* Was red (#e6392f) — per explicit request, changed to orange since
   red was sinking into the background and getting hard to see. The
   old blink animation pulsed the badge's border/box-shadow, which no
   longer exist on this borderless badge (see .wg-badge--timer above),
   so the urgency cue is now a plain opacity pulse on the text/icon
   themselves instead. */
.wg-badge--timer.is-urgent {
	color: #ffcc00;
	animation: wg-timer-text-blink 0.6s ease-in-out infinite;
}

@keyframes wg-timer-text-blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.wg-word-stage {
	flex: 1;
	width: 100%;
	display: flex;
	/* Was `center`, then briefly `flex-start` (killed the gap above the
	   card but left one below it, toward the buttons). Now `stretch` —
	   .wg-word-card fills the stage's full height top to bottom, so
	   there's no leftover gap on either side, AND the card gets the
	   most room possible for a word that wraps to 2 lines instead of
	   that space sitting empty. .wg-word-card's own inner
	   align-items/justify-content (center/center) still centers the
	   text vertically and horizontally within that now-taller box.
	   justify-content here still centers the card horizontally. */
	align-items: stretch;
	justify-content: center;
	position: relative;
}

/* Deliberately no background/border/shadow here — just a plain layout
   box. The word sits straight on the page background (set by the
   admin's "สีพื้นหลัง" setting) instead of inside a separate white
   card, per request. min-height keeps the play screen from jumping
   around as word length changes; the flash/countdown effects below
   still work fine against a transparent box. */
.wg-word-card {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	min-height: 40vh;
	text-align: center;
	border-radius: var(--wg-radius);
}

.wg-word-text {
	font-weight: 800;
	line-height: 1.15;
	/* Same admin-configurable colour as the home screen's title/
	   subtitle above (see --wg-content-text on #wg-app) — the word
	   always sits straight on the page background too, never inside a
	   white card. */
	color: var(--wg-content-text, var(--wg-purple-dark));
	word-break: break-word;
	/* Big and clear in either portrait or landscape — bounded by both
	   viewport width and height so a long Thai phrase never overflows
	   its card once the phone is rotated landscape (short viewport
	   height). Mobile-first base: 3px bigger than the original size,
	   plus a text-shadow, so the word reads clearly on a phone screen
	   held at an angle; both get dialed back on desktop below, where
	   there's no glare/viewing-angle problem to compensate for. */
	font-size: clamp(35px, min(13vw, 20vh), 133px);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Desktop/mouse only. A width-based breakpoint doesn't work here: this
   game is held LANDSCAPE on a phone, and a phone's landscape CSS width
   often exceeds typical "desktop" breakpoints (e.g. an iPhone in
   landscape is ~800-930px wide) — a min-width query would misfire and
   apply the desktop size/no-shadow to a phone. hover:hover + pointer:fine
   only matches an actual mouse-driven browser, regardless of window
   width, so a landscape phone correctly keeps the bigger shadowed
   mobile style. */
@media (hover: hover) and (pointer: fine) {
	.wg-word-text {
		font-size: clamp(28px, min(8vw, 14vh), 90px);
		text-shadow: none;
	}
}

/* Last ROUND_TIMER_URGENT_SECONDS of the round's clock — blinks to
   hurry the player along, per request. Toggled from game.js alongside
   the timer badge turning "urgent" (see .wg-badge--timer.is-urgent
   above) — both come from the same single round-wide timer now. */
@keyframes wg-word-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.wg-word-text.is-urgent {
	animation: wg-word-blink 0.5s ease-in-out infinite;
}

/* Correct gets a bright blue ring; pass (skip) gets a bright orange
 * ring — same colour family as --wg-icon-accent so the "skipped" cue
 * reads consistently with the rest of the theme's accent colour. */
.wg-word-card.wg-flash-correct {
	animation: wg-flash-blue 0.4s ease;
}

.wg-word-card.wg-flash-pass {
	animation: wg-flash-orange 0.4s ease;
}

@keyframes wg-flash-blue {
	0% { box-shadow: none; }
	40% { box-shadow: 0 0 0 8px rgba(14, 165, 255, 0.55); }
	100% { box-shadow: none; }
}

@keyframes wg-flash-orange {
	0% { box-shadow: none; }
	40% { box-shadow: 0 0 0 8px rgba(255, 106, 61, 0.6); }
	100% { box-shadow: none; }
}

.wg-manual-buttons {
	width: 100%;
	display: flex;
	gap: 10px;
	/* .wg-screen--play sits this row flush (gap: 0) against
	   .wg-word-stage above, per an earlier explicit "ไม่ต้องมี gap"
	   request — but that also swallows the bottom half of the
	   correct/pass flash ring around .wg-word-card (see
	   .wg-word-card.wg-flash-correct/.wg-flash-pass's
	   `box-shadow: 0 0 0 8px ...` further up this file), since with
	   zero gap the ring's outward-8px edge has nowhere to render
	   before the button row starts covering it. A small margin-top
	   here (not touching .wg-screen--play's shared gap, so the
	   topbar-to-stage flush look is unaffected) gives that ring just
	   enough clearance to actually be visible along its bottom edge. */
	margin-top: 8px;
}

.wg-manual-buttons .wg-btn {
	flex: 1;
}

/* The 🏠 exit button stays icon-only and narrow so pass/correct — the
   two buttons actually used every single word — keep most of the
   row's width. */
.wg-manual-buttons__home {
	flex: 0 0 auto;
	width: 48px;
	padding-left: 0;
	padding-right: 0;
}

/* -------------------------------------------------- countdown overlay */

.wg-countdown-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wg-radius);
}

.wg-countdown-number {
	font-size: clamp(60px, 20vw, 140px);
	font-weight: 800;
	/* Same red used elsewhere in the theme for urgency (the round
	 * timer's last-15-seconds state, a selected category) — was purple,
	 * changed to red per request. */
	color: #e6392f;
	animation: wg-countdown-pop 1s ease;
}

@keyframes wg-countdown-pop {
	0% { transform: scale(0.5); opacity: 0; }
	30% { transform: scale(1.1); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* -------------------------------------------------- result screen */

.wg-score-big {
	font-size: clamp(40px, 12vw, 64px);
	font-weight: 800;
	color: var(--wg-pink-dark);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.wg-review-list {
	width: 100%;
	max-height: 220px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wg-review-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border-radius: var(--wg-radius-sm);
	background: var(--wg-bg-soft);
	font-size: 14px;
}

.wg-review-item__mark {
	font-size: 16px;
}

.wg-review-item.is-pass {
	opacity: 0.7;
}

.wg-result-actions {
	display: flex;
	gap: 12px;
	width: 100%;
}

.wg-result-actions .wg-btn {
	flex: 1;
}

/* -------------------------------------------------- rotate-to-landscape overlay
   Only ever shown during the play screen, and only while the browser
   viewport itself is in portrait — the whole point of the game is
   holding the phone landscape, so a portrait player gets stopped here
   instead of seeing a cramped word card. */

.wg-rotate-overlay {
	display: none;
}

#wg-app[data-screen="play"] .wg-rotate-overlay {
	position: fixed;
	inset: 0;
	z-index: 20;
	background: var(--wg-purple-dark);
	color: var(--wg-white);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	padding: 30px;
}

@media (orientation: landscape) {
	#wg-app[data-screen="play"] .wg-rotate-overlay {
		display: none;
	}
}

@media (orientation: portrait) {
	#wg-app[data-screen="play"] .wg-rotate-overlay {
		display: flex;
	}
}

.wg-rotate-icon {
	font-size: 56px;
	animation: wg-rotate-wiggle 1.4s ease-in-out infinite;
}

/* "Cancel game" button on the rotate notice — same ghost styling as
   the play-screen's home button, just given a little breathing room
   from the message text above it since the overlay is otherwise all
   icon + copy. */
.wg-rotate-overlay__home {
	margin-top: 6px;
}

@keyframes wg-rotate-wiggle {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(90deg); }
}

/* -------------------------------------------------- build version tag */

.wg-version-tag {
	position: fixed;
	bottom: 6px;
	right: 8px;
	font-size: 11px;
	color: var(--wg-text-light);
	opacity: 0.5;
	z-index: 9998;
	pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}