/* Shake animation for answer display */
#answerDisplay.shake {
    animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
    50% { transform: translateX(0); }
    100% { transform: none; }
}
/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Disable transitions on page load */
body.preload * {
    transition: none !important;
}

/* CSS Variables for mode themes */
:root {
    --primary-color: #667eea;
    --primary-dark: #764ba2;
    --text-light: white;
    --shadow-color: rgba(102, 126, 234, 0.4);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    min-height: 100vh;
    color: #333;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

main {
  flex: 1;
}

/* Don't transition background during animation */
body:not(.mode-animating) {
    transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mode-specific themes (use data-mode attribute) */
body[data-mode="trivial"] {
    background: linear-gradient(90deg, #48bb78 0%, #2f855a 100%);
}

body[data-mode="basic"] {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

body[data-mode="intense"] {
    background: linear-gradient(90deg, #ff9800 0%, #d84315 100%);
}

body[data-mode="suddendeath"] {
    background: linear-gradient(90deg, #4a1a1a 0%, #6b2020 100%);
}

/* Animated background overlay for ripple effect */
@keyframes ripple-spread {
    0% {
        clip-path: circle(0% at 10% 10%);
    }
    100% {
        clip-path: circle(150% at 10% 10%);
    }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    clip-path: circle(0% at 10% 10%);
}

/* Show the NEW color expanding over the old background */
body.mode-animating::before {
    opacity: 1;
    animation: ripple-spread 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* New mode backgrounds (what we're transitioning TO) */
body.mode-animating[data-new-mode="trivial"]::before {
    background: linear-gradient(90deg, #48bb78 0%, #2f855a 100%);
}

body.mode-animating[data-new-mode="basic"]::before {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

body.mode-animating[data-new-mode="intense"]::before {
    background: linear-gradient(90deg, #ff9800 0%, #d84315 100%);
}

body.mode-animating[data-new-mode="suddendeath"]::before {
    background: linear-gradient(90deg, #4a1a1a 0%, #6b2020 100%);
}

/* Panel Toggle Buttons */
.panel-toggle {
    position: fixed;
    top: 0;
    left: 300px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0 0 15px 0;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 101;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-left: -2px;
}

.panel-toggle.panel-open {
    left: 300px;
}

.panel-toggle:not(.panel-open) {
    left: 0;
}

/* Side Panels */
.side-panel {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 300px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 2px 0 30px rgba(0,0,0,0.3);
    z-index: 99;
    padding: 2rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.side-panel-left {
    left: 0;
    transform: translateX(-100%);
}

.side-panel.open {
    transform: translateX(0);
}

.panel-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.panel-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.panel-section h4 {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 1rem;
    font-weight: 600;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #ddd;
}

.panel-header h3 {
    font-size: 1.5rem;
    color: #333;
    margin: 0;
}

/* Volume Control */
.volume-control {
    position: relative;
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    box-shadow: none;
    width: 100%;
    z-index: auto;
}

.volume-control label {
    font-size: 1.5rem;
    text-align: center;
}

.volume-control input[type="range"] {
    flex: 1;
    cursor: pointer;
}

.volume-control span {
    font-size: 1rem;
    font-weight: 600;
    color: #667eea;
    min-width: 40px;
    text-align: right;
}

/* Mode Control (mirrored from volume control) */
.mode-control {
    position: relative;
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: none;
    width: 100%;
    z-index: auto;
}

.mode-btn-compact {
    background: white;
    border: 2px solid #ddd;
    color: #666;
    padding: 1rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mode-btn-compact strong {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}

.mode-btn-compact span {
    font-size: 0.75rem;
    font-weight: normal;
    color: #999;
}

.mode-btn-compact:hover {
    background: #f0f0f0;
}

.mode-btn-compact.active span {
    color: rgba(255, 255, 255, 0.9);
}

/* Mode-specific button colors (always use their own colors) */
.mode-btn-compact[data-mode="trivial"] {
    border-color: #48bb78;
    color: #48bb78;
}

.mode-btn-compact[data-mode="trivial"]:hover {
    background: #f0fff4;
}

.mode-btn-compact[data-mode="trivial"].active {
    background: #48bb78;
    border-color: #48bb78;
    color: white;
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.4);
}

.mode-btn-compact[data-mode="basic"] {
    border-color: #667eea;
    color: #667eea;
}

.mode-btn-compact[data-mode="basic"]:hover {
    background: #f0f0ff;
}

.mode-btn-compact[data-mode="basic"].active {
    background: #667eea;
    border-color: #667eea;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.mode-btn-compact[data-mode="intense"] {
    border-color: #ff9800;
    color: #ff9800;
}

.mode-btn-compact[data-mode="intense"]:hover {
    background: #fff3e0;
}

.mode-btn-compact[data-mode="intense"].active {
    background: #ff9800;
    border-color: #ff9800;
    color: white;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
}

.mode-btn-compact[data-mode="suddendeath"] {
    border-color: #e53e3e;
    color: #e53e3e;
}

.mode-btn-compact[data-mode="suddendeath"]:hover {
    background: #fff5f5;
}

.mode-btn-compact[data-mode="suddendeath"].active {
    background: #e53e3e;
    border-color: #e53e3e;
    color: white;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.6);
}

.container {
    max-width: 100%;
    margin: auto;
    position: relative;
    z-index: 2;
    width: 100%;
}

.home-container {
	margin-top: 4rem;
}

/* Header */
header {
	margin: 1rem 0 2rem;
	color: white;
	text-align:center;
}
.controls-wrapper {
    text-align: center;
    margin-bottom: 1rem;
}

header h1 {
    text-align: center;
    color: var(--text-light);
}

header h1 {
	--color1: gold;
	--color2: cyan;
    font-size: 4rem;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.15);
    letter-spacing: 2px;
    font-weight: 900;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(90deg, var(--color1) 0%, var(--color1) 50.2%,var(--color2) 50.2%, var(--color2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



header h1 a, .btn-secondary a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

header h5 {
	text-shadow: 1px 1px 0px rgba(0,0,0,1);
	color: lavender;
}

/* Footer */
footer {
  position: relative;
  margin: 1rem auto;
  width: fit-content;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  font-size: 0.85rem;
  z-index: 10;
}

footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

footer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

footer span {
    color: #999;
    margin: 0 0.5rem;
}

/* Mode Selection */
.mode-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    justify-content: flex-start;
}

.mode-btn-small {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #667eea;
    color: #667eea;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.mode-btn-small:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

.mode-btn-small.active {
    background: #667eea;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Home Menu */
.home-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.menu-button {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-decoration: none;
    color: #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
}

.menu-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.button-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.menu-button h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.menu-button p {
    color: #666;
    font-size: 1rem;
}

/* Form Styles */
.form-container {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    max-width: 800px;
    margin: 0 auto 5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #667eea;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: #666;
    font-size: 0.875rem;
}

/* Buttons */
.btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    text-decoration: none;
    display: inline-block;
	border: 2px solid rgba(0,0,0,0.1);
	height:fit-content;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-success {
    background: #28a745;
    color: white;
}
.btn-fail {
    background: hsl(0,0%,40%);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

.btn-success:hover {
    background: #41ca61;
}

body.loading {
	#startScreen,
	#gameContent,
	#resultScreen {
		position: relative;
		overflow: hidden;
	}
	#startScreen::before,
	#gameContent::before,
	#resultScreen::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		background: white;
		z-index: 1000;
	}
	#startScreen::after,
	#gameContent::after,
	#resultScreen::after {
		--widthHeight: 50;
        content: '';
        position: absolute;
        top: calc(50% - calc((var(--widthHeight) / 2) * 1px));
        left: calc(50% - calc((var(--widthHeight) / 2) * 1px));
        height: calc(var(--widthHeight) * 1px);
        aspect-ratio: 1 / 1;
        animation: spin 3s linear infinite;
        border-radius: 50%;
        border: 4px dashed var(--primary-dark);
        background: radial-gradient(var(--primary-color) 60%, transparent 65%);
		z-index: 1000;
	}
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg); 
  }
}


#continueBtn.btn-success > span:last-child {
	display: none !important;
}

#continueBtn:not(.btn-success) {
	font-size: 0.8rem;
	padding: 0.5rem 0.75rem;
}
#continueBtn {
	transition-property: background;
}


/* Game Styles */
.game-container {
    background: transparent;
    padding: 2rem;
    border-radius: 3px;
    box-shadow: none;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

#startScreen {
    background: rgba(255, 255, 255, 0.95);
    padding: 3rem 2rem 2rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: fit-content;
    margin: 0 auto;
}

#resultScreen {
    background: rgba(255, 255, 255, 0.95);
    padding: 3rem 2rem 1rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: fit-content;
    margin: 0 auto;
}

#resultScreen *:has(> * > #resultDifficulty),
#startScreen *:has(> * > .collection-difficulties),
#resultScreen *:has(> #resultScreenCover):has(img:not([src=''])),
#startScreen *:has(> #startScreenCover):has(img:not([src=''])) {
	width: 50%;
}

#resultScreen:has(#resultScreenCover[src='']) *:has(> * > #resultDifficulty) {
	width: 100%;
}

#startScreenCover[src=''],
#resultScreenCover[src=''] {
    display: none !important;
}

#gameContent {
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    overflow: hidden;
    width: min(700px, 95vw);
}

.game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 1rem;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}

.game-info div {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}


/* Gameplay Wrapper */
.gameplay-wrapper {
    background: rgba(50, 50, 80, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 3rem;
	user-select: none;
}

/* Audio Player */
.audioPlayer-container {
	width: 100%;
	background: rgba(50, 50, 80, 1);
    position: relative;
    border: 3px solid rgba(255, 255, 255, 0.3);
	border-left: none;
	border-right: none;
}
#audioPlayer {
	width: 100%;
	height: 100%;
	padding: 1rem 0;
	z-index: 10;
	position: relative;
}
#audioPlayer * {
    height: 100%;
    margin: auto;
}
#progressBar {
	--progress: 0%;
	z-index: 5;
	display: block;
	position: absolute;
	width: calc(var(--progress) * 100%);
	background: #667eea;
	height: 100%;
}



#audioPlayer::after {
	--startPercent: calc((var(--originalStart) / var(--duration)) * 100);
	--endPercent: calc((var(--originalEnd) / var(--duration)) * 100);
	width: calc((var(--endPercent) - var(--startPercent)) * 1%);
	left: calc(var(--startPercent) * 1%);
    top: 0;
    height: 100%;
	content: "";
    display: block;
    position: absolute;
	--color1: rgba(255, 99, 71, 0.5);
    --color2: rgba(0, 0, 0, 0);
    --border: rgba(255, 99, 71, 1);
    --val1: 2;
    --val2: 0;
    --val3: 10;
    background-color: var(--color2);
    opacity: 0.8;
    background-size: calc(var(--val3) * 1px) calc(var(--val3) * 1px);
    background-image: repeating-linear-gradient(45deg, var(--color1) calc(var(--val2) * 1px), var(--color1) calc(var(--val1) * 1px), var(--color2) calc(var(--val2) * 1px), var(--color2) 50%);
    border: 2px solid var(--border);
    border-top: none;
    border-bottom: none;
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
}


body[data-mode="trivial"] #audioPlayer::after,
#audioPlayer[data-hidden="true"]::after {
    display: none;
}



#progressTimer {
	position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    font-size: 1rem;
    color: darkturquoise;
    font-weight: 600;
    pointer-events: none;
    text-shadow: 1px 1px 0px black;
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(2px 0px 0px black);
    letter-spacing: 1.5px;
    background: rgba(0, 0, 0, 0.4);
    padding: 0.1rem 0.5rem;
    border-radius: 5px;
}

/* cover Image */
.cover-container {
    padding: 0 1rem;
    background: transparent;
    border-radius: 0;
    width: 100%;
}

.cover-wrapper {
	border: 5px inset slategray;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: gainsboro;
}

.cover-container #cover-img {
    max-width: 100%;
    aspect-ratio: 1 / 1;
    z-index: 10;
    object-fit: scale-down;
    background: black;
}

.cover-container #cover-alt {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    background: floralwhite;
    z-index: 10;
    color: rgba(0, 0, 0, 0.2);
    font-size: 1.5rem;
    font-style: italic;
	font-weight: bold;
}
.cover-container .cover-qmark {
	position: absolute;
    font-size: 4rem;
    font-family: sans-serif;
    color: rgba(0, 0, 0, 0.1);
}


#cover-img[src=''],
#cover-img[src='null'],
#cover-img:not([src]),
#cover-img[src*='data'] ~ #cover-alt { 
	display: none; 
}





/* Timer Display */
.timer-wrapper {
    width: 100%;
    background: transparent;
    padding: 0.5rem 3rem;
    margin: 0;
}

#timer {
    font-size: 3rem;
    color: rgba(220,220,255,1);
    font-weight: bold;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    background: transparent;
    backdrop-filter: none;
}

#timer.warning {
    color: #ff6b6b;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Metadata */
.metadata-container {
    width: 100%;
	min-height: 150px;
    background: transparent;
    padding: 1rem 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
}
.answer-wrapper * {
	text-shadow: 1px 1px rgba(0,0,0,0.5);
}
.answer-wrapper .false {
	text-transform: uppercase;
}

.answer-wrapper.hidden * {
	opacity:0;
}

.timerAnswer-container {
	width: 300%;
    font-size: 1.5rem;
    padding: 0.1rem 1rem;
    font-weight: 600;
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}

.answer-wrapper {
	color: hsl(0,0%,70%);
    padding: 3px 0;
	/*text-transform: capitalize;*/
}

.answer-wrapper .seperator1,
.answer-wrapper .seperator2,
.answer-wrapper .seperator3 {
	color: hsl(0,0%,70%);
}







.guess-input {
    margin: 0;
    width: 100%;
    padding: 0;
}

.guess-input input {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
    border: none;
    border-radius: 0;
    text-align: center;
    background: lightslategray;
    backdrop-filter: none;
    color: white;
    outline: none;
}

.guess-input input::placeholder {
    color: hsl(0,0%,80%);
}

.guess-input input:focus::placeholder {
    color: transparent;
}



/* Heartbeat animation for incorrect guess */
.lives .heart.heartbeat {
    animation: heartbeat 0.8s ease-in-out forwards;
}

@keyframes heartbeat {
    0% { transform: scale(1); opacity: 1; }
    15% { transform: scale(1.4); opacity: 1; }
    30% { transform: scale(1); opacity: 1; }
    45% { transform: scale(1.3); opacity: 0.8; }
    60% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1); opacity: 0.5; filter: grayscale(1); }
}

#gameContent .btn {
	user-select: none;
}

/* Lifeline Buttons */
.lifeline-buttons {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 0.5rem;
    margin: 0;
    width: 100%;
    padding: 0.75rem 2rem 0;
    background: transparent;
}

.btn-lifeline {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    background: rgba(255, 193, 7, 0.9);
    color: #333;
    border: 2px solid rgba(255, 193, 7, 1);
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.mode-btn-compact .emoji,
.btn-lifeline .emoji {
	filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.4));
}
.btn-lifeline[hidden] {
	display: none;
}

.btn-lifeline:hover:not(:disabled) {
    background: rgb(250, 212, 99);
}

.btn-lifeline:disabled {
    background: rgba(150, 150, 150, 0.5);
    border-color: rgba(150, 150, 150, 0.7);
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
}

#resultLifelinesDisplay *[data-hidden=true] {
	filter:grayscale(100%);
	opacity:0.5;
}
#resultLifelinesDisplay *[hidden] {
	display: none;
}


.action-buttons {
 	display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    width: 100%;
    gap: 0.5rem;
    padding: 1rem;
    background: transparent;
    flex-direction: row;
}

#nextButtonContainer {
    width: 100%;
    padding: 1rem 2rem;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Collections List */
.collections-list {
    background: transparent;
    padding: 1rem;
    border-radius: 15px;
    box-shadow: none;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;
	gap: 1rem;
}

.collections-list h2 {
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-size: 2rem;
}

.collection-item {
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.collection-item[data-songs="0"] {
	filter: opacity(1) brightness(0.6);
	cursor:not-allowed;
}
.collection-item[data-songs="0"] * {
	pointer-events: none;
	user-select: none;
}

.collection-item[data-songs="0"] .btn-success {
	display: none;
}

.collection-cover {
    max-width: 200px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
	border: 2px solid rgba(0,0,0,0.2);
}

.collection-item:not([data-songs="0"]):hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.collection-info {
    flex: 1;
}

.collection-item h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.collection-item p {
    color: #666;
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

.collection-group {
	color: white;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: bold;
    margin: .5rem 1rem;
}

/* Difficulty colors */

#collectionsList,
#resultScreen {
	[data-difficulty='Easy'] {
		color: #28a745;
		font-weight: bold;
	}

	[data-difficulty='Medium'] {
		color: #667eea;
		font-weight: bold;
	}

	[data-difficulty='Hard'] {
		color: #ff9800;
		font-weight: bold;
	}

	[data-difficulty='Extreme'] {
		color: #dc3545;
		font-weight: bold;
	}
}

#resultScreen .difficulty,
#resultScreen .mode,
#resultScreen .rounds,
#resultScreen .sources,
#resultScreen .artists,
#resultScreen .songs {
	display: flex;
    justify-content: space-between;
}

#resultScreen .sources[hidden],
#resultScreen .artists[hidden],
#resultScreen .songs[hidden] {
	display: none;
}

.difficulty-wrapper strong {
	margin: auto 0;
}
.collection-difficulties {
	display: flex;
    flex-direction: column;
    align-items: flex-end;
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight:bold;
	gap: .2rem;
}
#startScreen .collection-difficulties { 
	flex-direction: row;
}

.collection-difficulties input {
	display: none;
}


.collection-difficulties label::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: inline-block;
    background: linear-gradient(45deg, lightgray, lightslategrey);
    border: 1px solid rgba(0, 0, 0, 0.5);
	margin-left: .2rem
}

.collection-difficulties label:has(input:checked)::after {
 	background: linear-gradient(45deg, limegreen, lawngreen);
}

.collection-difficulties label:not(:has(input:checked)) span,
.collection-difficulties label:not(:has(input:checked))::after {
	opacity: 0.5;
}

#resultScreen .collection-difficulties span:not(.active) {
	display:none;
}

.collection-difficulties label {
	padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
	cursor:pointer;
	user-select: none;
}
#startScreen .collection-difficulties {
	[data-difficulty='Easy'] {
		background: #28a745;
	}

	[data-difficulty='Medium'] {
		background: #667eea;
	}

	[data-difficulty='Hard'] {
		background: #ff9800;
	}

	[data-difficulty='Extreme'] {
		background: #dc3545;
	}
}



/* Song List */
.song-list {
    margin-bottom: 1.5rem;
}

.song-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.song-item button {
    background: #dc3545;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
}

.song-item button:hover {
    background: #c82333;
}

/* Success Message */
.success-message {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
}

/* Hide Load More button if no collections are shown */
#collectionSelection:has(#collectionsList:empty) h2 {
	display: none !important;
}
#collectionSelection:has(#collectionsList:empty) #loadMoreBtn {
	display: none !important;
}



#game-info {
    & {
        display: flex;
        padding: 1rem;
        flex-direction: row;
    }
    & > div {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
		gap: 1rem;
    }
    .left {
        justify-content: flex-start;
    }

    .center {
        justify-content: center;
        width: 150%;
    }

    .right {
        justify-content: flex-end;
    }

    .scores > div {
        display: flex;
        justify-content: space-between;
    }
	.scores > div[hidden] {
		display: none;
	}



    .scores {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .lives {
        transform-origin: center;
        font-size: 1.5rem;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
    }
}


.mediaBtn:active {
    transform: scale(0.95);
}

.mediaBtn.previous,
.mediaBtn.next {
    --size: 1;
    width: calc(var(--size) * 3rem);
    height: calc(var(--size) * 3rem);
}

.mediaBtn.previous > span:last-child {
    transform: rotate(-135deg);
}
.mediaBtn.next > span:last-child {
    transform: rotate(135deg);
}

.mediaBtn.play {
    --size: 4;
    width: calc(var(--size) * 1.5rem);
    height: calc(var(--size) * 1.5rem);
}

.mediaBtn {
    border: none;
    background: linear-gradient(270deg, deepskyblue, cornflowerblue);
    border-radius: 5px;
    color: white;
    font-weight: bold;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    aspect-ratio: 1 / 1;
    font-size: calc(var(--size) * 1rem);
    line-height: calc(var(--size) * 1rem);
    padding: clamp(0rem, calc(var(--size) * 0.5rem), 1rem);
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}








/* Responsive */
@media (max-width: 800px) {
    
    .controls-wrapper {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    header h1 {
        font-size: 2.5rem;
    }
    
    .home-menu {
        grid-template-columns: 1fr;
    }
    
    .mode-selector {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .mode-btn-small {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
    
    .mode-buttons {
        grid-template-columns: 1fr;
    }
    
    .collection-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Start Screen Layout */
@media (max-width: 768px) {
    #startScreen > div:first-of-type {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    #startScreen > div:first-of-type > div:first-child {
        align-self: center;
    }

    #startScreen > div:first-of-type > div:last-child {
        text-align: center !important;
    }
}

/* Result Screen Layout */
@media (max-width: 768px) {
    #resultScreen > div:nth-of-type(3) {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    #resultScreen > div:nth-of-type(3) > div:first-child {
        align-self: center;
    }

    #resultScreen > div:nth-of-type(3) > div:last-child {
        text-align: center !important;
    }
}

/* Disable pointer events on skip button temporarily */
.skip-disabled {
    pointer-events: none;
}


body:not([data-state="2"]) #answerDisplay:not([data-lifeline-reveal='true']) {
	.source[data-reveal='true'] .false,
	.artist[data-reveal='true'] .false,
	.song[data-reveal='true'] .false,
	.source[data-reveal='false'] .true,
	.artist[data-reveal='false'] .true,
	.song[data-reveal='false'] .true {
		display: none !important;
	}
}
body:not([data-state="2"]) #answerDisplay {
	.year[data-reveal='false'] {
		display: none !important;
	}
}

body[data-state="1"] #answerDisplay[data-lifeline-reveal='true'],
body[data-state="2"] #answerDisplay {
	.source .false,
	.artist .false,
	.song .false {
		display: none !important;
	}
}

#answerDisplay[data-lifeline-reveal='true'] *:not([data-reveal='true']) > .true > span.hint {
    color: hsl(0, 0%, 30%);
}

#answerDisplay[data-lifeline-reveal='true'] *:not([data-reveal='true']) > .true > span:not(.hint) {
	font-size: 0;
	user-select: none;
}

#answerDisplay[data-lifeline-reveal='true'] *:not([data-reveal='true']) > .true > span:not(.hint)::after {
	content: "_";
	font-size: 1.5rem;
    padding: 0px 1px;
}

#answerDisplay[data-lifeline-reveal='true'] *:not([data-reveal='true']) > .true > span:not(.hint).space::after {
    content: " ";
	padding: 0 .5rem;
}
#answerDisplay[data-lifeline-reveal='true'] *:not([data-reveal='true']) > .true > span.special::after {
	font-size:0;
}



/* Hide sep1 when Sources is absent OR when BOTH Artists and Songs are absent */
body:not([data-state="2"]):not([data-guess*="Sources"]) #answerDisplay .seperator1,
body:not([data-state="2"]):not([data-guess*="Artists"]):not([data-guess*="Songs"]) #answerDisplay .seperator1 {
  display: none !important;
}

/* Hide sep2 unless BOTH Artists AND Songs are present */
body:not([data-state="2"]):not([data-guess*="Artists"]) #answerDisplay .seperator2,
body:not([data-state="2"]):not([data-guess*="Songs"])  #answerDisplay .seperator2 {
  display: none !important;
}

/* Hide sep3 when Songs is absent */
body:not([data-state="2"]):not([data-guess*="Songs"]) #answerDisplay .seperator3 {
  display: none !important;
}


body[data-state="1"]:not([data-guess*="Sources"]) .sources,
body[data-state="1"]:not([data-guess*="Artists"]) .artists,
body[data-state="1"]:not([data-guess*="Songs"]) .songs {
	display:none !important;
}

#answerDisplay {
	.source[data-reveal='true'],
	.artist[data-reveal='true'],
	.song[data-reveal='true'],
	.year[data-reveal='true'] {
		color: #3ee33e !important;
		font-weight: bold;
		font-style: normal;
	}
	.sources:empty,
	.artists:empty,
	.songs:empty {
		display: none !important;	
	}
}

body[data-state="2"] #answerDisplay *[data-reveal='false'] {
	color: #c96060;
	font-weight: bold;
	font-style: normal;
}

body[data-state="2"]:not([data-guess*="Sources"]) #answerDisplay .source,
body[data-state="2"]:not([data-guess*="Artists"]) #answerDisplay .artist,
body[data-state="2"]:not([data-guess*="Songs"]) #answerDisplay .song,
body[data-state="2"] #answerDisplay .year {
	color: hsl(0,0%,70%);
}

body[data-guess*="Sources"] #answerDisplay .source[data-optional='true'],
body[data-guess*="Artists"] #answerDisplay .artist[data-optional='true'],
body[data-guess*="Songs"] #answerDisplay .song[data-optional='true'] {
    opacity: 0.5;
}






#roundSlider,
#yearSlider {
	& {
		--width: 32;
		--height: var(--width);
		width: 100%;
		height: calc(var(--height) * 1px);
		border-radius: 0;
	}
	.noUi-tooltip {
		display: none;
	}

	&.noUi-state-drag .noUi-active .noUi-tooltip {
		display: block;
	}

	.noUi-handle {
		border-radius: 0;
		background: #2980b9;
		box-shadow: none;
		height: calc(var(--height) * 1px);
		width: calc(var(--width) * 1px);
		top: -1px;
		right: -0px;
		cursor:grab;
	}
	.noUi-handle:active {
		cursor:grabbing;
	}
	.noUi-handle:after, 
	.noUi-handle:before {
		display: none;
	}
	.noUi-connects {
		border-radius: 0;
	}
}

#yearSlider {
	& {
		padding: 0 calc(var(--width) * 1px);
	}

	.noUi-handle-lower {
		right: 0 !important;
	}
	.noUi-handle-upper {
		right: calc(var(--width) * -1px) !important;
	}

}

#roundSlider {
	& {
		padding: 0 calc(calc(var(--width) / 2) * 1px);
	}

	.noUi-handle-lower {
		right: calc(calc(var(--width) / 2) * -1px) !important;
	}
	.noUi-handle-upper {
		right: 0 !important;
	}
	*:has(> .noUi-connect) {
		overflow: initial !important;
	}

	.noUi-connect {
		margin-right: calc(calc(var(--width) / 2) * 1px);
	}

}

#collectionOptions {
	.difficulty-wrapper,
	.year-wrapper,
	.round-wrapper {
		display: flex;
        flex-wrap: wrap;
        padding: 0.5rem 0;
        justify-content: space-between;
	}
}

/* 
// STATE.start: 0
// STATE.game: 1
// STATE.next: 2
// STATE.end: 3
*/ 


/* STATE.start: 0 */
body:not([data-state="0"]) {
	#startScreen {
		display: none !important;
	}
}

/* STATE.game: 1 */
body:not([data-state="1"]) {
	#actionButtons {
		display: none !important;
	}

	#lifelineButtons,
	#guessInput {
		visibility: hidden;
	}
}

/* STATE.next: 2 */
body:not([data-state="2"]) {
	#nextButtonContainer,
	#audioPlayer::after {
		display: none !important;
	}
	.cover-container:not([data-reveal='true']) #cover-alt,
	.cover-container:not([data-reveal='true']) #cover-img {
		visibility: hidden !important;
	}
}

/* STATE.end: 3 */
body:not([data-state="3"]) {
	#resultScreen { 
		display: none !important;
	}
}

body:not([data-state="1"]):not([data-state="2"]) {
	#gameContent,
	#answerDisplay,
	.progress-container,
	.game-info,
	#nextButtonContainer,
	#timerDisplay {
		display: none !important;
	}
}

/* Start screen error state: hide controls and show error message */
#startScreen[data-error=""],
#startScreen:not([data-error]) {
	#errorMessage {
		display: none !important;
	}
}

#startScreen[data-error]:not([data-error=""]) {
	#collectionTitle,
	#collectionDescription,
	#collectionOptions,
	#startGameBtn {
		display: none !important;
	}
}






#loadMoreBtn {
	display: block;
    margin: 0 auto;
}

.collection-input-wrapper {
	text-align: center;
}

.collection-input-wrapper input {
	width:350px;
	max-width:90%;
	padding:0.5rem;
	font-size:1rem;
	margin:0;
	outline:none;
}

.collection-input-wrapper button {
	padding:0.5rem 1.5rem;
	font-size:1rem;
}