#sw-root, #sw-root *, #sw-overlay, #sw-overlay * { box-sizing: border-box; }

/* Bezpiecznik: kilka elementów w tym arkuszu ustawia display na sztywno
   (np. flex/inline-block), co bez tej reguły przebija natywne domyślne
   "display:none" atrybutu [hidden] i pokazuje element mimo hidden=true. */
#sw-overlay [hidden] { display: none !important; }

#sw-root {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99998;
}
#sw-root.sw-pos-left { left: 0; }
#sw-root.sw-pos-right { right: 0; }

#sw-tab {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	background: linear-gradient(160deg, var(--sw-tab-accent, #1b6fd6), var(--sw-tab-accent, #1b6fd6));
	color: #fff;
	border: none;
	padding: 18px 10px;
	border-radius: 0 14px 14px 0;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	box-shadow: 2px 4px 14px rgba(0,0,0,.25);
	transition: filter .2s ease;
}
#sw-tab:hover { filter: brightness(1.08); }
#sw-root.sw-pos-right #sw-tab { border-radius: 14px 0 0 14px; transform: rotate(180deg); }

/* Pełnoekranowe okno gry - wyśrodkowane na całej stronie, z przyciemnionym
   i rozmytym tłem, żeby koło robiło wrażenie osobnej "areny gry", a nie
   zwykłego panelu bocznego. */
#sw-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(8, 14, 24, .6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
#sw-overlay.sw-open { display: flex; }

/* Mini-awatar czatu (wtyczka SmartExcel - Mini Awatar) pływa w tym samym
   rogu ekranu co zakładka koła i potrafi przechwycić kliknięcie na
   przyciski koła, gdy oba widgety się nakładają - chowamy go na czas
   otwarcia koła. Selektor ID pasuje do aktualnej wersji tamtej wtyczki;
   jeśli kiedyś zmieni strukturę, ta reguła po prostu nic nie dopasuje. */
body.sw-wheel-open #sma-widget { display: none !important; }

@keyframes sw-panel-in {
	from { opacity: 0; transform: scale(.9) translateY(10px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Panel: nowoczesna, przezroczysta karta "szkła" - domyślnie bez tła, chyba że
   admin ustawi własny kolor/grafikę (patrz frontend.js). Wysokość ograniczona,
   żeby koło zawsze mieściło się w całości, bez przewijania. */
#sw-panel {
	position: relative;
	width: 760px;
	max-width: 100%;
	max-height: min(820px, 92vh);
	display: flex;
	flex-direction: column;
	padding: 20px 22px 22px;
	border-radius: 26px;
	background: rgba(255, 255, 255, .14);
	background-size: cover;
	background-position: center;
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .35);
	box-shadow: 0 25px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
	overflow: hidden auto;
	animation: sw-panel-in .35s cubic-bezier(.2, .8, .3, 1.1);
}

/* Treść panelu (wybór poziomu + koło) - domyślnie (wąskie okno/telefon) w
   jednej kolumnie: poziomy jako zakładki NAD kołem. Od 700px szerokości
   (patrz media query niżej) poziomy przechodzą w boczne menu OBOK koła -
   nie zabierają wtedy wysokości nad kołem, co jest kluczowe na niskich
   oknach (krótki ekran, przeglądarka bez pełnej wysokości). Górny margines
   celowo odsuwa całość poniżej przycisków "?"/"×" w rogach panelu, żeby
   zakładki nigdy z nimi nie kolidowały (patrz też #sw-help/#sw-close).*/
#sw-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	gap: 10px;
	margin-top: 40px;
}

/* Wybór poziomu. Zestaw przycisków (nie natywny <select>) - odporny na
   globalne style motywu/page buildera. Reguły z !important, bo motywy WP
   (np. OceanWP) potrafią stylować przyciski z wyższym priorytetem niż
   selektory wtyczki. */
#sw-level-group {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	width: 100% !important;
	flex: none !important;
}
.sw-level-btn {
	all: unset;
	box-sizing: border-box !important;
	flex: 1 1 0 !important;
	min-width: 90px;
	text-align: center !important;
	padding: 11px 10px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
	background: rgba(255, 255, 255, .55) !important;
	color: #16324a !important;
	font-family: inherit;
	font-weight: 600 !important;
	font-size: 12.5px !important;
	line-height: 1.3 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer !important;
	transition: background .15s ease, color .15s ease;
}
.sw-level-btn:hover { background: rgba(255, 255, 255, .75) !important; }
.sw-level-btn.sw-active {
	background: var(--sw-accent, #1b6fd6) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, .85) !important;
}
.sw-level-btn.sw-locked { color: #4a4a4a !important; background: rgba(255, 255, 255, .32) !important; }
.sw-level-btn.sw-locked.sw-active { background: #8a93a3 !important; color: #fff !important; }
.sw-lock-dot { filter: grayscale(1); }
.sw-level-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 1px; }

#sw-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .55);
	color: #16324a;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
#sw-close:hover { background: rgba(255, 255, 255, .85); }

#sw-help {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .55);
	color: #16324a;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
#sw-help:hover { background: rgba(255, 255, 255, .85); }

#sw-history-trigger {
	position: absolute;
	top: 16px;
	left: 58px;
	z-index: 3;
	height: 34px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-radius: 17px;
	border: 1px solid rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .55);
	color: #16324a;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
	white-space: nowrap;
}
#sw-history-trigger:hover { background: rgba(255, 255, 255, .85); }

/* Odznaka/przycisk koła nagród - widoczny tylko, gdy dostępny (patrz
   frontend.js), w normalnym przepływie dokumentu tuż nad #sw-body (stąd
   nieco większy zapas w formule szerokości #sw-wheel-area niżej, żeby nawet
   z tym banerem koło nigdy nie powodowało przewijania). */
#sw-reward-trigger {
	display: block;
	margin: 0 auto 4px;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 215, 120, .85);
	background: linear-gradient(135deg, #c9a227, #e9d27a);
	color: #3a2a02;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	animation: sw-reward-pulse 1.8s ease-in-out infinite;
}
@keyframes sw-reward-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

#sw-wheel-col {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Koło - zawsze w całości widoczne: kwadrat, którego bok liczony jest z
   min() trzech ograniczeń naraz - maksymalny projektowy rozmiar (520px),
   dostępna szerokość kolumny (100%) i dostępna WYSOKOŚĆ ekranu (92vh minus
   miejsce zajęte przez resztę panelu). Dzięki temu koło samo się zmniejsza
   na niskich oknach zamiast wypychać pole licencji poza widoczny obszar. */
#sw-wheel-area {
	position: relative;
	width: min(520px, 100%, calc(92vh - 300px));
	aspect-ratio: 1 / 1;
	margin: 4px auto;
}
#sw-canvas {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
	box-shadow: 0 14px 36px rgba(0, 0, 0, .4), inset 0 0 0 8px rgba(255, 255, 255, .9);
	transition: transform 4s cubic-bezier(.17, .67, .16, .99);
}

#sw-spin-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 26%;
	height: 26%;
	border-radius: 50%;
	border: 5px solid #fff;
	background: var(--sw-accent, #1b6fd6);
	background-image: linear-gradient(145deg, rgba(255, 255, 255, .35), rgba(0, 0, 0, .15));
	color: #fff;
	font-weight: 700;
	font-size: clamp(12px, 3.2vh, 18px);
	line-height: 1.3;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
	transition: transform .15s ease, box-shadow .15s ease;
}
#sw-spin-btn:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
#sw-spin-btn:disabled { opacity: .5; cursor: not-allowed; }

#sw-pointer {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 28px solid #e63946;
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4));
	z-index: 2;
}

/* Ekran blokady poziomu - przykrywa koło, kiedy poziom nie jest odblokowany. */
#sw-lock-screen {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 20px;
	border-radius: 50%;
	background: rgba(10, 16, 26, .72);
	color: #fff;
}
.sw-lock-icon { font-size: 34px; }
#sw-lock-message { margin: 0; font-size: 13px; font-weight: 600; max-width: 220px; }
.sw-btn-badge {
	background: linear-gradient(135deg, #c9a227, #e9d27a);
	color: #1a1a1a !important;
	margin-top: 6px;
}

#sw-limit-info {
	flex: none;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: #ffffff;
	color: #1b6e2f;
	border: 1.5px solid #cfe8d6;
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1px;
	text-shadow: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
	margin: 0 auto 10px;
	white-space: nowrap;
	transition: background-color .2s, border-color .2s, color .2s;
}
#sw-limit-info:empty { display: none; }
#sw-limit-info strong { font-size: 14px; font-weight: 800; }
#sw-limit-info.sw-limit-info--empty {
	background: #fdf1f1;
	color: #a3201e;
	border-color: #f3c6c4;
}

/* Klucz dostępu do gry */
#sw-license-box {
	flex: none;
	border-top: 1px solid rgba(255, 255, 255, .3);
	padding-top: 10px;
	text-align: center;
}
#sw-license-toggle {
	all: unset;
	cursor: pointer;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: underline;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
#sw-license-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 10px;
}
#sw-license-input, #sw-license-name, #sw-license-email {
	flex: 1 1 160px;
	min-width: 0;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .85);
	font-size: 13px;
}
#sw-license-submit {
	flex: none;
	padding: 9px 16px;
	border: none;
	border-radius: 10px;
	background: var(--sw-accent, #1b6fd6);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}
#sw-license-submit:disabled { opacity: .6; cursor: not-allowed; }
#sw-license-message {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.sw-license-ok { color: #b7f5c2; }
.sw-license-error { color: #ffb4b4; }

#sw-modal-overlay {
	display: none;
	position: fixed; inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
}
#sw-modal-overlay.sw-open { display: flex; }

#sw-modal {
	background: #fff;
	border-radius: 16px;
	max-width: 480px;
	width: 92vw;
	max-height: 85vh;
	overflow-y: auto;
	padding: 30px 25px;
	position: relative;
}
#sw-modal-close { position: absolute; top: 8px; right: 14px; background: none; border: none; font-size: 26px; cursor: pointer; }
#sw-modal-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 26px 8px 0; }
#sw-modal-category { margin: 0 0 4px; font-size: 13px; color: #5a6b7a; font-weight: 600; }
#sw-modal-title { margin: 2px 0 10px; }
#sw-modal-image { width: 100%; border-radius: 8px; margin-bottom: 14px; }
.sw-modal-section-label { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a99a6; }
.sw-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; background: #eef3fb; color: #1b6fd6; font-size: 12px; font-weight: 700; }
.sw-badge-nr { background: #f1f3f5; color: #495b68; font-family: monospace; letter-spacing: .02em; }
.sw-badge-poziom { background: #e8f6ec; color: #1a7e34; }
.sw-btn { display: inline-block; margin-top: 12px; padding: 10px 18px; background: var(--sw-accent, #1b6fd6); color: #fff !important; border-radius: 6px; text-decoration: none; font-weight: 600; }
#sw-modal-logo { display: block; max-width: 140px; max-height: 44px; width: auto; height: auto; object-fit: contain; margin: 18px auto 0; }

#sw-history-overlay {
	display: none;
	position: fixed; inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
#sw-history-overlay.sw-open { display: flex; }

#sw-history-modal {
	background: #fff;
	border-radius: 16px;
	max-width: 560px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	padding: 30px 28px;
	position: relative;
}
#sw-history-modal h2 { margin: 0 0 4px; font-size: 22px; padding-right: 24px; }
.sw-history-level-name { margin: 0 0 16px; font-size: 13px; color: #5a6b7a; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

#sw-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sw-history-row { display: flex; align-items: stretch; gap: 8px; }
.sw-history-item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	padding: 10px 12px;
	background: #f8fafc;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	font: inherit;
}
.sw-history-item:hover { background: #eef3f8; border-color: #cfdbe6; }
.sw-history-swatch { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.sw-history-title { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #16324a; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-history-date { flex: 0 0 auto; font-size: 12px; color: #7a8b99; white-space: nowrap; }
.sw-history-download {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #f8fafc;
	color: #1b6fd6;
	font-size: 16px;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.sw-history-download:hover { background: #eef3f8; border-color: #cfdbe6; }

#sw-history-empty { font-size: 14px; color: #7a8b99; }

#sw-instructions-overlay {
	display: none;
	position: fixed; inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
#sw-instructions-overlay.sw-open { display: flex; }

#sw-instructions-modal {
	background: #fff;
	border-radius: 16px;
	max-width: 620px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	padding: 30px 28px;
	position: relative;
	color: #1a2733;
}
#sw-instructions-close { position: absolute; top: 8px; right: 14px; background: none; border: none; font-size: 26px; cursor: pointer; color: #1a2733; }
#sw-instructions-modal h2 { margin: 0 0 14px; font-size: 22px; padding-right: 24px; }
#sw-instructions-modal h3 { margin: 20px 0 8px; font-size: 16px; color: #1b6fd6; }
#sw-instructions-modal h3:first-of-type { margin-top: 0; }
#sw-instructions-modal p, #sw-instructions-modal li { font-size: 14px; line-height: 1.55; }
#sw-instructions-modal ul { margin: 6px 0 6px 20px; padding: 0; }
#sw-instructions-modal strong { color: #0f2f4a; }

/* Koło nagród - celowo wizualnie ODRÓŻNIONE od głównego koła (złoty motyw
   zamiast niebieskiego akcentu), żeby od razu było widać, że to bonus, a
   nie kolejny poziom zadań. */
#sw-reward-overlay {
	display: none;
	position: fixed; inset: 0;
	background: rgba(0,0,0,.6);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
#sw-reward-overlay.sw-open { display: flex; }

#sw-reward-modal {
	background: linear-gradient(165deg, #2b1f05, #4a3208);
	border: 1px solid rgba(233, 210, 122, .5);
	border-radius: 20px;
	max-width: 460px;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	padding: 28px 26px;
	position: relative;
	color: #fff2d0;
	text-align: center;
	box-shadow: 0 25px 60px rgba(0, 0, 0, .5);
}
#sw-reward-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 26px; cursor: pointer; color: #fff2d0; }
#sw-reward-modal h2 { margin: 4px 0 6px; font-size: 22px; }
#sw-reward-intro { margin: 0 0 16px; font-size: 13.5px; color: #e9d27a; }

#sw-reward-wheel-area {
	position: relative;
	width: min(300px, 100%);
	aspect-ratio: 1 / 1;
	margin: 4px auto 16px;
}
#sw-reward-canvas {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
	box-shadow: 0 14px 36px rgba(0, 0, 0, .5), inset 0 0 0 6px rgba(255, 242, 208, .9);
	transition: transform 4s cubic-bezier(.17, .67, .16, .99);
}
#sw-reward-spin-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border: 4px solid #fff2d0;
	background: linear-gradient(145deg, #c9a227, #e9d27a);
	color: #3a2a02;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
	transition: transform .15s ease;
}
#sw-reward-spin-btn:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.06); }
#sw-reward-spin-btn:disabled { opacity: .5; cursor: not-allowed; }
#sw-reward-pointer {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 22px solid #fff2d0;
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
	z-index: 2;
}
#sw-reward-result { min-height: 20px; font-size: 14px; font-weight: 700; margin: 0; }

/* Od 700px szerokości panelu jest miejsce na boczne menu poziomów obok koła
   zamiast zakładek nad nim - poziomy nie zabierają wtedy wysokości, którą
   koło może wykorzystać (kluczowe na niskich/krótkich oknach). */
@media (min-width: 700px) {
	#sw-panel { width: 860px; }
	#sw-body {
		flex-direction: row;
		align-items: stretch;
		gap: 20px;
	}
	#sw-level-group {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		width: 200px !important;
		flex: none !important;
	}
	.sw-level-btn {
		flex: 0 0 auto !important;
		width: 100% !important;
		text-align: left !important;
		white-space: normal;
		padding: 14px 16px !important;
	}
	/* Bez zakładek nad kołem zostaje więcej wysokości do wykorzystania -
	   mniejszy rezerwowany zapas niż w trybie zakładek nad kołem. */
	#sw-wheel-area {
		width: min(560px, 100%, calc(92vh - 220px));
	}
}

@media (max-width: 480px) {
	#sw-overlay { padding: 12px; }
	#sw-panel { width: 100%; }
}