* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #04040b;
font-family:
Arial,
Helvetica,
sans-serif;
overscroll-behavior: none;
-webkit-user-select: none;
user-select: none;
}
body {
touch-action: manipulation;
}
button {
font: inherit;
border: none;
outline: none;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
button:disabled {
cursor: default;
}
#game {
position: relative;
width: 100%;
height: var(--app-height, 100dvh);
min-height: var(--app-height, 100dvh);
overflow: hidden;
color: #fff;
background:
radial-gradient(
circle at 50% -15%,
rgba(104, 82, 255, .32),
transparent 38%
),
radial-gradient(
circle at 100% 100%,
rgba(0, 229, 255, .16),
transparent 32%
),
radial-gradient(
circle at 0% 100%,
rgba(255, 55, 180, .12),
transparent 30%
),
linear-gradient(
145deg,
#05050e 0%,
#090a19 45%,
#05050c 100%
);
}
.background {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.background::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
rgba(255,255,255,.018) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.018) 1px,
transparent 1px
);
background-size: 45px 45px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.8),
transparent 85%
);
opacity: .35;
}
.background::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at center,
transparent 35%,
rgba(0,0,0,.3) 100%
);
}
.glow {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: .3;
will-change: transform;
}
.glow-one {
width: 450px;
height: 450px;
top: -220px;
left: -140px;
background: #6157ff;
animation:
floatingGlow 10s ease-in-out infinite;
}
.glow-two {
width: 420px;
height: 420px;
right: -170px;
bottom: -160px;
background: #00d9ff;
animation:
floatingGlow 13s ease-in-out infinite reverse;
}
.glow-three {
width: 300px;
height: 300px;
top: 40%;
left: 42%;
background: #b04dff;
opacity: .1;
animation:
pulseGlow 7s ease-in-out infinite;
}
@keyframes floatingGlow {
0%,
100% {
transform:
translate3d(0, 0, 0)
scale(1);
}
50% {
transform:
translate3d(35px, 25px, 0)
scale(1.08);
}
}
@keyframes pulseGlow {
0%,
100% {
transform: scale(.8);
opacity: .06;
}
50% {
transform: scale(1.4);
opacity: .16;
}
}
.particles span {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background:
rgba(255,255,255,.55);
box-shadow:
0 0 8px rgba(120,140,255,.8);
animation:
particleFloat linear infinite;
}
.particles span:nth-child(1) {
left: 8%;
top: 20%;
animation-duration: 7s;
}
.particles span:nth-child(2) {
left: 20%;
top: 70%;
animation-duration: 9s;
}
.particles span:nth-child(3) {
left: 33%;
top: 30%;
animation-duration: 6s;
}
.particles span:nth-child(4) {
left: 48%;
top: 80%;
animation-duration: 10s;
}
.particles span:nth-child(5) {
left: 61%;
top: 18%;
animation-duration: 8s;
}
.particles span:nth-child(6) {
left: 73%;
top: 65%;
animation-duration: 7s;
}
.particles span:nth-child(7) {
left: 87%;
top: 30%;
animation-duration: 11s;
}
.particles span:nth-child(8) {
left: 92%;
top: 85%;
animation-duration: 9s;
}
.particles span:nth-child(9) {
left: 15%;
top: 45%;
animation-duration: 12s;
}
.particles span:nth-child(10) {
left: 80%;
top: 50%;
animation-duration: 8s;
}
@keyframes particleFloat {
0% {
transform:
translateY(40px)
scale(.7);
opacity: 0;
}
20% {
opacity: .7;
}
80% {
opacity: .7;
}
100% {
transform:
translateY(-140px)
scale(1.2);
opacity: 0;
}
}
.screen {
position: absolute;
inset: 0;
display: none;
z-index: 5;
min-width: 0;
min-height: 0;
}
.screen.active {
display: flex;
animation:
screenAppear
.45s
cubic-bezier(.16,1,.3,1)
forwards;
}
@keyframes screenAppear {
from {
opacity: 0;
transform:
scale(.96);
filter: blur(5px);
}
to {
opacity: 1;
transform:
scale(1);
filter: blur(0);
}
}
#menu-screen,
#category-screen,
#rules-screen,
#result-screen {
justify-content: center;
align-items: center;
padding:
max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
overflow: hidden;
}
.menu-content {
width: min(520px, 100%);
text-align: center;
position: relative;
z-index: 2;
max-height: 100%;
}
.menu-content::before {
content: "";
position: absolute;
width: 300px;
height: 180px;
left: 50%;
top: 40px;
transform:
translateX(-50%);
background: #5c63ff;
filter: blur(100px);
opacity: .12;
pointer-events: none;
}
.logo-symbol {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.brain-icon {
position: relative;
width: 82px;
height: 82px;
display: flex;
align-items: center;
justify-content: center;
font-size: 43px;
border-radius: 26px;
background:
linear-gradient(
145deg,
rgba(118,127,255,.4),
rgba(39,43,105,.18)
);
border:
1px solid
rgba(255,255,255,.17);
box-shadow:
0 25px 60px rgba(0,0,0,.55),
0 0 25px rgba(99,105,255,.22),
0 0 70px rgba(99,105,255,.1),
inset 0 1px 0 rgba(255,255,255,.2);
transform:
rotate(-3deg);
animation:
logoFloat 4s ease-in-out infinite,
logoGlow 3s ease-in-out infinite alternate;
}
.brain-icon::before {
content: "";
position: absolute;
inset: -5px;
border-radius: 30px;
border:
1px solid
rgba(112,126,255,.15);
animation:
logoRing 3s linear infinite;
}
@keyframes logoFloat {
0%,
100% {
transform:
rotate(-3deg)
translateY(0);
}
50% {
transform:
rotate(3deg)
translateY(-8px);
}
}
@keyframes logoGlow {
from {
box-shadow:
0 25px 60px rgba(0,0,0,.55),
0 0 25px rgba(99,105,255,.18),
inset 0 1px 0 rgba(255,255,255,.2);
}
to {
box-shadow:
0 25px 60px rgba(0,0,0,.55),
0 0 45px rgba(99,105,255,.3),
inset 0 1px 0 rgba(255,255,255,.2);
}
}
@keyframes logoRing {
from {
transform: scale(.9);
opacity: .7;
}
to {
transform: scale(1.15);
opacity: 0;
}
}
.game-title .title-small {
color: #aab1ff;
font-size: 12px;
font-weight: 900;
letter-spacing: 5px;
margin-bottom: 8px;
text-shadow:
0 0 20px rgba(125,135,255,.4);
}
.game-title h1 {
position: relative;
font-size:
clamp(
46px,
8vw,
74px
);
line-height: .88;
font-weight: 950;
letter-spacing: -4px;
background:
linear-gradient(
180deg,
#ffffff 0%,
#e5e7ff 38%,
#8a96ff 72%,
#606dff 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter:
drop-shadow(
0 12px 28px
rgba(90,105,255,.3)
)
drop-shadow(
0 0 15px
rgba(110,120,255,.12)
);
}
.title-line {
display: flex;
align-items: center;
gap: 12px;
margin: 19px 0 22px;
color: #70789d;
font-size: 10px;
font-weight: 900;
letter-spacing: 3px;
}
.title-line span {
flex: 1;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(120,130,255,.6)
);
}
.title-line span:last-child {
background:
linear-gradient(
90deg,
rgba(120,130,255,.6),
transparent
);
}
.menu-card {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.menu-stat {
position: relative;
overflow: hidden;
padding: 15px 8px;
border-radius: 18px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.065),
rgba(255,255,255,.025)
);
border:
1px solid
rgba(255,255,255,.09);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 10px 30px rgba(0,0,0,.15);
transition:
transform .25s ease,
border-color .25s ease,
background .25s ease;
}
.menu-stat::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
right: -35px;
bottom: -35px;
border-radius: 50%;
background: #6670ff;
filter: blur(25px);
opacity: .08;
}
.menu-stat:hover {
transform:
translateY(-4px);
border-color:
rgba(120,130,255,.3);
background:
rgba(255,255,255,.075);
}
.stat-icon {
font-size: 21px;
margin-bottom: 5px;
filter:
drop-shadow(
0 0 8px
rgba(255,255,255,.2)
);
}
.menu-stat strong {
display: block;
font-size: 19px;
}
.menu-stat span {
display: block;
margin-top: 3px;
color: #747c9d;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.main-button {
position: relative;
isolation: isolate;
width: 100%;
min-height: 64px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
border-radius: 18px;
color: #fff;
background:
linear-gradient(
135deg,
#737fff 0%,
#5b67f4 45%,
#4654d8 100%
);
box-shadow:
0 18px 40px
rgba(76,89,225,.32),
0 0 35px
rgba(80,95,255,.1),
inset 0 1px 0
rgba(255,255,255,.25);
font-size: 14px;
font-weight: 900;
letter-spacing: 2px;
overflow: hidden;
transition:
transform .2s
cubic-bezier(.16,1,.3,1),
box-shadow .2s ease;
}
.main-button::before {
content: "";
position: absolute;
inset: 1px;
border-radius: 17px;
border:
1px solid
rgba(255,255,255,.14);
pointer-events: none;
}
.main-button::after {
content: "";
position: absolute;
width: 60px;
height: 200%;
top: -50%;
left: -100px;
transform:
rotate(20deg);
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);
animation:
buttonShine
4s ease-in-out infinite;
}
@keyframes buttonShine {
0%,
60% {
left: -120px;
}
85%,
100% {
left: 120%;
}
}
.main-button b {
position: relative;
z-index: 2;
font-size: 24px;
transition:
transform
.25s
cubic-bezier(.16,1,.3,1);
}
.main-button:hover {
transform:
translateY(-4px)
scale(1.01);
box-shadow:
0 25px 55px
rgba(76,89,225,.45),
0 0 55px
rgba(80,95,255,.18),
inset 0 1px 0
rgba(255,255,255,.25);
}
.main-button:hover b {
transform:
translateX(7px)
scale(1.08);
}
.main-button:active {
transform:
translateY(1px)
scale(.975);
}
.main-button.disabled {
opacity: .5;
pointer-events: none;
}
.secondary-button {
position: relative;
overflow: hidden;
width: 100%;
min-height: 48px;
margin-top: 10px;
color: #9098bb;
background:
linear-gradient(
145deg,
rgba(255,255,255,.055),
rgba(255,255,255,.025)
);
border:
1px solid
rgba(255,255,255,.09);
border-radius: 15px;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
transition:
transform .2s ease,
color .2s ease,
background .2s ease,
border-color .2s ease;
}
.secondary-button:hover {
color: #fff;
background:
rgba(255,255,255,.085);
border-color:
rgba(255,255,255,.18);
transform:
translateY(-2px);
}
.secondary-button:active {
transform:
scale(.98);
}
.record-box {
margin-top: 16px;
}
.record-box span {
display: block;
color: #606987;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.record-box strong {
display: block;
margin-top: 3px;
font-size: 22px;
text-shadow:
0 0 20px
rgba(255,255,255,.15);
}
.category-content {
width: min(900px, 100%);
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
min-height: 0;
}
.category-header {
text-align: center;
margin-bottom: 24px;
flex-shrink: 0;
}
.category-kicker {
color: #8b92ff;
font-size: 10px;
font-weight: 900;
letter-spacing: 4px;
margin-bottom: 7px;
text-shadow:
0 0 18px
rgba(120,130,255,.35);
}
.category-header h2 {
font-size:
clamp(
30px,
5vw,
44px
);
line-height: 1;
letter-spacing: -1.5px;
}
.category-header p {
margin-top: 9px;
color: #737b9d;
font-size: 13px;
}
.categories-grid {
width: 100%;
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(190px, 1fr)
);
gap: 12px;
overflow: hidden;
}
.category-card {
position: relative;
isolation: isolate;
min-height: 130px;
overflow: hidden;
padding: 20px;
text-align: left;
border-radius: 22px;
color: #fff;
background:
linear-gradient(
145deg,
rgba(34,39,78,.95),
rgba(11,14,32,.97)
);
border:
1px solid
rgba(255,255,255,.08);
box-shadow:
0 18px 40px
rgba(0,0,0,.24),
inset 0 1px 0
rgba(255,255,255,.06);
transition:
transform .25s
cubic-bezier(.16,1,.3,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
animation:
categoryAppear
.55s
cubic-bezier(.16,1,.3,1)
backwards;
}
.category-card:nth-child(1) {
animation-delay: .03s;
}
.category-card:nth-child(2) {
animation-delay: .07s;
}
.category-card:nth-child(3) {
animation-delay: .11s;
}
.category-card:nth-child(4) {
animation-delay: .15s;
}
.category-card:nth-child(5) {
animation-delay: .19s;
}
.category-card:nth-child(6) {
animation-delay: .23s;
}
.category-card:nth-child(7) {
animation-delay: .27s;
}
.category-card:nth-child(8) {
animation-delay: .31s;
}
.category-card:nth-child(9) {
animation-delay: .35s;
}
.category-card:nth-child(10) {
animation-delay: .39s;
}
@keyframes categoryAppear {
from {
opacity: 0;
transform:
translateY(20px)
scale(.94)
rotateX(8deg);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1)
rotateX(0);
}
}
.category-card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
120deg,
transparent 20%,
rgba(255,255,255,.07) 50%,
transparent 80%
);
transform:
translateX(-120%);
transition:
transform .6s ease;
pointer-events: none;
}
.category-card:hover::before {
transform:
translateX(120%);
}
.category-card::after {
content: "";
position: absolute;
width: 140px;
height: 140px;
right: -60px;
bottom: -60px;
border-radius: 50%;
background: #6674ff;
filter: blur(35px);
opacity: .1;
transition:
transform .35s ease,
opacity .35s ease;
}
.category-card:hover {
transform:
translateY(-7px)
scale(1.015);
border-color:
rgba(122,135,255,.65);
box-shadow:
0 28px 55px
rgba(0,0,0,.4),
0 0 35px
rgba(87,101,255,.13),
inset 0 1px 0
rgba(255,255,255,.1);
}
.category-card:hover::after {
transform:
scale(1.5);
opacity: .2;
}
.category-card:active {
transform:
scale(.965);
}
.category-card.selected {
border-color:
rgba(125,140,255,.95);
background:
linear-gradient(
145deg,
rgba(62,73,150,.98),
rgba(19,24,58,.98)
);
box-shadow:
0 25px 60px
rgba(50,63,190,.3),
0 0 45px
rgba(91,108,255,.2),
inset 0 1px 0
rgba(255,255,255,.15);
animation:
categorySelected
.45s
cubic-bezier(.16,1,.3,1);
}
@keyframes categorySelected {
0% {
transform: scale(.97);
}
50% {
transform: scale(1.035);
}
100% {
transform: scale(1);
}
}
.category-icon {
position: relative;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
border-radius: 15px;
font-size: 25px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.1),
rgba(255,255,255,.035)
);
border:
1px solid
rgba(255,255,255,.09);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.08),
0 8px 20px
rgba(0,0,0,.18);
transition:
transform .3s
cubic-bezier(.16,1,.3,1),
background .3s ease;
}
.category-card:hover .category-icon {
transform:
scale(1.12)
rotate(-4deg);
background:
linear-gradient(
145deg,
rgba(116,128,255,.2),
rgba(255,255,255,.05)
);
}
.category-name {
display: block;
font-size: 15px;
font-weight: 900;
}
.category-count {
display: block;
margin-top: 4px;
color: #737c9f;
font-size: 10px;
font-weight: 700;
}
.category-card.selected
.category-count {
color: #b4bdff;
}
.category-random {
grid-column: 1 / -1;
min-height: 75px;
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
background:
linear-gradient(
110deg,
rgba(121,78,255,.2),
rgba(32,34,74,.95)
);
}
.category-random::after {
background: #a14cff;
opacity: .18;
}
.category-random:hover {
border-color:
rgba(167,105,255,.7);
}
.category-random
.category-icon {
margin: 0;
}
.rules-window {
position: relative;
width: min(520px, 100%);
max-height: 100%;
overflow: hidden;
padding: 30px;
border-radius: 27px;
background:
linear-gradient(
145deg,
rgba(29,34,68,.99),
rgba(9,12,29,.99)
);
border:
1px solid
rgba(255,255,255,.11);
box-shadow:
0 35px 100px
rgba(0,0,0,.65),
0 0 50px
rgba(75,85,255,.08),
inset 0 1px 0
rgba(255,255,255,.08);
animation:
windowAppear
.45s
cubic-bezier(.16,1,.3,1);
}
.rules-window::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -80px;
top: -80px;
border-radius: 50%;
background: #6670ff;
filter: blur(50px);
opacity: .12;
}
@keyframes windowAppear {
from {
opacity: 0;
transform:
scale(.88)
translateY(25px);
filter: blur(5px);
}
to {
opacity: 1;
transform:
scale(1)
translateY(0);
filter: blur(0);
}
}
.close-button {
position: absolute;
top: 15px;
right: 15px;
width: 38px;
height: 38px;
border-radius: 12px;
background:
rgba(255,255,255,.06);
color: #858dab;
font-size: 26px;
transition:
transform .2s ease,
color .2s ease,
background .2s ease;
}
.close-button:hover {
color: #fff;
background:
rgba(255,255,255,.12);
transform:
rotate(90deg);
}
.window-icon {
font-size: 38px;
margin-bottom: 10px;
}
.rules-window h2 {
font-size: 28px;
margin-bottom: 25px;
}
.rules-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
}
.rule {
display: flex;
align-items: center;
gap: 14px;
padding: 13px;
border-radius: 13px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.055),
rgba(255,255,255,.025)
);
border:
1px solid
rgba(255,255,255,.04);
transition:
transform .2s ease,
background .2s ease;
}
.rule:hover {
transform:
translateX(5px);
background:
rgba(255,255,255,.075);
}
.rule > span {
color: #7884ff;
font-size: 11px;
font-weight: 900;
}
.rule p {
color: #aeb5d0;
font-size: 12px;
line-height: 1.45;
}
.rule b {
color: #fff;
}
#game-screen {
justify-content: center;
align-items: center;
padding:
max(12px, env(safe-area-inset-top))
max(12px, env(safe-area-inset-right))
max(12px, env(safe-area-inset-bottom))
max(12px, env(safe-area-inset-left));
}
.game-interface {
width: min(920px, 100%);
height: min(900px, 100%);
max-height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
.top-panel {
display: grid;
grid-template-columns:
1fr auto 1fr;
align-items: center;
gap: 15px;
flex-shrink: 0;
}
.player-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.player-stat.right {
align-items: flex-end;
}
.stat-label {
color: #68708f;
font-size: 9px;
font-weight: 900;
letter-spacing: 2px;
}
.player-stat strong {
margin-top: 3px;
font-size: 22px;
text-shadow:
0 0 20px
rgba(255,255,255,.12);
}
.question-counter {
position: relative;
padding: 10px 18px;
border-radius: 14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.075),
rgba(255,255,255,.025)
);
border:
1px solid
rgba(255,255,255,.09);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 8px 25px
rgba(0,0,0,.15);
font-weight: 900;
font-size: 17px;
}
.progress-container {
margin-top: 13px;
flex-shrink: 0;
}
.progress-background {
width: 100%;
height: 5px;
overflow: hidden;
border-radius: 20px;
background:
rgba(255,255,255,.07);
}
#progress-bar {
position: relative;
height: 100%;
width: 10%;
border-radius: inherit;
background:
linear-gradient(
90deg,
#5966ff,
#8b94ff,
#5eeeff
);
box-shadow:
0 0 15px
rgba(96,111,255,.7),
0 0 30px
rgba(96,111,255,.2);
transition:
width .4s
cubic-bezier(.16,1,.3,1);
}
#progress-bar::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
background:
rgba(255,255,255,.5);
filter: blur(5px);
opacity: .5;
}
.game-toolbar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
flex-shrink: 0;
}
.game-category {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border-radius: 100px;
color: #9ba4d6;
background:
rgba(255,255,255,.035);
border:
1px solid
rgba(255,255,255,.07);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.5px;
text-transform: uppercase;
box-shadow:
0 5px 20px
rgba(0,0,0,.12);
}
.game-category span:first-child {
font-size: 12px;
}
.round-menu-button {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 13px;
border-radius: 11px;
color: #9da6ce;
background:
rgba(255,255,255,.045);
border:
1px solid
rgba(255,255,255,.09);
font-size: 9px;
font-weight: 900;
letter-spacing: 1px;
transition:
transform .2s ease,
background .2s ease,
color .2s ease,
border-color .2s ease;
}
.round-menu-button:hover {
color: #fff;
background:
rgba(255,255,255,.09);
border-color:
rgba(120,135,255,.35);
transform:
translateY(-2px);
}
.round-menu-button:active {
transform:
scale(.96);
}
.question-area {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
max-width: 760px;
margin: auto;
min-height: 0;
}
.question-badge {
align-self: center;
padding: 7px 14px;
border-radius: 100px;
color: #929cff;
background:
linear-gradient(
145deg,
rgba(101,115,255,.13),
rgba(101,115,255,.05)
);
border:
1px solid
rgba(101,115,255,.2);
font-size: 9px;
font-weight: 900;
letter-spacing: 3px;
margin-bottom: 10px;
flex-shrink: 0;
box-shadow:
0 0 20px
rgba(90,105,255,.06);
}
.question-card {
position: relative;
isolation: isolate;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 50px;
border-radius: 25px;
background:
linear-gradient(
145deg,
rgba(31,36,75,.98),
rgba(12,15,35,.98)
);
border:
1px solid
rgba(255,255,255,.1);
box-shadow:
0 25px 60px
rgba(0,0,0,.4),
0 0 45px
rgba(73,85,220,.05),
inset 0 1px 0
rgba(255,255,255,.07);
overflow: hidden;
flex-shrink: 1;
animation:
questionCardIn
.45s
cubic-bezier(.16,1,.3,1);
}
@keyframes questionCardIn {
from {
opacity: 0;
transform:
translateY(12px)
scale(.98);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
.question-card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
120deg,
transparent 20%,
rgba(125,135,255,.07),
transparent 80%
);
transform:
translateX(-100%);
animation:
questionShine
5s
ease-in-out infinite;
pointer-events: none;
}
@keyframes questionShine {
0%,
65% {
transform:
translateX(-100%);
}
90%,
100% {
transform:
translateX(100%);
}
}
.question-card::after {
content: "";
position: absolute;
width: 220px;
height: 220px;
right: -90px;
top: -110px;
border-radius: 50%;
background: #6674ff;
filter: blur(45px);
opacity: .11;
pointer-events: none;
}
.question-number-decoration {
position: absolute;
left: 12px;
top: 8px;
opacity: .08;
font-size: 80px;
font-weight: 950;
pointer-events: none;
}
.question-card h2 {
position: relative;
z-index: 2;
text-align: center;
font-size:
clamp(
20px,
3vw,
30px
);
line-height: 1.25;
overflow-wrap: anywhere;
text-shadow:
0 2px 15px
rgba(0,0,0,.2);
}
.timer-area {
display: flex;
justify-content: center;
margin: 15px 0;
flex-shrink: 0;
}
.timer-ring {
position: relative;
width: 68px;
height: 68px;
filter:
drop-shadow(
0 8px 20px
rgba(91,108,255,.2)
)
drop-shadow(
0 0 10px
rgba(91,108,255,.08)
);
}
.timer-ring svg {
width: 100%;
height: 100%;
transform:
rotate(-90deg);
}
.timer-track {
fill: none;
stroke:
rgba(255,255,255,.06);
stroke-width: 6;
}
.timer-progress {
fill: none;
stroke: #7783ff;
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray:
276.46;
stroke-dashoffset: 0;
transition:
stroke-dashoffset
.2s linear,
stroke
.2s ease;
}
.timer-value {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.timer-value span {
font-size: 20px;
font-weight: 900;
text-shadow:
0 0 15px
rgba(120,130,255,.4);
}
.answers-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 12px;
flex-shrink: 1;
}
.answer-button {
position: relative;
isolation: isolate;
min-height: 75px;
display: flex;
align-items: center;
padding: 10px 15px;
text-align: left;
color: #dce0f2;
border-radius: 17px;
background:
linear-gradient(
145deg,
rgba(31,36,68,.94),
rgba(16,19,41,.94)
);
border:
1px solid
rgba(255,255,255,.08);
box-shadow:
0 10px 25px
rgba(0,0,0,.22),
inset 0 1px 0
rgba(255,255,255,.045);
transition:
transform .18s
cubic-bezier(.16,1,.3,1),
border-color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
.answer-button::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.05),
transparent
);
transform:
translateX(-100%);
transition:
transform .5s ease;
pointer-events: none;
}
.answer-button:hover:not(:disabled)::before {
transform:
translateX(100%);
}
.answer-button:hover:not(:disabled) {
transform:
translateY(-4px);
border-color:
rgba(111,124,255,.6);
background:
linear-gradient(
145deg,
rgba(43,50,94,.98),
rgba(20,24,50,.98)
);
box-shadow:
0 16px 35px
rgba(0,0,0,.28),
0 0 25px
rgba(90,105,255,.08),
inset 0 1px 0
rgba(255,255,255,.07);
}
.answer-button:active:not(:disabled) {
transform:
scale(.975);
}
.answer-letter {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
border-radius: 11px;
color: #929cff;
background:
linear-gradient(
145deg,
rgba(102,116,255,.14),
rgba(102,116,255,.05)
);
border:
1px solid
rgba(102,116,255,.18);
font-weight: 900;
}
.answer-text {
font-size: 14px;
line-height: 1.25;
font-weight: 700;
overflow-wrap: anywhere;
}
.answer-button.correct {
border-color:
rgba(68,224,146,.8);
background:
linear-gradient(
145deg,
rgba(28,115,77,.82),
rgba(15,64,50,.9)
);
box-shadow:
0 0 30px
rgba(68,224,146,.14),
0 15px 35px
rgba(0,0,0,.25);
animation:
correctAnswer
.5s
cubic-bezier(.16,1,.3,1);
}
.answer-button.correct
.answer-letter {
color: #6affb2;
background:
rgba(72,230,148,.14);
border-color:
rgba(72,230,148,.3);
}
@keyframes correctAnswer {
0% {
transform: scale(1);
}
35% {
transform: scale(1.035);
}
65% {
transform: scale(.99);
}
100% {
transform: scale(1);
}
}
.answer-button.wrong {
border-color:
rgba(255,77,103,.8);
background:
linear-gradient(
145deg,
rgba(117,32,50,.8),
rgba(62,19,34,.9)
);
box-shadow:
0 0 30px
rgba(255,70,100,.12),
0 15px 35px
rgba(0,0,0,.25);
animation:
wrongAnswer
.42s
ease;
}
@keyframes wrongAnswer {
0%,
100% {
transform:
translateX(0);
}
20% {
transform:
translateX(-8px);
}
40% {
transform:
translateX(8px);
}
60% {
transform:
translateX(-6px);
}
80% {
transform:
translateX(4px);
}
}
.lives {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 15px;
flex-shrink: 0;
}
.lives-label {
color: #666e8e;
font-size: 9px;
font-weight: 900;
letter-spacing: 2px;
}
#lives-container {
display: flex;
gap: 4px;
}
.life {
font-size: 17px;
color: #30364f;
transition:
transform .3s
cubic-bezier(.16,1,.3,1),
color .25s ease,
filter .25s ease;
}
.life.active {
color: #ff607a;
filter:
drop-shadow(
0 0 8px
rgba(255,70,100,.35)
)
drop-shadow(
0 0 18px
rgba(255,70,100,.12)
);
}
.life.lost {
transform:
scale(.45)
rotate(-20deg);
}
.result-content {
width: min(520px, 100%);
max-height: 100%;
text-align: center;
animation:
resultAppear
.65s
cubic-bezier(.16,1,.3,1);
}
@keyframes resultAppear {
from {
opacity: 0;
transform:
translateY(35px)
scale(.92);
filter: blur(5px);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
filter: blur(0);
}
}
.result-icon {
font-size: 64px;
filter:
drop-shadow(
0 15px 30px
rgba(255,200,50,.25)
)
drop-shadow(
0 0 20px
rgba(255,190,50,.12)
);
animation:
resultIcon
2s
ease-in-out
infinite;
}
@keyframes resultIcon {
0%,
100% {
transform:
translateY(0)
rotate(-3deg)
scale(1);
}
50% {
transform:
translateY(-9px)
rotate(3deg)
scale(1.06);
}
}
.result-subtitle {
margin-top: 10px;
color: #737ca2;
font-size: 10px;
font-weight: 900;
letter-spacing: 4px;
}
.result-content h2 {
margin-top: 7px;
font-size: 38px;
font-weight: 950;
text-shadow:
0 5px 25px
rgba(255,255,255,.1);
}
.final-score-card {
position: relative;
overflow: hidden;
margin-top: 20px;
padding: 25px;
border-radius: 25px;
background:
linear-gradient(
145deg,
rgba(37,44,91,.98),
rgba(13,16,37,.98)
);
border:
1px solid
rgba(255,255,255,.1);
box-shadow:
0 25px 70px
rgba(0,0,0,.45),
0 0 40px
rgba(87,100,255,.07),
inset 0 1px 0
rgba(255,255,255,.08);
}
.final-score-card::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
left: 50%;
top: -130px;
transform:
translateX(-50%);
border-radius: 50%;
background: #6674ff;
filter: blur(45px);
opacity: .13;
}
.final-score-card > span {
position: relative;
z-index: 2;
display: block;
color: #70799d;
font-size: 9px;
font-weight: 900;
letter-spacing: 3px;
}
.final-score-card > strong {
position: relative;
z-index: 2;
display: block;
margin-top: 5px;
font-size: 58px;
font-weight: 950;
background:
linear-gradient(
180deg,
#fff,
#a5adff 55%,
#6877ff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter:
drop-shadow(
0 0 18px
rgba(105,120,255,.2)
);
}
.new-record {
display: none;
width: max-content;
margin: 8px auto 0;
padding: 6px 12px;
border-radius: 100px;
color: #75f1ac;
background:
rgba(67,230,143,.09);
border:
1px solid
rgba(67,230,143,.2);
font-size: 9px;
font-weight: 900;
letter-spacing: 2px;
}
.new-record.visible {
display: block;
animation:
recordAppear
.5s
cubic-bezier(.16,1,.3,1);
}
@keyframes recordAppear {
from {
opacity: 0;
transform:
translateY(8px)
scale(.9);
}
60% {
transform:
translateY(-2px)
scale(1.04);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
.result-stats {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 10px;
margin: 12px 0;
}
.result-stats > div {
padding: 14px;
border-radius: 15px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.055),
rgba(255,255,255,.025)
);
border:
1px solid
rgba(255,255,255,.07);
transition:
transform .2s ease,
background .2s ease;
}
.result-stats > div:hover {
transform:
translateY(-3px);
background:
rgba(255,255,255,.075);
}
.result-stats span {
display: block;
color: #68708f;
font-size: 9px;
font-weight: 800;
}
.result-stats strong {
display: block;
margin-top: 4px;
font-size: 22px;
}
.revive-button {
margin-top: 12px;
background:
linear-gradient(
135deg,
#29c985,
#15915e
);
box-shadow:
0 18px 40px
rgba(30,185,116,.25),
0 0 30px
rgba(30,185,116,.08),
inset 0 1px 0
rgba(255,255,255,.2);
}
.revive-button:hover {
box-shadow:
0 23px 50px
rgba(30,185,116,.35),
0 0 40px
rgba(30,185,116,.12),
inset 0 1px 0
rgba(255,255,255,.2);
}
.revive-hint {
margin-top: 8px;
color: #68708f;
font-size: 9px;
line-height: 1.4;
min-height: 13px;
}
.answer-message {
position: fixed;
left: 50%;
bottom:
max(
30px,
calc(
20px +
env(
safe-area-inset-bottom
)
)
);
z-index: 50;
display: flex;
align-items: center;
gap: 12px;
min-width: 230px;
max-width:
calc(100vw - 32px);
padding: 13px 17px;
border-radius: 15px;
background:
linear-gradient(
145deg,
rgba(24,29,58,.98),
rgba(11,14,30,.98)
);
border:
1px solid
rgba(255,255,255,.11);
box-shadow:
0 20px 50px
rgba(0,0,0,.5),
0 0 30px
rgba(90,100,255,.06);
opacity: 0;
pointer-events: none;
transform:
translate(-50%, 25px)
scale(.96);
transition:
opacity .3s ease,
transform
.3s
cubic-bezier(.16,1,.3,1);
}
.answer-message.visible {
opacity: 1;
transform:
translate(-50%, 0)
scale(1);
}
.message-icon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background:
rgba(255,255,255,.06);
flex-shrink: 0;
}
.message-text strong {
display: block;
font-size: 12px;
}
.message-text span {
display: block;
margin-top: 2px;
color: #7d85a3;
font-size: 10px;
}
.round-menu-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding:
max(18px, env(safe-area-inset-top))
max(18px, env(safe-area-inset-right))
max(18px, env(safe-area-inset-bottom))
max(18px, env(safe-area-inset-left));
background:
rgba(3,4,12,.72);
backdrop-filter:
blur(12px);
-webkit-backdrop-filter:
blur(12px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .25s ease,
visibility .25s ease;
}
.round-menu-overlay.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.round-menu-card {
width: min(420px, 100%);
padding: 28px;
text-align: center;
border-radius: 26px;
background:
linear-gradient(
145deg,
rgba(29,34,68,.99),
rgba(9,12,29,.99)
);
border:
1px solid
rgba(255,255,255,.12);
box-shadow:
0 35px 100px
rgba(0,0,0,.7),
0 0 50px
rgba(75,85,255,.12),
inset 0 1px 0
rgba(255,255,255,.08);
transform:
translateY(20px)
scale(.96);
transition:
transform
.3s
cubic-bezier(.16,1,.3,1);
}
.round-menu-overlay.visible
.round-menu-card {
transform:
translateY(0)
scale(1);
}
.round-menu-icon {
width: 64px;
height: 64px;
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
font-size: 31px;
background:
linear-gradient(
145deg,
rgba(118,127,255,.25),
rgba(39,43,105,.15)
);
border:
1px solid
rgba(255,255,255,.1);
box-shadow:
0 0 30px
rgba(99,105,255,.15);
}
.round-menu-card h2 {
font-size: 28px;
margin-bottom: 5px;
}
.round-menu-card p {
color: #747c9d;
font-size: 12px;
margin-bottom: 20px;
}
.round-menu-card
.secondary-button {
margin-top: 10px;
}
.screen.shake {
animation:
screenShake
.35s
ease;
}
@keyframes screenShake {
0%,
100% {
transform:
translateX(0);
}
20% {
transform:
translateX(-7px);
}
40% {
transform:
translateX(7px);
}
60% {
transform:
translateX(-5px);
}
80% {
transform:
translateX(4px);
}
}
.score-pop {
animation:
scorePop
.4s
cubic-bezier(.16,1,.3,1);
}
@keyframes scorePop {
0% {
transform:
scale(1);
}
35% {
transform:
scale(1.3);
color: #9ca7ff;
text-shadow:
0 0 20px
rgba(120,135,255,.7);
}
100% {
transform:
scale(1);
}
}
@media (max-width: 760px) {
#menu-screen,
#category-screen,
#rules-screen,
#result-screen {
padding:
max(10px, env(safe-area-inset-top))
max(10px, env(safe-area-inset-right))
max(10px, env(safe-area-inset-bottom))
max(10px, env(safe-area-inset-left));
}
.menu-content {
width: 100%;
max-width: 430px;
}
.logo-symbol {
margin-bottom: 8px;
}
.brain-icon {
width: 62px;
height: 62px;
font-size: 31px;
border-radius: 18px;
}
.game-title .title-small {
font-size: 9px;
letter-spacing: 3px;
margin-bottom: 5px;
}
.game-title h1 {
font-size:
clamp(
40px,
11vw,
52px
);
line-height: .88;
letter-spacing: -3px;
}
.title-line {
gap: 8px;
margin: 10px 0 12px;
font-size: 8px;
letter-spacing: 2px;
}
.menu-card {
gap: 6px;
margin-bottom: 10px;
}
.menu-stat {
padding: 9px 4px;
border-radius: 14px;
}
.stat-icon {
font-size: 17px;
margin-bottom: 3px;
}
.menu-stat strong {
font-size: 16px;
}
.menu-stat span {
font-size: 7px;
letter-spacing: .7px;
}
.main-button {
min-height: 52px;
border-radius: 15px;
font-size: 12px;
gap: 12px;
}
.main-button b {
font-size: 20px;
}
.secondary-button {
min-height: 40px;
margin-top: 7px;
border-radius: 13px;
font-size: 10px;
}
.record-box {
margin-top: 9px;
}
.record-box span {
font-size: 7px;
letter-spacing: 1.5px;
}
.record-box strong {
margin-top: 2px;
font-size: 18px;
}
#category-screen {
align-items: stretch;
justify-content: center;
}
.category-content {
width: 100%;
height: 100%;
max-width: 700px;
max-height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.category-header {
flex-shrink: 0;
margin-bottom: 10px;
}
.category-kicker {
font-size: 8px;
letter-spacing: 2.5px;
margin-bottom: 4px;
}
.category-header h2 {
font-size:
clamp(
24px,
7vw,
32px
);
line-height: 1;
letter-spacing: -1px;
}
.category-header p {
margin-top: 5px;
font-size: 9px;
}
.categories-grid {
width: 100%;
min-height: 0;
display: grid;
grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);
gap: 6px;
overflow: hidden;
flex: 0 1 auto;
}
.category-card {
min-width: 0;
min-height: 0;
height: 68px;
padding: 7px 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 12px;
}
.category-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
margin-bottom: 4px;
border-radius: 9px;
font-size: 16px;
}
.category-name {
width: 100%;
font-size: 9px;
line-height: 1.05;
font-weight: 900;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.category-count {
width: 100%;
margin-top: 2px;
font-size: 6px;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.category-random {
grid-column: 1 / -1;
height: 46px;
min-height: 46px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 12px;
}
.category-random
.category-icon {
width: 30px;
height: 30px;
margin: 0;
flex-shrink: 0;
}
.category-random
> span:last-child {
min-width: 0;
text-align: left;
}
.category-random
.category-name {
font-size: 9px;
white-space: nowrap;
}
.category-random
.category-count {
margin-top: 2px;
font-size: 6px;
}
#category-back {
flex-shrink: 0;
width: 100%;
min-height: 38px;
height: 38px;
margin-top: 7px;
border-radius: 12px;
font-size: 9px;
}
#game-screen {
padding:
max(8px, env(safe-area-inset-top))
max(8px, env(safe-area-inset-right))
max(8px, env(safe-area-inset-bottom))
max(8px, env(safe-area-inset-left));
}
.game-interface {
width: 100%;
height: 100%;
max-height: 100%;
}
.top-panel {
gap: 8px;
}
.stat-label {
font-size: 7px;
letter-spacing: 1.5px;
}
.player-stat strong {
margin-top: 2px;
font-size: 18px;
}
.question-counter {
padding: 7px 11px;
border-radius: 11px;
font-size: 14px;
}
.progress-container {
margin-top: 8px;
}
.progress-background {
height: 4px;
}
.game-toolbar {
margin-top: 6px;
}
.game-category {
padding: 5px 9px;
font-size: 7px;
letter-spacing: 1px;
}
.game-category span:first-child {
font-size: 10px;
}
.round-menu-button {
min-height: 31px;
padding: 0 10px;
border-radius: 9px;
font-size: 7px;
letter-spacing: .7px;
}
.question-area {
width: 100%;
max-width: 760px;
justify-content: center;
min-height: 0;
}
.question-badge {
padding: 5px 10px;
margin-bottom: 7px;
font-size: 7px;
letter-spacing: 2px;
}
.question-card {
width: 100%;
min-height: 105px;
padding: 16px 15px;
border-radius: 17px;
}
.question-number-decoration {
left: 7px;
top: 5px;
font-size: 55px;
}
.question-card h2 {
font-size:
clamp(
16px,
4.5vw,
21px
);
line-height: 1.18;
}
.timer-area {
margin: 7px 0;
}
.timer-ring {
width: 50px;
height: 50px;
}
.timer-value span {
font-size: 16px;
}
.answers-grid {
gap: 6px;
}
.answer-button {
min-height: 58px;
padding: 6px 7px;
border-radius: 12px;
}
.answer-letter {
width: 28px;
height: 28px;
flex-basis: 28px;
margin-right: 7px;
border-radius: 8px;
font-size: 11px;
}
.answer-text {
font-size: 10px;
line-height: 1.15;
}
.lives {
margin-top: 6px;
gap: 7px;
}
.lives-label {
font-size: 7px;
letter-spacing: 1.5px;
}
.life {
font-size: 15px;
}
.rules-window {
width: 100%;
max-width: 430px;
padding: 20px 14px;
border-radius: 20px;
}
.window-icon {
font-size: 32px;
margin-bottom: 6px;
}
.rules-window h2 {
font-size: 22px;
margin-bottom: 14px;
}
.rules-list {
gap: 6px;
margin-bottom: 14px;
}
.rule {
gap: 9px;
padding: 9px;
border-radius: 10px;
}
.rule > span {
font-size: 9px;
}
.rule p {
font-size: 10px;
line-height: 1.3;
}
.close-button {
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border-radius: 9px;
font-size: 22px;
}
.result-content {
width: 100%;
max-width: 430px;
}
.result-icon {
font-size: 48px;
}
.result-subtitle {
margin-top: 5px;
font-size: 8px;
letter-spacing: 2.5px;
}
.result-content h2 {
margin-top: 5px;
font-size: 28px;
}
.final-score-card {
margin-top: 12px;
padding: 17px;
border-radius: 18px;
}
.final-score-card > span {
font-size: 7px;
letter-spacing: 2px;
}
.final-score-card > strong {
margin-top: 3px;
font-size: 46px;
}
.new-record {
margin-top: 5px;
padding: 5px 9px;
font-size: 7px;
letter-spacing: 1.5px;
}
.result-stats {
gap: 6px;
margin: 8px 0;
}
.result-stats > div {
padding: 10px;
border-radius: 11px;
}
.result-stats span {
font-size: 7px;
}
.result-stats strong {
margin-top: 2px;
font-size: 19px;
}
.revive-button {
min-height: 48px;
margin-top: 7px;
font-size: 9px;
}
.revive-hint {
display: none;
}
.round-menu-card {
padding: 22px 16px;
border-radius: 21px;
}
.round-menu-icon {
width: 52px;
height: 52px;
border-radius: 16px;
font-size: 26px;
}
.round-menu-card h2 {
font-size: 23px;
}
.round-menu-card p {
font-size: 10px;
margin-bottom: 15px;
}
}
@media (max-width: 380px) {
.categories-grid {
gap: 5px;
}
.category-card {
height: 64px;
padding: 5px 3px;
border-radius: 10px;
}
.category-icon {
width: 27px;
height: 27px;
margin-bottom: 3px;
border-radius: 8px;
font-size: 14px;
}
.category-name {
font-size: 8px;
}
.category-count {
font-size: 5px;
}
.category-random {
height: 43px;
min-height: 43px;
padding: 5px 8px;
}
.category-random
.category-icon {
width: 27px;
height: 27px;
}
.category-random
.category-name {
font-size: 8px;
}
#category-back {
height: 35px;
min-height: 35px;
margin-top: 5px;
font-size: 8px;
}
.category-header {
margin-bottom: 7px;
}
.category-header h2 {
font-size: 25px;
}
.category-header p {
display: none;
}
.answer-button {
min-height: 54px;
}
.answer-letter {
width: 26px;
height: 26px;
flex-basis: 26px;
margin-right: 6px;
}
.answer-text {
font-size: 9px;
}
.round-menu-button {
padding: 0 8px;
font-size: 6px;
}
}
@media (max-height: 650px) {
.category-header {
margin-bottom: 6px;
}
.category-header h2 {
font-size: 24px;
}
.category-header p {
display: none;
}
.category-card {
height: 58px;
}
.category-icon {
width: 25px;
height: 25px;
margin-bottom: 2px;
font-size: 13px;
}
.category-name {
font-size: 8px;
}
.category-count {
display: none;
}
.category-random {
height: 40px;
min-height: 40px;
}
.category-random
.category-icon {
width: 25px;
height: 25px;
}
#category-back {
height: 34px;
min-height: 34px;
margin-top: 5px;
}
.brain-icon {
width: 50px;
height: 50px;
font-size: 25px;
}
.logo-symbol {
margin-bottom: 5px;
}
.game-title h1 {
font-size: 36px;
}
.title-line {
margin: 6px 0;
}
.menu-card {
margin-bottom: 7px;
}
.menu-stat {
padding: 6px 3px;
}
.main-button {
min-height: 44px;
}
.secondary-button {
min-height: 35px;
}
.question-card {
min-height: 90px;
padding: 12px;
}
.question-card h2 {
font-size: 15px;
}
.timer-area {
margin: 5px 0;
}
.timer-ring {
width: 43px;
height: 43px;
}
.timer-value span {
font-size: 14px;
}
.answer-button {
min-height: 48px;
}
.lives {
margin-top: 4px;
}
.game-toolbar {
margin-top: 4px;
}
.round-menu-button {
min-height: 28px;
}
}
@media (
max-height: 500px
) and (
orientation: landscape
) {
#menu-screen,
#category-screen,
#rules-screen,
#result-screen {
padding: 6px;
}
.category-card {
height: 48px;
}
.category-icon {
width: 21px;
height: 21px;
font-size: 11px;
margin-bottom: 1px;
}
.category-name {
font-size: 7px;
}
.category-random {
height: 34px;
min-height: 34px;
}
.category-random
.category-icon {
width: 21px;
height: 21px;
}
#category-back {
height: 30px;
min-height: 30px;
margin-top: 3px;
}
.category-header {
margin-bottom: 3px;
}
.category-header h2 {
font-size: 20px;
}
.game-interface {
height: 100%;
}
.game-toolbar {
margin-top: 3px;
}
.question-card {
min-height: 70px;
padding: 8px 20px;
}
.question-card h2 {
font-size: 13px;
}
.timer-ring {
width: 36px;
height: 36px;
}
.timer-value span {
font-size: 12px;
}
.timer-area {
margin: 2px 0;
}
.answer-button {
min-height: 40px;
}
.answer-letter {
width: 23px;
height: 23px;
flex-basis: 23px;
font-size: 9px;
}
.answer-text {
font-size: 9px;
}
.lives {
margin-top: 2px;
}
.round-menu-button {
min-height: 26px;
font-size: 6px;
}
}
@media (
prefers-reduced-motion: reduce
) {
*,
*::before,
*::after {
animation-duration:
.01ms !important;
animation-iteration-count:
1 !important;
transition-duration:
.01ms !important;
scroll-behavior:
auto !important;
}
}