/* Sequence Hopper: the problem panel (KaTeX/HTML) + the scenario panel below. rootClass: "sh-root". */

.game-app .sh-root { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; overflow-y: auto; }
.game-app .sh-step { align-self: center; font-size: .85rem; color: var(--muted); text-align: center; }
.game-app .sh-problem-panel {
  flex: 0 0 auto; height: 340px; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: 8px; padding: 12px; color: var(--text);
}
.game-app .sh-scene-panel {
  flex: 0 0 auto; height: 380px; border-radius: var(--radius); overflow: hidden; background: #0b1020;
}
.game-app .sh-scene-panel canvas { display: block; width: 100% !important; height: 100% !important; }
.game-app .sh-grid {
  display: grid; justify-content: center; align-items: center;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.7rem; line-height: 1.15; color: var(--text);
}
.game-app .sh-cell { text-align: center; min-height: 1.7rem; display: flex; align-items: center; justify-content: center; }
.game-app .sh-gutter { text-align: right; padding-right: 6px; white-space: nowrap; align-self: center; }
.game-app .sh-overline { border-top: 2px solid var(--text); }
.game-app .sh-underline { border-bottom: 2px solid var(--text); }
.game-app .sh-filled { color: var(--accent); }
.game-app .sh-cell-input {
  font: inherit; text-align: center; color: #fff; background: rgba(143,182,217,.12);
  border: none; border-bottom: 2px solid var(--accent); border-radius: 4px 4px 0 0; padding: 0 2px;
  position: relative; z-index: 2;   /* sit above KaTeX's overlapping struts so a click lands here */
}
.game-app .sh-cell-input:focus { outline: none; background: rgba(143,182,217,.28); }
.game-app .sh-cell-input.sh-wrong { border-color: #ff6b6b; background: rgba(255,107,107,.22); animation: sh-shake .3s; }
@keyframes sh-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
.game-app .sh-pop { animation: sh-pop .28s ease-out; }
@keyframes sh-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.game-app .sh-line { padding: 2px 8px; color: var(--text); }
.game-app .sh-line.solved { opacity: .9; }
.game-app .sh-line .sh-cell-input { font-size: .95em; margin: 0 2px; vertical-align: -0.1em; }
.game-app .sh-done { margin-top: 10px; color: var(--text); background: var(--panel); padding: 10px 18px; border-radius: 12px; }