/* ==========================================================================
   扫雷 · 页面样式
   ========================================================================== */
.d-breadcrumb{max-width:var(--container);margin:0 auto;padding:16px 24px 2px;font-size:13px;color:var(--ink-2)}

.d-breadcrumb a{color:var(--ink-2)}

.d-breadcrumb a:hover{color:var(--primary-strong)}

.d-breadcrumb-sep{margin:0 8px;color:var(--ink-2)}

.d-breadcrumb-current{color:var(--ink-2);max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

.l-hero{max-width:var(--container);margin:0 auto;padding:18px 24px 0}

.l-hero h1{font-size:22px;font-weight:600;line-height:1.4;color:var(--ink-title)}

.l-hero-desc{margin-top:6px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:var(--text-measure)}

.l-page{max-width:var(--container);margin:0 auto;padding:18px 24px 48px}

.console{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}

.tl-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm)}

.tl-card+.tl-card{margin-top:16px}

.tl-card-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);font-size:15px;font-weight:600;color:var(--ink-title)}

.tl-card-head svg{width:15px;height:15px;color:var(--primary-strong);flex-shrink:0}

.tl-card-head .head-title{flex:1;min-width:0}

.tl-card-head .head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

.tl-card-body{padding:16px}

.tool-textarea{width:100%;min-height:180px;padding:12px;font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--ink);background:var(--card);border:1px solid var(--border-input);border-radius:var(--radius-sm);resize:vertical;transition:border-color .15s}

.tool-textarea:focus{border-color:var(--primary)}

.tool-textarea::placeholder{color:var(--placeholder)}

.status-badge{font-size:13px;font-weight:500;padding:2px 10px;border-radius:var(--radius-sm);color:var(--ink-2);background:var(--card-2);flex-shrink:0;white-space:nowrap}

.status-badge.is-ok{color:var(--primary-strong);background:var(--primary-soft)}

.status-badge.is-error{color:var(--ink-2);background:var(--red-soft)}

.act-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

.btn-main{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 18px;font-size:14px;font-weight:500;color:#fff;background:var(--primary);border:none;border-radius:var(--radius-md);transition:background .15s}

.btn-main:hover{background:var(--primary-hover)}

.btn-main:active{background:var(--primary-active)}

.btn-main:disabled{opacity:.55;cursor:not-allowed}

.btn-main svg{width:14px;height:14px}

.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 16px;font-size:14px;color:var(--ink-2);background:var(--card);border:1px solid var(--border-input);border-radius:var(--radius-md);transition:color .15s,border-color .15s}

.btn-line:hover{color:var(--primary-strong);border-color:var(--primary)}

.btn-line svg{width:14px;height:14px}

.btn-mini{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;font-size:13px;color:var(--ink-2);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:color .15s,border-color .15s}

.btn-mini:hover:not(:disabled){color:var(--primary-strong);border-color:var(--primary)}

.btn-mini:disabled{opacity:.55;cursor:not-allowed}

.btn-mini svg{width:13px;height:13px}

.hint{margin-top:10px;font-size:13px;line-height:1.7;color:var(--ink-2)}

.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}

.stat-item{background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px}

.stat-label{display:block;font-size:13px;color:var(--ink-2)}

.stat-value{display:block;margin-top:2px;font-size:18px;font-weight:600;line-height:1.4;color:var(--ink-title);font-variant-numeric:tabular-nums}

.result-box{background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius-sm);min-height:160px;max-height:420px;overflow:auto}

.result-pre{margin:0;padding:16px;font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--ink);white-space:pre-wrap;word-break:break-word;font-variant-numeric:tabular-nums}

.result-empty{padding:48px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}

.result-empty[hidden]{display:none}

.result-empty svg{width:36px;height:36px;color:var(--ink-2)}

.result-empty-text{font-size:14px;color:var(--ink-2);max-width:440px}

.result-empty-detail{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink-2);max-width:100%;overflow-wrap:anywhere}

.result-empty-detail[hidden]{display:none}

.result-empty.is-error svg{color:var(--red)}

.result-empty.is-error .result-empty-text{color:var(--red)}

.check-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;line-height:22px;color:var(--ink-2);cursor:pointer}

.check-row input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}

.file-drop{position:relative;display:flex;align-items:center;justify-content:center;padding:24px;border:1px dashed var(--border-input);border-radius:var(--radius-sm);background:var(--card-2);cursor:pointer}

.file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

.file-meta{display:flex;align-items:center;gap:10px;color:var(--ink-2)}

.file-meta svg{width:20px;height:20px;color:var(--primary-strong)}

.file-name{font-size:14px;font-weight:500;color:var(--ink-title);margin-bottom:2px}

.example-list{display:flex;flex-direction:column;gap:2px}

.example-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;font-size:13px;line-height:18px;color:var(--ink-2);background:transparent;border:none;border-radius:var(--radius-sm);text-align:left;transition:color .15s,background .15s}

.example-item:hover{color:var(--primary-strong);background:var(--card-2)}

.example-item .e-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.example-item .e-meta{font-size:13px;color:var(--ink-2);flex-shrink:0}

.rule-card{margin-top:16px}

.rule-list{list-style:none;display:grid;gap:6px 32px}

.rule-list li{position:relative;padding-left:14px;font-size:13px;line-height:1.8;color:var(--ink-2)}

.rule-list li::before{content:'';position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:var(--ink-4)}

.rule-list code{font-family:var(--mono);font-size:13px;color:var(--ink-2);background:var(--card-2);padding:1px 4px;border-radius:var(--radius-sm)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:1000px){
  .console{grid-template-columns:minmax(0,1fr) 300px}
  .rule-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:1400px){
  .rule-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:1000px){
  .d-breadcrumb{padding:14px 16px 2px}
  .l-hero{padding:14px 16px 0}
  .l-page{padding:14px 16px 40px}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .header-inner{padding:0 16px;gap:12px}
  .tl-card-head{flex-wrap:wrap}
  .tool-textarea{min-height:140px}
  .act-row{display:grid;grid-template-columns:1fr 1fr}
  .act-row .btn-main{grid-column:1/-1}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-box{max-height:320px}
  .footer-bottom{justify-content:center;text-align:center}
  .back-to-top{right:16px;bottom:24px}
}




/* ==========================================================================
   扫雷 · 专属样式
   ========================================================================== */
.mini-list{list-style:none;display:flex;flex-direction:column;gap:8px;}
.mini-list li{position:relative;padding-left:14px;font-size:13px;line-height:1.7;color:var(--ink-2);}
.mini-list li::before{content:'';position:absolute;left:2px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--ink-4);}
.field-label{font-size:13px;color:var(--ink-2);font-weight:500;}
.mini-field{display:flex;align-items:center;gap:10px;margin-top:12px;}
.game-board{position:relative;max-width:100%;overflow:auto;padding:14px;border-radius:14px;background:radial-gradient(120% 120% at 50% 0%,#252b3a 0%,#171b26 60%,#12151f 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.04),0 10px 26px rgba(18,22,34,.18);border:none;}
.canvas-board canvas{display:block;max-width:100%;height:auto;margin:0 auto;background:#e9edf4;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.35);touch-action:manipulation;}
.dir-grid{display:grid;grid-template-columns:repeat(4,44px);gap:8px;justify-content:center;margin-top:12px;}
.dir-btn{width:44px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border-input);border-radius:var(--radius-sm);color:var(--ink-2);cursor:pointer;transition:color .15s,border-color .15s,background .15s;}
.dir-btn:hover{border-color:var(--primary);color:var(--primary-strong);background:var(--primary-soft);}
.dir-btn svg{width:16px;height:16px;}
.g2048-board{display:grid;grid-template-columns:repeat(4,minmax(56px,1fr));gap:8px;max-width:360px;margin:0 auto;}
.g2048-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;font-size:26px;font-weight:700;color:var(--ink-title);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:background .15s,color .15s,transform .15s;}
.g2048-cell.t-2{background:#eef3ff;color:#2c4fbd;}
.g2048-cell.t-4{background:#dbe8ff;color:#2c4fbd;}
.g2048-cell.t-8{background:#c4d7ff;color:#172f75;}
.g2048-cell.t-16{background:#8eb0f5;color:#fff;}
.g2048-cell.t-32{background:#6f96ee;color:#fff;}
.g2048-cell.t-64{background:#4d79df;color:#fff;}
.g2048-cell.t-128{background:#f6c46b;color:#5a3b06;}
.g2048-cell.t-256{background:#f0a949;color:#fff;}
.g2048-cell.t-512{background:#e28b32;color:#fff;}
.g2048-cell.t-1024{background:#cf6d22;color:#fff;}
.g2048-cell.t-2048{background:#a34f15;color:#fff;}
.next-preview{display:grid;grid-template-rows:repeat(4,22px);gap:2px;background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;}
.next-preview .tp-cell{width:22px;height:22px;background:var(--card-2);}
.next-preview .tp-cell.fill{background:var(--primary);border-radius:3px;}
.sudoku-board{display:grid;grid-template-columns:repeat(9,minmax(32px,1fr));max-width:420px;margin:0 auto;gap:0;border:2px solid var(--ink-title);background:var(--ink-title);}
.sudoku-cell{display:flex;align-items:center;justify-content:center;min-height:38px;font-size:16px;font-weight:500;color:var(--ink-title);background:var(--card);border:1px solid var(--border);cursor:text;}
.sudoku-cell.br{border-right-width:2px;}
.sudoku-cell.bb{border-bottom-width:2px;}
.sudoku-cell.is-given{font-weight:700;background:var(--card-2);}
.sudoku-cell.is-selected{background:var(--primary-soft);}
.sudoku-cell.is-error{color:var(--red);background:var(--red-soft);}
.minesweeper-board{display:grid;grid-template-columns:repeat(10,minmax(32px,1fr));gap:3px;max-width:420px;margin:0 auto;padding:12px;background:linear-gradient(150deg,#1d2436 0%,#0f1420 100%);border-radius:14px;box-shadow:inset 0 2px 16px rgba(0,0,0,.5),inset 0 0 0 1px rgba(120,190,255,.12);}
.minesweeper-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;font-size:14px;font-weight:700;color:#9fe0c8;background:linear-gradient(180deg,#2c3a53 0%,#1a2233 100%);border:1px solid rgba(160,220,255,.18);border-radius:6px;cursor:pointer;user-select:none;transition:background .15s,border-color .15s;}
.minesweeper-cell:hover:not(.is-revealed){border-color:var(--primary);}
.minesweeper-cell.is-revealed{background:#1a2b22;border-color:#2e4a37;cursor:default;}
.minesweeper-cell.is-flag{color:#ff5a6e;background:rgba(255,90,110,.16);}
.minesweeper-cell.is-boom{background:var(--red-soft);border-color:var(--red);}
.minesweeper-cell.is-mine{background:#37405a;color:#ffdf6b;}
.minesweeper-cell[data-n="1"]{color:var(--primary-strong);}
.minesweeper-cell[data-n="2"]{color:#188038;}
.minesweeper-cell[data-n="3"]{color:var(--red);}
.minesweeper-cell[data-n="4"]{color:#7a2eb5;}
.sokoban-board{position:relative;display:grid;grid-auto-rows:40px;grid-auto-columns:40px;gap:0;max-width:360px;margin:0 auto;background:var(--card-2);}
.sokoban-cell{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:var(--ink-title);}
.sokoban-wall{background:#68758c;border-radius:4px;}
.sokoban-goal{background:var(--primary-soft);box-shadow:inset 0 0 0 2px var(--primary);}
.sokoban-box{color:#fff;text-shadow:none;}
.sokoban-box::after{content:'';position:absolute;width:28px;height:28px;background:#7a5436;border:1px solid #5f3e24;border-radius:6px;}
.sokoban-box-on::after{background:#2f8a4f;border-color:#1d6437;}
.sokoban-player{position:relative;color:#fff;text-shadow:none;}
.sokoban-player::after{content:'';position:absolute;width:26px;height:26px;background:var(--primary);border-radius:50%;}
.sokoban-cell>span{position:relative;z-index:1;}
.gomoku-board{position:relative;display:grid;grid-template-columns:repeat(15,minmax(20px,1fr));max-width:440px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);}
.gomoku-cell{position:relative;aspect-ratio:1/1;border-right:1px solid var(--border);border-bottom:1px solid var(--border);cursor:pointer;}
.gomoku-cell.br{border-right:0;}
.gomoku-cell.bb{border-bottom:0;}
.gm-stone{position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);border-radius:50%;}
.gm-stone.is-black{background:#26324d;box-shadow:0 2px 4px rgba(20,26,45,.24);}
.gm-stone.is-white{background:#fff;border:1px solid var(--border-input);box-shadow:0 2px 4px rgba(20,26,45,.16);}
.gm-stone.is-win{outline:3px solid var(--red);outline-offset:2px;}
.nonogram-wrap{display:flex;gap:8px;justify-content:center;}
.nonogram-side{display:grid;gap:1px;font-size:11px;line-height:26px;text-align:right;color:var(--ink-2);padding-right:6px;}
.nonogram-board{display:inline-block;}
.nonogram-grid{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);padding:1px;background-clip:content-box;}
.nonogram-cell{width:26px;height:26px;background:var(--card);cursor:pointer;user-select:none;}
.nonogram-cell.is-fill{background:var(--ink-title);}
.nonogram-cell.is-cross{display:flex;align-items:center;justify-content:center;color:var(--red);font-size:16px;font-weight:700;}
.reversi-board{display:grid;grid-template-columns:repeat(8,minmax(38px,1fr));gap:4px;max-width:420px;margin:0 auto;}
.reversi-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:var(--card);border:1px solid var(--border-input);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,border-color .15s;}
.reversi-cell:hover:not(.is-locked){border-color:var(--primary);}
.reversi-cell.is-locked{cursor:default;}
.reversi-cell.is-valid{background:var(--primary-soft);border-color:var(--primary);}
.rv-stone{width:78%;height:78%;border-radius:50%;transition:background .15s;}
.rv-stone.is-black{background:#26324d;box-shadow:0 2px 5px rgba(20,26,45,.24);}
.rv-stone.is-white{background:#fff;border:1px solid var(--border-input);box-shadow:0 2px 5px rgba(20,26,45,.16);}
.klotski-board{position:relative;display:grid;grid-template-columns:repeat(4,minmax(60px,1fr));gap:4px;max-width:320px;margin:0 auto;padding:8px;background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius-sm);}
.klotski-cell{position:relative;aspect-ratio:1/1;background:var(--card);border:1px solid var(--border);}
.klotski-item{position:absolute;display:flex;align-items:center;justify-content:center;background:var(--primary-soft);border:1px solid var(--primary);border-radius:6px;font-size:20px;font-weight:700;color:var(--primary-strong);box-shadow:0 2px 5px rgba(20,26,45,.12);cursor:grab;z-index:2;}
.klotski-item.is-caocao{background:#f8e2d7;border-color:var(--red);color:var(--red);}
.memory-board{display:grid;grid-template-columns:repeat(4,minmax(64px,1fr));gap:8px;max-width:360px;margin:0 auto;}
.memory-card{position:relative;aspect-ratio:1/1;perspective:600px;cursor:pointer;}
.memory-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s;}
.memory-card.is-open .memory-card-inner{transform:rotateY(180deg);}
.memory-face,.memory-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;border-radius:var(--radius-sm);font-size:28px;font-weight:700;}
.memory-face{transform:rotateY(180deg);background:#fff;border:1px solid var(--border);color:var(--ink-title);}
.memory-back{background:var(--primary);border:1px solid var(--primary);color:#fff;font-size:20px;}
.memory-card.is-match .memory-face{background:var(--primary-soft);color:var(--primary-strong);}
.canvas-board canvas:active,.dir-btn:active{cursor:pointer;}
@media(max-width:640px){
  .dir-grid{grid-template-columns:repeat(2,44px);}
  .g2048-board{gap:5px;}
  .g2048-cell{font-size:20px;}
  .sudoku-cell{min-height:30px;font-size:13px;}
  .minesweeper-cell{font-size:12px;}
  .sokoban-board{grid-auto-rows:34px;grid-auto-columns:34px;}
  .sokoban-cell{width:34px;height:34px;font-size:18px;}
  .sokoban-box::after{width:24px;height:24px;}
  .sokoban-player::after{width:22px;height:22px;}
  .nonogram-cell{width:22px;height:22px;}
  .nonogram-side{line-height:22px;}
  .reversi-cell{min-width:30px;}
  .klotski-board{gap:3px;padding:5px;}
  .klotski-item{font-size:15px;}
  .memory-board{gap:6px;}
  .memory-back{font-size:16px;}
  .memory-face{font-size:24px;}
}
.tl-card-body .game-board{margin-bottom:2px;}
.tl-card-body .dir-grid+.hint{margin-top:12px;}