/* coord.css を読み込んだ上での、チュートリアル用の追加・上書き。 */

main { display: block; max-width: 1180px; margin: 0 auto; }

#guide { padding: 18px 22px; margin-bottom: 22px; }
#steplist {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
#steplist li {
  color: var(--dim); font-size: 12px; display: flex; align-items: center; gap: 6px;
}
#steplist li::before {
  content: ''; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line); flex: none;
}
#steplist li.now { color: var(--ink); }
#steplist li.now::before { border-color: var(--ion); box-shadow: 0 0 12px -1px var(--ion); }
#steplist li.ok { color: var(--dim); }
#steplist li.ok::before {
  content: '✓'; border-color: transparent; background: rgba(111, 240, 255, 0.18);
  color: var(--ion); font-size: 10px; text-align: center; line-height: 15px;
}
#instruction { margin: 0; line-height: 1.9; font-size: 15px; }
#instruction b { color: var(--ion); }

.pair { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.pane { padding: 18px 20px 14px; }
.pane h2 { margin: 0 0 14px; font-size: 13px; letter-spacing: 0.08em; color: var(--dim); }
.pane .cap { margin: 12px 0 0; font-size: 11px; color: var(--dim); line-height: 1.7; }
.pane #board { background: none; border: 0; border-radius: 0; padding: 0; }
#maze { display: block; max-width: 100%; height: auto; touch-action: manipulation; }

.same {
  align-self: center; color: var(--dim); font-size: 11px; letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 8px;
}
.same span { position: relative; white-space: nowrap; }
.same span::before, .same span::after {
  content: ''; position: absolute; top: 50%; width: 14px; height: 1px; background: var(--line);
}
.same span::before { left: -20px; }
.same span::after { right: -20px; }

.stats { margin: 22px 0 0; }
.controls { margin-top: 16px; }
.foot { color: var(--dim); font-size: 12px; margin: 18px 0 40px; line-height: 1.8; }
.foot b { color: var(--ink); font-weight: 600; }

/* クリア後のパネル */
.sheet p { line-height: 1.95; margin: 0 0 14px; color: #b9c8de; }
.sheet p b { color: var(--ion); font-weight: 600; }
.rowgrow { margin: 4px 0 18px; display: grid; gap: 7px; }
.rowgrow div { display: flex; align-items: center; gap: 5px; }
.rowgrow i {
  font-style: normal; color: var(--dim); font-size: 11px; width: 48px;
  font-variant-numeric: tabular-nums;
}
.rowgrow u {
  text-decoration: none; height: 11px; width: 54px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(111,240,255,0.45), rgba(176,107,255,0.10));
}

@media (max-width: 860px) {
  .same { display: none; }
  .pair { flex-direction: column; }
  .pane { width: 100%; }
}

@media (max-width: 700px) {
  main { max-width: none; }
  #guide { padding: 14px 16px; margin-bottom: 16px; }
  #instruction { font-size: 14px; line-height: 1.85; }
  .pair { gap: 14px; }
  .pane { padding: 14px 14px 12px; }
  .pane h2 { margin-bottom: 10px; }
  .foot { margin-bottom: 20px; }
  .rowgrow i { width: 42px; }
  .rowgrow u { width: auto; flex: 1; }
}