html, body {
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden; /* allow vertical scroll */
}
button, input, select, textarea {
-webkit-tap-highlight-color: transparent; /* removes tap highlight */
outline: none;
}
/* Hide scrollbar for the 11+ block on leaderboard.html */
.lb-extra-scroll::-webkit-scrollbar {
display: none;
}
.lb-refresh-flash {
animation: lbRefreshFlash 0.6s ease-out;
}
@keyframes lbRefreshFlash {
0% {
transform: scale(1);
box-shadow: 0 0 0 rgba(247, 148, 31, 0);
}
40% {
transform: scale(1.01);
box-shadow: 0 0 18px rgba(160, 158, 155, 0.6);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 rgba(247, 148, 31, 0);
}
}
#gameWrapper {
width: 100%;
min-height: 100vh;
padding-top: env(safe-area-inset-top);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
/* Base styles */
body {
font-family: 'Ubuntu', sans-serif;
background: #E6E7E8;
color: #000;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 0;
box-sizing: border-box;
/* Instead of this: overflow: hidden; */
overflow-x: hidden;
overflow-y: auto;
}
/* When showing the leaderboard, use this class on for nicer top/bottom spacing */
body.leaderboard-mode {
align-items: flex-start; /* don't vertically center */
padding: 10px 10px; /* nice breathing room above/below */
overflow-y: auto; /* allow scroll if the board grows */
overflow-x: hidden;
}
/* Hide timer on the leaderboard */
body.leaderboard-mode #timer {
display: none !important;
}
/* Optional: let the app take the space when timer is hidden */
body.leaderboard-mode #app {
max-width: 1000px;
}
/* Make sure the wrapper itself also has some spacing */
.leaderboard-wrapper {
width: 100%;
}
/* style.css */
.start-wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.start-row {
display: flex;
gap: 10px;
width: 100%;
}
.start-row button {
flex: 1;
}
.start-skip-btn {
max-width: 300px;
width: 100%;
}
/* ======= Home hero (logo + steps) ======= */
.home-hero {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin: 10px 0 20px 0;
text-align: left;
}
.home-logo {
max-width: 150px;
height: auto;
}
.home-hero-text {
font-size: 18px;
font-weight: 600;
color: #2B1C58;
line-height: 1.7;
}
/* Layout: app and timer side by side */
.layout {
display: flex;
justify-content: center; /* horizontally centered */
align-items: center; /* β
vertically centered */
width: 100%;
max-width: 1200px;
height: 100vh; /* β
take full screen height */
gap: 20px;
box-sizing: border-box;
}
/* Layout: app and timer side by side */
.layout {
display: flex;
gap: 20px;
padding: 20px; /* inner spacing */
margin: 10px; /* outer spacing around container */
justify-content: center;
align-items: stretch;
width: 100%;
max-width: 1200px;
flex-wrap: wrap;
box-sizing: border-box;
height: auto; /* let it grow */
}
@media (hover: hover) and (pointer: fine) {
.answer-btn {
transition: background-color 0.2s ease, color 0.2s ease;
.answer-btn {
padding-top: 14px; /* keep your current spacing */
padding-bottom: 14px; /* ensure matching spacing */
line-height: 1.3; /* helps with nice multiline spacing */
}
}
.answer-btn:hover:not(:disabled) {
background-color: #F7941F !important;
color: #fff !important;
transform: none !important; /* disable the grow effect */
}
}
/* App container with margin */
/* Main app container */
#app {
flex: 2;
background: white;
padding: 30px; /* inner padding */
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
/* responsive sizing */
max-width: 900px; /* donβt get too wide on desktop */
width: 100%;
margin: 0px auto; /* space top/bottom + center horizontally */
}
/* Questions container inside the app */
#questions {
width: 100%;
background: #fff;
border-radius: 12px;
padding: 20px; /* inner spacing */
margin: 10px; /* outer spacing around container */
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
box-sizing: border-box;
flex-shrink: 0;
overflow: hidden; /* prevent internal scrolling */
}
#timer {
flex: 1 1 250px;
max-width: 300px;
background: white;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
display: flex;
justify-content: center;
align-items: center;
text-align: center; /* π ensure the text is centered */
line-height: 1; /* π no extra vertical line height */
line-height: 1 !important; /* π₯ critical for true vertical centering */
font-size: clamp(24px, 6vw, 64px);
font-weight: 700;
color: #F7941F;
flex-shrink: 0;
padding: 0; /* π avoid weird padding shifts */
transform-origin: center; /* π scale from the middle when animating */
}
#timer .timer-text {
display: inline-flex;
align-items: center; /* vertical centering inside span */
justify-content: center;
line-height: 1;
height: 100%; /* ensures alignment inside parent */
}
/* Typography */
h2 {
margin-bottom: 20px;
font-weight: 500;
text-align: center;
}
input {
width: calc(100% - 5px); /* reduces width while still responsive */
margin: 6px 20px 8px; /* smaller top & bottom spacing */
padding: 12px;
border-radius: 12px;
border: 1px solid #ccc;
font-size: 18px;
text-align: center;
box-sizing: border-box; /* ensures good behavior */
}
button {
background: #2B1C58;
border: none;
padding: 14px 20px;
border-radius: 12px;
color: white;
font-size: clamp(14px, 2.5vw, 18px);
cursor: pointer;
margin: 8px 0;
transition: 0.2s;
width: 100%;
}
@media (hover: hover) and (pointer: fine) {
button:hover {
background: #F7941F;
transform: translateY(-2px);
}
}
/* List styling */
ol {
text-align: left;
margin: 20px auto;
padding: 0 20px;
}
ol li {
margin-bottom: 10px;
}
/* Progress bar */
.progress-container {
background: #E6E7E8;
border-radius: 12px;
height: 20px;
margin-bottom: 20px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: #F7941F;
width: 0%;
border-radius: 12px;
transition: width 0.6s ease; /* smooth width change */
}
/* Animations */
@keyframes slideFadeIn {
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes flashAnimation {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
.flash {
animation: flashAnimation 1s infinite;
}
/* ===== Desktop (601px+) ===== */
@media (min-width: 601px) {
.start-row {
display: flex;
gap: 10px;
width: 100%;
}
#btn-en,
#btn-es {
flex: 0 0 25%; /* 25% each */
}
.layout {
align-items: stretch; /* make flex items equal height */
}
.layout #app,
.layout #timer {
margin: 30px 0; /* same top/bottom space for both cards */
}
}
/* Leaderboard table */
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 20px 0; /* β
add vertical margins */
font-size: 16px;
font-family: 'Ubuntu', sans-serif;
}
table th, table td {
text-align: center;
padding: 9px;
}
table td:nth-child(2), table th:nth-child(2) {
text-align: left;
}
tbody tr.prize-row td {
background: #F7941F;
color: #fff;
font-weight: 600;
font-style: italic;
}
thead th {
background: #2B1C58;
color: #fff;
font-weight: 600;
padding: 12px 10px;
border-bottom: 0px solid #2B1C58;
border-radius: 0px 0px 0 0;
}
tbody tr {
opacity: 0;
transform: translateY(10px);
animation: slideFadeIn 0.4s forwards;
}
tbody tr:nth-child(even) {
background: #f9f9f9;
}
tbody tr:hover {
background: #f1f1f1;
}
tr.active-player {
font-weight: 700;
background: #F7941F !important;
color: #fff !important;
transition: background 0.3s, color 0.3s;
}
/* QR code & payment */
#app img {
max-width: 220px;
margin: 20px 0;
}
/* Responsive adjustments */
@media (max-width: 600px) {
/* Overall layout goes vertical on mobile */
.layout {
flex-direction: column;
gap: 15px;
width: 100%;
max-width: 900px;
margin: 0 auto;
height: auto;
}
.time-change-indicator {
display: none !important;
}
input {
margin: 4px 16px 6px;
}
/* Stop hard vertical centering on mobile so margins are visible */
body {
align-items: flex-start;
padding-top: 8px;
padding-bottom: 8px;
}
/* Main card */
#app {
flex: 1 1 auto;
margin: 26px auto; /* nice space top/bottom */
padding: 16px 20px; /* slightly tighter padding than desktop */
}
.answer-btn {
height: auto !important; /* allow button to grow */
min-height: 60px; /* keep your current minimum */
padding-top: 12px !important; /* balanced spacing */
padding-bottom: 12px !important;
line-height: 1.3 !important; /* nicer multiline text */
display: flex !important; /* enable flex centering */
align-items: center !important; /* vertical centering */
justify-content: center !important; /* horizontal centering */
text-align: center !important; /* wrap + align text */
white-space: normal !important; /* allow wrapping */
}
.start-wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px; /* NEW β adds space around the fields */
box-sizing: border-box; /* ensures padding doesnβt break layout */
border-radius: 12px; /* optional β but looks clean */
}
/* Questions section fills width, less side margin */
#questions {
margin: 10px 0;
flex: 1 1 auto;
width: 100%;
}
.countdown-inner {
padding: 24px 16px !important;
}
/* Home hero: stack + hide logo on mobile */
.home-hero {
flex-direction: column;
text-align: center;
}
.home-logo {
display: none; /* hide logo on small screens */
}
/* Buttons a bit smaller on mobile */
button {
font-size: 16px;
padding: 12px;
}
.start-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
width: 100%;
}
/* EN + ES next to each other */
#btn-en,
#btn-es {
flex: 0 0 calc(50% - 5px); /* keep them side-by-side */
}
/* Start Game full width */
#start-game-btn {
flex: 0 0 100%;
}
#timer {
display: none !important;
}
#mobile-timer-text {
display: block;
font-size: clamp(26px, 7vw, 36px); /* scales with screen width */
font-weight: 800;
color: #F7941F;
text-align: center;
margin: 10px 0 16px;
}
/* Allow horizontal scrolling for leaderboard tables */
.leaderboard-wrapper {
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
width: 100%;
}
/* Ensure table stays inside scrollable box */
.leaderboard-wrapper table {
min-width: 600px; /* or 650β700px if you prefer more spacing */
}
}
@media (min-width: 601px) {
#mobile-timer-text {
display: none !important;
}
}
/* Desktop (1025px+) */
@media (min-width: 1025px) {
#app {
padding: 30px;
}
#questions {
margin: 10px;
}
#timer {
flex: 0 0 300px;
font-size: 64px;
margin: 0;
}
}