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

/* ── Category selector ─────────────────────────────────────────────────────── */

#sb-selector {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; max-width: 500px; margin: 0 auto;
}
#sb-selector.grid-mode { max-width: 500px; }

.sb-cat-btn {
  width: 100%; padding: 16px 20px; font-size: 1.1rem; cursor: pointer;
  background: #16213e; color: #eee; border: 2px solid #0f3460;
  border-radius: 8px; text-align: left; display: flex;
  justify-content: space-between; align-items: center;
}
.sb-cat-btn:hover { background: #0f3460; border-color: #e94560; }
.sb-cat-badge { display: flex; gap: 8px; align-items: center; }
.sb-stat-done { font-size: .75rem; color: #f5a623; }
.sb-stat-prog { font-size: .75rem; color: #4fc3f7; }

/* ── Level grid ────────────────────────────────────────────────────────────── */

.sb-back-btn {
  align-self: flex-start; padding: 8px 16px; font-size: .9rem; cursor: pointer;
  background: none; border: 1px solid #555; border-radius: 6px; color: #aaa;
}
.sb-nav-row {
  width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.sb-nav-row > :first-child { justify-self: start; }
.sb-nav-row > :last-child  { justify-self: end; }
.sb-help-btn {
  padding: 3px 10px; background: none; border: 1px solid #0f3460;
  border-radius: 20px; color: #4fc3f7; cursor: pointer; font-size: .88rem;
}
.sb-help-btn:hover { background: #0f3460; }
.sb-cat-title { font-size: 1.05rem; color: #ccc; font-weight: bold; text-align: center; }
.sb-level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
@media (max-width: 340px) { .sb-level-grid { grid-template-columns: repeat(4, 1fr); } }

.sb-lv-btn {
  position: relative; padding: 0; cursor: pointer; display: block;
  background: #16213e; border: 2px solid #0f3460; border-radius: 6px;
  overflow: hidden; transition: border-color .15s, filter .15s;
}
.sb-lv-btn:hover  { border-color: #4fc3f7; filter: brightness(1.15); }
.sb-lv-btn.solved  { border-color: #f5a623; }
.sb-lv-btn.started { border-color: #4fc3f7; }
.sb-lv-btn canvas { display: block; width: 100%; height: auto; }

.sb-lv-num {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center; font-size: .65rem; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px rgba(0,0,0,.9); padding: 2px 0;
  pointer-events: none; background: linear-gradient(transparent, rgba(0,0,0,.45));
}
.sb-lv-badge {
  position: absolute; top: 3px; right: 4px; font-size: .7rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.9); pointer-events: none; color: #4fc3f7;
}
.sb-lv-seal {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.18); pointer-events: none; border-radius: 4px;
}
.sb-lv-seal span {
  width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(245,166,35,.92); display: flex; align-items: center; justify-content: center;
  color: #1a1a2e; font-size: 1.1rem; font-weight: bold; box-shadow: 0 2px 10px rgba(0,0,0,.65);
}

/* ── Game board ────────────────────────────────────────────────────────────── */

#sb-game { display: none; flex-direction: column; align-items: center; gap: 6px; }
#sb-title-row {
  width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
#sb-title-row > :first-child { justify-self: start; }
#sb-title-row > :last-child  { justify-self: end; }
#sb-title { font-size: 1rem; color: #aaa; text-align: center; }
#sb-status { font-size: 1.05rem; min-height: 1.4em; text-align: center; }
#sb-status.win { color: #f5a623; font-weight: bold; }

#sb-branch-label { font-size: .88rem; min-height: 0; text-align: center; }
#sb-branch-label.live       { color: #4fc3f7; }
#sb-branch-label.impossible { color: #e94560; }

#sb-table-wrap { user-select: none; position: relative; touch-action: none; margin-top: -4px; }
@media (hover: hover) {
  #sb-table-wrap:not(.sb-dragging) td:hover { filter: brightness(0.88); }
}

/* ── Toolbar ───────────────────────────────────────────────────────────────── */

.sb-btn-row {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 8px; justify-content: center;
}
@media (min-width: 440px) { .sb-btn-row { grid-template-columns: repeat(5, auto); } }
.sb-btn-row button {
  padding: 10px 14px; font-size: .9rem; cursor: pointer; min-width: 0;
  background: #16213e; color: #eee; border: 1px solid #0f3460;
  border-radius: 6px; transition: background .15s;
}
.sb-btn-row button:hover:not(:disabled) { background: #0f3460; }
.sb-btn-row button:disabled { opacity: .35; cursor: default; }
.sb-btn-row button.active { background: #0f3460; border-color: #f5a623; color: #f5a623; }
#sb-impossible-btn { border-color: #e94560; color: #e94560; }
#sb-impossible-btn:hover:not(:disabled) { background: #3d0015; }

/* ── Help modal ────────────────────────────────────────────────────────────── */

#sb-help-modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.75); align-items: center; justify-content: center; padding: 16px;
}
#sb-help-modal.open { display: flex; }
#sb-help-box {
  background: #1a1a2e; border: 2px solid #0f3460; border-radius: 12px;
  padding: 28px 24px 20px; max-width: 480px; width: 100%; position: relative;
}
#sb-help-close {
  position: absolute; top: 10px; right: 12px; background: none;
  border: none; color: #555; font-size: 1.1rem; cursor: pointer;
  line-height: 1; padding: 4px 6px;
}
#sb-help-close:hover { color: #eee; }
.sb-slide { display: none; }
.sb-slide.active { display: block; }
.sb-slide h3 { font-size: 1rem; color: #4fc3f7; margin-bottom: 10px; }
.sb-slide p { font-size: .88rem; line-height: 1.65; color: #bbb; }
.sb-slide p + p { margin-top: 8px; }
.sb-slide ul { font-size: .88rem; line-height: 1.8; color: #bbb; padding-left: 18px; }
.sb-slide strong { color: #eee; }
.sb-key {
  display: inline-block; background: #0f3460; border-radius: 4px;
  padding: 1px 6px; font-size: .8rem; color: #4fc3f7;
}
#sb-help-footer {
  display: flex; align-items: center; justify-content: space-between; margin-top: 20px;
}
.sb-hnav {
  padding: 7px 14px; background: #16213e; border: 1px solid #0f3460;
  border-radius: 6px; color: #eee; cursor: pointer; font-size: .88rem;
}
.sb-hnav:hover:not(:disabled) { background: #0f3460; }
.sb-hnav:disabled { opacity: .35; cursor: default; }
#sb-help-dots { display: flex; gap: 6px; align-items: center; }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: #333; cursor: pointer; }
.sb-dot.on { background: #4fc3f7; }