* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg1: #667eea; --bg2: #764ba2;
  --card: rgba(255,255,255,0.96);
  --ink: #2b2d42; --muted: #666;
  --blue: #2196f3; --blue-d: #1976d2;
  --green: #81c784; --green-d: #4caf50;
  --grey: #bdbdbd; --grey-d: #757575;
  --red: #e53935;
}

body {
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', Arial, sans-serif;
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
  min-height: 100vh; padding: 20px; color: var(--ink);
}

.page { max-width: 1100px; margin: 0 auto; background: var(--card); border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }

header h1 { font-size: 2.2rem; }
header h1 .sub { font-size: 1rem; font-weight: normal; color: var(--muted); margin-left: 10px; }
.lead { color: #444; margin: 10px 0 18px; line-height: 1.6; }

.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.stat { background: linear-gradient(135deg, #f5f7fa, #e4e9f2); border-radius: 12px; padding: 10px 12px; text-align: center; }
.stat .label { font-size: .8rem; color: var(--muted); }
.stat .value { font-size: 1.3rem; font-weight: bold; margin-top: 2px; }

.layout { display: grid; grid-template-columns: 420px 1fr; gap: 24px; align-items: start; }

.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: #333; border-radius: 15px; padding: 16px; width: 100%; aspect-ratio: 1; }
.cell {
  position: relative; border-radius: 50%; cursor: pointer; border: 2px solid #ddd;
  background: linear-gradient(145deg, #fff, #e6e6e6);
  box-shadow: 0 4px 8px rgba(0,0,0,.1), inset 0 2px 4px rgba(255,255,255,.8);
  transition: background .25s, transform .15s;
  display: flex; align-items: center; justify-content: center;
}
.cell.can { background: linear-gradient(145deg, #a8e6a3, var(--green)); border-color: var(--green-d); }
.cell.cannot { background: linear-gradient(145deg, var(--grey), #9e9e9e); border-color: var(--grey-d); }
.cell.fire { background: linear-gradient(145deg, #ff8a80, #ff5722) !important; border-color: #d32f2f; transform: scale(1.12); }
.cell.chain { background: linear-gradient(145deg, #64b5f6, var(--blue-d)) !important; border-color: #0d47a1; transform: scale(1.12); }
.board.locked .cell { cursor: progress; }
.cell svg { width: 60%; height: 60%; transition: transform .18s ease; }
.cell .cnt { position: absolute; right: 4px; bottom: 2px; font-size: .72rem; font-weight: bold; color: #333; background: rgba(255,255,255,.75); border-radius: 8px; padding: 0 5px; min-width: 16px; text-align: center; }
.cell .cnt.zero { display: none; }
.board.nocounts .cnt { display: none; }

.board-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 12px 0; font-size: .95rem; }
.board-tools select { padding: 4px 8px; border-radius: 8px; border: 1px solid #ccc; }
.status { background: #f5f7fa; border-left: 4px solid var(--blue); border-radius: 8px; padding: 10px 12px; min-height: 44px; font-size: .95rem; line-height: 1.5; }

.btn { padding: 9px 18px; border: none; border-radius: 22px; font-weight: bold; cursor: pointer; font-size: .95rem; box-shadow: 0 3px 10px rgba(0,0,0,.12); transition: transform .15s; color: #fff; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(45deg, #42a5f5, var(--blue)); }
.btn.secondary { background: linear-gradient(45deg, #78909c, #607d8b); }

.panels { display: flex; flex-direction: column; gap: 16px; }
.panel { background: linear-gradient(135deg, #f5f7fa 0%, #e8edf7 100%); border-radius: 12px; padding: 16px 18px; }
.panel h2 { font-size: 1.15rem; margin-bottom: 8px; }
.panel p { color: #444; line-height: 1.55; font-size: .93rem; }
.panel .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.panel select { padding: 7px 10px; border-radius: 10px; border: 1px solid #bbb; font-size: .95rem; max-width: 100%; }
.panel.small ul { padding-left: 1.2em; color: #444; font-size: .9rem; line-height: 1.6; }
.note { font-size: .88rem; color: #333; min-height: 1.2em; }

.mini { display: inline-grid; grid-template-columns: repeat(5, 30px); gap: 3px; margin: 6px 0 8px; }
.mini div { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: bold; color: #222; border: 1px solid #c9d2e3; background: #fff; }
.mini div.c1 { background: #dbeafe; } .mini div.c2 { background: #93c5fd; } .mini div.c3 { background: #60a5fa; }
.mini div.c4 { background: #3b82f6; color: #fff; } .mini div.c5 { background: #1e40af; color: #fff; }

.toast { position: fixed; left: 50%; top: 24px; transform: translateX(-50%); background: rgba(33,33,33,.92); color: #fff; padding: 12px 22px; border-radius: 10px; font-weight: bold; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.toast.ok { background: linear-gradient(45deg, #43a047, #2e7d32); }
.toast.hidden { display: none; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 16px; }
  header h1 { font-size: 1.7rem; }
}