.game-shell {
max-width: 760px;
margin: auto;
}

.game-heading {
display: flex;
justify-content: space-between;
gap: 15px;
align-items: end;
margin-bottom: 20px;
}

.game-heading h1 {
margin: 4px 0;
font-size: 36px;
}

.game-heading p {
color: var(--muted);
margin: 0;
}

.game-progress {
color: var(--accent-light);
font-weight: 700;
white-space: nowrap;
}

.odd-card {
padding: 22px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 18px;
}

.question {
text-align: center;
font-size: 22px;
font-weight: 800;
margin-bottom: 24px;
display:none;
}

.items {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}

.emoji-choice {
min-height: 145px;
border: 2px solid var(--border);
background: #101728;
border-radius: 16px;
cursor: pointer;

display: flex;
align-items: center;
justify-content: center;

transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;


}

.emoji-choice:hover:not(:disabled) {
border-color: var(--accent);
transform: translateY(-3px);
}

.emoji-choice:focus-visible {
outline: 3px solid var(--accent-light);
outline-offset: 3px;
}

.emoji-choice:disabled {
cursor: default;
}

.emoji {
font-size: 68px;
line-height: 1;
user-select: none;
}

.emoji-choice.correct {
border-color: var(--good);
background: rgba(98, 199, 140, .15);
animation: correct-pop .3s ease;
}

.emoji-choice.wrong {
border-color: var(--accent);
animation: shake .35s ease;
}

.feedback {
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;

text-align: center;
margin-top: 18px;

font-weight: 700;
line-height: 1.45;


}

.feedback.good {
color: var(--good);
}

.feedback.try {
color: var(--accent-light);
}

.game-actions {
display: flex;
justify-content: center;
gap: 9px;
margin-top: 15px;
}

.game-button,
.secondary-button {
min-height: 46px;
padding: 10px 17px;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
}

.game-button {
background: var(--accent);
border: 1px solid var(--accent);
color: #111827;
}

.game-button:disabled {
opacity: .4;
cursor: default;
}

.secondary-button {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
}

@keyframes correct-pop {

0% {
    transform: scale(.95);
}

60% {
    transform: scale(1.06);
}

100% {
    transform: scale(1);
}


}

@keyframes shake {

0%,
100% {
    transform: translateX(0);
}

25% {
    transform: translateX(-6px);
}

75% {
    transform: translateX(6px);
}


}

@media (max-width: 600px) {

.game-heading {
    align-items: flex-start;
    flex-direction: column;
}

.odd-card {
    padding: 14px;
}

.items {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.emoji-choice {
    min-height: 120px;
}

.emoji {
    font-size: 56px;
}


}

@media (max-width: 360px) {

.emoji-choice {
    min-height: 105px;
}

.emoji {
    font-size: 48px;
}


}