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

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

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

/* ----------------------------------------
BUILD AREA
---------------------------------------- */

.build-area {
padding: 18px;
border: 1px solid var(--border);
background: #101728;
border-radius: 15px;
}

.build-label,
.pieces-label {
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
text-align: center;
margin-bottom: 12px;
}

.build-slots {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}

.build-slot {
min-height: 86px;
border: 2px dashed var(--border);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.015);
}

.build-slot.filled {
border-style: solid;
border-color: var(--accent);
background: rgba(196,154,104,.08);
}

.build-slot.correct {
border-color: var(--good);
background: rgba(85,197,138,.12);
}

.slot-number {
color: #59657d;
font-size: 12px;
font-weight: 800;
}

/* ----------------------------------------
PIECES
---------------------------------------- */

.pieces-label {
margin-top: 22px;
}

.pieces {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 9px;
}

.piece {
min-height: 92px;
border: 2px solid var(--border);
background: #101728;
border-radius: 13px;
color: var(--text);
cursor: pointer;

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

gap: 7px;

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


}

.piece:hover {
border-color: var(--accent);
transform: translateY(-2px);
}

.piece.used {
opacity: .25;
cursor: default;
transform: none;
}

.piece.selected {
border-color: var(--accent-light);
background: rgba(196,154,104,.14);
transform: translateY(-2px);
}

.piece-name {
color: var(--muted);
font-size: 11px;
font-weight: 600;
}

/* ----------------------------------------
SVG ICONS
---------------------------------------- */

.icon {
width: 48px;
height: 48px;
display: block;
}

.build-slot .icon {
width: 54px;
height: 54px;
}

/* ----------------------------------------
FEEDBACK
---------------------------------------- */

.feedback {
min-height: 46px;

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

text-align: center;

margin-top: 16px;

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

/* ----------------------------------------
MOBILE
---------------------------------------- */

@media (max-width: 600px) {

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

.build-card {
    padding: 13px;
}

.question {
    font-size: 18px;
}

.build-slots {
    grid-template-columns: repeat(3, 1fr);
}

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

.piece {
    min-height: 88px;
}

.icon {
    width: 42px;
    height: 42px;
}

.build-slot .icon {
    width: 46px;
    height: 46px;
}


}

@media (max-width: 380px) {

.build-slots,
.pieces {
    grid-template-columns: repeat(2, 1fr);
}


}