#app.nm-app { width: min(100vw, 760px); max-height: 920px; }
#app.nm-app { font-family: "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", "PingFang TC", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; }
.nm-screen { flex-direction: column; }
#screen-nm-title { align-items: center; justify-content: flex-start; gap: 8px; padding: calc(18px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
.nm-topbar { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.nm-back { color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.nm-intro { width: min(100%, 500px); text-align: center; }
.nm-eyebrow { margin: 10px 0 5px; color: #258878; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.nm-intro h1 { margin: 0; color: #fff; font-family: var(--chunky); font-size: clamp(40px, 11vw, 70px); font-weight: 400; line-height: 1.08; letter-spacing: .04em; text-shadow: 4px 0 var(--ink), -4px 0 var(--ink), 0 4px var(--ink), 0 -4px var(--ink), 0 9px var(--ink); }
.nm-intro h1 span { display: block; margin-top: 10px; color: var(--yellow); font-family: var(--round); font-size: clamp(17px, 4vw, 24px); font-weight: 900; letter-spacing: .08em; text-shadow: 2.5px 0 var(--ink), -2.5px 0 var(--ink), 0 2.5px var(--ink), 0 -2.5px var(--ink), 0 5px var(--ink); }
.nm-subtitle { margin: 13px 0 0; font-size: 16px; line-height: 1.7; }
.nm-title-stage { position: relative; width: min(100%, 420px); height: clamp(100px, 17dvh, 150px); flex: none; }
.nm-stage-caption { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%) rotate(-3deg); padding: 4px 14px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; box-shadow: 0 3px var(--ink); font-size: 13px; font-weight: 900; white-space: nowrap; }
.nm-spark { position: absolute; color: var(--pink); font-size: 42px; text-shadow: 2px 2px var(--ink); animation: nm-float 1.5s ease-in-out infinite alternate; }
.nm-spark-a { top: 6px; left: 17%; }
.nm-spark-b { top: 20px; right: 18%; color: var(--blue); animation-delay: -.7s; }
@keyframes nm-float { to { transform: translateY(-9px) rotate(15deg) scale(1.15); } }
.nm-modes { width: min(100%, 440px); display: grid; gap: 9px; }
.nm-mode { min-width: 0; width: 100%; min-height: 64px; height: auto; padding: 6px 12px; border-width: 3px; border-radius: 19px; font-family: inherit; font-size: 20px; font-weight: 800; line-height: 1.35; }
.nm-mode small { display: block; margin-top: 2px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1.45; }
.nm-mode-blue { background: var(--blue); }
.nm-mode-pink { background: #f05c98; }
.nm-mode-yellow { background: #f2be24; color: var(--ink); text-shadow: 0 1px #fff; }
.nm-note { margin: 2px 0 0; font-size: 14px; line-height: 1.7; text-align: center; }
.nm-legal { margin: 0; font-size: 12px; line-height: 1.65; opacity: .82; text-align: center; }
.nm-legal a { color: inherit; }

#screen-nm-play { padding: calc(8px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; }
#screen-nm-play .hud { flex: none; }
#screen-nm-play .hud2 { flex: none; margin-bottom: 3px; }
#screen-nm-play .stage { flex: 0 0 clamp(70px, 12dvh, 110px); min-height: 70px; }
.nm-question-card { width: min(calc(100% - 22px), 700px); margin: 0 auto 9px; padding: clamp(12px, 2.8vw, 22px); }
.nm-question { max-width: 640px; margin: 16px auto 14px; font-size: clamp(20px, 4.5vw, 29px); font-weight: 700; line-height: 1.6; text-align: center; }
.nm-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.nm-option { min-width: 0; min-height: 66px; padding: 11px 13px; border: 3px solid var(--ink); border-radius: 17px; background: #fff; box-shadow: 0 4px var(--ink); font-family: inherit; font-size: clamp(16px, 2.2vw, 18px); line-height: 1.6; font-weight: 700; text-align: left; cursor: pointer; touch-action: manipulation; transition: transform .12s, box-shadow .12s, background .12s; }
.nm-option:nth-child(4n + 1) { background: #fce7f0; }
.nm-option:nth-child(4n + 2) { background: #e6edff; }
.nm-option:nth-child(4n + 3) { background: #fff5cd; }
.nm-option:nth-child(4n) { background: #e2f8ee; }
.nm-option:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px var(--ink); }
.nm-option:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px var(--ink); }
.nm-option:disabled { cursor: default; }
.nm-option.is-wrong { background: #ecdfff; color: #56417a; animation: nm-wiggle .25s ease-in-out 2; }
.nm-option.is-correct { background: #bdf3d9; }
@keyframes nm-wiggle { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
.nm-feedback { margin: 11px 2px 0; min-height: 1.4em; color: #724786; font-size: 15px; font-weight: 800; text-align: center; }
.nm-feedback.good { color: #18805f; }
.nm-hint { margin: 2px 0 0; padding: 8px 11px; border-radius: 11px; background: #fff4c9; font-size: 15px; line-height: 1.75; }
.nm-explanation { margin-top: 10px; padding: 11px 13px; border-radius: 14px; background: #f6f2ff; font-size: 15px; line-height: 1.8; }
.nm-explanation p { margin: 0; }
.nm-explanation a { display: inline-block; margin-top: 7px; color: #30377f; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.nm-next { display: block; width: min(100%, 320px); min-width: 0; height: 50px; margin: 14px auto 3px; font-size: 18px; }
.nm-next[hidden] { display: none; }
.nm-play-note { flex: none; min-height: 16px; margin: 0; font-size: 13px; opacity: .82; text-align: center; }
.nm-play-credit, .nm-result-credit { font-size: 12px; line-height: 1.6; text-align: center; opacity: .82; }
.pip.missed { background: var(--violet); }
.combo-track i { transition: transform .22s ease; }

#screen-nm-result { align-items: safe center; justify-content: center; padding: 16px; overflow-y: auto; }
.nm-result-card { margin: auto 0; padding: 17px 20px; }
.nm-result-title { margin: 10px 0 0; font-size: clamp(24px, 6vw, 36px); }
.nm-rank { margin: 0; color: #ff5895; font-family: var(--chunky); font-size: clamp(76px, 20vw, 112px); line-height: 1.05; text-shadow: 4px 0 var(--ink), -4px 0 var(--ink), 0 4px var(--ink), 0 -4px var(--ink), 0 10px var(--ink); }
.nm-result-kicker { min-height: 1.4em; margin: 0 0 8px; color: #275c80; font-weight: 900; }
.nm-result-card .stats { margin: 10px 0 7px; }
.nm-result-card .stats div { padding: 5px; }
.nm-result-card .stats dd { font-size: 20px; }
.nm-result-card .actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.nm-result-card .actions .big-btn { flex: 1 0 100%; max-width: 360px; height: 56px; min-width: 0; font-size: 21px; }
.nm-result-card .actions .sub-btn { min-width: 0; padding: 0 12px; font-size: 14px; text-decoration: none; }
.nm-return { display: inline-flex; align-items: center; justify-content: center; }

@media (min-width: 840px) {
  #app.nm-app { width: min(100vw, 760px); }
  #app.nm-app .screen { width: 100%; margin-inline: auto; }
  #screen-nm-title { padding-top: 28px; }
  .nm-mode { height: 64px; }
}
@media (max-width: 520px) {
  .nm-options { grid-template-columns: 1fr; gap: 8px; }
  .nm-option { min-height: 58px; }
  .nm-mode { font-size: 19px; }
  #screen-nm-play .hud { gap: 6px; padding-inline: 10px; }
  #screen-nm-play .clock { gap: 5px; padding: 3px 8px; font-size: 10px; }
  #screen-nm-play .clock b { font-size: 16px; }
  #screen-nm-play .icon-btn { width: 36px; height: 36px; }
  #screen-nm-play .hud2 { padding-inline: 10px; }
  .nm-question-card { width: calc(100% - 16px); }
}
@media (max-height: 760px) {
  #screen-nm-title { gap: 5px; padding-top: 8px; padding-bottom: 8px; }
  .nm-title-stage { height: 76px; }
  .nm-intro h1 { font-size: 38px; }
  .nm-intro h1 span { margin-top: 5px; font-size: 17px; }
  .nm-subtitle { margin-top: 5px; font-size: 12px; }
  .nm-mode { min-height: 56px; font-size: 17px; }
  .nm-mode small { font-size: 10px; }
  .nm-note { font-size: 13px; }
  .nm-legal { font-size: 11px; }
  #screen-nm-play .stage { flex-basis: 55px; min-height: 55px; }
  .nm-question { margin-block: 9px; }
  .nm-option { min-height: 54px; padding-block: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nm-spark, .nm-option.is-wrong { animation: none; }
  .nm-option, .nm-mode { transition: none; }
}