* {
	box-sizing: border-box;
}


body {
	font-family: 'Arvo', serif;
	font-size: 16px;
	background: #FFEB3B;
	/* Bright Yellow */
	color: #333;
	text-align: center;
	margin: 0;
	padding: 40px 30px 40px 20px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h1 {
	font-size: 2.5em;
	color: #E91E63;
	/* Pink */
	margin-bottom: 30px;
	text-transform: uppercase;
	text-shadow: 2px 2px 0px #fff;
}

.header .button-auth {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #fff;
	padding: 10px 20px;
	border-radius: 10px;
	text-decoration: none;
	font-size: 1.2em;
	color: #E91E63;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
	display: none;
}

#album-grid {
	display: flex;
	flex-direction: column;
	/* Stack groups vertically */
	align-items: center;
	/* Center groups */
	flex-grow: 1;
	/* Take up remaining vertical space */
	gap: 0;
	/* Gaps handled by groups */
	width: 100%;
	padding-bottom: 100px;
}

/* Grouping */
.album-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	/* Left align tiles */
	margin: 0 auto 110px auto;
	/* Center the group container itself, keep bottom gap */
	align-content: flex-start;
	align-items: center;
	gap: 40px;
	padding: 20px;
	/* Prevent shadow clipping during animation */
	width: 100%;
	/* Full width of container */
	max-width: 1160px;
	/* Exakt 4 Spalten (4x250 + 3x40 Gap + 2x20 Padding), damit eine 4er-Reihe
	   zentriert ist und unvollstaendige Reihen linksbuendig im Raster bleiben */
}

/* Spacer was requested to have "notable gap" - margin-bottom on group handles it */

.album-tile {
	width: 250px;
	height: 250px;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 10px 10px 0px #FF9800;
	/* Orange Shadow */
	cursor: pointer;
	transition: transform 0.2s;
	position: relative;
	/* Flex item default behavior is fine, but lets ensure they don't shrink */
	flex-shrink: 0;
}

/* More Button Tile */
.tile-more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #00BCD4;
	/* Cyan */
	box-shadow: 10px 10px 0px #00838F;
	color: #fff;
	font-size: 8em;
	/* Large dots */
	font-weight: bold;
	line-height: 0;
	/* Align dots better */
	padding-bottom: 0px;
	/* Visual adjustment for dots */
	/* Visual adjustment for dots */
}

.tile-more i {
	transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.tile-more.expanded i {
	transform: rotate(180deg);
}

.tile-more:active {
	transform: scale(0.95);
	box-shadow: 5px 5px 0px #006064;
}

/* Animation */
@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}

	50% {
		opacity: 1;
		transform: scale(1.05);
	}

	70% {
		transform: scale(0.9);
	}

	100% {
		transform: scale(1);
	}
}

.bounce {
	animation: bounceIn 0.8s;
}

.album-tile:active {
	transform: scale(0.95);
	box-shadow: 5px 5px 0px #E65100;
}

.album-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.album-tile .title {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 10px;
	font-size: 1.2em;
	display: none;
	/* Hide title for cleaner look, or show on hover? Let's hide for now as images are self explanatory for kids */
}

/* Player Interface */
#player-container {
	background: #00BCD4;
	/* Cyan */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.album-art-large {
	width: 300px;
	height: 300px;
	background: #fff;
	border-radius: 20px;
	margin-bottom: 30px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.album-art-large img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.track-info {
	font-size: 1.5em;
	color: #fff;
	margin-bottom: 40px;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.track-artist {
	font-size: 0.8em;
	opacity: 0.8;
}

.controls {
	display: flex;
	gap: 40px;
	align-items: center;
}

.controls button {
	background: #fff;
	border: none;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	font-size: 30px;
	color: #00BCD4;
	cursor: pointer;
	box-shadow: 0 5px 0 #00838F;
	transition: transform 0.1s;
}

.controls button:active {
	transform: translateY(5px);
	box-shadow: none;
}

#btn-play-pause {
	width: 100px;
	height: 100px;
	font-size: 40px;
}

#btn-play-pause .fa-play {
	padding-left: 10px;
}

#btn-back-to-albums {
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 101;
	background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), #00BCD4;
	box-shadow: 0 0 0 6px #00BCD4;
	border: 2px solid #fff;
	color: #fff;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	font-size: 30px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#btn-next {
	padding-left: 15px;
}

#btn-prev {
	padding-right: 15px;
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}

	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}

	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}

	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}

	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}

	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}

	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}

	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}

	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}

	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}

	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}

.shake {
	animation: shake 0.5s;
	animation-iteration-count: 1;
}


#status {
	padding: 40px;
	margin: 80px;
	text-align: left;
	display: none;
}

/* JSON Viewer Styles */
.json-tree {
	font-family: 'Consolas', 'Monaco', monospace;
	font-size: 14px;
	line-height: 1.4;
	color: #333;
}

.json-node {
	position: relative;
	padding-left: 15px;
}

.json-toggler {
	position: absolute;
	left: 0;
	top: 2px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #666;
	cursor: pointer;
	transition: transform 0.1s;
}

.json-toggler.expanded {
	transform: rotate(90deg);
}

.json-key {
	color: #881391;
	/* Purple for keys */
	font-weight: bold;
}

.json-val-string {
	color: #c41a16;
	/* Red for strings */
}

.json-val-number {
	color: #1c00cf;
	/* Blue for numbers */
}

.json-val-boolean {
	color: #0d22aa;
	/* Dark blue for bools */
}

.json-val-null {
	color: #808080;
	/* Gray for null */
}

.json-children {
	display: none;
	margin-left: 5px;
	border-left: 1px dashed #ccc;
	padding-left: 10px;
}

.json-children.visible {
	display: block;
}

.json-object-summary {
	color: #888;
	font-style: italic;
	font-size: 0.9em;
}

/* Login Overlay */
#login-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFEB3B;
	/* Match body background or use a gradient */
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.login-content {
	text-align: center;
	animation: fadeIn 0.5s;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	width: 100%;
	max-width: 640px;
	padding: 40px 30px;
}

.login-content h1 {
	margin: 0;
}

.login-logo {
	width: 260px;
	max-width: 70%;
	height: auto;
	border-radius: 44px;
	border: #a5cb2a 10px solid;
	margin: 0;
}

.login-subtitle {
	font-size: 1.25em;
	color: #333;
	line-height: 1.5;
	margin: 0;
	max-width: 520px;
}

.button-giant-auth {
	font-family: 'Arvo', serif;
	background: #1DB954;
	color: #fff;
	font-size: 1.4em;
	padding: 18px 36px;
	border-radius: 12px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 5px 0 #158a3e;
	transition: transform 0.15s, box-shadow 0.15s;
	border: none;
	cursor: pointer;
	margin-top: 10px;
}

.button-giant-auth:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #158a3e;
}

.button-giant-auth:active {
	transform: translateY(0);
	box-shadow: 0 2px 0 #158a3e;
}

.button-giant-auth i {
	margin-right: 5px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}



@keyframes spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.hidden {
	display: none !important;
}

/* Loading Indicator */
#kp-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFEB3B;
	z-index: 1500;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

/* Großes Logo mit umlaufendem Spinner */
.kp-logo-loader {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 280px;
}

.kp-logo-loader .kp-logo {
	width: 200px;
	height: 200px;
	object-fit: contain;
	border-radius: 44px;
}

.kp-spinner-ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 280px;
	height: 280px;
	border: 12px solid rgba(233, 30, 99, 0.2);
	border-top-color: #E91E63;
	border-radius: 50%;
	animation: kpSpin 1s linear infinite;
}

@keyframes kpSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Empty State / Error Overlay (shared card style) */
#kp-empty,
#kp-error,
#kp-player-error {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFEB3B;
	z-index: 1800;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
}

#kp-player-error {
	background: #00BCD4;
}

.kp-empty-card,
.kp-error-card {
	background: #fff;
	border-radius: 24px;
	padding: 40px 36px;
	max-width: 520px;
	text-align: center;
	box-shadow: 12px 12px 0px #FF9800;
}

#kp-player-error .kp-error-card {
	box-shadow: 12px 12px 0px #00838F;
}

.kp-empty-card h2,
.kp-error-card h2 {
	color: #E91E63;
	font-size: 1.8em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.kp-empty-card p,
.kp-error-card p {
	color: #333;
	font-size: 1.2em;
	line-height: 1.5;
	margin: 0 0 28px;
}

#kp-empty .button-giant-auth,
#kp-error .button-giant-auth,
#kp-player-error .button-giant-auth {
	position: static;
	transform: none;
}

#kp-empty .button-giant-auth:hover,
#kp-error .button-giant-auth:hover,
#kp-player-error .button-giant-auth:hover {
	transform: translateY(-2px);
}

#kp-empty .button-giant-auth:active,
#kp-error .button-giant-auth:active,
#kp-player-error .button-giant-auth:active {
	transform: translateY(0);
}
@media (max-width: 1200px) {
	.album-group {
		gap: 30px;
	}

	.album-tile {
		width: calc(25% - 23px);
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.tile-more {
		font-size: 6em;
	}
}

@media (max-width: 900px) {
	.album-group {
		gap: 20px;
	}

	.album-tile {
		width: calc(33.33% - 14px);
	}
}

/* Smartphone Portrait Adjustment */
@media (max-width: 600px) {

	body {
		padding: 0px 10px 40px 0px;
	}

	.album-group {
		gap: 15px;
		justify-content: flex-start;
	}

	.album-tile {
		/* 
		   Calculated width for 2 columns: 
		   50% - (half of gap) 
		   Gap is 15px, so half is 7.5px. 
		   Using 8px to be safe and avoid wrapping due to subpixel rendering.
		*/
		width: calc(50% - 8px);
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/* Adjust font size for the 'More' tile dots if necessary */
	.tile-more {
		font-size: 6em;
	}
}

#debug-toggle-btn {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 9999;
	background: #333;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0,0,0,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

#kp-debug-log {
	position: fixed;
	top: 60px;
	right: 10px;
	width: 90%;
	max-width: 400px;
	height: 60vh;
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid #ccc;
	border-radius: 8px;
	overflow-y: auto;
	z-index: 9998;
	padding: 10px;
	text-align: left;
	font-family: monospace;
	font-size: 11px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	display: none;
}

.debug-entry {
	padding: 4px 0;
	border-bottom: 1px solid #eee;
	word-wrap: break-word;
}

.debug-entry .time {
	color: #888;
	margin-right: 10px;
}

.debug-entry.info { color: #555; }
.debug-entry.ok { color: #1DB954; font-weight: bold; }
.debug-entry.warn { color: #FF9800; font-weight: bold; }
.debug-entry.error { color: #E91E63; font-weight: bold; }