.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;
}

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

.pattern {
min-height: 150px;

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

gap: 12px;

flex-wrap: wrap;

padding: 10px;


}

.pattern-item {
width: 55px;
height: 55px;

flex-shrink: 0;

border-radius: 12px;

box-shadow:
    inset 0 2px 4px rgba(255,255,255,.12),
    0 3px 8px rgba(0,0,0,.15);

transition:
    transform .15s ease;


}

.pattern-item.circle {
border-radius: 50%;
}

.pattern-item.square {
border-radius: 9px;
}

.pattern-item.triangle {
width: 0;
height: 0;

border-radius: 0;

background: transparent !important;

border-left: 29px solid transparent;
border-right: 29px solid transparent;
border-bottom: 55px solid currentColor;

box-shadow: none;


}

.pattern-item.star {
width: 55px;
height: 55px;

background: transparent !important;

position: relative;

clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 94%,
    50% 72%,
    21% 94%,
    32% 57%,
    2% 35%,
    39% 35%
);


}

.pattern-item.diamond {
transform: rotate(45deg);
border-radius: 7px;
}

.pattern-item.small {
transform: scale(.72);
}

.pattern-item.large {
transform: scale(1.18);
}

/*
|--------------------------------------------------------------------------

Question mark
*/

.pattern-question {
width: 55px;
height: 55px;

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

color: var(--accent-light);

font-size: 42px;
font-weight: 800;

line-height: 1;


}

/*
|--------------------------------------------------------------------------

Choices
*/

.choices {
display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 10px;

margin-top: 20px;


}

.choice {
min-height: 82px;

border: 2px solid var(--border);

background: #101728;

border-radius: 13px;

cursor: pointer;

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

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


}

.choice:hover:not(:disabled) {
border-color: var(--accent);

transform:
    translateY(-2px);


}

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

.choice:disabled {
cursor: default;
}

.choice .pattern-item {
width: 40px;
height: 40px;
}

.choice .pattern-item.triangle {
width: 0;
height: 0;

border-left-width: 21px;
border-right-width: 21px;
border-bottom-width: 40px;


}

.choice .pattern-item.star {
width: 40px;
height: 40px;
}

/*
|--------------------------------------------------------------------------

Feedback
*/

.feedback {
min-height: 42px;

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

text-align: center;

margin-top: 14px;

font-weight: 700;

line-height: 1.45;


}

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

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

/*
|--------------------------------------------------------------------------

Actions
*/

.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);


}

.secondary-button:hover {
border-color: var(--accent);
}

/*
|--------------------------------------------------------------------------

Mobile
*/

@media (max-width: 520px) {

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

.pattern-card {
    padding: 12px;
}

.pattern {
    gap: 8px;

    min-height: 130px;
}

.pattern-item {
    width: 45px;
    height: 45px;
}

.pattern-item.triangle {
    border-left-width: 23px;
    border-right-width: 23px;
    border-bottom-width: 45px;
}

.pattern-item.star {
    width: 45px;
    height: 45px;
}

.pattern-question {
    width: 45px;
    height: 45px;

    font-size: 36px;
}

.choices {
    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;
}

.choice {
    min-height: 70px;
}

.choice .pattern-item {
    width: 34px;
    height: 34px;
}

.choice .pattern-item.triangle {
    border-left-width: 18px;
    border-right-width: 18px;
    border-bottom-width: 34px;
}

.choice .pattern-item.star {
    width: 34px;
    height: 34px;
}


}