.mastermind-main { padding-bottom: 38px; background: var(--color-canvas); }
.mastermind-page-header { color: #fff; background: linear-gradient(115deg, #3d2117, #74422c); border-bottom: 1px solid #8a654d; }
.mastermind-header-inner { width: min(900px, 100%); margin: 0 auto; padding: 14px 20px 18px; }
.mastermind-page-header h1 { margin: 5px 0 2px; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.mastermind-page-header p { margin: 0; color: #f2dfd0; }
.back-link { display: inline-block; color: #fff; font-size: .9rem; font-weight: 700; text-underline-offset: 3px; }

button { touch-action: manipulation; }
.game-card { width: min(720px, calc(100% - 28px)); margin: 22px auto 0; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-card); }
.game-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.game-heading h2, .game-heading p { margin: 0; }
.game-heading p { margin-top: 4px; color: var(--color-muted); }
.game-heading button, .celebration button { min-height: 44px; padding: 9px 14px; border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-ink); background: #fff; font-weight: 800; cursor: pointer; }
.game-heading button:hover, .celebration button:hover { background: #f7ead9; }

.game-stats { display: flex; justify-content: space-between; gap: 16px; margin-top: 15px; font-variant-numeric: tabular-nums; }
.game-stats strong { color: var(--color-brand); }
#status { min-height: 2.7em; margin: 8px 0 12px; color: var(--color-muted); line-height: 1.35; }
#status.success-status { color: #246b3f; font-weight: 800; }
#status.failure-status { color: #a52e27; font-weight: 800; }

.board-wrap { width: 100%; overflow: hidden; }
.guess-board { width: 80%; margin-inline: auto; border-collapse: collapse; table-layout: fixed; background: #fff; font-variant-numeric: tabular-nums; }
.guess-board th, .guess-board td { height: 47px; padding: 4px; border: 1px solid var(--color-border); text-align: center; }
.guess-board .guess-column { width: auto; }
.guess-board .feedback-column { width: 72px; }
.guess-board tbody th { color: var(--color-muted); background: #fff8ed; }
.guess-board .current-row { background: #fff5d9; }
.guess-board .locked-row { background: #fff; }
.guess-board .empty-row td { color: #b9aa9b; background: #fffdf9; }
.guess-tokens { display: flex; align-items: center; justify-content: center; gap: 7px; }

.color-token { width: 35px; height: 35px; flex: 0 0 35px; display: inline-grid; place-items: center; border: 2px solid #3a302b; border-radius: 50%; color: #fff; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px #000c; box-shadow: inset 0 0 0 2px #ffffff5c; }
.color-black { background: #171717; }
.color-yellow { color: #211a00; background: #f2cc19; text-shadow: none; }
.color-orange { color: #211000; background: #ee8518; text-shadow: none; }
.color-pink { color: #35101e; background: #f28bad; text-shadow: none; }
.color-red { background: #c62828; }
.color-purple { background: #6f3ca0; }
.color-blue { background: #1769aa; }
.color-green { background: #23743b; }

.guess-position { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; padding: 0; border: 2px dashed #9d8874; border-radius: 50%; color: var(--color-muted); background: #fff; font-weight: 800; cursor: pointer; }
.guess-position .color-token { width: 35px; height: 35px; flex-basis: 35px; }
.guess-position.selected { border: 3px solid #111; outline: 3px solid #f1bb3e; outline-offset: 1px; }
.guess-position:focus-visible, .palette-color:focus-visible, button:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

.palette-panel { margin-top: 16px; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff8ed; }
.color-palette { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.palette-color { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 4px; border: 1px solid var(--color-border); border-radius: 9px; background: #fff; cursor: pointer; }
.palette-color:hover { background: #f7ead9; }
.palette-color:disabled { cursor: default; opacity: .48; }

.guess-board .submit-cell { padding: 0; }
.row-submit {
    width: calc(100% - 8px);
    min-height: 38px;
    margin: 2px 4px 6px;
    padding: 6px;
    border: 1px solid #63351f;
    border-bottom-width: 4px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(#a86642, var(--color-brand));
    box-shadow: inset 0 1px 0 #ffffff70, 0 2px 3px #3d211738;
    font-weight: 800;
    text-shadow: 0 1px 1px #0008;
    cursor: pointer;
}
.row-submit:hover { background: linear-gradient(#b87950, var(--color-brand-strong)); }
.row-submit:active {
    margin-top: 5px;
    margin-bottom: 3px;
    border-bottom-width: 1px;
    box-shadow: inset 0 1px 2px #0004;
}
.row-submit:disabled {
    border-color: #a99b8d;
    color: #756a61;
    background: linear-gradient(#f8f3ed, #ded5cb);
    box-shadow: inset 0 1px 0 #fff, 0 2px 2px #3d211726;
    text-shadow: 0 1px 0 #fff;
    cursor: default;
}
.code-reveal { margin: 14px 0 2px; padding: 12px; text-align: center; background: #fff8ed; border: 1px solid var(--color-border); border-radius: 10px; }
.code-reveal h3 { margin: 0 0 8px; font-size: .95rem; }
.code-reveal[hidden], .celebration[hidden] { display: none; }

.rules-card { margin-top: 18px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }
.rules-card summary { padding: 13px 15px; font-weight: 800; cursor: pointer; }
.rules-content { padding: 0 16px 10px; line-height: 1.5; }
.rules-content p:first-child { margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.celebration { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: #25160e9e; }
.celebration-card { position: relative; z-index: 2; width: min(420px, 100%); padding: 30px; text-align: center; background: var(--color-surface); border: 3px solid var(--color-accent); border-radius: 18px; box-shadow: 0 18px 60px #0006; }
.celebration-kicker { margin: 0; color: var(--color-brand); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.celebration-card h2 { margin: 8px 0; }
.confetti-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-layer i { position: absolute; top: -20px; left: var(--left); width: 9px; height: 14px; background: var(--color); animation: confetti-fall 3s linear var(--delay) forwards; }
@keyframes confetti-fall { to { transform: translate3d(var(--drift), 110vh, 0) rotate(720deg); } }

@media (max-width: 540px) {
    .mastermind-main { padding-bottom: 24px; }
    .mastermind-header-inner { padding: 11px 12px 14px; }
    .game-card { width: calc(100% - 12px); margin-top: 8px; padding: 14px 6px; }
    .game-heading { padding: 0 4px; }
    .game-heading button { padding-inline: 10px; }
    .game-stats, #status { margin-inline: 4px; }
    .guess-board th, .guess-board td { height: 43px; padding: 3px 2px; }
    .row-submit { min-height: 42px; }
    .guess-board .guess-column { width: auto; }
    .guess-board .feedback-column { width: 43px; }
    .guess-tokens { gap: 3px; }
    .color-token { width: 29px; height: 29px; flex-basis: 29px; font-size: .82rem; }
    .guess-position { width: 33px; height: 33px; flex-basis: 33px; }
    .guess-position .color-token { width: 29px; height: 29px; flex-basis: 29px; }
    .palette-panel { padding: 8px 5px; }
    .color-palette { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
    .palette-color { min-height: 44px; padding: 2px; }
}
@media (max-width: 350px) {
    .game-heading h2 { font-size: 1.25rem; }
    .guess-board .feedback-column { width: 40px; }
    .color-token { width: 27px; height: 27px; flex-basis: 27px; }
    .guess-position { width: 31px; height: 31px; flex-basis: 31px; }
    .guess-position .color-token { width: 27px; height: 27px; flex-basis: 27px; }
}
@media (prefers-reduced-motion: reduce) { .confetti-layer i { animation: none; } }