/* ===========================================================
   DEFENSIVE RESET — neutralises theme/page-builder global styles
   (buttons, images, selects) that would otherwise break this
   plugin's layout on any WordPress theme.
   =========================================================== */
.pw-gallery button,
.pw-player-overlay button,
.pw-overlay button,
.pw-peek-modal button{
	all: unset;
	box-sizing: border-box !important;
	cursor: pointer;
}
.pw-gallery img,
.pw-player-overlay img,
.pw-peek-modal img{
	max-width: none !important;
	border: none !important;
	box-shadow: none !important;
	vertical-align: top !important;
}
.pw-gallery select{
	all: unset;
	box-sizing: border-box !important;
}
.pw-gallery, .pw-gallery *,
.pw-player-overlay, .pw-player-overlay *,
.pw-overlay, .pw-overlay *,
.pw-peek-modal, .pw-peek-modal *{
	box-sizing: border-box !important;
}
.pw-player-overlay,
.pw-peek-modal,
.pw-overlay{
	display: none;
}

.pw-gallery{
	--pw-primary: #2f7d7d;
	--pw-primary-dark: #1f5757;
	--pw-accent: #f2994a;
	--pw-accent-dark: #d97c2b;
	--pw-success: #4caf6d;
	--pw-bg-card: #ffffff;
	--pw-text: #1f2933;
	--pw-muted: #6b7684;
	--pw-toolbar: #3d6f96;
	--pw-toolbar-dark: #2d5876;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--pw-text);
	max-width: 1100px;
	margin: 0 auto;
}
.pw-gallery *{ box-sizing: border-box; }

/* ---------------- Gallery grid ---------------- */
.pw-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 24px;
}
.pw-card{
	background: var(--pw-bg-card);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 0 rgba(20,30,40,0.06), 0 10px 22px rgba(20,30,40,0.14);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	border: 2px solid rgba(20,30,40,0.09);
	display: flex;
	flex-direction: column;
}
.pw-card:hover{
	transform: translateY(-5px);
	box-shadow: 0 8px 0 rgba(20,30,40,0.08), 0 20px 34px rgba(20,30,40,0.2);
}
.pw-card-thumb{
	width: 100% !important;
	aspect-ratio: 4/3;
	overflow: hidden !important;
	background: #eef1f3;
	line-height: 0 !important;
	position: relative;
}
.pw-card-thumb img{
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	margin: 0 !important;
	padding: 0 !important;
}
.pw-card-title{
	padding: 14px 16px 4px;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.3;
}
.pw-card-play{
	margin: 10px 16px 16px !important;
	background: var(--pw-accent) !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 16px !important;
	border-radius: 10px !important;
	font-weight: 800 !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.2px;
	box-shadow: 0 3px 0 var(--pw-accent-dark);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
	display: inline-flex !important;
	width: auto !important;
	align-items: center !important;
	gap: 7px !important;
	justify-content: center !important;
	margin-top: auto !important;
}
.pw-card-play:hover{ background: var(--pw-accent-dark) !important; }
.pw-card-play:active{ transform: translateY(2px); box-shadow: 0 1px 0 var(--pw-accent-dark); }

/* ---------------- Full-screen player ---------------- */
.pw-player-overlay{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: #f4f6f4;
	flex-direction: column;
}
.pw-player-overlay.open{ display: flex; }

.pw-toolbar{
	flex: 0 0 60px !important;
	height: 60px !important;
	min-height: 60px !important;
	max-height: 60px !important;
	width: 100% !important;
	background: linear-gradient(180deg, var(--pw-toolbar), var(--pw-toolbar-dark)) !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 2px !important;
	padding: 0 8px !important;
	margin: 0 !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	list-style: none !important;
	position: relative !important;
	overflow: hidden !important;
	overflow-x: auto !important;
}
.pw-tool-btn{
	background: transparent !important;
	border: none !important;
	color: #fff !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	max-width: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	transition: background 0.15s ease;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	overflow: hidden !important;
	line-height: 0 !important;
}
.pw-tool-btn.pw-labeled{
	width: auto !important;
	max-width: none !important;
	height: 44px !important;
	max-height: 44px !important;
	min-height: 44px !important;
	flex-direction: row !important;
	padding: 5px 12px !important;
	overflow: visible !important;
}
.pw-tool-btn.pw-labeled svg{ display: none !important; }
.pw-tool-btn.pw-labeled .pw-btn-label{
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	letter-spacing: 0.2px;
}
.pw-tool-btn:hover{ background: rgba(255,255,255,0.15) !important; }
.pw-tool-btn svg{
	width: 19px !important;
	height: 19px !important;
	min-width: 19px !important;
	min-height: 19px !important;
	max-width: 19px !important;
	max-height: 19px !important;
	display: block !important;
	flex-shrink: 0 !important;
	position: static !important;
	vertical-align: middle !important;
}
.pw-player-title{
	font-weight: 700 !important;
	font-size: 0.98rem !important;
	color: #fff !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
	margin-left: 4px !important;
	flex: 0 1 auto !important;
}
.pw-toolbar-spacer{ flex: 1 1 auto !important; }
.pw-timer-wrap{
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 0.88rem;
	color: #fff !important;
	padding: 0 10px 0 4px !important;
	margin: 0 !important;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.15s ease;
	flex: 0 0 auto !important;
}
.pw-timer-wrap b{ color: #fff !important; }

.pw-play-area{
	flex: 1 1 auto !important;
	min-height: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	position: relative !important;
	overflow: auto !important;
	background-color: #7c96ab;
	background-image:
		radial-gradient(circle at 18% 28%, rgba(255,255,255,0.10) 0 45px, transparent 46px),
		radial-gradient(circle at 68% 62%, rgba(0,0,0,0.07) 0 55px, transparent 56px),
		radial-gradient(circle at 38% 82%, rgba(255,255,255,0.07) 0 38px, transparent 39px),
		radial-gradient(circle at 85% 15%, rgba(0,0,0,0.05) 0 40px, transparent 41px);
	background-size: 340px 340px, 300px 300px, 380px 380px, 260px 260px;
}
.pw-piece-canvas{
	position: absolute;
	touch-action: none;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28));
}

/* ---------------- Peek modal (large preview) ---------------- */
.pw-peek-modal{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10,14,18,0.82);
	z-index: 99995;
	align-items: center;
	justify-content: center;
	padding: 30px;
}
.pw-peek-modal.show{ display: flex; }
.pw-peek-modal-inner{
	position: relative;
	max-width: 90vw;
	max-height: 88vh;
}
.pw-peek-modal-inner img{
	max-width: 90vw;
	max-height: 88vh;
	display: block;
	border-radius: 10px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.pw-peek-close{
	position: absolute;
	top: -18px; right: -18px;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: #fff;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	color: #1f2933;
}

/* ---------------- Completion overlay ---------------- */
.pw-overlay{
	position: fixed; inset: 0; background: rgba(10,12,16,0.88);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 999999;
}
.pw-overlay.show{ opacity: 1; pointer-events: auto; }
.pw-overlay-card{
	background: #fff; border-radius: 20px; padding: 30px 32px; text-align: center;
	max-width: 460px; width: 92%;
	transform: scale(0.85) translateY(20px);
	transition: transform 0.4s cubic-bezier(0.2,0.9,0.3,1.3);
	position: relative;
	max-height: 90vh;
	overflow-y: auto;
}
.pw-overlay.show .pw-overlay-card{ transform: scale(1) translateY(0); }
.pw-reveal{
	width: 180px; height: 180px; margin: 0 auto 16px; border-radius: 14px;
	background-size: cover; background-position: center;
	clip-path: circle(0% at 50% 50%);
	transition: clip-path 0.9s cubic-bezier(0.2,0.8,0.2,1);
	box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.pw-overlay.show .pw-reveal{ clip-path: circle(75% at 50% 50%); }
.pw-overlay-card h2{ margin: 0 0 6px; font-size: 1.4rem; color: var(--pw-success); }
.pw-overlay-sub{ color: var(--pw-muted); margin: 0 0 16px; font-size: 0.9rem; }
.pw-completion-video{
	display: none;
	width: 100%; max-height: 320px; border-radius: 12px; margin-bottom: 16px; background: #000;
}
.pw-completion-video.pw-video-css-fullscreen{
	/* A CSS-only "fullscreen": the real Fullscreen API only works for whichever player's own
	   click completed the puzzle — browsers flatly refuse it for a call that isn't inside a
	   direct user gesture, which a background poll on the other player's screen never is, no
	   matter how it's wrapped. Blowing the video up to the full viewport with plain positioning
	   sidesteps that restriction entirely and looks the same to the eye for both players.
	   Note: since an ancestor (.pw-overlay-card) uses `transform`, which creates its own
	   containing block for fixed-position descendants, this element is re-parented to the top
	   level in JS while fullscreen so `position: fixed` measures against the real viewport. */
	position: fixed; inset: 0; z-index: 1000010;
	width: 100vw; height: 100vh; max-height: none;
	border-radius: 0; margin: 0;
	object-fit: contain;
}
.pw-video-fs-close{
	display: none !important;
	position: fixed !important; top: 16px !important; right: 16px !important; z-index: 1000011 !important;
	width: 40px !important; height: 40px !important; border-radius: 50% !important; border: none !important;
	background: rgba(20,20,20,0.55) !important; color: #fff !important; font-size: 20px !important; line-height: 1 !important;
	align-items: center !important; justify-content: center !important; cursor: pointer !important;
}
.pw-video-fs-close.show{ display: flex !important; }
.pw-btn-row{ display: flex; gap: 10px; justify-content: center; }
.pw-btn-row button{
	border: none; padding: 10px 18px; border-radius: 999px; font-weight: 600; cursor: pointer;
}
.pw-play-again{ background: var(--pw-accent); color: #fff; }
.pw-play-again:hover{ background: var(--pw-accent-dark); }
.pw-back-gallery{ background: #eef1f3; color: var(--pw-text); }

.pw-confetti{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 20px; }
.pw-confetti span{
	position: absolute; top: -10%; width: 8px; height: 14px; opacity: 0.9;
	animation: pw-fall linear forwards;
}
@keyframes pw-fall{ to{ transform: translateY(420px) rotate(540deg); opacity: 0; } }

.pw-toolbar-logo{
	height: 34px !important;
	width: auto !important;
	max-width: 130px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 6px 0 2px !important;
	background: #fff;
	border-radius: 6px;
	padding: 2px 6px !important;
	flex: 0 0 auto !important;
}
.pw-tool-btn.active{ background: rgba(255,255,255,0.28) !important; }

.pw-empty{ text-align: center; color: var(--pw-muted); padding: 30px; }

.pw-locked{ opacity: 0.4; pointer-events: none; position: relative; }
.pw-locked::after{
	content: "Locked during multiplayer game";
	position: absolute; left: 0; right: 0; bottom: -18px;
	font-size: 0.7rem; color: #c0392b; text-align: left; pointer-events: none;
}

.pw-player-toast{
	position: absolute;
	top: 64px; left: 50%;
	transform: translate(-50%, -12px);
	background: rgba(20,30,40,0.9);
	color: #fff;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 0.85rem;
	z-index: 999996;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.pw-player-toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ---------------- Hamburger dropdown ---------------- */
.pw-hamburger-menu{
	display: none;
	position: absolute;
	top: 60px; left: 0;
	background: #fff;
	color: var(--pw-text);
	min-width: 230px;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.25);
	z-index: 999992;
	flex-direction: column;
	padding: 6px;
}
.pw-hamburger-menu.open{ display: flex; }
.pw-hmenu-item{
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.9rem;
	cursor: pointer;
	color: var(--pw-text);
}
.pw-hmenu-item:hover{ background: #f0f2f4; }
.pw-hmenu-home{ color: var(--pw-primary); }

/* ---------------- Toolbox modal ---------------- */
.pw-toolbox{
	display: none;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(61,111,150,0.96);
	border-radius: 12px;
	z-index: 999991;
	box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.pw-toolbox.open{ display: block; }
.pw-toolbox-tabs{
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 12px;
}
.pw-tbtab{
	all: unset;
	box-sizing: border-box;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
}
.pw-tbtab.pw-labeled{
	width: auto;
	height: 44px;
	flex-direction: row;
	padding: 6px 14px;
}
.pw-tbtab.pw-labeled svg{ display: none; }
.pw-tbtab.pw-labeled .pw-btn-label{
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	line-height: 1;
}
.pw-toolbox-tabs{ flex-wrap: wrap; }
.pw-tbtab:hover, .pw-tbtab.active{ background: rgba(255,255,255,0.18); }
.pw-tbtab svg{ width: 19px; height: 19px; display: block; }
.pw-tb-ok{
	all: unset;
	box-sizing: border-box;
	background: #e9edf1;
	color: #22303c;
	font-weight: 700;
	padding: 9px 20px;
	border-radius: 8px;
	cursor: pointer;
}
.pw-tb-ok:hover{ background: #fff; }

/* Left-edge sidebar (matches jigsawexplorer's "Number of puzzle pieces" / "Invite players" panel) */
.pw-toolbox-sidebar{
	display: none;
	position: absolute;
	top: 60px; left: 0; bottom: 0;
	width: 290px;
	background: #fff;
	color: #22303c;
	z-index: 999989;
	box-shadow: 6px 0 24px rgba(0,0,0,0.18);
	padding: 20px;
	overflow-y: auto;
}
.pw-toolbox-sidebar.open{ display: block; }
.pw-toolbox-sidebar h4{ margin: 0 0 14px; font-size: 1rem; }
.pw-sidebar-close{
	all: unset;
	box-sizing: border-box;
	position: absolute;
	bottom: 16px; left: 20px;
	cursor: pointer;
	color: #8a97a3;
	font-size: 1rem;
}
.pw-tbpanel{ display: none; }
.pw-tbpanel.open{ display: block; }

.pw-piece-count-list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid #eceff2;
}
.pw-piece-count-list button{
	all: unset;
	box-sizing: border-box;
	text-align: center;
	padding: 12px 4px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.92rem;
	border-bottom: 1px solid #eceff2;
	color: #3a4652;
}
.pw-piece-count-list button:hover{ background: #f4f6f8; }
.pw-piece-count-list button.active{ background: #22303c; color: #fff; }

.pw-toggle-row{ display: flex; align-items: center; gap: 10px; font-size: 0.92rem; cursor: pointer; }
.pw-toggle-row input{ width: 17px; height: 17px; }

.pw-color-swatches{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.pw-color-swatches button{
	all: unset;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 8px;
	cursor: pointer;
	border: 3px solid #eceff2 !important;
}
.pw-color-swatches button.active{ border-color: #22303c !important; }

.pw-people-invite p{ font-size: 0.85rem; margin: 0 0 12px; color: #5a6672; }
.pw-mp-status{ font-size: 0.82rem; margin-top: 10px; color: #c0392b; }
.pw-mp-status:empty{ display: none; }
.pw-nickname-input{
	width: 100%;
	padding: 9px 12px;
	border-radius: 8px;
	border: 1px solid #d7dde3;
	margin-bottom: 10px;
	font-size: 0.9rem;
	box-sizing: border-box;
}
.pw-create-link-btn, .pw-copy-link-btn{
	all: unset;
	box-sizing: border-box;
	background: #22303c;
	color: #fff;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	display: inline-block;
}
.pw-game-link-row{ display: flex; gap: 8px; margin-top: 10px; }
.pw-game-link-output{
	flex: 1 1 auto;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid #d7dde3;
	font-size: 0.8rem;
	min-width: 0;
	color: #22303c;
}
.pw-people-list ul{ list-style: none; margin: 6px 0 0; padding: 0; }
.pw-people-list li{ padding: 6px 0; font-size: 0.9rem; border-bottom: 1px solid #eceff2; }

.pw-players-badge{
	position: absolute;
	bottom: 16px; left: 16px;
	background: rgba(20,30,40,0.75);
	color: #fff;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 0.8rem;
	z-index: 999985;
	display: none;
	max-width: 220px;
}
.pw-players-badge.show{ display: block; }

/* ---------------- Responsive ---------------- */
@media (max-width: 640px){
	.pw-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
	.pw-player-title{ max-width: 120px; font-size: 0.86rem; }
	.pw-toolbar{ height: 46px; padding: 0 6px; }
	.pw-tool-btn{ width: 34px; height: 34px; }
}