* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #2c3e50;
color: white;
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
flex-direction: column;
}
#pageTransitionOverlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: black;
z-index: 9999;
pointer-events: none;
clip-path: circle(0% at 50% 50%);
transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
#pageTransitionOverlay.active {
pointer-events: all;
clip-path: circle(150% at 50% 50%);
}
#loadingScreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f4f8;
z-index: 10000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
#loadingScreen.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
#loadingLogo {
width: 200px;
height: auto;
margin-bottom: 2rem;
animation: pulse-slow 2s infinite;
}
.loading-bar-container {
width: 300px;
height: 10px;
background-color: #e2e8f0;
border-radius: 5px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loading-bar-fill {
height: 100%;
width: 0%;
background-color: #3b82f6;
border-radius: 5px;
transition: width 0.2s ease-out;
}
.panel-container {
box-sizing: border-box;
background-color: transparent;
border-style: solid;
border-width: 48px 48px 43px 45px;
border-image-source: url('Textures/woodpanel.png');
border-image-slice: 48 48 43 45 fill;
border-image-repeat: stretch;
border-radius: 0 !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
color: #3e2723;
position: relative;
z-index: 10;
padding: 10px;
}
@media (max-width: 768px) {
.panel-container {
border-style: solid !important;
border-width: 24px 24px 21.5px 22.5px !important;
border-image-width: 1 !important;
border-image-slice: 48 48 43 45 fill;
border-image-repeat: stretch;
background-color: #5d4037;
padding: 12px !important;
}
}
#gameSetupScreen,
#h2hSetupScreen,
#partyLobbyScreen,
#campaignScreen {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 90% !important;
max-width: 56rem !important;
z-index: 50 !important;
margin: 0 !important;
display: none;
}
#gameSetupScreen.flex,
#h2hSetupScreen.flex,
#partyLobbyScreen.flex,
#campaignScreen.flex {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
}
#cityStageScreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-width: none !important;
transform: none !important;
background-color: #111827;
border: none !important;
border-radius: 0 !important;
z-index: 200 !important;
display: none;
}
#cityStageScreen.flex {
display: flex !important;
}
#authDisplay.panel-container {
padding: 0.75rem 1.5rem;
border-radius: 9999px;
border-width: 3px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
background-color: rgba(255, 255, 255, 0.95);
z-index: 2000 !important;
}
#totalQuestionCountDisplay.panel-container {
padding: 0.5rem 1rem;
border-radius: 9999px;
border-width: 3px;
background-color: rgba(255, 255, 255, 0.95);
font-weight: 600;
color: #333;
}
#campaignScreen {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
height: 100vh !important;
width: 100vw !important;
max-width: 100% !important;
pointer-events: none;
}
#campaignHomeBtn {
pointer-events: auto !important;
cursor: pointer;
}
#campaignLevelList {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 4rem;
padding: 8rem 1rem 22rem;
width: 100vw;
max-width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
pointer-events: auto;
scroll-behavior: smooth;
position: relative;
left: 0;
right: 0;
margin: 0;
scrollbar-width: none;
-ms-overflow-style: none;
background: none !important;
}
#campaignLevelList::-webkit-scrollbar {
display: none;
}
#campaignLevelList::after {
content: '';
display: block;
width: 100%;
height: 120px;
background-image: url('clouds.png');
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center bottom;
opacity: 0.9;
flex-shrink: 0;
margin-bottom: 20px;
}
#campaignLevelList::before {
display: none !important;
}
.stage-number {
position: absolute;
left: 50%;
transform: translateX(-260px);
font-size: 3rem;
font-weight: 900;
color: white;
text-shadow: 2px 2px 0 #000;
background: #ef4444;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid white;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
z-index: 25;
}
.stage-number.active {
background: #10b981;
}
.campaign-stage-card {
width: 280px;
background: white;
border-radius: 1rem;
padding: 1rem;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 10;
cursor: pointer;
border: 1px solid #e5e7eb;
position: relative;
}
.campaign-stage-card:hover:not(.locked) {
transform: scale(1.05);
z-index: 20;
border-color: #3b82f6;
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.campaign-stage-card.locked {
filter: grayscale(1);
opacity: 0.8;
}
.bonus-stage-card {
position: absolute;
left: 50%;
transform: translateX(210px);
width: 110px;
height: 110px;
background: #1f2937;
border-radius: 1rem;
border: 4px solid #f59e0b;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0,0,0,0.5);
transition: all 0.3s ease;
z-index: 15;
overflow: hidden;
}
.bonus-stage-card:hover {
transform: translateX(210px) scale(1.1);
background: #374151;
}
.bonus-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.bonus-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 4px; }
.bonus-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: #f59e0b; letter-spacing: 1px; }
.bonus-lock-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.bonus-lock-overlay .lock-icon { font-size: 1.5rem; margin-bottom: 2px; }
.bonus-lock-overlay .cost-tag { background: #f59e0b; color: black; font-weight: bold; font-size: 0.7rem; padding: 2px 6px; border-radius: 99px; }
#campaignHealthContainer {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 400px;
border-width: 3px;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
padding: 0.5rem 1rem !important;
border-radius: 1rem;
z-index: 2000 !important;
}
#campaignHealthBar {
transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: linear-gradient(90deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.health-critical {
animation: pulse-red 1s infinite;
border-color: #ef4444 !important;
}
.health-wobble {
animation: wobble-vertical 0.4s ease-in-out;
border-color: #ef4444 !important;
}
@keyframes wobble-vertical {
0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
20% { transform: translateX(-50%) translateY(-5px) rotate(-2deg); }
40% { transform: translateX(-50%) translateY(5px) rotate(2deg); }
60% { transform: translateX(-50%) translateY(-3px) rotate(-1deg); }
80% { transform: translateX(-50%) translateY(3px) rotate(1deg); }
}
@keyframes pulse-red {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.card-shake {
animation: card-shake-anim 0.4s ease-in-out forwards !important;
}
@keyframes card-shake-anim {
0%, 100% { transform: scale(1) translateY(0) rotate(0); opacity: 1; }
20% { transform: scale(1) translateY(-5px) rotate(-1.5deg); opacity: 1; }
40% { transform: scale(1) translateY(5px) rotate(1.5deg); opacity: 1; }
60% { transform: scale(1) translateY(-3px) rotate(-0.5deg); opacity: 1; }
80% { transform: scale(1) translateY(3px) rotate(0.5deg); opacity: 1; }
}
.campaign-city-card {
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.2s;
cursor: pointer;
}
.campaign-city-card:hover:not(.locked) {
transform: scale(1.02);
}
.campaign-city-card.locked {
filter: grayscale(0.9);
cursor: not-allowed;
}
.modal-content.panel-container {
padding: 20px 30px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
button:active,
.difficulty-btn:active,
.party-answer-btn:active,
#answerOptions button:active {
transform: scale(0.95);
transition: transform 0.1s ease;
}
button:hover {
transition: all 0.2s ease;
}
@keyframes popIn {
0% { opacity: 0; transform: scale(0.8) translateY(20px); }
70% { transform: scale(1.05) translateY(0); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes popOut {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.8) translateY(20px); }
}
@keyframes popInStagger {
0% { transform: scale(0.5); opacity: 0; }
70% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.game-loaded .animate-pop-in-stagger {
opacity: 0;
animation: popInStagger 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.game-loaded .animate-pop-in-stagger.delay-100 { animation-delay: 0.1s; }
.game-loaded .animate-pop-in-stagger.delay-200 { animation-delay: 0.2s; }
.game-loaded .animate-pop-in-stagger.delay-300 { animation-delay: 0.3s; }
@keyframes dropInBounce {
0% { transform: translate(-50%, -150%); opacity: 0; }
60% { transform: translate(-50%, -40%); opacity: 1; }
80% { transform: translate(-50%, -55%); }
100% { transform: translate(-50%, -50%); }
}
.animate-drop-in {
animation: dropInBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
@keyframes slideInLeft {
from { transform: translateX(-120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
from { transform: translateX(120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.animate-slide-in-left { animation: slideInLeft 0.5s ease-out forwards; }
.animate-slide-in-right { animation: slideInRight 0.5s ease-out forwards; }
.modal-overlay.show .modal-content {
opacity: 1;
transform: scale(1) translateY(0);
}
.modal-overlay.show .modal-content,
.screen-container:not(.hidden) {
animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes nod {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-10px); }
50% { transform: translateY(0); }
75% { transform: translateY(-5px); }
}
.answer-correct-anim {
animation: nod 0.6s ease-in-out;
background-color: #10B981 !important;
color: white !important;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.answer-incorrect-anim {
animation: shake 0.5s ease-in-out;
background-color: #EF4444 !important;
color: white !important;
}
.parallax-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.parallax-container.show { opacity: 1; }
.parallax-layer {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-repeat: repeat-x;
background-position: left bottom;
transition: background-image 0.5s ease;
}
.layer1 {
background-image: url('Textures/parallax1.png');
background-size: 2115px auto;
background-position-y: bottom;
animation: parallax-scroll-1 55s linear infinite;
z-index: 3;
}
body.night-mode .layer1 { background-image: url('Textures/night-parallax1.png'); }
.layer2 {
background-image: url('Textures/parallax2.png');
background-size: 1725px auto;
animation: parallax-scroll-2 110s linear infinite;
z-index: 2;
}
body.night-mode .layer2 { background-image: url('Textures/night-parallax2.png'); }
.layer3 {
background-image: url('Textures/parallax3.jpg');
background-size: 1920px auto;
animation: parallax-scroll-3 165s linear infinite;
z-index: 1;
}
body.night-mode .layer3 { background-image: url('Textures/night-parallax3.jpg'); }
.london-bg-1 { background-image: url('Textures/campaign/london_p1.png') !important; }
.london-bg-2 { background-image: url('Textures/campaign/london_p2.png') !important; }
.london-bg-3 { background-image: url('Textures/campaign/london_p3.png') !important; }
.paris-bg-1 { background-image: url('Textures/campaign/paris_p1.png') !important; }
.paris-bg-2 { background-image: url('Textures/campaign/paris_p2.png') !important; }
.paris-bg-3 { background-image: url('Textures/campaign/paris_p3.png') !important; }
@keyframes parallax-scroll-1 { from { background-position-x: 0; } to { background-position-x: -2115px; } }
@keyframes parallax-scroll-2 { from { background-position-x: 0; } to { background-position-x: -1725px; } }
@keyframes parallax-scroll-3 { from { background-position-x: 0; } to { background-position-x: -1920px; } }
.screen-container, #homeScreen { position: relative; z-index: 10; }
#shopIcon, #totalQuestionCountDisplay, .games-remaining { z-index: 20; }
@keyframes pulse-slow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: 0.9; } }
body.theme-night { background-color: #1a202c; color: #e2e8f0; }
body.theme-futuristic { background-color: #0d1a26; color: #00e6e6; }
body.theme-pastel { background-color: #fce4ec; color: #6a0572; }
#homeScreen {
background-color: transparent; width: 100vw; height: 100vh; z-index: 15;
position: fixed; top: 0; left: 0; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 0 !important;
}
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex; justify-content: center; align-items: center;
z-index: 1010; opacity: 0; visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-content {
background-color: #ffffff;
padding: 20px 30px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
max-width: 600px;
width: 90%;
text-align: center;
transform: translateY(-20px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
position: relative;
color: #333;
min-height: 480px;
display: flex; flex-direction: column;
}
#finalScoreModal .modal-content, #h2hFinalScoreModal .modal-content, #accountModal .modal-content, #challengeSetupModal .modal-content, #resetPasswordModal .modal-content, #dailyChallengesModal .modal-content, #soloModeSelectionModal .modal-content, #campaignFailModal .modal-content {
min-height: auto;
}
#accountModal .modal-content, #dailyChallengesModal .modal-content, #achievementsModal .modal-content { min-height: 520px; }
.countdown-bar {
position: absolute;
top: 0; left: 0; height: 8px;
background-color: #4CAF50;
width: 100%;
border-top-left-radius: 15px; border-top-right-radius: 15px;
}
#countdownBar { transition: width 15s linear; }
#partyCountdownBar { transition: width 12s linear; }
.sidebar {
position: fixed;
top: 0; left: 0; height: 100%; width: 250px;
background-color: #1a202c; color: #ffffff;
transform: translateX(-100%); transition: transform 0.3s ease-in-out;
z-index: 1001; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
padding: 20px; box-sizing: border-box; display: flex; flex-direction: column;
}
.sidebar.show-sidebar { transform: translateX(0); }
.hamburger-menu {
position: fixed; top: 20px; left: 20px; z-index: 1002;
cursor: pointer; display: flex; flex-direction: column;
justify-content: space-between; width: 30px; height: 24px;
transition: all 0.3s ease, left 0.3s ease;
}
.hamburger-menu.open .line { width: 100%; height: 4px; background-color: #333; border-radius: 2px; transition: all 0.3s ease; }
body.theme-night .hamburger-menu .line,
body.theme-futuristic .hamburger-menu .line,
body.theme-pastel .hamburger-menu .line { background-color: currentColor; }
.hamburger-menu.open .line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hamburger-menu.open .line:nth-child(2) { opacity: 0; }
.hamburger-menu.open .line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
#sidebar ul { list-style: none; padding: 0; width: 100%; }
#sidebar ul a { display: block; padding: 0.75rem; border-radius: 0.5rem; text-align: center; font-size: 1.1rem; font-weight: 600; color: #fff; text-decoration: none; transition: transform 0.2s ease, background-color 0.2s ease; }
#sidebar ul a:hover { transform: scale(1.05); }
#sidebar li:nth-child(1) a { background-color: #4B5563; }
#sidebar li:nth-child(2) a { background-color: #10B981; }
#sidebar li:nth-child(3) a { background-color: #3B82F6; }
#sidebar li:nth-child(4) a { background-color: #A855F7; }
#sidebar li:nth-child(5) a { background-color: #6366f1; }
#sidebar li:nth-child(6) a { background-color: #D946EF; }
#sidebar li:nth-child(7) a { background-color: #F59E0B; }
#sidebar li:nth-child(8) a { background-color: #EF4444; }
#sidebar li:nth-child(9) a { background-color: #8B5CF6; }
#questionCategoryDisplay { position: absolute; top: 15px; left: 15px; font-size: 0.8rem; font-weight: 500; padding: 4px 8px; border-radius: 8px; background-color: rgba(0,0,0,0.05); }
#questionDifficultyDisplay { position: absolute; top: 15px; right: 15px; text-align: right; }
.difficulty-tag, .h2h-tag { display: inline-block; font-size: 0.8rem; font-weight: 500; padding: 4px 8px; border-radius: 8px; margin-bottom: 4px; }
.h2h-tag { background-color: #e2e8f0; color: #4a5568; }
.difficulty-fundamentals { color: #10B981; border: 1px solid #10B981; }
.difficulty-headScratchers { color: #F59E0B; border: 1px solid #F59E0B; }
.difficulty-outrageous { color: #EF4444; border: 1px solid #EF4444; }
.difficulty-aBitOfEverything { color: #8B5CF6; border: 1px solid #8B5CF6; }
.category-carousel { cursor: grab; overflow: hidden; position: relative; width: 100%; max-width: 400px; height: 50px; margin-top: 1rem; }
.carousel-track { display: flex; align-items: center; position: absolute; left: 0; top: 0; height: 100%; }
.carousel-item { flex-shrink: 0; width: 150px; height: 100%; display: flex; justify-content: center; align-items: center; font-weight: 600; user-select: none; transition: transform 0.2s ease-out, opacity 0.2s ease-out; opacity: 0.5; transform: scale(0.8); }
.carousel-item.active { opacity: 1; transform: scale(1.1); color: #2563eb; }
.tab-button { padding: 0.5rem 1rem; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s ease-in-out; }
.tab-button.active { border-bottom-color: #3b82f6; color: #3b82f6; font-weight: 600; }
.tab-content { display: none !important; }
.tab-content.active { display: flex !important; flex-direction: column; }
.progress-bar-container { width: 100%; background-color: #e0e0e0; border-radius: 9999px; height: 1.25rem; position: relative; overflow: hidden; }
.progress-bar { background-color: #4ade80; height: 100%; border-radius: 9999px; transition: width 0.5s ease-in-out; display: flex; align-items: center; justify-content: center; color: #14532d; font-weight: 600; font-size: 0.75rem; }
.game-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; width: 100%; }
.category-column { display: flex; flex-direction: column; gap: 0.75rem; }
.category-header { color: white; padding: 0.75rem; border-radius: 0.5rem; text-align: center; font-weight: bold; font-size: 1.1rem; height: 60px; display: flex; align-items: center; justify-content: center; }
.question-card { width: 100%; height: 80px; cursor: pointer; transition: transform 0.2s; position: relative; background-color: transparent; }
.question-card img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.5rem; }
.question-card.answered { cursor: not-allowed; opacity: 0.5; }
.party-announcement-box {
position: fixed;
bottom: -120px;
left: 50%;
transform: translateX(-50%);
padding: 1.25rem 2.5rem;
background-color: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 1rem;
font-size: 1.25rem;
font-weight: 800;
z-index: 3000;
transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
min-width: 320px;
text-align: center;
}
.party-announcement-box.show { bottom: 30px; }
.medal-toast {
background-color: rgba(217, 70, 239, 0.95) !important;
border: 3px solid white;
box-shadow: 0 0 20px rgba(217, 70, 239, 0.5);
}
#challengeToast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #1f2937;
color: white;
padding: 1rem 1.5rem;
border-radius: 0.75rem;
z-index: 5000;
display: none;
flex-direction: column;
align-items: center;
gap: 10px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
border: 2px solid #3b82f6;
min-width: 300px;
}
#challengeToast.show {
display: flex;
animation: popIn 0.3s ease-out;
}
#achievementsList {
display: grid !important;
grid-template-columns: repeat(6, 1fr);
gap: 0.75rem;
padding: 0.5rem;
align-content: start;
}
#achievementsList > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
@media (max-width: 768px) {
#achievementsList {
grid-template-columns: repeat(3, 1fr);
}
}
.achievement-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
padding: 0.75rem 0.25rem;
text-align: center;
transition: all 0.3s ease;
height: 100px;
position: relative;
cursor: pointer;
}
.achievement-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 5;
background-color: #e2e8f0;
}
.achievement-item.locked {
opacity: 0.6;
filter: grayscale(1);
border-style: dashed;
background-color: #f1f5f9;
}
.achievement-item.unlocked {
border-color: #f59e0b;
background: #fffcf0;
}
.medal-icon {
font-size: 2.5rem;
flex-shrink: 0;
line-height: 1;
}
.achievement-details-footer {
margin-top: 1rem;
padding: 1rem;
background-color: #f8fafc;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
text-align: center;
min-height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.achievement-details-title {
font-weight: 800;
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.achievement-details-desc {
color: #64748b;
font-size: 0.9rem;
}
.perspective-container {
perspective: 2500px;
}
.trifold-brochure {
transform-style: preserve-3d;
}
.trifold-panel {
width: 33.333%;
height: 100%;
position: absolute;
top: 0;
transform-style: preserve-3d;
transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.trifold-left {
left: 0;
transform-origin: right center;
transform: rotateY(175deg);
z-index: 30;
}
.trifold-center {
left: 33.333%;
transform: translateZ(-5px);
z-index: 10;
}
.trifold-right {
right: 0;
transform-origin: left center;
transform: rotateY(-165deg);
z-index: 40;
}
.trifold-brochure.open .trifold-left {
transform: rotateY(0deg);
}
.trifold-brochure.open .trifold-right {
transform: rotateY(0deg);
}
.trifold-front, .trifold-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
background-size: 300% 100%;
background-repeat: no-repeat;
}
.trifold-left .trifold-front { background-position: 0% 50%; }
.trifold-center .trifold-front { background-position: 50% 50%; }
.trifold-right .trifold-front { background-position: 100% 50%; }
.trifold-left .trifold-back { transform: rotateY(180deg); }
.trifold-right .trifold-back { transform: rotateY(180deg); }
.trifold-content {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease 0s, visibility 0s linear 0.4s;
}
.trifold-brochure.open .trifold-content {
opacity: 1;
visibility: visible;
transition: opacity 0.8s ease 1s, visibility 0s linear 0s;
}
.study-columns {
column-count: 1;
column-gap: 2rem;
}
.study-columns p {
break-inside: avoid;
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.study-columns { column-count: 2; }
}
@media (min-width: 1024px) {
.study-columns { column-count: 3; column-gap: 3rem; }
}
.lifeline-btn {
transition: all 0.2s ease;
background: #f8fafc;
border: 2px solid #cbd5e1;
border-radius: 12px;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
overflow: hidden;
}
.lifeline-btn:hover {
transform: scale(1.1);
border-color: #3b82f6;
}
.lifeline-btn:disabled,
.lifeline-btn[style*="opacity: 0.5"] {
filter: grayscale(100%);
cursor: not-allowed;
transform: none !important;
}
.lifeline-btn:active:not(:disabled) {
transform: scale(0.95);
}
.card-flip {
animation: flip-vertical 0.6s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes flip-vertical {
0% { transform: rotateX(0); }
50% { transform: rotateX(90deg); opacity: 0.5; }
51% { opacity: 0; }
52% { transform: rotateX(-90deg); opacity: 0.5; }
100% { transform: rotateX(0); opacity: 1; }
}
#shopCategoriesGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 1rem; width: 100%; }
.shop-item { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px; border-radius: 8px; background-color: #f3f4f6; border: 1px solid #d1d5db; }
.shop-item img { width: 100px; height: 100px; object-fit: cover; border-radius: 4px; }
.shop-item .item-price-btn { margin-top: 8px; width: 100%; font-weight: bold; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; }
.shop-item .item-price-btn.buy { background-color: #10B981; color: white; }
.shop-item .item-price-btn.owned { background-color: #6b7280; color: white; cursor: not-allowed; }
.sprite-icon {
background-image: url('Textures/iconsheet.png');
background-repeat: no-repeat;
background-size: 400% 400%;
display: inline-block;
flex-shrink: 0;
}
.icon-home { background-position: 0% 0%; }
.icon-daily { background-position: 33.333% 0%; }
.icon-shop { background-position: 66.666% 0%; }
.icon-calendar { background-position: 100% 0%; }
.icon-leaderboard { background-position: 0% 33.333%; }
.icon-settings { background-position: 33.333% 33.333%; }
.icon-shield { background-position: 66.666% 33.333%; }
.icon-swap { background-position: 100% 33.333%; }
.icon-5050 { background-position: 0% 66.666%; }
.icon-crowd { background-position: 33.333% 66.666%; }
#shopIcon {
position: fixed !important;
top: 20px !important;
right: 20px !important;
bottom: auto !important;
left: auto !important;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0.8);
transform-origin: top right;
transition: transform 0.3s ease-in-out;
z-index: 50;
}
#shopIcon:hover {
transform: scale(1.1);
}
#shopIcon img { display: none; }
#shopIcon .radial-beams { display: none; }
#shopIcon::after {
content: '';
display: block;
width: 80px;
height: 80px;
background-image: url('Textures/iconsheet.png');
background-size: 400% 400%;
background-position: 66.666% 0%;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
#homeBottomNav {
position: relative;
bottom: auto;
margin-top: 2rem;
width: 100%;
display: flex;
justify-content: center;
gap: 1.5rem;
z-index: 60;
pointer-events: none;
}
.bottom-nav-btn {
pointer-events: auto;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
width: 70px;
height: 70px;
border-radius: 12px;
background-color: white;
border: 4px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.bottom-nav-btn:hover {
transform: scale(1.15) translateY(-5px);
border-color: #3b82f6;
}
.bottom-nav-icon {
width: 100%;
height: 100%;
display: block;
background-size: 400% 400%;
border-radius: 8px;
}
@keyframes flash-gold {
0%, 100% { border-color: #e2e8f0; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
50% { border-color: #fbbf24; box-shadow: 0 0 20px rgba(251, 191, 36, 0.8); transform: scale(1.1); }
}
.bottom-nav-btn.flash-active {
animation: flash-gold 1.5s infinite;
position: relative;
}
.bottom-nav-btn.flash-active::after {
content: '!';
position: absolute;
top: -5px;
right: -5px;
background-color: #ef4444;
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
}
#lifelinesContainer .lifeline-btn div {
background: none !important;
border: none !important;
padding: 0 !important;
font-size: 0 !important;
width: 50px !important;
height: 50px !important;
transform: translate(-50%, -50%) scale(1.4) !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
margin: 0 !important;
flex-shrink: 0 !important;
display: block;
}
#llFiftyFiftyBtn div::after,
#llShieldBtn div::after,
#llCrowdHintBtn div::after,
#llSwapBtn div::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-image: url('Textures/iconsheet.png');
background-size: 400% 400%;
background-repeat: no-repeat;
}
#llFiftyFiftyBtn div::after { background-position: 0% 66.666%; }
#llCrowdHintBtn div::after { background-position: 33.333% 66.666%; }
#llShieldBtn div::after { background-position: 66.666% 33.333%; }
#llSwapBtn div::after { background-position: 100% 33.333%; }
#gameHost {
position: fixed;
bottom: 0;
right: 200px;
height: 490px;
z-index: 1020;
pointer-events: none;
transition: transform 0.3s ease;
filter: none !important;
}
@media (max-width: 1024px) {
#gameHost {
right: 20px;
height: 350px;
z-index: 1020;
}
}
@media (max-width: 768px) {
#gameHost {
height: 252px;
right: 10px;
bottom: 50px;
}
}
.close-modal-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.5rem; font-weight: bold; color: #9CA3AF; cursor: pointer; }
.glowing-turn { animation: glowing 1.5s infinite; border-radius: 8px; padding: 4px 8px; background-color: #0d9488; color: white !important; }
@keyframes glowing { 0%, 100% { box-shadow: 0 0 5px #2dd4bf; } 50% { box-shadow: 0 0 20px #2dd4bf; } }
.globe-center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 520px;
height: 520px;
opacity: 1;
}
@media (max-width: 768px) {
.globe-center {
width: 78vw;
height: 78vw;
opacity: 0.3;
}
}
.animate-fade-in {
animation: popIn 0.3s ease-out forwards;
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin-slow {
animation: spin-slow 60s linear infinite;
}
#globalHomeBtn {
position: fixed !important;
bottom: 20px !important;
left: 20px !important;
top: auto !important;
z-index: 10000 !important;
transition: transform 0.3s ease;
}
#globalHomeBtn img {
width: 12rem;
height: 12rem;
}
#globalHomeBtn:hover {
transform: scale(1.1);
}
#homeLeaderboardBtn {
display: none !important;
}
.difficulty-btn, .alt-diff-btn, #currentDifficultyDisplay {
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.difficulty-btn[data-difficulty="fundamentals"], .alt-diff-btn[data-difficulty="fundamentals"], #currentDifficultyDisplay[data-difficulty="fundamentals"] { background-image: url('Textures/easy.jpg'); }
.difficulty-btn[data-difficulty="headScratchers"], .alt-diff-btn[data-difficulty="headScratchers"], #currentDifficultyDisplay[data-difficulty="headScratchers"] { background-image: url('Textures/medium.jpg'); }
.difficulty-btn[data-difficulty="outrageous"], .alt-diff-btn[data-difficulty="outrageous"], #currentDifficultyDisplay[data-difficulty="outrageous"] { background-image: url('Textures/hard.jpg'); }
.difficulty-btn[data-difficulty="aBitOfEverything"], .alt-diff-btn[data-difficulty="aBitOfEverything"], #currentDifficultyDisplay[data-difficulty="aBitOfEverything"] { background-image: url('Textures/mixed.jpg'); }
@keyframes bounce-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
#startGameBtn.ready {
background-color: #10B981 !important;
color: white !important;
opacity: 1 !important;
cursor: pointer !important;
animation: bounce-slow 1.5s infinite;
}
.custom-scrollbar-light::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar-light::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar-light::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.custom-scrollbar-light::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.25);
}
.profile-icon {
display: inline-block;
border-radius: 50%;
border: 5px solid black;
background-image: url('Textures/profileicons.jpg');
background-repeat: no-repeat;
background-size: 500% 600%;
background-color: white;
box-sizing: content-box;
flex-shrink: 0;
}
#authDisplay .profile-icon {
width: 40px;
height: 40px;
border-width: 3px;
}
#profileIconGrid .profile-icon {
width: 80px;
height: 80px;
border-width: 5px;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s;
margin: 0 auto;
}
#profileIconGrid .profile-icon:hover {
transform: scale(1.1);
border-color: #3b82f6;
}
#profileIconGrid .profile-icon.selected {
border-color: #10b981;
transform: scale(1.1);
box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
}
@keyframes slideInLeft {
from { transform: translateX(-120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
from { transform: translateX(120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes scorePop {
0% { transform: scale(1); color: inherit; }
50% { transform: scale(1.5); color: #10B981; }
100% { transform: scale(1); color: inherit; }
}
.animate-slide-in-left { animation: slideInLeft 0.5s ease-out forwards; }
.animate-slide-in-right { animation: slideInRight 0.5s ease-out forwards; }
.animate-score-pop { animation: scorePop 0.4s ease-out; }
.duel-hud-panel {
transition: all 0.3s ease-in-out;
}
.duel-active {
transform: scale(1.05);
filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
z-index: 20;
}
.duel-inactive {
transform: scale(0.95);
}
.timer-critical {
color: #ef4444 !important;
animation: pulse-red 1s infinite;
}
@keyframes pulse-red {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}
.duel-hidden {
display: none !important;
}
#duelActionsBar button {
transition: transform 0.2s, box-shadow 0.2s;
}
#duelActionsBar button:active {
transform: scale(0.95);
}
#duelInterface {
z-index: 1020 !important;
}
.duel-mode-hidden {
display: none !important;
}
.star-icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.star-filled {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FBBF24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
}
.star-empty {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23D1D5DB" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
}
#mapModalImage {
box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
body {
align-items: flex-start;
padding-top: 10vh;
}
.panel-container {
width: 95% !important;
max-width: 95% !important;
padding: 1rem !important;
border-width: 2px;
}
.screen-container {
width: 100%;
max-width: 100%;
height: auto;
min-height: auto;
top: 50%;
transform: translate(-50%, -50%);
}
#homeScreen {
justify-content: flex-start !important;
padding-top: 100px !important;
}
#homeCenterContainer {
transform: translateY(20px) !important;
margin-top: 0 !important;
width: 100%;
}
#homeMainMenu {
max-width: 60% !important;
}
#homeOnlineButtons {
width: 90%;
}
.globe-center {
width: 120%;
height: auto;
opacity: 0.1;
}
#gameHost, #sponsorContainer {
display: none !important;
}
#rightSidePanel {
display: none !important;
}
#authDisplay {
transform: scale(0.54) !important;
transform-origin: top left;
left: 10px;
top: 10px;
max-width: none !important;
width: auto !important;
white-space: nowrap;
}
#totalQuestionCountDisplay,
#dayNightToggleBtn {
display: none !important;
}
.layer1 { background-size: 1000px auto !important; }
.layer2 { background-size: 800px auto !important; }
#campaignHealthContainer {
top: 15px;
width: 180px;
padding: 4px 8px !important;
}
#campaignLevelList {
padding-top: 0 !important;
padding-bottom: 22rem !important;
max-height: 100vh;
}
#campaignLevelList::before {
width: 300px;
top: -10000px !important;
bottom: calc(9rem + 150px) !important;
}
#campaignLevelList::after {
height: 120px !important;
margin-bottom: 20px !important;
background-size: 100% auto;
}
.campaign-home-btn {
bottom: 80px !important;
left: 20px !important;
width: 80px !important;
height: 80px !important;
}
.campaign-stage-card {
width: 250px;
z-index: 10;
}
.campaign-stage-card img {
height: 100px;
}
.stage-number {
transform: translate(-175px, -90px);
width: 40px;
height: 40px;
font-size: 1.5rem;
}
.bonus-stage-card {
transform: translate(137px, 60px);
width: 80px;
height: 80px;
}
.bonus-stage-card:hover {
transform: translate(137px, 60px) scale(1.1);
}
#cityStageScreen {
background-color: #111827 !important;
z-index: 200 !important;
}
#cityHubTitle {
font-size: 1.25rem !important;
padding: 0.5rem 1rem;
}
#cityStageScreen .bg-black\/60 {
margin-top: 5px;
}
#cityStudyGuideBtn {
width: 80px !important;
height: 80px !important;
}
#cityMapBtn {
width: 80px !important;
height: 80px !important;
}
#cityHubPanel {
height: 65vh !important;
width: 90% !important;
border-radius: 1.5rem !important;
border-width: 4px;
margin-bottom: 20px;
transform: translateY(10px);
position: relative;
pointer-events: auto;
}
#cityStageScreen .relative.w-full.h-24 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
padding-top: 10px;
z-index: 70;
}
#cityHubBackBtn {
position: absolute;
left: 10px;
top: 10px;
width: 50px;
height: 50px;
}
#cityProgressBarContainer {
top: 4.5rem !important;
width: 85% !important;
}
#cityStageList {
padding: 0 4px !important;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px !important;
height: auto !important;
max-height: none !important;
counter-reset: challenge-list;
}
#cityStageList > div {
padding: 0 8px !important;
margin-bottom: 0 !important;
min-height: 34px !important;
height: 34px !important;
display: flex;
align-items: center;
justify-content: center !important;
position: relative;
}
#cityStageList > div::before {
counter-increment: challenge-list;
content: counter(challenge-list);
position: absolute;
left: 12px;
font-weight: 800;
font-size: 0.9rem;
opacity: 0.6;
}
#cityStageList h3 {
font-size: 0.85rem !important;
margin-bottom: 0 !important;
text-align: center;
width: 80%;
white-space: nowrap;
letter-spacing: -0.5px;
}
#cityStageList p {
display: none !important;
}
#dailyChallengesList > div {
padding: 8px !important;
margin-bottom: 4px !important;
}
#dailyChallengesList h4 { font-size: 1rem !important; }
#dailyChallengesList p { font-size: 0.8rem !important; margin-bottom: 2px !important; }
#dailyChallengesList .progress-bar-container { height: 10px !important; }
#dailyChallengesModal .modal-content {
min-height: auto !important;
max-height: 80vh !important;
}
#triviaModal .modal-content {
width: 98%;
padding: 1rem;
padding-top: 1.5rem;
}
#questionTitle {
font-size: 1.1rem;
}
#triviaQuestion {
font-size: 1rem;
max-height: 120px;
}
#lifelinesContainer {
gap: 0.5rem;
}
#duelHud {
z-index: 1000;
}
#duelPlayerPanel, #duelOpponentPanel {
top: 5px;
transform: scale(0.85);
transform-origin: top center;
}
#duelPlayerPanel { left: -5px; }
#duelOpponentPanel { right: -5px; }
#duelHomeBtn {
bottom: 10px;
left: 10px;
transform: scale(0.7);
}
#profileIconGrid {
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
#profileIconGrid .profile-icon {
width: 40px;
height: 40px;
border-width: 2px;
}
.lifeline-btn {
overflow: visible !important;
}
#customizationContent {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
#profileIconGrid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.5rem !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#profileIconGrid .profile-icon {
width: 65px !important;
height: 65px !important;
border-width: 3px !important;
}
}
.shop-item {
background-color: white !important;
border: 1px solid #f1f5f9 !important;
border-radius: 1rem !important;
padding: 1rem !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
height: 100%;
}
.shop-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
border-color: #3b82f6 !important;
}
.shop-item img {
width: 100% !important;
height: 120px !important;
object-fit: cover !important;
border-radius: 0.75rem !important;
margin-bottom: 0.5rem;
}
.shop-item h3,
.shop-item h4,
.shop-item div:nth-child(2) {
font-weight: 800 !important;
color: #1f2937 !important;
font-size: 1.1rem !important;
text-align: center;
}
.shop-item .item-price-btn {
margin-top: auto !important;
width: 100% !important;
padding: 0.75rem 1rem !important;
border-radius: 0.75rem !important;
font-weight: 800 !important;
letter-spacing: 0.025em !important;
text-transform: uppercase;
font-size: 0.85rem !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.shop-item .item-price-btn.buy {
background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}
.shop-item .item-price-btn.buy:hover {
background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
transform: scale(1.02);
}
.shop-gem-icon {
width: 100px !important;
height: 100px !important;
background-image: url('Textures/iconsheet.png');
background-size: 400% 400%;
background-position: 33.333% 100%;
border-radius: 12px;
margin-bottom: 0.5rem;
flex-shrink: 0;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}
.shop-item .shop-gem-icon {
align-self: center;
}
#authDisplay.profile-alert,
#authDisplay.profile-alert::after {
animation: none !important;
display: none !important;
border-color: transparent !important;
content: none !important;
}
#shopIcon.shop-alert {
animation: flash-gold 2s infinite;
border: 4px solid #e2e8f0;
border-radius: 50%;
background-color: white;
width: 80px;
height: 80px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
#shopIcon.shop-alert::before {
content: '!';
position: absolute;
top: -5px;
right: -5px;
background-color: #ef4444;
color: white;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 18px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid white;
z-index: 60;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#shopIcon.shop-alert::after {
transform: scale(0.9);
}
#campaignHomeBtn {
position: fixed !important;
left: 40px !important;
bottom: 40px !important;
right: auto !important;
width: auto !important;
height: auto !important;
display: flex !important;
align-items: center;
justify-content: center;
background: none !important;
border: none !important;
z-index: 100 !important;
}
#campaignHomeBtn img {
width: 90px !important;
height: 90px !important;
object-fit: contain !important;
margin: 0 !important;
display: block !important;
}
@media (max-width: 768px) {
#campaignHomeBtn {
left: 20px !important;
bottom: 20px !important;
}
#campaignHomeBtn img {
width: 60px !important;
height: 60px !important;
}
}
#campaignScreen #homeBottomNav {
position: fixed !important;
left: 50px !important;
bottom: 150px !important;
width: auto !important;
right: auto !important;
flex-direction: column-reverse !important;
gap: 15px !important;
z-index: 2000 !important;
pointer-events: none;
}
#campaignScreen #homeBottomNav .bottom-nav-btn {
pointer-events: auto !important;
margin: 0 !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}
@media (max-width: 768px) {
#campaignScreen #homeBottomNav {
left: 25px !important;
bottom: 100px !important;
}
#campaignScreen #homeBottomNav .bottom-nav-btn {
width: 60px !important;
height: 60px !important;
}
}
#cityStageList button {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
height: auto !important;
min-height: 45px !important;
}
#cityStageScreen .panel-container {
min-height: 90vh !important;
padding-bottom: 3rem !important;
display: flex !important;
flex-direction: column !important;
}
#cityStageList {
margin-bottom: 45px !important;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
#citySceneTrack {
height: 100%;
position: relative;
min-width: 150vw;
will-change: transform;
}
.stage-btn {
position: absolute;
transform: translate(-50%, -100%);
transform-origin: bottom center;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 20;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.stage-btn img {
transition: all 0.3s ease;
}
.stage-btn.is-focused {
z-index: 40;
}
.stage-btn.is-focused img {
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) brightness(1.1);
transform: scale(1.15);
}
.stage-btn.locked {
opacity: 0.9;
}
.stage-btn.locked:hover {
transform: translate(-50%, -100%) scale(1.05);
}
@keyframes bounce-alert {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.mission-indicator {
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
color: #ef4444;
font-size: 4rem;
font-weight: 900;
text-shadow: 3px 3px 0px black, -1px -1px 0 black;
animation: bounce-alert 1.5s ease-in-out infinite;
z-index: 50;
pointer-events: none;
}
.stage-status-badge {
position: absolute;
bottom: -35px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.85);
padding: 4px 12px;
border-radius: 20px;
border: 2px solid rgba(255,255,255,0.4);
white-space: nowrap;
font-size: 1rem;
color: #fbbf24;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0,0,0,0.5);
opacity: 0.9;
transition: opacity 0.3s;
z-index: 25;
}
#stageDetailModal .modal-content {
background: #f8fafc;
border-radius: 24px;
border: 4px solid #1e293b;
overflow: hidden;
padding: 0 !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}
#stageDetailImage {
transition: transform 0.5s ease-out;
}
#stageDetailModal:hover #stageDetailImage {
transform: scale(1.05);
}
.difficulty-badge {
padding: 4px 12px;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.4);
backdrop-filter: blur(4px);
}
.diff-fundamentals { background: #22c55e; color: white; }
.diff-headScratchers { background: #eab308; color: black; }
.diff-brainBusters { background: #f97316; color: white; }
.diff-outrageous { background: #ef4444; color: white; }
#cityInteractiveLayer {
background-size: 25% 50% !important;
background-position: bottom left !important;
background-repeat: repeat-x !important;
}
.stage-btn .challenge-img {
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
transition: transform 0.3s ease, filter 0.3s ease;
transform-origin: bottom center;
}
.stage-btn img.challenge-img {
width: 300px !important;
height: auto;
}
@media (min-width: 768px) {
.stage-btn img.challenge-img {
width: 350px !important;
}
}
.stage-btn.unlocked .challenge-img {
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6))
drop-shadow(0 0 3px #22c55e)
drop-shadow(0 0 5px #15803d) !important;
}
.stage-btn.locked .challenge-img {
filter: brightness(0) opacity(0.7) drop-shadow(0 5px 5px rgba(0,0,0,0.3)) !important;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
}
.stage-btn:hover .challenge-img {
transform: scale(1.15);
}
#cityProgressBarContainer {
position: absolute;
top: calc(5rem + 50px);
left: 50%;
transform: translateX(-50%);
width: 60%;
max-width: 400px;
height: 16px;
background: rgba(0,0,0,0.6);
border: 2px solid rgba(255,255,255,0.3);
border-radius: 10px;
z-index: 100;
pointer-events: none;
overflow: visible;
}
#cityProgressBarFill {
height: 100%;
background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%);
border-radius: 8px;
width: 0%;
transition: width 0.5s ease-out;
position: relative;
}
#cityProgressBarIcon {
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-image: url('Textures/iconsheet.png');
background-size: 400% 400%;
background-position: 0% 100%;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
z-index: 101;
}
.progress-threshold-line {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: #ef4444; 
z-index: 20;
pointer-events: none;
box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.progress-threshold-icon {
position: absolute;
top: 26px; /* Just below the 24px bar */
width: 40px;
height: 40px;
background-image: url('Textures/iconsheet.png');
background-size: 400% 400%;
background-position: 66.666% 100%; /* Row 4 (100%), Col 3 (66.666%) */
transform: translateX(-50%);
z-index: 20;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
#cityStageScreen .absolute.z-\[60\].flex-col {
justify-content: space-between;
}
#cityHubBackBtn {
flex-shrink: 0;
}
#cityHubBackBtn {
min-width: 64px;
}
#cityHubBackBtn img {
object-fit: contain;
}
.traffic-car {
position: absolute;
pointer-events: none;
z-index: 15;
filter: drop-shadow(0 10px 5px rgba(0,0,0,0.3));
}
#cityMapBtn, #cityStudyGuideBtn {
position: fixed;
bottom: 20px;
width: 80px;
height: 80px;
background-image: url('Textures/iconsheet.png');
background-size: 400% 400%;
z-index: 80;
border: none;
background-color: transparent;
cursor: pointer;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
border-radius: 12px;
}
#cityMapBtn {
right: 20px;
left: auto;
background-position: 100% 66.666%;
}
#cityStudyGuideBtn {
left: 20px;
right: auto;
background-position: 66.666% 66.666%;
}
@keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-slow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: 0.9; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 90% { transform: translateX(-5px); } 20%, 80% { transform: translateX(5px); } }
.animate-pop-in {
animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes popIn {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
#parallaxBackground.dimmed .parallax-layer {
filter: brightness(0.3) grayscale(0.2);
transition: filter 0.8s ease-in-out;
}
#parallaxBackground .parallax-layer {
transition: filter 0.8s ease-in-out;
}
/* Updated London Sprites */
.sprite-base {
    background-image: url('Textures/scenes/london/londonsheet.png');
    background-repeat: no-repeat;
    display: inline-block;
    pointer-events: auto;
}
.sprite-london_car1 { width: 445px; height: 292px; background-position: -1px -1px; }
.sprite-london_car2 { width: 388px; height: 183px; background-position: -462px -2px; }
.sprite-london_car3 { width: 451px; height: 133px; background-position: -458px -190px; }
.sprite-london_car4 { width: 429px; height: 173px; background-position: -890px -0px; }
.sprite-london_mi6 { width: 746px; height: 353px; background-position: -950px -295px; }
.sprite-london_pub { width: 401px; height: 638px; background-position: -11px -326px; }
.sprite-london_tube { width: 392px; height: 445px; background-position: -431px -520px; }
.sprite-london_bridge { width: 497px; height: 304px; background-position: -864px -666px; }
.sprite-london_museum { width: 392px; height: 549px; background-position: -1377px -677px; }
.sprite-london_park { width: 705px; height: 324px; background-position: -1148px -1264px; }
.sprite-london_navy { width: 519px; height: 132px; background-position: -508px -1008px; }
.sprite-london_palace { width: 416px; height: 561px; background-position: -38px -984px; }
.sprite-london_shard { width: 220px; height: 480px; background-position: -504px -1174px; }
.sprite-london_gherkin { width: 234px; height: 487px; background-position: -766px -1169px; }
/* End of Sprites */

#homeMainMenu {
gap: 0.5rem !important;
margin-bottom: 0 !important;
}
#homeBottomNav {
margin-top: 1rem !important;
gap: 1rem !important;
}
#homeCenterContainer {
transform: translateY(-50px) !important;
}
#tutorialOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
#tutorialOverlay.show {
opacity: 1;
pointer-events: auto;
}
.tutorial-panel {
border-style: solid;
border-width: 45px 69px 87px 86px;
border-image-source: url('Textures/speechbubble.png');
border-image-slice: 45 69 87 86 fill;
border-image-repeat: stretch;
min-width: 300px;
max-width: 85%;
color: #333;
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-col: column;
align-items: center;
text-align: center;
transform: scale(0.9);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#tutorialOverlay.show .tutorial-panel {
transform: scale(1);
}
.tutorial-text {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 15px;
margin-top: -10px;
}
.tutorial-btn {
background-color: #3b82f6;
color: white;
border: none;
padding: 10px 25px;
font-size: 1rem;
font-weight: bold;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.tutorial-btn:hover {
transform: scale(1.05);
background-color: #2563eb;
}
#tutorialOverlay {
z-index: 20000;
}
@keyframes flash-border {
0% {
box-shadow: 0 0 0 0px rgba(255, 215, 0, 0.7);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 8px rgba(255, 215, 0, 0);
transform: scale(1.05);
}
100% {
box-shadow: 0 0 0 0px rgba(255, 215, 0, 0);
transform: scale(1);
}
}
.tutorial-highlight {
z-index: 20001 !important;
animation: flash-border 1.5s infinite;
border: 2px solid #FFD700 !important;
border-radius: 50%;
background-color: rgba(0,0,0,0.3);
pointer-events: auto !important;
}
#cityProgressBarContainer {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 60%;
max-width: 400px;
height: 24px;
background-color: rgba(30, 41, 59, 0.9);
border: 2px solid #94a3b8;
border-radius: 12px;
overflow: hidden;
z-index: 100;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
#cityProgressBarFill {
height: 100%;
width: 0%;
background: linear-gradient(180deg, #facc15 0%, #ca8a04 100%);
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left;
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
#cityProgressBarIcon {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
pointer-events: none;
}
@keyframes bar-pop-centered {
0% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.1); }
100% { transform: translateX(-50%) scale(1); }
}
.bar-pop {
animation: bar-pop-centered 0.15s ease-out;
}
#cityProgressBarContainer {
position: fixed !important;
top: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 60% !important;
max-width: 400px !important;
height: 24px !important;
background-color: rgba(30, 41, 59, 0.95) !important;
border: 2px solid #94a3b8 !important;
border-radius: 12px !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
overflow: visible !important;
z-index: 1000 !important;
pointer-events: none;
}
#cityProgressBarFill {
height: 100%;
width: 0%;
background: linear-gradient(180deg, #facc15 0%, #ca8a04 100%) !important;
transform-origin: left;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
@media (max-width: 768px) {
#cityProgressBarContainer {
top: 80px !important;
width: 85% !important;
}
}
#cityProgressBarIcon {
position: absolute;
right: 0 !important;
top: 50% !important;
transform: translate(50%, -50%) !important;
width: 50px !important;
height: 50px !important;
z-index: 200 !important;
background-image: url('Textures/iconsheet.png');
background-size: 400% 400%;
background-position: 0% 100%;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
pointer-events: none;
}
#cityProgressBarFill {
border-radius: 12px 0 0 12px !important;
border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.campaign-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.path-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 4;
    stroke-dasharray: 10 10;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    animation: dash-scroll 30s linear infinite;
}
@keyframes dash-scroll {
    to { stroke-dashoffset: -1000; }
}
/* Campaign Map Offsets */
.campaign-stage-offset-left {
    transform: translateX(-80px);
}
.campaign-stage-offset-right {
    transform: translateX(80px);
}
@media (max-width: 768px) {
    .campaign-stage-offset-left {
        transform: translateX(-30px);
    }
    .campaign-stage-offset-right {
        transform: translateX(30px);
    }
}
.campaign-stage-card:hover:not(.locked).campaign-stage-offset-left {
    transform: translateX(-80px) scale(1.05);
}
.campaign-stage-card:hover:not(.locked).campaign-stage-offset-right {
    transform: translateX(80px) scale(1.05);
}
@media (max-width: 768px) {
    .campaign-stage-card:hover:not(.locked).campaign-stage-offset-left {
        transform: translateX(-30px) scale(1.05);
    }
    .campaign-stage-card:hover:not(.locked).campaign-stage-offset-right {
        transform: translateX(30px) scale(1.05);
    }
}