:root{--bg-main:#121519;--bg-card:#181d24;--bg-inset:#13171d;--border-subtle:#ffffff0d;--border-divider:#232934;--mint-accent:#7ee8a8;--mint-hover:#93edb7;--mint-dark:#12161a;--coral-accent:#ff7b72;--coral-light:#ffa198;--text-primary:#f0f3f6;--text-muted:#7c8796;--text-subtle:#57606e;--cell-unrevealed-bg:#242934;--cell-unrevealed-top:#2c3340;--cell-unrevealed-shadow:#181c24;--cell-revealed-bg:#14171e;--cell-border:#1b2029;--font-serif:"Playfair Display", Georgia, serif;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;min-height:100vh}#root{min-height:100vh}.minesweeper-app{flex-direction:column;align-items:center;min-height:100vh;padding:16px 20px 48px;display:flex}.top-navbar{justify-content:space-between;align-items:center;width:100%;max-width:960px;padding:8px 0 24px;display:flex}.nav-brand{-webkit-user-select:none;user-select:none;align-items:center;gap:10px;display:flex}.brand-logo-icon{justify-content:center;align-items:center;display:flex}.brand-text{letter-spacing:-.2px;color:var(--text-primary);font-size:16px;font-weight:600}.nav-menu{align-items:center;gap:20px;display:flex}.nav-item{color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;padding:6px 2px;font-size:14px;font-weight:500;transition:color .15s;position:relative}.nav-item:hover,.nav-item.active{color:var(--text-primary)}.nav-indicator{background-color:var(--mint-accent);border-radius:999px;height:2px;position:absolute;bottom:-2px;left:0;right:0}.nav-btn-icon{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:8px;transition:all .15s;display:flex}.nav-btn-icon:hover{color:var(--text-primary);background:#ffffff0a}.main-content{flex-direction:column;align-items:center;width:100%;max-width:960px;display:flex}.hero-header{text-align:center;margin-bottom:28px;padding:0 10px}.hero-title{font-family:var(--font-serif);letter-spacing:-.6px;color:#f7f9fb;margin-bottom:8px;font-size:38px;font-weight:600;line-height:1.2}.hero-subtitle{color:var(--text-muted);letter-spacing:.1px;font-size:14px}.layout-columns{justify-content:center;align-items:flex-start;gap:24px;width:100%;display:flex}.game-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:18px;flex-direction:column;align-items:center;width:100%;max-width:480px;padding:20px;display:flex;box-shadow:0 10px 30px -10px #0006}.difficulty-pills{background:var(--bg-inset);border:1px solid #ffffff08;border-radius:999px;width:100%;margin-bottom:14px;padding:3px;display:flex}.diff-pill{color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;text-align:center;white-space:nowrap;background:0 0;border:none;border-radius:999px;flex:1;padding:7px 10px;font-size:13px;font-weight:500;transition:all .15s}.diff-pill:hover:not(.active){color:var(--text-primary)}.diff-pill.active{background:var(--mint-accent);color:var(--mint-dark);font-weight:600;box-shadow:0 2px 8px #7ee8a840}.status-bar{background:var(--bg-inset);border:1px solid #ffffff08;border-radius:10px;justify-content:space-between;align-items:center;width:100%;margin-bottom:12px;padding:8px 18px;display:flex}.info-badge{align-items:center;gap:8px;display:flex}.mines-count{font-family:var(--font-mono);color:var(--coral-accent);letter-spacing:1.5px;font-size:19px;font-weight:700}.timer-count{font-family:var(--font-mono);color:#cbd5e1;letter-spacing:.5px;font-size:15px;font-weight:600}.smiley-face-btn{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:36px;height:36px;padding:0;transition:transform .15s;display:flex}.smiley-face-btn:hover{transform:scale(1.08)}.smiley-face-btn:active{transform:scale(.95)}.mode-toggle-container{background:var(--bg-inset);border:1px solid #ffffff08;border-radius:999px;width:100%;margin-bottom:14px;padding:3px;display:flex}.mode-pill{color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:999px;flex:1;justify-content:center;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.mode-icon{font-size:14px}.mode-pill.active{background:var(--mint-accent);color:var(--mint-dark);box-shadow:0 2px 8px #7ee8a840}.mode-pill.flag-pill.active{background:var(--coral-accent);color:#fff;box-shadow:0 2px 8px #ff7b7259}.board-outer-container{-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#2a313d transparent;justify-content:center;width:100%;margin-bottom:16px;padding:2px;display:flex;overflow:auto hidden}.board-outer-container::-webkit-scrollbar{height:6px}.board-outer-container::-webkit-scrollbar-thumb{background:#2a313d;border-radius:4px}.board-grid{-webkit-user-select:none;user-select:none;touch-action:manipulation;gap:3px;margin:0 auto;display:grid}.board-cell{aspect-ratio:1;background:linear-gradient(180deg, var(--cell-unrevealed-top) 0%, var(--cell-unrevealed-bg) 100%);border:1px solid var(--cell-unrevealed-top);border-bottom-color:var(--cell-unrevealed-shadow);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;border-radius:4px;justify-content:center;align-items:center;min-width:32px;min-height:32px;padding:0;transition:filter .1s;display:flex}.board-cell:hover:not(.revealed){filter:brightness(1.18)}.board-cell:active:not(.revealed){filter:brightness(.9)}.board-cell.revealed{background:var(--cell-revealed-bg);border:1px solid var(--cell-border);cursor:default;box-shadow:inset 0 1px 3px #0006}.board-cell.flagged{background:linear-gradient(#2c2f38 0%,#20232a 100%)}.cell-flag-wrapper{justify-content:center;align-items:center;animation:.12s ease-out flagScaleIn;display:flex}@keyframes flagScaleIn{0%{transform:scale(.4)}to{transform:scale(1)}}.cell-mine-wrapper{justify-content:center;align-items:center;display:flex}.board-cell.exploded{box-shadow:0 0 12px #ff7b7299;background:#ff7b72!important;border-color:#ff9b94!important}.cell-digit{font-family:var(--font-sans);font-size:16px;font-weight:700;line-height:1}.wrong-mark{font-size:13px}.new-game-btn{background:var(--mint-accent);width:100%;color:var(--mint-dark);font-family:var(--font-sans);cursor:pointer;-webkit-user-select:none;user-select:none;border:none;border-radius:10px;padding:12px 24px;font-size:15px;font-weight:600;transition:all .15s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 14px #7ee8a833}.new-game-btn:hover{background:var(--mint-hover);transform:translateY(-1px);box-shadow:0 6px 20px #7ee8a84d}.new-game-btn:active{transform:translateY(0)}.board-caption{color:var(--text-subtle);letter-spacing:.2px;text-align:center;margin-top:10px;font-size:12px}.sidebar-column{flex-direction:column;gap:16px;width:250px;display:flex}.sidebar-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:20px 22px;box-shadow:0 10px 30px -10px #0000004d}.card-section{flex-direction:column;gap:4px;display:flex}.section-label{color:#94a0b0;align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}.section-value.best-time-value{font-family:var(--font-mono);color:#fff;letter-spacing:.5px;margin-top:2px;font-size:32px;font-weight:700}.card-divider{background:var(--border-divider);height:1px;margin:14px 0}.section-label-sub{color:#94a0b0;font-size:13px}.section-value-sub{font-family:var(--font-sans);color:#fff;margin-top:2px;font-size:26px;font-weight:700}.how-to-play-card{flex-direction:column;gap:16px;display:flex}.how-to-title{color:#f0f3f6;font-size:15px;font-weight:600}.instructions-list{flex-direction:column;gap:14px;display:flex}.instruction-item{align-items:center;gap:14px;display:flex}.mouse-icon{flex-shrink:0;justify-content:center;align-items:center;width:28px;display:flex}.instruction-text{flex-direction:column;line-height:1.25;display:flex}.inst-title{color:#f0f3f6;font-size:13px;font-weight:600}.inst-desc{color:var(--text-muted);font-size:12px}.how-to-footer{color:var(--text-subtle);margin-top:4px;font-size:12px;line-height:1.4}.page-footer{align-items:center;gap:16px;width:100%;max-width:580px;margin-top:40px;display:flex}.footer-line{background:var(--border-divider);flex:1;height:1px}.footer-quote{color:var(--text-subtle);white-space:nowrap;letter-spacing:.2px;font-size:12px}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;background:#080a0ebf;justify-content:center;align-items:center;padding:16px;animation:.15s ease-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-dialog{border:1px solid var(--border-subtle);background:#181d25;border-radius:16px;width:100%;max-width:440px;max-height:90vh;padding:20px;animation:.2s cubic-bezier(.16,1,.3,1) scaleIn;overflow-y:auto;box-shadow:0 20px 50px #0009}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-header h3{color:var(--text-primary);font-size:17px;font-weight:600}.modal-close-icon{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:16px;transition:color .15s}.modal-close-icon:hover{color:var(--text-primary)}.stats-table{background:var(--bg-inset);border-radius:10px;flex-direction:column;gap:8px;padding:12px 14px;display:flex}.stats-header-row,.stats-data-row{grid-template-columns:1.2fr 1fr 1fr 1fr;align-items:center;font-size:13px;display:grid}.stats-header-row{text-transform:uppercase;color:var(--text-subtle);border-bottom:1px solid var(--border-divider);padding-bottom:6px;font-size:11px;font-weight:600}.stats-data-row{padding:4px 0}.mode-name{color:var(--text-primary);font-weight:600}.mode-best{font-family:var(--font-mono);color:var(--mint-accent)}.mode-rate{color:#fff;font-weight:600}.modal-footer-btn{justify-content:flex-end;margin-top:18px;display:flex}.modal-primary-btn{background:var(--mint-accent);color:var(--mint-dark);font-family:var(--font-sans);cursor:pointer;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;transition:background .15s}.modal-primary-btn:hover{background:var(--mint-hover)}.settings-options{flex-direction:column;gap:16px;display:flex}.setting-item{justify-content:space-between;align-items:center;gap:12px;display:flex}.setting-name{color:var(--text-primary);font-size:14px;font-weight:600}.setting-desc{color:var(--text-muted);margin-top:2px;font-size:12px}.toggle-switch{border:1px solid var(--border-divider);cursor:pointer;background:#252b36;border-radius:999px;flex-shrink:0;width:44px;height:24px;padding:0;transition:background .2s;position:relative}.toggle-switch.active{background:var(--mint-accent);border-color:var(--mint-accent)}.switch-knob{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s cubic-bezier(.16,1,.3,1);position:absolute;top:2px;left:2px}.toggle-switch.active .switch-knob{background:var(--mint-dark);transform:translate(20px)}.setting-divider{background:var(--border-divider);height:1px;margin:4px 0}.custom-trigger-section{flex-direction:column;gap:8px;display:flex}.modal-secondary-btn{border:1px solid var(--border-divider);color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;background:#ffffff0d;border-radius:8px;margin-top:4px;padding:9px 14px;font-size:13px;font-weight:600;transition:all .15s}.modal-secondary-btn:hover{background:#ffffff1a}.custom-config-form{flex-direction:column;gap:16px;display:flex}.config-field{flex-direction:column;gap:6px;display:flex}.field-label-row{color:var(--text-primary);justify-content:space-between;font-size:13px;font-weight:600;display:flex}.field-val{font-family:var(--font-mono);color:var(--mint-accent)}.field-val.coral-val{color:var(--coral-accent)}.mint-slider{appearance:none;cursor:pointer;background:#252b36;border-radius:999px;outline:none;height:6px}.mint-slider::-webkit-slider-thumb{appearance:none;background:var(--mint-accent);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 0 8px #7ee8a880}.mint-slider.coral-slider::-webkit-slider-thumb{background:var(--coral-accent);box-shadow:0 0 8px #ff7b7280}.custom-summary-card{background:var(--bg-inset);color:var(--text-muted);border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px;display:flex}.density-badge{font-family:var(--font-mono);color:var(--text-primary);font-weight:600}.modal-actions-row{gap:10px;margin-top:6px;display:flex}.modal-cancel-btn{border:1px solid var(--border-divider);color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;background:#ffffff0d;border-radius:8px;flex:1;padding:9px;font-size:13px;font-weight:600}.modal-cancel-btn:hover{color:var(--text-primary)}.modal-submit-btn{background:var(--mint-accent);color:var(--mint-dark);font-family:var(--font-sans);cursor:pointer;border:none;border-radius:8px;flex:1.5;padding:9px;font-size:13px;font-weight:600}.modal-submit-btn:hover{background:var(--mint-hover)}@media (width<=820px){.layout-columns{flex-direction:column;align-items:center}.sidebar-column{width:100%;max-width:480px}.hero-title{font-size:30px}}@media (width<=540px){.minesweeper-app{padding:10px 12px 36px}.top-navbar{padding:6px 0 16px}.nav-menu{gap:14px}.nav-item{font-size:13px}.hero-header{margin-bottom:18px}.hero-title{letter-spacing:-.3px;font-size:24px}.hero-subtitle{font-size:12px}.game-card{border-radius:14px;padding:14px 10px}.difficulty-pills{margin-bottom:10px;padding:2px}.diff-pill{padding:6px 8px;font-size:12px}.status-bar{margin-bottom:10px;padding:7px 12px}.mines-count{font-size:17px}.timer-count{font-size:14px}.smiley-face-btn{width:32px;height:32px}.mode-toggle-container{margin-bottom:10px}.mode-pill{padding:6px 8px;font-size:12px}.stats-card{text-align:center;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 10px;display:grid}.stats-card .card-divider{display:none}.stats-card .section-label{justify-content:center;gap:4px;font-size:11px}.stats-card .section-label svg{width:14px;height:14px}.stats-card .section-label-sub{font-size:11px}.stats-card .best-time-value,.stats-card .section-value-sub{margin-top:4px;font-size:20px}.how-to-play-card{gap:12px;padding:14px 16px}.new-game-btn{padding:11px 16px;font-size:14px}.page-footer{margin-top:28px}.footer-quote{font-size:11px}}