/*
 * Wind Turbine by CraftBook Magazine V3: game styles.
 *
 * Phase 4: construction game styling.
 *
 * Everything is scoped under .wtc-game so it never bleeds into the host theme.
 * Colours come from CSS custom properties set by the engine per instance, so
 * multiple games on a page can have different palettes.
 *
 * Layout strategy:
 *   - Desktop / tablet landscape: canvas left + tray right (sidebar)
 *   - Tablet portrait / mobile:   canvas top  + tray bottom (strip)
 * Triggered by container-query-style aspect detection via media queries
 * on the host viewport (we don't yet have universal container queries).
 */

/* =====================================================================
 * Reset + tokens scoped to .wtc-game
 * ===================================================================*/
.wtc-game,
.wtc-game * ,
.wtc-game *::before,
.wtc-game *::after {
	box-sizing: border-box;
}

.wtc-game {
	--wtc-primary:  #0f6e56;
	--wtc-accent:   #1d9e75;
	--wtc-bg:       #eef2f4;
	--wtc-surface:  #ffffff;
	--wtc-ink:      #1f2a30;
	--wtc-ink-soft: #5f6c74;
	--wtc-border:   #c4ced3;
	--wtc-danger:   #c0392b;
	--wtc-radius:   10px;
	--wtc-shadow:   0 4px 14px rgba(31, 42, 48, 0.08);

	position: relative;
	width: 100%;
	min-height: var(--wtc-height, 700px);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wtc-ink);
	background: var(--wtc-bg);
	border-radius: var(--wtc-radius);
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	display: flex;
	flex-direction: column;
}

.wtc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
 * Loading / error states
 * ===================================================================*/
.wtc-game__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wtc-ink-soft);
}
.wtc-game__loading--error {
	color: var(--wtc-danger);
}

/* =====================================================================
 * Top bar: stage label, progress, undo
 * ===================================================================*/
.wtc-topbar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	background: var(--wtc-surface);
	border-bottom: 1px solid var(--wtc-border);
	flex-shrink: 0;
}

.wtc-stage {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--wtc-ink-soft);
	flex-shrink: 0;
}

.wtc-stage__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: var(--wtc-primary);
	color: #fff;
	font-weight: 600;
	border-radius: 50%;
	font-size: 12px;
}

.wtc-stage__name {
	font-weight: 500;
	color: var(--wtc-ink);
	font-size: 14px;
}

.wtc-progress {
	flex: 1 1 auto;
	height: 8px;
	background: var(--wtc-bg);
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--wtc-border);
	min-width: 0;
}

.wtc-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wtc-primary), var(--wtc-accent));
	width: 0;
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wtc-progress__text {
	font-size: 12px;
	color: var(--wtc-ink-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex-shrink: 0;
}

/* =====================================================================
 * Main area: canvas + tray
 * ===================================================================*/
.wtc-main {
	display: grid;
	grid-template-columns: 1fr 240px;
	flex: 1 1 auto;
	min-height: 0;
}

@media (max-width: 720px), (max-aspect-ratio: 4/5) {
	.wtc-main {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
	}
}

/* --- Canvas ----------------------------------------------------------*/
.wtc-canvas-wrap {
	position: relative;
	background: linear-gradient(180deg, #d9e6f0 0%, #f0f4f2 100%);
	overflow: hidden;
	min-height: 0;
	min-width:  0;
	touch-action: none; /* lets us handle pinch/pan ourselves cleanly */
}

.wtc-canvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
}

.wtc-canvas--dragging { cursor: grabbing; }

/* World group transforms applied via inline transform attribute */

/* Snap-target outlines */
.wtc-target__outline {
	fill: var(--wtc-accent);
	fill-opacity: 0.08;
	stroke: var(--wtc-accent);
	stroke-width: 2;
	stroke-dasharray: 6 4;
	transition: fill-opacity 0.2s, stroke-width 0.2s;
}

.wtc-target__preview {
	opacity: 0.35;
	pointer-events: none;
}

.wtc-target--snap .wtc-target__outline {
	fill-opacity: 0.22;
	stroke-width: 3;
	stroke-dasharray: none;
	filter: drop-shadow(0 0 6px rgba(29, 158, 117, 0.6));
}

/* Tap-to-place: target pulses to invite a tap. Stronger than --snap
   because there's no moving ghost to draw the eye. */
.wtc-target--awaiting-tap .wtc-target__outline {
	stroke-width: 4;
	stroke-dasharray: none;
	animation: wtc-target-pulse 1.4s ease-in-out infinite;
}

@keyframes wtc-target-pulse {
	0%, 100% {
		fill-opacity: 0.15;
		filter: drop-shadow(0 0 4px rgba(29, 158, 117, 0.4));
	}
	50% {
		fill-opacity: 0.32;
		filter: drop-shadow(0 0 14px rgba(29, 158, 117, 0.7));
	}
}

/* Pieces that have been placed */
/* During construction, placed pieces must not intercept pointer events,
   or they would block dragging the next part over them.

   After completion they become the way the player explores the turbine,
   so they have to accept input again. Without the second rule below,
   every click and tap passes straight through the artwork and the
   information panel can never open. */
.wtc-piece {
	pointer-events: none;
}

.wtc-game--complete .wtc-piece {
	pointer-events: auto;
	cursor: pointer;
}

/* The blades are moved into a rotating group by the simulation; they must
   stay clickable there too. */
.wtc-game--complete .wtc-rotor,
.wtc-game--complete .wtc-rotor .wtc-piece {
	pointer-events: auto;
}

@keyframes wtc-piece-pop {
	0%   { transform-origin: center; opacity: 0; }
	60%  { opacity: 1; }
	100% { opacity: 1; }
}

.wtc-piece--enter {
	animation: wtc-piece-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Ghost being dragged */
.wtc-ghost {
	opacity: 0.85;
	pointer-events: none;
	transition: opacity 0.15s;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.wtc-ghost--snap {
	opacity: 1;
	filter: drop-shadow(0 0 10px rgba(29, 158, 117, 0.65));
}

/* Whole-game feedback flashes */
.wtc-game--accept .wtc-canvas-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(29, 158, 117, 0.15);
	pointer-events: none;
	animation: wtc-flash 0.35s ease-out;
}
.wtc-game--reject .wtc-canvas-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(192, 57, 43, 0.2);
	pointer-events: none;
	animation: wtc-flash 0.35s ease-out;
}
@keyframes wtc-flash {
	0% { opacity: 0; }
	30% { opacity: 1; }
	100% { opacity: 0; }
}

/* --- Zoom bar --------------------------------------------------------*/
.wtc-zoombar {
	position: absolute;
	bottom: 14px;
	right: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: rgba(255, 255, 255, 0.92);
	padding: 6px;
	border-radius: 8px;
	box-shadow: var(--wtc-shadow);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* =====================================================================
 * Tray
 * ===================================================================*/
.wtc-tray {
	background: var(--wtc-surface);
	border-left: 1px solid var(--wtc-border);
	overflow-y: auto;
	min-height: 0;
	min-width: 0;
}

@media (max-width: 720px), (max-aspect-ratio: 4/5) {
	.wtc-tray {
		border-left: none;
		border-top: 1px solid var(--wtc-border);
		max-height: 200px;
	}
}

.wtc-tray__inner {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wtc-tray__heading {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wtc-ink-soft);
}

.wtc-tray__help {
	font-size: 11px;
	color: var(--wtc-ink-soft);
	margin: 6px 0 0;
	line-height: 1.4;
}

.wtc-tray__done {
	padding: 16px;
	background: var(--wtc-accent);
	color: #fff;
	border-radius: var(--wtc-radius);
	font-weight: 600;
	text-align: center;
}

/* Card (each part shown in the tray) */
.wtc-card {
	background: var(--wtc-bg);
	border: 1.5px solid transparent;
	border-radius: var(--wtc-radius);
	padding: 8px;
	cursor: grab;
	display: flex;
	gap: 10px;
	align-items: center;
	transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
	/* Critical for touch: tell the browser we own this gesture so it
	   doesn't try to scroll, pinch-zoom, or interpret a swipe as anything
	   other than our drag. Without this, touchstart fires but pointermove
	   gets stolen by the browser's scroll handling on iOS/Android/Fire. */
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-drag: none;
}

.wtc-card--active {
	border-color: var(--wtc-accent);
	background: var(--wtc-surface);
	box-shadow: var(--wtc-shadow);
}

.wtc-card--active:hover,
.wtc-card--active:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(31, 42, 48, 0.12);
	outline: 2px solid var(--wtc-accent);
	outline-offset: 2px;
}

/* Tap-to-place: the card is selected, awaiting a canvas tap. */
.wtc-card--selected {
	background: var(--wtc-accent);
	border-color: var(--wtc-accent);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.25);
	animation: wtc-card-pulse 1.6s ease-in-out infinite;
}

.wtc-card--selected .wtc-card__label {
	color: #fff;
}

@keyframes wtc-card-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.25); }
	50%      { box-shadow: 0 0 0 8px rgba(29, 158, 117, 0.10); }
}

.wtc-card--queued {
	cursor: not-allowed;
	opacity: 0.55;
}

.wtc-card--queued .wtc-card__svg {
	filter: grayscale(0.4);
}

.wtc-card__svg {
	flex-shrink: 0;
	width: 70px;
	height: 50px;
}

.wtc-card--active .wtc-card__svg {
	width: 90px;
	height: 60px;
}

.wtc-card__label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wtc-ink);
}

/* Mobile tray uses a horizontal scroll */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
	.wtc-tray__inner {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 12px;
	}
	.wtc-tray__heading,
	.wtc-tray__help {
		display: none;
	}
	.wtc-card {
		flex-direction: column;
		min-width: 110px;
		text-align: center;
		gap: 4px;
	}
	.wtc-card__svg, .wtc-card--active .wtc-card__svg {
		width: 90px;
		height: 50px;
	}
	.wtc-card__label {
		font-size: 11px;
	}
}

/* =====================================================================
 * Buttons (icon-only and ghost variants)
 * ===================================================================*/
.wtc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid var(--wtc-border);
	background: var(--wtc-surface);
	color: var(--wtc-ink);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.wtc-btn:hover {
	background: var(--wtc-bg);
	border-color: var(--wtc-accent);
}

.wtc-btn:active {
	transform: translateY(1px);
}

.wtc-btn:focus-visible {
	outline: 2px solid var(--wtc-accent);
	outline-offset: 2px;
}

.wtc-btn:disabled,
.wtc-btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

.wtc-btn--icon {
	width: 34px;
	height: 34px;
	padding: 6px;
}

.wtc-btn--icon img,
.wtc-btn--icon svg {
	width: 100%;
	height: 100%;
}

/* Inline icons inherit the button's text colour through currentColor,
   so no filter trickery is needed to recolour them. */
.wtc-btn svg {
	color: inherit;
	fill: none;
}

.wtc-btn--ghost {
	background: transparent;
	border-color: transparent;
}

.wtc-btn--ghost:hover {
	background: var(--wtc-bg);
	border-color: var(--wtc-border);
}

/* =====================================================================
 * Title bar at the bottom (the required CraftBook line)
 * ===================================================================*/
.wtc-titlebar {
	background: linear-gradient(90deg, #1f2a30 0%, #2a3942 100%);
	color: #f2f4f5;
	font-size: 13px;
	font-weight: 500;
	padding: 10px 14px;
	text-align: center;
	letter-spacing: 0.02em;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

/* =====================================================================
 * Reduced motion preference
 * ===================================================================*/
@media (prefers-reduced-motion: reduce) {
	.wtc-piece--enter,
	.wtc-game--accept .wtc-canvas-wrap::after,
	.wtc-game--reject .wtc-canvas-wrap::after {
		animation: none;
	}
	.wtc-progress__fill,
	.wtc-target__outline,
	.wtc-card,
	.wtc-btn {
		transition: none;
	}
	.wtc-confetti, .wtc-celebrate-banner {
		animation: none !important;
	}
}

/* =====================================================================
 * Phase 5: celebration animation
 * ===================================================================*/
.wtc-celebrate {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.wtc-confetti {
	position: absolute;
	top: -20px;
	border-radius: 1px;
	animation-name: wtc-confetti-fall;
	animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
	animation-fill-mode: forwards;
	opacity: 0.9;
}

@keyframes wtc-confetti-fall {
	0%   { transform: translateY(-20px) rotate(0deg);    opacity: 0;   }
	10%  { opacity: 1; }
	100% { transform: translateY(110vh) rotate(720deg);  opacity: 0.6; }
}

.wtc-celebrate-banner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.6);
	background: rgba(15, 110, 86, 0.95);
	color: #fff;
	padding: 14px 28px;
	border-radius: 12px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.01em;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
	opacity: 0;
	animation: wtc-banner-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
	pointer-events: none;
}

@keyframes wtc-banner-in {
	0%   { transform: translate(-50%, -50%) scale(0.6);   opacity: 0; }
	60%  { transform: translate(-50%, -50%) scale(1.05);  opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1.0);   opacity: 1; }
}

.wtc-celebrate-banner--fade {
	animation: wtc-banner-out 1.4s ease-out forwards;
}

@keyframes wtc-banner-out {
	0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
	100% { opacity: 0; transform: translate(-50%, -120%) scale(0.95); }
}

/* =====================================================================
 * Phase 5: simulation panel (replaces parts tray on completion)
 * ===================================================================*/
.wtc-sim__btnrow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.wtc-btn--primary {
	background: var(--wtc-primary);
	color: #fff;
	border-color: var(--wtc-primary);
}
.wtc-btn--primary:hover:not(:disabled) {
	background: var(--wtc-accent);
	border-color: var(--wtc-accent);
}
.wtc-btn--primary img { filter: brightness(0) invert(1); }
.wtc-btn--primary svg { color: #fff; }

.wtc-btn--danger {
	background: #fff;
	color: var(--wtc-danger);
	border-color: var(--wtc-danger);
}
.wtc-btn--danger:hover:not(:disabled) {
	background: var(--wtc-danger);
	color: #fff;
}
.wtc-btn--danger img { filter: none; transition: filter 0.15s; }
.wtc-btn--danger:hover img { filter: brightness(0) invert(1); }
.wtc-btn--danger svg { color: var(--wtc-danger); transition: color 0.15s; }
.wtc-btn--danger:hover svg { color: #fff; }

.wtc-btn--wide {
	width: 100%;
	justify-content: center;
	padding: 10px 12px;
	font-weight: 500;
}

.wtc-btn--wide img {
	width: 16px; height: 16px;
}

.wtc-sim__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wtc-sim__label {
	font-size: 11px;
	font-weight: 500;
	color: var(--wtc-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wtc-sim__sliderrow {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wtc-sim__slider {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 20px;
	cursor: pointer;
	accent-color: var(--wtc-accent);
}

.wtc-sim__output {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	min-width: 56px;
	text-align: right;
	color: var(--wtc-ink);
	font-weight: 500;
}

.wtc-sim__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.wtc-sim__stat {
	background: var(--wtc-bg);
	border-radius: 6px;
	padding: 8px 10px;
}

.wtc-sim__stat-label {
	font-size: 10px;
	color: var(--wtc-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 2px;
}

.wtc-sim__stat-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--wtc-ink);
	font-variant-numeric: tabular-nums;
}

.wtc-sim__graph {
	width: 100%;
	height: auto;
	background: #fff;
	border: 1px solid var(--wtc-border);
	border-radius: 6px;
	padding: 4px;
}

.wtc-sim__grid {
	background: linear-gradient(135deg, var(--wtc-primary), var(--wtc-accent));
	color: #fff;
	padding: 12px;
	border-radius: 8px;
	text-align: center;
}

.wtc-sim__grid-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

.wtc-sim__grid-value {
	font-size: 28px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	margin: 2px 0;
	line-height: 1;
}

.wtc-sim__grid-foot {
	font-size: 10px;
	opacity: 0.7;
}

/* =====================================================================
 * Phase 5: X-ray mode (semi-transparent nacelle for educational view)
 * ===================================================================*/
.wtc-game--xray [data-component-id="nacelle-cover"] {
	opacity: 0.35;
	transition: opacity 0.4s ease;
}

[data-component-id="nacelle-cover"] {
	transition: opacity 0.4s ease;
}

/* =====================================================================
 * Phase 5: mobile tweaks for the simulation panel
 * ===================================================================*/
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
	.wtc-game--complete .wtc-tray__inner {
		flex-direction: column;
		overflow-y: auto;
		overflow-x: hidden;
		max-height: 280px;
	}
	.wtc-sim__btnrow {
		grid-template-columns: 1fr 1fr;
	}
}

/* =====================================================================
 * Phase 6: information panel
 * ===================================================================*/

/* Backdrop (used on mobile bottom sheet, invisible on desktop side panel). */
.wtc-info-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 22, 28, 0.0);
	opacity: 0;
	pointer-events: none;
	transition: background 0.25s ease, opacity 0.25s ease;
	z-index: 80;
}

.wtc-game--info-open .wtc-info-backdrop {
	pointer-events: auto;
}

@media (max-width: 720px), (max-aspect-ratio: 4/5) {
	.wtc-game--info-open .wtc-info-backdrop {
		background: rgba(15, 22, 28, 0.45);
		opacity: 1;
	}
}

/* Side panel (desktop) */
.wtc-info {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100%;
	background: var(--wtc-surface);
	border-left: 1px solid var(--wtc-border);
	box-shadow: -8px 0 24px rgba(15, 22, 28, 0.12);
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 90;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.wtc-info[aria-hidden="false"] {
	transform: translateX(0);
}

.wtc-info[aria-hidden="true"] {
	pointer-events: none;
}

/* Bottom sheet (mobile / narrow portrait) */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
	.wtc-info {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 65%;
		max-height: 65%;
		border-left: none;
		border-top: 1px solid var(--wtc-border);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 24px rgba(15, 22, 28, 0.18);
		transform: translateY(100%);
	}
	.wtc-info[aria-hidden="false"] {
		transform: translateY(0);
	}
}

/* Header */
.wtc-info__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px 12px 20px;
	border-bottom: 1px solid var(--wtc-border);
	background: var(--wtc-surface);
	flex-shrink: 0;
}

.wtc-info__titlewrap {
	min-width: 0;
	flex: 1;
}

.wtc-info__eyebrow {
	font-size: 11px;
	font-weight: 500;
	color: var(--wtc-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.3;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wtc-info__title {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	color: var(--wtc-ink);
	line-height: 1.25;
}

.wtc-info__close {
	flex-shrink: 0;
}

/* Mobile drag handle on the bottom sheet */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
	.wtc-info__header::before {
		content: '';
		position: absolute;
		top: 6px;
		left: 50%;
		transform: translateX(-50%);
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: var(--wtc-border);
	}
	.wtc-info__header {
		position: relative;
		padding-top: 18px;
	}
}

/* Body */
.wtc-info__body {
	overflow-y: auto;
	padding: 16px 20px 24px;
	flex: 1 1 auto;
	scrollbar-width: thin;
}

/* Preview SVG */
.wtc-info__preview {
	width: 100%;
	height: 120px;
	background: var(--wtc-bg);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	overflow: hidden;
}

.wtc-info__preview-svg {
	width: auto;
	height: 100%;
	max-width: 100%;
	padding: 14px;
}

/* Body text */
.wtc-info__description {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wtc-ink);
}

.wtc-info__heading {
	margin: 16px 0 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wtc-ink-soft);
}

/* Specs definition list */
.wtc-info__specs {
	margin: 0 0 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 12px;
	font-size: 13px;
}

.wtc-info__spec-key {
	color: var(--wtc-ink-soft);
	padding: 6px 0;
	border-top: 1px solid var(--wtc-border);
}

.wtc-info__spec-value {
	color: var(--wtc-ink);
	font-weight: 500;
	padding: 6px 0;
	margin-left: 0;
	border-top: 1px solid var(--wtc-border);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Physics paragraph */
.wtc-info__physics {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wtc-ink);
	background: var(--wtc-bg);
	border-radius: 6px;
	padding: 12px;
	border-left: 3px solid var(--wtc-accent);
}

/* Nav (prev / next) */
.wtc-info__nav {
	display: flex;
	gap: 8px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--wtc-border);
}

.wtc-info__nav-btn {
	flex: 1;
	justify-content: center;
}

/* Highlighting the selected piece on the canvas */
.wtc-piece--highlight {
	filter: drop-shadow(0 0 6px var(--wtc-accent))
	        drop-shadow(0 0 12px rgba(29, 158, 117, 0.4));
}

/* Hover state for placed pieces after completion (only when info panel
   has activated them; they have the data-wtc-interactive marker). */
.wtc-game--complete [data-wtc-interactive="1"] {
	transition: filter 0.2s ease;
}

.wtc-game--complete [data-wtc-interactive="1"]:hover {
	filter: drop-shadow(0 0 5px rgba(29, 158, 117, 0.75));
}

/* Keyboard focus needs to be obvious. A faint glow is not enough against
   a detailed landscape, so draw a real outline as well. SVG honours
   outline in current browsers; the heavy drop-shadow is the fallback for
   those that do not. */
.wtc-game--complete [data-wtc-interactive="1"]:focus,
.wtc-game--complete [data-wtc-interactive="1"]:focus-visible {
	outline: 3px solid var(--wtc-accent);
	outline-offset: 3px;
	filter: drop-shadow(0 0 0 3px var(--wtc-accent))
	        drop-shadow(0 0 8px rgba(29, 158, 117, 0.95))
	        drop-shadow(0 0 16px rgba(29, 158, 117, 0.6));
}

/* Floating "click any part" hint that fades after a few seconds */
.wtc-explore-hint {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(15, 22, 28, 0.85);
	color: #fff;
	padding: 8px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	box-shadow: 0 4px 14px rgba(0,0,0,0.18);
	pointer-events: none;
	opacity: 0;
	animation: wtc-hint-in 0.4s ease 0.5s forwards;
	z-index: 70;
}

.wtc-explore-hint--fade {
	animation: wtc-hint-out 1.6s ease forwards;
}

@keyframes wtc-hint-in {
	from { opacity: 0; transform: translate(-50%, -10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes wtc-hint-out {
	from { opacity: 1; transform: translate(-50%, 0); }
	to   { opacity: 0; transform: translate(-50%, -10px); }
}

/* Tap-to-place instruction banner: pinned to top of the canvas while
   the player has a part selected, with a cancel (×) button. */
.wtc-tap-instruction {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wtc-accent);
	color: #fff;
	padding: 10px 14px 10px 16px;
	border-radius: 24px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	max-width: calc(100% - 28px);
	box-shadow: 0 6px 18px rgba(15, 22, 28, 0.22);
	z-index: 75;
	animation: wtc-tap-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.wtc-tap-instruction__icon {
	font-size: 18px;
	line-height: 1;
}

.wtc-tap-instruction__text {
	flex: 1;
	min-width: 0;
}

.wtc-tap-instruction__cancel {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	padding: 0;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
	font-family: inherit;
}

.wtc-tap-instruction__cancel:hover,
.wtc-tap-instruction__cancel:focus {
	background: rgba(255, 255, 255, 0.32);
	outline: none;
}

@keyframes wtc-tap-in {
	from { opacity: 0; transform: translate(-50%, -16px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* On narrow screens, the instruction sits at the bottom of the canvas
   so it never overlaps the snap target. */
@media (max-width: 480px) {
	.wtc-tap-instruction {
		top: auto;
		bottom: 14px;
		font-size: 12px;
		padding: 8px 12px 8px 14px;
	}
}

/* Reduced motion: panel just appears */
@media (prefers-reduced-motion: reduce) {
	.wtc-info,
	.wtc-info-backdrop,
	.wtc-explore-hint,
	.wtc-piece--highlight,
	.wtc-tap-instruction,
	.wtc-card--selected,
	.wtc-target--awaiting-tap .wtc-target__outline {
		animation: none !important;
		transition: none !important;
	}
}

/* =====================================================================
 * Phase 7: Build timer
 * ===================================================================*/
.wtc-timer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--wtc-bg);
	border-radius: 14px;
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--wtc-ink);
	border: 1px solid var(--wtc-border);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	flex-shrink: 0;
}

.wtc-timer__icon {
	font-size: 13px;
	line-height: 1;
}

.wtc-timer--idle {
	color: var(--wtc-ink-soft);
}

.wtc-timer--running {
	background: rgba(29, 158, 117, 0.1);
	color: var(--wtc-primary);
	border-color: var(--wtc-accent);
}

.wtc-timer--running .wtc-timer__icon {
	animation: wtc-timer-pulse 2s ease-in-out infinite;
}

@keyframes wtc-timer-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

.wtc-timer--stopped {
	background: rgba(29, 158, 117, 0.18);
	color: var(--wtc-primary);
	border-color: var(--wtc-primary);
}

/* Reset button styling */
.wtc-btn--reset img {
	opacity: 0.6;
}

.wtc-btn--reset:hover img {
	opacity: 1;
}

/* =====================================================================
 * Phase 7: Completion certificate (modal overlay)
 * ===================================================================*/
.wtc-cert-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 22, 28, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
	padding: 24px;
	animation: wtc-cert-fade-in 0.3s ease;
}

@keyframes wtc-cert-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.wtc-cert {
	background: #fffdf6;
	border-radius: 12px;
	max-width: 500px;
	width: 100%;
	box-shadow: 0 20px 60px rgba(15, 22, 28, 0.35);
	overflow: hidden;
	position: relative;
	animation: wtc-cert-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wtc-cert-pop {
	0%   { transform: scale(0.85); opacity: 0; }
	60%  { transform: scale(1.03); opacity: 1; }
	100% { transform: scale(1.0); opacity: 1; }
}

.wtc-cert::before,
.wtc-cert::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	height: 1px;
	background: var(--wtc-primary);
}

.wtc-cert::before { top: 14px; }
.wtc-cert::after  { bottom: 14px; }

.wtc-cert__inner {
	padding: 36px 32px 24px;
	border: 1px solid var(--wtc-primary);
	margin: 22px;
	border-radius: 6px;
	text-align: center;
}

.wtc-cert__eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wtc-primary);
	font-weight: 600;
	margin-bottom: 8px;
}

.wtc-cert__title {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wtc-ink);
	font-family: Georgia, 'Times New Roman', serif;
}

.wtc-cert__lede {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wtc-ink-soft);
	font-style: italic;
}

.wtc-cert__stats {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin: 20px 0;
}

.wtc-cert__stat-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wtc-ink-soft);
	margin-bottom: 2px;
}

.wtc-cert__stat-value {
	font-size: 22px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--wtc-ink);
}

.wtc-cert__badge {
	display: inline-block;
	background: linear-gradient(135deg, var(--wtc-primary), var(--wtc-accent));
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 14px;
	border-radius: 12px;
	margin: 8px 0;
	letter-spacing: 0.03em;
}

.wtc-cert__date {
	margin-top: 18px;
	font-size: 12px;
	color: var(--wtc-ink-soft);
	font-style: italic;
}

.wtc-cert__actions {
	margin-top: 20px;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.wtc-cert__print {
	background: var(--wtc-primary);
	color: #fff;
	border-color: var(--wtc-primary);
}

.wtc-cert__print:hover {
	background: var(--wtc-accent);
	border-color: var(--wtc-accent);
}

/* Print rules: when printing the certificate, hide everything else */
@media print {
	body.wtc-printing * {
		visibility: hidden;
	}
	body.wtc-printing .wtc-cert-overlay,
	body.wtc-printing .wtc-cert-overlay * {
		visibility: visible;
	}
	body.wtc-printing .wtc-cert-overlay {
		position: fixed;
		inset: 0;
		background: #fff;
		padding: 0;
	}
	body.wtc-printing .wtc-cert {
		box-shadow: none;
		max-width: none;
		width: 80%;
		margin: 40px auto;
	}
	body.wtc-printing .wtc-cert__actions {
		display: none;
	}
}

/* Mobile certificate */
@media (max-width: 480px) {
	.wtc-cert__inner {
		padding: 24px 16px 16px;
		margin: 16px;
	}
	.wtc-cert__title {
		font-size: 20px;
	}
	.wtc-cert__stats {
		gap: 18px;
	}
	.wtc-cert__stat-value {
		font-size: 18px;
	}
}

/* =====================================================================
 * Phase B: full screen
 *
 * Two mechanisms, styled to look identical to the player:
 *
 *   1. :fullscreen        the native Fullscreen API (desktop, Android,
 *                         iPad). Vendor-prefixed selectors are listed
 *                         separately because an unrecognised selector
 *                         invalidates a whole rule in CSS.
 *   2. --pseudo-fullscreen  the fallback for iPhone Safari, which has
 *                         never supported the Fullscreen API.
 * ===================================================================*/

.wtc-game:fullscreen {
	width: 100%;
	height: 100%;
	max-height: none;
	min-height: 0;
	border-radius: 0;
}

.wtc-game:-webkit-full-screen {
	width: 100%;
	height: 100%;
	max-height: none;
	min-height: 0;
	border-radius: 0;
}

.wtc-game:-ms-fullscreen {
	width: 100%;
	height: 100%;
	max-height: none;
	min-height: 0;
	border-radius: 0;
}

/* The backdrop sits behind the element in native full screen. Match the
   game background so letterboxing does not flash black. */
.wtc-game:fullscreen::backdrop {
	background: var(--wtc-bg);
}

.wtc-game:-webkit-full-screen::backdrop {
	background: var(--wtc-bg);
}

/* Fallback path: cover the viewport ourselves. */
.wtc-game--pseudo-fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	/* Dynamic viewport height accounts for mobile browser chrome that
	   collapses on scroll. Falls back to vh where dvh is unsupported. */
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	max-height: none;
	margin: 0;
	border-radius: 0;
	z-index: 999999;
}

/* Respect notches and home indicators on modern phones. */
@supports (padding: env(safe-area-inset-top)) {
	.wtc-game--pseudo-fullscreen {
		padding-top:    env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		padding-left:   env(safe-area-inset-left);
		padding-right:  env(safe-area-inset-right);
	}
}

/* While the fallback is active the page behind must not scroll. */
body.wtc-pseudo-fullscreen-lock {
	overscroll-behavior: none;
	touch-action: none;
}

/* In full screen there is more room, so widen the tray slightly on large
   screens. Deliberately constrained to the same breakpoint that the
   stacked mobile layout uses, otherwise this more specific rule would
   override it and force a sidebar onto a phone. */
@media (min-width: 721px) and (min-aspect-ratio: 4/5) {
	.wtc-game--fullscreen .wtc-main {
		grid-template-columns: 1fr 260px;
	}
}

/* =====================================================================
 * Phase B: orientation hint
 * ===================================================================*/
.wtc-orientation-hint {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100% - 28px);
	padding: 10px 12px 10px 14px;
	background: rgba(31, 42, 48, 0.92);
	color: #fff;
	border-radius: 24px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	box-shadow: 0 6px 18px rgba(15, 22, 28, 0.28);
	z-index: 76;
	animation: wtc-orient-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wtc-orientation-hint__icon {
	font-size: 17px;
	line-height: 1;
	animation: wtc-orient-spin 2.6s ease-in-out infinite;
}

.wtc-orientation-hint__text {
	flex: 1;
	min-width: 0;
}

.wtc-orientation-hint__dismiss {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	padding: 0;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wtc-orientation-hint__dismiss:hover,
.wtc-orientation-hint__dismiss:focus {
	background: rgba(255, 255, 255, 0.34);
	outline: none;
}

@keyframes wtc-orient-in {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes wtc-orient-spin {
	0%, 70%, 100% { transform: rotate(0deg); }
	85%           { transform: rotate(90deg); }
}

/* If the tap instruction is showing too, stack the orientation hint above
   it so neither is hidden. */
@media (max-width: 480px) {
	/* The tap instruction moves to the bottom on narrow screens, so lift
	   the orientation hint clear of it. */
	.wtc-orientation-hint {
		bottom: 60px;
	}
}

/* =====================================================================
 * Phase B: touch target sizing
 *
 * Pointer-coarse devices get larger controls. The WCAG 2.5.5 guideline
 * and both platform vendors converge on roughly 44px minimum.
 * ===================================================================*/
@media (pointer: coarse) {
	.wtc-btn--icon {
		width: 44px;
		height: 44px;
		padding: 10px;
	}

	.wtc-btn {
		min-height: 44px;
	}

	.wtc-card {
		padding: 12px;
		min-height: 56px;
	}

	.wtc-tap-instruction__cancel,
	.wtc-orientation-hint__dismiss {
		width: 32px;
		height: 32px;
	}

	.wtc-info__close {
		width: 44px;
		height: 44px;
	}

	/* Sliders are easier to grab with a taller track. */
	.wtc-sim__slider {
		height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wtc-orientation-hint,
	.wtc-orientation-hint__icon {
		animation: none !important;
	}
}

/* =====================================================================
 * Phase C: resume prompt
 *
 * Shown when a player returns to an unfinished build. Deliberately calm
 * rather than alarming: nothing is lost either way, so it should read as
 * an offer rather than a warning.
 * ===================================================================*/
.wtc-resume {
	position: absolute;
	inset: 0;
	background: rgba(15, 22, 28, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 210;
	animation: wtc-resume-fade 0.25s ease;
}

.wtc-resume__card {
	background: var(--wtc-surface);
	border-radius: 12px;
	max-width: 380px;
	width: 100%;
	padding: 24px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(15, 22, 28, 0.35);
	animation: wtc-resume-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.wtc-resume__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 500;
	color: var(--wtc-ink);
}

.wtc-resume__body {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wtc-ink-soft);
}

.wtc-resume__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wtc-resume__continue {
	background: var(--wtc-primary);
	color: #fff;
	border-color: var(--wtc-primary);
	justify-content: center;
	font-weight: 500;
	padding: 11px 16px;
}

.wtc-resume__continue:hover {
	background: var(--wtc-accent);
	border-color: var(--wtc-accent);
}

.wtc-resume__fresh {
	justify-content: center;
	padding: 10px 16px;
}

@keyframes wtc-resume-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wtc-resume-pop {
	0%   { transform: scale(0.9); opacity: 0; }
	100% { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.wtc-resume,
	.wtc-resume__card {
		animation: none !important;
	}
}

/* =====================================================================
 * V3: Explore parts button
 *
 * Added to the top bar once construction finishes. Its purpose is to
 * guarantee a keyboard route into the information panel, since focusing
 * SVG groups is not reliable in every browser.
 * ===================================================================*/
.wtc-explore-btn {
	margin-left: auto;
	font-size: 13px;
	font-weight: 500;
	border-color: var(--wtc-accent);
	color: var(--wtc-primary);
	animation: wtc-explore-appear 0.4s ease both;
}

.wtc-explore-btn:hover,
.wtc-explore-btn:focus-visible {
	background: var(--wtc-accent);
	color: #fff;
}

@keyframes wtc-explore-appear {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.wtc-explore-btn { animation: none; }
}