:root {
/* Theme overrides - set by quiz theme, complement (not replace) light/dark mode */
--theme-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--theme-body-bg: linear-gradient(338deg, rgba(0,0,36,0) 0%, rgba(9,120,121,0.28) 35%, rgba(0,212,255,0.46) 100%);
--theme-body-bg-blur: 0px;
--theme-body-bg-opacity: 1;

--primary: #292929;
--primary-dark: #18123c;
--primary-vdark: #08070d;
--primary-light: #3f2da5;
--primary-vlight: #77ADE6;
--primary-text: #FFF;
--text-primary: #ffffff;
--text-secondary: #adb5bd;
--text-muted: #6c757d;
--text-light: #f8f9fa;
--bg-primary: #1a1a1a;
--bg-secondary: #2d2d2d;
--bg-tertiary: #3a3a3a;
--bg-quaternary: #404040;

--border-light: #495057;
--border-medium: #6c757d;
--border-dark: #495057;

--white: #ffffff;


--sred: #C8216D;
--sred-light: #E26DA2;
--sred-dark: #84003C;

--sblue-dark: #000084;
--sgreen: #91DB25 ;
--sghreen-light: #BDF074; 
--sgreen-dark: #559000 ;
--syellow: #DCEB27;
--syellow-light: #F3FC7A;
--syellow-dark: #8F9B00;

--danger: #600;

--toggle-size: 0.75em;

/* Additional color variables for consistent theming */


--accent-blue: #4dabf7;
--accent-blue-light: #74c0fc;
--accent-blue-dark: #339af0;
--accent-blue-darker: #228be6;
--accent-blue-darkest: #1e70b8;

--accent-green: #51cf66;
--accent-green-light: #69db7c;
--accent-green-dark: #40c057;
--accent-green-darker: #37b24d;
--accent-green-darkest: #2f9e44;

--accent-cyan: #34dbc5;
--accent-cyan-light: #74e1ff;
--accent-cyan-dark: #29b9d9;
--accent-cyan-darker: #2198b8;
--accent-cyan-darkest: #1e80a8;
--accent-purple: #9775fa;
--accent-purple-light: #b197fc;
--accent-purple-dark: #845ef7;
--accent-purple-darker: #613f99;
--accent-purple-darkest: #50357f;

--accent-red: #ff6b6b;
--accent-red-light: #ff8787;
--accent-red-dark: #b31f35;
--accent-red-darker: #861727;
--accent-red-darkest: #65121d;

--accent-yellow: #ffc107;
--accent-yellow-light: #ffca2c;
--accent-yellow-dark: #ffb300;
--accent-yellow-darker: #ff9800;
--accent-yellow-darkest: #ff7f00;

--accent-orange: #fd7e14;
--accent-orange-light: #ff8c1a;
--accent-orange-dark: #e06614;
--accent-orange-darker: #c25410;
--accent-orange-darkest: #a3450c;

--accent-pink: #e83e8c;
--accent-pink-light: #ea4c99;
--accent-pink-dark: #c23e77;
--accent-pink-darker: #a13461;
--accent-pink-darkest: #802a4d;

--accent-brown: #755018;
--accent-brown-light: #8a5d20;
--accent-brown-dark: #654517;
--accent-brown-darker: #543c14;
--accent-brown-darkest: #433010;

--accent-gray: #868e96;
--accent-gray-light: #adb5bd;
--accent-gray-dark:    #495057;
--accent-gray-darker: #343a40;
--accent-gray-darkest: #23272b;

--shadow-light: rgba(0,0,0,0.3);
--shadow-medium: rgba(0,0,0,0.4);
--shadow-heavy: rgba(0,0,0,0.5);
--shadow-blue: rgba(77, 171, 247, 0.3);
--shadow-green: rgba(81, 207, 102, 0.3);
--shadow-blue-focus: rgba(77, 171, 247, 0.2);

--bgsep: rgba(255,255,255,0.05);
--bg-semi-transparent:  rgba(0,0,0,0.5);
--bg-semi-transparent-light: rgba(0,0,0,0.1);

--button-primary: linear-gradient(135deg, var(--accent-blue-darker), var(--accent-blue-darkest));
--button-primary-hover: linear-gradient(135deg, var(--accent-green-darker), var(--accent-blue-darker));
--button-primary-text: white;

}


html {background-color: var(--bg-primary);}
html, body{ 
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto; /* Allow vertical scrolling for iPad Safari */
    min-height: 100vh; /* Use min-height instead of fixed height */
    margin: 0; 
    padding: 0; 
    background-color: var(--bg-primary);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    height: 100%; /* Ensure full height for flexbox */
}
body {
    font-family: var(--theme-font-family);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--theme-body-bg);
    background-blend-mode: var(--theme-body-bg-blend-mode, normal);
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); 
	touch-action: manipulation;
	color:var(--text-primary);
	/* Flexbox layout: login bar at top, content below */
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
   /* text-shadow: var(--bg-primary) 1px 1px 2px; */
}
/* When blur or opacity are set, use pseudo-element so they apply correctly */
body.theme-bg-effects::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--theme-body-bg);
    background-blend-mode: var(--theme-body-bg-blend-mode, normal);
    filter: blur(var(--theme-body-bg-blur, 0px));
    opacity: var(--theme-body-bg-opacity, 1);
    z-index: -1;
    pointer-events: none;
}
body.theme-bg-effects {
    background: transparent;
    position: relative;
}


.clickable {cursor:pointer;}
input { -webkit-user-select:text; user-select:text;}
textarea { -webkit-user-select:text; user-select:text;}
body *:not(input):not(textarea){touch-action: manipulation;user-select: none; }
ul {list-style-type:none; padding:0;}
select {width:100%; text-overflow: ellipsis;}
button,.button{	border-radius:4px;background-color:var(--accent-blue);color:var(--white); 
	cursor:pointer; overflow:hidden; touch-action: manipulation; border:none; text-decoration:none;
/*background: linear-gradient(338deg, rgba(2,0,36,0) 0%, rgba(9,9,121,0.1) 35%, rgba(0,212,255,.2) 100%);*/
}
button:hover,.button:hover{background-color:var(--accent-blue-dark);color:var(--white);}
h1,h2,h3,h4 {margin-bottom:4px; }
small {font-size: .25;display:inline-block;}

.subBlock {
    background: var(--bgsep);
}

.popup-header {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));
    color: white;
    padding: 5px;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.popup-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}
.popup-header .closeButton {
    background: var(--accent-red);
    border: none;
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
}
.popup-header .closeButton:hover {
    background: var(--accent-red-dark);
    transform: scale(1.05);
}

.loginStatusBar {
	background-color:var(--bg-primary); 
	background-image: url('/svg/quizmasterlogo.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto calc(1em + 15px);
	color:var(--text-primary); 
	display: flex; 
	justify-content: space-between; 
	align-items: center;
	flex-direction:row; 
	flex-wrap:wrap; 
	width:100%; 
	border-bottom:thin solid var(--primary-dark);
	/* Flexbox: don't shrink, stay at natural height */
	flex-shrink: 0;
	min-height: calc(1em + 20px); /* Ensure minimum height */
	z-index: 1000; /* Keep z-index for overlapping content if needed */
}

/* Dev site login status bar - different background color */
.loginStatusBar-dev {
	background-color: #e35a5a;
	/*background-image: url('/svg/quizmasterlogo.svg');*/
}

.login-status-left {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	z-index: 1; /* Ensure content appears above background logo */
}

.login-status-right {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 1; /* Ensure content appears above background logo */
}

/* Logo is now a background image, no longer needed as an element */
.loginStatusBar>* {border: 3px solid transparent;}
.loginStatusBar .loginStatus {flex:1; display:flex; flex-direction:row; flex-wrap:wrap; width:100%; border-bottom:thin solid #aaa;}
.loginStatusBar .loginStatus>* {border: 3px solid transparent;}
.loginStatusBar .loginStatus .loginStatusText {flex:1; display:flex; flex-direction:row; flex-wrap:wrap; width:100%; border-bottom:thin solid #aaa;}
.loginStatusBar .loginStatus .loginStatusText>* {border: 3px solid transparent;}
.loginStatusBar a, .loginStatusBar button {font-size: 1em;color: var(--white);text-decoration: none;padding: 5px 10px; border-radius: 4px; background: var(--accent-blue); min-height: 0.5em;}
.loginStatusBar a:hover, .loginStatusBar button:hover {background: var(--accent-blue-dark);}
.loginStatusBar .staffDashboardButton {background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);}
.loginStatusBar .staffDashboardButton:hover {background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);}
.loginStatusBar .storeButton {background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);}
.loginStatusBar .storeButton:hover {background: linear-gradient(135deg, #f7931e 0%, #e8851a 100%);}
.loginStatusBar .supportButton {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
.loginStatusBar .supportButton:hover {background: linear-gradient(135deg, #764ba2 0%, #5a4fcf 100%);}
.loginStatusBar .settingsButton {background: var(--accent-green);}
.loginStatusBar .settingsButton:hover {background: var(--accent-green-dark);}

.loginButtons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}
.loginButtons .button { padding: 10px 20px; }
.loginBlock {
	margin-top: 20px;
	padding: 15px;
	background: var(--bgsep);
	border-radius: 8px;
	border: 1px solid var(--border-light);
}
/* Flexible layout for pages with login status bar */
.page-with-login-bar {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-with-login-bar .main-content {
    flex: 1;
    margin-top: 0; /* Remove fixed margin */
    padding-top: 0; /* Remove fixed padding */
}

/* Main content containers - take remaining space in body flexbox */
.body,
.page {
    flex: 1; /* Take remaining space after login bar */
    min-height: 0; /* Allow flex item to shrink */
    overflow-y: auto; /* Allow scrolling if content exceeds viewport */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    display: flex; /* Make it a flex container for its children */
    flex-direction: column; /* Stack children vertically */
    height: 100%; /* Ensure it takes full available height */
}

/* Auto-adjusting margin based on login bar height */
.auto-margin-top {
    margin-top: 0;
    padding-top: 0;
}

.spotdiff-client-wrap { position: relative; display: flex; flex: 1 1 0; min-width:0; min-height:0; align-items:center; justify-content:center; }
.spotdiff-client-wrap .spot-diff-indicator { box-sizing: border-box; }
/* Spot the Difference review markers (client overlay after question) */
.spotdiff-review { margin-top: 8px; }
.spotdiff-client-wrap { position: relative; display: inline-block; }
.spotdiff-mark {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-sizing: border-box;
	pointer-events: none;
	z-index: 10;
	box-shadow: 0 2px 8px black;
}
.spotdiff-mark.correct {
	border: 2px solid var(--accent-green-light);
    color: var(--accent-green-darker);
	background-color: rgba(12, 198, 106, 0.5);
}
.spotdiff-mark.incorrect {
	border: 2px solid var(--accent-red);
	color: var(--accent-red);
	background-color: rgba(255, 77, 79, 0.5);
}
.spotdiff-mark .spotdiff-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	user-select: none;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Spot the Difference image layout: stack in portrait, row in landscape */
.spot-diff-images {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Mobile-specific adjustments for login bar - moved to consolidated media section */

/* JavaScript will add this class to auto-adjust margins */
.auto-adjusted-margin {
    transition: padding-top 0.3s ease;
}
.loginStatusBar .logoutButton {background: var(--sred);}
.loginStatusBar .logoutButton:hover {background: var(--sred-dark);}



.himessage { font-size:6vh; margin-bottom:6vh;}
.waitingmessage { font-size:2vh;}

.disable-dbl-tap-zoom {
	  touch-action: manipulation;
  }
.warning {width:100%; padding:.1em 2em; background:rgba(100,10,10,.7); border:rgba(240,100,100,.8) thin solid; position:relative; z-index:99; color:var(--primary-text);  }
.warning:before{content:"!"; position:absolute; left:.1em; }
.error { position:absolute; width:100%; padding:.1em 2em; background:rgba(240,0,0,.6); border:rgba(240,0,0,.9) thin solid; z-index:99;}
.error:before{content:"!"; position:absolute; left:.1em; }

.titleBlock {
    background: var(--bgsep);
    color: var(--text-primary);
    display:flex; 
	flex-direction:row; 
	align-items: center;
	justify-content: center;
	flex-wrap:wrap; 
    gap: 2px 20px;
    width:100%;
    max-height: 20%;
    overflow-y: auto;}
.titleBlock .buttons {display:flex; flex-direction:row; flex-wrap:wrap; gap:2px; }

.titleBlock button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    white-space: nowrap;
	position: relative;
  	overflow: visible;
}

.titleBlock button:hover {
    background: linear-gradient(135deg, var(--accent-blue-dark), var(--accent-blue-darker));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

/* Title Centre with gradient fade edges */
.titleCentre {
    border-radius: 8px;
    transition: all 0.3s ease;
}
.badge{position: absolute;z-index:3;border-radius: 50%;background: var(--sred);top: -.75em;right:.75em;min-width:1.2em;min-height:1.2em;max-height:1.2em;line-height: 1.2em;text-align: center;box-shadow: 0 4px 8px 0 var(--bgsep), 0 6px 20px 0 var(--bgsep);}
.badge:empty{display:none;}

/* Settings Modal Styles */
.settings-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.settings-modal-content {
    background-color: var(--bg-primary);
	color: var(--text-primary);
    margin: 5% auto;
    padding: 0;
    border-radius: 15px;
    width: 90%;
    max-width: 1024px;
    max-height: 80vh;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-modal-body {
    padding: 0 30px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Settings Tabbed Box - constrain within modal */
.settings-tabbed-box.tabbed-box {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    margin: 20px 0;
}

.settings-tabbed-box.tabbed-box .tab-content {
    max-height: calc(80vh - 200px); /* Account for header, footer, and tab header */
    overflow-y: auto;
    overflow-x: hidden;
}

.settings-form-group {
    margin-bottom: 25px;
}

.watermark-logo-store-followup {
    margin-top: 10px;
}

.watermark-logo-store-notice {
    margin: 0 0 8px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary, #555);
}

.watermark-logo-store-notice a {
    color: var(--accent-blue, #3498db);
}

.watermark-use-default-wrap {
    margin: 0;
}

.settings-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.settings-form-group input,
.settings-form-group textarea,
.settings-form-group select {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.settings-form-group input:focus,
.settings-form-group textarea:focus,
.settings-form-group select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

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

.settings-form-group small {
    display: block;
    margin-top: 5px;
    color:var(--text-secondary);
    font-size: 12px;
}

.settings-form-row {
    display: flex;
    gap: 15px;
}

.settings-form-row .settings-form-group {
    flex: 1;
}

.settings-modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-primary);
    border-radius: 0 0 15px 15px;
}

.settings-modal-footer-left {
    display: flex;
    gap: 10px;
}

.settings-modal-footer-right {
    display: flex;
    gap: 10px;
}

.settings-btn-outline {
    background: transparent;
    color: var(--accent-blue);
    border: 2px solid var(--accent-blue);
}

.settings-btn-outline:hover {
    background: rgba(52, 152, 219, 0.1);
}

.settings-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.settings-btn-primary {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));
    color: white;
}

.settings-btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-blue-dark), var(--accent-blue-darker));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

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

.settings-btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

.settings-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

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

.settings-section h3 {
    margin: 0 0 20px 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 500;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 20px;
    background-color: var(--bg-secondary);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.settings-tab-btn {
    flex: 1;
    padding: 15px 20px;
    border: none;
    background: transparent;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.settings-tab-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.settings-tab-btn.active {
    background-color: var(--accent-blue);
    color: white;
}

.settings-tab-btn.active:hover {
    background-color: var(--accent-blue-dark);
}

/* Setup Wizard Modal */
.setup-wizard-modal {
    display: none;
    position: fixed;
    z-index: 2100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.setup-wizard-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 4% auto;
    padding: 0;
    border-radius: 15px;
    width: 90%;
    max-width: 640px;
    max-height: 88vh;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.setup-wizard-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setup-wizard-header h2 {
    margin: 0;
    font-size: 20px;
}

.setup-wizard-progress {
    display: flex;
    gap: 0;
    padding: 12px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.setup-wizard-step {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.setup-wizard-step .step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--border-light);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}

.setup-wizard-step.active .step-num {
    background: var(--accent-blue);
    color: white;
}

.setup-wizard-step.completed .step-num {
    background: #28a745;
    color: white;
}

.setup-wizard-body {
    padding: 24px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.setup-wizard-step-content {
    display: none;
}

.setup-wizard-step-content.active {
    display: block;
}

.setup-wizard-step-content h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
}

.setup-wizard-help {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 0 20px 0;
}

.setup-wizard-rules-presets {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.setup-wizard-preset-btn {
    padding: 10px 18px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.setup-wizard-preset-btn:hover,
.setup-wizard-preset-btn.active {
    border-color: var(--accent-blue);
    background: rgba(52, 152, 219, 0.1);
    color: var(--accent-blue);
}

.setup-wizard-points-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.setup-wizard-timer-full {
    grid-column: 1 / -1;
}

.setup-wizard-theme-grid .theme-picker-card {
    padding-right: 10px;
}

.setup-wizard-theme-grid .theme-picker-card-actions {
    display: none;
}

.setup-wizard-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-primary);
}

.setup-wizard-nav-right {
    display: flex;
    gap: 10px;
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
    max-height: 60vh;
    overflow-y: auto;
}

/* Slideshow Settings Styles */
.slideshow-settings-container {
    max-height: 60vh;
    overflow-y: auto;
}

.slideshow-filmstrip-section,
.slideshow-preview-section {
    margin-bottom: 30px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.slideshow-filmstrip-section h4,
.slideshow-preview-section h4 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

/* Film Strip Interface Styles */
.filmstrip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filmstrip-actions {
    display: flex;
    gap: 10px;
}

.filmstrip-container {
    position: relative;
    min-height: 120px;
    border: 2px dashed var(--border-medium);
    border-radius: 8px;
    background: var(--bg-primary);
    overflow-x: auto;
    overflow-y: hidden;
}

.filmstrip-dropzone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
}

.filmstrip-dropzone:hover {
    background: var(--bg-secondary);
}

.filmstrip-dropzone.dragover {
    background: var(--accent-green-light);
    border-color: var(--accent-green);
}

.filmstrip-dropzone.hidden {
    display: none;
}

.filmstrip-items {
    display: flex;
    gap: 10px;
    padding: 10px;
    min-height: 100px;
    align-items: center;
}

.filmstrip-item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    cursor: move;
    transition: all 0.3s ease;
    flex-shrink: 0;
    overflow: hidden;
}

.filmstrip-item:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-light);
}

.filmstrip-item.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.filmstrip-item .item-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.filmstrip-item .item-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.filmstrip-item .item-content .text-preview {
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
    padding: 5px;
    word-break: break-word;
    line-height: 1.2;
}

.filmstrip-item .item-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filmstrip-item:hover .item-actions {
    opacity: 1;
}

.filmstrip-item .item-actions button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.3s ease;
}

.filmstrip-item .item-actions button:hover {
    background: var(--accent-red);
    transform: scale(1.1);
}

.filmstrip-item .item-actions .edit-btn:hover {
    background: var(--accent-blue);
}

.filmstrip-item .item-number {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}

/* Uploaded Images List */
.uploaded-images-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.uploaded-image-item {
    position: relative;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-primary);
    transition: all 0.3s ease;
}

.uploaded-image-item:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-light);
}

.uploaded-image-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.uploaded-image-item .image-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
}

.uploaded-image-item .image-actions button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
}

.uploaded-image-item .image-actions button:hover {
    background: var(--accent-red);
    transform: scale(1.1);
}

.uploaded-image-item .image-info {
    padding: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-primary);
}

/* Text Blocks Styles */
.text-blocks-list {
    margin-bottom: 15px;
}

.text-block-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
}

.text-block-item .text-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.text-block-item .text-block-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.text-block-item .text-block-actions {
    display: flex;
    gap: 5px;
}

.text-block-item .text-block-actions button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--accent-gray);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
}

.text-block-item .text-block-actions button:hover {
    background: var(--accent-red);
    transform: scale(1.1);
}

.text-block-item .text-block-content {
    margin-bottom: 10px;
}

.text-block-item .text-block-content textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.text-block-item .text-block-settings {
    display: flex;
    gap: 15px;
    align-items: center;
}

.text-block-item .text-block-settings .form-group {
    margin: 0;
}

.text-block-item .text-block-settings label {
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
}

.text-block-item .text-block-settings input,
.text-block-item .text-block-settings select {
    font-size: 12px;
    padding: 5px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Slideshow Preview Styles */
.slideshow-preview-container {
    text-align: center;
}

.slideshow-preview {
    width: 100%;
    max-width: 400px;
    height: 300px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-primary);
    margin: 0 auto 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow-preview .preview-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.slideshow-preview .preview-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Fade transition (default) */
.slideshow-preview.fade-transition .preview-slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.slideshow-preview.fade-transition .preview-slide.active {
    opacity: 1;
    visibility: visible;
}

.slideshow-preview.fade-transition .preview-slide:not(.active) {
    opacity: 0;
    visibility: hidden;
}

/* Slide transition */
.slideshow-preview.slide-transition .preview-slide {
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    transform: translateX(100%);
}

.slideshow-preview.slide-transition .preview-slide.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.slideshow-preview.slide-transition .preview-slide:not(.active) {
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
}

/* No transition */
.slideshow-preview.no-transition .preview-slide {
    transition: none;
}

.slideshow-preview .preview-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.slideshow-preview .preview-slide .text-content {
    font-size: 18px;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-line;
}

.slideshow-preview .preview-slide .text-content h3 {
    margin: 0 0 10px 0;
    color: var(--accent-blue);
}

.slideshow-preview .preview-slide .text-content p {
    margin: 0;
}

.slideshow-preview .preview-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.slideshow-preview .preview-controls button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

.slideshow-preview .preview-controls button:hover {
    background: var(--accent-blue);
    transform: scale(1.1);
}

.slideshow-preview .preview-indicators {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.slideshow-preview .preview-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slideshow-preview .preview-indicator.active {
    background: var(--accent-blue);
}


.roundStart {
    background: var(--bgsep);
    color: var(--text-primary);
    font-size: 10vw;
    font-weight: bold;
}

.roundStart .round-start-description {
	font-size: max(12px, 2.6vw);
	font-weight: normal;
	margin-top: 0.45em;
	line-height: 1.35;
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.95;
	white-space: pre-wrap;
}

.roundStart .round-start-answer-type-help {
	margin-top: 0.5em;
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.roundStart .round-start-help-cards-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.roundStart .round-start-help-heading {
	font-size: max(18px, 5vw);
	font-weight: 700;
	letter-spacing: 0.02em;
    text-align: center;
}

.roundStart .round-start-help-card {
	background: var(--bg-semi-transparent);
	border: 1px solid var(--border-medium);
	border-radius: 12px;
	padding: 0.65em 0.3em 0.75em;
	box-shadow: 0 2px 10px var(--shadow-light);
}

.roundStart .round-start-help-card-title {
	font-size: max(14px, 2.85vw);
	margin: 0 0 0.45em 0;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text-primary);
}

.roundStart .round-start-help-bullets {
	margin: 0;
	padding-left: 1.2em;
	list-style-type: disc;
}

.roundStart .round-start-help-bullets li {
	margin-top: 0.38em;
	line-height: 1.38;
	font-size: max(12px, 2.35vw);
	font-weight: normal;
	opacity: 0.95;
}

.roundStart .round-start-help-bullets li:first-child {
	margin-top: 0;
}

.roundStart .round-start-help-overview {
	margin: 0 0 0.5em 0;
	font-size: max(13px, 2.5vw);
	line-height: 1.35;
	font-weight: 500;
	opacity: 0.93;
	color: var(--text-primary);
}

.roundStart .round-start-help-points {
	margin-top: 0.55em;
	padding-top: 0.5em;
	border-top: 1px solid var(--border-medium);
	text-align: left;
}

.roundStart .round-start-help-points-title {
	font-size: max(12px, 2.45vw);
	font-weight: 700;
	margin: 0 0 0.35em 0;
	color: var(--text-primary);
	opacity: 0.95;
}

.roundStart .round-start-help-points-lede {
	margin: 0 0 0.4em 0;
	font-size: max(11px, 2.25vw);
	line-height: 1.4;
	opacity: 0.92;
}

.roundStart .round-start-help-points-schemes {
	margin: 0;
	padding-left: 1.15em;
	list-style-type: disc;
}

.roundStart .round-start-help-points-schemes li {
	margin-top: 0.3em;
	line-height: 1.35;
	font-size: max(11px, 2.2vw);
	opacity: 0.9;
}

.roundStart .round-start-help-points-schemes li:first-child {
	margin-top: 0;
}

/* Optional legend row for any answer type (_answerTypeHelp.legendTitle + legendLines) */
.roundStart .round-start-help-legend {
	margin-top: 0.55em;
	padding-top: 0.5em;
	border-top: 1px solid var(--border-medium);
	font-size: max(11px, 2.15vw);
	line-height: 1.45;
}

.roundStart .round-start-help-legend-title {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.roundStart .round-start-help-legend-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em 0.35em;
}

.roundStart .round-start-help-legend-label {
	font-weight: 600;
	letter-spacing: 0.01em;
}

.roundStart .round-start-help-legend-label.swatch-correct {
	color: #538d4e;
}

.roundStart .round-start-help-legend-label.swatch-present {
	color: #b59f3b;
}

.roundStart .round-start-help-legend-label.swatch-absent {
	color: #5c5c5f;
}

.roundStart .round-start-help-legend-swatch {
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	min-width: 11px;
	min-height: 11px;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	vertical-align: -0.12em;
	flex-shrink: 0;
}

.roundStart .round-start-help-legend-swatch.swatch-correct {
	background: #538d4e;
}

.roundStart .round-start-help-legend-swatch.swatch-present {
	background: #b59f3b;
}

.roundStart .round-start-help-legend-swatch.swatch-absent {
	background: #3a3a3c;
}

.roundStart .round-start-help-legend-gap {
	display: inline-block;
	width: 0.4em;
	flex-shrink: 0;
}

.roundStart .round-start-help-row {
	font-size: max(12px, 2.4vw);
	font-weight: normal;
	line-height: 1.4;
	margin-top: 0.3em;
	opacity: 0.92;
}

.roundStart .round-start-help-label {
	font-weight: 600;
}


/* Text Edit Modal Styles */
.text-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-edit-modal-content {
    background: var(--bg-primary);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.text-edit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
}

.text-edit-modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
}

.text-edit-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.text-edit-modal-close:hover {
    background: var(--accent-red);
    color: white;
}

.text-edit-modal-body {
    padding: 20px;
}

.text-edit-form .form-group {
    margin-bottom: 15px;
}

.text-edit-form .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--text-primary);
}

.text-edit-form .form-group textarea,
.text-edit-form .form-group select,
.text-edit-form .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background: var(--bg-primary);
    color: var(--text-primary);
}

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

.text-edit-form .form-row {
    display: flex;
    gap: 15px;
}

.text-edit-form .form-row .form-group {
    flex: 1;
}

.text-edit-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid var(--border-light);
}

/* Settings modal responsiveness - moved to consolidated media section */


.middle {display:flex; flex-direction:column; align-items: center; justify-content: center; width:100%; height:100%;}
.centre {text-align:center;}

.titleBlock button .badge {
	position: absolute;
	top: 0;
	right: -.75em;
}

.myAnswerSubmitted {
	background:var(--button-primary);
	color:var(--button-primary-text);
	padding:1em;
	border-radius: 5%;
	margin:auto;

}

.chatBlock {display:flex; flex-direction:column; overflow:hidden; max-height:25%; position: relative;}
.rankingBlock {background-color:var(--bgsep); height: calc(100% - 20px); max-height: calc(100% - 1em - 20px); overflow-y: auto; position: relative; flex: 1; min-height: 0;}
.rankingBlock .chatBlock {font-size:inherit; max-height: none; overflow: visible; flex: 1; min-height: 0;}
.chatBlock .chatMessages {flex:1; overflow:auto;}
.chatBlock .add {display:flex; flex-direction:row; font-size:inherit;}
.chatBlock .add input{flex:1 1;font-size:inherit; overflow:hidden;}
.chatBlock .add button{font-size:inherit;}
.chatBlock .chatMessages .message { display:flex; flex-direction:row; border-bottom:thin #DDD solid; padding-bottom:.25em;}
.chatBlock .chatMessages .message .text {flex:1;}
.chatBlock .chatMessages .message .user {flex:0 1;padding-right:2px; color:#aaa; white-space:nowrap;}
.hover:not(.selected):hover{background-color:var(--primary-light);}
.selected {background-color:var(--primary);color:var(--primary-text)}
*[label]:before {content:attr(label);font-size:small;color:#aaa;}
.thisQuestionBlock .label {padding-top:.75em;}

.XXXanswerBlock {display:flex; flex-direction:column; overflow-y:auto;}
.answerBlock .questionImage{flex:0 1; min-height:30%; background-size:contain; background-repeat: no-repeat; background-position: center; min-width:30%;}
.popupImage{flex:0 1; height:100%; background-size:contain; background-repeat: no-repeat; background-position: center; width:100%; min-height:100px;}
.answerBlock #youtubeplayer {width:100%; height:100%}

.answerBlock .questionImage.full {
	position:absolute; top:0; left:0; bottom:0; right:0;
	background-color:rgba(32,32,32,.85);
	z-index:10;
}
.fullScreenGraph{
    position:fixed; 
    top:0; left:0; bottom:0; right:0;
	background-color:var(--bg-primary);
	color:var(--text-primary);
	z-index:10;
}
.fullScreenGraph>svg{
	position:absolute; top:0; left:0; bottom:0; right:0;
	z-index:10;
}

.graph .legend {
    fill: var(--text-primary);
    font-weight: bold;
}

.answerBlock .scoreBoard {width:100%;}
.answers {flex:1; height:100%; width:100%; display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; container-type: inline-size; container-name: answers;}
.answers>div {flex:1; display:flex; align-items: center; justify-content: center;background:var(--button-primary);  color:var(--button-primary-text); border-radius: 5%; text-align:center; box-shadow: 0 4px 8px 0 var(--bgsep), 0 6px 20px 0 var(--bgsep); border:2px solid var(--transparent);}
.answers>div:hover {
	/*background:var(--button-primary-hover);
	color:var(--button-primary-text);
    */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow-medium);
    border: 2px solid var(--accent-green);
}
/* Disable hover transform/border for spot-diff container */
.answers.spotdiff-nohover > div:hover {
	transform: none;
	box-shadow: none;
	border: none;
}
.answers .textEntry textarea {
    flex:1; 
    font-size:6vw;
    padding: 16px;
    border: 2px solid var(--border-medium);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 56px;
    width:100%;
    resize: none;
    overflow-y: auto;
}
        
.answers .textEntry textarea:focus {
        outline: none;
        border-color: var(--accent-blue);
        box-shadow: 0 0 0 3px var(--shadow-blue-focus);
}
.answers .textEntry {background: var(--bgsep); display:flex; flex-direction:column; }
.answers .textEntry-input-wrap { position: relative; min-width: 0; width:100%; }


.answers .myAnswers {flex:1; display:flex; align-items: center; justify-content: center;
    background:var(--bg-primary);  color:var(--text-primary); border-radius: 5%; text-align:center; 
    box-shadow: 0 4px 8px 0 var(--bgsep), 0 6px 20px 0 var(--bgsep);}

/* Hide myAnswers div when empty */
.answers .myAnswers:empty {
    display: none;
}

.answers .myAnswers:hover {
    background:var(--bg-primary);
    color:var(--text-primary);
}

/* Blend mode for options over background (Photoshop-style) - uses ::before so text stays readable */
.answers > div.halves,
.answers > div.thirds,
.answers > div.forths,
.answers > div.fifths,
.answers .quertykey {
	position: relative;
	background: transparent !important;
}
.answers > div.halves::before,
.answers > div.thirds::before,
.answers > div.forths::before,
.answers > div.fifths::before,
.answers .quertykey::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--opt-bg, var(--button-primary));
	mix-blend-mode: var(--theme-body-bg-blend-mode, normal);
	border-radius: inherit;
	z-index: -1;
}
.answers .halves { flex: 0 0 calc(50% - 5px); overflow:hidden;}
.answers .thirds { flex: 0 0 calc(33.3% - 6.67px); overflow:hidden;}
.answers .forths { flex: 0 0 calc(25% - 8px); overflow:hidden;}
.answers .fifths { flex: 0 0 calc(20% - 9px); overflow:hidden;}

/* Fallback: clamp ensures min readable size on small screens, max on large */
.halves.txtL {font-size: clamp(14px, 10vw, 64px);}
.halves.txtML {font-size: clamp(13px, 8vw, 32px);}
.halves.txtMS {font-size: clamp(12px, 6vw, 20px);}
.halves.txtS {font-size: clamp(11px, 3vw, 16px);}

.thirds.txtL {font-size: clamp(14px, 9vw, 64px);}   
.thirds.txtML {font-size: clamp(13px, 8vw, 32px);}
.thirds.txtMS {font-size: clamp(12px, 6vw, 20px);}
.thirds.txtS {font-size: clamp(11px, 3vw, 16px);}

.forths.txtL {font-size: clamp(14px, 8vw, 64px);}
.forths.txtML {font-size: clamp(13px, 6vw, 32px);}
.forths.txtMS {font-size: clamp(12px, 4vw, 16px);}
.forths.txtS {font-size: clamp(11px, 2vw, 14px);}

.fifths.txtL {font-size: clamp(14px, 7vw, 64px);}
.fifths.txtML {font-size: clamp(13px, 4vw, 32px);}
.fifths.txtMS {font-size: clamp(12px, 3vw, 14px);}
.fifths.txtS {font-size: clamp(11px, 1.5vw, 12px);}

/* Container queries: size from actual answers area when supported */
@container answers (min-width: 1px) {
	.halves.txtL {font-size: clamp(14px, 10cqi, 64px);}
	.halves.txtML {font-size: clamp(13px, 8cqi, 48px);}
	.halves.txtMS {font-size: clamp(12px, 6cqi, 32px);}
	.halves.txtS {font-size: clamp(11px, 5cqi, 24px);}
	.thirds.txtL {font-size: clamp(14px, 9cqi, 64px);}
	.thirds.txtML {font-size: clamp(13px, 8cqi, 48px);}
	.thirds.txtMS {font-size: clamp(12px, 6cqi, 32px);}
	.thirds.txtS {font-size: clamp(11px, 4cqi, 18px);}
	.forths.txtL {font-size: clamp(14px, 8cqi, 64px);}
	.forths.txtML {font-size: clamp(13px, 6cqi, 48px);}
	.forths.txtMS {font-size: clamp(12px, 4cqi, 32px);}
	.forths.txtS {font-size: clamp(11px, 2cqi, 14px);}
	.fifths.txtL {font-size: clamp(14px, 7cqi, 64px);}
	.fifths.txtML {font-size: clamp(13px, 4cqi, 48px);}
	.fifths.txtMS {font-size: clamp(12px, 3cqi, 32px);}
	.fifths.txtS {font-size: clamp(11px, 1.5cqi, 12px);}
}


.answers .correct-answer-highlight {
    background: transparent;
    border: 2px solid var(--accent-green-darker);
    color: var(--white);
    font-weight: bold;
}
.answers .correct-answer-highlight::before {
    background: var(--accent-green-dark);
}


.theQuestion {}


.verticalflex {display:flex; flex-direction:column; height:100%; max-height:100%; width:100%;	} 
.verticalflex>* {flex:1;}
.horizontalflex {display:flex; flex-direction:row; height:100%; width:100%;} 
.horizontalflex>* {flex:1;}
.answers .quertyrow {width:100%; display:flex; flex-direction:row; }
.answers .quertyrow .quertykey{flex:1; font-size:4vw;}
.numberView {width: 100%;height: 100%;display: flex;flex-direction: column;}
.numberRow{display:flex; flex:1; font-size:4.7vw;}
.numberRow>*{flex:1;}
.numberRow button{height:auto; font-size:inherit; min-height:auto; margin:2px !important;}
.numericAnswer { margin:2px; border:thin solid var(--primary-text);  height:1.5em;  text-align:right;line-height:1.5em; background:var(--bgsep); font-size:5vw; padding-right:1em;}

.dateAnswerWrap {display:flex; flex-direction:column; gap:10px; width:100%; padding:8px 4px;}
.dateAnswerHint {font-size:0.95em; opacity:0.9;}
.dateAnswerInput {
	width:100%;
	min-height:52px;
	font-size: clamp(24px, 9vw, 42px);
	padding:10px 12px;
	border:1px solid var(--border-medium);
	border-radius:10px;
	background:var(--bgsep);
	color:var(--primary-text);
}
.dateAnswerActions {display:flex; gap:8px;}
.dateAnswerActions .button {flex:1; min-height:48px;}

.reorderQuestion {flex:1; display:flex; flex-direction:column;}

.reorderQuestion .reorderList{flex:1; display:flex; flex-direction:column; width:100%; font-size:5vh; margin:0; }
.reorderQuestion .reorderList.horizontal {flex-direction:row; height:100%;}
.reorderQuestion .reorderList li{flex:1; display:flex; align-items: center; justify-content: center; border:5px solid white; background:var(--primary-light); border-radius: 5%; text-align:center; flex-direction:row;}

.reorderQuestion .reorderList.horizontal li{flex-direction:column;}

.reorderQuestion button {flex:0.2;}
.reorderQuestion .reorderList li span{flex:1; display:flex; justify-content: center; align-items:center;}

.reorderQuestion .listgt5 { border:3px !important; font-size:3.5vh;}
.reorderQuestion .listgt10 { border:2px !important;font-size:3vh;}
.reorderQuestion .listgt15 { border:1px !important; font-size:2.8vh;}
.reorderQuestion .listgt20 { border:1px !important; font-size:2.6vh;}
.reorderQuestion .listgt25 { border:1px !important; font-size:2.4vh;}
.reorderQuestion .listgt30 { border:1px !important; font-size:2.2vh;}

.reorderQuestion i { color:var(--primary-light);}

.shownpoints {display:flex; flex-direction:row; justify-content:center;}
.shownpoints>span {border-radius:1em; padding:0 0.5em; margin:0 0.5em;}
.shownpoints .points_for_correct {background-color:var(--sgreen-dark); color:#FFF;}
.shownpoints .points_for_fastest {background-color:var(--sblue-dark); color:#FFF;}
.shownpoints .points_for_incorrect {background-color:var(--sred-dark); color:#FFF;}
.shownpoints .points_for_missing {background-color: #000; color:#FFF;}

.fwmessage {width:100%; margin-bottom: 1em;}

.statbar { width:100%; position:relative; height:3em; flex:1; min-height:2.6em; max-height:5em; container-type: size;}
.percbar { background-color:var(--sred); height:100%; min-height:2.6em;}
.peoplebar {position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; white-space:wrap; opacity:0.5; font-size: 80cqh;}
.peoplebar .people {display:flex; flex-direction:row; flex-wrap:wrap; gap:0.5em;}
.peoplebar.voters {bottom:auto; height:50%; font-size: 40cqh;}

.votersbar {position:absolute; top:50%; bottom:0; left:0; right:0; overflow:hidden; white-space:wrap; opacity:0.5;}
.votersbar .voters {display:flex; flex-direction:row; flex-wrap:wrap; gap:0.5em;}

.Correct .percbar { background-color:var(--sgreen); height:100%; }
.answerbar {position:absolute; top:0; bottom:0; left:0; right:0; display:flex; align-items: center; justify-content: center; overflow:hidden;}
.stats {display:flex; flex-direction:column; gap:1em; margin-bottom: 1em;}


.stats .drawing_single {height:200px; width:200px; overflow:hidden;}
.stats .drawing_multiple {height:100px; width:100px; overflow:hidden; }
.section {width:100%; border:1px solid var(--border-medium); border-radius: 12px; padding:1em; background-color:var(--bgsep); 
    display:flex; flex-direction:column; gap:2px;}

.answerBlock {width:100%; flex:1; display:flex; flex-direction:column;overflow:auto;}
.answerBlock .correctAnswer {background-color:var(--sgreen); width:100%; color:var(--white);}
.answerBlock .incorrectAnswer {background-color:var(--sred); width:100%; color:var(--white);}
.answerBlock .eoq {width:100%;height:100%; background-color:var(--bgsep)}

.drawingarea {
	display:flex; flex-direction:column; flex:1;
}
.answerBlock .drawingarea .drawing{ width:90%; height:80%;}


.canvasdiv>canvas {background:#EEE; margin:0; padding:0; border:0;}

.pressMe {
    font-size: 18px;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 12px;
    margin: 20px auto;
    display: block;
    min-height: 56px;
    box-shadow: 0 4px 12px var(--shadow-light);
}

.pointsTable {width:100%;}
.pointsTable tr:nth-child(even) { background-color:var(--bgsep);}
.pointsTable .person {text-align:left;}
.pointsTable tr.myScore {
    background-color: var(--accent-blue-light);
    animation: myScorePulse 3s ease-in-out infinite, myScorePulse 2s ease-in-out infinite;
}
/* Celebratory Winner Row Styles */
.pointsTable tr.first {
	background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
	background-size: 200% 200%;
	animation: winnerShimmer 3s ease-in-out infinite, winnerPulse 2s ease-in-out infinite;
	color: #000;
	font-weight: bold;
	font-size: 1.1em;
	position: relative;
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 165, 0, 0.4);
	border: 2px solid #FFD700;
	transition: box-shadow 0.3s ease;
}

.pointsTable tr.first:hover {
	box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 165, 0, 0.6);
}

.pointsTable tr.first .rank {
	font-weight: 900;
	font-size: 1.2em;
	color: #8B4513;
	text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
	position: relative;
}

.pointsTable tr.first .rank::before {
	content: '🏆';
	margin-right: 5px;
	display: inline-block;
	animation: trophyBounce 1.5s ease-in-out infinite;
}

.pointsTable tr.first .score {
	font-weight: 900;
	font-size: 1.2em;
	color: #8B4513;
	text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
}

/* Winner shimmer animation - gold gradient moving */
@keyframes winnerShimmer {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Winner pulse animation - glowing effect */
@keyframes winnerPulse {
	0%, 100% {
		box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 165, 0, 0.4);
	}
	50% {
		box-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 60px rgba(255, 165, 0, 0.7), 0 0 80px rgba(255, 140, 0, 0.5);
	}
}

@keyframes myScorePulse {
	0%, 100% {
		box-shadow: 0 0 20px var(--accent-blue-light), 0 0 40px  var(--accent-blue-dark);
	}
	50% {
		box-shadow: 0 0 30px var(--accent-blue-light), 0 0 60px var(--accent-blue-dark);
	}
}


/* Trophy bounce animation */
@keyframes trophyBounce {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	25% {
		transform: translateY(-5px) rotate(-5deg);
	}
	75% {
		transform: translateY(-5px) rotate(5deg);
	}
}

.octoggle{display: block;position: sticky;bottom: 0;flex: 0 0 auto !important;width: 100%;text-align: center;cursor: pointer;overflow:visible !important; font-size:3vh; background-color:var(--bgsep); margin: 0; padding: 8px; box-sizing: border-box; min-height: 40px; max-height: 60px; z-index: 10;}
.hidden{display:none;}

.timer {position:relative; width:100%;  min-width:100%; min-height:5px; background-color:var(--sgreen); border:0 !important; }

/* Timer countdown overlay - full screen countdown behind buttons */
.timer-countdown-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100; /* Behind buttons but visible */
	pointer-events: none; /* Allow clicks to pass through to buttons */
	font-size: 30vw; /* Responsive large text */
	font-weight: 900;
	color: rgba(255, 0, 0, 0.6); /* Semi-transparent red */
	text-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.6);
	animation: countdownPulse 0.5s ease-in-out;
	user-select: none;
	-webkit-user-select: none;
}

@keyframes countdownPulse {
	0% {
		transform: scale(0.8);
		opacity: 0.4;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
	100% {
		transform: scale(1);
		opacity: 0.6;
	}
}

/* Mobile adjustments for countdown */
@media (max-width: 768px) {
	.timer-countdown-overlay {
		font-size: 40vw;
	}
}
.perc {position:absolute; top:0; bottom:0; left:0; background-color:var(--sred);}

.theQuestion { font-size:5vw;}

.votingAnswers{ display:flex; flex-direction:column; height:100%; width:100%;}
.votingAnswers.drawingVotes{flex-direction:row; flex-wrap:wrap; justify-content:space-evenly;align-content:space-evenly;}
.votingAnswers .votingAnswer {flex:1; display:flex; align-items: center; justify-content: center;text-align:center; margin: 1em; }

.drawingVotes>.votingAnswer>.canvasdiv{height:200px; width:300px; overflow:hidden;}
.votingAnswers .votingAnswer i {position:absolute; left:1.5em;;}

.myAnswers {flex:0;}
.drawinganswer {z-index:9;}

.buzzer {position:relative;width:50vw;height:50vw; display: block;padding: 21vw 0;cursor: pointer;text-align: center;text-decoration: none;outline: none;color: #fff; border: none;border-radius: 50%;background-color: #aaa;box-shadow: 0 2vw #999;}
.buzzer .content {position: absolute;width: 100%;font-size:8vw;}
.buzzer.enabled{background-color: var(--primary);box-shadow: 0 2vw var(--primary-dark);}
.buzzer.enabled:hover {background-color: var(--primary-dark);}
.buzzer.enabled:active {background-color: var(--primary-dark);box-shadow: 0 1vw var(--primary-dark);transform: translateY(1vw);}
.pictureGridContainer {position:relative; background-size:100% 100% !important; flex-wrap:wrap;}
.pictureGridContainer .answerpic{ position:absolute; left:0; top:0; right:0; bottom:0; display:block; width:100%; height:100%; z-index:-1;}

.pictureGridContainer .answerMatrix {box-sizing:border-box; border:thin solid rgba(255,255,255,0.5); display:flex; align-items: center; justify-content: center; box-shadow: -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px 1px 0 rgba(0,0,0,0.5), 1px 1px 0 rgba(0,0,0,0.5);}


.axisx .tick text {transform-origin: 0 0;transform: rotate(90deg) translate(1.5em, -1.24em);}
.legend rect {rx:9px; width:14px; height:14px; transform:translateY(2px);}
.grid {stroke-opacity:0.1}


.toggleBtn {position: relative;display: inline-block;width: calc(calc(var(--toggle-size) * 2) + 8px);height: calc(var(--toggle-size) + 8px)}
.toggleBtn input { opacity: 0;width: 0;height: 0;}
/* The slider */
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color:#222;-webkit-transition: .4s;transition: .4s;border-radius:  var(--toggle-size);box-shadow: 0 0 1px var(--primary-text);}

.slider:before {position: absolute;content: "";height: var(--toggle-size);width:  var(--toggle-size);left: 4px;bottom: 4px;background-color: var(--primary-text);-webkit-transition: .4s;transition: .4s;border-radius: 50%;}

input:checked + .slider {background-color: var(--sgreen-dark);}
input:focus + .slider {box-shadow: 0 0 1px var(--sgreen-dark);}
input:checked + .slider:before {-webkit-transform: translateX( var(--toggle-size));-ms-transform: translateX( var(--toggle-size));transform: translateX( var(--toggle-size));}

.preferencesBlock {background-color:var(--bgsep); border-bottom:thin solid #aaa;}
.preferencesBlock .setting {display:flex; padding:1em;}
.preferencesBlock .setting .label {line-height:calc(var(--toggle-size) + 8px); padding-left:1em;}


.donatelink {color:var(--primary-text); text-decoration: none; cursor: pointer; }

.pointsTableArea{position:relative;}

.pointsTableArea .label {text-align:center; font-size:1.5em; background-color: var(--primary); color:var(--primary-text);}


.guesses .person {margin:2px 5px 2px 2px; padding:5px; background-color:rgba(100,255,255,0.5);}
.guessList {display:flex; flex-direction:row; flex-wrap:wrap;margin: 10px 0;}
.guessList>li  {padding:2px 5px; margin: 2px 5px; background-color:rgba(100,100,255,0.5);}
.playersBlock table{width:100%;}
.graphArea .graph{width:100%;}
.elipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.playersBlock .player .ptsforcorrect {text-align:right;}
.playersBlock .player .ffpts {text-align:right;}
.playersBlock .player .bonus{text-align:right;}
.playersBlock .player .jokersplayed{text-align:right;}
.playersBlock .player .score{text-align:right; font-weight:bold;}

.playersBlock .player {color:var(--accent-red-darkest) !important;}
.playersBlock .player.active {color:var(--text-primary) !important; }
.playersBlock .player.playingJoker {color:var(--accent-orange-darker)!important; }

.playersBlock .player.lostFocus {opacity:0.4; }

.playersBlock .player.gotQuestion {background-color:var(--accent-purple-dark) !important; color:#FFF!important; }
.playersBlock .player.outOfTime {background-color:var(--accent-red-darker) !important; color:#FFF!important; }
.playersBlock .player.voted {background-color:var(--accent-green-darker) !important; color:#000!important; }
.playersBlock .player.answered {background-color:var(--sgreen-dark) !important; color:#FFF!important; }


/* Catch Phrase Interlude Styles */
.catchphrase-container {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    color: var(--text-primary);
    flex:1;
}

.catchphrase-header {
    color: var(--text-primary);
    padding: 10px;
    text-align: center;
    margin:0;
    padding:0;
}

.catchphrase-title {
    margin:0;
    padding:0;
    font-size: 1.2em;
    font-weight: 600;
}

.catchphrase-subtitle {
    font-size: 0.8em;
    opacity: 0.9;
    margin:0;
    padding:0;
}

.catchphrase-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
}

.image-grid-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    min-height: 300px;
    max-height: 80vh;
}

.image-grid {
    display: grid;
    gap: 2px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px var(--shadow-light);
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}

.image-piece {
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
    min-width: 0;
    min-height: 0;
}


.image-piece.revealed {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px var(--accent-green-light);
}

.image-piece.newly-revealed {
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 3px var(--accent-yellow-light);
}

.image-piece.lighting {
    animation: pulse 1s infinite;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 20px var(--accent-yellow);
}

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

.piece-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.piece-overlay.revealed {
    opacity: 0;
    pointer-events: none;
}

.guessing-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.guessing-section .guess-input {
    width: 100%;
}
.guessing-section .guess-btn {
    width: 50%;
}


/* ============================================================================
   PLAYER LOGO STYLES
   ============================================================================ */

.player-logo {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Mozilla", "Twemoji Mozilla", "Segoe UI Symbol", sans-serif;
    display: inline-block;
    text-align: center;
    font-size: 1em;
    line-height: 1.2em;
    border-radius: 50%;
    overflow: hidden;
}

.player-logo-block {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Mozilla", "Twemoji Mozilla", "Segoe UI Symbol", sans-serif;
    font-size: 1.2em;
    display: inline-block;
    text-align: center;
    line-height: 1;
}

/* ============================================================================
   LOGO SELECTION POPUP STYLES
   ============================================================================ */

.logo-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: none;
    backdrop-filter: blur(5px);
}

.logo-popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border: 2px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 8px 32px var(--bgsep);
    max-width: 90vw;
    max-height: 90vh;
    width: 600px;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.logo-popup-container.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.logo-popup-content {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.logo-popup-close {
    background: var(--sred);
    border: none;
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-weight: bold;
}

.logo-popup-close:hover {
    background: var(--sred-dark);
    transform: scale(1.05);
}

.logo-popup-preview {
    text-align: center;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}
.logo-popup-preview *{
    flex: 1;
}

.logo-preview {
    font-size: 5em;
    width: 1.3em;
    height: 1.3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 3vw;
}

.logo-preview-label {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.logo-popup-categories {
    margin-bottom: 5px;
    flex-shrink: 0;
}

.logo-popup-categories .category-btn {
    padding: 8px 16px;
    border: 2px solid var(--border-medium);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: bold;
    margin: 2px;
}

.logo-popup-categories .category-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
}

.logo-popup-categories .category-btn.active {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: var(--primary-text);
}

.logo-popup-grid {
    margin-bottom: 25px;
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-secondary);
}

/* Custom scrollbar for logo grid */
.logo-popup-grid::-webkit-scrollbar {
    width: 8px;
}

.logo-popup-grid::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.logo-popup-grid::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

.logo-popup-grid::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}
.logo-popup-grid .logo-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    border: 2px solid var(--border-medium);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
    margin: 2px;
}

.logo-popup-grid .logo-item:hover {
    border-color: var(--primary);
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

.logo-popup-grid .logo-item.selected {
    border-color: var(--sgreen);
    background: var(--sgreen);
    color: var(--white);
}

.logo-popup-grid .logo-emoji {
    font-size: 24px;
    margin-bottom: 5px;
}

.logo-popup-grid .logo-name {
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
    font-weight: bold;
}
.color-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.color-selection *{
    flex: 1;
}

.color-selection .color-group {
    transition: all 0.3s ease;
    overflow: hidden;
}

.logo-popup-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-direction: row;
    flex-shrink: 0;
    padding: 15px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-medium);
    margin-top: auto;
}

.logo-popup-cancel,
.logo-popup-confirm {
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.logo-popup-cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-medium);
}

.logo-popup-cancel:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.logo-popup-confirm {
    background: var(--sgreen);
    color: var(--white);
    border: 2px solid var(--sgreen);
}

.logo-popup-confirm:hover {
    background: var(--sgreen-dark);
    border-color: var(--sgreen-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--bgsep);
}

/* Mobile responsiveness for popup - moved to consolidated media section */

/* ============================================================================
   SPOT THE DIFFERENCE STYLES
   ============================================================================ */

.spot-difference-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
}
.spotdifference-container:hover {
    transform: translateY(0);
    box-shadow: 0px;
    border: 0px;
}

.spot-diff-instruction {
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.spot-diff-images {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.spot-diff-wrapper {
    position: relative;
    display: flex;
    gap: 10px;
    cursor: crosshair;
    border: 3px solid #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.spot-diff-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.spot-diff-status {
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 0px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.spot-diff-submit {
    display: block;
    margin: 0 auto;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(45deg, #4CAF50, #45a049);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.spot-diff-submit:hover:not(:disabled) {
    background: linear-gradient(45deg, #45a049, #4CAF50);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.spot-diff-submit:disabled {
    background: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.spot-diff-indicator {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ff4444;
    border: 3px solid #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    animation: spotDiffPulse 0.5s ease-out;
    box-shadow: 0 2px 10px rgba(255, 68, 68, 0.5);
}

@keyframes spotDiffPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.spot-diff-error {
    color: #ff4444;
    text-align: center;
    font-weight: bold;
    margin: 10px 0;
    padding: 10px;
    background: rgba(255, 68, 68, 0.1);
    border-radius: 5px;
    border: 1px solid rgba(255, 68, 68, 0.3);
}


/* Hoster Spot the Difference Styles */
.hoster-spot-diff-images {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.hoster-image-label {
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.hoster-spot-diff-image {
    max-width: 300px;
    max-height: 300px;
    border: 2px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hoster-spot-diff-info {
    margin: 20px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.hoster-spot-diff-info div {
    margin: 5px 0;
    font-weight: 500;
}

.diff-count {
    color: #28a745;
    font-weight: bold;
}

.diff-scheme {
    color: #6c757d;
}

.diff-stop {
    color: #fd7e14;
}

.diff-tolerance {
    color: #6f42c1;
}

/* Interlude Buzzer Styles */
.interlude-buzzer-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.interlude-buzzer {
    background: linear-gradient(135deg, var(--sred), var(--sred-light));
    border: 3px solid var(--sred-dark);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(200, 33, 109, 0.4);
    animation: interludeBuzzerPulse 2s infinite;
}

.interlude-buzzer.enabled:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(200, 33, 109, 0.6);
}

.interlude-buzzer .content {
    color: white;
    font-weight: bold;
    font-size: 0.7em;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.interlude-buzzer:not(.enabled) {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}

@keyframes interludeBuzzerPulse {
    0% { box-shadow: 0 4px 15px rgba(200, 33, 109, 0.4); }
    50% { box-shadow: 0 6px 25px rgba(200, 33, 109, 0.8); }
    100% { box-shadow: 0 4px 15px rgba(200, 33, 109, 0.4); }
}

/* ==========================================================
   Media Queries (consolidated at bottom)
   ========================================================== */
/* moved spot-diff landscape rules into consolidated landscape block below */

@media (orientation: portrait) {
	/*body {font-size:3vw;}*/
}
@media (max-width: 964px) {
    .loginStatusBar .login-status-right button{
        font-size: 0.7em;
        padding: 6px 8px;
        white-space: nowrap;
    }
}

/* Responsive design for catchphrase image grid */
@media (max-width: 768px) {
    body { overflow-x: hidden; max-width: 100vw; }
	.body, .dashboard-container, .prepare-container, .page { max-width: 100vw; overflow-x: hidden; box-sizing: border-box; }
	.auto-adjusted-margin { max-width: 100vw; overflow-x: hidden; box-sizing: border-box; }
	.image-grid-container {
		padding: 15px;
		min-height: 250px;
		max-height: 60vh;
	}
	
	.image-grid {
		gap: 1px;
	}
	
	.piece-overlay {
		font-size: 1.5em;
	}

	.spot-difference-container {
		padding: 10px;
	}

	.spot-diff-instruction {
        font-size: 0.8em;
		margin-bottom: 10px;
	}

	.spot-diff-images {
		margin-bottom: 10px;
	}

	.spot-diff-wrapper {
		flex-direction: column;
		gap: 10px;
	}

	.spot-diff-image {
		max-width: 100%;
		max-height: 300px;
	}

	.spot-diff-submit {
		padding: 10px 25px;
		font-size: 14px;
	}

	.spot-diff-indicator {
		width: 16px;
		height: 16px;
		border-width: 2px;
	}

	/* Settings modal responsiveness */
	.settings-modal-content { width: 95%; margin: 10% auto; }
	.settings-form-row { flex-direction: column; gap: 0; }
	.settings-modal-footer { flex-direction: column; }
	.settings-btn { width: 100%; }
	.slideshow-settings-container { max-height: 50vh; }
	.uploaded-images-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
	.uploaded-image-item img { height: 100px; }
	.slideshow-preview { height: 250px; }
	.text-block-item .text-block-settings { flex-direction: column; align-items: flex-start; gap: 10px; }

	/* Mobile-specific adjustments for login bar */
	.loginStatusBar { padding: 8px 12px; gap: 8px; background-size: auto calc(1em + 10px); }
	.loginStatusBar .login-status-left,
	.loginStatusBar .login-status-right { flex-direction: row; flex-wrap: wrap; gap: 4px;}
	.loginStatusBar .login-status-right {  justify-content: right }
    .loginStatusBar a, .loginStatusBar button { font-size: 0.6em; padding: 6px 8px; white-space: nowrap; }



	/* Mobile responsiveness for logo popup */
	.logo-popup-container { width: 95vw; max-height: 95vh; }
	.logo-popup-buttons { flex-direction: column; align-items: center; }
	.logo-popup-cancel, .logo-popup-confirm { width: 100%; max-width: 200px; }
	.logo-popup-grid { max-height: 300px; padding: 8px; }
	.logo-popup-grid .logo-item { min-width: 60px; padding: 8px 4px; }
}

/* Settings modal responsiveness consolidated above */

@media (orientation: landscape) {
    /* spot-diff layout */
    .spot-diff-images { flex-direction: row; justify-content: center; align-items: stretch; }
    .spot-diff-wrapper { flex-direction: row; }

    /* general landscape sizing */
    /*body {font-size:2.2vh;}*/
    .buzzer {width:25vh;height:25vh; padding: 12.5vh 0;}
    .buzzer .content {font-size:4vh;margin-top:-2vh;}
    .answers .fifths {font-size: clamp(11px, 4vh, 22px); overflow:hidden;}

    .querty {flex:1;}
    .reorderQuestion .reorderList{font-size:6vh;}
    .theQuestion { font-size:5vh;};
}
@media (max-width: 480px) {
	.image-grid-container {
		padding: 10px;
		min-height: 200px;
		max-height: 50vh;
	}
	
	.piece-overlay {
		font-size: 1.2em;
	}
} 
.votingAnswers .votingAnswer {}
.playersBlock > table > tbody tr:nth-child(even){background-color:var(--bgsep);}
.playersBlock > table > tbody tr:nth-child(odd){background-color:var(--bg-semi-transparent);}
.playersBlock > table > thead tr:first-child{ background-color:var(--primary); color:var(--primary-text); }

/* Mobile-specific adjustments for login bar consolidated above */

/* Mobile responsiveness for popup consolidated above */

/* Wordle question type — tiles stay square; width shared across columns so long words fit narrow screens */
.wordle-game {
	--wordle-cols: 5;
	display: flex;
	width: 100%;
	max-width: min(420px, 100%);
	box-sizing: border-box;
	margin: 0 auto;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
}
/* .answers>div sets align-items:center — that shrinks the grid to content width and breaks the tile row. Stretch full width and allow flex shrink. */
.answers > .wordle-game {
	flex: 1 1 100%;
	width: 100%;
	max-width: min(420px, 100%);
	min-width: 0;
	align-items: stretch;
	align-self: stretch;
}
.wordle-grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
	width: 100%;
	min-width: 0;
}
.wordle-row {
	display: grid;
	/* Column count set inline in answers.js (repeat(N, …)) — CSS repeat(var(--n)) is unreliable */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-flow: row;
	grid-auto-rows: auto;
	gap: 6px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	justify-content: stretch;
	align-items: stretch;
}
.wordle-tile {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	aspect-ratio: 1 / 1;
	height: auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: clamp(8px, 2.8vmin, 22px);
	text-transform: uppercase;
	border: 2px solid var(--white);
	border-radius: 4px;
	background: var(--bg-primary);
	color: var(--text-primary, #fff);
	overflow: hidden;
}
.wordle-tile.correct {
	background: #538d4e;
	border-color: #538d4e;
}
.wordle-tile.present {
	background: #b59f3b;
	border-color: #b59f3b;
}
.wordle-tile.absent {
	background: #3a3a3c;
	border-color: #3a3a3c;
}
.wordle-msg {
	font-size: 0.95em;
	margin: 8px 0;
	min-height: 1.4em;
}
.wordle-draft-row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-flow: row;
	gap: 6px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	justify-content: stretch;
	margin-bottom: 10px;
	cursor: text;
}
.wordle-tile.wordle-draft-tile {
	transition: border-color 0.12s ease, background 0.12s ease;
}
.wordle-tile.wordle-draft-tile:not(.filled) {
	border-style: dashed;
	background: transparent;
	color: var(--text-primary, #fff);
}
.wordle-tile.wordle-draft-tile.filled {
	border-style: solid;
	background: var(--bg-secondary, #333);
}
.wordle-input-row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: nowrap;
	width: 100%;
	min-width: 0;
}
.wordle-input {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1.1em;
	padding: 8px 10px;
	text-transform: uppercase;
}
.wordle-submit-btn {
	flex: 0 0 auto;
	padding: 8px 16px;
	cursor: pointer;
}

/* ============================================
   Generic TabbedBox System Styles
   ============================================ */

/* Base TabbedBox Container */
.tabbed-box {
    display: flex;
    flex-direction: column;
    background: var(--bgsep);
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: 0 4px 20px var(--shadow-light);
    flex: 1 1 auto;
    border: 1px solid var(--border-medium);
    min-height: 0; /* Allow flex item to shrink */
    max-height: 100%; /* Prevent extending beyond parent */
}

/* Tab Header */
.tab-header {
    display: flex;
    min-height: 48px;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.tab-header-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #3498db #2c3e50;
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
}

.tab-header-tabs::-webkit-scrollbar {
    height: 6px;
}


.tab-header-tabs::-webkit-scrollbar-track {
    background: #2c3e50;
}

.tab-header-tabs::-webkit-scrollbar-thumb {
    background: #3498db;
    border-radius: 3px;
}

/* Tab Buttons */
.tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 4px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    position: relative;
    flex: 1;
    border-radius: 8px 8px 0 0;
}

.tab-button:hover {
    background: var(--accent-blue-dark);
    transform: translateY(-1px);
}

.tab-button.selected {
    background: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    color: var(--white);
}

.tab-button .icon {
    font-size: 1.8em;
    opacity: 0.9;
}

.tab-button .label {
    font-size: 0.8em;
    text-align: center;
    line-height: 1.2;
    font-weight: 500;
}

/* Tab Header Action Buttons */
.tab-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 0 10px;
    flex-shrink: 0;
}

.tab-header-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--accent-blue);
    color: var(--white);
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab-header-actions button:hover {
    background: var(--accent-blue-dark);
    transform: translateY(-1px);
}

.tab-header-actions button:active {
    transform: translateY(0);
}

/* Tab Content */
.tab-content {
    border-top: 1px solid var(--border-medium);
    flex: 1;
    min-height: 0; /* Allow flex item to shrink below content size */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0; /* Allow flex item to shrink */
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%; /* Ensure full height for flexbox */
}

/* Type Description */
.type-description {
    font-size: 1em;
    margin-bottom: 4px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border-left: 4px solid #3498db;
    color: #495057;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .questionTypes {
        margin: 10px 0;
    }
    
    .tab-header {
        min-height: 50px;
        padding: 5px;
    }
    
    .tab-header-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-button {
        min-width: 50px;
        min-height: 50px;
        padding: 6px 3px;
        flex-shrink: 0;
    }
    
    .tab-button .icon {
        font-size: 1em;
    }
    
    .tab-button .label {
        font-size: 0.55em;
        line-height: 1.1;
    }
    
    .tab-content {
        padding: 8px;
        max-height: 50vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tab-button {
        min-width: 70px;
    }
    
    .tab-button .icon {
        font-size: 1.5em;
    }
    
    .tab-button .label {
        font-size: 0.65em;
    }
}

@media (min-width: 1025px) {
    .tab-button {
        min-width: 80px;
        flex-grow: 1;
    }
    
    .tab-button .icon {
        font-size: 1.8em;
    }
    
    .tab-button .label {
        font-size: 0.7em;
    }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .tab-button .icon {
        font-size: 1.6em;
    }
}