.tsq-wrapper {
width: 100%;
max-width: 1080px;
margin: 0 auto;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #111;
box-sizing: border-box;
padding: 1rem;
}
.tsq-game {
width: 100%;
height: 100%;
background: #1e1e2f;
border-radius: 32px;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
padding: 1rem 1rem 0.5rem;
display: flex;
flex-direction: column;
color: #fff;
position: relative;
overflow: hidden;
} .tsq-top-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.tsq-countdown {
font-size: 2.4rem;
font-weight: 700;
padding: 0.3rem 1.5rem;
border-radius: 999px;
background: rgba(0,0,0,0.4);
}
.tsq-progress {
font-size: 1.3rem;
font-weight: 600;
padding: 0.3rem 1rem;
border-radius: 999px;
background: rgba(15,23,42,0.9);
} .tsq-player-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.tsq-btn {
border: none;
cursor: pointer;
font-size: 1.1rem;
border-radius: 999px;
padding: 0.6rem 1.4rem;
font-weight: 600;
transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
touch-action: manipulation;
}
.tsq-btn:active {
transform: scale(0.97);
box-shadow: 0 4px 8px rgba(0,0,0,0.3) inset;
}
.tsq-player-btn {
min-width: 120px;
display: flex;
flex-direction: column;
align-items: center;
} .tsq-player-inactive {
background: #2563eb;
color: #fff;
}
.tsq-player-current {
background: #ef4444;
color: #fff;
}
.tsq-player-name {
font-size: 1rem;
line-height: 1.2;
}
.tsq-player-score {
font-size: 0.8rem;
margin-top: 0.15rem;
opacity: 0.9;
} .tsq-restart-row {
display: flex;
justify-content: center;
margin-bottom: 0.5rem;
}
.tsq-btn-restart {
background: #22c55e;
color: #fff;
padding-inline: 2.5rem;
} .tsq-question-card {
background: #0f172a;
border-radius: 24px;
padding: 1rem 1rem;
margin-bottom: 0.5rem;
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 30vh;
}
.tsq-question-text {
font-size: 1.3rem;
font-weight: 600;
line-height: 1.4;
}
.tsq-question-image {
display: flex;
justify-content: center;
align-items: center;
max-height: 35vh;
}
.tsq-question-image img {
max-width: 100%;
max-height: 35vh;
border-radius: 16px;
object-fit: contain;
} .tsq-answers {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
margin-bottom: 0.5rem;
flex: 0 0 auto;
}
.tsq-answer {
background: #f9fafb;
color: #111827;
border-radius: 24px;
padding: 0.7rem 0.9rem;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.6rem;
}
.tsq-answer .tsq-label {
font-weight: 700;
font-size: 1.2rem;
width: 2rem;
}
.tsq-answer .tsq-text {
font-size: 1.1rem;
}
.tsq-answer-image {
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
}
.tsq-answer-image img {
max-width: 140px;
max-height: 100px;
border-radius: 12px;
object-fit: cover;
} .tsq-controls {
margin-top: auto;
padding: 0.4rem 0.6rem 0.6rem;
background: rgba(15,23,42,0.95);
border-radius: 20px 20px 0 0;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: center;
}
.tsq-control-group {
display: flex;
flex-direction: column;
gap: 0.1rem;
font-size: 0.8rem;
}
.tsq-control-group label {
opacity: 0.8;
}
.tsq-control-group select {
border-radius: 999px;
border: none;
padding: 0.35rem 0.8rem;
font-size: 0.9rem;
} .tsq-winner-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 20;
flex-direction: column;
}
.tsq-winner-overlay.tsq-visible {
display: flex;
}
.tsq-winner-inner {
background: #111827;
border-radius: 24px;
padding: 2rem 2.5rem;
text-align: center;
position: relative;
z-index: 30;
max-width: 90%;
}
.tsq-winner-text {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
}
.tsq-btn-close {
position: absolute;
top: 0.5rem;
right: 0.7rem;
background: transparent;
color: #fff;
font-size: 2rem;
padding: 0;
line-height: 1;
}
.tsq-confetti {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 25;
}
.tsq-confetti-piece {
position: absolute;
width: 10px;
height: 18px;
background: #facc15;
border-radius: 2px;
opacity: 0.9;
animation-name: tsqConfettiFall;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.tsq-confetti-piece:nth-child(3n) {
background: #fb7185;
}
.tsq-confetti-piece:nth-child(3n+1) {
background: #4ade80;
}
.tsq-confetti-piece:nth-child(3n+2) {
background: #38bdf8;
}
@keyframes tsqConfettiFall {
0% {
transform: translateY(-100%) rotateZ(0deg);
}
100% {
transform: translateY(120vh) rotateZ(360deg);
}
}