/* ============================================================
   Word Search Generator – Wykreślanka  v1.1.0
   Arkusz stylów. Wszystkie klasy mają prefiks .wsg-,
   aby nie kolidować ze stylami motywu WordPress.
   ============================================================ */

/* ---------- Kontener główny (wyśrodkowany, responsywny) ---------- */
.wsg-app {
	--wsg-accent: #4f46e5;        /* kolor akcentu (przyciski, ramki) */
	--wsg-accent-dark: #4338ca;
	--wsg-accent-soft: #eef2ff;
	--wsg-ink: #1e293b;           /* kolor tekstu */
	--wsg-muted: #64748b;         /* tekst pomocniczy */
	--wsg-bg: #ffffff;
	--wsg-border: #e2e8f0;
	--wsg-loop: #16a34a;          /* kolor pętli rozwiązania */
	--wsg-loop-soft: #f0fdf4;

	max-width: 860px;
	margin: 2rem auto;
	padding: 0 1rem;
	font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
	color: var(--wsg-ink);
	box-sizing: border-box;
}
.wsg-app *, .wsg-app *::before, .wsg-app *::after {
	box-sizing: inherit;
}

/* ---------- Panel konfiguracji ---------- */
.wsg-panel {
	position: relative;
	background: var(--wsg-bg);
	border: 1px solid var(--wsg-border);
	border-radius: 18px;
	padding: 1.9rem;
	box-shadow: 0 4px 24px rgba(30, 41, 59, 0.07);
	overflow: hidden;
}

/* Dekoracyjny pasek gradientu u góry panelu. */
.wsg-panel::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: linear-gradient(90deg, #4f46e5, #7c3aed, #16a34a);
}

.wsg-title {
	margin: 0.4rem 0 0.35rem;
	font-size: 1.7rem;
	font-weight: 800;
	text-align: center;
	letter-spacing: 0.02em;
	color: var(--wsg-ink);
}

.wsg-tagline {
	margin: 0 0 1.4rem;
	text-align: center;
	color: var(--wsg-muted);
	font-size: 0.92rem;
}

.wsg-subtitle {
	margin: 1.6rem 0 0.75rem;
	font-size: 1.15rem;
	font-weight: 700;
	text-align: center;
}

.wsg-label {
	display: block;
	margin: 0 0 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.wsg-label-inline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	cursor: pointer;
}

.wsg-hint {
	font-weight: 400;
	color: var(--wsg-muted);
	font-size: 0.8rem;
}

/* ---------- Pola formularza ---------- */
.wsg-textarea,
.wsg-number,
.wsg-select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wsg-border);
	border-radius: 10px;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--wsg-ink);
	background: #f8fafc;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.wsg-textarea:focus,
.wsg-number:focus,
.wsg-select:focus {
	outline: none;
	border-color: var(--wsg-accent);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.wsg-textarea {
	resize: vertical;
	min-height: 90px;
	text-transform: uppercase; /* wizualna sugestia wielkich liter */
}

.wsg-number-small {
	width: 72px;
	padding: 0.35rem 0.5rem;
}

/* Opcje w siatce – responsywne */
.wsg-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.wsg-option-checkbox {
	display: flex;
	align-items: end;
	padding-bottom: 0.4rem;
}

/* ---------- Przyciski ---------- */
.wsg-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.25rem;
}

.wsg-btn {
	padding: 0.68rem 1.5rem;
	border: none;
	border-radius: 11px;
	font-size: 0.95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
}

.wsg-btn:active { transform: translateY(1px); }
.wsg-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.wsg-btn-primary {
	background: linear-gradient(135deg, var(--wsg-accent), #7c3aed);
	color: #fff;
	box-shadow: 0 3px 12px rgba(79, 70, 229, 0.35);
}
.wsg-btn-primary:hover:not(:disabled) {
	background: linear-gradient(135deg, var(--wsg-accent-dark), #6d28d9);
	box-shadow: 0 5px 16px rgba(79, 70, 229, 0.45);
}

.wsg-btn-secondary {
	background: var(--wsg-accent-soft);
	color: var(--wsg-accent);
}
.wsg-btn-secondary:hover:not(:disabled) { background: #e0e7ff; }

.wsg-btn-outline {
	background: transparent;
	color: var(--wsg-ink);
	border: 1px solid var(--wsg-border);
}
.wsg-btn-outline:hover:not(:disabled) {
	border-color: var(--wsg-accent);
	color: var(--wsg-accent);
	background: var(--wsg-accent-soft);
}

/* ---------- Komunikaty ---------- */
.wsg-message {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	background: #fef9c3;
	color: #854d0e;
	font-size: 0.9rem;
	text-align: center;
}

/* ---------- Pasek rozgrywki (zegar + licznik) ---------- */
.wsg-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	justify-content: center;
	align-items: center;
	margin-top: 1.4rem;
}

.wsg-stat {
	padding: 0.4rem 1rem;
	background: var(--wsg-bg);
	border: 1px solid var(--wsg-border);
	border-radius: 999px;
	font-size: 0.9rem;
	color: var(--wsg-muted);
	box-shadow: 0 2px 8px rgba(30, 41, 59, 0.05);
}

.wsg-stat strong {
	color: var(--wsg-ink);
	font-variant-numeric: tabular-nums;
}

.wsg-stat-hint {
	width: 100%;
	text-align: center;
	font-size: 0.8rem;
	color: var(--wsg-muted);
}

/* ---------- Plansza ---------- */
.wsg-board-wrap {
	display: flex;
	justify-content: center;
	margin-top: 1.1rem;
	overflow-x: auto; /* na wąskich ekranach plansza przewija się poziomo */
}

.wsg-board {
	position: relative; /* dla nakładki SVG z pętlami */
	display: inline-block;
}

.wsg-grid {
	display: grid;
	gap: 0;
	border: 2px solid var(--wsg-ink);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	touch-action: none; /* umożliwia zaznaczanie palcem bez przewijania strony */
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(30, 41, 59, 0.10);
}

.wsg-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wsg-ink);
	border: 1px solid #f1f5f9;
	user-select: none;
	-webkit-user-select: none;
	transition: color 0.25s, background 0.15s;
}

/* Podpowiedź wizualna przy najechaniu (tylko w trakcie gry). */
.wsg-board:not(.wsg-solved) .wsg-cell:hover { background: var(--wsg-accent-soft); }

/* Komórki aktualnie zaznaczane przeciągnięciem. */
.wsg-cell.wsg-sel {
	background: var(--wsg-accent) !important;
	color: #fff;
}

/* Komórki znalezionych słów – delikatne zielone tło. */
.wsg-cell.wsg-found { background: var(--wsg-loop-soft); }

/* Widok rozwiązania: litery "tła" bledną, litery słów pozostają wyraźne */
.wsg-board.wsg-solved .wsg-cell.wsg-filler { color: #cbd5e1; }
.wsg-board.wsg-solved .wsg-cell.wsg-word   { color: var(--wsg-ink); background: var(--wsg-loop-soft); }

/* ---------- Nakładka SVG z pętlami ---------- */
.wsg-loops {
	position: absolute;
	inset: 2px; /* kompensacja ramki siatki (2px), aby pętle idealnie pokrywały komórki */
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	pointer-events: none;
}

/* Warstwa pętli rozwiązania – widoczna dopiero po "Pokaż Rozwiązanie". */
.wsg-sol-loops { opacity: 0; transition: opacity 0.3s; }
.wsg-board.wsg-solved .wsg-sol-loops { opacity: 1; }

/* Po pokazaniu rozwiązania chowamy pętle gracza (dublowałyby się). */
.wsg-board.wsg-solved .wsg-found-loops { opacity: 0; }

/* Pętle znalezionych słów – animacja "rysowania" (pathLength=100 w SVG). */
.wsg-found-loops rect {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: wsg-rysuj 0.55s ease-out forwards;
}

@keyframes wsg-rysuj {
	to { stroke-dashoffset: 0; }
}

/* ---------- Baner gratulacyjny ---------- */
.wsg-congrats {
	margin: 1.4rem auto 0;
	max-width: 480px;
	padding: 1rem 1.4rem;
	text-align: center;
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #16a34a, #15803d);
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35);
	animation: wsg-wskocz 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wsg-wskocz {
	from { opacity: 0; transform: translateY(12px) scale(0.95); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Lista słów ---------- */
.wsg-wordlist-wrap { text-align: center; }

.wsg-wordlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.wsg-wordlist li {
	padding: 0.38rem 0.95rem;
	background: #f1f5f9;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	transition: background 0.3s, color 0.3s, opacity 0.3s;
}

/* Słowo znalezione przez gracza – skreślone, zielone. */
.wsg-wordlist li.wsg-done {
	text-decoration: line-through;
	background: var(--wsg-loop-soft);
	color: var(--wsg-loop);
	opacity: 0.85;
}

/* ---------- Sekcja pobierania ---------- */
.wsg-downloads { text-align: center; }

/* Karta pakietu hurtowego */
.wsg-bulk {
	margin-top: 1.5rem;
	padding: 1.4rem;
	background: var(--wsg-bg);
	border: 1px dashed var(--wsg-accent);
	border-radius: 14px;
}

.wsg-bulk-title {
	margin: 0 0 0.3rem;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--wsg-accent);
}

.wsg-bulk-desc {
	margin: 0 0 1rem;
	font-size: 0.87rem;
	color: var(--wsg-muted);
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

.wsg-bulk-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.6rem;
	justify-content: center;
	align-items: center;
}

/* ---------- Responsywność (małe ekrany) ---------- */
@media (max-width: 480px) {
	.wsg-panel { padding: 1.2rem; }
	.wsg-cell { width: 26px; height: 26px; font-size: 0.8rem; }
	.wsg-btn { width: 100%; }
	.wsg-bulk-row { flex-direction: column; }
}