/* Puzzles - kevicar/puzzle */

.puzzle-page { margin-bottom: 1em; }

.puzzle-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.puzzle-head h2 { margin: 0.3em 0; }
.puzzle-intro, .puzzle-help { margin: 0.4em 0 0.8em; }
.puzzle-meta { color: #536482; margin: 0.3em 0; }
.puzzle-date { font-size: 0.9em; color: #8f8f8f; }
.puzzle-subtitle { margin-top: 1.2em; }

/* Index cards */
.puzzle-cards, .puzzle-podiums {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.puzzle-card { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; }

.puzzle-card-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #1c1c1c;
}

.puzzle-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.puzzle-card:hover .puzzle-card-thumb img { transform: scale(1.05); }

.puzzle-card-body { padding: 8px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.puzzle-card-body h3 { margin: 0.2em 0; border: 0; font-size: 1.2em; text-transform: none; }
.puzzle-play-btn { margin-top: auto; align-self: flex-start; }

.puzzle-podiums > li { margin: 0; }
.puzzle-podiums h4 { margin: 0 0 0.4em; }
.puzzle-podiums ol { list-style: none; margin: 0; padding: 0; }
.puzzle-podiums ol li { margin: 0.3em 0; }

/* Game layout */
.puzzle-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 12px;
	align-items: start;
}

.puzzle-main { margin: 0; }
.puzzle-side .panel, .puzzle-side .forumbg { margin-top: 0; }

.puzzle-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

.puzzle-stat { display: flex; flex-direction: column; line-height: 1.2; }
.puzzle-stat span { font-size: 0.85em; color: #536482; text-transform: uppercase; }
.puzzle-stat strong { font-size: 1.5em; font-variant-numeric: tabular-nums; }
#puzzle-chrono { min-width: 5.5em; }
.puzzle-tools { margin-left: auto; display: flex; gap: 6px; }
.puzzle-preview-btn { user-select: none; }
.puzzle-sound-btn[aria-pressed="false"] { opacity: 0.6; }
.puzzle-page .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.puzzle-stage {
	position: relative;
	margin: 0 auto;
	max-width: 100%;
	border-radius: 6px;
	overflow: hidden;
	background: #1c1c1c;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.puzzle-board {
	position: absolute;
	inset: 0;
	display: grid;
	gap: 2px;
	padding: 2px;
	transition: gap 0.4s ease, padding 0.4s ease;
}

.puzzle-reference {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.puzzle-stage.is-playing .puzzle-reference { opacity: 0; }
.puzzle-stage.is-playing.is-preview .puzzle-reference,
.puzzle-stage.is-solved .puzzle-reference { opacity: 1; }
.puzzle-stage.is-solved .puzzle-board { gap: 0; padding: 0; }

.puzzle-tile {
	background-repeat: no-repeat;
	cursor: grab;
	touch-action: none;
	user-select: none;
	border-radius: 2px;
	outline: none;
	transition: box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

.puzzle-tile:focus-visible { box-shadow: inset 0 0 0 3px #4c9ed9; }
.puzzle-tile.is-selected { box-shadow: inset 0 0 0 3px #ffbf00; filter: brightness(1.15); }
.puzzle-tile.is-target { box-shadow: inset 0 0 0 3px #4c9ed9; }
.puzzle-tile.is-dragging { opacity: 0.35; }
.puzzle-tile.is-swapped { animation: puzzle-pop 0.25s ease; }
.puzzle-tile.is-turning { transition: transform 0.2s ease; }
.puzzle-tile { transform-origin: 50% 50%; }

.puzzle-ghost {
	position: fixed;
	z-index: 1000;
	pointer-events: none;
	cursor: grabbing;
	opacity: 0.9;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	scale: 1.05;
}

.puzzle-turn-btn { padding-left: 8px; padding-right: 8px; }
.puzzle-turn-btn[disabled] { opacity: 0.5; }

/* Real jigsaw pieces: the outer tile carries the glow, the inner one is cut to shape */
.puzzle-board.is-jigsaw { display: block; gap: 0; padding: 0; }

.puzzle-tile.is-jigsaw {
	position: absolute;
	border-radius: 0;
	background: none;
	pointer-events: none;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.puzzle-tile.is-jigsaw.puzzle-ghost { position: fixed; pointer-events: none; }
.puzzle-tile.is-jigsaw:focus-visible { box-shadow: none; filter: drop-shadow(0 0 3px #4c9ed9) drop-shadow(0 0 3px #4c9ed9); }
.puzzle-tile.is-jigsaw.is-selected { box-shadow: none; z-index: 3; filter: drop-shadow(0 0 3px #ffbf00) drop-shadow(0 0 3px #ffbf00); }
.puzzle-tile.is-jigsaw.is-target { box-shadow: none; z-index: 2; filter: drop-shadow(0 0 3px #4c9ed9) drop-shadow(0 0 3px #4c9ed9); }
.puzzle-tile.is-jigsaw.is-turning { transition: transform 0.2s ease, filter 0.15s ease; }

.puzzle-piece {
	position: absolute;
	inset: 0;
	pointer-events: auto;
	background-repeat: no-repeat;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

/* The empty slots show the picture faintly, as the guide of a real puzzle */
.puzzle-stage.is-jigsaw.is-playing .puzzle-reference { opacity: 0.14; }
.puzzle-stage.is-jigsaw.is-playing.is-preview .puzzle-reference,
.puzzle-stage.is-jigsaw.is-solved .puzzle-reference { opacity: 1; }

@keyframes puzzle-pop {
	0% { scale: 0.9; }
	100% { scale: 1; }
}

.puzzle-result {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	z-index: 5;
}

.puzzle-result[hidden] { display: none; }

.puzzle-result-box {
	background: #fff;
	color: #333;
	border-radius: 8px;
	padding: 16px 20px;
	text-align: center;
	max-width: 90%;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.puzzle-result-box h3 { margin-top: 0; border: 0; font-size: 1.4em; text-transform: none; color: #105289; }
.puzzle-result-box p { font-size: 1.1em; }

/* Rankings */
.puzzle-medal {
	display: inline-block;
	min-width: 1.6em;
	line-height: 1.6em;
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
	color: #fff;
}

.puzzle-medal-1 { background: #d4a20b; }
.puzzle-medal-2 { background: #9a9a9a; }
.puzzle-medal-3 { background: #b06a2c; }
tr.puzzle-me td { font-weight: bold; }

@media (max-width: 900px) {
	.puzzle-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 500px) {
	.puzzle-wide { display: none; }
	.puzzle-toolbar { gap: 6px 12px; }
	.puzzle-stat strong { font-size: 1.2em; }
	.puzzle-tools { margin-left: 0; }
}

/* Points and badges */
.puzzle-mybar { font-size: 1.1em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.puzzle-points-big { font-size: 1.3em; margin: 0.2em 0; }
.puzzle-points-big .icon, .puzzle-mybar > .icon { color: #d4a20b; }
.puzzle-badge-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.puzzle-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: var(--badge, #888);
	color: #fff;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.puzzle-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px 2px 4px;
	border-radius: 1em;
	background: var(--badge, #888);
	color: #fff;
	font-weight: bold;
}

.puzzle-badge.is-new { animation: puzzle-badge-in 0.6s ease both; }

@keyframes puzzle-badge-in {
	0% { transform: scale(0.3); opacity: 0; }
	70% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}

.puzzle-badge-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
}

.puzzle-badge-grid > li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.puzzle-badge-grid > li:not(.is-owned) .puzzle-badge-medal { filter: grayscale(1); opacity: 0.45; }
.puzzle-badge-grid h3 { margin: 0 0 0.2em; border: 0; text-transform: none; font-size: 1.15em; }
.puzzle-badge-grid p { margin: 0.2em 0; }

.puzzle-badge-medal {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 24px;
	background: var(--badge, #888);
	color: #fff;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.puzzle-points-rules { margin: 0 0 0 1.5em; }
.puzzle-profile h3 { border: 0; }

.puzzle-result-points { margin: 0.5em 0; }
.puzzle-points-won { font-size: 1.5em; font-weight: bold; color: #d4a20b; margin: 0.2em 0; }
.puzzle-points-details { list-style: none; margin: 0; padding: 0; font-size: 0.95em; }
.puzzle-new-badges { margin: 0.6em 0; }
.puzzle-new-badges .puzzle-badge-row { justify-content: center; }
.puzzle-result-box { max-height: 95%; overflow: auto; }

/* Recommendation block */
.puzzle-share h3 { margin-top: 0; border: 0; text-transform: none; font-size: 1.15em; }
.puzzle-share-explain { margin: 0.2em 0 0.6em; }
.puzzle-share.is-highlight { animation: puzzle-flash 1.2s ease; }

@keyframes puzzle-flash {
	0%, 100% { box-shadow: none; }
	30% { box-shadow: 0 0 0 4px #4c9ed9; }
}

.puzzle-share-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

.puzzle-share-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border: 0;
	border-radius: 4px;
	color: #fff !important;
	font: inherit;
	font-weight: bold;
	text-decoration: none !important;
	cursor: pointer;
	background: #536482;
}

.puzzle-share-btn:hover { filter: brightness(1.1); }
.puzzle-share-btn[hidden] { display: none; }
.share-pm { background: #105289; }
.share-email { background: #6c757d; }
.share-whatsapp { background: #25d366; }
.share-facebook { background: #1877f2; }
.share-x { background: #111111; }
.share-telegram { background: #229ed9; }
.share-copy { background: #8a6d3b; }
.share-native { background: #3d8b3d; }

.puzzle-share-toast {
	margin: 0.6em 0 0;
	padding: 6px 8px;
	border-radius: 4px;
	background: #e9f6ec;
	color: #1e6b2f;
}

.puzzle-share-toast[hidden] { display: none; }

.puzzle-stage.is-jigsaw .puzzle-board { z-index: 1; }
.puzzle-stage.is-jigsaw .puzzle-reference { z-index: 0; }
.puzzle-stage.is-jigsaw.is-playing.is-preview .puzzle-reference,
.puzzle-stage.is-jigsaw.is-solved .puzzle-reference { z-index: 2; }

/* ---------- 1.3.0: guests, puzzle of the day, challenges ---------- */

.puzzle-banner {
	margin: 0.6em 0;
	padding: 8px 12px;
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.puzzle-banner-guest { background: #fff6dd; color: #6b5200; border: 1px solid #ecd58a; }
.puzzle-banner-daily { background: #fff0d1; color: #7a4a00; border: 1px solid #f0c36a; }
.puzzle-banner-challenge { background: #ece6fb; color: #3d2a85; border: 1px solid #c8bcf0; }

.puzzle-duel { font-weight: bold; }
.puzzle-streak-line { color: #c2410c; font-weight: bold; }
.puzzle-guest-box { margin: 0.6em 0; padding: 8px; border-radius: 4px; background: #fff6dd; color: #6b5200; }
.puzzle-guest-box[hidden], .puzzle-duel[hidden], .puzzle-streak-line[hidden] { display: none; }

.puzzle-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.4em 0 0.8em; }
.puzzle-tabs .button.is-active { background: #105289; color: #ffffff; border-color: #105289; }

.puzzle-daily-banner, .puzzle-daily-card {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	padding: 10px 14px;
	margin: 0.8em 0;
}

.puzzle-daily-thumb {
	width: 140px;
	max-width: 40%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* The picture would give the solution away before the attempt */
.puzzle-daily-thumb.is-hidden-solution { filter: blur(14px) saturate(0.7); clip-path: inset(0 round 6px); }

.puzzle-daily-info { flex: 1 1 260px; }
.puzzle-daily-done { color: #1e6b2f; font-weight: bold; }

.puzzle-banner > span { flex: 1 1 200px; }
.puzzle-guest-box p { font-size: 0.95em; margin: 0.4em 0; }

/* ---------- 1.4.0: difficulty levels and personal puzzle ---------- */

.puzzle-levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.4em 0 0.8em; }

.puzzle-level {
	display: flex;
	flex-direction: column;
	padding: 6px 12px;
	border: 1px solid #b9c7d6;
	border-radius: 6px;
	background: #f4f7fa;
	text-decoration: none !important;
	color: inherit;
}

.puzzle-level span { font-size: 0.85em; color: #536482; }
.puzzle-level:hover { border-color: #105289; }
.puzzle-level.is-active { background: #105289; border-color: #105289; color: #ffffff; }
.puzzle-level.is-active span { color: #dbe7f3; }

.puzzle-level-records { list-style: none; margin: 0.4em 0; padding: 0; font-size: 0.9em; }
.puzzle-level-records li { margin: 0.3em 0; }

.puzzle-perso-page { max-width: 520px; }
.puzzle-perso-form input[type="file"] { max-width: 100%; }