.minesweeper-main { width: 100%; padding: 0 0 54px; }
.minesweeper-page-header { padding: 20px 22px; color: #fff; background: var(--color-brand); border-bottom: 4px solid var(--color-accent); }
.minesweeper-header-inner { width: min(1200px, 100%); margin: 0 auto; }
.minesweeper-header-inner h1 { margin: 0; color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.minesweeper-header-inner p { margin: 7px 0 0; color: #f3dfce; }
.back-link { display: inline-block; margin-bottom: 9px; color: #fff; font-size: .88rem; font-weight: 700; text-underline-offset: 3px; }
.board-section { width: min(760px, calc(100% - 40px)); margin: 22px auto 0; padding: 26px; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-card); }
.board-section > h2 { margin: 0 0 15px; }
.difficulty-panel { width: min(600px, 100%); margin: 0 auto 14px; padding: 14px 16px; background: #fffaf2; border: 1px solid var(--color-border); border-radius: 10px; }
.difficulty-panel h3 { margin: 0; font-size: 1rem; }
.difficulty-buttons, .game-options, .mode-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.difficulty-buttons { margin-top: 10px; }
.difficulty-buttons button, .game-options button, .celebration button { min-height: 44px; min-width: 104px; padding: 8px 12px; color: var(--color-ink); background: #fff; border: 1px solid var(--color-border); border-radius: 9px; font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.difficulty-buttons button { flex: 1 1 120px; }
.difficulty-buttons small { display: block; margin-top: 2px; font-size: .7rem; font-weight: 600; }
.difficulty-buttons button:hover, .game-options button:hover, .celebration button:hover { background: #f7ead9; }
.difficulty-buttons button.active, .mode-buttons button.active { color: #fff; background: var(--color-brand-strong); border-color: var(--color-brand-strong); }
.game-options { align-items: stretch; margin: 0 auto 12px; }
.mode-buttons { flex-wrap: nowrap; }
.game-stats { width: min(100%, 500px); margin: 0 auto; display: flex; justify-content: space-around; gap: 10px; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.game-stats strong { color: var(--color-brand-strong); }
#status { min-height: 1.5em; margin: 8px 0; color: var(--color-muted); font-size: .86rem; line-height: 1.45; }
#status.success-status { color: #246b3f; font-weight: 700; }
#status.failure-status { color: #a52e27; font-weight: 700; }
.board-wrap { max-width: 100%; overflow: hidden; }
.minesweeper-board { --rows: 9; --cols: 9; --board-max: 288px; width: min(100%, var(--board-max)); aspect-ratio: var(--cols) / var(--rows); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); margin: 0 auto; border: 3px solid var(--color-brand-strong); background: #9a8876; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.mine-cell { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 0; border: 1px solid #8a7765; border-radius: 0; background: #ead8bd; color: #241c17; font-family: inherit; font-size: clamp(.62rem, 3vw, 1.08rem); font-weight: 900; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mine-cell:hover { background: #f4e6cf; }
.mine-cell:focus-visible { position: relative; z-index: 2; outline: 3px solid #111; outline-offset: -3px; }
.mine-cell.revealed { cursor: default; background: #fffaf2; border-color: #d5c7b5; }
.mine-cell.flagged { color: #8e241d; background: #ffe8b8; font-size: clamp(.75rem, 3.2vw, 1.2rem); }
.mine-cell.mine { color: #fff; background: #b2312b; }
.mine-cell.mine-shown { background: #6e5b4b; }
.mine-cell[data-number="1"] { color: #1756a9; }
.mine-cell[data-number="2"] { color: #28733f; }
.mine-cell[data-number="3"] { color: #b3261e; }
.mine-cell[data-number="4"] { color: #573a92; }
.mine-cell[data-number="5"] { color: #8b3b16; }
.mine-cell[data-number="6"] { color: #08747e; }
.mine-cell[data-number="7"] { color: #222; }
.mine-cell[data-number="8"] { color: #666; }
.tap-help { margin: 12px auto 0; color: var(--color-muted); font-size: .9rem; }
.rules-card { width: min(100%, 600px); margin: 18px auto 0; text-align: left; 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 14px; line-height: 1.55; }
.rules-content p:first-child { margin-top: 0; }
.celebration[hidden] { display: none; }
.celebration { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(37, 22, 14, .62); }
.celebration-card { position: relative; z-index: 2; width: min(420px, 100%); padding: 30px; text-align: center; background: #fffaf2; border: 3px solid var(--color-accent); border-radius: 18px; box-shadow: 0 18px 60px rgba(0, 0, 0, .35); }
.celebration-kicker { margin: 0; color: var(--color-brand); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.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: 600px) {
    .minesweeper-page-header { padding: 14px; }
    .minesweeper-main { padding-bottom: 36px; }
    .board-section { width: calc(100% - 20px); padding: 18px 7px; }
    .difficulty-panel { padding: 12px 8px; }
    .difficulty-buttons { display: grid; grid-template-columns: repeat(3, 1fr); }
    .difficulty-buttons button { min-width: 0; padding-inline: 4px; }
    .game-options { display: grid; grid-template-columns: minmax(92px, .75fr) minmax(184px, 1.5fr); }
    .game-options > button, .mode-buttons button { min-width: 0; width: 100%; padding-inline: 5px; }
    .game-stats { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) { .confetti-layer i { animation: none; } }