/* Kambana OS - Mines */
.app-mines {
  --mn-closed-a: #c7d2fe; --mn-closed-b: #a5b4fc; --mn-closed-hi: rgba(255, 255, 255, .7); --mn-closed-lo: rgba(49, 46, 129, .22);
  --mn-open: #f1f5f9; --mn-open-alt: #e9eef5; --mn-boom: #ef4444;
  --mn-1: #2563eb; --mn-2: #15803d; --mn-3: #dc2626; --mn-4: #6d28d9; --mn-5: #b45309; --mn-6: #0e7490; --mn-7: #be185d; --mn-8: #475569;
  display: flex; flex-direction: column; background: var(--surface); outline: none; position: relative;
}
[data-theme="dark"] .app-mines {
  --mn-closed-a: #4f5b93; --mn-closed-b: #3d4778; --mn-closed-hi: rgba(255, 255, 255, .16); --mn-closed-lo: rgba(0, 0, 0, .35);
  --mn-open: #1e2433; --mn-open-alt: #222939;
  --mn-1: #7aa7ff; --mn-2: #4ade80; --mn-3: #f87171; --mn-4: #c4a5ff; --mn-5: #fbbf24; --mn-6: #22d3ee; --mn-7: #f472b6; --mn-8: #cbd5e1;
}
.app-mines .mn-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.app-mines .mn-left, .app-mines .mn-right { flex: 1 1 0; display: flex; align-items: center; gap: 2px; min-width: 0; }
.app-mines .mn-right { justify-content: flex-end; }
.app-mines .mn-center { display: flex; align-items: center; gap: 10px; }
.app-mines .mn-level { height: 32px; max-width: 150px; }
.app-mines .mn-lcd {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 10px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2);
}
.app-mines .mn-lcd b { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.app-mines .mn-lcd .mn-flag { width: 17px; height: 17px; display: block; }
.app-mines .mn-face {
  width: 42px; height: 42px; border-radius: 13px; border: 0; display: grid; place-items: center; padding: 0;
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); transition: transform .1s, background .12s;
}
.app-mines .mn-face:hover { background: var(--tile-hover); }
.app-mines .mn-face:active { transform: scale(.94); }
.app-mines .mn-flagmode .mn-flag { width: 19px; height: 19px; }
.app-mines .mn-flagmode.on { background: rgba(239, 68, 68, .16); box-shadow: inset 0 0 0 1.5px rgba(239, 68, 68, .55); color: var(--text); }
.app-mines .icon-btn.on:not(.mn-flagmode) { color: #e5484d; }

.app-mines .mn-stage { flex: 1; min-height: 0; position: relative; display: flex; }
.app-mines .mn-scroll { flex: 1; overflow: auto; display: flex; padding: 14px; }
.app-mines .mn-board { margin: auto; padding: 8px; border-radius: 16px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -26px rgba(0, 0, 0, .55); }
.app-mines .mn-board.shake { animation: mn-shake .45s; }
@keyframes mn-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.app-mines .mn-grid {
  --s: 30px; display: grid; grid-template-columns: repeat(var(--cols), var(--s)); grid-auto-rows: var(--s); gap: 2px;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.app-mines .mn-cell {
  position: relative; border-radius: calc(var(--s) * .2); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: calc(var(--s) * .56); line-height: 1;
  background: linear-gradient(160deg, var(--mn-closed-a), var(--mn-closed-b));
  box-shadow: inset 0 1.5px 0 var(--mn-closed-hi), inset 0 -2px 0 var(--mn-closed-lo);
  transition: background .12s, transform .08s;
}
.app-mines .mn-cell:not(.open):hover { filter: brightness(1.08); }
.app-mines .mn-cell.down { transform: scale(.9); filter: brightness(.95); box-shadow: inset 0 1px 3px var(--mn-closed-lo); }
.app-mines .mn-cell.open { background: var(--mn-open); box-shadow: inset 0 0 0 1px var(--line); }
.app-mines .mn-cell.open.alt { background: var(--mn-open-alt); }
.app-mines .mn-cell.n1 { color: var(--mn-1); } .app-mines .mn-cell.n2 { color: var(--mn-2); } .app-mines .mn-cell.n3 { color: var(--mn-3); } .app-mines .mn-cell.n4 { color: var(--mn-4); }
.app-mines .mn-cell.n5 { color: var(--mn-5); } .app-mines .mn-cell.n6 { color: var(--mn-6); } .app-mines .mn-cell.n7 { color: var(--mn-7); } .app-mines .mn-cell.n8 { color: var(--mn-8); }
.app-mines .mn-cell .mn-flag, .app-mines .mn-cell .mn-mine { width: 66%; height: 66%; display: block; }
.app-mines .mn-cell.flagged { color: #1f2937; }
[data-theme="dark"] .app-mines .mn-cell.flagged { color: #e5e7eb; }
.app-mines .mn-cell.flagged.wrong::after { content: ''; position: absolute; inset: 18%; background: linear-gradient(45deg, transparent 44%, #ef4444 44%, #ef4444 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #ef4444 44%, #ef4444 56%, transparent 56%); }
.app-mines .mn-cell.mine { color: #111827; background: color-mix(in srgb, var(--mn-open) 80%, #ef4444 20%); }
[data-theme="dark"] .app-mines .mn-cell.mine { color: #0b0f19; background: #5b2b33; }
[data-theme="dark"] .app-mines .mn-cell.mine .mn-mine circle:first-of-type { fill: #0b0f19; }
.app-mines .mn-cell.mine.boom { background: radial-gradient(circle, #fde68a 0, #f97316 45%, #dc2626 100%); color: #1a0a00; animation: mn-boom .5s var(--ease); z-index: 2; }
@keyframes mn-boom { 0% { transform: scale(1); } 30% { transform: scale(1.5); } 100% { transform: scale(1); } }
.app-mines .mn-cell.cursor { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 3; }
.app-mines .mn-cell.flood { animation: mn-flood .28s var(--ease) both; }
@keyframes mn-flood { 0% { transform: scale(.6); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }
.app-mines .mn-cell.pop { animation: mn-pop .3s var(--ease) both; }
@keyframes mn-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.app-mines .mn-cell.plant .mn-flag { animation: mn-plant .28s var(--ease) both; transform-origin: 30% 90%; }
@keyframes mn-plant { 0% { transform: translateY(-40%) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.app-mines .mn-cell.peek { animation: mn-peek .35s; }
@keyframes mn-peek { 50% { filter: brightness(1.35); transform: scale(.92); } }
.app-mines .mn-cell.hinted { animation: mn-hint 1.2s; z-index: 2; }
@keyframes mn-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } 30% { box-shadow: 0 0 0 4px rgba(250, 204, 21, .9); } }
.app-mines .mn-cell.wave { animation: mn-wave .6s var(--ease) both; }
@keyframes mn-wave { 0% { transform: none; } 40% { transform: translateY(-22%) scale(1.06); filter: brightness(1.25); } 100% { transform: none; } }
.app-mines.flag-mode .mn-cell:not(.open) { cursor: crosshair; }

.app-mines .mn-paused { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-2); background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.app-mines .mn-paused[hidden] { display: none; }

.app-mines .mn-card {
  position: absolute; left: 50%; bottom: 16px; z-index: 30; transform: translate(-50%, 20px); opacity: 0; transition: transform .3s var(--ease), opacity .25s;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 16px; max-width: calc(100% - 24px);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--glass-border);
}
.app-mines .mn-card[hidden] { display: none; }
.app-mines .mn-card.show { transform: translate(-50%, 0); opacity: 1; }
.app-mines .mn-card-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.app-mines .mn-card.won .mn-card-ic { background: linear-gradient(140deg, #34d399, #059669); }
.app-mines .mn-card.lost .mn-card-ic { background: linear-gradient(140deg, #fb7185, #be123c); color: #1a0306; }
.app-mines .mn-card-ic .mn-mine { width: 22px; height: 22px; }
.app-mines .mn-card-txt { display: flex; flex-direction: column; min-width: 0; margin-right: 4px; }
.app-mines .mn-card-txt b { font-size: 14px; white-space: nowrap; }
.app-mines .mn-card-txt small { color: var(--text-2); font-size: 12px; }

.app-mines .mn-sheet-layer { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .16s; }
.app-mines .mn-sheet-layer.show { opacity: 1; }
.app-mines .mn-sheet-layer[hidden] { display: none; }
.app-mines .mn-sheet { width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line); transform: scale(.96); transition: transform .2s var(--ease); }
.app-mines .mn-sheet-layer.show .mn-sheet { transform: none; }
.app-mines .mn-sheet h2 { margin: 0 0 12px; font-size: 17px; }
.app-mines .mn-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.app-mines .mn-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.app-mines .mn-form small { grid-column: 1 / -1; }
.app-mines .mn-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.app-mines .mn-field .input { width: 100%; }
.app-mines .mn-stats { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.app-mines .mn-stats-row { display: grid; grid-template-columns: 1.4fr .8fr 1.2fr 1fr 1fr; gap: 6px; padding: 8px 10px; border-radius: 9px; font-variant-numeric: tabular-nums; }
.app-mines .mn-stats-row.head { font-size: 11.5px; font-weight: 700; color: var(--text-3); padding-bottom: 4px; }
.app-mines .mn-stats-row.on { background: rgba(var(--accent-rgb), .12); }
.app-mines .mn-stats-row span:first-child { font-weight: 600; }
.app-mines .mn-stats small { margin-top: 8px; padding: 0 10px; }

.reduce-motion .app-mines .mn-cell, .reduce-motion .app-mines .mn-board { animation: none !important; transition: none; }

@media (max-width: 759px) {
  .app-mines .mn-head { padding: 8px; gap: 6px; }
  .app-mines .mn-left { order: 1; flex: 0 0 auto; }
  .app-mines .mn-right { order: 2; flex: 1 1 auto; }
  .app-mines .mn-center { order: 3; width: 100%; justify-content: center; }
  .app-mines .mn-form { grid-template-columns: 1fr 1fr; }
  .app-mines .mn-scroll { padding: 6px; }
  .app-mines .mn-board { padding: 4px; border-radius: 12px; }
  .app-mines .mn-stats-row { grid-template-columns: 1.3fr .7fr 1.2fr 1fr 1fr; font-size: 12px; padding: 7px 6px; }
}