.nbg-levels { grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); }
.nbg-levels button[data-level="veryhard"] { border-color: #d8c5e9; }
.nbg-levels button[data-level="veryhard"].selected { border-color: #8a67c7; background: #f4edfb; box-shadow: 0 0 0 3px rgba(138,103,199,.1); }

.nbg-play-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.nbg-play-head .nbg-level-back,
.nbg-play-head .nbg-game-list-back {
  padding: 8px 12px;
  border: 1px solid #cfe6e1;
  border-radius: 11px;
  color: #23655d;
  background: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.nbg-play-head .nbg-level-back:hover,
.nbg-play-head .nbg-game-list-back:hover { background: #e8f8f4; }

.nbg-question-card { min-height: 510px; overflow: hidden; }
.nbg-phase-label { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 13px; border-radius: 999px; color: #72510b; background: #fff2c8; }
.nbg-phase-label b { font-size: .92rem; }
.nbg-phase-label span { font-size: .82rem; font-weight: 800; }
.nbg-phase-label.ready { color: #087466; background: #e8f8f4; }
.nbg-phase-bar { width: min(620px,90%); height: 11px; margin: 20px auto 0; overflow: hidden; border-radius: 999px; background: #e3eeeb; }
.nbg-phase-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#f0b835,#ffd978); }

.nbg-memory-value.pattern-stage { width: min(620px,92%); min-height: 210px; padding: 18px; font-size: 1rem; }
.nbg-pattern-board { display: grid; grid-template-columns: repeat(var(--pattern-cols),1fr); gap: 10px; width: min(610px,92%); margin: 18px auto 24px; padding: 16px; border: 3px solid #b8e1d8; border-radius: 24px; background: linear-gradient(145deg,#f7fffd,#e4f7f2); box-shadow: inset 0 0 0 7px #fff; }
.nbg-memory-value .nbg-pattern-board { width: 100%; margin: 0; border: 0; box-shadow: none; background: transparent; }
.nbg-pattern-board span { display: grid; place-items: center; min-height: 78px; border-radius: 15px; background: rgba(255,255,255,.86); font-size: clamp(2.6rem,7vw,4.5rem); line-height: 1; box-shadow: 0 4px 12px rgba(22,75,67,.08); }

.nbg-equation strong { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.nbg-equation strong i { display: block; font-style: normal; line-height: .86; transform: translateY(-.03em); }
.nbg-equation.two-operators { gap: clamp(5px,1.4vw,15px); font-size: clamp(1.75rem,5.7vw,3.5rem); }
.nbg-equation.two-operators strong { border-radius: 13px; }

.nbg-order-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.nbg-word-decide { min-height: 44px; }
.nbg-word-decide:disabled { opacity: .45; cursor: not-allowed; }

.nbg-feedback.result { min-height: 132px; align-content: center; }
.nbg-auto-next { width: min(560px,100%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin: 8px auto 0; }
.nbg-auto-next small { min-width: 112px; color: inherit; font-weight: 800; }
.nbg-auto-next button { min-height: 34px; padding: 5px 11px; border: 1px solid currentColor; border-radius: 9px; color: inherit; background: rgba(255,255,255,.65); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.nbg-auto-bar { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(35,101,93,.14); }
.nbg-auto-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: currentColor; }

/* プレイ中は問題・判定・自動進行バーを1画面内に固定する。 */
body.nbg-body:has(.nbg-play) { overflow: hidden; }
body.nbg-body:has(.nbg-play) footer,
.nbg-shell:has(.nbg-play) > .back-button { display: none; }
.nbg-shell:has(.nbg-play) {
  height: calc(100dvh - 82px);
  min-height: 0;
  padding: 8px 12px;
}
.nbg-shell:has(.nbg-play) #brain-game-root { height: 100%; }
.nbg-shell:has(.nbg-play) .nbg-play {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.nbg-shell:has(.nbg-play) .nbg-play-head { margin-bottom: 6px; }
.nbg-shell:has(.nbg-play) .nbg-progress { height: 8px; margin-bottom: 8px; }
.nbg-shell:has(.nbg-play) .nbg-question-card {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(15px, 2.5vh, 25px);
}
.nbg-shell:has(.nbg-play) .nbg-question-card h1 { margin: 5px auto 10px; font-size: clamp(1.45rem, 3.5vh, 2.2rem); }
.nbg-shell:has(.nbg-play) .nbg-main-number,
.nbg-shell:has(.nbg-play) .nbg-memory-value { min-height: min(190px, 29vh); margin: 8px auto 12px; font-size: clamp(4rem, 14vh, 7.5rem); }
.nbg-shell:has(.nbg-play) .nbg-memory-value.compact { min-height: min(165px, 25vh); }
.nbg-shell:has(.nbg-play) .nbg-memory-value.pattern-stage { min-height: min(190px, 29vh); }
.nbg-shell:has(.nbg-play) .nbg-pattern-board { margin: 8px auto 10px; padding: 10px; }
.nbg-shell:has(.nbg-play) .nbg-pattern-board span { min-height: min(68px, 10vh); }
.nbg-shell:has(.nbg-play) .nbg-choices { margin-top: 10px; gap: 8px; }
.nbg-shell:has(.nbg-play) .nbg-choices button { min-height: 58px; padding: 8px 6px; }
.nbg-shell:has(.nbg-play) .nbg-feedback { margin-top: auto; min-height: 46px; padding: 9px 12px; }
.nbg-shell:has(.nbg-play) .nbg-feedback.result { min-height: 104px; }
.nbg-shell:has(.nbg-play) .nbg-phase-bar { margin-top: auto; }
.nbg-shell:has(.nbg-play) .nbg-equation { margin: clamp(12px, 4vh, 30px) auto 16px; }
.nbg-shell:has(.nbg-play) .nbg-built-word { min-height: 64px; margin: 10px auto 10px; padding: 8px; }
.nbg-shell:has(.nbg-play) .nbg-letter-pieces { gap: 7px; margin-bottom: 8px; }
.nbg-shell:has(.nbg-play) .nbg-letter-pieces button { min-width: 50px; min-height: 48px; }
.nbg-shell:has(.nbg-play) .nbg-light-board { width: min(370px, 55vh, 86vw); margin: 8px auto; padding: 10px; gap: 8px; }
.nbg-shell:has(.nbg-play) .nbg-color-board { width: min(390px, 43vh, 86vw); margin-bottom: 10px; }

@media (max-width: 560px) {
  .nbg-question-card { min-height: 0; padding: 17px 12px 19px; }
  .nbg-play-head { grid-template-columns: 1fr auto; gap: 7px; }
  .nbg-play-head .nbg-level-back,
  .nbg-play-head .nbg-game-list-back { flex: 1; min-height: 34px; justify-content: center; padding: 5px 4px; font-size: .68rem; }
  .nbg-play-actions { grid-column: 1 / -1; flex-wrap: nowrap; width: 100%; }
  .nbg-play-head em { grid-column: auto; justify-self: end; padding: 5px 8px; font-size: .78rem; }
  .nbg-play-head > span { display: none; }
  .nbg-question-card h1 { margin-bottom: 15px; font-size: clamp(1.45rem,7vw,2rem); }
  .nbg-main-number,.nbg-memory-value { min-height: 145px; margin: 12px auto 17px; }
  .nbg-memory-value.pattern-stage { min-height: 165px; }
  .nbg-pattern-board { gap: 6px; margin: 10px auto 16px; padding: 10px; }
  .nbg-pattern-board span { min-height: 52px; border-radius: 10px; font-size: clamp(2rem,11vw,3.2rem); }
  .nbg-choices { grid-template-columns: repeat(auto-fit,minmax(88px,1fr)); gap: 7px; margin-top: 15px; }
  .nbg-choices button { min-height: 58px; padding: 10px 5px; }
  .nbg-choices button span { font-size: 1.04rem; }
  .nbg-choices button small { font-size: .72rem; }
  .nbg-feedback { margin-top: 15px; }
  .nbg-feedback.result { min-height: 144px; }
  .nbg-auto-next { grid-template-columns: 1fr auto; }
  .nbg-auto-next small { grid-column: 1 / -1; }
  .nbg-equation { margin: 27px auto 22px; }
  .nbg-equation.two-operators { flex-wrap: nowrap; gap: 4px; font-size: clamp(1.45rem,6vw,2.35rem); }
  .nbg-equation.two-operators strong { border-radius: 9px; }
  .nbg-letter-pieces button { min-width: 48px; min-height: 50px; padding: 6px 10px; font-size: 1.35rem; }

  .nbg-shell:has(.nbg-play) { height: calc(100dvh - 70px); padding: 5px 7px; }
  .nbg-shell:has(.nbg-play) .nbg-play-head { grid-template-columns: 1fr auto; gap: 4px; }
  .nbg-shell:has(.nbg-play) .nbg-play-head em { grid-column: 2; grid-row: 2; padding: 3px 7px; font-size: .68rem; }
  .nbg-shell:has(.nbg-play) .nbg-progress { height: 6px; margin-bottom: 5px; }
  .nbg-shell:has(.nbg-play) .nbg-question-card { padding: 9px 8px; border-radius: 18px; }
  .nbg-shell:has(.nbg-play) .nbg-phase-label { min-height: 30px; padding: 4px 9px; }
  .nbg-shell:has(.nbg-play) .nbg-question-card h1 { margin: 3px auto 6px; font-size: clamp(1.2rem, 5.5vw, 1.65rem); }
  .nbg-shell:has(.nbg-play) .nbg-main-number,
  .nbg-shell:has(.nbg-play) .nbg-memory-value { min-height: min(135px, 23vh); margin: 5px auto 7px; }
  .nbg-shell:has(.nbg-play) .nbg-memory-value.pattern-stage { min-height: min(145px, 24vh); padding: 8px; }
  .nbg-shell:has(.nbg-play) .nbg-pattern-board span { min-height: min(46px, 8vh); }
  .nbg-shell:has(.nbg-play) .nbg-choices { grid-template-columns: repeat(auto-fit,minmax(82px,1fr)); gap: 5px; margin-top: 6px; }
  .nbg-shell:has(.nbg-play) .nbg-choices button { min-height: 48px; padding: 6px 4px; }
  .nbg-shell:has(.nbg-play) .nbg-feedback { min-height: 40px; margin-top: auto; padding: 6px 7px; font-size: .78rem; }
  .nbg-shell:has(.nbg-play) .nbg-feedback.result { min-height: 104px; }
  .nbg-shell:has(.nbg-play) .nbg-auto-next { gap: 5px; margin-top: 4px; }
  .nbg-shell:has(.nbg-play) .nbg-auto-next small { min-width: 0; }
  .nbg-shell:has(.nbg-play) .nbg-equation { margin: 8px auto; }
  .nbg-shell:has(.nbg-play) .nbg-built-word { min-height: 48px; margin: 5px auto; font-size: clamp(1.55rem, 8vw, 2.4rem); }
  .nbg-shell:has(.nbg-play) .nbg-letter-pieces button { min-width: 40px; min-height: 40px; padding: 4px 7px; font-size: 1.1rem; }
  .nbg-shell:has(.nbg-play) .nbg-light-board { width: min(300px, 41vh, 80vw); margin: 5px auto; }
  .nbg-shell:has(.nbg-play) .nbg-color-board { width: min(320px, 35vh, 82vw); margin-bottom: 5px; padding: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .nbg-phase-bar i,.nbg-auto-bar i { transition: none !important; }
}

/* 色数ゲームは内容に合わせて高さを伸ばし、ページをスクロールできるようにする。 */
body.nbg-body[data-brain-game="color-count"]:has(.nbg-play) {
  overflow: auto;
  height: auto;
}
body[data-brain-game="color-count"] .nbg-shell:has(.nbg-play),
body[data-brain-game="color-count"] .nbg-shell:has(.nbg-play) #brain-game-root {
  height: auto;
}
body[data-brain-game="color-count"] .nbg-shell:has(.nbg-play) .nbg-play {
  height: auto;
  display: block;
  overflow: visible;
}
body[data-brain-game="color-count"] .nbg-shell:has(.nbg-play) .nbg-question-card {
  height: auto;
  overflow: visible;
}
body[data-brain-game="color-count"] .nbg-shell:has(.nbg-play) .nbg-color-board {
  width: min(390px, 100%);
  flex-shrink: 0;
}
body[data-brain-game="color-count"] .nbg-shell:has(.nbg-play) .nbg-choices {
  width: min(560px, 100%);
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  flex-shrink: 0;
  margin: 12px auto;
}
body[data-brain-game="color-count"] .nbg-shell:has(.nbg-play) .nbg-feedback {
  width: 100%;
  margin-top: 12px;
  flex-shrink: 0;
}